/* ==========================================================================
   Geriátrico Médico Patricio Lynch — hoja de estilos
   Fase 1: base + header + hero + footer
   Paleta muestreada del logo real. Ver CLAUDE.md §6.
   ========================================================================== */

/* ── Tipografía ────────────────────────────────────────────────────────
   Figtree variable, autohospedada (SIL Open Font License).
   Un solo archivo de 20 KB cubre los pesos 300 a 800: evita 5 descargas y
   pesa menos que dos estáticas.

   Se sirve desde el propio dominio, no desde Google Fonts. El CDN de Google
   recibiría la IP de cada visitante, y la política de privacidad del sitio
   declara que no se comparten datos con terceros sin acción del usuario.

   Es el subconjunto latino: verificado que cubre todos los caracteres
   visibles del sitio, incluidos ñ, tildes, ¿ ¡ y los signos · — ›   */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-variable.woff2') format('woff2-variations'),
       url('../fonts/figtree-variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Azul — primario de interfaz. #0048AC = 8,32:1 sobre blanco */
  --blue-900: #002B66;
  --blue-800: #003885;
  --blue-700: #0048AC;
  --blue-600: #0051C2;
  --blue-200: #C2DBFF;
  --blue-050: #E5F0FF;

  /* Teal — acento. #0094B0 solo decorativo (3,58:1, no apto para texto) */
  --teal-900: #003C47;
  --teal-700: #007085;
  --teal-500: #0094B0;
  --teal-200: #B4D8EC;
  --teal-050: #E5FBFF;

  /* ── Turquesa — el color de los fondos del sitio ────────────────────────
     --turquesa es el color pedido, #0097B2, tal cual.

     El problema es que sobre él el texto blanco queda en 3,46:1, bajo el
     4,5:1 que este proyecto tiene como mínimo no negociable (§5), y el del
     footer, que va al 82%, cae a 2,9:1. Así que #0097B2 se usa donde es un
     color y no un fondo de lectura —acentos, iconos, detalles— y los fondos
     grandes que llevan texto encima usan --turquesa-800, el mismo tono más
     oscuro: 8,21:1 con blanco puro y 6,09:1 con el blanco del footer.

     --turquesa-950 es el velo de las fotografías. Se eligió midiendo: tiene
     exactamente la misma luminancia que el azul rgb(0,25,60) al que
     reemplaza, así que todos los contrastes medidos sobre las fotos siguen
     valiendo y solo cambia el tono del velo, de azulado a verdoso. */
  /* Verde de los vistos. No sale del logotipo: el sitio no tenía verde y los
     vistos se dibujaban en teal, que a esa escala se lee azul. #0E7C4A es
     inequívocamente verde y da 5,25:1 sobre blanco y 4,88:1 sobre el gris de
     sección — por encima del 3:1 que pide un icono, e incluso del 4,5:1 de
     texto. Un verde más brillante, como el de WhatsApp, cae a 2:1 sobre
     blanco y no se distingue. */
  --verde: #0E7C4A;

  --turquesa: #0097B2;
  --turquesa-800: #005767;
  --turquesa-950: 0, 29, 34;   /* en componentes: se usa con rgba() */

  /* Neutros */
  --neutral-900: #22282B;
  --neutral-700: #3D474B;
  --neutral-600: #5B686D;
  --neutral-300: #C4CFD1;
  --neutral-200: #DDE5E6;
  --neutral-100: #F5F7F7;
  --white: #FFFFFF;

  --font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --container: 1180px;
  /* La barra fija de móvil que la portada tiene que descontar para caber en
     una pantalla. Es una medida real: 10+50+10 de relleno y botón, más 1 de
     borde. Solo existe fuera de escritorio. Si cambia, cambia el token. */
  --barra-h: calc(71px + env(safe-area-inset-bottom, 0px));
  /* Altura real del header: el logotipo a 232px mide 78,5 de alto y ya
     desbordaba los 76px declarados antes. Con el header transparente el dato
     dejó de ser decorativo — el margen negativo que sube el hero se calcula
     con él, y 4px de diferencia dejaban una franja blanca sobre la foto. */
  --header-h: 80px;

  --shadow-sm: 0 1px 3px rgba(0, 43, 102, .07);
  --shadow-md: 0 6px 20px rgba(0, 43, 102, .10);
  --shadow-lg: 0 18px 48px rgba(0, 43, 102, .16);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* En escritorio la barra fija de móvil no existe, así que la portada no tiene
   nada que descontar y ocupa la pantalla completa. */
@media (min-width: 1140px) { :root { --barra-h: 0px; } }

/* ── Reset y base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1.125rem;      /* 18px — lector con presbicia */
  line-height: 1.65;
  color: var(--neutral-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--blue-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.185rem, 1.06rem + .6vw, 1.5rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }

a { color: var(--blue-700); text-underline-offset: .18em; }
a:hover { color: var(--blue-600); }

:focus-visible {
  outline: 3px solid var(--blue-700);
  outline-offset: 3px;
  border-radius: 4px;
}

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--blue-700); color: var(--white);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 52px;                 /* objetivo táctil holgado */
  padding: .75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit; font-weight: 650; font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }

.btn--primary {
  background: var(--blue-700); color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--blue-600); color: var(--white); }

.btn--ghost {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .20);
  border-color: var(--white); color: var(--white);
}

.btn--outline {
  background: transparent; border-color: var(--blue-700); color: var(--blue-700);
}
.btn--outline:hover { background: var(--blue-050); color: var(--blue-800); }

/* Contorno sin relleno + flecha que avanza al pasar el cursor. La flecha va
   más chica que el resto de los iconos de botón: acompaña, no compite. */
.btn--flecha svg {
  width: 18px; height: 18px;
  transition: transform .2s var(--ease);
}
.btn--flecha:hover svg { transform: translateX(4px); }

.btn--sm { min-height: 46px; padding: .5rem 1.1rem; font-size: 1rem; }

/* El hero tiene un solo botón: puede permitirse ser más grande que el resto */
.btn--lg {
  min-height: 60px; padding: .9rem 2.1rem;
  font-size: 1.1875rem;
}
.btn--lg svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════ */

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
  transition: box-shadow .2s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease);
}
.header[data-scrolled='true'] { box-shadow: var(--shadow-md); }

/* ── Header sobre la foto — solo la home ─────────────────────────────────
   El header sigue en el flujo y sigue siendo sticky; el margen negativo sube
   el hero justo su propia altura para que la fotografía pase por detrás.

   El cambio a blanco lo dispara data-solido, que js/main.js escribe según la
   posición del hero, no a los 8px de scroll: el header debe seguir
   transparente mientras se vea la foto y volverse sólido recién al entrar en
   el contenido. Sin JS el atributo no existe, el header queda blanco de
   entrada y la página funciona igual — por eso la transparencia se declara
   sobre [data-solido='false'] y no al revés. */
/* Sin borde inferior: 1px bastaba para que el header midiera más que
   --header-h y el margen negativo dejara una línea blanca asomando sobre la
   fotografía. Cuando el header se vuelve sólido ya viene con sombra, que
   separa igual de bien. */
