/* Estilos de la landing. Se completan progresivamente durante la migración desde legacy/. */

/* =========================================================
   BLOQUE 01 / HERO — migrado desde legacy/01-hero.elementor.json
   Tres capas, en este orden porque el orden decide qué regla
   gana en selectores de igual especificidad (ver .edsb1-hero > *
   vs .edsb1m-mock más abajo):
     CAPA 1 — fondo      (.edsb1-hero)
     CAPA 2 — mockup     (.edsb1m-mock)
     CAPA 3 — texto/CTA  (.eds-hero-block)
========================================================= */

/* ---------------------------------------------------------
   CAPA 1 — FONDO
--------------------------------------------------------- */
.edsb1-hero {
	/* CRÍTICO: sin esto el padding se SUMA al min-height y en mobile
	   el hero mide 99svh + 120px — el copy se va abajo del fold. */
	box-sizing: border-box;

	position: relative; /* ancla de la capa 2 — imprescindible */
	isolation: isolate;
	overflow: hidden; /* recorta el resplandor del panel */

	min-height: 85vh;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;

	padding: 95px 0 88px;

	background:
		radial-gradient(circle at 4% 6%, rgba(174, 97, 97, 0.2), transparent 29%),
		radial-gradient(circle at 70% 48%, rgba(222, 148, 147, 0.13), transparent 42%),
		radial-gradient(circle at 96% 83%, rgba(222, 148, 147, 0.1), transparent 29%),
		linear-gradient(180deg, #181717, #111111);
}

/* trama de grilla sutil */
.edsb1-hero::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 0;

	pointer-events: none;
	opacity: 0.24;

	background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

	background-size: 46px 46px;
}

/* Las dos capas hijas por encima del fondo.
   El orden en el DOM decide quién va arriba:
   1º = mockup (capa 2)   —   2º = texto (capa 3) */
.edsb1-hero > * {
	position: relative;
	z-index: 3;
	width: 100%;
}

/* ---------- TABLET: el panel baja, el texto queda arriba ---------- */
@media (max-width: 1100px) {
	.edsb1-hero {
		min-height: 820px;
		justify-content: flex-start;
		padding: 78px 0 76px;
	}
}

/* ---------- MOBILE: sin panel, contenido de abajo hacia arriba ---------- */
@media (max-width: 767px) {
	.edsb1-hero {
		/* svh evita el salto por la barra del navegador; vh de fallback */
		min-height: 99vh;
		min-height: 99svh;

		justify-content: flex-end;

		padding: 56px 0 24px;
	}

	/* sin panel en mobile, la luz vuelve al centro */
	.edsb1-hero {
		background: radial-gradient(circle at 4% 6%, rgba(174, 97, 97, 0.2), transparent 34%),
			radial-gradient(circle at 96% 88%, rgba(222, 148, 147, 0.1), transparent 34%),
			linear-gradient(180deg, #181717, #111111);
	}

	.edsb1-hero::before {
		background-size: 38px 38px;
	}
}

/* ---------- CELULARES BAJOS (iPhone SE y similares) ---------- */
@media (max-width: 767px) and (max-height: 700px) {
	.edsb1-hero {
		padding: 72px 0 20px;
	}
}

/* ---------------------------------------------------------
   CAPA 2 — MOCKUP PNG ANIMADO

   ESTRUCTURA: cada transform vive en su propio div.
   .edsb1m-img    → posición y escala   (queda quieto)
     .edsb1m-enter  → entrada: fade + subida
       .edsb1m-swing  → giro en loop
         .edsb1m-float  → flotación en loop
           <img>
   Dos animaciones sobre el MISMO elemento que tocan transform
   no se suman (gana la última) — de ahí la separación en divs.
--------------------------------------------------------- */
.edsb1m-mock {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;

	/* ---------- POSICIÓN Y ESCALA (las 3 perillas) ---------- */
	--m-x: 17%;
	--m-y: 1%;
	--m-scale: 0.78;

	/* ---------- MOVIMIENTO ---------- */
	--m-rise: 46px; /* recorrido de la entrada */
	--m-swing: 1.8deg; /* giro en loop */
	--m-float: 3.5px; /* flotación vertical */
	--m-ease: cubic-bezier(0.22, 0.85, 0.28, 1);

	/* ---------- DEGRADADO BASE ---------- */
	--m-fade: 0px;
	--m-fade-soft: 0px;
}

/* ---------- DEGRADADO A NEGRO EN LA BASE ----------
   Apagado por defecto; se enciende en mobile.
   Color #111111 = el fondo de la CAPA 1. */
.edsb1m-mock::before {
	content: "";
	display: none;
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	height: calc(var(--m-fade) + var(--m-fade-soft));
	background: linear-gradient(
		to top,
		#111111 0,
		#111111 var(--m-fade),
		rgba(17, 17, 17, 0.55) calc(var(--m-fade) + var(--m-fade-soft) * 0.45),
		rgba(17, 17, 17, 0) 100%
	);
}

/* ---------- VELO DIRECCIONAL (desktop) ---------- */
.edsb1m-mock::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		100deg,
		rgba(20, 19, 19, 0.95) 0%,
		rgba(20, 19, 19, 0.78) 33%,
		rgba(20, 19, 19, 0.26) 60%,
		rgba(20, 19, 19, 0) 82%
	);
}

