/* ============================================================
   Medgenik — CSS DEL SITIO
   Extraído de `pagina.html` el 20-ago-2026, cuando la landing de una
   sola página se convirtió en un sitio con menú de verdad.

   POR QUÉ EXISTE: el mismo CSS estaba copiado en cuatro archivos —
   28 KB en pagina, 21 en portal, 16 en gracias, 12 en anuncios. Los
   tokens `:root` estaban triplicados y el CLAUDE.md ya avisaba que
   había que cambiarlos en tres lugares a la vez. Con siete páginas
   nuevas eso era insostenible.

   QUÉ VA AQUÍ: lo que se repite en TODAS las páginas del sitio —
   tokens, primitivas, logo, navegación, rejillas, formulario, pie,
   fotografía y las reglas de movimiento.

   QUÉ NO VA AQUÍ: lo de una sección concreta (hero, áreas, recorrido,
   FAQ, reseñas…). Eso se queda en el <style> de su página. Si algo de
   aquí solo lo usa una página, está en el archivo equivocado.

   ⚠️ `anuncios.html` (/lp/) NO usa este archivo, y es deliberado: es la
   landing de los anuncios y tiene que llegar completa en UN solo
   request, sin depender de una hoja externa que nadie tiene en caché.
   Su CSS se queda embebido aunque se repita. Ver docs/13.
   ============================================================ */

/* ============================================================
   MEDGENIK — landing page
   Paleta: tinta de piedra caliza + piedra fría + oro de marca (heredado
   de Mayan Medical Group) + azul cenote como única fuente de luz.
   Tipografía: Palatino/Iowan (display) contra sans de sistema (cuerpo).
   ============================================================ */

:root {
  /* Blanco puro por decisión del usuario (20-ago-2026): el #EDEEEA anterior
     era un beige grisáceo que en pantalla se lee como papel viejo, no como
     limpio. La relación se INVIERTE: antes `stone-2` era MÁS claro que `stone`
     para levantar las celdas; ahora que el fondo es blanco, el escalón tiene
     que ir hacia abajo o las celdas desaparecen contra la página. */
  --stone:       #FFFFFF;
  --stone-2:     #F4F5F3;

  /* ── ARENA ───────────────────────────────────────────────────
     El beige de alternancia. Sustituye a las bandas azul marino que
     dominaban la página (decisión del usuario, 20-ago-2026: «principalmente
     blanca, con beige y poco azul marino»).

     Va MUY cerca del blanco a propósito. Un beige saturado compite con la
     fotografía y envejece el sitio; a esta distancia solo separa una sección
     de la siguiente, que es todo lo que tiene que hacer. */
  --arena:       #F5F1EA;
  --arena-2:     #EBE4D8;   /* un escalón más, para superficies dentro de arena */
  --arena-rule:  rgba(16,29,36,.12);
  --ink:         #101D24;
  --ink-2:       #55686F;
  --rule:        rgba(16,29,36,.16);   /* .16 y no .13: sobre blanco puro la línea al 13% desaparecía */
  --gold:        #8A7143;   /* oro legible para texto pequeño sobre piedra */
  --gold-line:   #B39B77;   /* oro de marca (muestreado del logo Medgenik) */
  --accent:      #1F6F92;
  --panel:       #101D24;
  --panel-2:     #16303C;
  --panel-text:  #E9EBE6;
  --panel-muted: #9BB0B8;
  --panel-gold:  #C9B48B;
  --panel-rule:  rgba(233,235,230,.15);
  --glow:        #82ABC1;   /* azul Medgenik (muestreado del logo) */

  /* La serif vuelve (20-ago-2026): se probó con una grotesca para el registro
     «tecnología de punta» y el usuario prefirió la anterior. La modernidad la
     sostienen el peso ligero y el aire, no la familia tipográfica. */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stone: #0C1519; --stone-2: #0F1D24;
    --ink: #E9EBE6; --ink-2: #9AACB2;
    --rule: rgba(233,235,230,.14);
    --gold: #C4AD84; --gold-line: #B39B77;
    --accent: #82ABC1;
    --panel: #14313D; --panel-2: #1A3D4B;
    --panel-text: #EDEFEA; --panel-muted: #A6BBC2;
    --panel-gold: #CDB893; --panel-rule: rgba(237,239,234,.16);
  }
}
:root[data-theme="dark"] {
  --stone: #0C1519; --stone-2: #0F1D24;
  --ink: #E9EBE6; --ink-2: #9AACB2;
  --rule: rgba(233,235,230,.14);
  --gold: #C4AD84; --gold-line: #B39B77;
  --accent: #82ABC1;
  --panel: #14313D; --panel-2: #1A3D4B;
  --panel-text: #EDEFEA; --panel-muted: #A6BBC2;
  --panel-gold: #CDB893; --panel-rule: rgba(237,239,234,.16);
}
:root[data-theme="light"] {
  --stone: #FFFFFF; --stone-2: #F4F5F3;
  --ink: #101D24; --ink-2: #55686F;
  --rule: rgba(16,29,36,.16);
  --gold: #8A7143; --gold-line: #B39B77;
  --accent: #1F6F92;
  --panel: #101D24; --panel-2: #16303C;
  --panel-text: #E9EBE6; --panel-muted: #9BB0B8;
  --panel-gold: #C9B48B; --panel-rule: rgba(233,235,230,.15);
}

