/* ==========================================================================================================
   Sección servicios: rejilla bento de tarjetas de vidrio. Cada servicio tiene un ícono de línea dentro de una
   burbuja de vidrio (se dibuja al aparecer); el examen es la tarjeta protagonista, con una lupa de vidrio sobre la
   foto; la limpieza lleva burbujas que suben; el laboratorio se enfoca con un barrido de escáner.
   ========================================================================================================== */

/* Revelado "enfoque" sin repintar: la pieza que está por enfocarse (servicios-comun.js le pone .enfoque-cerca) tiene
   capa propia mientras main.js le anima opacidad, desenfoque y posición; al quedar .enfocado la suelta. */
#servicios .enfoque-cerca:not(.enfocado) { will-change: opacity, filter, transform; }

/* ---------- Rejilla bento ---------------------------------------------------------------------------------- */
.servicios__lista {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(292px, auto);
	gap: clamp(14px, 1.5vw, 20px);
}
.servicios__celda { display: flex; min-width: 0; }
.servicios__celda--examen { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.servicios__celda--contacto { grid-column: 8 / span 5; grid-row: 1; }
.servicios__celda--ajuste { grid-column: 8 / span 5; grid-row: 2; }
.servicios__celda--limpieza { grid-column: 1 / span 5; grid-row: 3; }
.servicios__celda--instalaciones { grid-column: 6 / span 4; grid-row: 3; }
.servicios__celda--atencion { grid-column: 10 / span 3; grid-row: 3; }

/* ---------- Tarjeta de vidrio ------------------------------------------------------------------------------ */
.servicios__tarjeta {
	--mx: -600px;
	--my: -600px;
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: clamp(22px, 2.3vw, 30px);
	border-radius: var(--radio-l);
	background:
		radial-gradient(480px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.07), transparent 45%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.84) 100%);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.3s;
}
/* Luz de cielo muy suave en la mitad superior: el vidrio recibe la luz desde arriba */
.servicios__tarjeta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 56%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(234, 243, 255, 0.75), rgba(255, 255, 255, 0));
}
/* Canto brillante: la luz del puntero recorre el borde del vidrio */
.servicios__tarjeta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(240px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.7), rgba(46, 155, 255, 0) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s;
}
@media (hover: hover) and (pointer: fine) {
	.servicios__tarjeta:hover { transform: translateY(-4px); box-shadow: var(--brillo-vidrio), var(--sombra-l); }
	.servicios__tarjeta:hover::after { opacity: 1; }
}

.servicios__texto { display: grid; gap: 8px; margin-top: auto; }
.servicios__tarjeta h3 { font-size: clamp(1.18rem, 1.02rem + 0.45vw, 1.42rem); letter-spacing: -0.026em; }
.servicios__tarjeta p { color: var(--texto-2); max-width: 44ch; }