/* 1. POSICIÓN Y ESCALA — este div no se anima nunca */
.edsb1m-img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform-origin: center;

	transform: translate(-50%, -50%) translate(var(--m-x), var(--m-y)) scale(var(--m-scale));
}

.edsb1m-img img {
	display: block;
	width: 940px;
	height: auto;
	max-width: none; /* Elementor a veces fuerza max-width:100%; sin dependencia real acá, se deja por fidelidad */

	filter: contrast(1.1) saturate(1.12) brightness(1.06);
}

/* 2. ENTRADA — fadeIn + subida desde abajo.
   El estado escondido vive DENTRO de la clase .edsb1m-play: si el
   script no corre, la imagen se ve normal en vez de quedar invisible. */
.edsb1m-mock.edsb1m-play .edsb1m-enter {
	opacity: 0;
	will-change: opacity, transform;

	animation-name: edsb1mRise;
	animation-duration: 1s;
	animation-timing-function: var(--m-ease);
	animation-delay: 0.15s;
	animation-fill-mode: both;
}

@keyframes edsb1mRise {
	from {
		opacity: 0;
		transform: translateY(var(--m-rise));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 3. LOOPS — cada uno en su propio div, así no se pisan */
.edsb1m-swing {
	animation: edsb1mSwing 13s cubic-bezier(0.37, 0, 0.63, 1) 1.2s infinite;
}

.edsb1m-float {
	animation: edsb1mFloat 7.6s cubic-bezier(0.37, 0, 0.63, 1) 1.2s infinite;
}

@keyframes edsb1mSwing {
	0%,
	100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(var(--m-swing));
	}
	75% {
		transform: rotate(calc(var(--m-swing) * -1));
	}
}

@keyframes edsb1mFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(calc(var(--m-float) * -1));
	}
	65% {
		transform: translateY(calc(var(--m-float) * -0.35));
	}
}

/* ---------- BREAKPOINTS DEL MOCKUP ---------- */
@media (max-width: 1440px) {
	.edsb1m-mock {
		--m-scale: 0.66;
		--m-x: 15%;
	}
}

@media (max-width: 1200px) {
	.edsb1m-mock {
		--m-scale: 0.56;
		--m-x: 13%;
	}
}

@media (max-width: 1100px) {
	.edsb1m-mock {
		--m-scale: 0.5;
		--m-x: 2%;
		--m-y: 22%;
	}

	.edsb1m-mock::after {
		background: linear-gradient(
			to bottom,
			rgba(20, 19, 19, 0.97) 0%,
			rgba(20, 19, 19, 0.74) 38%,
			rgba(20, 19, 19, 0.14) 70%,
			rgba(20, 19, 19, 0) 100%
		);
	}
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
	.edsb1m-mock {
		--m-scale: 0.535;
		--m-x: 0%;
		--m-y: -20%;

		/* el recorrido de la entrada se escala junto con la imagen,
		   así que en mobile hace falta un número más grande */
		--m-rise: 70px;

		--m-swing: 1.2deg;
		--m-float: 2.5px;
	}

	.edsb1m-mock::before {
		display: block;
		--m-fade: 420px;
		--m-fade-soft: 170px;
	}

	.edsb1m-mock::after {
		background: linear-gradient(
			to bottom,
			rgba(20, 19, 19, 0) 0%,
			rgba(20, 19, 19, 0.06) 42%,
			rgba(20, 19, 19, 0.2) 72%,
			rgba(20, 19, 19, 0.32) 100%
		);
	}

	/* en mobile la flotación se apaga para ahorrar GPU */
	.edsb1m-float {
		animation: none;
	}
}

