/* A&L Integral Medic — Sistema de diseño "Premium Black & Gold".
   Mobile-first, sin dependencias externas ni JavaScript. Todo color sale de los tokens de :root.
   Contrastes medidos con fórmula WCAG 2.x (2026-11-04), todos cumplen AA:
   --text/--bg 18,4:1 · --text-muted/--elevated 7,9:1 · --gold/--elevated 6,6:1 · --on-gold/--gold 8,4:1 ·
   --pending-text/--pending-surface 12,4:1 · --error/--error-surface 8,5:1 · --field-border/--surface 4,2:1 (mín. 3:1).
   --bronze (≈4,6:1 sobre --bg) es SOLO decorativo: no usar como texto.
   Texto mínimo: 0,875 rem (14 px). Botones: un nombre por variante (.btn-primary, .btn-secondary, .btn-link). */

/* ---------- Tipografías autohospedadas (SIL OFL 1.1, ver wwwroot/fonts/OFL-*.txt) ---------- */
@font-face {
    font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
    src: url("/fonts/cormorant-garamond-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    size-adjust: 108%;
}
@font-face {
    font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
    src: url("/fonts/cormorant-garamond-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    size-adjust: 108%;
}
@font-face {
    font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("/fonts/hanken-grotesk.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
    color-scheme: dark;

    /* Superficies */
    --bg: #0b0b0d;          /* negro principal */
    --surface: #171719;     /* carbón */
    --elevated: #242427;    /* grafito: superficie elevada */
    --border: #363638;      /* bordes decorativos (tarjetas, separadores) */
    --field-border: #7a7a7f; /* borde de controles de formulario: ≥3:1 sobre --bg y --surface (WCAG 1.4.11) */

    /* Dorados */
    --gold: #c9a45c;        /* oro: acento principal */
    --gold-bright: #e5c77a; /* oro claro: hover y foco */
    --bronze: #98743a;      /* bronce: solo decorativo */

    /* Texto */
    --text: #f8f7f4;        /* blanco cálido */
    --text-muted: #b9b9bd;  /* gris plata */
    --on-gold: #0b0b0d;     /* texto sobre fondo dorado */

    /* Estados (derivados de la paleta; no usar colores sueltos en componentes) */
    --error: #ff9e94;
    --error-surface: #2b1816;
    --pending-surface: #2a2414;
    --pending-text: #f3e6bf;

    /* Forma, ritmo y movimiento */
    --radius: 4px;
    --space-0: 0.25rem;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --header-h: 4.5rem;
    --ease: 180ms ease;
    --wabar-h: 4.5rem;      /* alto de la barra fija inferior en móvil: botón 3 rem + relleno 1,2 rem + borde (sin safe-area) */
    --shadow-pop: 0 1rem 2.5rem rgb(0 0 0 / 0.45);   /* paneles flotantes */
    --border-gold: rgb(201 164 92 / 0.35);           /* --gold atenuado para bordes finos */
    --shade: rgb(11 11 13 / 0.88);                   /* capa oscura sobre imágenes (hero móvil, notas) */

    --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; scroll-padding-bottom: calc(var(--wabar-h) + var(--space-2)); }

body {
    margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
    color: var(--text); background: var(--bg);
}

img, svg { max-width: 100%; height: auto; }
.icon { width: 1.5rem; height: 1.5rem; flex: none; display: inline-block; vertical-align: middle; }

/* El espaciado vertical entre bloques lo da el contenedor (.stack), no el margen superior de cada h2. */
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.75rem; letter-spacing: -0.01em; color: var(--text); }
h1, h2 { font-family: var(--font-display); font-weight: 500; }
h1 { font-size: clamp(2.2rem, 6.5vw, 3.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.35rem); }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 var(--space-2); }

a { color: var(--gold); text-underline-offset: 0.15em; transition: color var(--ease); }
a:hover { color: var(--gold-bright); }

:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

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

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

.skip-link {
    position: absolute; left: var(--space-2); top: -4rem; z-index: 100;
    background: var(--gold); color: var(--on-gold); padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

.banner-borrador {
    background: var(--pending-surface); color: var(--pending-text);
    text-align: center; font-size: 0.875rem; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--bronze);
}

/* ---------- Barra de utilidades (solo escritorio) ---------- */
.utility-bar { display: none; }
@media (min-width: 64rem) {
    .utility-bar { display: block; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.875rem; }
    .utility-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 2.5rem; }
    .util-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; color: var(--text-muted); text-decoration: none; }
    .util-link:hover { color: var(--gold); }
    .util-link .icon { width: 1.1rem; height: 1.1rem; color: var(--gold); }
    .util-strong { color: var(--text); font-weight: 600; }
    .util-sep { color: var(--bronze); }
    .util-right { margin-left: auto; }
}

/* ---------- Header y navegación (sin JavaScript) ---------- */
.site-header { background: var(--bg); color: var(--text); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); padding-block: var(--space-1); }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text); text-decoration: none; border-radius: var(--radius); }
.brand-emblem { display: block; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.brand-copy { display: grid; line-height: 1; letter-spacing: 0.04em; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; color: var(--gold); }
.brand-copy span { margin-top: var(--space-0); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); }