.header--sobre-foto {
  margin-bottom: calc(-1 * var(--header-h));
  border-bottom-width: 0;
}

.header--sobre-foto[data-solido='false'] {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* El degradado no cubre el hero entero: es una franja de 168px que arranca
   opaca arriba y se apaga por completo poco más abajo del header.

   Los valores .72 y .50 no son a ojo. Se midió el contraste del blanco contra
   los píxeles reales de las dos imágenes que pueden quedar detrás — la foto
   del jardín y el primer fotograma del video del frontis — en la franja donde
   caen el logo, el menú y el botón. El peor píxel de todos, un claro de cielo
   justo bajo el botón, queda en 5,2:1 con estos valores; con .62/.34 caía a
   3,5:1 y no pasaba AA. */
.header--sobre-foto::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 210%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
  background: linear-gradient(to bottom,
    rgba(var(--turquesa-950), .72) 0%,
    rgba(var(--turquesa-950), .50) 45%,
    rgba(var(--turquesa-950), 0) 100%);
}
.header--sobre-foto[data-solido='false']::before { opacity: 1; }

.header--sobre-foto[data-solido='false'] .nav__link,
.header--sobre-foto[data-solido='false'] .nav__link[aria-current='page'] {
  color: var(--white);
}
.header--sobre-foto[data-solido='false'] .nav__link {
  text-shadow: 0 1px 10px rgba(0, 20, 45, .45);
}
/* Sobre la foto, la píldora de la variante b se vuelve vidrio esmerilado */
.header--sobre-foto[data-solido='false'].nav-hover-b .nav__link:hover,
.header--sobre-foto[data-solido='false'].nav-hover-b .nav__link[aria-current='page'] {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
}
.header--sobre-foto[data-solido='false'].nav-hover-c .nav__link::after {
  background: var(--teal-200);
}

.header--sobre-foto[data-solido='false'] .btn--outline {
  border-color: rgba(255, 255, 255, .72);
  color: var(--white);
}
.header--sobre-foto[data-solido='false'] .btn--outline:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--white); color: var(--white);
}

.header--sobre-foto[data-solido='false'] .hamburger {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
  color: var(--white);
  backdrop-filter: blur(6px);
}

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.header__logo { position: relative; flex: 0 0 auto; line-height: 0; }
.header__logo img { width: 232px; height: auto; }

/* Los dos logotipos ocupan la misma caja y se cruzan por opacidad. Comparten
   lienzo de 620x210, así que el intercambio no mueve un píxel. */
.header__logo-blanco {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.header__logo > picture { transition: opacity .25s var(--ease); }
.header--sobre-foto[data-solido='false'] .header__logo-blanco { opacity: 1; }
.header--sobre-foto[data-solido='false'] .header__logo > picture:first-child { opacity: 0; }

/* ── Las cinco variantes de header ───────────────────────────────────────
   Se elige con HEADER_VARIANTE en tools/armazon.py. Todo lo de arriba —
   transparencia, degradado, cruce de logotipos — lo comparten las cuatro
   primeras; acá va solo lo que las diferencia.

   1· SOBRIA — no agrega nada: transparente sobre la foto, blanca y opaca al
      terminar el hero. Es la línea base. */

/* 2· VIDRIO — al pasar el hero no se vuelve blanca sino traslúcida: el
      contenido se insinúa detrás mientras se hace scroll. Se declara un
      respaldo opaco primero, porque sin backdrop-filter (Firefox con la
      opción desactivada) un blanco al 82% deja el texto sobre el contenido
      que pasa por debajo. */
.header--v2[data-solido='true'] { background: var(--white); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header--v2[data-solido='true'] {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* 3· COMPACTA — además de volverse blanca, encoge. El margen negativo que
      sube el hero no cambia: para cuando el header encoge, el hero ya pasó. */
.header--v3 .header__inner { transition: min-height .22s var(--ease); }
.header--v3 .header__logo img { transition: width .22s var(--ease); }
.header--v3[data-solido='true'] .header__inner { min-height: 60px; }
.header--v3[data-solido='true'] .header__logo img { width: 190px; }

/* 4· QUE SE VA — se esconde al bajar y vuelve apenas se sube. js/main.js
      escribe data-oculto, y nunca la esconde con el menú móvil abierto. */
.header--v4 { transition: transform .28s var(--ease), box-shadow .2s var(--ease); }
.header--v4[data-oculto='true'] { transform: translateY(-100%); }

/* 5· SIN TRUCO — la home no recibe header--sobre-foto, así que el header es
      blanco y opaco desde el primer píxel, igual que en las otras páginas.
      No hay nada que declarar: es el comportamiento por defecto. */

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .35rem; }
/* Mayúsculas por petición del cliente. Con caja alta hay que abrir el
   interletrado —si no, las palabras se apelmazan— y bajar un punto el cuerpo,
   porque una mayúscula ocupa más alto visual que una minúscula al mismo
   tamaño. Con 15px y .07em de espaciado el menú ocupa casi lo mismo que
   antes y sigue siendo legible para un lector con presbicia. */
.nav__link {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--neutral-700);
  font-size: .9375rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  text-decoration: none;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

/* La casa hereda el color de los demás enlaces con currentColor: blanca
   mientras el header va sobre la fotografía y azul cuando se vuelve de
   vidrio. Fijarla en blanco la haría desaparecer al hacer scroll. */
.nav__inicio { display: flex; align-items: center; padding-inline: .55rem; }
.nav__inicio svg { width: 22px; height: 22px; }
.nav__link:hover { color: var(--blue-700); }
.nav__link[aria-current='page'] { color: var(--blue-700); font-weight: 700; }

/* ── Hover del menú: tres variantes ──────────────────────────────────────
   La clase va en el <header>, la elige HOVER_NAV en tools/armazon.py y solo
   una está activa a la vez. Para compararlas en vivo, en la consola:
     header.className = 'header header--sobre-foto nav-hover-b'

   a· SUBRAYADO DESDE EL CENTRO — una línea de 2px que se abre hacia los dos
      lados. Es el más sobrio: no mueve el texto ni pinta cajas, así que el
      menú se mantiene liviano sobre la fotografía.
   b· PÍLDORA DE VIDRIO — fondo esmerilado redondeado, hermano del distintivo
      "Autorizado por la SEREMI" y del botón secundario del hero. El más
      evidente de los tres: útil si el menú sobre la foto cuesta de leer.
   c· PUNTO Y ELEVACIÓN — el enlace sube 2px y aparece un punto teal debajo.
      El más cálido y el único que usa el color de acento en la navegación.

   En las tres, la página actual queda marcada de forma permanente: el
   subrayado fijo, la píldora tenue o el punto encendido. */

/* a· subrayado desde el centro */
.nav-hover-a .nav__link { position: relative; }
.nav-hover-a .nav__link::after {
  content: '';
  position: absolute; left: .7rem; right: .7rem; bottom: .3rem;
  height: 2px; border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .22s var(--ease);
}
.nav-hover-a .nav__link:hover::after,
.nav-hover-a .nav__link[aria-current='page']::after { transform: scaleX(1); }

/* b· píldora de vidrio */
.nav-hover-b .nav__link:hover { background: var(--blue-050); }
.nav-hover-b .nav__link[aria-current='page'] { background: var(--blue-050); }

/* c· punto de acento y elevación */
.nav-hover-c .nav__link { position: relative; transition: color .16s var(--ease), transform .18s var(--ease); }
.nav-hover-c .nav__link::after {
  content: '';
  position: absolute; left: 50%; bottom: .18rem;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: var(--teal-500);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-hover-c .nav__link:hover { transform: translateY(-2px); }
.nav-hover-c .nav__link:hover::after,
.nav-hover-c .nav__link[aria-current='page']::after { opacity: 1; transform: translateY(0); }

.header__cta { display: none; }

/* Instagram a la izquierda del botón. Es la marca de un tercero, así que va
   en sus colores, sin recolorear ni encerrar en un círculo de la paleta. El
   objetivo táctil es de 44px aunque el icono mida 30. */
/* ── Iconos de marca (Instagram, NIXTEM) ─────────────────────────────────
   Marcas de terceros: se muestran en sus colores, sin recolorear ni encerrar
   en un círculo de la paleta propia. Misma regla que el logotipo de Google.

   El tamaño importa: 20-22px de glifo es lo que usan los sitios que se ven
   serios. Más grande compite con el logotipo y con el botón, y convierte una
   referencia en un anuncio. El objetivo táctil de 44px se consigue con el
   relleno del contenedor, no agrandando el dibujo.

   Estas reglas existían y se perdieron al borrar la barra superior: vivían en
   el mismo bloque. Sin ellas los iconos salían a su tamaño nativo, 64px. */
.header__insta > picture,
.footer__red > picture,
.menu-movil__insta > picture { flex: 0 0 auto; line-height: 0; }

.icono-marca { border-radius: 5px; }
.header__insta .icono-marca { width: 22px; height: 22px; }
.menu-movil__insta .icono-marca { width: 22px; height: 22px; }
.footer__red .icono-marca { width: 20px; height: 20px; }

.header__insta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color .16s var(--ease);
}
.header__insta:hover { background: rgba(255, 255, 255, .16); }
.header:not([data-solido='false']) .header__insta:hover { background: var(--blue-050); }

/* El menú pasa a barra en 1140px, no en 1024. Con los rótulos en mayúsculas
   el menú creció, y entre 1024 y 1139 no cabían logotipo, menú y botón en una
   línea: "PREGUNTAS FRECUENTES" se partía en dos y el header crecía de 42 a
   67px de alto. Hasta 1140 se usa la hamburguesa, que ahí sí cabe holgada. */
@media (min-width: 1140px) {
  .nav { display: block; }
  .header__cta { display: flex; align-items: center; gap: .35rem; }
}

/* Instagram dentro del menú móvil */
.menu-movil__insta {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.75rem; padding: .5rem 0;
  color: var(--neutral-700); font-size: 1rem; font-weight: 600;
  text-decoration: none;
}
.menu-movil__insta:hover { color: var(--blue-700); }

/* Botón hamburguesa */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  padding: 0; border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--blue-900);
  cursor: pointer;
}
.hamburger svg { width: 26px; height: 26px; fill: currentColor; }
.hamburger__close { display: none; }
.hamburger[aria-expanded='true'] .hamburger__open { display: none; }
.hamburger[aria-expanded='true'] .hamburger__close { display: block; }
@media (min-width: 1140px) { .hamburger { display: none; } }

