/* ==========================================================================================================
   Sección enfermedades · «Conoce lo que tratamos»
   Una lámina médica limpia por problema visual (corte lateral del ojo, rayos de luz, foco), alternada con su
   texto. Cada lámina vive en un panel de cielo claro con una retícula de puntos muy tenue, como papel técnico.
   ========================================================================================================== */

/* ---------- Índice ------------------------------------------------------------------------------------------ */
.enf__indice { margin-top: 8px; }
.enf__indice .chip { gap: 10px; padding: 0 18px 0 14px; }
.enf__indice-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--azul-marca);
}

/* ---------- Lista alternada --------------------------------------------------------------------------------- */
.enf__lista { display: grid; gap: clamp(84px, 11vw, 168px); }
.enf {
	display: grid;
	grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
	gap: clamp(32px, 5.5vw, 92px);
	align-items: center;
	scroll-margin-top: 96px;
}
.enf:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr); }
.enf:nth-child(even) .enf__anim { order: 2; }
.enf__anim:empty { display: none; }

/* ---------- Escenario (panel de la lámina) ------------------------------------------------------------------ */
.enf__escenario { display: grid; }
.enf__escenario::before {
	/* Retícula de puntos tenue: "papel técnico" de lámina médica */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(20, 55, 230, 0.1) 1px, transparent 1.3px);
	background-size: 22px 22px;
	background-position: 11px 11px;
	-webkit-mask-image: radial-gradient(90% 75% at 50% 40%, #000 25%, transparent 80%);
	mask-image: radial-gradient(90% 75% at 50% 40%, #000 25%, transparent 80%);
}
.enf__lienzo { position: relative; }
.enf__dibujo { position: relative; aspect-ratio: 640 / 400; }
.enf__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.enf__rotulos { position: absolute; inset: 0; pointer-events: none; }

/* Estado actual de la lámina (ojo normal, con miopía, con mica…) */
.enf__estado {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--texto);
	background: var(--vidrio-fuerte);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
}
.enf__estado::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--exito);
	box-shadow: 0 0 0 3px rgba(18, 168, 119, 0.16);
}
.enf__estado[data-tono="problema"]::before { background: var(--luz); box-shadow: 0 0 0 3px rgba(255, 164, 18, 0.2); }

/* Rótulos: texto real sobre el dibujo, con un punto de color por parte */
.enf__rotulo {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.005em;
	white-space: nowrap;
	color: var(--texto);
	background: rgba(255, 255, 255, 0.93);
	border: 1px solid var(--borde);
	box-shadow: inset 0 1px 0 #fff, 0 3px 10px -4px rgba(20, 60, 150, 0.32);
}
.enf__rotulo::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9fb0cc;
}
.enf__rotulo--cristal::before { background: var(--cristal); }
.enf__rotulo--retina::before { background: var(--retina); }
.enf__rotulo--foco::before { background: var(--luz); }
.enf__rotulo--mica::before { background: var(--cielo-500); }
.enf__rotulo--cota,
.enf__rotulo--leyenda,
.enf__rotulo--vista { font-weight: 600; color: var(--texto-2); }
.enf__rotulo--cota::before,
.enf__rotulo--leyenda::before { display: none; }
.enf__rotulo--cota { padding: 3px 10px; font-variant-numeric: tabular-nums; }
.enf__rotulo--leyenda { gap: 7px; padding: 4px 11px; }
.enf__rotulo--vista { font-variant-numeric: tabular-nums; }
.enf__rotulo--vista::before { background: var(--azul-marca); }
.enf__muestra { width: 22px; height: 6px; flex: none; }