.main-nav { display: block; position: relative; }
.nav-shell { display: block; }
.nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; padding: 0 var(--space-2);
    border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold); cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}
.nav-toggle { list-style: none; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover { background: var(--gold); color: var(--on-gold); }

.nav-list {
    display: none; flex-direction: column; flex-basis: 100%;
    list-style: none; margin: 0; padding: var(--space-1) 0 0.75rem;
}
/* Menú abierto en móvil: scroll propio para que todo sea alcanzable en pantallas bajas.
   Mientras está abierto se oculta la barra fija inferior (ver "Barra fija"), así no tapa el foco del último ítem;
   el descuento de --wabar-h deja además margen para el banner de borrador que empuja el header hacia abajo.
   scroll-padding evita que el ítem enfocado quede pegado al borde del panel. */
.nav-shell[open] ~ .nav-list {
    position: absolute; right: 0; top: calc(100% + var(--space-1)); width: min(28rem, calc(100vw - 2rem));
    display: flex; max-height: calc(100dvh - var(--header-h) - var(--wabar-h)); overflow-y: auto; scroll-padding-block: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2); background: var(--surface);
    border: 1px solid var(--border); border-top-color: var(--gold); box-shadow: var(--shadow-pop);
}

.nav-list > li > a, .atencion > summary {
    display: flex; align-items: center; min-height: 3rem; padding: 0.75rem var(--space-0); color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--border); cursor: pointer; transition: color var(--ease);
}
.nav-list > li > a:hover, .atencion > summary:hover { color: var(--gold); }
.atencion > summary.active { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
/* La página activa no depende solo del color: además va subrayada */
.nav-list > li > a.active { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
/* "Pedir turno" del menú: botón secundario (el primario dorado queda para la acción principal de cada página) */
.nav-list > li > a.nav-cta {
    border: 1px solid var(--gold); color: var(--gold); border-radius: var(--radius); text-align: center; justify-content: center;
    margin-top: 0.75rem; font-weight: 600; text-decoration: none;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.nav-list > li > a.nav-cta:hover { background: var(--elevated); color: var(--gold-bright); border-color: var(--gold-bright); }
.nav-list > li > a.nav-wa { color: var(--gold); }
.nav-list > li > a.nav-cta.active { text-decoration: none; }

/* Panel "Atención": <details>/<summary> nativo.
   LIMITACIÓN (sin JavaScript): no se cierra con Esc ni con clic fuera; solo con su botón. El atributo name
   hace que abrir un panel cierre el otro. Si se exige Esc/clic fuera (WCAG 2.1.1 no lo exige para esto), habría que sumar JS. */
.atencion > summary { list-style: none; }
.atencion > summary::-webkit-details-marker { display: none; }
/* Flecha dibujada con bordes (sin texto): gira al abrir */
.atencion > summary::after {
    content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-left: 0.6rem; vertical-align: 0.1em;
    border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg); transition: transform var(--ease);
}
.atencion[open] > summary::after { transform: rotate(-135deg); vertical-align: -0.05em; }
/* En móvil cada grupo funciona como acordeón, con sangría y línea de bronce */
.atencion-panel { display: grid; gap: var(--space-3); margin-left: var(--space-0); padding: 0.75rem var(--space-0) var(--space-2) 0.85rem; border-left: 1px solid var(--bronze); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.atencion[open] > .atencion-panel { animation: panel-in 170ms ease both; }
.panel-title { font-family: var(--font); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 0 0 var(--space-1); padding-bottom: 0.6rem; border-bottom: 1px solid var(--bronze); }
.panel-area { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin: 0 0 0.2rem; }
.panel-list { list-style: none; margin: 0; padding: 0; }
.panel-list a, .panel-all { display: flex; align-items: center; min-height: 2.75rem; padding: 0.4rem var(--space-1); margin-inline: calc(var(--space-1) * -1); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: background-color var(--ease), color var(--ease); }
.panel-list a:hover, .panel-all:hover { color: var(--gold-bright); background: var(--elevated); }
.panel-list a[aria-current="page"] { color: var(--gold); border-left: 2px solid var(--bronze); padding-left: 0.5rem; }
.panel-all { color: var(--gold); font-weight: 600; }
.panel-group { break-inside: avoid; margin-bottom: 1.1rem; }

@media (min-width: 64rem) {
    .brand-emblem { width: 4rem; height: 4rem; }
    .header-inner { flex-wrap: nowrap; }
    .brand { flex-shrink: 0; }
    .main-nav { display: flex; flex: 1; justify-content: flex-end; position: static; }
    .nav-shell { display: none; }
    .nav-list, .nav-shell[open] ~ .nav-list {
        position: static; width: auto; display: flex; flex-direction: row; flex-wrap: nowrap; flex-basis: auto; align-items: center;
        gap: 0.15rem; padding: 0; max-height: none; overflow: visible; background: transparent; border: 0; box-shadow: none;
    }
    .nav-list > li > a, .atencion > summary {
        display: block; min-height: 0; border: 0; padding: var(--space-1) 0.75rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap;
        text-transform: uppercase; letter-spacing: 0.1em;
    }
    .nav-mobile-only { display: none; }
    /* El WhatsApp ya está en la barra de utilidades */
    .nav-list > li:has(> .nav-wa) { display: none; }
    .nav-list > li > a.nav-cta { margin: 0 0 0 var(--space-1); padding: 0.55rem var(--space-2); border: 1px solid var(--gold); }
    .atencion-panel {
        position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
        background: var(--surface); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--border);
        padding: var(--space-3) max(1rem, calc((100vw - 72rem) / 2 + 1rem)) var(--space-4);
        grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-4); max-height: calc(100dvh - 9.5rem); overflow-y: auto;
        margin-left: 0; border-left: 0; box-shadow: var(--shadow-pop);
    }
    /* Paneles chicos (Pacientes, Nosotros): se despliegan bajo su propio botón, no a todo el ancho */
    .has-panel-compact { position: relative; }
    .has-panel-compact .atencion-panel {
        left: 0; right: auto; top: calc(100% + 0.9rem); width: 17rem; padding: var(--space-2) var(--space-3);
        grid-template-columns: 1fr; gap: 0; max-height: none; overflow: visible;
        border: 1px solid var(--border); border-top-color: var(--gold); border-radius: 0 0 var(--radius) var(--radius);
    }
    .panel-areas { columns: 2; column-gap: 2rem; }
    .panel-list a { min-height: 2.25rem; }
}

/* 320 px: la marca conserva el tamaño mínimo de texto (0,8 rem); si no entra junto al botón, el botón baja a la línea siguiente. */
@media (max-width: 24rem) {
    .header-inner { gap: var(--space-1); }
    .brand { gap: var(--space-1); }
    .brand-emblem { width: 2.75rem; height: 2.75rem; }
    .brand-copy strong { font-size: 1.15rem; }
    .brand-copy span { letter-spacing: 0.04em; }
    .nav-toggle { padding-inline: 0.75rem; }
}

/* ---------- Secciones ---------- */
main { display: block; }
main:focus { outline: none; }
.section { padding-block: var(--space-4); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { margin-bottom: var(--space-3); }
/* Ritmo: la cabecera de sección queda más cerca de su contenido que de la sección anterior (el espacio ya lo da .section-head). */
.section-head + .card-grid { margin-top: 0; }
@media (min-width: 52rem) {
    .section { padding-block: var(--space-5); }
}
.section-tight { padding-block: var(--space-4); }   /* accesos rápidos: conservan el ritmo compacto */

.eyebrow { font-family: var(--font); letter-spacing: 0.02em; font-size: 0.9375rem; font-weight: 600; color: var(--gold); margin-bottom: var(--space-1); }
.lead { font-size: 1.2rem; color: var(--text-muted); max-width: 46rem; }
/* Nota breve y discreta (aclaraciones al pie de una sección o columna) */
.note { color: var(--text-muted); font-size: 0.9rem; }

/* Cabecera de páginas internas */
.page-header {
    position: relative; overflow: hidden; background: linear-gradient(115deg, var(--surface), var(--bg) 72%);
    border-bottom: 1px solid var(--bronze); padding-block: var(--space-5) var(--space-4);
}
.page-header::after {
    content: ""; position: absolute; right: -8rem; top: -12rem; width: 28rem; height: 28rem;
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: 50%; pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { margin-bottom: var(--space-1); }
.page-header .lead { margin-bottom: 0; }

/* Migas de pan */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-1); margin: 0 0 var(--space-2); padding: 0; font-size: 0.9rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); color: var(--bronze); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* ---------- Hero ---------- */
/* Móvil: la altura la da el contenido (sin hueco vacío); desde 52 rem se fija un mínimo. */
.hero { position: relative; overflow: hidden; min-height: auto; background: var(--bg); padding-block: var(--space-4); border-bottom: 1px solid var(--bronze); }
.hero-media { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center; animation: hero-breathe 12s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,13,.98) 0%, rgba(11,11,13,.88) 42%, rgba(11,11,13,.34) 78%, rgba(11,11,13,.2) 100%); }
.hero-vitals { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0.82; }
.hero-vitals svg { display: block; width: 100%; height: 100%; }
.hero-ribbon-set { transform-box: fill-box; transform-origin: center; }
.hero-ribbon-base, .hero-ribbon-light { fill: none; stroke: inherit; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: screen; }
.hero-ribbon-base { opacity: 0.15; filter: blur(4px); }
.hero-ribbon-light { stroke-width: 3; stroke-dasharray: 0.14 0.86; opacity: 0.72; animation: hero-ribbon-light 5.5s linear infinite; }
.hero-ribbon-wide { stroke-width: 34; }
.hero-ribbon-extra-wide { stroke-width: 52; }
.hero-ribbon-medium { stroke-width: 24; }
.hero-ribbon-thin { stroke-width: 14; }
.hero-ribbon-top { animation: hero-ribbon-sway-a 7s ease-in-out infinite alternate; }
.hero-ribbon-center { animation: hero-ribbon-sway-b 6s ease-in-out infinite alternate; }
.hero-ribbon-right { animation: hero-ribbon-sway-a 8.5s ease-in-out -2s infinite alternate-reverse; }
.hero-ribbon-lower { animation: hero-ribbon-sway-b 9s ease-in-out -4s infinite alternate-reverse; }
.hero-orbit { fill: none; stroke: rgba(216, 184, 122, 0.2); stroke-width: 1.5; stroke-dasharray: 9 13; animation: hero-orbit-flow 18s linear infinite; }
.hero-orbit-2 { animation-duration: 14s; animation-direction: reverse; }
.hero-orbit-3 { animation-duration: 21s; opacity: 0.65; }
.hero-orbit-dot { fill: var(--gold-bright); filter: drop-shadow(0 0 7px rgba(216, 184, 122, 0.95)); }
.hero-orbit-dot-soft { opacity: 0.7; }
.hero-heartbeat { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.18 0.82; animation: hero-heartbeat-run 3.8s linear infinite; }
.hero-heartbeat-base { stroke: rgba(216, 184, 122, 0.42); stroke-width: 1.5; stroke-dasharray: none; animation: none; }
.hero-heartbeat-line { stroke: rgba(231, 204, 151, 0.95); stroke-width: 2.25; }
.hero-heartbeat-glow { stroke: rgba(216, 184, 122, 0.5); stroke-width: 11; filter: blur(7px); }
.hero-heartbeat-track { transform-box: fill-box; transform-origin: center; animation: hero-heartbeat-breathe 1.9s ease-in-out infinite; }
.hero-vital-points circle { fill: var(--gold-bright); opacity: 0.85; transform-box: fill-box; transform-origin: center; animation: hero-vital-pulse 1.9s ease-out infinite; }
.hero-vital-points circle:nth-child(2) { animation-delay: 0.6s; }
.hero-vital-points circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes hero-breathe { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.035) translate3d(-0.6%, 0.5%, 0); } }
@keyframes hero-heartbeat-run { to { stroke-dashoffset: -1; } }
/* --pulse-dy: desplazamiento vertical de la línea de pulso (unidades del SVG); se define según el ancho más abajo. */
@keyframes hero-heartbeat-breathe { 0%, 38%, 100% { transform: translateY(var(--pulse-dy, 0px)) scaleY(0.98); } 8% { transform: translateY(var(--pulse-dy, 0px)) scaleY(1.045); } 16% { transform: translateY(var(--pulse-dy, 0px)) scaleY(1); } }
@keyframes hero-ribbon-light { to { stroke-dashoffset: -1; } }
@keyframes hero-ribbon-sway-a { from { transform: translate3d(-3px, 2px, 0) rotate(-0.18deg); } to { transform: translate3d(6px, -4px, 0) rotate(0.28deg); } }
@keyframes hero-ribbon-sway-b { from { transform: translate3d(4px, -2px, 0) rotate(0.15deg); } to { transform: translate3d(-5px, 5px, 0) rotate(-0.25deg); } }
@keyframes hero-orbit-flow { to { stroke-dashoffset: -220; } }
@keyframes hero-vital-pulse { 0%, 45%, 100% { transform: scale(0.75); opacity: 0.35; } 12% { transform: scale(2.25); opacity: 1; } }
/* Móvil y tablet: se mantiene el fondo animado y se refuerza el contraste del texto. */
@media (max-width: 63.999rem) {
    /* El texto va arriba y los pulsos en una franja propia debajo: la línea nunca cruza el texto. */
    .hero { min-height: auto; padding-bottom: 12rem; }
    .hero-media, .hero-shade, .hero-vitals { display: block; }
    .hero-shade {
        background: linear-gradient(180deg, rgba(11,11,13,.9) 0%, rgba(11,11,13,.8) 58%, rgba(11,11,13,.62) 100%);
    }
    .hero-vitals { inset: auto 0 0 0; height: 11rem; opacity: 0.62; }
}
/* Cuadrícula fina decorativa (sin imágenes): da profundidad al hero y se desvanece hacia la izquierda */
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 4rem 4rem;
    -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%);
}
.hero-inner { position: relative; z-index: 2; display: grid; gap: var(--space-4); align-items: center; }
.hero h1 { max-width: 18ch; }
.hero-frase { font-size: clamp(1.15rem, 3vw, 1.45rem); color: var(--gold); margin-bottom: var(--space-1); }
.hero-sub { color: var(--text-muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.hero-copy, .hero-panel { animation: rise 0.6s ease both; }
.hero-panel { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 52rem) {
    /* Tablet: sin imagen (<64rem) el hero se ajusta al contenido; alto mínimo y 2 columnas solo desde 64rem. */
    .hero { padding-top: var(--space-5); } /* el padding inferior lo fija el bloque móvil/tablet (franja de pulsos) */
    .hero-panel {
        display: block; background: rgba(23, 23, 25, 0.94); padding: var(--space-3) 1.75rem 1.75rem; border-radius: var(--radius);
        border: 1px solid var(--border); border-top: 2px solid var(--gold); animation-delay: 0.1s;
    }
    .hero-panel h2 { font-size: 1.85rem; font-weight: 600; }
    .hero-panel .form { margin-block: var(--space-2) 0; }
}
@media (min-width: 64rem) {
    /* Escritorio: el texto sube (arriba, no centrado) y SOLO la línea de pulso baja (translate en unidades del SVG,
       sin recortar los listones animados) para pasar por debajo de los botones. Más abajo en pantallas angostas,
       donde el texto ocupa más alto. */
    .hero { min-height: 40rem; padding-block: 4.5rem var(--space-6); }
    .hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: start; }
    .hero-vitals { --pulse-dy: 260px; }
    .hero-vital-points { transform: translateY(var(--pulse-dy)); }
}

@media (min-width: 80rem) {
    .hero-vitals { --pulse-dy: 180px; }
}

/* ---------- Botones ----------
   Una sola clase por variante:
   .btn-primary   oro con texto oscuro: UNA por pantalla (la acción principal)
   .btn-secondary transparente con borde oro: el resto de acciones
   .btn-link      terciario, aspecto de enlace (acciones de apoyo, p. ej. "Escribinos por WhatsApp") */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    min-height: 2.75rem; padding: 0.6rem 1.25rem; border-radius: var(--radius);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-bright); color: var(--on-gold); }
