:root{
  /* ============ BASE NEUTRA FRÍA ============
     #FBFCFD lleva una pizca de azul: hace que el blanco puro de las
     tarjetas se despegue del fondo SIN necesitar sombras.
     El logo (logo.png, 400x284) es una placa blanca opaca: por eso el
     fondo y la cabecera se quedan casi blancos. NO oscurecer la cabecera. */
  --blanco:#ffffff;
  --superficie:#ffffff;        /* tarjetas, láminas, paspartú */
  --fondo:#fbfcfd;             /* fondo de página */
  --fondo-alt:#f2f6f8;         /* .patologias-alt y .aseguradoras */
  --borde:#e2eaee;             /* hairline por defecto */
  --borde-fuerte:#ccdae1;      /* hairline de estado / hover */

  /* ============ TINTA ============
     Contrastes verificados sobre --fondo (#FBFCFD). */
  --marino:#0b2e3b;            /* titulares y estructura — 14.2:1 */
  --marino-900:#07222c;        /* pie */
  --texto:#0f2a33;             /* cuerpo — 14.9:1 (no negro: menos fatiga) */
  --texto-suave:#4c6672;       /* párrafos y leads — 5.9:1 */
  --texto-tenue:#5e7681;       /* créditos, etiquetas ≥600 — 4.7:1 */

  /* ============ ACENTO ÚNICO: petróleo ============
     Regla permanente del proyecto: marino = información, petróleo = acción.
     El petróleo aparece SOLO en: botón primario, subrayado del nav,
     regla bajo h2, barra superior de tarjeta, "Leer más", viñetas de
     síntomas, foco y hairlines de estado. En ningún otro sitio. */
  --acento:#145a6b;            /* rellenos, reglas, iconos — 7.8:1 sobre blanco */
  --acento-texto:#124f60;      /* SOLO enlaces dentro de prosa — 9.1:1 */
  --acento-oscuro:#0e4353;     /* hover del botón primario */
  --acento-claro:#4fb3be;      /* SOLO sobre fondo oscuro (contacto/caja-cta) — 5.7:1 sobre --marino */
  --acento-tinte:#e8f1f3;      /* fondos de píldora muy tenues */

  /* ============ ALIAS DEFENSIVOS ============
     Las 8 páginas de detalle y el marcado actual referencian estos
     nombres. Se conservan apuntando a los valores nuevos para que
     ninguna regla heredada u olvidada rompa nada. NO borrarlos. */
  --azul:var(--acento);
  --azul-oscuro:var(--marino);
  --granate:var(--acento);
  --granate-oscuro:var(--acento-oscuro);
  --implante:#8ea3ae;
  --implante-oscuro:#5f7482;

  /* ============ TIPOGRAFÍA ============
     Newsreader = nivel documento (h1, h2). Inter = nivel componente
     (h3, cuerpo, nav, botones, etiquetas). Dos familias, no tres. */
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-cuerpo:clamp(1.0625rem,1rem + .3vw,1.125rem);   /* 17 → 18px */
  --t-h1:clamp(2.15rem,1.55rem + 2.5vw,3.1rem);
  --t-h1-detalle:clamp(1.9rem,1.45rem + 1.8vw,2.6rem);
  --t-h2:clamp(1.65rem,1.3rem + 1.4vw,2.25rem);
  --t-h3:1.18rem;
  --t-lead:clamp(1.1rem,1.03rem + .35vw,1.22rem);
  --t-etiqueta:.75rem;

  --medida:68ch;               /* prosa larga */
  --medida-corta:46ch;         /* entradillas y leads */

  /* ============ ESPACIADO base 4 ============
     Sin valores intermedios: evita el "casi igual" que ensucia el ritmo. */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;

  --seccion-y:clamp(64px,8vw,112px);
  --ancho:1180px;
  --gutter:32px;

  /* ============ FORMA ============ */
  --radio-xs:4px;
  --radio:10px;
  --radio-lg:14px;

  /* ============ SOMBRA: solo como estado, nunca en reposo ============ */
  --sombra-lamina:0 1px 2px rgba(11,46,59,.04);
  --sombra-tarjeta:0 14px 30px -20px rgba(11,46,59,.28);
  --sombra-placa:0 32px 64px -40px rgba(11,46,59,.55);

  /* ============ MOVIMIENTO ============ */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-rapida:180ms;
  --t-media:260ms;
  --t-lenta:420ms;

  /* ============ RETÍCULA TÉCNICA ============
     Debe quedar por debajo del umbral de percepción consciente.
     Si en un portátil corriente "canta", bajar .04 → .028. */
  --rejilla:linear-gradient(rgba(20,90,107,.04) 1px,transparent 1px),
            linear-gradient(90deg,rgba(20,90,107,.04) 1px,transparent 1px);
}

