/* ==========================================================================
   Prótesis Oculares · carrusel «Del taller a la mirada» (1.7.0) — solo en la portada, dentro de Servicios.
   Marco de cristal 4:5 (el de .pro-portrait, definido en home.css), capítulos apilados y un carril con círculos-iris.
   Transición «Enfoque»: el capítulo saliente se desenfoca y se desvanece; el entrante se enfoca con un zoom mínimo (900 ms).
   Sin JavaScript solo se ve el capítulo 1 y el carril no existe. Con «reducir movimiento» el cambio es instantáneo y sin desenfoque.
   ========================================================================== */

.pro-car { --n: 3; width: 100%; max-width: 520px; margin-inline: auto; }
.pro-car__frame { overflow: hidden; touch-action: pan-y; }
.pro-car__stage { position: relative; width: 100%; height: 100%; border-radius: var(--r-inner); overflow: hidden; background: #0e0e0e; isolation: isolate; }

/* Capítulos apilados: el activo ocupa el marco; el resto está desenfocado, transparente y fuera del árbol de accesibilidad */
.pro-car__slide { position: absolute; inset: 0; margin: 0; opacity: 0; filter: blur(10px); transform: scale(1.04); visibility: hidden; transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s; }
.pro-car__slide.is-active { opacity: 1; filter: blur(0); transform: scale(1); visibility: visible; transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease, visibility 0s; z-index: 1; }
.pro-car.is-anim .pro-car__slide { will-change: opacity, filter, transform; }              /* solo mientras dura el cambio */
.pro-car:not(.is-ready) .pro-car__slide:not(.is-active) { display: none; }
.pro-car__slide > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Capítulo 04: la franja de mirada (16:5) se muestra entera, centrada sobre el cristal, nunca recortada a un solo ojo */
.pro-car__slide--eye { display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 45%, rgba(255, 255, 255, 0.09), transparent 70%), #0e0e0e; }
.pro-car__slide--eye > img { width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; object-position: 50% var(--fy, 50%); border-block: 1px solid rgba(255, 255, 255, 0.2); }

/* Pie de capítulo: cristal oscuro tintado (sin blur de fondo); #fff sobre rgba(10,10,10,.72) ≥ 8:1 aunque la foto sea blanca */
.pro-car__chip { position: absolute; left: 12px; right: 12px; bottom: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 16px; background: rgba(10, 10, 10, 0.74); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.875rem; line-height: 1.35; text-wrap: balance; }

/* Pausa (arriba a la derecha del marco). Los dos trazos se dibujan con CSS; en pausa pasan a triángulo. */

/* Carril: hilo fino con el relleno hasta el capítulo activo; cuatro (o tres) círculos-iris con su rótulo debajo */
.pro-car__rail { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; margin-top: 22px; --ring: 39px; --cy: 28px; }
.pro-car:not(.is-ready) .pro-car__rail { display: none; }
/* Q-190-01 · Un conector por hueco (del borde de un círculo al borde del siguiente, con 6 px de aire sobre el anillo activo):
   el hilo no cruza nunca un círculo. --ring = radio del círculo (28) + anillo (2) + separación (3) + aire (6) = 39 px (35 px con círculos de 48). */
.pro-car__dot + .pro-car__dot::before, .pro-car__dot + .pro-car__dot::after { content: ""; position: absolute; top: var(--cy); left: calc(var(--ring) - 50%); width: calc(100% - 2 * var(--ring)); pointer-events: none; }
.pro-car__dot + .pro-car__dot::before { height: 1px; background: rgba(255, 255, 255, 0.22); }
.pro-car__dot + .pro-car__dot::after { height: 2px; margin-top: -0.5px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s ease; }
.pro-car__dot + .pro-car__dot.is-past::after { transform: scaleX(1); }   /* is-past = capítulo ya alcanzado (índice ≤ activo): su conector se rellena */
.pro-car__dot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; line-height: 1.25; text-align: center; cursor: pointer; }
.pro-car__iris { display: block; width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: #151515; transition: outline-color 0.3s ease; outline: 2px solid transparent; outline-offset: 3px; }
.pro-car__iris img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--mx, 50%) var(--my, 20%); opacity: 0.62; transition: opacity 0.3s ease; }   /* se atenúa la imagen, no el disco: el círculo sigue opaco y el hilo no se ve a través */
.pro-car__dot:hover .pro-car__iris img { opacity: 0.9; }
.pro-car__dot[aria-current="true"] { color: var(--text); }
.pro-car__dot[aria-current="true"] .pro-car__iris { outline-color: #fff; }                           /* anillo blanco del círculo activo */
.pro-car__dot[aria-current="true"] .pro-car__iris img { opacity: 1; }
.pro-car__dot:focus-visible { outline: none; box-shadow: none; }
.pro-car__dot:focus-visible .pro-car__iris { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(215, 14, 22, 0.9); }
.pro-car__lab { display: block; max-width: 100%; text-wrap: balance; }
@media (max-width: 400px) { .pro-car__iris { width: 48px; height: 48px; } .pro-car__rail { --ring: 35px; --cy: 24px; } .pro-car__dot { font-size: 0.75rem; } }

/* Capítulo 04 cuando hay franja: el círculo muestra el centro de la franja */
.pro-car__dot--eye .pro-car__iris img { object-position: 50% var(--fy, 50%); }

/* Firma bajo el texto de la portada */
.pro-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 28px; }
.pro-sign__img { display: block; width: auto; height: 44px; max-width: 220px; }
.pro-sign__txt { font-size: 0.875rem; letter-spacing: 0.02em; color: var(--muted); }

/* Móvil y estrecho (≤ 860 px): kicker → titular → carrusel (marco + círculos) → texto → firma → botones */
@media (max-width: 860px) {
	.svc-prot__media > .pro-car { order: 3; margin: 0 auto 32px; max-width: 420px; align-self: center; }
	.svc-prot__copy > .pro-sign { order: 5; margin-bottom: 20px; }
	.svc-prot__copy > .svc-cta { order: 6; }
	.svc-prot__copy > .glo-hint { order: 7; }
}
/* ≥ 861 px: el marco mide 520 × 650 a 1440 px (columna izquierda) y el texto queda a la derecha */
@media (min-width: 861px) {
	.svc-prot__media .pro-car { max-width: 520px; }
	.svc-prot__media .pro-car .pro-portrait { max-width: none; }
	.svc-prot__media { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pro-car__slide, .pro-car__slide.is-active { transition: none; filter: none; transform: none; }
	.pro-car__dot + .pro-car__dot::after, .pro-car__iris, .pro-car__iris img { transition: none; }
}
@media (forced-colors: active) {
	.pro-car__iris { border-color: CanvasText; }
	.pro-car__dot + .pro-car__dot::before { background: CanvasText; }
	.pro-car__dot + .pro-car__dot::after { background: Highlight; }
	.pro-car__dot[aria-current="true"] .pro-car__iris { outline-color: Highlight; outline-width: 3px; }
}