* { box-sizing: border-box; }

.page {
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* ⚠️ `clip`, NO `hidden`. `overflow-x:hidden` convierte a .page en un
     contenedor de scroll, y contra él se resuelve el `position:sticky` de la
     barra: la barra dejaba de quedarse arriba y se iba con el contenido (el
     menú desaparecía al primer scroll). `clip` recorta igual sin crear
     contenedor de scroll, así que el sticky sigue vivo. */
  overflow-x: clip;
}

/* ---------- primitivas ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
/* ⚠️ La clase se sigue llamando `band--ink` por historia, pero ya NO es
   tinta: es ARENA. Se conservó el nombre para no tocar las cinco páginas que
   la usan; lo que cambió es lo que significa. Antes estas bandas eran azul
   marino y dominaban la página; ahora solo la separan del blanco. */
/* La banda de credenciales: corta, sin el aire de una sección normal. Solo
   tiene que separar la portada de la primera foto. */
.band--credenciales { background: var(--stone); padding-block: clamp(1.8rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--arena-rule); }

.band--ink {
  /* ⚠️ LO IMPORTANTE ESTÁ EN LAS TRES PRIMERAS LÍNEAS. Dentro de esta banda
     se REDEFINEN los tokens de panel, en vez de ir corrigiendo regla por regla
     los colores claros que quedaron de cuando era azul marino.

     Por qué: hay clases que fijan `var(--panel-muted)` o `var(--panel-text)`
     directamente —los títulos de los pasos, los ítems de estándares, la
     entradilla del formulario—. Al volverse clara la banda, todas quedaron en
     texto casi blanco sobre beige: contraste 1.07:1, ilegible. Como las
     variables CSS heredan, redefinirlas aquí arregla TODAS de una vez, incluida
     cualquiera que se escriba mañana. */
  --panel-text:  var(--ink);
  --panel-muted: var(--ink-2);
  --panel-gold:  var(--gold);
  --panel-rule:  var(--arena-rule);
  --panel:       var(--arena);
  background: var(--arena); color: var(--ink);
}
.band--ink .eyebrow { color: var(--gold); }
.band--ink .lede, .band--ink p { color: var(--ink-2); }
.band--ink h2, .band--ink h3, .band--ink strong { color: var(--ink); }
.band--ink .note { color: var(--ink-2); }
.band--ink .col { border-color: var(--arena-rule); }

.eyebrow {
  font-size: .72rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .85rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* El peso y el interletrado son EL cambio: la misma tipografía en 400 se ve
   corporativa, y en 250–300 a tamaño grande se ve precisa. La elegancia no
   la da la fuente, la dan el peso ligero y el aire. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.4rem); line-height: 1.05; letter-spacing: -.018em; }
h2 { font-size: clamp(1.95rem, 3.7vw, 3rem); line-height: 1.1; letter-spacing: -.014em; }
h3 { font-size: 1.22rem; line-height: 1.3; }