@media (max-width:640px){
  :root{ --gutter:20px; }
}

/* =============================================================
   PRECISIÓN SERENA — estilos.css
   Dr. Xabier Albillos y Dr. Javier Albillos
   Sustituye íntegramente al estilos.css actual.
   Usa EXCLUSIVAMENTE las clases que ya existen en los 9 HTML.
   ============================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-cuerpo);
  line-height:1.7;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;   /* alinea 943 30 80 77, 3.19, 2009/2014/2015 */
}
img{max-width:100%;display:block}
::selection{background:var(--acento);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--radio-xs)}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* ---------------------------------------------- Tipografía */
h1,h2{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  color:var(--marino);
  line-height:1.12;
  letter-spacing:-.018em;
  margin:0 0 var(--e-4);
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);position:relative;padding-bottom:20px}
h3{
  font-family:var(--sans);
  font-size:var(--t-h3);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.35;
  color:var(--marino);         /* ya NO granate: 7 titulares de color en una rejilla es ruido */
  margin:0 0 var(--e-3);
}
p{color:var(--texto-suave);margin:0 0 var(--e-3);max-width:var(--medida)}
strong{color:var(--texto);font-weight:600}

a{color:var(--acento-texto);text-decoration:none;transition:color var(--t-rapida) var(--ease)}
a:hover{color:var(--acento)}

/* Regla de 2px bajo cada h2 — el gesto firma del sistema.
   Escrita para las DOS estructuras reales del marcado:
     index.html          -> <h2 class="reveal">
     páginas de detalle  -> <div class="reveal"><h2>
   Por defecto está VISIBLE: si el JS falla o el h2 no lleva reveal,
   el divisor aparece igual. Solo se pone a 0 mientras el bloque
   revelable aún no es .visible. */
h2::after{
  content:"";position:absolute;left:0;bottom:0;
  height:2px;width:56px;background:var(--acento);
  transition:width var(--t-lenta) var(--ease) 120ms;
}
h2.reveal:not(.visible)::after,
.reveal:not(.visible) h2::after{width:0}

/* ---------------------------------------------- Cabecera
   Fondo casi blanco OBLIGATORIO: logo.png es una placa blanca opaca. */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(251,252,253,.94);
  border-bottom:1px solid var(--borde);
  transition:box-shadow var(--t-media) var(--ease),background var(--t-media) var(--ease);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cabecera{
    background:rgba(251,252,253,.86);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
  }
}
.cabecera.compacta{box-shadow:0 8px 24px -20px rgba(11,46,59,.45)}

.cabecera-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-5);padding:14px var(--gutter);
  transition:padding var(--t-media) var(--ease);
}
.cabecera.compacta .cabecera-inner{padding:8px var(--gutter)}

/* Barra de progreso de lectura — SOLO páginas de detalle.
   Se activa poniendo la clase .con-progreso en <header class="cabecera">. */
.cabecera.con-progreso::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--acento);opacity:.7;
  transform:scaleX(var(--progreso,0));transform-origin:left;
}

.marca{display:flex;align-items:center;gap:var(--e-3)}
.marca .logo{
  height:52px;width:auto;
  transition:height var(--t-media) var(--ease),opacity var(--t-rapida) var(--ease);
  /* SIN animación de latido: en una cabecera sticky siempre visible,
     un pulso perpetuo es el único elemento que se lee como gimmick. */
}
.cabecera.compacta .marca .logo{height:40px}
.marca:hover .logo{opacity:.85}

.marca-texto{display:flex;flex-direction:column;line-height:1.25}
.marca-texto strong{
  font-family:var(--serif);font-weight:500;font-size:1.1rem;
  color:var(--marino);letter-spacing:-.01em;
}
.marca-texto small{
  color:var(--texto-tenue);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}