.btn-secondary { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-secondary:hover { background: var(--elevated); color: var(--gold-bright); border-color: var(--gold-bright); }
.btn-link { background: transparent; color: var(--text); padding-inline: var(--space-0); text-decoration: underline; text-underline-offset: 0.3em; }
.btn-link:hover { color: var(--gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Tarjetas ---------- */
.card-grid { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card-grid > li { display: flex; }
.card-grid > li > .card { flex: 1; }
.card {
    display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); text-decoration: none;
    transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}
.card:hover { border-color: var(--gold); background: var(--elevated); color: var(--text); }
.section-alt .card { background: var(--bg); }
.section-alt .card:hover { background: var(--elevated); }
.card-arrow { margin-left: auto; color: var(--gold); transition: transform var(--ease); }
.card:hover .card-arrow { transform: translateX(3px); }

/* Tarjeta con imagen (especialidad, unidad, modalidad): recurso visual, contexto, título y enlace */
.card-grid-media { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
/* Grupos de 4 (modalidades, unidades): dos columnas anchas en vez de 3 + 1 */
.card-grid-wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
    .card-grid-media { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
}
@media (min-width: 52rem) {
    .card-grid-wide { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
}
.media-card { position: relative; flex-direction: column; overflow: hidden; }
.card-media-frame { position: relative; display: block; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--border); }
.card-media-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; pointer-events: none; background: linear-gradient(transparent, rgba(11,11,13,.38)); }
.card-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg); filter: saturate(.88) contrast(1.03); transition: filter 420ms ease; }
.media-card:hover .card-media { filter: saturate(1) contrast(1.04); }
.media-note { position: absolute; z-index: 1; top: 0.75rem; right: 0.75rem; padding: var(--space-0) 0.55rem; background: var(--shade); border: 1px solid rgba(201,164,92,.65); color: var(--text); font-size: 0.875rem; letter-spacing: 0.04em; backdrop-filter: blur(6px); }
.media-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.25rem 1.1rem; flex: 1; }
.card-eyebrow { margin: 0; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--text-muted); }
.card-title-lg { margin: 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.15; }
.card-text { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.card-more { margin-top: auto; align-self: flex-end; padding-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold); font-weight: 600; font-size: 0.95rem; }
.card-more .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--ease); }
.media-card:hover .card-more .icon { transform: translateX(3px); }
.modalities-section .section-head-rule { margin-bottom: var(--space-0); }
.modality-card { border-color: var(--border-gold); }
.modality-card .card-title-lg { font-size: clamp(1.55rem, 2.2vw, 1.9rem); }
.modality-card .card-text { min-height: 0; }
@media (min-width: 40rem) {
    .modality-card .card-text { min-height: 3.1em; }
}
.card-icon { padding: 1.25rem 1.25rem 0; color: var(--gold); }
.card-icon .icon { width: 2rem; height: 2rem; }