/* Menú móvil. Es hermano del header, no hijo (ver tools/armazon.py), y va por
   debajo de él en z-index para que el logotipo y el botón de cerrar queden
   siempre visibles sobre el panel. */
.menu-movil {
  position: fixed; inset: 0; z-index: 90;
  background: var(--white);
  padding: calc(var(--header-h) + 1.5rem) 1.25rem 2rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
}
.menu-movil[hidden] { display: none; }
.menu-movil__link {
  padding: 1rem .5rem;
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-900); font-size: 1.0625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  text-decoration: none;
}
.menu-movil__link:hover { color: var(--blue-700); }
.menu-movil .btn { margin-top: 1.5rem; }
@media (min-width: 1140px) { .menu-movil { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
/* La portada entra completa en una pantalla, en cualquier dispositivo: la
   fotografía y la barra de credenciales que la cierra. Se usa svh, la altura
   de la ventana con las barras del navegador visibles, porque con vh el móvil
   calcula sobre la ventana expandida y la barra de credenciales queda medio
   dedo por debajo del borde justo al cargar, que es cuando importa.

   El descuento de la barra superior es necesario porque esa barra queda por
   fuera de la portada y también ocupa pantalla. */
.portada {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--barra-h));
  min-height: calc(100svh - var(--barra-h));
}

/* Composición centrada. El hero se queda con lo que sobre tras la barra. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center;
  flex: 1 1 auto; min-height: 0;
  padding: 2rem 0;
  overflow: hidden;
  text-align: center;
  background: var(--turquesa-800);
}

/* Cuando el header va encima de la foto, el relleno superior descuenta su
   altura: sin eso el bloque queda ópticamente bajo, porque se centraría
   contra un espacio que el header ya está ocupando. Con la variante 5 el
   header no se superpone y esta compensación no aplica.

   Lo mismo para el banner de las páginas internas, donde además la miga de
   pan quedaría literalmente debajo del logotipo. */
.header--sobre-foto ~ main .hero { padding-top: calc(var(--header-h) + 2rem); }
.header--sobre-foto ~ main .page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem));
}

.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--turquesa-800);
}
.hero__foto { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 55%;
}

/* Cada foto lleva su propio encuadre vertical: la caja del hero es más
   apaisada que las fotografías, así que sobra alto y hay que decidir qué se
   pierde en cada una. */
.hero__foto--1 img { object-position: center 45%; }
.hero__foto--2 img { object-position: center 34%; }   /* deja ver el letrero entero */

/* ── El turno de las dos fotografías ─────────────────────────────────────
   Ciclo de 9 segundos, repartido en partes iguales: cada foto está sola a la
   vista 3 segundos y el cruce entre ellas dura 1,5.

   Los 3 segundos los pidió el cliente. Queda anotado que es rápido para un
   fondo de lectura: el visitante tarda entre siete y diez segundos en leer
   el titular y la bajada y decidir si escribe, así que la fotografía va a
   cambiar dos veces mientras lee. Si más adelante se ve inquieto, subir el
   ciclo a 18s y correr los porcentajes a 36,1 / 50 / 86,1 lo deja en 6,5
   segundos por foto, que es lo que aguanta una lectura sin interrumpirla.

   El cruce no baja la luz. La segunda se funde ENCIMA de la primera, que se
   queda opaca debajo, así que la suma es siempre 1 — nada del bajón oscuro
   de los carruseles mal hechos. Y la vuelta se hace al revés: la segunda se
   desvanece y deja ver la primera, que esperaba debajo. Por eso la primera
   no lleva animación de opacidad: es la base. */
