/* =============================================================================
   ESTILOS DE PÁGINA — Dr. Galvis

   GENERADO. No editar a mano: se sobrescribe.
   Fuente: home.html, articulo.html, tratamiento.html
   Regenerar: node build/generar-css-paginas.js

   Complementa a design-system.css con lo específico de cada plantilla:
   cabecera, menú móvil, hero, rutas del paciente, comparativas y demás.
   ========================================================================== */

/* ═══ desde home.html ═══ */
/* ── Específico de la home. Solo layout: color, tipo y espacio salen de tokens. ── */

.marca { display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.marca__logo { height:clamp(36px, 3.4vw, 48px); width:auto; }
/* El logo es tinta oscura sobre transparente: sobre fondo oscuro desaparecería.
   Se le pone una placa clara en vez de invertirlo, para no volver cian el tachón
   rojo, que es el concepto de la marca. */
:root[data-theme="dark"] .marca__logo {
  background:var(--n-50); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
}
/* Menú móvil — disclosure nativo, sin JavaScript */
.menu { position:relative; }
.menu__btn { display:flex; align-items:center; gap:var(--space-2); min-height:var(--touch-min); padding:var(--space-2) var(--space-3); border:2px solid var(--border-input); border-radius:var(--radius-md); cursor:pointer; font-weight:var(--fw-semibold); font-size:var(--text-sm); list-style:none; }
.menu__btn::-webkit-details-marker { display:none; }
.menu__bars { display:grid; gap:3px; }
.menu__bars i { display:block; width:18px; height:2px; background:var(--fg); border-radius:1px; }
.menu[open] .menu__btn { border-color:var(--border-brand); color:var(--fg-brand); }
.menu[open] .menu__bars i { background:var(--fg-brand); }
.menu__panel { position:absolute; right:0; top:calc(100% + var(--space-3)); width:min(17rem, calc(100vw - var(--space-8))); display:flex; flex-direction:column; gap:var(--space-1); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:var(--space-3); z-index:var(--z-dropdown); }
.menu__link { display:flex; align-items:center; min-height:var(--touch-min); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--fg); font-weight:var(--fw-semibold); font-size:var(--text-sm); }
.menu__link:hover { background:var(--bg-subtle); color:var(--fg-brand); }
/* Por debajo de 22rem (352px) el logo y «☰ Menú» se disputan el ancho.
   Se cae la palabra y queda el icono: el nombre accesible ya lo da el
   aria-label del summary, así que no se pierde nada. */
@media (max-width:22rem){ .menu__word { display:none; } }
/* Por defecto: móvil y tablet muestran el desplegable */
.nav__desktop, .nav__cta { display:none; }
@media (min-width:64rem){
  .nav__desktop { display:block; }
  .nav__cta { display:inline-flex; }
  .menu { display:none; }
}
.hero { background:var(--surface); border-bottom:1px solid var(--border); overflow:hidden; }
.hero__grid { display:grid; gap:var(--space-10); align-items:center; padding-block:var(--section-y); }
@media (min-width:64rem){
  .hero__grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--space-16);
               padding-block:clamp(4rem, 2rem + 6vw, 8rem); }
}
/* Sin imagen de portada el hero se queda con un solo hijo y la mitad derecha
   queda vacía, con el texto apretado a la izquierda. Que ocupe todo el ancho. */
.hero__grid > :only-child { grid-column:1 / -1; max-width:var(--container-prose); }
/* Filete rojo del logo antes del rótulo: ancla la marca en el primer
   elemento que se lee, sin recurrir a otro logo. */
.hero__eyebrow { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--fg-brand); margin:0 0 var(--space-5); }
.hero__eyebrow::before { content:""; width:2.5rem; height:2px; background:var(--logo-red); flex:0 0 auto; }
/* Escala de titular propia, por encima de --text-4xl: el hero es el único
   sitio del sitio donde la tipografía puede —y debe— imponerse. */
.hero__t { font-size:clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem); line-height:1.04; letter-spacing:-0.03em; margin-bottom:var(--space-6); text-wrap:balance; }
.hero__sub { font-size:var(--text-lg); color:var(--fg-muted); max-width:36ch; line-height:var(--leading-normal); }
.hero__media { position:relative; }
.hero__media img { border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 35%; }
/* La foto es la protagonista de la portada: en escritorio se sale del
   contenedor y llega hasta el borde real de la ventana, y se recorta a una
   altura fija para que no empuje el titular hacia abajo.
   El margen negativo NO puede ser calc(50% - 50vw): el porcentaje se resuelve
   contra el ancho de la columna, no del contenedor, y la foto se iba 300px
   fuera de la pantalla. Se calcula la distancia real del borde del contenedor
   al de la ventana: el medio sobrante más el gutter. */