/* Encabezado de sección con regla fina y enlace "Ver todas".
   Móvil: el enlace del encabezado se oculta y se muestra bajo la grilla (.more-mobile); desde 40 rem va a la derecha del título. */
.section-head-rule { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.head-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; white-space: nowrap; text-decoration: none; min-height: 2.75rem; }
.head-link .icon { width: 1.25rem; height: 1.25rem; }
.section-head-rule .head-link { display: none; }
.more-mobile { margin: 0; }
@media (min-width: 40rem) {
    .section-head-rule { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
    .section-head-rule .head-link { display: inline-flex; }
    .more-mobile { display: none; }
}

.contact-gold :focus-visible { outline-color: var(--on-gold); }

.institutional-split { display: grid; gap: var(--space-4); align-items: center; }
.institutional-emblem { width: min(22rem, 80vw); margin-inline: auto; border-radius: 50%; filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.35)); }
@media (min-width: 52rem) {
    .institutional-split { grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr); }
}

/* Banda de contacto a todo el ancho */
.contact-band { display: grid; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .contact-band { grid-template-columns: 1fr 1fr; } }
.contact-band.contact-band-solo { grid-template-columns: 1fr; }
.contact-block { padding: var(--space-4) var(--space-2); }
.contact-inner { max-width: 36rem; margin-inline: auto; }
@media (min-width: 52rem) {
    .contact-gold .contact-inner { margin-right: 0; margin-left: auto; padding-right: var(--space-4); }
    .contact-dark .contact-inner { margin-left: 0; margin-right: auto; padding-left: var(--space-4); }
    /* Solo el bloque oscuro (sin bloque dorado): se alinea con el contenedor del resto de la página. */
    .contact-band-solo .contact-dark .contact-inner { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); }
}
.contact-gold { background: var(--gold); color: var(--on-gold); }
.contact-gold h2 { color: var(--on-gold); }
.contact-gold a:not(.btn) { color: var(--on-gold); font-weight: 600; }
.contact-gold .contacto-lista .icon { color: var(--on-gold); }
/* Sobre fondo oro el botón secundario invierte los colores (borde y texto oscuros) */
.contact-gold .btn-secondary { color: var(--on-gold); border-color: var(--on-gold); }
.contact-gold .btn-secondary:hover { background: rgb(11 11 13 / 0.12); color: var(--on-gold); border-color: var(--on-gold); }
.contact-dark { background: var(--elevated); }