/* ---------- Piezas del SVG ----------------------------------------------------------------------------------- */
.enf__sombra { fill: rgba(20, 60, 150, 0.16); }
.enf__nervio { fill: #fde8ec; stroke: rgba(240, 68, 90, 0.38); stroke-width: 1.2; stroke-linejoin: round; }
.enf__globo { stroke: rgba(14, 42, 92, 0.22); stroke-width: 1.5; }
.enf__globo-brillo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0.95; }
.enf__fantasma { fill: none; stroke: #68738c; stroke-width: 1.3; stroke-dasharray: 4 5; }
.enf__retina-halo { fill: none; stroke: rgba(240, 68, 90, 0.14); stroke-width: 11; stroke-linecap: round; }
.enf__retina { fill: none; stroke: var(--retina); stroke-width: 3.4; stroke-linecap: round; }
.enf__acuoso { fill: rgba(127, 207, 255, 0.14); }
.enf__zonulas { fill: none; stroke: rgba(65, 78, 105, 0.3); stroke-width: 0.8; }
.enf__ciliar { fill: #dce6f4; stroke: rgba(14, 42, 92, 0.16); stroke-width: 1; }
.enf__iris { stroke-width: 5; stroke-linecap: round; }
.enf__cornea { fill: rgba(127, 207, 255, 0.3); stroke: #4aa8e0; stroke-width: 1.3; stroke-linejoin: round; }
.enf__cornea-canto { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.enf__cristalino { stroke: #4aa8e0; stroke-width: 1.3; }
.enf__cristalino-brillo { fill: #fff; opacity: 0.78; }

.enf__rayo-halo { fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.enf__rayo { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Pulso de luz que viaja por el rayo: un brillo ámbar con núcleo blanco */
.enf__pulso,
.enf__pulso-nucleo { fill: none; stroke-linecap: round; stroke-dasharray: 0.05 0.45; }
.enf__pulso { stroke: #ffb12e; stroke-width: 5; opacity: 0.85; }
.enf__pulso-nucleo { stroke: #fffaf0; stroke-width: 1.6; }
.enf__rayo-fantasma { fill: none; stroke: var(--luz); stroke-width: 1.6; stroke-dasharray: 2 4.5; stroke-linecap: round; }
.enf__foco { fill: #fff; stroke-width: 1.8; }
.enf__foco-fantasma { fill: rgba(255, 164, 18, 0.1); stroke: var(--luz); stroke-width: 1.4; stroke-dasharray: 2.5 2.5; }

.enf__mica-cuerpo { stroke: #3f9ad6; stroke-width: 1.2; stroke-linejoin: round; }
.enf__mica-canto { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0.95; }
.enf__mica-aro { fill: var(--texto); opacity: 0.85; }

.enf__guia { stroke: rgba(10, 23, 51, 0.36); stroke-width: 1; }
.enf__guia-punto { fill: var(--texto); stroke: #fff; stroke-width: 1.4; }
.enf__cota { fill: none; stroke: #7d89a3; stroke-width: 1.2; stroke-linecap: round; }

/* Astigmatismo */
.enf__placido { fill: none; stroke: rgba(20, 55, 230, 0.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.enf__meridiano { stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.enf__esfera { fill: none; stroke: #68738c; stroke-width: 1.4; stroke-dasharray: 4 5; }
.enf__reloj-rayas { fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; }
.enf__reloj-aro { fill: none; stroke: rgba(14, 42, 92, 0.2); stroke-width: 1.4; }
.enf__reloj-exito { fill: none; stroke: var(--exito); stroke-width: 3; }
.enf__reloj-eje { fill: var(--azul-marca); }

/* ---------- «Así lo ves» ------------------------------------------------------------------------------------- */
.enf__vista {
	position: absolute;
	left: 2.4%;
	bottom: 3.2%;
	width: 30%;
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	background: #e8f3ff;
	border: 3px solid #fff;
	box-shadow: 0 1px 2px rgba(10, 23, 51, 0.08), 0 18px 36px -16px rgba(20, 60, 150, 0.5);
}
.enf__vista::after {
	/* Reflejo de vidrio en la mitad superior */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--gloss);
	opacity: 0.32;
}
.enf__vista-svg { width: 100%; height: 100%; }
.enf__vista-titulo {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--texto);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px -3px rgba(20, 60, 150, 0.35);
}

/* ---------- Mandos: interruptor y leyenda -------------------------------------------------------------------- */
.enf__mandos {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px 24px;
	padding: 16px clamp(18px, 2.4vw, 28px) 18px;
	border-top: 1px solid var(--borde);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.92));
}
.enf__interruptor { flex: none; }
.enf__leyenda {
	flex: 1;
	min-width: 0;
	font-size: var(--t-chico);
	line-height: 1.5;
	color: var(--texto-2);
}

/* ---------- Datos de presbicia: edad y poder de enfoque ------------------------------------------------------ */
.enf__datos {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px clamp(20px, 3vw, 36px);
	padding: 14px clamp(18px, 2.4vw, 28px) 18px;
	border-top: 1px solid var(--borde);
	background: rgba(255, 255, 255, 0.5);
}
.enf__etq {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto-3);
}
.enf__edad-valor { font-size: 15px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.enf__edad-valor b {
	display: inline-block;
	min-width: 1.3em;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--texto);
}
.enf__acom-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.enf__acom-valor { font-size: 14px; font-weight: 700; color: var(--texto); white-space: nowrap; }
.enf__barra {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: #e1e8f4;
	box-shadow: inset 0 1px 2px rgba(10, 23, 51, 0.14);
}
.enf__barra-lleno {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	transform-origin: left center;
	background: linear-gradient(180deg, #6a8cff, var(--azul-marca));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	transition: background 0.4s;
}
.enf__barra--baja .enf__barra-lleno { background: linear-gradient(180deg, #ffc867, var(--luz)); }
.enf__barra-adicion {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #52d8a8, var(--exito));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.enf__barra-marca {
	position: absolute;
	left: 25%;
	top: -5px;
	bottom: -5px;
	width: 2px;
	margin-left: -1px;
	border-radius: 2px;
	background: var(--texto);
}
.enf__barra-pie {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--texto-3);
}
.enf__barra-marca-texto {
	position: absolute;
	left: 25%;
	transform: translateX(-6px);
	font-weight: 650;
	color: var(--texto-2);
	white-space: nowrap;
}

/* ---------- Texto --------------------------------------------------------------------------------------------- */
.enf__texto { display: grid; align-content: start; }
.enf__num {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--azul-marca);
}
.enf__num::after {
	content: "";
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, rgba(20, 55, 230, 0.5), rgba(20, 55, 230, 0));
}
.enf__texto h3 { margin: 12px 0 22px; }
.enf__dato { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--borde); }
.enf__dato h4 {
	font-size: var(--t-mini);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--azul-marca);
}
.enf__dato p { color: var(--texto-2); line-height: 1.65; max-width: 52ch; }

/* «Cómo se corrige»: la solución, en una pieza de vidrio con el glifo de su mica */
.enf__dato--solucion {
	position: relative;
	margin-top: 8px;
	padding: 20px 22px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #f0f6ff 100%);
	box-shadow: var(--brillo-vidrio), var(--sombra-s);
}
.enf__dato--solucion:has(.enf__glifo) { padding-left: 90px; min-height: 96px; align-content: center; }
.enf__glifo {
	position: absolute;
	left: 20px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border-radius: 16px;
	border: 1px solid var(--borde);
	background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #e4f1ff 100%);
	box-shadow: var(--brillo-vidrio), 0 8px 16px -10px rgba(20, 60, 150, 0.45);
}
.enf__glifo svg { width: 42px; height: 42px; }

/* ---------- Responsivo ---------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.enf,
	.enf:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.enf:nth-child(even) .enf__anim { order: 0; }
	.enf__texto { max-width: 680px; }
}

@media (max-width: 640px) {
	/* En teléfono el recuadro «Así lo ves» va debajo del dibujo para no tapar los rótulos */
	.enf__lienzo { display: grid; }
	.enf__vista {
		position: relative;
		left: auto;
		bottom: auto;
		width: calc(100% - 28px);
		margin: 0 14px 14px;
		aspect-ratio: 2.5 / 1;
		border-radius: 14px;
	}
	.enf__estado { position: relative; top: auto; left: auto; justify-self: start; margin: 0 14px 12px; padding: 5px 12px 5px 10px; font-size: 12px; }
	.enf__estado::before { width: 7px; height: 7px; }
	.enf__rotulo { gap: 5px; padding: 2px 7px 2px 6px; font-size: 10.5px; }
	.enf__rotulo::before { width: 5px; height: 5px; }
	.enf__mandos { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 18px 16px; }
	.enf__datos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.enf__edad { display: flex; align-items: baseline; justify-content: space-between; }
	.enf__edad-valor b { font-size: 1.7rem; }
	.enf__dato--solucion:has(.enf__glifo) { padding-left: 80px; }
	.enf__glifo { left: 16px; }
}