.nav-links{list-style:none;display:flex;align-items:center;gap:var(--e-5);margin:0;padding:0}
.nav-links a{
  position:relative;display:inline-block;padding:6px 0;
  color:var(--texto);font-weight:500;font-size:.92rem;letter-spacing:-.004em;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acento);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t-media) var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left center}
.nav-links a.activo{color:var(--marino);font-weight:600}
.nav-links a.activo::after{transform:scaleX(1)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--borde);
  border-radius:var(--radio-xs);font-size:1.2rem;line-height:1;
  padding:8px 12px;cursor:pointer;color:var(--marino);
}

/* ---------------------------------------------- Hero (SOLO portada)
   TODAS las reglas de .hero-texto van acotadas con .hero delante:
   .hero-texto se reutiliza en las 8 páginas de detalle. */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(64px,8vw,112px) 0;
  background:var(--fondo);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--rejilla);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 78%);
}
.hero-inner{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--e-8);align-items:center;
}
.hero .hero-texto{position:relative;padding-left:var(--e-5)}
.hero .hero-texto::before{
  content:"";position:absolute;left:0;top:8px;
  width:2px;height:56px;background:var(--acento);
}
.hero .hero-texto h1{margin-bottom:var(--e-5)}
.hero .hero-sub{
  font-size:var(--t-lead);color:var(--texto-suave);
  max-width:var(--medida-corta);margin-bottom:var(--e-7);
}
.hero-botones{display:flex;gap:var(--e-4);flex-wrap:wrap}

/* Eyebrow opcional (requiere 1 línea de HTML nueva, ver notas) */
.hero-eyebrow{
  display:flex;align-items:center;gap:var(--e-3);
  color:var(--acento);font-size:var(--t-etiqueta);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;margin:0 0 var(--e-4);
  max-width:none;
}
.hero-eyebrow::before{content:"";width:24px;height:1px;background:var(--acento);flex:none}

/* Imagen del hero como "placa". aspect-ratio 4/3 = 1600x1196 exacto: no recorta. */
.hero-imagen{
  position:relative;border-radius:var(--radio-lg);overflow:hidden;
  box-shadow:var(--sombra-placa);
  transform:translate3d(0,var(--py,0px),0);
}
.hero-imagen::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(11,46,59,.10);
  background:linear-gradient(to top,rgba(7,34,44,.18),transparent 45%);
}
.hero-imagen img{
  width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--fondo-alt);
  filter:saturate(.96) contrast(1.03);   /* unifica temperatura entre fotos de sesiones distintas */
}
.hero-imagen.sin-imagen{
  aspect-ratio:4/3;background:var(--fondo-alt);
  border:1px dashed var(--borde);box-shadow:none;
}
.hero-imagen.sin-imagen img{display:none}

/* ---------------------------------------------- Botones */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:52px;padding:15px 30px;border-radius:var(--radio-xs);
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  border:0;cursor:pointer;
  transition:background var(--t-rapida) var(--ease),color var(--t-rapida) var(--ease),
             box-shadow var(--t-rapida) var(--ease),transform 120ms var(--ease);
}
.boton:active{transform:translateY(1px)}
.boton-primario{background:var(--acento);color:#fff;box-shadow:0 10px 20px -14px rgba(20,90,107,.9)}
.boton-primario:hover{background:var(--acento-oscuro);color:#fff;box-shadow:0 14px 26px -14px rgba(11,46,59,.7)}
.boton-secundario{background:transparent;color:var(--marino);box-shadow:inset 0 0 0 1.5px var(--borde-fuerte)}
.boton-secundario:hover{color:var(--marino);background:var(--superficie);box-shadow:inset 0 0 0 1.5px var(--marino)}

/* ---------------------------------------------- Ritmo de secciones
   Los bloques de color pesados se sustituyen por hilos de 1px.
   Ojo: en las páginas de detalle hay <section class="seccion" style="padding-top:0">
   y style="padding-top:56px" — el inline gana, y está bien que gane. */
.seccion{padding:var(--seccion-y) 0}
.seccion + .seccion{border-top:1px solid var(--borde)}
.patologias-alt + .seccion,
.aseguradoras + .seccion,
.contacto{border-top:0}                 /* evita el hilo doble */

.seccion-intro{
  font-size:var(--t-lead);color:var(--texto-suave);
  max-width:var(--medida-corta);         /* entradilla, no prosa larga */
  margin-bottom:var(--e-7);
}
.patologias-alt,.aseguradoras{
  background:var(--fondo-alt);
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
}

/* ---------------------------------------------- Sobre nosotros */
.sobre-mi-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e-8);align-items:start}
.sobre-mi-texto p{font-size:1.05rem}
.sobre-mi-fotos{position:relative;display:grid;gap:var(--e-4)}
/* Marco desplazado: solo hay UNA foto vertical ahí; sin esto se ve huérfana. */
.sobre-mi-fotos::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid rgba(20,90,107,.28);border-radius:var(--radio-lg);
  pointer-events:none;
}
.sobre-mi-fotos img{
  position:relative;
  background:var(--superficie);padding:10px;      /* paspartú */
  border:1px solid var(--borde);border-radius:var(--radio-lg);
  box-shadow:var(--sombra-lamina);
  aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.96) contrast(1.03);
}
.sobre-mi-fotos img.foto-retrato{aspect-ratio:3/4;object-position:center 12%}