.lede { font-size: clamp(1.03rem, 1.5vw, 1.19rem); color: var(--ink-2); max-width: 62ch; }
p { margin: 0; max-width: 66ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-sans); font-size: .88rem; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; text-decoration: none;
  padding: 1.02rem 1.9rem; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.btn--solid { background: var(--gold-line); color: #10181C; }
.btn--solid:hover { background: #C6B491; }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: rgba(179,155,119,.14); }

a { color: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--glow); outline-offset: 3px;
}

/* ⚠️ Aquí vivía `.mark { width:100%; height:100% }`, de cuando la marca de agua
   era un <svg><use> que debía llenar su caja. Al pasar a <img> se quedó, y su
   `height:100%` le ganaba al `aspect-ratio` de .hero__watermark: el emblema se
   estiraba a lo alto de TODO el hero. Regla de la casa: al logo se le fija UNA
   sola dimensión, nunca las dos. */

.lockup { display: flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }

/* ---------- logo ----------
   Es el ARCHIVO del logo, no una reconstrucción. Solo se fija la ALTURA:
   `width:auto` garantiza que nunca se deforme (regla dura del usuario). */
.logo { display: block; width: auto; }
.logo--nav { height: 50px; }   /* sin el endoso el wordmark manda: a 38px la K aún se lee */
.logo--pie { height: 64px; }
@media (max-width: 560px) { .logo--nav { height: 38px; } }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Blanco translúcido, no azul marino: la barra deja de cortar la página
     por arriba y pasa a ser una lámina sobre el contenido. El desenfoque es
     lo que la mantiene legible cuando pasa una foto por debajo. */
  background: color-mix(in srgb, var(--stone) 84%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--arena-rule);
  color: var(--ink);
  /* Mismo recurso que en `.band--ink`: los enlaces y el CTA usan tokens de
     panel porque la barra era azul marino. Redefinirlos aquí los arregla todos
     —incluido el botón, que salía con texto gris claro sobre dorado: 1.18:1— sin
     ir persiguiendo cada regla. */
  --panel-text:  var(--ink);
  --panel-muted: var(--ink-2);
  --panel-gold:  var(--gold);
  --panel-rule:  var(--arena-rule);
  --panel:       var(--stone);
}
.nav__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); padding-block: .85rem; }

/* Los enlaces del menú.
   ⚠️ `nowrap` NO es cosmético: sin él «The Difference» y «Areas of Care» se
   partían en dos renglones y la barra dejaba de leerse como un menú —parecía
   un bloque de texto suelto. Por lo mismo el menú de escritorio no aparece
   hasta 1100px: abajo de ahí los seis enlaces ya no caben en una línea. */
.nav__links { display: none; gap: 1.3rem; font-size: .78rem; letter-spacing: .06em; }
.nav__links a {
  position: relative; white-space: nowrap; padding-block: .4rem;
  text-decoration: none; color: var(--panel-muted); transition: color .2s;
}
/* El subrayado que crece es lo que dice «esto se puede tocar». También marca
   la sección en la que vas (`.activo`, lo pone el observador de abajo). */
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--panel-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .22s;
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a.activo { color: var(--panel-text); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a.activo::after { transform: scaleX(1); }

/* El botón de la barra: menos aire y menos interletraje que un botón de
   cuerpo. Con los valores de antes el rótulo se partía en dos renglones
   dentro de un bloque de oro enorme. */
.nav .btn { padding: .8rem 1.15rem; font-size: .73rem; letter-spacing: .05em; white-space: nowrap; }
.nav__cta-movil { display: none; }

/* ---------- el botón de menú (abajo de 1100px) ---------- */
.nav__abrir {
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: var(--panel-text); cursor: pointer;
  border: 1px solid var(--panel-rule); border-radius: 2px; padding: .62rem .85rem;
  font: 600 .72rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
}
.nav__abrir:hover { border-color: var(--panel-gold); color: var(--panel-gold); }
.nav__hamb { position: relative; display: block; width: 17px; height: 2px; background: currentColor; }
.nav__hamb::before, .nav__hamb::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor;
  transition: transform .22s;
}
.nav__hamb::before { top: -6px; }
.nav__hamb::after { top: 6px; }
.nav__abrir[aria-expanded="true"] .nav__hamb { background: transparent; }
.nav__abrir[aria-expanded="true"] .nav__hamb::before { transform: translateY(6px) rotate(45deg); }
.nav__abrir[aria-expanded="true"] .nav__hamb::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1100px) {
  .nav__links { display: flex; }
  .nav__abrir { display: none; }
}
@media (max-width: 1099px) {
  /* panel desplegable: `.nav` es sticky, o sea posicionado, así que el
     `top:100%` cuelga justo debajo de la barra */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    flex-direction: column; gap: 0; font-size: .95rem; letter-spacing: .02em;
    /* Blanco como la barra: al abrirlo sobre un nav claro, un panel azul
       marino se leía como otra página encima. */
    background: var(--stone); border-bottom: 1px solid var(--arena-rule);
    box-shadow: 0 18px 40px -24px rgba(16,29,36,.45);
    padding: .25rem var(--pad) 1.15rem;
  }
  .nav__links[data-abierto] { display: flex; }
  .nav__links a { padding-block: .95rem; border-bottom: 1px solid var(--panel-rule); color: var(--panel-text); }
  .nav__links a::after { display: none; }
}
/* En pantalla chica el botón sale de la barra —ahí no cabe y se cortaba— y
   pasa a ser la última pieza del panel, que es donde se toma la decisión. */