@keyframes hero-turno-2 {
  0%, 33.3%    { opacity: 0; }
  50%, 83.3%   { opacity: 1; }
  100%         { opacity: 0; }
}
.hero__foto--2 { opacity: 0; animation: hero-turno-2 9s ease-in-out infinite; }

/* Acercamiento muy lento mientras cada una está a la vista, y vuelta atrás
   mientras está tapada, para que siempre aparezca en reposo. 3% repartido en
   todo su turno — la amplitud baja con el ciclo para que la velocidad del
   movimiento no cambie: sigue siendo medio por ciento por segundo. A ojo no
   se percibe el desplazamiento, solo que la escena no está del todo quieta. Más rápido o más amplio se nota el truco y marea,
   que es lo último que quiere quien lee esto de noche. */
@keyframes hero-acercamiento-1 {
  0%     { transform: scale(1.006); }
  50%    { transform: scale(1.03); }
  83.3%  { transform: scale(1); }
  100%   { transform: scale(1.006); }
}
@keyframes hero-acercamiento-2 {
  0%, 33.3% { transform: scale(1); }
  100%      { transform: scale(1.03); }
}
.hero__foto--1 img { animation: hero-acercamiento-1 9s linear infinite; }
.hero__foto--2 img { animation: hero-acercamiento-2 9s linear infinite; }

/* Quien pide movimiento reducido ve una sola fotografía, quieta. */
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__foto { animation: none; transform: none; }
  .hero__foto--2 { display: none; }
}

/* Velo en dos capas. Antes la segunda cargaba hacia la izquierda, donde
   estaba el texto; con la composición centrada esa capa pasó a ser una
   viñeta radial, que oscurece el centro y deja respirar los bordes.

   Los valores están medidos contra los píxeles reales de la foto del jardín
   y del primer fotograma del video: el peor caso del texto blanco queda en
   AA. Cambiar cualquiera de los dos obliga a volver a medir. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 48%, rgba(var(--turquesa-950), .58) 0%, rgba(var(--turquesa-950), .30) 55%, rgba(var(--turquesa-950), 0) 100%),
    linear-gradient(to top, rgba(var(--turquesa-950), .82) 0%, rgba(var(--turquesa-950), .46) 38%, rgba(var(--turquesa-950), .30) 70%, rgba(var(--turquesa-950), .18) 100%);
}

.hero__contenido { max-width: 46rem; margin-inline: auto; color: var(--white); }

/* Dejó de ser un saludo para ser un sello: lleva la resolución sanitaria y el
   escudo delante. De ahí el inline-flex —antes era inline-block— para que el
   icono quede centrado con el texto en vez de sentado sobre la línea base. */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  max-width: min(100%, 30rem);
  margin-bottom: 1.35rem;
  padding: .45rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  /* Vidrio oscuro, no claro. Un blanco al 12% aclaraba el fondo justo debajo
     del texto blanco y dejaba esta línea en 2,9:1 sobre la foto de móvil.
     Oscureciendo en cambio, el peor caso sube a 5,8:1. */
  background: rgba(var(--turquesa-950), .32);
  backdrop-filter: blur(6px);
  font-size: .9375rem; font-weight: 600;
  letter-spacing: .01em;
}
/* Sin esto el escudo hereda el tamaño del viewBox y ocupa media portada: un
   SVG en línea no tiene dimensión propia hasta que se le da una. */
.hero__eyebrow svg {
  width: 1.05em; height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
}

.hero h1 { color: var(--white); margin-bottom: .35em; }

.hero__bajada {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem);
  color: rgba(255, 255, 255, .93);
  margin: 0 auto 2.25rem;
  max-width: 34rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }

/* Pantallas bajas — un iPhone SE tiene 667px de alto. Ahí el hero y la barra
   de credenciales sumaban 40px más de los que hay, y la barra fija de
   WhatsApp tapaba la última línea. El hero cede aire: menos relleno y menos
   separación entre bloques. El texto no encoge, que es lo que no se puede
   tocar en un sitio para lectores con presbicia. */
@media (max-height: 720px) {
  .header--sobre-foto ~ main .hero { padding-top: calc(var(--header-h) + 1rem); }
  .hero { padding-bottom: 1rem; }
  .hero__eyebrow { margin-bottom: .7rem; padding: .35rem .95rem; }
  .hero h1 { margin-bottom: .25em; }
  .hero__bajada { margin-bottom: 1.25rem; }
}

/* Barra de confianza. Cierra la portada, así que su alto sale del mismo
   presupuesto que el hero: en móvil va apretada a propósito —tipografía
   menor, menos aire— para no comerse la pantalla que necesita el titular. */
.confianza {
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-200);
  padding: .9rem 0;
}
.confianza__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem 1.25rem;
}
@media (min-width: 768px) { .confianza { padding: 1.5rem 0; } }
.confianza__item { display: flex; align-items: flex-start; gap: .7rem; }
.confianza__item svg {
  width: 26px; height: 26px; flex: 0 0 auto;
  fill: var(--teal-700); margin-top: .1rem;
}
.confianza__texto { font-size: .8125rem; line-height: 1.35; color: var(--neutral-700); }
.confianza__texto b { display: block; font-size: .9375rem; color: var(--blue-900); font-weight: 700; }
.confianza__item svg { width: 22px; height: 22px; }

/* Pantallas muy bajas (320×568 y parecidas): se sacrifica la línea de
   detalle para que las cuatro credenciales sigan entrando en la primera
   pantalla. Se pierde el número de resolución y la dirección, pero se
   conservan los cuatro titulares, que es lo que tiene que verse sin scroll.
   Los datos completos siguen en el footer y en las páginas internas. */
/* Segundo escalón, para pantallas de 700px o menos: encoge también el botón
   y el distintivo de bienvenida. Un Android de 360×640 necesita estos 24px. */
@media (max-height: 700px) {
  .header--sobre-foto ~ main .hero { padding-top: calc(var(--header-h) + .5rem); }
  .hero__eyebrow { font-size: .875rem; margin-bottom: .55rem; }
  .hero__acciones .btn--lg { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.0625rem; }
}

/* Tercer escalón: por debajo de 600px de alto se sacrifica la línea de
   detalle para que las cuatro credenciales sigan entrando. Se pierde el
   número de resolución y la dirección, pero quedan los cuatro titulares, que
   es lo que tiene que verse sin scroll. Los datos completos siguen en el
   footer y en las páginas internas. */
@media (max-height: 600px) {
  .confianza__detalle { display: none; }
}

@media (min-width: 768px) {
  .confianza__list { grid-template-columns: repeat(4, 1fr); }
  .confianza__texto { font-size: .9375rem; line-height: 1.4; }
  .confianza__texto b { font-size: 1.0625rem; }
  .confianza__item svg { width: 26px; height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--turquesa-800);
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  padding: 3.5rem 0 0;
  /* deja aire para la barra fija de móvil */
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1140px) { .footer { padding-bottom: 0; } }

.footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }

.footer__grid {
  display: grid; gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 3rem; } }

