/* =============================================================================
   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:1.05fr .95fr; gap:var(--space-16);} }
.hero__eyebrow { 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-4); }
.hero h1 { font-size:var(--text-4xl); margin-bottom:var(--space-5); }
.hero__sub { font-size:var(--text-lg); color:var(--fg-muted); max-width:34ch; }
.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 30%; }
.hero__tag { position:absolute; left:calc(-1 * var(--space-4)); bottom:var(--space-8); background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--blue-500); border-radius:var(--radius-md); padding:var(--space-3) var(--space-5); box-shadow:var(--shadow-lg); max-width:15rem; }
.hero__tag b { display:block; font-size:var(--text-sm); }
.hero__tag span { font-size:var(--text-xs); color:var(--fg-muted); }
.trust { background:var(--bg-subtle); border-bottom:1px solid var(--border); padding-block:var(--space-6); }
.trust__list { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-8); align-items:center; justify-content:center; list-style:none; margin:0; padding:0; }
.trust__item { font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--fg-muted); letter-spacing:var(--tracking-wide); }
.trust__lead { text-align:center; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--fg-subtle); margin:0 0 var(--space-4); }
.ruta { display:flex; flex-direction:column; height:100%; text-decoration:none; }
.ruta__q { font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; color:var(--fg); margin:0 0 var(--space-3); }
.ruta__d { color:var(--fg-muted); font-size:var(--text-sm); flex:1; margin-bottom:var(--space-4); }
.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); }
.ev { display:grid; gap:var(--space-8); align-items:start; }
@media (min-width:64rem){ .ev{ 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{ 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); }
.medios { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }
.medio { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--fg-muted); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-6); }
.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); }
.test { background:var(--bg-brand); color:var(--fg-on-brand); border-radius:var(--radius-2xl); padding:var(--space-12) var(--gutter); text-align:center; }
.test h2 { color:var(--fg-on-brand); }
.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); }