@media (max-width: 620px) {
  .nav__cta { display: none; }
  .nav__cta-movil { display: inline-flex; margin-top: 1.15rem; border-bottom: 0; }
  .nav__links a.nav__cta-movil { color: #10181C; }
}

/* ---------- rejillas ---------- */
/* ⚠️ `.split`, `.cols` y `.col` estaban sueltas en el <style> del home por el
   mismo corte desfasado que se llevó el formulario: bajo este encabezado había
   quedado `.care`. Las usan /the-center/, /how-it-works/, /about/ y /request/,
   que salían con el contenido apilado en una sola columna. */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: 0.92fr 1.08fr; align-items: start; } }

.cols { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: clamp(2.4rem, 5vw, 3.5rem); }
@media (min-width: 780px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .cols--2 { grid-template-columns: repeat(2, 1fr); } }
/* Cuatro tarjetas (equipo clínico). En tableta van 2×2: cuatro retratos 4/5
   en una sola fila quedan del ancho de un pulgar y no se les ve la cara. */
@media (min-width: 780px)  { .cols--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cols--4 { grid-template-columns: repeat(4, 1fr); } }

.col { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.band--ink .col { border-color: var(--panel-rule); }
.col h3 { margin-bottom: .6rem; }
.col p { font-size: .96rem; }


.care { display: grid; gap: 1px; background: var(--rule); margin-top: 2.8rem; border-block: 1px solid var(--rule); }
@media (min-width: 820px) { .care { grid-template-columns: repeat(3, 1fr); } }
.care__cell { background: var(--stone); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .8rem; }
.care__ico { width: 34px; height: 34px; color: var(--gold-line); }
.care__cell p { font-size: .95rem; color: var(--ink-2); }

.note {
  border-left: 2px solid var(--gold-line); padding: .3rem 0 .3rem 1.15rem;
  font-size: .93rem; color: var(--ink-2); max-width: 72ch; margin-top: 2rem;
}
.band--ink .note { color: var(--panel-muted); }

/* ---------- formulario ---------- */
/* ⚠️ Estas reglas se PERDIERON al repartir el CSS (20-ago-2026): el corte por
   número de línea las dejó bajo el encabezado «áreas de atención», y de ahí
   viajaron a /areas-of-care/ mientras /request/ —la única página con
   formulario— se quedaba sin ellas. El formulario salió con los campos en
   crudo del navegador y el acuse «Request received» visible de entrada.
   Devueltas aquí, que es donde van: las usan /request/ y /thank-you/. */
.form { display: grid; gap: 1.1rem; margin-top: 2rem; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: grid; gap: .42rem; }
.field label { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--panel-gold); font-weight: 600; }
.field input, .field select, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--panel-rule);
  color: var(--panel-text); font: inherit; font-size: .97rem; padding: .6rem 0;
  border-radius: 0; width: 100%;
}
.field select option { background: var(--panel); color: var(--panel-text); }
.field textarea { resize: vertical; min-height: 5.2rem; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .84rem; color: var(--panel-muted); }
.consent input { accent-color: var(--gold-line); margin-top: .25rem; flex: none; width: 1rem; height: 1rem; }
.form__micro { font-size: .84rem; color: var(--panel-muted); }
.sent { display: none; border: 1px solid var(--panel-rule); padding: 2rem; margin-top: 2rem; }
.sent h3 { color: var(--panel-text); margin-bottom: .5rem; }
.sent p { color: var(--panel-muted); font-size: .95rem; }
.is-sent .form, .is-sent .form__micro { display: none; }
.is-sent .sent { display: block; }

