/* ==========================================================================================================
   Sección optica (#como-funcionan): laboratorio de rayos «Así funciona una mica graduada».
   Un banco óptico en un panel de cielo claro, una lente de vidrio que muestra lo que ve la retina, un dock de
   controles de vidrio y tres tarjetas con el perfil de cada mica. Fondo de sección: blanco.
   ========================================================================================================== */

.optica__lab {
	--optica-exito-texto: #087a55; /* verde de --exito oscurecido para texto AA sobre blanco */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 288px;
	grid-template-areas:
		"barra barra"
		"escena lado"
		"dock dock";
	gap: 18px clamp(20px, 2.4vw, 32px);
	padding: clamp(14px, 2.4vw, 30px);
}

/* Mientras carga el módulo, el laboratorio reserva su lugar con el aspecto del panel: así la página no salta
   cuando llega (p. ej. al entrar desde el menú). Si el módulo falla, desaparece. */
.js .optica__lab:empty {
	min-height: clamp(620px, 38vw + 260px, 820px);
	border-radius: var(--radio-xl);
	background: radial-gradient(120% 90% at 50% 0%, #eef6ff 0%, #ffffff 62%);
	border: 1px solid var(--borde);
}
.modulo-fallo .optica__lab:empty { display: none; }

/* ---------- Selector de condición ---------------------------------------------------------------------------- */
.optica__barra {
	grid-area: barra;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.optica__condiciones { gap: 8px; }

/* ---------- Banco óptico ------------------------------------------------------------------------------------- */
.optica__escena {
	grid-area: escena;
	position: relative;
	min-width: 0;
	aspect-ratio: 1.86;
}
.optica__lienzo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Lo que ve tu retina: una lente de vidrio --------------------------------------------------------- */
.optica__lado {
	grid-area: lado;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 18px;
	min-width: 0;
}
.optica__vista {
	display: grid;
	justify-items: center;
	gap: 14px;
	margin: 0;
}
.optica__vista-titulo {
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texto-3);
}
.optica__lente {
	--tam: clamp(176px, 17vw, 232px);
	position: relative;
	width: var(--tam);
	aspect-ratio: 1;
	padding: 9px;
	border-radius: 50%;
	background: linear-gradient(160deg, #ffffff 0%, #e8f1fc 48%, #cadcf3 100%);
	box-shadow:
		inset 0 1px 0 #fff,
		inset 0 -3px 8px rgba(20, 60, 150, 0.14),
		0 1px 2px rgba(10, 23, 51, 0.08),
		0 26px 50px -22px rgba(20, 60, 150, 0.48);
	transition: box-shadow 0.6s var(--ease-out);
}
/* Reflejo del canto superior del vidrio */
.optica__lente::after {
	content: "";
	position: absolute;
	inset: 12px 18% auto;
	height: 34%;
	border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.optica__ventana {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	background: #eef4fb;
	box-shadow: inset 0 0 0 1px rgba(14, 42, 92, 0.12);
}
/* El filtro se aplica a una capa más grande que la ventana: los bordes borrosos quedan fuera del círculo */
.optica__imagen {
	position: absolute;
	inset: -12%;
	filter: url(#optica-desenfoque);
}
.optica__cartilla,
.optica__lectura {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	transition: opacity 0.6s var(--ease-out);
}
/* Cartilla de letras: cada fila más pequeña, como en el consultorio */
.optica__cartilla {
	gap: 0.28em;
	font-size: calc(var(--tam) / 11.2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	color: var(--texto);
	background: #ffffff;
	padding-top: 0.2em;
}
.optica__cartilla p { margin: 0; padding-left: 0.16em; }
.optica__fila--1 { font-size: 2.7em; letter-spacing: 0; padding-left: 0 !important; }
.optica__fila--2 { font-size: 1.45em; }
.optica__fila--3 { font-size: 1.02em; }
.optica__fila--4 { font-size: 0.76em; }
.optica__fila--5 { font-size: 0.58em; }
.optica__fila--6 { font-size: 0.45em; }
.optica__lectura {
	gap: 0.3em;
	padding: 18%;
	color: var(--texto);
	background: linear-gradient(180deg, #fffefb, #f6f3ea);
	opacity: 0;
	line-height: 1.15;
}
.optica__lectura p { margin: 0; }
.optica__lectura-1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; }
.optica__lectura-2 { font-size: 1.05rem; font-weight: 600; color: var(--azul-marca); margin-bottom: 0.4em !important; }
.optica__lectura-3 { font-size: 0.72rem; font-weight: 600; }
.optica__lectura-4 { font-size: 0.6rem; color: var(--texto-2); }
.optica__lectura-5 { font-size: 0.5rem; color: var(--texto-3); }
.optica__imagen--cerca .optica__cartilla { opacity: 0; }
.optica__imagen--cerca .optica__lectura { opacity: 1; }
.optica__ventana::after {
	/* Sombra interior del aro: da profundidad de lente */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 6px 16px rgba(10, 23, 51, 0.18), inset 0 -2px 6px rgba(255, 255, 255, 0.5);
	pointer-events: none;
}
.optica__destello {
	position: absolute;
	inset: -20%;
	z-index: 1;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0) 58%);
	transform: translateX(-100%);
	pointer-events: none;
}
.optica__vista--nitida .optica__lente {
	box-shadow:
		inset 0 1px 0 #fff,
		inset 0 -3px 8px rgba(20, 60, 150, 0.14),
		0 0 0 4px rgba(18, 168, 119, 0.2),
		0 0 26px 2px rgba(18, 168, 119, 0.22),
		0 26px 50px -22px rgba(18, 120, 90, 0.5);
}
.optica__vista--nitida .optica__destello { animation: optica-destello 1.2s var(--ease-out) 0.1s 1 both; }
@keyframes optica-destello {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

.optica__explica {
	font-size: var(--t-chico);
	line-height: 1.6;
	color: var(--texto-2);
	text-align: center;
	max-width: 36ch;
}
.optica__explica strong { color: var(--texto); font-weight: 700; }

/* ---------- Dock de controles -------------------------------------------------------------------------------- */
.optica__dock {
	grid-area: dock;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	grid-template-areas:
		"cabeza cabeza"
		"control lecturas";
	gap: 14px clamp(24px, 3.4vw, 44px);
	padding: 16px clamp(16px, 2.2vw, 26px) 18px;
	border-radius: var(--radio-l);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.74));
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
}
.optica__dock-cabeza {
	grid-area: cabeza;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 38px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--borde);
}
.optica__reto { font-size: var(--t-chico); color: var(--texto-2); }
.optica__reto strong { color: var(--azul-marca); font-weight: 700; }

.optica__sello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 14px 0 8px;
	border-radius: 999px;
	font-size: var(--t-chico);
	font-weight: 700;
	color: var(--optica-exito-texto);
	background: linear-gradient(180deg, #ffffff, #e8f8f0);
	border: 1px solid rgba(18, 168, 119, 0.3);
	box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(18, 168, 119, 0.7);
	opacity: 0;
	translate: 0 4px;
	transition: opacity 0.35s var(--ease-out), translate 0.5s var(--ease-out);
}
.optica__lab[data-enfocado="true"] .optica__sello { opacity: 1; translate: 0 0; }
.optica__sello-orbe {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 16%, #86e8bd 38%, var(--exito) 72%, var(--optica-exito-texto) 100%);
	box-shadow: 0 0 0 3px rgba(18, 168, 119, 0.14), 0 2px 5px rgba(8, 122, 85, 0.35);
}

.optica__control { grid-area: control; display: grid; gap: 2px; min-width: 0; }
.optica__control-cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
.optica__etiqueta { font-size: 0.95rem; font-weight: 650; color: var(--texto); }
.optica__valor {
	font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--azul-marca);
	line-height: 1.2;
}
.optica__control-fila {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: start;
	gap: 10px;
}
.optica__pista { min-width: 0; }
.optica__paso {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1;
	color: var(--texto);
	background: radial-gradient(circle at 50% 18%, #ffffff 0 40%, #edf2fa 100%);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
	transition: border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out);
}
.optica__paso:hover { border-color: var(--borde-fuerte); color: var(--azul-marca); }
.optica__paso:active { transform: scale(0.94); }
.optica__escala {
	display: flex;
	justify-content: space-between;
	padding-inline: 14px; /* centro del pulgar en los extremos */
	margin-top: -4px;
	font-size: var(--t-mini);
	color: var(--texto-3);
}
.optica__escala span { display: flex; justify-content: center; width: 0; white-space: nowrap; }

