/* ==========================================================================
   Health Support — Hero v0.3 (9-oct-2026): dos variantes elegidas por Freddy entre las mecánicas de 21st.dev
   A «Portada»: la palabra vive ENTRE la foto y las personas recortadas (ref. Parallax Scrolling + Hero Shutter Text)
   B «Titular que rota»: «Cuidamos [a su equipo · a sus afiliados · a los suyos]» con la foto al ritmo (ref. Text Rotate)
   Hereda base-v2.css y home-v2.css (la .ficha es la misma de la v0.2, con el enlace de verificación del REPS).
   ========================================================================== */

/* ---------- Ficha: verificación pública del REPS (común a A y B) ---------- */
.ficha__verificar { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; letter-spacing: 0; font-weight: 700; color: var(--cian-prof); text-decoration: none; border-bottom: 1px solid currentColor; }
.ficha__verificar:hover { color: var(--navy); }
.ficha__verificar .ico { width: 15px; height: 15px; }

/* ======================= A · Portada ======================= */
/* La escena va a sangre y su alto escala con el ANCHO (≤ 0,6 × ancho): la foto siempre se ajusta por ancho
   (cover limitado por el ancho), así el médico queda en la misma proporción horizontal en todo escritorio y la
   palabra, medida en vw, cae siempre detrás de su perfil. */
.portada { position: relative; isolation: isolate; }
.portada__escena { position: relative; height: min(39vw, calc(100vh - var(--header-h) - 230px)); min-height: 420px; overflow: hidden; background: #E9EAEA; }
.portada__fondo, .portada__personas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform-origin: 50% 0%; }
.portada__fondo { z-index: 1; }
.portada__personas { z-index: 3; pointer-events: none; }
/* La palabra es parte del H1 (lo lee el lector de pantalla), pero se dibuja en la escena, entre las dos capas */
.portada__capa { position: absolute; z-index: 2; left: 39.6vw; top: 6.2vw; pointer-events: none; }
.portada__palabra { display: block; font-size: 14.6vw; font-weight: 300; font-stretch: 100%; line-height: .8; letter-spacing: -.045em; white-space: nowrap; color: var(--navy); }
.portada__texto { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; padding-top: 40px; padding-bottom: 40px; }
.portada__resto { display: block; margin: 0; font-size: clamp(36px, 3.7vw, 56px); font-weight: 300; line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; }
.portada__resto em { font-style: normal; font-weight: 700; }
.portada__texto .lead { margin-bottom: 28px; font-size: 18px; }
.hero-portada .ficha { margin-bottom: 8px; }
@media (max-width: 900px) {
  .portada__texto { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; padding-bottom: 28px; }
}
/* Teléfono: la escena se ajusta por ALTO (118vw) para mostrar el saludo de manos. Con object-position 53 %, la nariz
   del médico cae SIEMPRE en el 31,1 % del ancho (650 px del original × escala − desplazamiento, todo proporcional al
   ancho): la palabra arranca ahí, con el asta de la H apenas detrás de su perfil, y termina antes del 97 %. */
@media (max-width: 600px) {
  .portada__escena { height: 118vw; min-height: 0; }
  .portada__fondo, .portada__personas { object-position: 53% 0%; }
  .portada__capa { left: 30.4vw; top: 9vw; }
  .portada__palabra { font-size: 17.4vw; }
}

/* ======================= B · Titular que rota ======================= */
.rota__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.rota__titulo { margin-bottom: 18px; font-size: clamp(44px, 5.6vw, 84px); }
.rota__visible { display: block; }
/* Las tres frases ocupan la misma celda: la ventana toma el ancho de la más larga y nada salta al rotar */
.rota__ventana { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; font-weight: 700; }
.rota__frase { grid-area: 1 / 1; white-space: nowrap; }
.rota__frase:not(:first-child) { visibility: hidden; }
.rota__frase .l { display: inline-block; white-space: pre; }
.js .rota__frase { visibility: visible; }
.rota__reloj { display: block; width: 100%; max-width: 560px; height: 3px; margin: 0 0 32px; background: var(--linea); overflow: hidden; }
.rota__reloj i { display: block; height: 100%; background: var(--cian); transform-origin: left; transform: scaleX(0); }
.rota__texto .lead { margin-bottom: 36px; }
/* overflow: clip — la foto que entra escala al 110 %; el clip-path la recorta a la vista, pero el sobrante cuenta
   como desborde de la página si no se recorta el contenedor. El botón de pausa queda a 6 px del borde: su anillo de foco cabe. */
.rota__fotos { position: relative; overflow: clip; aspect-ratio: 5 / 5.5; max-height: calc(100vh - var(--header-h) - 200px); width: 100%; justify-self: end; }
.rota__foto { position: absolute; inset: 0 0 44px 0; margin: 0; }
.rota__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.rota__foto figcaption { position: absolute; left: 0; right: 130px; top: calc(100% + 14px); font-size: 14px; line-height: 1.4; color: var(--muted); }
.rota__foto:not(:first-of-type) { visibility: hidden; }
.js .rota__foto { visibility: visible; }
.rota__pausa { position: absolute; right: 6px; bottom: 6px; display: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--navy); font: 700 14px 'Nunito Sans', sans-serif; cursor: pointer; border-bottom: 1px solid currentColor; }
.rota__pausa:hover { color: var(--cian-prof); }
.rota__pausa .ico { width: 16px; height: 16px; }
.rota-activa .rota__pausa { display: inline-flex; }
@media (max-width: 900px) {
  .rota__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .rota__titulo { font-size: clamp(40px, 11vw, 52px); }
  .rota__reloj { margin-bottom: 24px; }
  .rota__texto .lead { margin-bottom: 28px; }
  .rota__fotos { justify-self: stretch; aspect-ratio: 4 / 3.6; max-height: none; margin-inline: calc(var(--gutter) * -1); width: auto; }
  .rota__foto { inset: 0 0 52px 0; }
  .rota__foto img { border-radius: 0; }
  .rota__foto figcaption { left: var(--gutter); right: 120px; }
  .rota__pausa { right: var(--gutter); bottom: 6px; }
}

/* ---------- Movimiento: estados iniciales solo con JS y sin reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .portada__palabra { opacity: 0; }
  .js [data-revela="hero3"] { opacity: 0; transform: translateY(22px); }
}

/* ======================= A' · Portada con la escena COMPLETA (v0.4, 9-oct-2026) =======================
   WA0047 ampliada con fal.ai (Bria Expand): la IA solo agregó pared y aire (arriba y a la derecha); las personas son
   los píxeles originales restaurados (diferencia 0/255). Lienzo 3100×1426 (2,17:1): el médico entero de la cabeza
   a la cintura, el saludo de manos, el maletín y el paciente completo. La foto se ancla ABAJO (object-position 100 %):
   en escritorio todo se mide desde el pie de la escena, en vw, porque el ajuste es por ANCHO (alto ≤ 0,46 × ancho). */
.portada--ampliada { --escena-h: max(420px, min(41.5vw, calc(100vh - var(--header-h) - 220px))); }
.portada--ampliada .portada__escena { height: var(--escena-h); min-height: 0; background: #ECEDED; }
.portada--ampliada .portada__fondo, .portada--ampliada .portada__personas { object-position: 50% 100%; transform-origin: 50% 100%; }
/* La palabra arranca en el perfil del médico (nariz = 650/3100 del lienzo = 21 % del ancho) y llega al 94 %;
   su pie apoya en la cabeza del paciente. Posición desde el pie de la escena: top = alto − distancia − caja. */
.portada--ampliada .portada__capa { left: 19.9vw; top: calc(var(--escena-h) - 20.4vw - 15.2vw); }
.portada--ampliada .portada__palabra { font-size: 19vw; }
@media (max-width: 900px) {
  /* Tableta: el lienzo completo, a todo el ancho (alto = 0,46 × ancho), misma geometría que el escritorio */
  .portada--ampliada { --escena-h: 46vw; }
}
@media (max-width: 600px) {
  /* Teléfono: ajuste por ALTO para que el saludo de manos llene la pantalla; la palabra sube a la cabecera, sobre
     el aire generado, y la coronilla del médico apenas entra en la base de la «H» y la «u». */
  .portada--ampliada { --escena-h: 118vw; }
  .portada--ampliada .portada__fondo, .portada--ampliada .portada__personas { object-position: 8% 100%; }
  .portada--ampliada .portada__capa { left: 6vw; top: 4.5vw; }
  .portada--ampliada .portada__palabra { font-size: 22.6vw; }
}

/* ======================= Equipo v0.4 (9-oct-2026): retratos con encuadre CONSISTENTE =======================
   Cada retrato es un lienzo con la proporción del marco (4:4,4) donde la cara mide lo mismo y los ojos caen a la misma
   altura (encuadrar-retratos.js). Lo que faltaba arriba (pared y coronilla) se amplió con fal.ai; los rostros son los
   píxeles originales (0/255). Se ancla ARRIBA: si el marco se acorta por el alto de la ventana, se recorta el pie, nunca la cabeza. */
.equipo--v4 .retrato img { object-position: 50% 0%; }
@media (max-width: 900px) {
  /* 16:10 a todo el ancho = ventana del 57 % del alto del lienzo: arranca al 4 % para que la coronilla (7–12 %) quede adentro */
  .equipo--v4 .marco .retrato:nth-child(7) img { object-position: 50% 10%; }
}