/* El desplazamiento hacia arriba corrige una desalineacion real, no es un
   ajuste a ojo. El archivo logo-blanco-620 lleva 45px de margen transparente
   sobre el logotipo: existe a proposito, para que en el header el logo blanco
   y el de color queden calzados pixel a pixel al cambiar de transparente a
   solido. Pero en el pie ese margen empujaba el logotipo 18px por debajo de
   los titulos "LA RESIDENCIA" y "CONTACTO", que arrancan en el borde de su
   caja. Se descuentan esos 18px menos los ~3 que la mayuscula de los titulos
   deja sobre su propia linea.

   Si se cambia el ancho del logotipo hay que recalcular: el margen escala con
   el, y son 0,0726 x el ancho en pixeles. */
.footer__logo {
  display: block;
  width: 250px;
  margin: -15px 0 1.25rem;
}
.footer__lema { max-width: 28rem; color: rgba(255, 255, 255, .72); font-size: .9375rem; }

.footer h3 {
  color: var(--white);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1.15rem;
}

.footer__links li { margin-bottom: .6rem; }

.footer__dato { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .85rem; }
.footer__dato svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--teal-200); margin-top: .28rem; }
/* La segunda linea del bloque de horarios. El horario de visitas de familiares
   —todos los dias, hasta las 20:00— es el argumento; el de consultas es un dato
   administrativo y va mas apagado para que no compitan. Blanco al 72% sobre el
   verde del pie: 5,1:1, sobre el 4,5:1 de AA. */
.footer__fino { color: rgba(255, 255, 255, .72); font-size: .875rem; }

/* La fila arranca con la valoracion de Google y sigue con los dos iconos.
   align-items: center los deja centrados entre si aunque la valoracion mida
   unos pixeles mas. */
.footer__redes {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem; margin-top: 1.25rem;
}
/* Sin contorno, por pedido del cliente: los recuadros competian con la
   valoracion de Google, que si lleva caja porque va sobre fondo blanco. Los
   44px se conservan aunque ya no se vean, porque son el objetivo tactil. */
.footer__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease);
}
.footer__red svg { width: 20px; height: 20px; fill: var(--white); }
/* El verde oficial de WhatsApp. Sobre el turquesa del footer da 4,2:1, por
   encima del 3:1 que pide un elemento de interfaz que no es texto. */
.footer__red--wa svg { fill: #25D366; }

/* NIXTEM lleva texto al lado, así que la caja deja de ser cuadrada y crece
   con el contenido. El icono conserva sus 20px: sigue midiendo lo mismo que
   los otros dos. En móvil el texto se ajusta y la fila se envuelve sola. */

/* Vinculacion con el medio. Mismo cuerpo que la insignia de NIXTEM que tiene
   encima —13px— y el mismo ancho de columna, para que las dos lineas de
   respaldo se lean como un solo bloque y no como dos cosas sueltas.

   El rotulo va en mayusculas y espaciado, igual que los titulos de columna del
   pie, pero sin ser un <h3>: no encabeza una seccion, solo nombra el dato. En
   blanco al 82% sobre --turquesa-800 da 6,09:1, muy por sobre el 4,5:1 de AA. */
/* Franja de NIXTEM. Va segunda del par, bajo la de vinculacion. El logotipo
   mide 20px de alto, lo mismo que el birrete de la franja de arriba, asi que
   las dos lineas arrancan a la misma altura.

   El margen inferior es 1.5rem a proposito: es exactamente el padding-top de
   .footer__legal, asi que el aire que queda sobre la linea es el mismo que
   queda debajo. Si se toca uno hay que tocar el otro. */
.footer__franja {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.15rem 0 1.5rem;
  font-size: .8125rem; line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
.footer__franja-logo { height: 20px; width: auto; flex: 0 0 auto; }

/* Franja de ancho completo, justo encima de la linea legal.

   El margen inferior es 1.5rem a proposito: es exactamente el padding-top de
   .footer__legal, asi que el aire que queda sobre la linea es el mismo que
   queda debajo y la separacion se ve simetrica. Si se toca uno hay que tocar
   el otro.

   Sin max-width en el texto: el cliente pidio que ocupara todo el ancho. Es
   una medida larga para leer, pero son dos lineas de dato institucional al
   pie, no un parrafo de lectura. */
.footer__vinculacion {
  margin: 2.25rem 0 0;
  font-size: .8125rem; line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
/* El birrete acompana al rotulo y a nada mas. Mismo tamano y color que los
   iconos de la columna de Contacto: en el pie ya hay un lenguaje de icono mas
   dato, y este bloque se suma a el en vez de inventar uno propio. */
.footer__vinculacion svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: var(--teal-200);
}
.footer__vinculacion-rotulo {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .35rem;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
}
/* El parrafo arranca en el borde izquierdo del bloque, debajo del icono, no
   indentado a la altura del rotulo: indentado dejaba un hueco bajo el birrete
   que se leia como un error de alineacion. */
.footer__vinculacion-texto { margin: 0; }

/* "Ir" y la flecha son lo único enlazado de esta caja, así que son lo único
   que reacciona al puntero. Blanco pleno frente al 82% de la frase para que
   se lea como enlace sin hover; el subrayado aparece al pasar por encima.
   La flecha es inline y sube 1px: alineada por la base quedaba colgando bajo
   la línea del texto. */
/* La barra separadora, mas apagada que el texto: es puntuacion, no contenido. */
.footer__barra { opacity: .45; margin: 0 .15rem; }

.footer__ir {
  display: inline-flex; align-items: center; gap: .18rem;
  /* Antes lo separaba de la frase un semiguion. El cliente no quiere guiones
     en ninguna parte del sitio, asi que la separacion ahora la hace el aire. */
  margin-left: .4rem;
  color: var(--white); text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s var(--ease);
}
.footer__ir svg {
  width: 12px; height: 12px; margin-top: -1px;
  transition: transform .18s var(--ease);
}
.footer__ir:hover { text-decoration: underline; text-underline-offset: .18em; }
.footer__ir:hover svg { transform: translate(1.5px, -1.5px); }

.footer__redes { flex-wrap: wrap; }
/* Ya no queda ninguna caja de marca entre los redondeles: los dos que quedan
   son enlaces, asi que el hover vuelve a aplicarse a todos sin excepcion. */
.footer__red:hover {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5);
}

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 1.5rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  /* .74 y no .62: sobre el azul anterior esta línea daba 7:1, pero el
     turquesa del footer es más claro y con .62 caía a 4,19:1, bajo AA. */
  font-size: .875rem; color: rgba(255, 255, 255, .74);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Puntuación de Google — variante compacta (ver components/google-rating.html) */
.g-rating {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .4rem .7rem;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  text-decoration: none;
  /* 44 y no 48: es el alto de los iconos que tiene al lado en el pie, asi la
     fila queda pareja. Sigue por sobre el minimo de 44 de objetivo tactil. */
  min-height: 44px;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.g-rating:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.g-rating__logo { width: 20px; height: 20px; flex: 0 0 auto; }
.g-rating__body { display: flex; flex-direction: column; gap: .1rem; }
.g-rating__top { display: flex; align-items: center; gap: .5rem; }
.g-rating__score {
  font-size: 1.0625rem; font-weight: 700; line-height: 1;
  color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.g-rating__stars { display: flex; gap: 1px; }
.g-rating__stars svg { width: 13px; height: 13px; }
.g-rating__label { font-size: .75rem; line-height: 1.3; color: var(--neutral-600); }
.footer .g-rating:hover .g-rating__label,
.footer .g-rating__label { color: var(--neutral-600); }

/* ══════════════════════════════════════════════════════════════════════
   BARRA FIJA MÓVIL — WhatsApp + Llamar
   ══════════════════════════════════════════════════════════════════════ */
/* Por encima del menú móvil a propósito: WhatsApp es el CTA primario y el
   brief pide que esté siempre visible (CLAUDE.md §11). */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--neutral-200);
  box-shadow: 0 -4px 20px rgba(0, 43, 102, .10);
}
.barra-movil .btn { width: 100%; min-height: 50px; font-size: 1rem; }
@media (min-width: 1140px) { .barra-movil { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   SECCIONES — cuerpo de la home
   ══════════════════════════════════════════════════════════════════════ */
.seccion { padding: clamp(3.5rem, 2rem + 6vw, 6rem) 0; }
.seccion--gris { background: var(--neutral-100); }
.seccion--turquesa { background: var(--turquesa-800); color: rgba(255, 255, 255, .88); }
.seccion--turquesa h2, .seccion--turquesa h3 { color: var(--white); }

/* Sin los rótulos pequeños que antes abrían cada sección, el titular quedó
   solo al frente y hubo que reajustar el ritmo del bloque:

     · el titular necesita más aire debajo, porque ya no hay un rótulo arriba
       que lo presente y a .5em se leía pegado a la bajada;
     · el bloque entero se separa un poco más del contenido, que es lo que
       ahora marca dónde empieza la sección.

   Las secciones quedaron ~29px más bajas cada una. No se compensa a
   propósito: la página respira igual y hay menos que recorrer. */
.seccion__cabecera { max-width: 46rem; margin-bottom: 3rem; }
.seccion__cabecera h2 { margin-bottom: .62em; }
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }

.seccion__intro { font-size: 1.1875rem; color: var(--neutral-700); margin-bottom: 0; }
.seccion--turquesa .seccion__intro { color: rgba(255, 255, 255, .82); }

/* ── Rejillas ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 992px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Tarjetas ───────────────────────────────────────────────────────── */
.tarjeta {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-200); }
.tarjeta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 1.15rem;
  border-radius: 14px; background: var(--teal-050);
}
.tarjeta__icono svg { width: 28px; height: 28px; fill: var(--teal-700); }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__lista { margin-top: 1rem; font-size: 1rem; color: var(--neutral-700); }
.tarjeta__lista li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; }
.tarjeta__lista li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500);
}