.optica__lecturas {
	grid-area: lecturas;
	display: grid;
	align-content: center;
	gap: 8px;
	margin: 0;
	min-width: 0;
}
.optica__lecturas div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--borde);
}
.optica__lecturas div:last-child { padding-bottom: 0; border-bottom: 0; }
.optica__lecturas dt { font-size: var(--t-chico); color: var(--texto-3); }
.optica__lecturas dd { margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--texto); text-align: right; }
.optica__lecturas .optica__bien { color: var(--optica-exito-texto); }

.optica__filtros { position: absolute; width: 0; height: 0; overflow: hidden; }
.optica__nota { margin-top: 16px; }

/* ---------- Tarjetas: cóncava, convexa, tórica ---------------------------------------------------------------- */
.optica__tipos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin-top: clamp(24px, 3.4vw, 40px);
}
.optica__tipo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
	isolation: isolate;
	transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.3s;
}
/* Reflejo gloss de la mitad superior */
.optica__tipo::before {
	content: "";
	position: absolute;
	inset: 1px 1px 55%;
	border-radius: var(--radio-l) var(--radio-l) 50% 50% / var(--radio-l) var(--radio-l) 18px 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.optica__tipo:hover { translate: 0 -4px; box-shadow: var(--brillo-vidrio), var(--sombra-l); border-color: var(--borde-fuerte); }
.optica__tipo--activa { border-color: rgba(20, 55, 230, 0.32); box-shadow: var(--brillo-vidrio), 0 0 0 3px rgba(20, 55, 230, 0.08), var(--sombra); }
.optica__tipo:has(.optica__tipo-boton:focus-visible) { outline: 2px solid var(--azul-marca); outline-offset: 3px; }
.optica__tipo-boton {
	display: inline;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: left;
}
.optica__tipo-boton:focus-visible { outline: none; }
/* Toda la tarjeta es el objetivo del botón (el h3 no está posicionado: el bloque contenedor es la tarjeta) */
.optica__tipo-boton::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.optica__tipo .signo {
	display: inline-grid;
	place-items: center;
	min-width: 1.9em;
	height: 1.55em;
	padding: 0 0.45em;
	margin-left: 0.3em;
	border-radius: 999px;
	vertical-align: 0.1em;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--azul-marca);
	background: linear-gradient(180deg, #ffffff, var(--azul-claro));
	border: 1px solid rgba(20, 55, 230, 0.18);
	box-shadow: inset 0 1px 0 #fff;
}
.optica__probar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	font-size: var(--t-chico);
	font-weight: 650;
	color: var(--azul-marca);
}
.optica__probar-flecha { display: inline-grid; transition: translate 0.4s var(--ease-out); }
.optica__tipo:hover .optica__probar-flecha { translate: 0 -3px; }

.optica__perfil {
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	border-radius: 16px;
	background: radial-gradient(120% 120% at 50% 0%, #eef6ff 0%, #f8fbff 60%, #ffffff 100%);
	box-shadow: inset 0 0 0 1px rgba(14, 42, 92, 0.07);
	overflow: visible;
}
.optica__perfil-linea { stroke: rgba(14, 42, 92, 0.14); stroke-width: 1; stroke-dasharray: 2 4; }
.optica__perfil-halo,
.optica__perfil-rayo,
.optica__perfil-flujo,
.optica__perfil-virtual { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.optica__perfil-halo { stroke: var(--luz); stroke-width: 6; stroke-opacity: 0.18; }
.optica__perfil-rayo { stroke: var(--luz); stroke-width: 1.8; }
.optica__perfil-halo.optica__perfil--h,
.optica__perfil-rayo.optica__perfil--h { stroke: var(--cielo-500); }
.optica__perfil-flujo { stroke: #ff8a00; stroke-width: 3.4; stroke-dasharray: 0.1 37.9; stroke-opacity: 0; }
.optica__perfil-virtual { stroke: var(--luz); stroke-width: 1.2; stroke-dasharray: 3 4; stroke-opacity: 0.5; }
.optica__perfil-mica { stroke: rgba(38, 112, 200, 0.6); stroke-width: 1.2; }
.optica__perfil-mica--h { fill: rgba(46, 155, 255, 0.2); stroke: var(--cielo-500); stroke-width: 1.4; stroke-dasharray: 4 3; }
.optica__perfil-eje-b .optica__perfil-flujo { stroke: #0a6ee0; }

/* Solo con la sección en pantalla y sin movimiento reducido (el módulo pone .optica--viva) */
.optica--viva .optica__perfil-flujo { stroke-opacity: 1; animation: optica-flujo 1.9s linear infinite; }
.optica--viva .optica__perfil-eje-a { animation: optica-eje-a 5s var(--ease-in-out) infinite; }
.optica--viva .optica__perfil-eje-b { animation: optica-eje-b 5s var(--ease-in-out) infinite; }
@keyframes optica-flujo { to { stroke-dashoffset: -76; } }
@keyframes optica-eje-a { 0%, 40% { opacity: 1; } 55%, 90% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes optica-eje-b { 0%, 40% { opacity: 0.45; } 55%, 90% { opacity: 1; } 100% { opacity: 0.45; } }

/* ---------- Tabletas ------------------------------------------------------------------------------------------ */
@media (max-width: 980px) {
	.optica__lab {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "barra" "escena" "dock" "lado";
	}
	.optica__escena { aspect-ratio: 1.75; }
	.optica__lado {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		justify-items: start;
		gap: 16px 28px;
	}
	.optica__explica { text-align: left; max-width: 52ch; }
	.js .optica__lab:empty { min-height: calc(57vw + 490px); }
}

@media (max-width: 820px) {
	.optica__tipos { grid-template-columns: minmax(0, 1fr); }
	.optica__perfil { max-height: 120px; }
}

/* ---------- Teléfonos ----------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.optica__lab {
		grid-template-areas: "barra" "escena" "lado" "dock";
		gap: 14px;
	}
	.optica__chip { padding: 0 14px; }
	.optica__escena { aspect-ratio: 1.68; margin-inline: -6px; }
	.optica__lado { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.optica__explica { text-align: left; }
	.optica__dock {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "cabeza" "control" "lecturas";
		padding: 14px 14px 16px;
	}
	/* La lente vive aquí en teléfono: a su lado el título y el sello, debajo el reto */
	.optica__dock-cabeza {
		display: grid;
		grid-template-columns: 108px minmax(0, 1fr);
		grid-template-areas:
			"lente titulo"
			"lente sello"
			"reto reto";
		align-items: center;
		gap: 8px 16px;
		min-height: 0;
	}
	.optica__dock-cabeza .optica__vista { display: contents; }
	.optica__dock-cabeza .optica__lente { grid-area: lente; --tam: 108px; padding: 6px; }
	.optica__dock-cabeza .optica__lente::after { inset: 8px 20% auto; }
	.optica__dock-cabeza .optica__vista-titulo { grid-area: titulo; align-self: end; }
	.optica__dock-cabeza .optica__sello { grid-area: sello; align-self: start; justify-self: start; }
	.optica__dock-cabeza .optica__reto { grid-area: reto; margin-top: 4px; }
	.js .optica__lab:empty { min-height: calc(40vw + 745px); }
}

/* ---------- Movimiento reducido: todo quieto, los cambios son directos ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.optica__vista--nitida .optica__destello { animation: none; }
	.optica__tipo,
	.optica__sello,
	.optica__cartilla,
	.optica__lectura { transition: none; }
}