/* ---------- Burbuja de vidrio con el ícono ----------------------------------------------------------------- */
.servicios__icono {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: var(--azul-marca);
	background:
		radial-gradient(circle at 50% 118%, rgba(46, 155, 255, 0.28), rgba(46, 155, 255, 0) 62%),
		radial-gradient(circle at 36% 26%, #ffffff 0%, #f1f6ff 58%, #e3edfd 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 0 0 1px rgba(20, 55, 230, 0.09),
		0 12px 26px -14px rgba(20, 60, 150, 0.55),
		inset 0 -8px 14px rgba(46, 155, 255, 0.14);
}
/* Reflejo aqua de la mitad superior */
.servicios__icono::after {
	content: "";
	position: absolute;
	inset: 3px 8px 52%;
	z-index: 2;
	border-radius: 999px 999px 45% 45% / 999px 999px 30% 30%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08));
	pointer-events: none;
}
.servicios__icono svg {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Fotos dentro de la rejilla --------------------------------------------------------------------- */
.servicios__foto { margin: 0; overflow: hidden; border-radius: calc(var(--radio-l) - 8px); background: var(--fondo-3); }
.servicios__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Examen: la protagonista ------------------------------------------------------------------------ */
.servicios__tarjeta--examen { gap: 0; padding: 12px; }
.servicios__tarjeta--examen::before { display: none; }
.servicios__foto--examen { position: relative; flex: 1 1 auto; min-height: 320px; }
.servicios__foto--examen img { position: absolute; inset: 0; object-position: 58% 46%; }
/* Panel de vidrio esmerilado que se desliza sobre el borde inferior de la foto */
.servicios__panel {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	column-gap: 22px;
	row-gap: 10px;
	align-items: start;
	justify-items: start;
	margin: -72px 18px 6px;
	padding: 24px 28px 24px 24px;
	border-radius: calc(var(--radio-l) - 4px);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.92) 60%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: var(--brillo-vidrio), 0 26px 50px -24px rgba(20, 60, 150, 0.45);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	backdrop-filter: blur(22px) saturate(170%);
}
.servicios__panel .servicios__icono { grid-row: 1 / span 3; }
.servicios__panel > :not(.servicios__icono) { grid-column: 2; }
.servicios__panel h3 { font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.05rem); letter-spacing: -0.03em; }
.servicios__panel p { color: var(--texto-2); max-width: 52ch; }
.servicios__panel .boton { margin-top: 8px; }

/* Lupa de vidrio sobre la foto: una gota que amplía lo que tiene detrás (la crea servicios.js) */
.servicios__lupa {
	--d: 148px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: var(--d);
	height: var(--d);
	margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
	border-radius: 50%;
	background-color: var(--fondo-3);
	background-repeat: no-repeat;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.95),
		0 0 0 6px rgba(255, 255, 255, 0.26),
		0 26px 44px -16px rgba(10, 30, 90, 0.6),
		inset 0 0 0 1px rgba(20, 55, 230, 0.2),
		inset 0 -16px 28px rgba(20, 60, 150, 0.25),
		inset 0 10px 24px rgba(255, 255, 255, 0.35);
	pointer-events: none;
	will-change: transform;
}
.servicios__lupa::after {
	content: "";
	position: absolute;
	inset: 5% 16% 54%;
	border-radius: 999px 999px 50% 50% / 999px 999px 40% 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.04));
}

/* ---------- Lentes de contacto: una cúpula de vidrio que amplía la trama ----------------------------------- */
.servicios__tarjeta--contacto { padding-right: clamp(22px, 42%, 230px); }
.servicios__deco-lente {
	position: absolute;
	right: -6px;
	top: 50%;
	z-index: -1;
	width: min(46%, 250px);
	height: auto;
	transform: translateY(-50%);
	color: var(--azul-marca);
	overflow: visible;
}

/* ---------- Ajuste: foto a la derecha ---------------------------------------------------------------------- */
.servicios__tarjeta--ajuste { padding-right: calc(40% + 16px); }
.servicios__foto--ajuste {
	position: absolute;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: 40%;
}
.servicios__foto--ajuste img { object-position: 58% 62%; }

/* ---------- Limpieza: burbujas de vidrio que suben (la guiñada Aero) --------------------------------------- */
.servicios__tarjeta--limpieza { min-height: 340px; padding-right: clamp(22px, 44%, 240px); }
.servicios__agua {
	position: absolute;
	right: 12px;
	top: 12px;
	bottom: 12px;
	width: 42%;
	z-index: -1;
	border-radius: calc(var(--radio-l) - 8px);
	overflow: hidden;
	background:
		radial-gradient(120% 60% at 50% 110%, rgba(22, 191, 227, 0.2), rgba(22, 191, 227, 0) 70%),
		linear-gradient(180deg, #f3f9ff 0%, #e2f1fe 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -20px 40px -20px rgba(46, 155, 255, 0.35);
}
/* Superficie del agua: una línea brillante apenas ondulada */
.servicios__agua svg { position: absolute; left: 0; width: 100%; height: 100%; }
.servicios__burbuja {
	position: absolute;
	left: var(--x);
	bottom: -12%;
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98) 0 14%, rgba(255, 255, 255, 0.35) 34%, rgba(46, 155, 255, 0.08) 64%, rgba(46, 155, 255, 0.3) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(20, 60, 150, 0.12);
	opacity: 0;
	animation: servicios-sube var(--t) linear var(--r) infinite;
	animation-play-state: paused;
}
.servicios__agua.activa .servicios__burbuja { animation-play-state: running; }
@keyframes servicios-sube {
	0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
	12% { opacity: 1; }
	50% { transform: translate3d(var(--w), -230px, 0) scale(0.9); }
	85% { opacity: 0.9; }
	100% { transform: translate3d(0, -430px, 0) scale(1); opacity: 0; }
}
/* Movimiento reducido: las burbujas quedan quietas, repartidas en el agua */
.servicios__agua--quieta .servicios__burbuja {
	animation: none;
	opacity: 0.95;
	bottom: var(--y);
}