/* Tira a sangre. ⚠️ Este comentario quedó HUÉRFANO al repartir el CSS en
   archivos (20-ago-2026): su encabezado se fue con otro bloque y el cuerpo
   se quedó suelto, sin abrir. Suelto invalidaba la regla siguiente — `.sangre`
   perdía su `display: grid` y las tres fotos se apilaban a pantalla completa,
   sin que nada avisara. Reabierto aquí.
   Tira de imágenes a SANGRE y bandas con texto encima. La página deja de ser
   texto con fotos intercaladas y pasa a ser un recorrido por un lugar. Cada
   ranura es `data-foto`: mientras el archivo no exista, la figura se esconde
   sola y la tira entera desaparece — así la maqueta aguanta a medio camino. */
/* `auto-fit` y no `repeat(3, …)`: cuando falta una foto, su figura se
   esconde y con tres columnas fijas quedaban huecos vacíos en la tira. Así
   las que existan reparten el ancho entre ellas — se ve entera con una, con
   dos o con tres, que es como va a estar mientras se juntan las fotos. */
.sangre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--panel-rule); }
@media (max-width: 720px) { .sangre { grid-template-columns: 1fr; } }
.sangre .foto img { aspect-ratio: 4 / 3; }
/* En una tira manda la ALTURA, no la proporción: las placas tienen que
   medir lo mismo entre sí, y con `aspect-ratio` una sola foto se estiraba
   a 843px de alto al quedarse con todo el ancho. */
.sangre .placa { aspect-ratio: auto; height: clamp(230px, 26vw, 400px); }

.banda { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(300px, 40vw, 440px); background: var(--panel); }
.banda__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda__velo { position: absolute; inset: 0;
  background: linear-gradient(93deg, rgba(16,29,36,.95) 0%, rgba(16,29,36,.86) 40%, rgba(16,29,36,.48) 100%); }
/* En pantalla angosta el degradado horizontal deja el texto sobre la parte
   clara de la foto (el cielo, en la fachada). Ahí el velo se vuelve vertical y
   parejo: la legibilidad no puede depender de qué foto se ponga. */
@media (max-width: 900px) {
  .banda__velo { background: linear-gradient(180deg,
    rgba(16,29,36,.90) 0%, rgba(16,29,36,.84) 55%, rgba(16,29,36,.90) 100%); }
}
.banda__in { position: relative; width: 100%; padding-block: clamp(3rem, 6vw, 4.5rem); }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }
.ubic { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (min-width: 820px) { .ubic { grid-template-columns: 1.15fr .85fr; align-items: stretch; } }
.ubic figure, .ubic .ubic__mapa { margin: 0; border: 1px solid var(--panel-rule); }
.ubic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banda__in h2 { color: var(--panel-text); }
.banda__in p { color: var(--panel-muted); max-width: 54ch; }

/* ---------- pie ---------- */
.foot { background: var(--panel-2); color: var(--panel-muted); padding-block: 3.2rem 2.4rem; font-size: .87rem; }
.foot__top { display: grid; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--panel-rule); }
@media (min-width: 820px) { .foot__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot h4 { font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--panel-gold); margin: 0 0 .9rem; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--panel-text); }
.disc { margin-top: 2.2rem; font-size: .78rem; line-height: 1.68; color: var(--panel-muted); opacity: .82; max-width: 95ch; }
/* Acceso del equipo: presente pero sin competir con nada de la página. */
.staff { margin-top: 1.4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.staff a { color: var(--panel-muted); opacity: .6; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.staff a:hover { opacity: 1; color: var(--panel-gold); }

/* ---------- placa: foto CON el texto dentro ----------
   Las fotos estaban puestas como láminas sueltas y el pie colgando debajo.
   Se veían pegadas, y el pie ni siquiera se leía como parte de la imagen.

   La placa mete el rótulo DENTRO de la foto, sobre un velo. Tres reglas
   que la separan de la lámina pegada de antes:

   · El velo NO es decoración, es legibilidad — la misma decisión que el
     velo del hero. Por eso arranca transparente arriba (la foto se ve
     entera) y solo se cierra abajo, donde vive el texto. La regla de la
     casa contra los degradados es contra los DECORATIVOS; este trabaja.
   · El filete dorado repite el gesto del hero (`.hero__rule`), que es lo
     que le da a la página su acento y aquí cose la foto con el resto.
   · El texto de la placa es RÓTULO, no contenido: si la foto no existe,
     `data-foto` esconde la figura entera y el rótulo se va con ella. No
     poner ahí nada que la página necesite decir.

   ⚠️ Con `overflow: hidden` la escala del hover no se sale del marco. La
   proporción va en la figura, no en la imagen, porque aquí el pie va
   ENCIMA y no le roba alto a nada. */
.placa {
  position: relative; margin: 0; overflow: hidden;
  background: var(--panel);
  isolation: isolate;
  /* ⚠️ `width` y `min-width` NO son adorno. Dentro de un grid, un item
     tiene `min-width: auto`, así que se estira al ancho INTRÍNSECO de la
     imagen y se sale de su columna: una foto de 900px reventaba una
     columna de 432px y se salía de la pantalla. */
  width: 100%; min-width: 0;
}
.placa img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.placa--ancha { aspect-ratio: 16 / 9; }
.placa--media { aspect-ratio: 3 / 2; }
.placa--alta  { aspect-ratio: 4 / 5; }

/* El velo. Dos paradas intermedias en vez de una: con una sola, la mitad
   de la foto queda lavada; así el oscurecimiento se concentra donde hay
   letras y el resto de la imagen se mantiene limpio. */
.placa::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Más suave desde que la página es clara (20-ago-2026): con el velo al 92%
     la placa se leía como un bloque negro incrustado en una página blanca. Ahora
     cierra solo lo justo para sostener el texto, y la foto se ve casi entera. */
  background: linear-gradient(to top,
    rgba(16,29,36,.74) 0%, rgba(16,29,36,.52) 20%,
    rgba(16,29,36,.16) 44%, rgba(16,29,36,0) 66%);
}
.placa__txt {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  text-shadow: 0 1px 14px rgba(16,29,36,.55);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  color: var(--panel-text);
}
/* El filete: mismo gesto que el hero, a menor escala. */
.placa__txt::before {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--gold-line); margin-bottom: .95rem;
}
.placa__k, .placa__t, /* La cursiva de «Illustration.» dentro del pie: va marcada porque es una
   declaración, no un adorno. Si la imagen es generada, el lector tiene que
   poder saberlo sin buscar. */
.placa__p i { font-style: normal; letter-spacing: .04em; text-transform: uppercase; font-size: .74em; opacity: .82; }
.placa__p { display: block; }
.placa__k {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--panel-gold); margin-bottom: .5rem;
}
.placa__t {
  font-family: var(--font-display); line-height: 1.22;
  font-size: clamp(1.15rem, 2.1vw, 1.62rem); color: var(--panel-text);
  max-width: 26ch;
}
.placa__p {
  margin-top: .55rem; font-size: .82rem; line-height: 1.5;
  color: var(--panel-muted); max-width: 46ch;
}
/* Marco de esquina: dos filetes finos arriba a la izquierda. Es el detalle
   que hace que la foto se lea como pieza compuesta y no como recorte. */
.placa__marco {
  position: absolute; z-index: 2; top: clamp(1rem,2.4vw,1.6rem); left: clamp(1rem,2.4vw,1.6rem);
  width: 26px; height: 26px; pointer-events: none;
  border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line);
  opacity: .75;
}
@media (hover: hover) {
  .placa:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .placa img, .placa:hover img { transition: none; transform: none; }
}
/* En pantalla angosta el rótulo se come la foto si conserva el tamaño de
   escritorio: se recorta el texto largo y se aprieta el aire. */
@media (max-width: 560px) {
  .placa__p { display: none; }
  .placa__txt { padding: 1.1rem; }
  .placa__txt::before { width: 34px; margin-bottom: .7rem; }
}

/* Pareja de placas. `gap:1px` sobre el color de regla deja una costura fina
   entre las dos en vez de un canal vacío — el mismo recurso que `.tira`. */
.placas { display: grid; gap: 1px; background: var(--rule); margin-top: 2.6rem; }
@media (min-width: 780px) { .placas--2 { grid-template-columns: 1fr 1fr; } }
.band--ink .placas { background: var(--panel-rule); }

/* ---------- retrato: la hermana de la placa, para personas ----------
   Los seis retratos del equipo NO llevan el nombre dentro de la foto, y
   es deliberado: en la placa el texto es rótulo y se va con la imagen si
   el archivo falta. El nombre y la cédula de un médico son CONTENIDO —
   tienen que seguir ahí aunque la foto no exista, que hoy es el caso de
   casi todos.

   Así que el retrato se queda con los detalles de la placa —marco de
   esquina y filete dorado— pero el texto vive FUERA, debajo. */
.retrato { position: relative; margin: 0 0 1rem; overflow: hidden; background: var(--stone-2); }
.retrato img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 5; }
.retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Un velo apenas perceptible abajo: iguala el tono entre retratos
     tomados con luces distintas, que es lo que delata una galería
     armada con fotos de días diferentes. */
  background: linear-gradient(to top, rgba(16,29,36,.22) 0%, rgba(16,29,36,0) 38%);
}
.retrato__marco {
  position: absolute; top: 12px; left: 12px; width: 22px; height: 22px;
  border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line);
  opacity: .8; pointer-events: none;
}
/* El filete cose la foto con el nombre que va debajo. */
.retrato + h3::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--gold-line); margin-bottom: .7rem;
}

/* ---------- movimiento ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(22px); animation: rise .95s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .24s; } .d3 { animation-delay: .38s; }
.d4 { animation-delay: .52s; } .d5 { animation-delay: .66s; } .d6 { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .rise { opacity: 1; transform: none; animation: none; transition: none; }
  html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }

/* ---------- fotografía ----------
   La página estaba escrita entera con tipografía y cero fotos. Está bien
   argumentada, pero se lee como un folleto: la tesis es «esto es un
   hospital de verdad» y no había una sola prueba visual de ello.

   Reglas de estas piezas:
   · `aspect-ratio` fijo → el espacio se reserva ANTES de que cargue la
     imagen, así el texto no brinca al terminar de bajar (CLS).
   · `loading="lazy"` en todo lo que no sea lo primero que se ve.
   · Si el archivo no existe, la figura se ESCONDE sola (ver el script).
     Mientras se juntan las fotos reales, la página nunca muestra el ícono
     de imagen rota — que se ve peor que no tener foto. */
/* ⚠️ La proporción va en la IMAGEN, no en el <figure>. Estuvo en la figura,
   con `overflow:hidden` encima; desde que el pie vive DENTRO de la figura eso
   le robaba el alto al texto y lo recortaba. */
.foto { margin: 0; }
.foto img {
  width: 100%; height: auto; display: block;
  object-fit: cover; background: var(--stone-2);
}
.foto--ancha { margin-top: 2.6rem; }
.foto--ancha img { aspect-ratio: 16 / 9; }
.foto--alta img { aspect-ratio: 4 / 5; }
.foto--cuadro img { aspect-ratio: 1 / 1; }
.foto figcaption,
.foto__pie { font-size: .76rem; color: var(--ink-2); margin-top: .55rem; }
.band--ink .foto__pie { color: var(--panel-muted); }
.tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); margin-top: 2.6rem; }
@media (max-width: 720px) { .tira { grid-template-columns: 1fr; } }
.tira--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }