/* =========================================================
   BLOQUE 01 · HERO — traducido desde Elementor

   FUENTE: legacy/imports/01-hero/01-hero.elementor.json
   Valores de tipografía verificados contra el CSS que genera
   Elementor en la pagina real:
     elitedigital-studio.com/wp-content/uploads/elementor/css/post-9.css
   (pagina `codigoshopify-ads1`, arbol `.elementor-9`)

   AUTORIDAD VISUAL: MOBILE.
   El breakpoint del sitio original es 844px, no 767 — los tamanos de
   tipografia viven dentro de `@media (max-width: 844px)` y aca se
   respeta ese numero.

   DESKTOP PENDING REDESIGN — en Elementor el bloque de copy lleva
   `elementor-hidden-desktop`: titular, bajada y microcopy NO se
   muestran arriba de 844px. Se reproduce ese comportamiento tal cual.
   El rediseno desktop es una fase posterior.

   Se cargo despues de styles.css a proposito: las clases `.edsb1-hero`
   y `.edsb1m-*` ya existian en el Legacy con valores anteriores, y este
   archivo es su version nueva.

   QUE SE LIMPIO DE ELEMENTOR
   · envoltorios .elementor-widget-* y .elementor-widget-container
   · los !important que solo servian para pisar a Elementor
   · selectores del arbol .elementor-9 / .elementor-element-*
   · ajustes del plugin EAEL que no se usaban
========================================================= */

/* =========================================================
   BARRA SUPERIOR
   Container con fondo #AE6161 y la receta `div_tam_glass_square`.
========================================================= */
.edsb1-preheader {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 8px 16px;

	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 -20% 150%, #e8b4b8 0%, #de9493 18%, #c97878 74%, #ae6161 100%);

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

/* Filo superior de luz */
.edsb1-preheader::before {
	content: "";

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

	pointer-events: none;

	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%
	);
}

/* Relieve */
.edsb1-preheader::after {
	content: "";

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

	pointer-events: none;

	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);
}

.edsb1-preheader > * {
	position: relative;
	z-index: 3;
}

/* post-9.css: Poppins 300, blanco, centrado. 16px en base. */
.edsb1-preheader .preheader {
	margin: 0;

	color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	text-align: center;

	/* Una sola linea en mobile: el texto ya se acorto a "ARG" y esto
	   evita el segundo renglon en las pantallas mas angostas. */
	white-space: nowrap;
}

.edsb1-preheader .preheader span {
	font-weight: 600;
}

/* =========================================================
   CAPA 1 · FONDO DEL HERO
========================================================= */
.edsb1-hero {
	/* Sin esto el padding se suma al min-height y en mobile el hero
	   mide 99svh + 80px: el copy se va abajo del fold. */
	box-sizing: border-box;

	position: relative;
	isolation: isolate;
	overflow: hidden;

	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%),
		/* cama de luz debajo del panel */ 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 46px */
.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 capas hijas por encima del fondo. El orden en el DOM decide:
   1o el mockup, 2o el copy. */
.edsb1-hero > * {
	position: relative;
	z-index: 3;
	width: 100%;
}

/* =========================================================
   CAPA 2 · MOCKUP ANIMADO

   Cada transform vive en su propio div: dos animaciones sobre el mismo
   elemento no se suman, gana la ultima de la lista.

     .edsb1m-img     posicion y escala   (quieto)
       .edsb1m-enter   entrada
         .edsb1m-swing   giro en loop
           .edsb1m-float   flotacion en loop
========================================================= */
.edsb1m-mock {
	position: absolute;
	inset: 0;
	z-index: 1;

	overflow: hidden;
	pointer-events: none;

	/* posicion y escala */
	--m-x: 17%;
	--m-y: 1%;
	--m-scale: 0.78;

	/* movimiento */
	--m-rise: 46px;
	--m-swing: 1.8deg;
	--m-float: 3.5px;
	--m-ease: cubic-bezier(0.22, 0.85, 0.28, 1);

	/* degradado base — apagado en desktop */
	--m-fade: 0px;
	--m-fade-soft: 0px;
}

/* Degradado a negro en la base. Se enciende en mobile.
   #111111 = el fondo del container. */
.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 */
.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%
	);
}

.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;

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

/* Entrada. El estado escondido vive DENTRO de la clase que pone el
   script: si el JS 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);
	}
}

.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));
	}
}

/* =========================================================
   CAPA 3 · COPY
========================================================= */
.edsb1-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

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