/* ---------- Instalaciones: foto arriba y la burbuja montada sobre su borde --------------------------------- */
.servicios__tarjeta--instalaciones { padding-top: 12px; gap: 14px; }
.servicios__foto--instalaciones {
	flex: none;
	height: clamp(150px, 13vw, 176px);
	margin: 0 calc(12px - clamp(22px, 2.3vw, 30px)) -44px;
}
.servicios__foto--instalaciones img { object-position: 50% 30%; }
.servicios__tarjeta--instalaciones .servicios__icono { margin-left: 2px; }

/* ---------- Laboratorio propio ----------------------------------------------------------------------------- */
.servicios__lab {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(20px, 2vw, 28px);
	padding: 14px clamp(28px, 4vw, 60px) 14px 14px;
	border-radius: var(--radio-xl);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86));
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-l);
}
.servicios__lab-foto {
	position: relative;
	margin: 0;
	aspect-ratio: 1600 / 1030;
	overflow: hidden;
	border-radius: calc(var(--radio-xl) - 12px);
	background: var(--fondo-3);
	isolation: isolate;
}
.servicios__lab-foto > img { width: 100%; height: 100%; object-fit: cover; }
.servicios__lab-texto { display: grid; gap: 16px; justify-items: start; padding-block: 20px; }
.servicios__lab-texto > p:not(.ceja) { color: var(--texto-2); }
.servicios__lab-puntos { display: grid; gap: 10px; margin-top: 6px; }
.servicios__lab-puntos li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; color: var(--texto); }
.servicios__lab-check { display: inline-grid; flex: none; width: 24px; height: 24px; color: var(--exito); }
.servicios__lab-check svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Escáner: la copia desenfocada se retira detrás de una línea de luz que barre la foto. Todo el barrido es transform
   (--corte lo anima servicios.js): la envoltura de fuera se corre a la derecha y recorta con su borde izquierdo; la de
   dentro se corre lo mismo a la izquierda para que la foto borrosa no se mueva. Así no se repinta nada cuadro a cuadro. */