/* ── Valores: el precio y lo que incluye ────────────────────────────── */
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
/* La cifra baja de 52px a 32px y de peso 800 a 700. Sigue siendo azul y
   sigue siendo lo primero que se lee, pero deja de gritar: un precio en
   tamaño de titular hace que la conversación empiece por el dinero, y este
   sitio quiere que empiece por el cuidado. */
.precio__cifra {
  font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--blue-700);
}
.precio__nota { font-size: 1rem; color: var(--neutral-600); }

.lista-valor { font-size: 1rem; }
.lista-valor li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px solid var(--neutral-200);
}
.lista-valor li:last-child { border-bottom: 0; }
.lista-valor svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .22rem; }
.lista-valor--si svg { fill: var(--verde); }

.tarjeta--destacada { border-color: var(--blue-700); border-width: 2px; box-shadow: var(--shadow-md); }

/* Cuando la tarjeta ocupa el ancho completo, la lista se reparte en dos
   columnas: diez líneas seguidas en una sola columna de 1.180px se leen como
   una lista de trámites, no como lo que la residencia ofrece. */
@media (min-width: 768px) {
  .lista-valor--dos, .tarjeta__lista--dos {
    columns: 2; column-gap: 2.5rem;
  }
  .lista-valor--dos li, .tarjeta__lista--dos li { break-inside: avoid; }
  .lista-valor--dos li:last-child { border-bottom: 1px solid var(--neutral-200); }
}

/* ── Galería ────────────────────────────────────────────────────────── */
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.galeria__item {
  position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  background: var(--neutral-200);
}
.galeria__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s var(--ease);
}
.galeria__item:hover img { transform: scale(1.04); }
.galeria__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.25rem .9rem .75rem;
  background: linear-gradient(to top, rgba(var(--turquesa-950), .88), rgba(var(--turquesa-950), 0));
  color: var(--white); font-size: .875rem; font-weight: 550; line-height: 1.3;
}

/* ── Bloque con imagen al costado ───────────────────────────────────── */
.duo { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.duo__figura { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.duo__figura img { width: 100%; }
.duo__figura figcaption {
  padding: .75rem 1rem;
  background: var(--white);
  font-size: .875rem; color: var(--neutral-600);
}

/* ── Duo a media sección ─────────────────────────────────────────────────
   La fotografía deja de ser una ilustración con marco y pasa a ser la mitad
   del bloque: media sección de ancho y toda su altura. Por eso la sección
   pierde su relleno vertical —lo asume la columna de texto— y la figura
   pierde el redondeado y la sombra, que solo tienen sentido en una tarjeta.

   Solo desde 900px: más abajo el duo es una columna y la foto vuelve a ser
   una imagen normal encima del texto. */
@media (min-width: 900px) {
  .seccion--duo { padding-top: 0; padding-bottom: 0; }
  .duo--completa {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
  }
  .duo--completa .duo__figura {
    position: relative;
    border-radius: 0; box-shadow: none;
    min-height: 26rem;
  }
  .duo--completa .duo__figura picture,
  .duo--completa .duo__figura img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
  }
  .duo--completa .duo__texto {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(3.5rem, 2rem + 6vw, 6rem) 0 clamp(3.5rem, 2rem + 6vw, 6rem) 3.5rem;
  }
  /* El pie sobre la imagen. El degradado no cubre la fotografía entera: solo
     la franja donde va el texto. */
  .duo--completa .duo__figura figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3rem 1.5rem 1.25rem;
    background: linear-gradient(to top,
      rgba(var(--turquesa-950), .82) 0%,
      rgba(var(--turquesa-950), .55) 45%,
      rgba(var(--turquesa-950), 0) 100%);
    color: var(--white); font-size: .9375rem; font-weight: 550;
  }
}

/* ── Diferenciadores ────────────────────────────────────────────────── */
.motivo { display: flex; gap: 1rem; align-items: flex-start; }
.motivo__num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-050); color: var(--teal-700);
  font-weight: 800; font-size: 1.0625rem;
}
.seccion--turquesa .motivo__num { background: rgba(255, 255, 255, .12); color: var(--teal-200); }
.motivo h3 { font-size: 1.1875rem; margin-bottom: .3rem; }
.motivo p { font-size: 1rem; margin-bottom: 0; color: var(--neutral-700); }
.seccion--turquesa .motivo p { color: rgba(255, 255, 255, .78); }