@media (min-width:64rem){
  .hero__media { margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2))); }
  .hero__media img { border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); aspect-ratio:auto; height:clamp(28rem,38vw,36rem); }
}
/* Entradilla de sección: antes iba como estilo suelto en cada plantilla. */
.sec__lead { font-size:var(--text-lg); color:var(--fg-muted); max-width:56ch; margin-bottom:0; }
/* Tarjetas con cuerpo: más relleno, texto a tamaño de lectura y un número
   de índice que las ordena de un vistazo. El borde de 1px se cambia por
   sombra — un borde gris alrededor de todo es la firma del template barato. */
.ruta { display:flex; flex-direction:column; height:100%; text-decoration:none;
        padding:var(--space-8); border-color:transparent; box-shadow:var(--shadow-md); }
.ruta:hover { box-shadow:var(--shadow-xl); }
.ruta__n { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--fw-bold);
           line-height:1; letter-spacing:var(--tracking-tight); color:var(--blue-200);
           margin-bottom:var(--space-5); }
.ruta__q { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--fg); margin:0 0 var(--space-3); line-height:var(--leading-snug); }
.ruta__d { color:var(--fg-muted); font-size:var(--text-base); line-height:var(--leading-normal); flex:1; margin-bottom:var(--space-5); }
.ruta__go { font-weight:var(--fw-semibold); color:var(--fg-brand); font-size:var(--text-sm); }
a.card:hover .ruta__go { text-decoration:underline; }
.dosis { display:grid; gap:var(--space-8); }
@media (min-width:64rem){ .dosis{ grid-template-columns:1fr 1fr; align-items:center; } }
.fx { display:flex; flex-wrap:wrap; gap:5px; margin:var(--space-3) 0 var(--space-2); }
.fx i { width:16px; height:16px; border-radius:3px; display:block; }
.fx--sbrt i { background:var(--blue-500); }
.fx--conv i { background:var(--n-300); }
.fx-lab { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.fx-note { font-size:var(--text-sm); color:var(--fg-muted); margin:0 0 var(--space-6); }
/* Una sola columna por defecto y dos SOLO cuando hay imagen: al revés, una
   sección sin foto dejaba media pantalla en blanco. */
.ev { display:grid; gap:var(--space-8); align-items:start; }
@media (min-width:64rem){ .ev--con-imagen{ grid-template-columns:.9fr 1.1fr; } }
.ev img { border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.ev__nums { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-block:var(--space-6); max-width:var(--measure); }
.ev__n { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); }
.ev__n b { display:block; font-family:var(--font-display); font-size:var(--text-2xl); color:var(--fg-brand); line-height:1; }
.ev__n span { font-size:var(--text-xs); color:var(--fg-muted); }
.bio { display:grid; gap:var(--space-10); align-items:start; }
@media (min-width:64rem){ .bio--con-foto{ grid-template-columns:.8fr 1.2fr; gap:var(--space-16);} }
.bio__foto img { border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:3/4; object-fit:cover; }
.bio__sede { display:flex; gap:var(--space-4); align-items:center; margin-top:var(--space-5); padding:var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.bio__sede img { width:76px; height:56px; object-fit:cover; border-radius:var(--radius-sm); flex:0 0 auto; }
.bio__sede p { margin:0; font-size:var(--text-xs); color:var(--fg-muted); }
.bio__sede b { display:block; font-size:var(--text-sm); color:var(--fg); }
/* Los medios se reconocen por su logo, no por su nombre escrito. Van en
   escala de grises para que seis marcas distintas no compitan entre sí ni
   con la paleta del sitio, y recuperan color al pasar el ratón. El nombre en
   texto queda como respaldo del espacio que aún no tiene logo.
   Dos filas de tres, no una sola fila: en fila los logos se quedan con un
   sexto del ancho y ninguno llega a leerse. */
.medios { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8);
          align-items:center; justify-items:center; list-style:none;
          margin:var(--space-8) 0 0; padding:0; }
@media (min-width:48rem){ .medios{ grid-template-columns:repeat(3,1fr); gap:var(--space-12) var(--space-10); } }
.medio__i { display:flex; align-items:center; justify-content:center; width:100%; }
.medio__enlace { display:flex; align-items:center; justify-content:center;
                 width:100%; min-height:var(--touch-min); border-radius:var(--radius-md); }
.medio__enlace:focus-visible { outline:3px solid var(--border-focus); outline-offset:4px; }
/* Caja fija con object-fit:contain, no max-height. Con max-height el logo
   nunca crece más allá del tamaño del archivo subido, y los logos de prensa
   suelen venir pequeños: por eso se veían diminutos. Así todos ocupan la
   misma caja y quedan ópticamente al mismo tamaño, sin deformarse. */
.medio__logo { width:100%; max-width:20rem; height:7.5rem; object-fit:contain; object-position:center;
               filter:grayscale(1); opacity:.75;
               transition:filter var(--duration-normal) var(--ease-default),
                          opacity var(--duration-normal) var(--ease-default); }
.medio__logo:hover { filter:none; opacity:1; }
.medio { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--fg-subtle); letter-spacing:var(--tracking-wide); text-align:center; }
@media (prefers-reduced-motion: reduce){ .medio__logo { transition:none; } }
/* text-decoration:none va en el propio <a>: la decoración de un ancestro se
   propaga a los descendientes y estos NO pueden cancelarla. Sin esto, todo el
   texto de la tarjeta sale subrayado. */