/* ---------------------------------------------- Tarjetas de patología
   Planas de verdad en reposo. El hover NO eleva: ilumina.
   Una rejilla de 7 tarjetas que no salta es más tranquila para un lector mayor. */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e-5)}

.tarjeta{
  position:relative;
  display:flex;flex-direction:column;      /* ancla "Leer más" abajo */
  overflow:hidden;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--e-6);
}
.tarjeta p{margin-bottom:var(--e-4)}
.tarjeta:last-child{margin-bottom:0}

a.tarjeta{
  transition:box-shadow var(--t-media) var(--ease),border-color var(--t-media) var(--ease);
}
a.tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--acento);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 320ms var(--ease);
}
a.tarjeta:hover,a.tarjeta:focus-visible{
  box-shadow:var(--sombra-tarjeta);
  border-color:var(--borde-fuerte);
}
a.tarjeta:hover::before,a.tarjeta:focus-visible::before{transform:scaleX(1)}

a.tarjeta .tarjeta-enlace{
  display:inline-flex;align-items:center;gap:var(--e-2);
  margin-top:auto;padding-top:var(--e-2);
  color:var(--acento);font-weight:600;font-size:.92rem;
  position:relative;align-self:flex-start;
}
a.tarjeta .tarjeta-enlace::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 320ms var(--ease);
}
a.tarjeta:hover .tarjeta-enlace::after{transform:scaleX(1)}
a.tarjeta .tarjeta-enlace svg{transition:transform var(--t-media) var(--ease)}
a.tarjeta:hover .tarjeta-enlace svg{transform:translateX(4px)}

/* Trayectoria: 4 <article> que NO son enlaces. Sin hover, con ordinal
   decorativo generado por CSS — no se toca el HTML. Son categorías
   (formación, situación, internacional, científica), no una cronología:
   por eso ordinal y no línea de tiempo. */
.trayectoria .tarjetas{counter-reset:hito}
.trayectoria .tarjeta{counter-increment:hito}
.trayectoria .tarjeta::after{
  content:counter(hito,decimal-leading-zero);
  position:absolute;top:18px;right:24px;
  font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1;
  color:rgba(11,46,59,.07);letter-spacing:-.03em;pointer-events:none;
}

/* ---------------------------------------------- Aseguradoras
   Diez logotipos con diez paletas distintas son el mayor foco de ruido
   cromático de la página. En gris son una banda tranquila de credibilidad. */
.logos-aseguradoras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e-4);align-items:center;
}
.logo-aseguradora{
  display:flex;align-items:center;justify-content:center;
  height:88px;padding:var(--e-5);
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);
}
.logo-aseguradora img{
  max-width:100%;max-height:40px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.58;
  transition:filter 240ms var(--ease),opacity 240ms var(--ease);
}
.logo-aseguradora:hover img{filter:grayscale(0);opacity:1}

/* ---------------------------------------------- Contacto (losa marino) */
.contacto{position:relative;overflow:hidden;background:var(--marino);color:#fff}
.contacto::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),
                   linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:64px 64px;
}
.contacto > *{position:relative}
.contacto h2{color:#fff}
.contacto h2::after{background:var(--acento-claro)}
.contacto .seccion-intro{color:#b6ced8}

.contacto-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--e-8);align-items:center}
.lista-contacto{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--e-5)}
.lista-contacto li{
  display:flex;flex-direction:column;gap:var(--e-1);
  padding-left:var(--e-4);border-left:2px solid rgba(255,255,255,.14);
}
.lista-contacto .etiqueta{
  color:#8fb4c0;font-size:var(--t-etiqueta);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;
}
.lista-contacto a,.lista-contacto span:not(.etiqueta){
  color:#fff;font-size:1.14rem;font-weight:500;line-height:1.5;
}
.lista-contacto a{align-self:flex-start;border-bottom:1.5px solid transparent;
  transition:color var(--t-rapida) var(--ease),border-color var(--t-rapida) var(--ease)}