/* ── Innovación: logos de terceros ──────────────────────────────────── */
/* No se recolorean ni se deforman marcas ajenas: se muestran tal cual sobre
   una plaquita clara que asegura contraste sobre el fondo azul. */
.logos-terceros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  margin-top: 1.75rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
/* Dos pasadas sobre el tamaño: primero al 60% de lo original (34→20, 52→31)
   y después de vuelta a 26 y 40, porque a 20px no se notaban. Quedan un 24%
   por debajo del tamaño con que partieron, que era la intención —son marcas
   de respaldo, no el mensaje de la sección—, pero ya se leen.

   Van solos, sin rótulo debajo: el enlace a nixtem.com sigue estando, es el
   logotipo mismo. Sin nada que colgara bajo uno de los dos, `align-items:
   center` alcanza para que los dos bloques queden alineados entre sí. */
.logos-terceros img { height: 26px; width: auto; }

/* Los dos logotipos son ahora la versión blanca que entregó el cliente, así
   que van directos sobre la fotografía y desapareció la pastilla blanca que
   antes necesitaba el de Corfo. Ninguno se recolorea.

   El de Corfo va más alto que el de NIXTEM a propósito: su lockup lleva dos
   líneas de texto, y a la misma altura de caja la palabra "CORFO" se leería
   la mitad de grande que "NIXTEM". Igualar la caja no iguala lo que se lee.
   El archivo se sirve a 160px de alto para mostrarse a 40 —cuatro veces la
   densidad de pantalla— porque la línea "Proyecto apoyado por" es la séptima
   parte del lockup y es la primera que se deshace al reducir. */
.logo-corfo { display: inline-flex; align-items: center; }
.logo-corfo img { height: 40px; }

/* El logotipo entero es el enlace a nixtem.com; ya no cuelga un rótulo debajo,
   así que esto vuelve a ser una caja simple y los dos bloques se alinean por
   el centro. El nombre del destino va en aria-label, que es lo que lee un
   lector de pantalla cuando el contenido del enlace es una imagen. */
.logo-nixtem {
  display: inline-flex; align-items: center; text-decoration: none;
  opacity: .95; transition: opacity .18s var(--ease);
}
.logo-nixtem:hover { opacity: 1; }

/* ── Sección con fotografía de fondo ─────────────────────────────────────
   El velo carga hacia la izquierda, donde va la columna de lectura, y aclara
   hacia la derecha para que la escena se vea. Los valores están medidos
   contra los píxeles de la foto: el peor caso del texto queda en AA. */
/* Alto mínimo: la sección con solo un titular, un párrafo y dos logotipos
   medía 340px, y en una caja de 4:1 la fotografía quedaba reducida a una
   franja donde no se distinguía nada. Con 420px la escena se lee. */
.seccion--foto { position: relative; isolation: isolate; overflow: hidden; }
@media (min-width: 768px) { .seccion--foto { min-height: 420px; display: flex; align-items: center; } }
.seccion__media { position: absolute; inset: 0; z-index: -2; }
.seccion__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La fotografía se exporta ya recortada a 3,1:1, la misma proporción que la
     caja de la sección, y alineada al borde inferior del original: es donde
     está el reloj, que es de lo que habla la sección. Recortando al centro
     salía solo el hombro del residente. */
  object-position: center center;
}
.seccion--foto::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgba(var(--turquesa-950), .92) 0%,
      rgba(var(--turquesa-950), .84) 45%,
      rgba(var(--turquesa-950), .42) 74%,
      rgba(var(--turquesa-950), .10) 100%),
    linear-gradient(to bottom,
      rgba(0, 87, 103, .14) 0%,
      rgba(var(--turquesa-950), .22) 100%);
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { max-width: 52rem; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: .75rem;
  overflow: hidden;
}
.faq__item[open] { border-color: var(--teal-200); box-shadow: var(--shadow-sm); }
.faq__pregunta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  min-height: 56px;
  font-size: 1.0625rem; font-weight: 650; color: var(--blue-900);
  cursor: pointer; list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { background: var(--blue-050); }
.faq__pregunta svg {
  width: 22px; height: 22px; flex: 0 0 auto; fill: var(--teal-700);
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__pregunta svg { transform: rotate(45deg); }
.faq__respuesta { padding: 0 1.35rem 1.35rem; font-size: 1rem; color: var(--neutral-700); }
.faq__respuesta p:last-child { margin-bottom: 0; }

/* ── Filtros de galería ─────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filtro {
  min-height: 48px;
  padding: .6rem 1.15rem;
  border: 1px solid var(--neutral-200);
  border-radius: 999px;
  background: var(--white);
  font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.filtro:hover { border-color: var(--teal-200); color: var(--blue-700); }
.filtro[aria-pressed='true'] {
  background: var(--blue-700); border-color: var(--blue-700); color: var(--white);
}

/* Rejilla de galería */
.galeria-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 992px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }

.galeria-grid figure[hidden] { display: none; }

.foto {
  margin: 0; padding: 0; border: 0; background: none;
  border-radius: var(--radius); overflow: hidden;
  cursor: zoom-in; width: 100%; display: block;
}
.foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--neutral-200);
  transition: transform .45s var(--ease), filter .2s var(--ease);
}
.foto:hover img { transform: scale(1.05); }
.foto:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 3px; }

/* Visor */
.visor {
  width: min(94vw, 1180px);
  max-width: none;
  padding: 0; border: 0;
  background: transparent;
  overflow: visible;
}
.visor::backdrop { background: rgba(var(--turquesa-950), .95); }
.visor img {
  width: 100%; height: auto;
  max-height: 82svh; object-fit: contain;
  border-radius: var(--radius);
  background: var(--turquesa-800);
}
.visor__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .85rem; color: rgba(255, 255, 255, .88); font-size: .9375rem;
}
.visor__cerrar, .visor__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white); cursor: pointer;
}
.visor__cerrar svg, .visor__nav svg { width: 24px; height: 24px; fill: currentColor; }
.visor__cerrar:hover, .visor__nav:hover { background: rgba(255, 255, 255, .22); }
.visor__controles { display: flex; gap: .6rem; }

/* ── Cabecera de página interna ─────────────────────────────────────── */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fondo de respaldo: si la foto no carga, el banner sigue siendo legible */
  background: linear-gradient(135deg, var(--turquesa-800), var(--teal-900));
  color: var(--white);
  padding: clamp(3.25rem, 2rem + 5vw, 5.5rem) 0;
}
.page-hero h1 { color: var(--white); margin-bottom: .35em; }
.page-hero p {
  max-width: 42rem; margin-bottom: 0;
  font-size: 1.1875rem; color: rgba(255, 255, 255, .88);
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* En escritorio la caja del banner es mucho más apaisada que la fotografía:
   de los 738px que mide la imagen escalada solo se ven 427, una banda del 18%
   al 75%. Con el encuadre por defecto, en la foto del equipo esa banda entraba
   por encima de la frente del médico y le cortaba media cara. Con 12% la banda
   va del 4% al 62% y las tres caras quedan completas.

   Solo desde 768px: por debajo se sirve un recorte distinto, casi cuadrado, y
   ahí el encuadre por defecto es el correcto. */
@media (min-width: 768px) {
  .page-hero__media--equipo img { object-position: center 12%; }
}

/* Velo en dos capas: una base pareja que garantiza el contraste del texto
   blanco, y un refuerzo lateral donde va el título.

   Los valores subieron el 13-ago-2026 tras medirlos por primera vez contra
   los píxeles reales de los seis banners. Con los anteriores, el título de
   las páginas internas quedaba entre 2,65:1 y 3,20:1 y la bajada entre
   3,29:1 y 4,07:1 — bajo AA en casi todas. No lo provocó el header
   transparente: ya fallaba antes, con el contenido 80px más arriba.

   Ahora el peor caso de las seis páginas es 5,37:1 (la miga de servicios),
   y en la mitad derecha el velo se queda en 52%, así que la fotografía se
   sigue viendo. Tocar cualquiera de las dos capas obliga a volver a medir. */
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(var(--turquesa-950), .52) 0%, rgba(var(--turquesa-950), .30) 45%, rgba(var(--turquesa-950), .04) 80%),
    linear-gradient(to bottom, rgba(var(--turquesa-950), .42) 0%, rgba(var(--turquesa-950), .58) 100%);
}
.miga { margin-bottom: 1.15rem; font-size: .9375rem; color: rgba(255, 255, 255, .7); }
.miga a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.miga a:hover { color: var(--white); text-decoration: underline; }
.miga span { margin: 0 .45rem; }

/* ── Tabla de servicios ─────────────────────────────────────────────── */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--neutral-200); }
.tabla { width: 100%; border-collapse: collapse; background: var(--white); font-size: 1rem; }
.tabla caption { text-align: left; padding: 1rem 1.25rem; font-weight: 700; color: var(--blue-900); }
.tabla th, .tabla td { padding: .9rem 1.25rem; text-align: left; border-bottom: 1px solid var(--neutral-200); }
.tabla thead th {
  background: var(--neutral-100);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--neutral-600);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td:first-child { font-weight: 600; color: var(--blue-900); }

/* El visto va dentro de la celda como elemento en línea, no convirtiendo el
   <td> en flex: eso rompe el reparto de anchos de la tabla. */
.tabla__si { display: inline-flex; vertical-align: -.2em; margin-right: .5rem; }
.tabla__si svg { width: 18px; height: 18px; fill: var(--verde); }

/* ── Pasos numerados ────────────────────────────────────────────────── */
.pasos { counter-reset: paso; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.paso { position: relative; padding-top: 3.75rem; }
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blue-700); color: var(--white);
  font-size: 1.25rem; font-weight: 800;
}
.paso h3 { margin-bottom: .35rem; }
.paso p { margin-bottom: 0; color: var(--neutral-700); }

/* ── Lista de verificación ──────────────────────────────────────────── */
.checklist { font-size: 1.0625rem; }
.checklist li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .6rem 0;
}
.checklist svg { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--verde); margin-top: .2rem; }

/* ── Texto legal ────────────────────────────────────────────────────── */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { margin: 0 0 1.15em; }
.legal ul li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; }
.legal ul li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500);
}
.legal__fecha {
  padding: 1rem 1.25rem; margin-bottom: 2.5rem;
  background: var(--neutral-100); border-radius: var(--radius-sm);
  font-size: .9375rem; color: var(--neutral-600);
}

/* ── Cita de propósito / visión / misión ────────────────────────────── */
.credo { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .credo { grid-template-columns: repeat(3, 1fr); } }
.credo__item {
  padding: 1.75rem;
  background: var(--white);
  border-left: 4px solid var(--teal-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
}
.credo__item h3 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal-700); margin-bottom: .75rem;
}
.credo__item p { margin-bottom: 0; font-size: 1.0625rem; }

/* ── Cierre ─────────────────────────────────────────────────────────── */
.cierre__caja {
  background: linear-gradient(135deg, var(--turquesa-800), var(--teal-900));
  border-radius: var(--radius);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.cierre__caja h2 { color: var(--white); }
.cierre__caja p { color: rgba(255, 255, 255, .85); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 1.75rem; }
.mapa {
  width: 100%; min-height: 340px; height: 100%;
  border: 0; border-radius: var(--radius);
  background: var(--neutral-200);
}

/* El mapa se muestra siempre (decisión del cliente). La caja lo apila con el
   botón de "Abrir en Google Maps", que es lo único que quedó del bloque
   anterior de carga diferida. */
.mapa-caja { display: flex; flex-direction: column; gap: .9rem; height: 100%; }
.mapa-caja .mapa { flex: 1 1 auto; }
.mapa-caja__accion { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ESCRIBIR POR WHATSAPP — botón flotante que se abre
   Se evaluaron cinco maneras de ofrecerlo (etiqueta bajo el icono del footer,
   etiqueta al lado, pastilla siempre abierta, este círculo que se abre, y la
   barra fija también en escritorio). El cliente eligió esta.
   ══════════════════════════════════════════════════════════════════════ */

.wa-flotante { display: none; }

/* Solo escritorio: en teléfono ese papel lo cumple la barra fija de abajo, y
   dos botones de WhatsApp en la misma pantalla es ruido. */
@media (min-width: 1140px) {
  .wa-flotante {
    display: inline-flex; align-items: center; gap: .6rem;
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 95;
    padding: .85rem;
    border-radius: 999px;
    background: #128C4A; color: var(--white);
    font-weight: 650; font-size: 1rem; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 43, 102, .28);
    transition: background-color .18s var(--ease), box-shadow .18s var(--ease),
                padding .22s var(--ease);
  }
  .wa-flotante svg { width: 26px; height: 26px; fill: currentColor; flex: 0 0 auto; }

  /* La etiqueta solo aparece al pasar el cursor o al enfocar con el teclado.
     El :focus-visible no es decorativo: sin él, quien navega con el tabulador
     encontraría un círculo verde sin nombre visible. */
  .wa-flotante__texto {
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width .26s var(--ease), opacity .2s var(--ease);
  }
  .wa-flotante:hover, .wa-flotante:focus-visible {
    padding: .85rem 1.15rem;
    background: #0E7C4A; color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 43, 102, .34);
  }
  .wa-flotante:hover .wa-flotante__texto,
  .wa-flotante:focus-visible .wa-flotante__texto { max-width: 15rem; opacity: 1; }
}

/* En teléfono la barra fija dice "Escríbanos" en vez de "WhatsApp".

   Dice "Escríbanos" y no "Escríbanos por WhatsApp" por una razón medida: el
   rótulo largo se parte en tres líneas a 390px, la barra crece de 71 a 103px
   y deja de calzar con --barra-h, que es lo que la portada descuenta para
   caber en una pantalla. La credencial de abajo volvía a quedar tapada. */
@media (max-width: 1139px) {
  .barra-movil__wa { font-size: 0; }
  .barra-movil__wa::after { content: 'Escríbanos'; font-size: 1rem; }
}