.servicios__escaner-borrosa,
.servicios__escaner-interior {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
}
.servicios__escaner-borrosa { z-index: 1; overflow: hidden; transform: translateX(var(--corte, 0%)); }
.servicios__escaner-interior { transform: translateX(calc(var(--corte, 0%) * -1)); }
.servicios__escaner-borrosa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(14px) saturate(0.85) brightness(1.06);
	transform: scale(1.06);
}
/* La línea de luz: una capa del ancho de la foto que se traslada; la línea es su canto izquierdo (::before) */
.servicios__escaner-linea {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transform: translateX(var(--corte, 0%));
	will-change: transform, opacity;
}
.servicios__escaner-linea::before,
.servicios__escaner-linea::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
}
.servicios__escaner-linea::before {
	left: -1px;
	width: 2px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 18%, #ffffff 82%, rgba(255, 255, 255, 0));
	box-shadow: 0 0 10px 2px rgba(127, 207, 255, 0.9), 0 0 42px 10px rgba(46, 155, 255, 0.35);
}
/* Estela de luz que deja la línea: muy tenue, solo sugiere el paso del haz (se pinta sobre el halo, como antes) */
.servicios__escaner-linea::after {
	left: -90px;
	width: 90px;
	background: linear-gradient(90deg, rgba(127, 207, 255, 0), rgba(127, 207, 255, 0.22));
}
/* Marcas de enfoque en las esquinas, como el visor de un instrumento de precisión */
.servicios__escaner-marco {
	position: absolute;
	inset: 18px;
	z-index: 2;
	pointer-events: none;
	--l: 26px;
	--c: rgba(255, 255, 255, 0.95);
	background:
		linear-gradient(var(--c), var(--c)) top left / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
		linear-gradient(var(--c), var(--c)) top right / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
		linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
		linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
	background-repeat: no-repeat;
	filter: drop-shadow(0 1px 2px rgba(10, 23, 51, 0.35));
}
/* Retícula central que aparece al terminar el barrido: "en foco" */
.servicios__escaner-reticula {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px rgba(10, 23, 51, 0.12), 0 0 22px rgba(127, 207, 255, 0.7);
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity; /* solo existe mientras corre el barrido: servicios.js la quita al final */
}
.servicios__escaner-reticula::before,
.servicios__escaner-reticula::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: rgba(255, 255, 255, 0.95);
}
.servicios__escaner-reticula::before { width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; }
.servicios__escaner-reticula::after { width: 1.5px; height: 12px; margin: -6px 0 0 -0.75px; }

/* ---------- Tableta ---------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.servicios__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; }
	.servicios__tarjeta--contacto,
	.servicios__tarjeta--ajuste { min-height: 250px; }
	.servicios__celda--examen { grid-column: 1 / -1; grid-row: auto; }
	.servicios__celda--contacto,
	.servicios__celda--ajuste,
	.servicios__celda--limpieza,
	.servicios__celda--instalaciones { grid-column: span 3; grid-row: auto; }
	.servicios__celda--atencion { grid-column: 1 / -1; grid-row: auto; }
	.servicios__tarjeta--examen { min-height: 520px; }
	.servicios__tarjeta--atencion { flex-direction: row; align-items: center; gap: 22px; }
	.servicios__tarjeta--atencion .servicios__texto { margin-top: 0; }
	.servicios__lab { grid-template-columns: 1fr; padding: 12px 12px clamp(20px, 4vw, 36px); }
	.servicios__lab-texto { padding: 8px clamp(10px, 3vw, 28px) 0; }
}

/* ---------- Teléfono --------------------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.servicios__lista { grid-template-columns: minmax(0, 1fr); }
	.servicios__celda--contacto,
	.servicios__celda--ajuste,
	.servicios__celda--limpieza,
	.servicios__celda--instalaciones,
	.servicios__celda--atencion { grid-column: 1 / -1; }

	.servicios__tarjeta--examen { padding: 10px; }
	.servicios__foto--examen { flex: none; min-height: 0; aspect-ratio: 5 / 4; }
	.servicios__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		margin: -48px 8px 2px;
		padding: 22px 20px;
	}
	.servicios__panel .servicios__icono { grid-row: auto; margin-top: -52px; }
	.servicios__panel > :not(.servicios__icono) { grid-column: 1; }
	.servicios__lupa { --d: 112px; }

	.servicios__tarjeta--contacto { padding-right: 40%; min-height: 200px; }
	.servicios__deco-lente { width: 44%; right: -4px; }

	.servicios__tarjeta--limpieza { min-height: 0; padding-right: 40%; }
	.servicios__agua { width: 36%; }

	.servicios__tarjeta--ajuste { padding-right: calc(38% + 12px); min-height: 200px; }
	.servicios__foto--ajuste { width: 38%; top: 10px; right: 10px; bottom: 10px; }

	.servicios__tarjeta--atencion { flex-direction: column; align-items: stretch; }
	.servicios__lab-puntos li { font-size: 0.9rem; }
	.servicios__escaner-marco { inset: 12px; --l: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.servicios__tarjeta,
	.servicios__tarjeta:hover { transform: none; }
}