.post { text-decoration:none; }
.post img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); margin-bottom:var(--space-4); }
.post h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
/* Degradado y halo en vez de un rectángulo azul plano: es el bloque de
   captación más importante de la portada y tenía el mismo peso visual que
   un aviso cualquiera. */
.test { position:relative; overflow:hidden; color:var(--fg-on-brand);
        background:linear-gradient(135deg, var(--blue-700) 0%, var(--blue-950) 100%);
        border-radius:var(--radius-2xl); padding:clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--gutter); text-align:center; }
.test::before { content:""; position:absolute; left:-10%; bottom:-45%; width:60%; aspect-ratio:1;
                border-radius:50%; pointer-events:none;
                background:radial-gradient(circle, rgb(84 129 204 / .45), transparent 70%); }
.test > * { position:relative; }
.test h2 { color:var(--fg-on-brand); text-wrap:balance; }
.test p { color:var(--blue-100); max-width:52ch; margin-inline:auto; }
.contacto { display:grid; gap:var(--space-8); }
@media (min-width:48rem){ .contacto{ grid-template-columns:repeat(3,1fr); } }
.contacto h3 { font-family:var(--font-sans); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--fg-brand); margin-bottom:var(--space-3); }
.contacto p { margin-bottom:var(--space-2); font-size:var(--text-sm); }
.aseg { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-10); }
.aseg span { font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--fg-muted); border:1px solid var(--border); border-radius:var(--radius-full); padding:var(--space-2) var(--space-5); background:var(--surface); }
/* Redes sociales */
  color:var(--blue-200) !important; margin-bottom:var(--space-3); }
  min-width:var(--touch-min); min-height:var(--touch-min); padding:0 var(--space-4);
  border:1px solid var(--blue-400); border-radius:var(--radius-full);
  color:var(--blue-100); text-decoration:none; font-size:var(--text-sm); font-weight:var(--fw-semibold);
  transition:background-color var(--duration-normal) var(--ease-default),
             border-color var(--duration-normal) var(--ease-default),
             color var(--duration-normal) var(--ease-default); }
/* Bajo 30rem sólo el icono, para que las tres quepan en una fila */
@media (max-width:30rem){
    clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}

body { padding-bottom:56px; }
@media (min-width:48rem){ body { padding-bottom:0; } }

/* ═══ desde articulo.html ═══ */
/* ── Compartido con la home: marca, menú, pie, redes ── */
.marca { display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
:root[data-theme="dark"] .marca__logo { background:var(--n-50); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); }
.menu { position:relative; }
.nav__desktop, .nav__cta { display:none; }
@media (min-width:64rem){ .nav__desktop{display:block;} .nav__cta{display:inline-flex;} .menu{display:none;} }
body { padding-bottom:56px; }
@media (min-width:48rem){ body{padding-bottom:0;} }
/* ── Propio del artículo ── */
.art { padding-block: var(--section-y-tight); }
.art__portada { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); margin-block:var(--space-8); }
.art__cuerpo { max-width:var(--container-prose); }

/* ═══ desde tratamiento.html ═══ */
/* ── Compartido con la home y el artículo: marca, menú, pie, redes ── */
.marca { display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
/* ── Propio de la página de tratamiento ── */
.tr-hero { background:var(--surface); border-bottom:1px solid var(--border); }
.tr-hero__grid { display:grid; gap:var(--space-10); align-items:center; padding-block:var(--section-y-tight); }
@media (min-width:64rem){ .tr-hero__grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-16);} }
.tr-hero h1 { font-size:var(--text-4xl); margin-bottom:var(--space-5); }
.tr-hero__sub { font-size:var(--text-lg); color:var(--fg-muted); max-width:36ch; }
.tr-hero__media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }