/**
 * Estilos Frontend — Bersoft Home: Bloque "Campaña Editorial Cinematográfica" — v0.4.0.
 *
 * @package Bersoft_Home
 * @since   0.4.0
 * @version 0.4.0
 */

/* ==========================================================================
   1. CONTENEDOR PRINCIPAL Y DIMENSIONES RESPONSIVE
   ========================================================================== */

.bersoft-editorial-campaign {
	position: relative;
	width: 100%;
	min-height: var(--bs-edit-min-h-d, 500px);
	height: var(--bs-edit-h-d, 680px);
	margin-top: var(--bs-edit-mt-d, 0px);
	margin-bottom: var(--bs-edit-mb-d, 60px);
	background-color: var(--bs-edit-bg-fallback, #07181F);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	contain: layout style;
}

/* Modo Boxed */
.bersoft-editorial-campaign.mode-boxed {
	max-width: var(--bs-edit-max-w, 1420px);
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--bs-edit-radius, 12px);
}

/* ==========================================================================
   2. CAPA DE IMAGEN & FOCAL POINT RESPONSIVE
   ========================================================================== */

.bersoft-editorial-media-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.bersoft-editorial-picture {
	display: block;
	width: 100%;
	height: 100%;
}

.bersoft-editorial-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bs-edit-focal-d, 50% 50%);
	display: block;
	transform: scale(1);
	transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bersoft-editorial-campaign.has-hover-zoom:hover .bersoft-editorial-img {
	transform: scale(1.025);
}

/* Fallback cuando no hay imagen seleccionada */
.bersoft-editorial-fallback-bg {
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 75% 35%, #0F4C5C 0%, #07181F 70%, #030C10 100%);
}

/* ==========================================================================
   3. OVERLAYS CINEMÁTICOS MAKAHA
   ========================================================================== */

.bersoft-editorial-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.overlay-cinematic_makaha .bersoft-editorial-overlay {
	background: linear-gradient(
		to right,
		rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-d, 0.45) * 1.55)) 0%,
		rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-d, 0.45) * 1.10)) 38%,
		rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-d, 0.45) * 0.45)) 70%,
		rgba(7, 24, 31, 0.05) 100%
	);
}

.overlay-gradient_side .bersoft-editorial-overlay {
	background: linear-gradient(
		var(--bs-edit-ovl-dir, to right),
		rgba(7, 24, 31, var(--bs-edit-ovl-op-d, 0.45)) 0%,
		transparent 100%
	);
}

.overlay-gradient_bottom .bersoft-editorial-overlay {
	background: linear-gradient(
		to top,
		rgba(7, 24, 31, var(--bs-edit-ovl-op-d, 0.45)) 0%,
		transparent 100%
	);
}

.overlay-solid .bersoft-editorial-overlay {
	background-color: var(--bs-edit-ovl-color, #07181F);
	opacity: var(--bs-edit-ovl-op-d, 0.45);
}

/* ==========================================================================
   4. ESTRUCTURA Y POSICIONAMIENTO DEL CONTENIDO
   ========================================================================== */

.bersoft-editorial-container {
	position: relative;
	width: 100%;
	max-width: var(--bs-edit-max-w, 1420px);
	margin: 0 auto;
	padding: 0 var(--bs-edit-pad-lat-d, 28px);
	box-sizing: border-box;
	z-index: 3;
	display: flex;
	height: 100%;
}

/* Posicionamiento Horizontal y Vertical en Desktop */
.bersoft-editorial-container {
	justify-content: flex-start;
	align-items: center;
}

.bersoft-editorial-content-box {
	max-width: var(--bs-edit-cnt-max-w, 640px);
	width: 100%;
	box-sizing: border-box;
	transform: translate(var(--bs-edit-off-x-d, 0px), var(--bs-edit-off-y-d, 0px));
}

/* ==========================================================================
   5. JERARQUÍA TIPOGRÁFICA EDITORIAL
   ========================================================================== */

/* Antetítulo / Eyebrow */
.bersoft-editorial-eyebrow {
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: var(--bs-edit-eyebrow-size-d, 13px);
	font-weight: var(--bs-edit-eyebrow-weight-d, 700);
	line-height: var(--bs-edit-eyebrow-lh-d, 1.2);
	letter-spacing: var(--bs-edit-eyebrow-ls-d, 0.16em);
	text-align: var(--bs-edit-eyebrow-align-d, left);
	text-transform: var(--bs-edit-eyebrow-transform, uppercase);
	color: var(--bs-edit-eyebrow-color, #E0F2FE);
	margin: 0 0 var(--bs-edit-eyebrow-mb-d, 12px) 0;
	display: block;
}

/* Título Principal */
.bersoft-editorial-title {
	font-family: var(--bs-font-family-heading, 'Proxima Nova', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: var(--bs-edit-title-size-d, 48px);
	font-weight: var(--bs-edit-title-weight-d, 900);
	line-height: var(--bs-edit-title-lh-d, 1.05);
	letter-spacing: var(--bs-edit-title-ls-d, -0.02em);
	text-align: var(--bs-edit-title-align-d, left);
	text-transform: var(--bs-edit-title-transform, uppercase);
	color: var(--bs-edit-title-color, #FFFFFF);
	margin: 0 0 var(--bs-edit-title-mb-d, 16px) 0;
	text-wrap: balance;
}

/* Descripción */
.bersoft-editorial-desc {
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: var(--bs-edit-desc-size-d, 17px);
	font-weight: var(--bs-edit-desc-weight-d, 400);
	line-height: var(--bs-edit-desc-lh-d, 1.55);
	letter-spacing: var(--bs-edit-desc-ls-d, 0);
	text-align: var(--bs-edit-desc-align-d, left);
	text-transform: var(--bs-edit-desc-transform, none);
	color: var(--bs-edit-desc-color, rgba(255, 255, 255, 0.92));
	margin: 0 0 var(--bs-edit-desc-mb-d, 24px) 0;
	text-wrap: pretty;
}

/* Texto Secundario */
.bersoft-editorial-sec-text {
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', sans-serif);
	font-size: var(--bs-edit-sec-size-d, 14px);
	font-weight: var(--bs-edit-sec-weight-d, 400);
	line-height: var(--bs-edit-sec-lh-d, 1.4);
	letter-spacing: var(--bs-edit-sec-ls-d, 0);
	text-align: var(--bs-edit-sec-align-d, left);
	text-transform: var(--bs-edit-sec-transform, none);
	color: var(--bs-edit-sec-color, rgba(255, 255, 255, 0.75));
	margin: 0 0 var(--bs-edit-sec-mb-d, 16px) 0;
}

/* ==========================================================================
   6. BOTONES / ACCIONES CALL TO ACTION
   ========================================================================== */

.bersoft-editorial-actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.bersoft-editorial-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', sans-serif);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 8px;
	box-sizing: border-box;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 150ms ease;
	cursor: pointer;
}

.bersoft-editorial-btn .bersoft-btn-arrow {
	transition: transform 150ms ease;
	display: inline-block;
}

.bersoft-editorial-btn:hover .bersoft-btn-arrow {
	transform: translateX(4px);
}

/* Estilo Primario */
.bersoft-editorial-btn-primary.btn-style-primary_editorial {
	background-color: var(--bs-edit-btn-p-bg, #0F4C5C);
	color: var(--bs-edit-btn-p-color, #FFFFFF);
	border: 1px solid var(--bs-edit-btn-p-border, #0F4C5C);
}

.bersoft-editorial-btn-primary.btn-style-primary_editorial:hover {
	background-color: var(--bs-edit-btn-p-h-bg, #0B3844);
	color: var(--bs-edit-btn-p-h-color, #FFFFFF);
	border-color: var(--bs-edit-btn-p-h-border, #0B3844);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -4px rgba(15, 76, 92, 0.45);
}

/* Estilo Secundario / Outline */
.bersoft-editorial-btn-sec.btn-style-outline {
	background-color: var(--bs-edit-btn-s-bg, transparent);
	color: var(--bs-edit-btn-s-color, #FFFFFF);
	border: 1px solid var(--bs-edit-btn-s-border, rgba(255, 255, 255, 0.60));
	backdrop-filter: blur(4px);
}

.bersoft-editorial-btn-sec.btn-style-outline:hover {
	background-color: var(--bs-edit-btn-s-h-bg, rgba(255, 255, 255, 0.15));
	color: var(--bs-edit-btn-s-h-color, #FFFFFF);
	border-color: var(--bs-edit-btn-s-h-border, #FFFFFF);
	transform: translateY(-2px);
}

/* Estilo Enlace Editorial */
.bersoft-editorial-btn.btn-style-editorial_link {
	background: transparent;
	padding: 8px 0;
	border: none;
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bersoft-editorial-btn.btn-style-editorial_link:hover {
	color: #38BDF8;
}

/* ==========================================================================
   7. BENEFICIOS / ATRIBUTOS EDITORIALES INFERIORES
   ========================================================================== */

.bersoft-editorial-features {
	list-style: none;
	margin: 0;
	padding: 16px 0 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.bersoft-editorial-feat-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bersoft-editorial-feat-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--bs-edit-feat-icon-bg, rgba(56, 189, 248, 0.12));
	color: var(--bs-edit-feat-icon-color, #38BDF8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bersoft-editorial-feat-text {
	display: flex;
	flex-direction: column;
}

.bersoft-editorial-feat-title {
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', sans-serif);
	font-size: var(--bs-edit-feat-title-size-d, 14px);
	font-weight: var(--bs-edit-feat-title-w-d, 700);
	line-height: 1.2;
	color: var(--bs-edit-feat-title-color, #FFFFFF);
}

.bersoft-editorial-feat-sub {
	font-family: var(--bs-font-family-body, 'Proxima Nova', 'DM Sans', sans-serif);
	font-size: var(--bs-edit-feat-sub-size-d, 12px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--bs-edit-feat-sub-color, rgba(255, 255, 255, 0.70));
}

/* ==========================================================================
   8. RESPONSIVE TABLET (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	.bersoft-editorial-campaign {
		height: var(--bs-edit-h-t, 560px);
		min-height: var(--bs-edit-min-h-t, 440px);
		margin-top: var(--bs-edit-mt-t, 0px);
		margin-bottom: var(--bs-edit-mb-t, 45px);
	}

	.bersoft-editorial-container {
		padding: 0 var(--bs-edit-pad-lat-t, 24px);
	}

	.bersoft-editorial-img {
		object-position: var(--bs-edit-focal-t, 50% 50%);
	}

	.overlay-cinematic_makaha .bersoft-editorial-overlay {
		background: linear-gradient(
			to right,
			rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-t, 0.50) * 1.65)) 0%,
			rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-t, 0.50) * 1.20)) 45%,
			rgba(7, 24, 31, 0.15) 100%
		);
	}

	.bersoft-editorial-content-box {
		transform: translate(var(--bs-edit-off-x-t, 0px), var(--bs-edit-off-y-t, 0px));
	}

	.bersoft-editorial-eyebrow {
		font-size: var(--bs-edit-eyebrow-size-t, 12px);
		margin-bottom: var(--bs-edit-eyebrow-mb-t, 10px);
	}

	.bersoft-editorial-title {
		font-size: var(--bs-edit-title-size-t, 38px);
		margin-bottom: var(--bs-edit-title-mb-t, 14px);
	}

	.bersoft-editorial-desc {
		font-size: var(--bs-edit-desc-size-t, 15.5px);
		margin-bottom: var(--bs-edit-desc-mb-t, 20px);
	}

	.bersoft-editorial-features {
		gap: 20px;
	}
}

/* ==========================================================================
   9. RESPONSIVE MÓVIL (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
	.bersoft-editorial-campaign {
		height: var(--bs-edit-h-m, 620px);
		min-height: var(--bs-edit-min-h-m, 480px);
		margin-top: var(--bs-edit-mt-m, 0px);
		margin-bottom: var(--bs-edit-mb-m, 35px);
		align-items: flex-end;
		padding-bottom: 28px;
	}

	.bersoft-editorial-container {
		padding: 0 var(--bs-edit-pad-lat-m, 18px);
		align-items: flex-end;
	}

	.bersoft-editorial-img {
		object-position: var(--bs-edit-focal-m, 50% 50%);
	}

	.overlay-cinematic_makaha .bersoft-editorial-overlay {
		background: linear-gradient(
			to top,
			rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-m, 0.55) * 1.75)) 0%,
			rgba(7, 24, 31, calc(var(--bs-edit-ovl-op-m, 0.55) * 1.30)) 50%,
			rgba(7, 24, 31, 0.20) 100%
		);
	}

	.bersoft-editorial-content-box {
		transform: translate(var(--bs-edit-off-x-m, 0px), var(--bs-edit-off-y-m, 0px));
		text-align: center;
	}

	.bersoft-editorial-eyebrow {
		font-size: var(--bs-edit-eyebrow-size-m, 11px);
		text-align: var(--bs-edit-eyebrow-align-m, center);
		margin-bottom: var(--bs-edit-eyebrow-mb-m, 8px);
	}

	.bersoft-editorial-title {
		font-size: var(--bs-edit-title-size-m, 30px);
		text-align: var(--bs-edit-title-align-m, center);
		margin-bottom: var(--bs-edit-title-mb-m, 12px);
	}

	.bersoft-editorial-desc {
		font-size: var(--bs-edit-desc-size-m, 14.5px);
		text-align: var(--bs-edit-desc-align-m, center);
		margin-bottom: var(--bs-edit-desc-mb-m, 18px);
	}

	.bersoft-editorial-actions {
		justify-content: center;
		width: 100%;
		gap: 10px;
		margin-bottom: 20px;
	}

	.bersoft-editorial-btn {
		width: auto;
		padding: 12px 20px;
		font-size: 13.5px;
	}

	.bersoft-editorial-features {
		justify-content: center;
		gap: 16px;
		padding-top: 14px;
	}

	.bersoft-editorial-feat-item {
		gap: 8px;
	}

	.bersoft-editorial-feat-icon {
		width: 28px;
		height: 28px;
	}

	.bersoft-editorial-feat-title {
		font-size: var(--bs-edit-feat-title-size-m, 12px);
	}

	.bersoft-editorial-feat-sub {
		font-size: var(--bs-edit-feat-sub-size-m, 10.5px);
	}
}

/* ==========================================================================
   10. ACCESIBILIDAD — PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bersoft-editorial-img,
	.bersoft-editorial-btn,
	.bersoft-editorial-btn .bersoft-btn-arrow {
		transition: none !important;
		transform: none !important;
	}
}