/* ==========================================================================
   Health Support — Hero v0.5 (19-oct-2026): «Portada en dos campos» (B) y «Portadas que rotan» (A).
   Origen medido: a 1920 la franja de la v0.4 es 2,47:1 y las fotos de 2021 son 1,5:1; el 56 % del encuadre visible
   lo generó la IA y el 73 % es pared vacía (la mitad derecha, sin personas). Aquí la foto va en su proporción REAL
   (nada se inventa) y el ancho que sobra es un campo azul marino de la marca: el color entra como bloque deliberado.
   La palabra monumental cruza la frontera: sobre la foto es azul marino y pasa DETRÁS de las personas recortadas;
   sobre el campo es blanca. Las dos copias se mueven con el mismo transform; lo que las separa es un recorte fijo.
   Geometría en píxeles del archivo (1600×1066) × --s: la palabra queda pegada a las personas en todo ancho.
   Hereda base-v2.css, home-v2.css y la .ficha / .ficha__verificar de hero-v3.css.
   ========================================================================== */

.campos {
  /* Escritorio (≥ 1100 px): alto de la escena = la primera pantalla deja ver la credencial debajo */
  --h: clamp(640px, calc(100vh - var(--header-h) - 150px), 880px);
  /* ancho de la foto: su proporción natural (1,5:1), sin pasar del 62 % ni dejar al campo menos de 440 px */
  --pw: min(calc(var(--h) * 1.5), 62vw, calc(100vw - 440px));
  /* escala: 1 px del archivo en pantalla (cubre el panel: nunca queda un borde vacío) */
  --s: max(calc(var(--h) / 1066), calc(var(--pw) / 1600));
  position: relative; isolation: isolate; height: var(--h); overflow: clip; background: var(--navy);
}
.campos__foto { position: absolute; left: 0; top: 0; height: var(--h); width: var(--pw); overflow: clip; background: #E9EAEA; touch-action: pan-y; }
/* Cada escena: el fondo y sus personas recortadas, con el MISMO tamaño y desplazamiento (si no, aparece un fantasma) */
/* --ox/--oy se declaran en cada capa: así toman el --px/--py de SU escena (en .campos tomarían el de la raíz) */
.campos__fondo, .campos__personas, .campos__palabra { --ox: calc((var(--pw) - var(--s) * 1600) * var(--px, .3)); --oy: calc((var(--h) - var(--s) * 1066) * var(--py, 0)); }
.campos__fondo, .campos__personas { position: absolute; max-width: none; width: calc(var(--s) * 1600); height: calc(var(--s) * 1066);
  left: var(--ox); top: var(--oy); transform-origin: 50% 50%; }
.campos__fondo { z-index: 1; }
.campos__personas { z-index: 3; pointer-events: none; }

/* La palabra: dos copias idénticas en dos ventanas fijas (foto y campo) */
.campos__ventana { position: absolute; left: 0; right: 0; top: 0; height: var(--h); pointer-events: none; z-index: 2; }
.campos__ventana--foto { clip-path: inset(0 calc(100% - var(--pw)) 0 0); }
.campos__ventana--campo { clip-path: inset(0 0 0 var(--pw)); }
.campos__palabra { position: absolute; display: block; margin: 0;
  --wl: calc(var(--ox) + var(--s) * var(--wx));
  left: var(--wl); top: calc(var(--oy) + var(--s) * var(--wy));
  font-size: min(calc(var(--s) * var(--wf)), calc((100vw - var(--wl) - 32px) / var(--wr)));
  font-weight: 300; line-height: .8; letter-spacing: -.045em; white-space: nowrap; color: var(--navy); }
.campos__ventana--campo .campos__palabra { color: #fff; }

/* El texto vive en el campo de color, anclado abajo y DEBAJO de la palabra (se mide: sin choque en 4 anchos) */
.campos__texto { position: absolute; z-index: 4; left: var(--pw); right: 0; bottom: 0; color: #fff;
  padding: 0 clamp(32px, 3.4vw, 72px) clamp(32px, 4.4vh, 52px) clamp(36px, 3.4vw, 64px); }
.campos__resto { display: block; margin: 0 0 18px; font-size: clamp(27px, min(2.45vw, calc(var(--h) * .052)), 46px); font-weight: 300; line-height: 1.08; letter-spacing: -.026em; text-wrap: balance; }
.campos__resto em { font-style: normal; font-weight: 700; }
.campos__texto .lead { margin: 0 0 24px; max-width: 42ch; font-size: clamp(15px, calc(var(--h) * .021), 17px); line-height: 1.55; color: var(--sobre-oscuro); }
.campos__texto .acciones { gap: 18px 28px; }
.campos__texto .enlace { white-space: nowrap; }
.campos__texto .enlace { color: #fff; }
.campos__texto .enlace:hover { color: var(--cian); }
.campos :focus-visible { outline-color: var(--cian); }
.hero-campos .ficha { margin-bottom: 8px; }

/* ---------- Escenas: punto de arranque, altura y tamaño de la palabra, en píxeles del archivo ---------- */
/* WA0047 · médico y paciente: el asta de la H detrás de la nariz del médico; la cabeza del paciente, por delante de la base */
.escena--0047 { --px: .3; --wx: 596; --wy: 112; --wf: 470; --wr: 3.95; }
/* WA0051 · enfermera de la mano del paciente: la «C» nace detrás del cabello de la enfermera y la palabra sale al campo */
.escena--0051 { --px: .1; --wx: 1316; --wy: 228; --wf: 300; --wr: 3.7; }
/* WA0034 · consulta de medicina general: la palabra sobre la pared blanca; los puños de la niña, por delante */
.escena--0034 { --px: .55; --wx: 260; --wy: 92; --wf: 440; --wr: 4.55; }

/* ---------- Tableta y teléfono (< 1100 px): foto arriba en su proporción, campo de color debajo ---------- */
@media (max-width: 1099px) {
  .campos { --pw: 100vw; --h: min(66.7vw, calc(72vh - var(--header-h))); height: auto; }
  .campos__foto { position: relative; width: 100%; }
  .campos__ventana--campo { display: none; }
  .campos__ventana--foto { clip-path: none; }
  .campos__texto { position: relative; left: auto; padding: 32px var(--gutter) 40px; }
  .campos__resto { font-size: clamp(30px, 5vw, 44px); max-width: 22ch; }
  .campos__texto .acciones { flex-wrap: wrap; }
  .campos__texto .lead, .rotan__frases { font-size: 16.5px; }
}
@media (max-width: 600px) {
  .campos { --h: 85vw; }
  .campos__resto { font-size: clamp(30px, 8.6vw, 40px); }
  .escena--0047 { --px: .78; --wx: 652; --wy: 70; --wf: 300; }
}

/* Campo en gris mineral (para comparar): la palabra queda en un solo color y el texto en azul marino */
.campos--mineral { background: var(--mineral); }
.campos--mineral .campos__ventana--campo .campos__palabra, .campos--mineral .campos__texto { color: var(--navy); }
.campos--mineral .campos__texto .lead { color: var(--muted); }
.campos--mineral .campos__texto .enlace { color: var(--navy); }
.campos--mineral .campos__texto .enlace:hover { color: var(--cian-prof); }
.campos--mineral :focus-visible { outline-color: var(--cian-prof); }

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

/* ======================= A · Portadas que rotan ======================= */
/* Las tres escenas ocupan el mismo lugar; sin JS (o con reduced-motion) solo se ve la primera */
.rotan .campos__escena { position: absolute; inset: 0; }
.rotan .campos__escena:not(:first-child), .rotan .campos__palabra:not(:first-child) { visibility: hidden; }
.js .rotan.rotan-activa .campos__escena, .js .rotan.rotan-activa .campos__palabra { visibility: visible; }
/* El H1 nombra las tres cualidades; la de la escena activa se enciende (700) */
.rotan__h1.campos__resto { margin-bottom: 14px; }
.rotan__cualidad { transition: font-weight .6s var(--ease); }
.rotan__cualidad.is-activa { font-weight: 700; }
.rotan__frases { display: grid; margin: 0 0 22px; max-width: 42ch; font-size: clamp(15px, calc(var(--h) * .021), 17px); line-height: 1.55; color: var(--sobre-oscuro); }
.rotan__frase { grid-area: 1 / 1; margin: 0; }
.rotan__frase:not(:first-child) { visibility: hidden; }
.js .rotan-activa .rotan__frase { visibility: visible; }
/* Controles: tres tramos (como la secuencia del equipo) + pausa visible (WCAG 2.2.2). Los tramos son botones */
.rotan__controles { display: flex; align-items: center; gap: 20px; margin-top: clamp(14px, calc(var(--h) * .026), 26px); }
.rotan__tramos { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rotan__tramo { position: relative; display: block; width: 56px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.rotan__tramo::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(255, 255, 255, .3); }
.rotan__tramo i { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: #fff; transform-origin: left; transform: scaleX(0); }
.rotan__tramo[aria-current="true"] i { transform: scaleX(1); }
.rotan__pausa { display: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; color: #fff; font: 700 14px 'Nunito Sans', sans-serif; cursor: pointer; }
.rotan__pausa:hover { color: var(--cian); }
.rotan__pausa .ico { width: 16px; height: 16px; }
.rotan-auto .rotan__pausa { display: inline-flex; }
/* Tableta y teléfono: no todas las fotos tienen pared libre a lo ancho (WA0051 no), así que en A la palabra encabeza
   el campo de color, en blanco, para las tres escenas por igual; la foto queda limpia arriba */
@media (max-width: 1099px) {
  .rotan .campos__escena { height: var(--h); bottom: auto; }
  .rotan .campos__ventana--foto { display: none; }
  .rotan .campos__ventana--campo { display: grid; position: relative; height: auto; clip-path: none; padding: 28px var(--gutter) 0; overflow: clip; }
  .rotan .campos__ventana--campo .campos__palabra { position: static; grid-area: 1 / 1; font-size: min(15.5vw, 132px); line-height: .9; }
  .rotan .campos__texto { padding-top: 14px; }
  /* la palabra grande ya nombra la cualidad: el H1 muestra solo el lema (las cualidades siguen en el H1 para el lector de pantalla) */
  .rotan__cualidades { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rotan__lema { display: block; }
  .rotan__lema::first-letter { text-transform: uppercase; }
  .escena--0051 { --px: .35; }
  .escena--0034 { --px: .75; }
}

/* ---------- Auditoría móvil v1.0 (19-oct-2026) ---------- */
/* Deslizar con el dedo en TODO el hero (foto y campo): el navegador se queda con el gesto vertical y deja el horizontal al JS */
.campos { touch-action: pan-y; }
/* Celulares bajos (iPhone SE 375×667): la foto cede alto para que el botón principal quepa en la primera pantalla */
@supports (height: 1svh) { @media (max-width: 600px) { .campos { --h: min(85vw, 40svh); } } }
@supports not (height: 1svh) { @media (max-width: 600px) { .campos { --h: min(85vw, 40vh); } } }
/* Celular horizontal: foto más baja y la palabra limitada por la altura, para que el H1 entre en la primera pantalla */
/* Celulares muy bajos (320×568): un poco más de alto cedido */
@media (max-width: 600px) and (max-height: 600px) { .campos { --h: min(85vw, 30vh); } .campos .campos__escena { --py: .35; } }
@media (max-width: 1099px) and (orientation: landscape) and (max-height: 520px) {
  .campos { --h: 40vh; }
  /* la franja es más ancha que la foto: se ancla cerca del centro (con --py 0 solo se veía la pared de arriba) */
  .campos .campos__escena { --py: .5; }
  .rotan .campos__ventana--campo .campos__palabra { font-size: min(15.5vw, 132px, 17vh); }
}