/* ==========================================================================================================
   Hero · "Ve el mundo con claridad"
   Fondo: la foto de la tienda como se ve sin lentes (borrosa, lavada de cielo). Al frente, los lentes (lienzo 3D o
   composición estática) muestran la foto nítida a través de las micas. Texto a la izquierda en escritorio y arriba
   en pantallas angostas; el probador de estilo y acabado es una pieza de vidrio discreta.
   ========================================================================================================== */

.sec--hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(620px, 100svh);
	padding: 0;
	overflow: clip;
	isolation: isolate;
	/* La misma neblina de cielo que pinta el lienzo: si algo deja ver el fondo en un borde, se ve cielo */
	background: linear-gradient(180deg, #dcecff 0%, #e9f3ff 55%, #f9fbff 100%);
}

/* ---------- Escena: foto sin lentes ------------------------------------------------------------------------ */
.hero__escena {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
/* Más grande que la sección (la recorta .hero__escena): el borde que deja el desenfoque queda fuera y la foto cubre
   la sección de orilla a orilla, también arriba */
.hero__respaldo {
	position: absolute;
	inset: -48px;
	width: calc(100% + 96px);
	height: calc(100% + 96px);
	max-width: none;
	object-fit: cover;
	object-position: 55% 48%;
	filter: blur(18px) saturate(0.75) brightness(1.04);
}
/* Neblina de cielo y lavado blanco detrás del texto (el lienzo 3D pinta lo mismo en su shader) */
.hero__escena::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(249, 251, 255, 0.9) 0%, rgba(249, 251, 255, 0.76) 34%, rgba(240, 247, 255, 0.5) 62%, rgba(236, 245, 255, 0.48) 100%),
		linear-gradient(180deg, rgba(214, 233, 255, 0.5) 0%, rgba(255, 255, 255, 0.32) 62%, #fff 100%);
	pointer-events: none;
}
.hero__lienzo {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	opacity: 0;
}
/* Con el lienzo ya visible (y opaco), la foto de respaldo y su neblina quedan tapadas: no se componen */
.hero--lienzo .hero__respaldo,
.hero--lienzo .hero__escena::after { visibility: hidden; }
/* Mide el alto de la pantalla grande (sin la barra del navegador del teléfono); la lee hero.js */
.hero__sonda {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100vh;
	height: 100lvh;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Texto ------------------------------------------------------------------------------------------- */
.hero__contenido {
	position: relative;
	z-index: 5;
	padding-block: clamp(96px, 14svh, 150px) clamp(112px, 17svh, 180px);
}
/* Entrada del texto: cada pieza (y cada palabra del título) llega enfocándose desde el primer pintado. La anima un
   script en línea del propio HTML con Web Animations: no espera a los módulos ni a three.js, y no se reinicia cuando
   ScrollTrigger mueve la sección al fijarla (eso reinicia las animaciones CSS). Las palabras son inline-block para
   poder desplazarlas. */
.hero__palabra { display: inline-block; }

.sec--hero .titulo-xl {
	font-size: clamp(2.75rem, min(1.05rem + 5.2vw, 10.8svh), 6.5rem);
	max-width: 12ch;
	margin-block: 18px 22px;
	letter-spacing: -0.042em;
}
.hero__entrada { max-width: 34rem; }
.sec--hero .acciones { margin-top: 32px; }
.hero__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 28px;
	font-size: var(--t-chico);
	font-weight: 600;
	color: var(--texto-2);
}
.hero__sellos li { display: inline-flex; align-items: center; gap: 9px; }
/* Viñeta: una burbuja de agua con su brillo */
.hero__sellos li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #fff 0 16%, #aee6ff 34%, var(--aqua) 72%, #0b8db3 100%);
	box-shadow: inset 0 -1px 2px rgba(0, 60, 90, 0.25), 0 1px 3px rgba(22, 191, 227, 0.4);
}

/* Donde reposan los lentes (lo mide el módulo) */
.hero__marco {
	position: absolute;
	left: 48%;
	right: 2%;
	top: 12%;
	bottom: 22%;
	pointer-events: none;
}

/* ---------- Probador ------------------------------------------------------------------------------------------ */
.hero__probador {
	position: absolute;
	z-index: 6;
	right: max(var(--gutter), calc((100% - var(--ancho)) / 2));
	bottom: clamp(18px, 4.5svh, 40px);
}
.hero__probador:empty { display: none; }
.hero__probador-panel {
	position: relative;
	display: grid;
	gap: 6px;
	padding: 12px 14px 12px 18px;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64));
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 1px var(--borde), var(--brillo-vidrio), var(--sombra);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	overflow: hidden;
}
/* Reflejo "gloss" en la mitad superior del vidrio */
.hero__probador-panel::before {
	content: "";
	position: absolute;
	inset: 1px 1px 52%;
	border-radius: 23px 23px 40% 40% / 23px 23px 14px 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06));
	pointer-events: none;
}
.hero__probador-panel > * { position: relative; }
.hero__probador-titulo {
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azul-marca);
	margin-bottom: 2px;
}
.hero__fila { display: flex; align-items: center; gap: 10px; }
.hero__etiqueta { flex: none; width: 4.4rem; font-size: var(--t-mini); font-weight: 600; color: var(--texto-3); }
.hero__opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.sec--hero .hero__chip { padding: 0 15px; font-size: 0.84rem; justify-content: center; }