/* ---------------------------------------------------------
   CAPA 3 — TEXTO
   Scopeado bajo .eds-hero-block. Paleta y easing en variables.css.
--------------------------------------------------------- */
.eds-hero-block,
.eds-hero-block * {
	box-sizing: border-box;
}

.eds-hero-block {
	width: 100%;

	color: var(--eds-white);

	font-family: "Poppins", "Plus Jakarta Sans", "Inter", sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

/* Blindaje contra el tema / Elementor: evita marcadores de lista
   e íconos inyectados por CSS ajeno. Sin ese CSS ajeno acá, pero
   se conserva por fidelidad y como blindaje futuro. */
.eds-hero-block ul,
.eds-hero-block li {
	list-style: none !important;
}

.eds-hero-block li::marker {
	content: "" !important;
}

/* Sólo neutraliza el ::after (el ::before es nuestro tilde) */
.eds-hero-block .eds-hero__checks li::after {
	content: none !important;
}

.eds-hero-block a {
	color: inherit;
	text-decoration: none;
}

.eds-hero-block h1,
.eds-hero-block p {
	margin-top: 0;
}

.eds-hero-block ::selection {
	background: rgba(222, 148, 147, 0.38);
}

.eds-hero-block a:focus-visible {
	outline: 2px solid var(--eds-rose);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- LAYOUT ----------
   El alto, el padding y el centrado vertical son de la CAPA 1.
   Acá sólo queda el ancho de contenido. */
.eds-hero-block .eds-hero__layout {
	position: relative;
	z-index: 2;

	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}

.eds-hero-block .eds-hero__copy {
	min-width: 0;
	max-width: 620px;
}

.eds-hero-block .eds-hero__title {
	max-width: 650px;

	margin-bottom: 12px;

	color: rgba(255, 255, 255, 0.96);

	font-size: clamp(32px, 4vw, 50px);
	font-weight: 420;
	line-height: 0.98;
	letter-spacing: -0.069em;

	text-wrap: balance;
}

.eds-hero-block .eds-hero__title span {
	display: block;

	margin-top: 0.09em;

	font-weight: 650;

	color: transparent;
	-webkit-text-fill-color: transparent;

	background: linear-gradient(
			115deg,
			rgba(255, 238, 240, 0.08) 0%,
			rgba(255, 238, 240, 0) 18%,
			rgba(120, 58, 58, 0.1) 38%,
			rgba(255, 226, 229, 0.1) 58%,
			rgba(120, 58, 58, 0.08) 76%,
			rgba(255, 238, 240, 0.06) 100%
		),
		radial-gradient(circle at 0% -50%, var(--eds-rose-light) 0%, var(--eds-rose) 18%, var(--eds-rose-mid) 74%, var(
					--eds-rose-dark
				) 100%);

	-webkit-background-clip: text;
	background-clip: text;
}

.eds-hero-block .eds-hero__description {
	max-width: 400px;

	margin-bottom: 10px;

	color: rgba(255, 255, 255, 0.72);

	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 350;
	line-height: 1.57;
	letter-spacing: -0.028em;

	text-wrap: pretty;
}

/* ---------- CHECKLIST "SIN..." (apilada) ---------- */
.eds-hero-block .eds-hero__checks {
	list-style: none;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 8px;

	margin: 0 0 16px;
	padding: 0;
}

.eds-hero-block .eds-hero__checks li {
	position: relative;

	display: inline-flex;
	align-items: center;

	min-height: 34px;

	padding: 8px 16px 8px 33px;

	border-radius: 999px;

	border: 1px solid rgba(110, 103, 93, 0.14);
	background: #202020;
	color: #ffffff;

	font-size: 12.5px;
	font-weight: 450;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.eds-hero-block .eds-hero__checks li::before {
	content: "";

	position: absolute;
	left: 13px;
	top: 50%;

	width: 11px;
	height: 6px;

	border-left: 1.7px solid var(--eds-rose);
	border-bottom: 1.7px solid var(--eds-rose);

	transform: translateY(-70%) rotate(-45deg);
}

/* ---------- ACCIONES ---------- */
.eds-hero-block .eds-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 18px;
}

/* =========================================================
   BOTÓN — estética "btn_solid_liquid_rose"
========================================================= */
.eds-hero-block .eds-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	/* !important porque muchos temas fuerzan display en los <a> */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	text-align: center;

	border: none;
	border-radius: 999px;

	padding: clamp(14px, 2vw, 20px) clamp(16px, 5vw, 58px);

	color: #ffffff;
	text-decoration: none;

	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	text-transform: uppercase;

	background: linear-gradient(
			115deg,
			rgba(255, 238, 240, 0.08) 0%,
			rgba(255, 238, 240, 0) 18%,
			rgba(120, 58, 58, 0.1) 38%,
			rgba(255, 226, 229, 0.1) 58%,
			rgba(120, 58, 58, 0.08) 76%,
			rgba(255, 238, 240, 0.06) 100%
		),
		radial-gradient(circle at 0% -50%, var(--eds-rose-light) 0%, var(--eds-rose) 18%, var(--eds-rose-mid) 74%, var(
					--eds-rose-dark
				) 100%);

	box-shadow: 0 8px 18px rgba(120, 58, 58, 0.08);

	transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

/* Reflejo animado que recorre el botón */
.eds-hero-block .eds-button::before {
	content: "";

	position: absolute;
	top: -45%;
	left: -70%;

	width: 38%;
	height: 190%;

	border-radius: 999px;
	z-index: 2;
	pointer-events: none;

	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 245, 246, 0) 26%,
		rgba(255, 245, 246, 0.42) 48%,
		rgba(255, 245, 246, 0.16) 58%,
		rgba(255, 255, 255, 0) 100%
	);

	transform: skewX(-18deg);
	filter: blur(2px);
	opacity: 0;

	animation: tamGlassSweep 5.2s ease-in-out infinite;
}

/* Relieve superior/inferior: nace exactamente desde el borde */
.eds-hero-block .eds-button::after {
	content: "";

	position: absolute;
	inset: 0;

	border-radius: inherit;
	pointer-events: none;
	z-index: 1;

	background: linear-gradient(
		180deg,
		rgba(255, 245, 246, 0.16) 0px,
		rgba(255, 245, 246, 0.07) 1px,
		rgba(255, 245, 246, 0) 5px,
		rgba(255, 245, 246, 0) 100%
	);

	box-shadow: inset 0 1px 0 0 rgba(255, 245, 246, 0.16), inset 0 -1px 0 0 rgba(55, 20, 20, 0.3),
		inset 1px 0 0 0 rgba(255, 230, 233, 0.045), inset -1px 0 0 0 rgba(55, 20, 20, 0.1);
}

/* El texto va por encima del reflejo y del relieve */
.eds-hero-block .eds-button > span {
	position: relative;
	z-index: 3;

	display: block;
	width: 100%;

	text-align: center;
	line-height: inherit;
}

.eds-hero-block .eds-button:active {
	transform: translateY(0) scale(0.99);

	box-shadow: 0 5px 12px rgba(120, 58, 58, 0.14);
}

.eds-hero-block .eds-button:active::after {
	box-shadow: inset 0 1px 0 0 rgba(255, 245, 246, 0.1), inset 0 -1px 0 0 rgba(55, 20, 20, 0.28),
		inset 0 2px 5px 0 rgba(55, 20, 20, 0.16);
}

.eds-hero-block .eds-hero__microcopy {
	display: flex;
	align-items: center;
	text-align: center !important;

	gap: 8px;

	color: rgba(255, 255, 255, 0.6);

	font-size: 12px;
	font-weight: 400;
	line-height: 1;
}

/* ---------- HOVER ---------- */
@media (hover: hover) {
	.eds-hero-block .eds-button:hover {
		transform: translateY(-2px);
		filter: brightness(1.025) saturate(1.04);

		box-shadow: 0 12px 24px rgba(120, 58, 58, 0.22);
	}

	.eds-hero-block .eds-button:hover::after {
		background: linear-gradient(
			180deg,
			rgba(255, 245, 246, 0.19) 0px,
			rgba(255, 245, 246, 0.08) 1px,
			rgba(255, 245, 246, 0) 5px,
			rgba(255, 245, 246, 0) 100%
		);

		box-shadow: inset 0 1px 0 0 rgba(255, 245, 246, 0.18), inset 0 -1px 0 0 rgba(55, 20, 20, 0.34),
			inset 1px 0 0 0 rgba(255, 230, 233, 0.055), inset -1px 0 0 0 rgba(55, 20, 20, 0.11);
	}
}

/* ---------- REVEAL — CSS ANIMATION (mobile-safe) ----------
   El reveal "scale" se fue con el mockup: la CAPA 2 trae su
   propia animación de entrada. Acá queda sólo el del copy. */
.eds-hero-block.eds-hero-reveal [data-eds-reveal] {
	opacity: 0;
	will-change: opacity, transform;

	animation-duration: 1.05s;
	animation-timing-function: var(--eds-ease-out);
	animation-fill-mode: both;
}

.eds-hero-block.eds-hero-reveal [data-eds-reveal="left"] {
	animation-name: edsHeroRevealLeft;
	animation-delay: 0.1s;
}

@keyframes edsHeroRevealLeft {
	0% {
		opacity: 0;
		transform: translateX(-28px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Animación del reflejo del botón */
@keyframes tamGlassSweep {
	0% {
		left: -70%;
		opacity: 0;
	}
	8% {
		opacity: 0;
	}
	16% {
		opacity: 1;
	}
	34% {
		left: 135%;
		opacity: 1;
	}
	42% {
		left: 135%;
		opacity: 0;
	}
	100% {
		left: 135%;
		opacity: 0;
	}
}

/* =========================================================
   TABLET — el panel de la CAPA 2 baja, el texto queda arriba
========================================================= */
@media (max-width: 1100px) {
	.eds-hero-block .eds-hero__copy {
		max-width: 640px;
	}

	.eds-hero-block .eds-hero__title {
		font-size: clamp(38px, 4.6vw, 54px);
	}
}

/* =========================================================
   MOBILE — sin panel, el copy ocupa todo
========================================================= */
@media (max-width: 767px) {
	.eds-hero-block .eds-hero__layout {
		width: min(1200px, calc(100% - 36px));
	}

	.eds-hero-block .eds-hero__copy {
		max-width: 100%;
	}

	.eds-hero-block .eds-hero__title {
		font-size: clamp(21px, 7.8vw, 36px);
		margin-bottom: 8px;
	}

	.eds-hero-block .eds-hero__description {
		font-size: 15px;
		font-weight: 400;
	}

	.eds-hero-block .eds-hero__checks li {
		font-size: 12px;
		font-weight: 300 !important;
	}

	.eds-hero-block .eds-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.eds-hero-block .eds-button {
		width: 100%;
		margin-bottom: 0 !important;

		font-size: 20px;
		line-height: 1;
	}

	.eds-hero-block .eds-hero__microcopy {
		max-width: 100%;
		text-align: center !important;
		align-content: center !important;
		justify-content: center !important;
		margin-top: -2px !important;
		padding: 0 !important;
		line-height: 1;
	}
}

/* =========================================================
   RESTO DEL LEGACY: eliminado.

   Al montar las secciones 01 a 05 desde Elementor, el marcado de los
   bloques 00 y 02 a 10 dejo de existir. Su CSS -- 11.247 lineas -- se
   quito en esta pasada. Cada bloque nuevo trae su propia hoja:

     css/hero-b1.css     bloque 01
     css/section-b2.css  bloque 02
     css/section-b3.css  bloque 03
     css/section-b4.css  bloque 04
     css/section-b5.css  bloque 05

   Lo que queda arriba es el CSS del hero viejo. Se conserva a
   proposito: el hero nuevo reutiliza ocho de sus nombres de clase
   (.edsb1-hero, .preheader, .edsb1m-mock, .edsb1m-img, .edsb1m-enter,
   .edsb1m-swing, .edsb1m-float, .edsb1m-play) y hereda de aca
   cualquier propiedad que hero-b1.css no vuelva a declarar. Sacarlo
   pide una auditoria propiedad por propiedad, todavia pendiente.
========================================================= */