.edsb1-hero__logo {
	display: block;
	width: auto;
	max-width: 260px;
	height: auto;
}

/* post-9.css · elemento 5bab32f — Poppins 300, blanco */
.edsb1-hero .preheadliner {
	margin: 0;

	color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-weight: 300;
	text-align: start;
}

.edsb1-hero .preheadliner strong {
	font-weight: 600;
}

/* post-9.css · elemento da0bcc1 — Inter 300 uppercase, blanco */
.edsb1-hero .promesa {
	margin: 0;
	padding: 0;

	color: #ffffff;

	font-family: "Inter", sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
}

.edsb1-hero .promesa strong {
	font-weight: 900;
	color: #e8b4b8;
	letter-spacing: 0.3px;
	font-size: 19px;
}

/* `pinyon` es una fuente propia del kit de WordPress del sitio, no la
   Pinyon Script de Google. Se declara en css/fonts.css apuntando al
   mismo .ttf que sirve el original, asi que aca resuelve igual que alla.
   Se agrega la cadena de respaldo por si la fuente no llega. */
.edsb1-hero .promesa strong span {
	font-family: "Pinyon", "Pinyon Script", cursive;
	text-transform: none;
	font-weight: 400;

	/* En la referencia "5 Secretos" va en la MISMA linea que "Te voy a
	   revelar los". Con 36px fijos la linea se pasaba 14px del ancho
	   util a 390 y el script caia solo a un renglon. Se vuelve fluido
	   para que entre tambien a 375 y 360, conservando la proporcion
	   frente a las mayusculas (~1.5x) que muestra la captura. */
	font-size: clamp(23px, 7.4vw, 30px);
}

/* =========================================================
   FORMULARIO — inputs y boton liquid glass
   Traducido del CSS del widget Form; sin clases de Elementor.
========================================================= */
.edsb1-form {
	display: flex;
	flex-direction: column;
	gap: 10px;

	width: 100%;
}

.edsb1-form__field {
	position: relative;
	margin: 0;
}

/* La etiqueta existe para lectores de pantalla: el diseno original
   sólo muestra el placeholder. */
.edsb1-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.edsb1-form__input {
	position: relative;

	width: 100%;
	min-height: 40px;
	padding: 0 18px;

	border: none;
	border-radius: 20px;
	outline: none;

	background: linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0.01) 100%
		),
		radial-gradient(
			circle at -40% -80%,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0.1) 18%,
			rgba(255, 255, 255, 0.05) 74%,
			rgba(255, 255, 255, 0.01) 100%
		);

	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
		inset 0 -1px 0 0 rgba(174, 97, 97, 0.12), inset 1px 0 0 0 rgba(255, 255, 255, 0.1),
		inset -1px 0 0 0 rgba(174, 97, 97, 0.06), 0 8px 18px rgba(120, 58, 58, 0.06);

	-webkit-backdrop-filter: blur(14px) saturate(1.18);
	backdrop-filter: blur(14px) saturate(1.18);

	color: #ffffff;
	caret-color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-size: 14px;

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

.edsb1-form__input::placeholder {
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
}

.edsb1-form__input:focus {
	background: linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.07) 18%,
			rgba(174, 97, 97, 0.1) 38%,
			rgba(255, 255, 255, 0.15) 58%,
			rgba(174, 97, 97, 0.07) 76%,
			rgba(255, 255, 255, 0.1) 100%
		),
		radial-gradient(
			circle at 0% -50%,
			rgba(255, 255, 255, 0.38) 0%,
			rgba(255, 255, 255, 0.22) 18%,
			rgba(255, 255, 255, 0.12) 74%,
			rgba(255, 255, 255, 0.08) 100%
		);

	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
		inset 0 -1px 0 0 rgba(174, 97, 97, 0.16), inset 1px 0 0 0 rgba(255, 255, 255, 0.12),
		inset -1px 0 0 0 rgba(174, 97, 97, 0.08), 0 10px 24px rgba(120, 58, 58, 0.1);

	filter: brightness(1.02) saturate(1.02);
}

/* Estado de error — no existia en el original: el widget de Elementor
   usaba la burbuja del navegador. Se resuelve con el filo vino del
   sistema para no inventar un color nuevo. */
.edsb1-form__field[data-invalid="true"] .edsb1-form__input {
	box-shadow: inset 0 0 0 1px #8e4848, 0 8px 18px rgba(120, 58, 58, 0.06);
}

.edsb1-form__error {
	display: block;
	margin: 4px 0 0 18px;

	color: #e8b4b8;

	font-family: "Poppins", sans-serif;
	font-size: 11.5px;
	line-height: 1.3;
}

.edsb1-form__field:not([data-invalid="true"]) .edsb1-form__error {
	display: none;
}

/* Autofill de Chrome */
.edsb1-form__input:-webkit-autofill,
.edsb1-form__input:-webkit-autofill:hover,
.edsb1-form__input:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff;
	transition: background-color 9999s ease-in-out 0s;

	box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(174, 97, 97, 0.12);
}

/* ---------- BOTON ---------- */
.edsb1-form__submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	width: 100%;
	padding: 10px 16px;

	border: none;
	border-radius: 18px;
	outline: none;
	cursor: pointer;

	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%, #e8b4b8 0%, #de9493 18%, #c97878 74%, #ae6161 100%);

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

	color: #ffffff;

	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;

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

.edsb1-form__submit::before {
	content: "";

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

	border-radius: inherit;
	pointer-events: none;

	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%
	);
}

.edsb1-form__submit::after {
	content: "";

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

	border-radius: inherit;
	pointer-events: none;

	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);
}

.edsb1-form__submit > span {
	position: relative;
	z-index: 3;
}

.edsb1-form__submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.025) saturate(1.04);

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

.edsb1-form__submit:hover::before {
	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%
	);
}

.edsb1-form__submit:hover::after {
	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);
}

.edsb1-form__submit:active {
	transform: translateY(0) scale(0.99);
	box-shadow: 0 5px 12px rgba(120, 58, 58, 0.14);
}

.edsb1-form__submit: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);
}

/* Aviso de integracion pendiente. No es microcopy de marketing: es un
   estado del sistema, y desaparece cuando el formulario tenga destino. */
.edsb1-form__pending {
	margin: 0;
	padding: 8px 14px;

	border: 1px dashed rgba(255, 255, 255, 0.28);
	border-radius: 12px;

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

	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
}

/* =========================================================
   DESKTOP — COMPOSICION PROPIA

   Elementor traia el bloque de copy con `elementor-hidden-desktop`: de
   845px para arriba desaparecian titular, bajada y microcopy y el hero
   quedaba en un logo y un formulario sueltos, con una columna vacia
   enorme. Ese criterio se descarta.

   La composicion desktop es TAMARA | COPY:

     · la foto aprobada Tam_hero_desktop.png entra como background-image
       del propio .edsb1-hero, no como <img>. En el archivo la persona
       vive entre el 50% y el 83% del ancho y la mitad izquierda esta
       vacia, asi que el encuadre se resuelve con background-position,
       no con offsets ni transforms;

     · el copy va en la columna derecha de un grid, alineado a la
       izquierda, ocupando el espacio negativo que deja la persona;

     · el mockup de mobile (.edsb1m-mock) se apaga: la foto desktop ya
       trae las notificaciones incorporadas.

   Tipografia, colores, formulario y componentes son los del Legacy: solo
   cambia la disposicion.
========================================================= */
@media (min-width: 845px) {

	.edsb1-hero {
		/* 95vh con techo: en pantallas muy altas el hero dejaba de tener
		   sentido y seguia creciendo. Una sola declaracion, para que nada
		   pueda anular el maximo. */
		min-height: min(95vh, 960px);
		justify-content: center;

		/* Padding superior asimetrico: con justify-content center el
		   conjunto baja la mitad de la diferencia, asi que sigue leyendose
		   centrado pero con mas aire arriba, como en la referencia. */
		padding: 64px 0 0;

		background-image: url("/assets/images/approved/banners/Tam_hero_desktop.png");
		background-repeat: no-repeat;
		/* El zoom se mantiene en 115%: elegido mirando la tira
		   comparativa de 100/105/110/115/120% a 1440x900, es donde la
		   figura queda completa, con la cara visible y sin cortes feos.

		   La POSICION si cambio al invertir la composicion. Con
		   `right center` la persona caia en el 16%-49% del ancho, o sea
		   la mitad izquierda, que es justo donde ahora vive el copy:
		   medido, se superponian. Bajar el porcentaje corre la imagen
		   hacia la derecha y aprovecha el vacio natural que el PNG tiene
		   a la izquierda. */
		background-size: auto 115%;
		/* En la referencia el copy termina cerca del 49% y la figura
		   arranca cerca del 50%: leen como una sola composicion, y el
		   aire viene del espacio negativo izquierdo y del vertical, no
		   de un hueco entre ambos. 43% devuelve esa relacion sin que la
		   persona invada el texto ni se pierdan las notificaciones. */
		background-position: 43% center;
		background-color: #111111;
	}

	/* El mockup de mobile sobra: la foto desktop ya lo trae. */
	.edsb1-hero .edsb1m-mock {
		display: none;
	}

	/* Container + grid. La primera columna es el espacio de la persona;
	   el copy vive en la segunda. Sin offsets absolutos. */
	.edsb1-hero__copy {
		position: relative;
		z-index: 3;

		width: min(1400px, calc(100% - 80px));
		margin-inline: auto;
		padding: 0;

		display: grid;
		/* Tres columnas: aire | copy | Tamara.
		   El error de concepto era pegar el copy al borde izquierdo. En
		   la referencia la columna de texto esta INSETADA: arranca cerca
		   del 20% del ancho y deja un espacio negativo real a su
		   izquierda. La primera columna es ese aire; la tercera es el
		   sector de la foto. Las proporciones mantienen ese 20% solo,
		   sin numeros fijos por breakpoint. */
		/* La columna del copy tiene piso: por debajo de 360px el
		   formulario deja de estructurar el bloque y se vuelve una
		   tira angosta. El aire de los costados cede antes que el. */
		grid-template-columns:
			minmax(0, 0.5fr)
			minmax(360px, 1fr)
			minmax(0, 1.5fr);
		column-gap: 0;
		align-items: center;

		text-align: left;
	}

	/* Todo el copy a la columna derecha, en una pila alineada a izquierda. */
	.edsb1-hero__copy > *,
	.edsb1-hero__copy > * > * {
		text-align: left;
	}

	.edsb1-hero__copy > * {
		grid-column: 2;
		justify-self: stretch;
		margin-inline: 0;
	}

	.edsb1-hero .promesa,
	.edsb1-hero .preheadliner,
	.preheadliner--microcopy {
		text-align: left !important;
	}

	.edsb1-hero__logo {
		width: auto;
		max-width: 196px;
		margin-bottom: 4px;
	}

	.edsb1-hero .preheadliner,
	.edsb1-hero .promesa {
		display: block;
		max-width: 100%;
	}

	.edsb1-hero .preheadliner {
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: -0.1px;
		margin-bottom: 2px;
	}

	/* Los <br> son cortes pensados para el ancho de mobile. */
	.edsb1-hero .preheadliner br {
		display: none;
	}

	/* En la referencia el bloque de promesa tiene dos pesos: la linea
	   rosa manda y las tres lineas de abajo bajan un escalon. Antes eran
	   del mismo tamaño y la jerarquia se perdia. */
	.edsb1-hero .promesa {
		max-width: 100%;
		font-size: 22px;
		line-height: 1.24;
		margin-bottom: 4px;
	}

	.edsb1-hero .promesa strong {
		font-size: 26px;
	}

	.edsb1-hero .promesa strong span {
		font-size: 40px;
	}

	.edsb1-form {
		width: 100%;
		max-width: 100%;
	}

	.edsb1-form button {
		width: 100%;
	}

	.preheadliner--microcopy {
		max-width: 100%;
		text-align: left;
		margin-top: 2px;
	}

}

/* De 1200 para arriba hay aire para subir la escala tipografica. */
@media (min-width: 1200px) {

	.edsb1-hero__copy {
		grid-template-columns:
			minmax(0, 0.48fr)
			minmax(360px, 1fr)
			minmax(0, 1.45fr);
	}

	.edsb1-hero .promesa {
		font-size: 25px;
	}

	.edsb1-hero .promesa strong {
		font-size: 30px;
	}

	.edsb1-hero .promesa strong span {
		font-size: 46px;
	}

	.edsb1-hero .preheadliner {
		font-size: 17px;
	}

}

/* De 1360 para arriba sobra margen a la derecha (119px medidos a 1440),
   asi que el copy puede correrse un poco mas y despegar del todo la
   tarjeta superior de notificaciones del logo. Debajo de 1360 no se
   aplica: ahi la columna del copy se quedaria sin ancho para el form. */
@media (min-width: 1360px) {

	.edsb1-hero__copy {
		grid-template-columns:
			minmax(0, 0.5fr)
			minmax(360px, 1fr)
			minmax(0, 1.5fr);
	}

}

/* Entre 845 y 1100 la persona ocupa proporcionalmente mas: se cierra el
   encuadre para que no invada la columna del copy. */
@media (min-width: 845px) and (max-width: 1099px) {

	/* En 1099->1100 saltaban a la vez el ancho del formulario, la
	   tipografia, el container y el encuadre de la foto: 40px de form y
	   53px de Tamara en un solo pixel. La correccion mas chica es que
	   este tramo LLEGUE a los valores del siguiente en vez de escalonar
	   contra ellos: mismo container, mismo background-position, y los
	   tamaños en unidades fluidas que a 1099 ya valen lo mismo que a
	   1100. El reparto de columnas se conserva. */
	.edsb1-hero {
		background-position: 45% center;
	}

	.edsb1-hero__copy {
		grid-template-columns:
			minmax(0, 0.34fr)
			minmax(360px, 1fr)
			minmax(0, 1.2fr);
	}

	.edsb1-hero .promesa {
		font-size: clamp(18px, 2.0vw, 22px);
	}

	.edsb1-hero .promesa strong {
		font-size: clamp(21px, 2.37vw, 26px);
	}

	.edsb1-hero .promesa strong span {
		font-size: clamp(32px, 3.64vw, 40px);
	}

	.edsb1-form {
		max-width: 100%;
	}

}

/* ---------- TABLET: el panel baja, el texto queda arriba ---------- */
@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%;
	}
}

/* Esta regla del hero era la que rompia el 95vh a 1100: imponia
   min-height 820 mas 154 de padding y el contenido lo empujaba a 880.
   Queda acotada a mobile/tablet, que es donde tenia sentido. */
@media (max-width: 844px) {
	.edsb1-hero {
		min-height: 820px;
		justify-content: flex-start;
		padding: 78px 0 76px;
	}
}

@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 — AUTORIDAD VISUAL

   844px es el breakpoint del sitio original: los tamanos de tipografia
   salen de `@media(max-width:844px)` en post-9.css.
========================================================= */
@media (max-width: 844px) {
	.edsb1-preheader {
		min-height: 36px;
		padding: 6px 12px;
	}

	.edsb1-preheader .preheader {
		font-size: 12px;
		letter-spacing: -0.2px;
	}

	.edsb1-hero__copy {
		align-items: center;
		gap: 8px;

		width: 100%;
		/* 16px, el mismo respiro lateral que el resto de la landing.
		   Venia con 4px: el formulario quedaba pegado al borde. */
		padding: 0 16px 30px;
	}

	.edsb1-hero__logo {
		/* 80% quedaba muy grande contra la referencia: dominaba sobre el
		   mockup y empujaba el copy hacia abajo. */
		width: 58%;
		max-width: 230px;
	}

	.edsb1-hero .preheadliner {
		/* Cada uno de los dos tramos separados por <br> tiene que entrar
		   en un solo renglon, para que el bloque lea en 2 lineas y no en
		   4. Medido: a 360 reales el tramo largo necesita <= 12.5px con
		   ls -0.3; a 390 entra con 13.5. De ahi el valor fluido. */
		font-size: clamp(12.5px, 3.45vw, 14px);
		line-height: 1.32;
		letter-spacing: -0.3px;
		word-spacing: 0em;
		text-align: center;
	}

	/* El microcopy de cierre usa el mismo bloque a otra escala. */
	.edsb1-hero .preheadliner--microcopy {
		font-size: 12px;
		line-height: 17px;
	}

	.edsb1-hero .promesa {
		font-size: 16px;
		line-height: 20px;
		letter-spacing: -0.6px;
		text-align: center;
	}
}

/* ---------- 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;

		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;
	}

	.edsb1m-mock {
		--m-scale: 0.4;
		--m-x: 0%;
		--m-y: -17%;

		/* el recorrido de la entrada se escala con la imagen: en mobile
		   hace falta un numero mas grande para el mismo movimiento */
		--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 flotacion se apaga para ahorrar GPU */
	.edsb1m-float {
		animation: none;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.edsb1m-swing,
	.edsb1m-float,
	.edsb1m-mock.edsb1m-play .edsb1m-enter {
		animation: none;
	}

	.edsb1m-mock.edsb1m-play .edsb1m-enter {
		opacity: 1;
	}
}


/* =========================================================
   FONDO FIJO + GLITTER DEL HERO

   Extraido del sistema de fondo del BLOQUE 03 del Legacy
   (.edsb3-fixed-bg / .edsb3-glitter, hoy solo en el historial de git:
   styles.css L3235-3380 y main.js L1346-1935 del commit 70976a5).

   Se trajo UNICAMENTE el fondo y su animacion. Nada del contenido de
   aquel bloque: ni copy, ni pasos, ni tarjetas, ni titulos, ni sus
   reveals. Todo renombrado al namespace del hero; no queda ninguna
   dependencia .edsb3-*.

   La capa va fija respecto de la ventana y recortada al alto visible
   del hero: mientras el contenido sube con el scroll, el fondo se
   queda quieto. El recorte lo actualiza js/hero-bg.js.

   Orden de pintado dentro de .edsb1-hero (que ya era `isolation:
   isolate`): ::before (grilla vieja) -> .edsb1-bg -> .edsb1-glitter,
   los tres en z-index 0, y por encima el mockup (z1) y el copy (z3).
   No se toco ningun z-index existente ni el layout del hero.
========================================================= */

.edsb1-hero .edsb1-bg {
	position: absolute;
	inset: 0;

	z-index: 0;
	pointer-events: none;

	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),
		radial-gradient(circle at 8% 10%, rgba(174, 97, 97, 0.34), transparent 38%),
		radial-gradient(circle at 94% 86%, rgba(222, 148, 147, 0.24), transparent 42%),
		radial-gradient(ellipse 58% 46% at 52% 48%, rgba(201, 120, 120, 0.12), transparent 68%),
		linear-gradient(180deg, #1c1617 0%, #171415 48%, #121212 100%);

	background-size: 46px 46px, 46px 46px, auto, auto, auto, auto;
	background-position: center top, center top, center, center, center, center;
	background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.edsb1-hero .edsb1-glitter {
	position: absolute;
	inset: 0;

	z-index: 0;
	pointer-events: none;

	width: 100%;
	height: 100%;

	/* Antes 0.7 y con blend `screen`, que sobre este fondo casi oscuro
	   se comia el brillo. En pantalla real no se apreciaba. */
	opacity: 1;
	mix-blend-mode: normal;
}

/* Sin canvas el fondo de gradientes se ve igual: no depende del script. */
@media (prefers-reduced-motion: reduce) {
	.edsb1-hero .edsb1-glitter {
		display: none;
	}
}


/* =========================================================
   DESKTOP · CAPA DE FONDO SOBRE LA FOTO

   Este bloque va al FINAL a proposito. La declaracion base de
   .edsb1-bg se agrego despues del bloque desktop, y con la misma
   especificidad ganaba por orden: su gradiente opaco que cierra en
   #121212 tapaba por completo la foto del hero. De ahi que la imagen
   no se viera pese a estar correctamente aplicada.

   En desktop la capa conserva unicamente la grilla de 46px. El
   contraste del copy se resuelve con un degradado localizado a la
   derecha, donde vive el texto, en vez de un velo general que apagaria
   a la persona.
========================================================= */
@media (min-width: 845px) {

	.edsb1-hero .edsb1-bg {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
		background-size: 46px 46px, 46px 46px;
		background-position: center top, center top;
		background-repeat: repeat, repeat;
	}

}

/* Contraste del copy: un degradado que solo aparece en el tercio
   derecho, donde vive el texto. No es un velo general sobre la foto:
   a la altura de la persona es totalmente transparente. */
@media (min-width: 845px) {

	.edsb1-hero .edsb1-glitter {
		z-index: 1;
	}

	.edsb1-hero::after {
		content: "";

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

		pointer-events: none;

		/* Espejado al invertir la composicion: el refuerzo va del lado
		   IZQUIERDO, que es donde vive el copy. Sobre la persona, a la
		   derecha, la capa es transparente. */
		background: linear-gradient(
			270deg,
			rgba(17, 17, 17, 0) 46%,
			rgba(17, 17, 17, 0.42) 64%,
			rgba(17, 17, 17, 0.68) 100%
		);
	}

}