.lista-contacto a:hover{color:var(--acento-claro);border-bottom-color:var(--acento-claro)}

.contacto-nota{
  border-left:2px solid var(--acento-claro);padding-left:var(--e-5);
  color:#b6ced8;font-style:normal;
}
.contacto-nota p{color:inherit;max-width:none}

/* El HTML ya escribe la ★ dentro del enlace: NO añadir ::before con estrella. */
.boton-resena{margin-top:var(--e-7);background:#fff;color:var(--marino);box-shadow:none}
.boton-resena:hover{background:var(--acento-claro);color:var(--marino-900)}

/* ---------------------------------------------- Pie */
.pie{background:var(--marino-900);border-top:1px solid rgba(255,255,255,.08);padding:var(--e-5) 0}
.pie p{color:#7ea3b0;font-size:.85rem;margin:0;text-align:center;max-width:none}

/* ---------------------------------------------- Páginas de detalle */

/* BUG HEREDADO: .migas es <p class="contenedor migas">, y el
   .migas{padding:20px 0 0} original pisaba el padding lateral de
   .contenedor (misma especificidad, va después) -> la miga tocaba el
   borde de pantalla en móvil. Aquí se repone el gutter. */
.migas{padding:var(--e-5) var(--gutter) 0;font-size:.85rem;max-width:var(--ancho)}
.migas a{
  display:inline-flex;align-items:center;gap:var(--e-2);
  padding:8px 16px;border-radius:999px;
  background:var(--superficie);border:1px solid var(--borde);
  color:var(--texto-suave);font-weight:600;
  transition:color var(--t-rapida) var(--ease),border-color var(--t-rapida) var(--ease),gap var(--t-rapida) var(--ease);
}
.migas a:hover{color:var(--acento);border-color:var(--borde-fuerte);gap:var(--e-3)}

.detalle-hero{padding:var(--e-6) 0 var(--seccion-y)}
.detalle-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--e-8);align-items:center}
.detalle-eyebrow{
  color:var(--acento);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--t-etiqueta);
  margin:0 0 var(--e-3);max-width:none;
}
.detalle-hero h1{font-size:var(--t-h1-detalle)}
.detalle-lead{font-size:var(--t-lead);color:var(--texto-suave);max-width:52ch}

/* Diagramas: lámina sobre blanco puro + retícula tenue (efecto negatoscopio).
   El fondo gris original restaba contraste a las ilustraciones anatómicas. */
.detalle-diagrama{
  position:relative;overflow:hidden;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:12px;
  padding:var(--e-6);
  box-shadow:var(--sombra-lamina);
}
.detalle-diagrama::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(20,90,107,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(20,90,107,.03) 1px,transparent 1px);
  background-size:32px 32px;
}
/* IMPRESCINDIBLE: meniscectomia.html, sutura-meniscal.html y
   protesis-rodilla.html llevan SVG INLINE (157 clases cls-N con sus
   propios fills). Esta regla es lo único que los dimensiona.
   NUNCA aplicar color a `.detalle-diagrama svg *`. */
.detalle-diagrama svg{position:relative;width:100%;height:auto;display:block}
.detalle-diagrama img{
  position:relative;width:100%;max-height:440px;
  object-fit:contain;display:block;margin:0 auto;
}
.credito-imagen{
  display:block;text-align:right;font-size:.7rem;color:var(--texto-tenue);
  margin-top:var(--e-3);padding-top:var(--e-2);border-top:1px solid var(--borde);
}
.credito-imagen a{color:inherit;text-decoration:underline}

.detalle-dos-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-7) var(--e-8);align-items:start}
.detalle-dos-col h2{font-size:1.35rem;padding-bottom:14px}
.detalle-dos-col h2::after{width:40px}

.lista-sintomas{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.lista-sintomas li{display:flex;align-items:flex-start;gap:var(--e-3);color:var(--texto-suave)}
/* Filete de 14x1px en lugar de punto: coherente con un sistema de hairlines. */
.lista-sintomas li::before{
  content:"";flex:none;width:14px;height:1px;
  margin-top:15px;background:var(--acento);border-radius:0;
}

/* Caja CTA: panel marino, el elemento de mayor contraste de cada
   página de detalle. Contiene solo <h3> + <a class="boton boton-primario">. */
.caja-cta{
  position:relative;overflow:hidden;text-align:center;margin-top:var(--e-4);
  background:var(--marino);border:0;border-radius:var(--radio);
  padding:var(--e-8) var(--e-6);
}
.caja-cta::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),
                   linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:56px 56px;
}
.caja-cta > *{position:relative}
.caja-cta h3{
  font-family:var(--serif);font-weight:500;font-size:1.4rem;
  color:#fff;max-width:24ch;margin:0 auto var(--e-6);
}
.caja-cta p{color:#b6ced8;max-width:52ch;margin:0 auto var(--e-5)}
.caja-cta a:not(.boton){color:var(--acento-claro)}
.caja-cta .boton-primario{background:#fff;color:var(--marino);box-shadow:none}
.caja-cta .boton-primario:hover{background:var(--acento-claro);color:var(--marino-900)}

/* ---------------------------------------------- Revelado */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.visible{opacity:1;transform:none}

/* Cascada dentro de una rejilla de tarjetas. Acotado a .reveal:
   una .tarjetas SIN .reveal nunca queda invisible. */
.tarjetas.reveal > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             box-shadow var(--t-media) var(--ease),border-color var(--t-media) var(--ease);
}
.tarjetas.reveal.visible > *{opacity:1;transform:none}
.tarjetas.reveal.visible > *:nth-child(2){transition-delay:70ms}
.tarjetas.reveal.visible > *:nth-child(3){transition-delay:140ms}
.tarjetas.reveal.visible > *:nth-child(4){transition-delay:210ms}
.tarjetas.reveal.visible > *:nth-child(5){transition-delay:280ms}
.tarjetas.reveal.visible > *:nth-child(6){transition-delay:350ms}
.tarjetas.reveal.visible > *:nth-child(7){transition-delay:420ms}
.tarjetas.reveal.visible > *:nth-child(8){transition-delay:490ms}

/* ---------------------------------------------- Botón flotante «Llamar» (móvil)
   Para un paciente de 70 años en el móvil, llamar ES la conversión.
   Requiere 1 línea de HTML (o inyección desde script.js). */
.boton-llamar{display:none}
@media (max-width:720px){
  .boton-llamar{
    display:inline-flex;align-items:center;gap:var(--e-2);
    position:fixed;right:16px;bottom:16px;z-index:70;
    padding:14px 22px;border-radius:999px;min-height:52px;
    background:var(--acento);color:#fff;font-weight:600;font-size:1rem;
    box-shadow:0 14px 30px -12px rgba(11,46,59,.75);
  }
  .boton-llamar:hover{color:#fff;background:var(--acento-oscuro)}
  /* El FAB tapa el PIE, no el contacto. La compensación va aquí. */
  .pie{padding-bottom:96px}
}

/* ---------------------------------------------- Responsive */

/* La sección #rodilla tiene EXACTAMENTE 4 tarjetas: sin esto, el
   auto-fit deja 3 arriba y 1 huérfana en portátiles de 1366px. */
@media (max-width:1119px) and (min-width:961px){
  #rodilla .tarjetas{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  .hero-inner,.sobre-mi-grid,.contacto-grid,
  .detalle-hero-grid,.detalle-dos-col{grid-template-columns:1fr;gap:var(--e-7)}
  .hero-imagen{order:-1;transform:none}
  .sobre-mi-fotos::before{display:none}
  .contacto-nota{border-left:0;border-top:2px solid var(--acento-claro);padding:var(--e-5) 0 0}
}

/* 900px y no 720: son 8 enlaces de nav más una marca con serif. */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-principal{position:relative}
  .nav-links{
    position:absolute;top:calc(100% + 12px);right:0;min-width:240px;
    background:var(--superficie);border:1px solid var(--borde);
    border-radius:var(--radio);
    box-shadow:0 24px 48px -28px rgba(11,46,59,.5);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--e-2) var(--e-4);display:none;z-index:40;
  }
  .nav-links.abierto{display:flex}
  .nav-links li + li{border-top:1px solid var(--borde)}
  .nav-links a{padding:13px 0;display:block}
  .nav-links a::after{display:none}
  .hero::before{display:none}      /* la retícula no aporta nada en móvil */
  .hero .hero-texto{padding-left:var(--e-4)}
}

@media (max-width:640px){
  .tarjeta{padding:var(--e-5)}
  .detalle-diagrama{padding:var(--e-5)}
  .trayectoria .tarjeta::after{font-size:1.8rem;top:14px;right:18px}
}

/* ---------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.tarjetas.reveal > *{opacity:1!important;transform:none!important}
  h2::after{width:56px!important}
  .detalle-dos-col h2::after{width:40px!important}
  .hero-imagen{transform:none!important}
}

/* -------------------------------------------------------------
   GANCHOS JS NECESARIOS (vanilla, sin librerías).
   El observer de .reveal está hoy DUPLICADO inline en los 9 HTML:
   extraerlo a un script.js compartido ANTES de añadir nada más,
   o cada cambio obligará a tocar 9 archivos.

   1) scroll > 24px  -> cabecera.classList.toggle('compacta', scrollY>24)
                        con {passive:true}
   2) scroll-spy     -> IntersectionObserver sobre las <section id> de
                        index.html; añade .activo al enlace de nav
   3) --progreso     -> solo si la cabecera lleva .con-progreso:
                        scrollTop/(scrollHeight-innerHeight), dentro de rAF
   4) --py           -> parallax del hero, tope 28px, solo si
                        innerWidth>960 y !matchMedia('(prefers-reduced-motion:reduce)').matches
   5) El IntersectionObserver de .reveal actual NO necesita cambios.
   ------------------------------------------------------------- */

/* ---------------------------------------------- Entrada del hero (solo portada)
   Una sola vez, al cargar. La imagen anima su propio zoom en lugar del
   contenedor, porque el contenedor lleva el translate3d del parallax. */
@keyframes aparecer-subir{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes aparecer-placa{
  from{opacity:0;transform:scale(1.035)}
  to{opacity:1;transform:scale(1)}
}
.hero .hero-texto > *{animation:aparecer-subir 700ms var(--ease) both}
.hero .hero-texto .hero-eyebrow{animation-delay:60ms}
.hero .hero-texto h1{animation-delay:140ms}
.hero .hero-texto .hero-sub{animation-delay:220ms}
.hero .hero-texto .hero-botones{animation-delay:300ms}
.hero-imagen img{animation:aparecer-placa 900ms var(--ease) both}

/* ---------------------------------------------- Ajustes de verificación
   Correcciones tras revisar el resultado en navegador. */

/* 1. Rejillas de 4 tarjetas: el auto-fit dejaba 3 arriba y 1 huérfana
      también a 1440px, no solo en el tramo que cubría la regla anterior.
      Con 4 elementos, 2x2 es la única retícula que no deja restos. */
@media (min-width:961px){
  #rodilla .tarjetas,
  .trayectoria .tarjetas{grid-template-columns:repeat(2,1fr)}
}

/* 2. PRGF es una sola tarjeta: sin tope se estiraba a los 1116px del
      contenedor y se leía como banda, no como tarjeta. */
#prgf .tarjetas{grid-template-columns:minmax(0,620px)}

/* 3. Diez aseguradoras: 5+5 es una banda estable; el auto-fit daba 6+4. */
@media (min-width:961px){
  .logos-aseguradoras{grid-template-columns:repeat(5,1fr)}
}

/* 4. Sobre la losa marino, teléfono/email/enlace se veían igual que el
      texto plano. Un subrayado tenue en reposo indica que son pulsables
      sin ensuciar el bloque. */
.lista-contacto a{border-bottom-color:rgba(255,255,255,.28)}

/* 5. «Sobre nosotros»: probado a centrar el grid (separaba el titular de su
      texto) y a limitar el alto del retrato (la foto dejaba de llenar la
      columna y el marco quedaba descolgado). Se mantiene el retrato a 3/4
      llenando su columna: que la foto baje más que el texto es normal en
      una composición editorial, y el marco desplazado lo justifica. */

/* 6. Cabecera móvil. «Cirugía Ortopédica y Traumatología» partía en dos
      líneas porque .marca es un flex sin tamaño mínimo y se comprimía.
      La especialidad tiene que leerse, así que en vez de ocultarla se
      ajusta para que entre en UNA línea: logo algo menor, cuerpo más
      pequeño y menos tracking. Medido a 390px (queda ~209px de hueco y el
      texto ocupa ~126px) y comprobado también a 320px. */
@media (max-width:520px){
  .marca .logo{height:40px}
  .marca-texto strong{font-size:1rem}
  .marca-texto small{
    font-size:.58rem;
    letter-spacing:.07em;
    white-space:nowrap;
  }
  .cabecera-inner{padding:10px var(--gutter);gap:var(--e-3)}
  .hero-eyebrow{letter-spacing:.08em;font-size:.7rem}
}

/* ---------------------------------------------- Aviso de copia
   Solo aparece en la vista previa incrustada, donde el sandbox bloquea
   tel: y mailto:. En la web real nunca se muestra. */
.aviso-copia{
  position:fixed;left:50%;bottom:24px;z-index:80;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;
  max-width:min(420px,calc(100vw - 32px));
  padding:14px 20px;border-radius:var(--radio);
  background:var(--marino);color:#fff;
  box-shadow:0 24px 48px -24px rgba(11,46,59,.7);
  transition:opacity var(--t-media) var(--ease),transform var(--t-media) var(--ease);
}
.aviso-copia.visible{opacity:1;transform:translate(-50%,0)}
.aviso-copia strong{font-size:1.05rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.aviso-copia span{font-size:.82rem;color:#b6ced8;line-height:1.45}

/* Con el botón flotante en pantalla, el aviso sube para no taparlo. */
@media (max-width:720px){
  .aviso-copia{bottom:84px}
}

@media (prefers-reduced-motion:reduce){
  .aviso-copia{transition:none}
}

/* ---------------------------------------------- Centro de trabajo
   Banda al pie, sobre el mismo fondo que el pie, de modo que Contacto,
   esta banda y el pie se leen como un único bloque oscuro. El logo de
   Policlínica es blanco sobre turquesa; en blanco sobre marino convive
   con el petróleo de la paleta sin competir con él.
   Si el archivo del logo no está, `onerror` marca .sin-logo y en su lugar
   se compone el nombre tipográficamente: la sección nunca queda coja. */
.centro{
  background:var(--marino-900);
  border-top:1px solid rgba(255,255,255,.08);
  padding:var(--e-7) 0 var(--e-6);
}
.centro-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--e-4);text-align:center;
}
.centro-etiqueta{
  margin:0;max-width:none;
  color:#8fb4c0;font-size:var(--t-etiqueta);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
}
.centro-marca img{height:40px;width:auto;opacity:.92}
.centro-nombre{display:none}

.centro-marca.sin-logo img{display:none}
.centro-marca.sin-logo .centro-nombre{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  margin:0;max-width:none;
  font-family:var(--serif);font-size:1.45rem;font-weight:500;
  color:#fff;letter-spacing:-.01em;line-height:1.1;
}
.centro-marca.sin-logo .centro-nombre small{
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  color:#8fb4c0;text-transform:uppercase;letter-spacing:.14em;
}

@media (max-width:640px){
  .centro{padding:var(--e-6) 0 var(--e-5)}
  .centro-marca img{height:32px}
  .centro-marca.sin-logo .centro-nombre{font-size:1.25rem}
}

/* ---------------------------------------------- Aviso legal
   Página de solo texto: medida de lectura acotada y jerarquía más
   discreta que en el resto del sitio, que aquí no compite con nada. */
.legal h1{max-width:20ch}
.legal h2{font-size:1.3rem;padding-bottom:14px;margin-top:var(--e-8)}
.legal h2::after{width:40px}
.legal p{max-width:70ch}
.lista-legal{
  list-style:none;margin:0 0 var(--e-5);padding:0;
  display:grid;gap:var(--e-2);max-width:70ch;
}
.lista-legal li{
  color:var(--texto-suave);
  padding-left:var(--e-4);border-left:2px solid var(--borde);
}
.lista-legal strong{color:var(--marino)}

/* El enlace del pie es secundario: visible, pero sin robar atención. */
.pie a{color:#9dbcc8;border-bottom:1px solid rgba(157,188,200,.35)}
.pie a:hover{color:#fff;border-bottom-color:#fff}