/* Profesional */
.pro-card { flex-direction: column; overflow: hidden; }
.pro-card .pro-photo { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--elevated); }
.pro-card .pro-body { padding: var(--space-2) 1.25rem 1.25rem; }
.pro-card h3 { margin: 0 0 var(--space-0); }
.pro-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Buscador y filtros (GET, sin JavaScript). La etiqueta es visible; el placeholder es solo una pista. */
.search { display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: 36rem; margin: var(--space-2) 0; }
.search label { flex: 0 0 100%; font-weight: 600; }
.search input[type="search"] {
    flex: 1 1 14rem; min-height: 2.9rem; padding: var(--space-1) 0.75rem; font: inherit;
    border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--bg); color: var(--text);
    transition: border-color var(--ease);
}
.search input[type="search"]:hover { border-color: var(--gold); }
.search input[type="search"]::placeholder { color: var(--text-muted); opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0.75rem 0 var(--space-2); padding: 0; }
.chips a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none;
    transition: border-color var(--ease), background-color var(--ease);
}
.chips a:hover { border-color: var(--gold); background: var(--elevated); }
.chips a[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Patrón único de vacío / pendiente / error ----------
   .placeholder-box        caja de línea punteada (estado vacío neutro; es lo que ve el público)
   .is-pending             variante de revisión (solo en modo borrador: la dibuja <Pendiente>/<FotoPendiente>)
   .is-note                versión en línea (una frase)   .is-media  espacio reservado de foto
   .placeholder-box-error  estado de error (línea continua)
   Fuera del modo borrador (SiteContent.EsBorrador = false) solo queda el vacío neutro, sin la palabra "pendiente". */
.placeholder-box { border: 1px dashed var(--bronze); border-radius: var(--radius); padding: var(--space-3); background: var(--surface); max-width: 46rem; }
.placeholder-box h2, .placeholder-box h3 { margin-top: 0; font-size: 1.4rem; }
.placeholder-box > :last-child { margin-bottom: 0; }
.placeholder-box.is-pending { background: var(--pending-surface); color: var(--pending-text); }
.placeholder-box.is-note { max-width: none; padding: 0.6rem 0.9rem; font-size: 0.95rem; margin-block: var(--space-1); }
.placeholder-box.is-media {
    margin: var(--space-2) 0; min-height: 12rem; display: grid; place-items: center; text-align: center; border-width: 2px;
}
.placeholder-box.is-media figcaption { max-width: 22rem; }
.placeholder-box-error { border-style: solid; border-color: var(--error); background: var(--error-surface); }

.link-more { font-weight: 600; }

/* ---------- Contenido ---------- */
/* .stack: separación vertical uniforme entre bloques hermanos; un h2 que sigue a otro bloque abre una sección nueva.
   Va después de los componentes de bloque para que su margen prevalezca. */
.stack > * { margin-block: 0; }
.stack > * + * { margin-top: var(--space-2); }
.stack > * + h2 { margin-top: var(--space-4); }

/* Rejilla de dos columnas desiguales (contenido principal + columna lateral) */
.split-grid { display: grid; gap: var(--space-4); }
@media (min-width: 52rem) { .split-grid { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); } }
.panel-accent { border-top: 3px solid var(--gold); }
.aside-rule { padding: var(--space-3); border-left: 1px solid var(--bronze); }

.two-col { display: grid; gap: var(--space-4); }
@media (min-width: 52rem) { .two-col { grid-template-columns: 1fr 1fr; } }
.mensaje {
    margin: var(--space-4) 0; padding: var(--space-3) 0; border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--border);
    font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem); font-style: italic; line-height: 1.35; color: var(--text);
}
.valores { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: var(--space-1) 2rem; }
@media (min-width: 40rem) { .valores { grid-template-columns: 1fr 1fr; } }
.valores li { display: flex; align-items: flex-start; gap: 0.6rem; }
.valores .icon { color: var(--gold); width: 1.25rem; height: 1.25rem; margin-top: var(--space-0); }
.panel-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.panel-box h2, .panel-box h3 { margin-top: 0; }
.servicio { display: grid; gap: var(--space-0) var(--space-2); grid-template-columns: auto 1fr; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.servicio > .icon { width: 2rem; height: 2rem; color: var(--gold); grid-row: span 3; margin-top: var(--space-0); }
.servicio h2 { margin: 0; font-size: 1.6rem; }
.servicio p { margin: 0 0 var(--space-1); }
.servicio:target { outline: 1px solid var(--gold); outline-offset: var(--space-1); }
/* Modalidad con foto (/servicios): imagen y texto; desde 52 rem van en dos columnas y la foto alterna de lado. */
.servicio-media { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.servicio-media .servicio-body > .icon { display: block; width: 2rem; height: 2rem; color: var(--gold); margin-bottom: var(--space-1); }
.servicio-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); filter: saturate(.88) contrast(1.03); }
@media (min-width: 52rem) {
    .servicio-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: center; padding-block: var(--space-4); }
    .servicio-media:nth-of-type(even) .servicio-img { order: 2; }
}
/* Cabecera de ficha con ilustración al costado (escritorio) */
.page-header-split { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 52rem) { .page-header-split { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-4); } }
.page-header-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.page-header-figure { margin: 0; }
.page-header-figure figcaption { margin-top: var(--space-1); color: var(--text-muted); font-size: 0.875rem; }
.contacto-lista { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.contacto-lista li { display: flex; align-items: flex-start; gap: 0.6rem; padding-block: 0.4rem; }
.contacto-lista .icon { color: var(--gold); width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; }
/* El contenedor conserva el ancho y la alineación del resto de la página; solo se limita el ancho de lectura de cada bloque */
.prose > * { max-width: 48rem; }
.prose ul { padding-left: 1.25rem; }
.marca-heredada { text-align: center; }
.marca-heredada img { display: block; margin-inline: auto; width: 14rem; height: 14rem; border-radius: 50%; }

/* ---------- Formularios ---------- */
.form { max-width: 30rem; margin-block: var(--space-3); }
.field { margin-bottom: 1.25rem; }
.field label, .fieldset legend { display: block; font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.fieldset { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
select {
    width: 100%; min-height: 2.9rem; padding: var(--space-1) 0.75rem; font: inherit;
    border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--bg); color: var(--text);
    transition: border-color var(--ease);
}
select:hover { border-color: var(--gold); }
select:focus-visible { border-color: var(--gold-bright); }
select.is-invalid { border-color: var(--error); }
.radio {
    display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; margin-bottom: 0.4rem;
    border: 1px solid var(--field-border); border-radius: var(--radius); cursor: pointer; font-weight: 400;
    transition: border-color var(--ease), background-color var(--ease);
}
.radio:hover { border-color: var(--gold); }
.radio:has(input:checked) { border-color: var(--gold); background: var(--elevated); }
.radio input { width: 1.25rem; height: 1.25rem; accent-color: var(--gold); flex: none; }
.field-error { color: var(--error); font-weight: 600; margin: 0 0 0.4rem; font-size: 0.95rem; }
.form-error { background: var(--error-surface); color: var(--error); border: 1px solid var(--error); border-radius: var(--radius); padding: 0.75rem var(--space-2); max-width: 30rem; margin-bottom: var(--space-2); }
.form-error ul { margin: 0; padding-left: 1.25rem; }
.form-error a { color: var(--error); }
.form-nota { font-size: 0.9rem; color: var(--text-muted); margin: 0.75rem 0 0; }
.aviso-privacidad { font-size: 0.95rem; color: var(--text-muted); max-width: 36rem; }
.pasos { padding-left: 1.25rem; }
.pasos li { margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); color: var(--text-muted); padding-top: var(--space-4); border-top: 1px solid var(--bronze); }
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: var(--gold-bright); }
.footer-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.footer-list .icon { width: 1.1rem; height: 1.1rem; color: var(--gold); margin-right: 0.35rem; }
.footer-brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.footer-emblem { width: 6rem; height: 6rem; border-radius: 50%; flex: none; }
.footer-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1.1; margin: 0; }
.footer-frase { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--text); }
.footer-title { font-family: var(--font); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 0 0 0.75rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list-cols { columns: 2 11rem; column-gap: var(--space-3); }
.footer-list-cols li { break-inside: avoid; }
.footer-title.footer-title-gap { margin-top: var(--space-3); }
.footer-list li { margin-bottom: 0.15rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 2.25rem; text-decoration: none; }
.footer-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* Correo y redes: enlaces en línea con su ícono; si no caben, el texto parte en la misma línea y no bajo el ícono. */
.footer-inline { display: flex; align-items: flex-start; gap: 0.35rem; margin-bottom: 0.5rem; }
.footer-inline .icon { margin-right: 0; margin-top: 0.3rem; flex: none; }
.footer-inline a { display: inline; min-height: 0; }
.footer-legal { border-top: 1px solid var(--border); margin-top: var(--space-4); padding-block: var(--space-3); font-size: 0.875rem; }

/* ---------- Barra fija inferior "Pedir turno" (móvil y tablet) ----------
   Apunta a /turno (el formulario que arma el mensaje de WhatsApp). "Escribinos por WhatsApp" queda para consultas.
   Altura de referencia: --wabar-h. Es secundaria (borde oro) porque el CTA primario es el de cada página. */
.wa-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; justify-content: center;
    padding: 0.6rem var(--space-2) calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--gold);
}
.wa-bar .btn { width: 100%; max-width: 28rem; min-height: 3rem; }
.wa-bar .btn-secondary { background: var(--bg); }
.wa-bar .btn-secondary:hover { background: var(--elevated); }
body:has(.wa-bar) { padding-bottom: calc(var(--wabar-h) + env(safe-area-inset-bottom)); }
/* Con el menú móvil abierto la barra se oculta: no tapa el foco ni el último ítem del panel */
@media (max-width: 63.999rem) {
    body:has(.nav-shell[open]) .wa-bar { display: none; }
}
/* En escritorio la barra se transforma en un botón flotante en la esquina inferior derecha;
   se reserva abajo su alto (3,25 rem) + el margen (1,5 rem) + aire, para que no tape el pie de página. */
@media (min-width: 64rem) {
    .wa-bar { inset-inline: auto var(--space-3); bottom: var(--space-3); padding: 0; background: transparent; border-top: 0; }
    .wa-bar .btn { width: auto; max-width: none; min-height: 3.25rem; padding-inline: var(--space-3); }
    body:has(.wa-bar) { padding-bottom: calc(3.25rem + var(--space-3) + var(--space-2)); }
    html { scroll-padding-top: 9.5rem; scroll-padding-bottom: calc(3.25rem + var(--space-3)); }
}

/* Ventanas muy bajas (zoom 400 %, teléfono apaisado): el header y la barra fijos ocuparían media pantalla (WCAG 1.4.10/2.4.11) */
@media (max-height: 32rem) {
    .site-header, .wa-bar { position: static; }
    html { scroll-padding-top: 0; scroll-padding-bottom: 0; }
    body:has(.wa-bar) { padding-bottom: 0; }
    .nav-shell[open] ~ .nav-list { max-height: none; }
}

/* ---------- Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .hero-vitals { display: none; }
    /* Los desplazamientos por hover/active también se anulan (no solo la transición) */
    .card:hover, .btn:active, .media-card:hover .card-media, .card:hover .card-arrow, .media-card:hover .card-more .icon { transform: none !important; }
}

/* Alto contraste forzado (Windows): se usan colores de sistema; las capas decorativas se quitan. */
@media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; }
    .btn, .nav-toggle, .chips a, .radio, .card, .placeholder-box, .wa-bar .btn { border: 1px solid ButtonText; }
    .btn-link { border-color: transparent; }
    .chips a[aria-current="true"], .radio:has(input:checked) { border: 3px solid Highlight; }
    .hero-media, .hero-shade, .hero-vitals, .hero::before, .page-header::after, .card-media-frame::after { display: none; }
    .atencion > summary::after { border-color: ButtonText; }
    .media-note { border-color: CanvasText; background: Canvas; color: CanvasText; }
}

/* Impresión: tema claro, sin navegación ni barra fija, sin decoración. */
@media print {
    :root {
        color-scheme: light;
        --bg: #fff; --surface: #fff; --elevated: #fff; --border: #999; --field-border: #555;
        --text: #000; --text-muted: #333; --gold: #000; --gold-bright: #000; --bronze: #555; --on-gold: #fff;
        --error: #000; --error-surface: #fff; --pending-surface: #fff; --pending-text: #000;
    }
    body { font-size: 11pt; padding-bottom: 0 !important; }
    .site-header, .wa-bar, .utility-bar, .skip-link, .search, .chips, .nav-toggle, .hero-media, .hero-shade, .hero-vitals, .hero::before,
    .page-header::after, .more-mobile { display: none !important; }
    .hero { min-height: 0; padding-block: var(--space-2); }
    .section, .contact-block { padding-block: var(--space-2); }
    .card, .panel-box, .servicio, .placeholder-box { break-inside: avoid; }
    a { text-decoration: underline; }
    .card:hover, .media-card:hover .card-media { transform: none; }
    /* Los fondos suelen no imprimirse: los bloques dorados pasan a fondo blanco, texto negro y borde. */
    .contact-gold, .btn-primary, .chips a[aria-current="true"] {
        background: #fff !important; color: #000 !important; border: 1px solid #000;
    }
    .contact-gold h2, .contact-gold a:not(.btn), .contact-gold .contacto-lista .icon,
    .contact-gold .btn-secondary { color: #000; border-color: #000; }
}