.hero__muestra {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.hero__muestra::before {
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--muestra);
	box-shadow: inset 0 0 0 1px rgba(10, 23, 51, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(10, 23, 51, 0.18);
	transition: transform 0.35s var(--ease-resorte), box-shadow 0.3s var(--ease-out);
}
.hero__muestra::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	width: 18px;
	height: 10px;
	margin-left: -9px;
	border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
	pointer-events: none;
	transition: transform 0.35s var(--ease-resorte);
}
.hero__muestra:hover::before,
.hero__muestra:hover::after { transform: scale(1.08); }
.hero__muestra[aria-checked="true"]::before {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul-marca), 0 6px 12px -2px rgba(20, 55, 230, 0.35);
}
.hero__muestra:focus-visible { outline-offset: 0; border-radius: 50%; }
/* Ancho del nombre más largo ("Carey miel"): al cambiar de acabado o de familia, las muestras no se mueven */
.hero__acabado-nombre { min-width: 5.6em; font-size: var(--t-chico); font-weight: 650; color: var(--texto); white-space: nowrap; }

/* ---------- Pista de scroll y frase final --------------------------------------------------------------------- */
.hero__pista {
	position: absolute;
	z-index: 5;
	left: max(var(--gutter), calc((100% - var(--ancho)) / 2));
	bottom: clamp(24px, 5svh, 48px);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texto-2);
}
.sec--hero:not(.hero--3d) .hero__pista { display: none; }
.hero__raton {
	position: relative;
	width: 22px;
	height: 34px;
	border-radius: 12px;
	border: 1.5px solid rgba(14, 42, 92, 0.35);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
	box-shadow: var(--brillo-vidrio);
}
.hero__raton::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 7px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--azul-marca);
	/* 5 vueltas y se queda quieta: infinita recomponía la página en cada cuadro aun con el hero fuera de pantalla */
	animation: hero-rueda 1.8s var(--ease-in-out) 5;
}
@keyframes hero-rueda {
	0% { transform: translateY(0); opacity: 0; }
	25% { opacity: 1; }
	70% { transform: translateY(10px); opacity: 0; }
	100% { transform: translateY(10px); opacity: 0; }
}

.hero__final {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: 13%;
	translate: -50% 0;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	text-align: center;
}
.hero__final > span {
	position: relative;
	display: inline-block;
	padding: 14px 28px 15px;
	border-radius: 999px;
	font-size: clamp(1.1rem, 0.85rem + 1vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	white-space: nowrap;
	color: var(--texto);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 1px var(--borde), var(--brillo-vidrio), var(--sombra-l);
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	overflow: hidden;
	isolation: isolate;
}
.hero__final > span::before {
	content: "";
	position: absolute;
	inset: 1px 1px 52%;
	z-index: -1;
	border-radius: 999px 999px 40% 40% / 999px 999px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05));
}
.hero__final em { font-style: normal; color: var(--azul-marca); }

/* La pista entra cuando los lentes ya llegaron (el panel del probador usa el revelado "enfoque" de la casa) */
.js .hero__pista > span {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(10px);
	transition: opacity 0.9s var(--ease-out) 1s, filter 1.1s var(--ease-out) 1s, transform 1.1s var(--ease-out) 1s;
}
.hero--entro .hero__pista > span {
	opacity: 1;
	filter: none;
	transform: none;
}

/* ---------- Vista estática (sin WebGL, bajo consumo o movimiento reducido) ------------------------------------ */
.hero__ventanas {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.hero__ventana { position: absolute; inset: 0; }
.hero__lupa { position: absolute; inset: 0; transform: scale(1.07); }
.hero__ventana img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 55% 48%;
	transform: scale(1.06);
	filter: saturate(1.08) contrast(1.05);
}
.hero__armazon2d {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.hero__armazon2d-frente { filter: drop-shadow(0 18px 24px rgba(20, 60, 150, 0.22)) drop-shadow(0 2px 3px rgba(10, 23, 51, 0.2)); }

/* ---------- Tabletas en horizontal y laptops chicas: texto a la izquierda más angosto --------------------------
   Así el probador (abajo a la derecha) no tapa los sellos y los lentes tienen su propio espacio; el módulo mide dónde
   termina el texto y ahí empieza el marco de los lentes. */
@media (min-width: 900px) and (max-width: 1180px) {
	.hero__entrada,
	.hero__sellos { max-width: min(34rem, 44vw); }
	.hero__entrada { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.12rem); }
	.hero__marco { left: 50%; }
}

/* Escritorio o tableta en horizontal con poca altura (≈ 600–700 px): menos aire arriba y abajo para que todo, con el
   probador, quepa en la primera pantalla */
@media (min-width: 900px) and (max-height: 700px) {
	.sec--hero { min-height: max(560px, 100svh); }
	.hero__contenido { padding-block: 84px 72px; }
	.sec--hero .titulo-xl { margin-block: 12px 14px; }
	.sec--hero .acciones { margin-top: 22px; }
	.hero__sellos { margin-top: 18px; }
}

/* ---------- Pantallas angostas (teléfonos y tabletas en vertical): texto arriba, lentes, probador abajo ----------
   Todo cabe en la primera pantalla: la sección llena la pantalla grande (sin la barra del navegador, así el fondo la
   cubre siempre) y su contenido se acomoda en la chica (con la barra): los lentes toman el espacio que sobra entre
   el texto y el probador, y el probador queda completo a la vista antes de desplazarse. */
@media (max-width: 899px) {
	.sec--hero {
		justify-content: flex-start;
		min-height: max(540px, 100vh);
		min-height: max(540px, 100lvh);
		padding-bottom: calc(100lvh - 100svh);
	}
	/* La neblina del lienzo en pantallas angostas: cielo arriba (detrás del texto), la foto al centro y el pie claro */
	.hero__escena::after {
		background:
			linear-gradient(180deg, rgba(220, 236, 255, 0.93) 0%, rgba(233, 243, 255, 0.86) 34%, rgba(240, 247, 255, 0.72) 56%, rgba(248, 251, 255, 0.62) 80%, rgba(249, 251, 255, 0.66) 90%, #f9fbff 100%);
	}
	.hero__contenido { padding-block: 94px 0; }
	.sec--hero .titulo-xl { margin-block: 10px 12px; }
	.hero__entrada { font-size: 1rem; }
	/* Los dos botones caben en una fila a 390 px; en pantallas más angostas bajan solos */
	.sec--hero .acciones { gap: 8px; margin-top: 18px; }
	.sec--hero .acciones .boton { --alto: 48px; padding: 0 14px; font-size: 0.88rem; }
	.hero__sellos { gap: 6px 16px; margin-top: 14px; font-size: 0.8rem; }
	.hero__marco {
		position: relative;
		inset: auto;
		flex: 1 1 auto;
		width: 100%;
		min-height: clamp(96px, 16svh, 320px);
	}
	.hero__probador {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(100% - 2 * var(--gutter), 440px);
		margin: 0 auto max(10px, env(safe-area-inset-bottom));
	}
	/* Probador compacto: título breve, una fila de estilos y otra de acabados (objetivos de 44 px) */
	.hero__probador-panel { padding: 8px 10px 9px; gap: 5px; border-radius: 22px; }
	.hero__probador-panel::before { border-radius: 21px 21px 40% 40% / 21px 21px 14px 14px; }
	.hero__probador-titulo { font-size: 0.66rem; line-height: 1.25; margin: 1px 0 0; text-align: center; }
	/* Las etiquetas siguen ahí para lectores de pantalla; a la vista basta el título del panel */
	.hero__etiqueta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.hero__fila { justify-content: center; }
	.hero__opciones--estilo { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1; }
	.sec--hero .hero__chip { padding: 0 4px; font-size: 0.8rem; }
	.hero__opciones--acabado { gap: 4px; }
	.hero__pista { display: none; }
	.hero__final { bottom: 18%; width: calc(100% - 2 * var(--gutter)); }
	.hero__final > span { white-space: normal; padding: 12px 22px 13px; border-radius: 26px; }
}

/* Teléfonos: el texto un poco más compacto para que los lentes y el probador quepan en la primera pantalla */
@media (max-width: 599px) {
	.hero__contenido { padding-top: 92px; }
	.sec--hero .titulo-xl { font-size: clamp(2.3rem, min(1rem + 6.4vw, 6.2svh), 2.75rem); margin-block: 8px 10px; }
	.hero__entrada { font-size: 0.94rem; line-height: 1.5; }
	.sec--hero .acciones { margin-top: 14px; }
	.sec--hero .acciones .boton { --alto: 46px; }
	.hero__sellos { gap: 4px 14px; margin-top: 10px; font-size: 0.78rem; }
	.hero__sellos li { gap: 7px; }
	.hero__sellos li::before { width: 12px; height: 12px; }
}
/* Teléfonos angostos (≈ 360 px): los dos botones siguen en una fila */
@media (max-width: 374px) {
	.sec--hero .acciones { gap: 6px; }
	.sec--hero .acciones .boton { padding: 0 10px; font-size: 0.8rem; }
}
/* Teléfonos bajos (≈ 360×640 o con la barra del navegador grande): más compacto todavía */
@media (max-width: 599px) and (max-height: 700px) {
	.hero__contenido { padding-top: 88px; }
	.sec--hero .titulo-xl { margin-block: 6px 8px; }
	.hero__entrada { font-size: 0.9rem; line-height: 1.42; }
	.sec--hero .acciones { margin-top: 12px; }
	.sec--hero .acciones .boton { --alto: 44px; }
	.hero__sellos { margin-top: 8px; font-size: 0.74rem; }
	.hero__marco { min-height: 72px; }
	.hero__probador { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
}