/* ============ Site header (público) ============ */

:root {
    --sh-bg: rgba(255, 255, 255, 0.82);
    --sh-fg: var(--ink);
    --sh-muted: var(--color-text-muted);
    --sh-border: var(--color-border);
    --sh-accent: var(--sage-deep);
    --sh-accent-hover: var(--sage-hover);
    /* Blanco sobre --sh-accent (salvia profunda): 6.6:1, sobre el mínimo AA.
       Si alguna vez el acento se aclara, este par hay que recalcularlo. */
    --sh-accent-text: #ffffff;
    /* La franja de contacto era --ink: una banda verde casi negra cruzando el
       ancho completo, y era lo que le daba peso a la cabecera entera —más que
       la barra en sí—. En salvia lavada dice lo mismo y deja de pesar: el
       texto en salvia profunda da 5.4:1, sobre el mínimo AA.

       Se mantiene visible en el teléfono: es el único toque-para-llamar del
       primer pantallazo, y en un sitio de salud esa llamada es una conversión,
       no un adorno. Lo que se recortó ahí ya está resuelto más abajo (el correo
       sale, el horario sale, la fila no envuelve). */
    --sh-topbar-bg: var(--sage-soft);
    --sh-topbar-fg: var(--sage-deep);
    --sh-topbar-fg-hover: var(--ink-deep);
}

/* Header de vidrio: se queda arriba mientras la persona lee, y deja pasar el
   color del hero por detrás en vez de cortarlo con una banda blanca. */
/* El <header> se queda con lo que lo hace pegajoso y con nada más.
   ------------------------------------------------------------
   El fondo, el filete y el desenfoque se fueron a `.site-navbar`, que es el
   único hijo visible, así que se ve exactamente igual. El motivo del traslado
   no es cosmético:

   `backdrop-filter` convierte al elemento en el marco de referencia de sus
   descendientes `position: fixed`. Y adentro del header vive el menú lateral,
   que es fixed. Con el filtro acá, ese menú dejaba de medirse contra la
   pantalla y pasaba a medirse contra la caja del header: al abrirlo con la
   página desplazada aparecía corrido cientos de píxeles y el velo quedaba del
   alto de la barra —68px— en vez de tapar la pantalla.

   Medido antes del cambio, con 900px de scroll: el menú caía en top -881 y el
   velo medía 68 de alto. En el filtro estaba desde el primer día; se notaba
   solo en el teléfono, que es donde ese menú es el único que hay.

   Se arregla moviendo el filtro y no sacando el menú del header: el menú es la
   navegación principal y le corresponde estar dentro de la región `banner`. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
}

.site-navbar {
    background: var(--sh-bg);
    border-bottom: 1px solid var(--sh-border);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

/* Sin soporte de blur, un fondo sólido: nunca texto sobre texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-navbar { background: var(--color-bg); }
}

/* ---- Topbar ---- */
.site-topbar {
    background: var(--sh-topbar-bg);
    color: var(--sh-topbar-fg);
    font-size: var(--text-sm);
}
.site-topbar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: .55rem var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-topbar__contact { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.site-topbar__contact a,
.site-topbar__hours {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sh-topbar-fg);
    text-decoration: none;
}
.site-topbar__contact a:hover { color: var(--sh-topbar-fg-hover); }
.site-topbar__socials { display: flex; gap: .7rem; align-items: center; }
.site-topbar__socials a {
    color: var(--sh-topbar-fg);
    display: inline-flex;
    transition: color .15s;
}
.site-topbar__socials a:hover { color: var(--sh-topbar-fg-hover); }
.site-topbar__socials svg { width: 16px; height: 16px; }

/* ---- Navbar principal ---- */
.site-navbar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: .75rem var(--container-pad);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Altura fija: sin esto, un ítem que saltaba de línea estiraba toda la
       barra y descolocaba la marca y los botones. */
    min-height: 68px;
}

/* ---- Marca ---- */
.site-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--sh-fg);
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}
/* El alto lo pone Configuración → Logo del header, en dos medidas: la de
   escritorio y la del teléfono. El valor de reserva es el que estaba escrito
   acá antes de que fuera configurable, así que una instalación sin el ajuste
   guardado se ve exactamente igual que antes.

   `width: auto` y no un ancho: el archivo que suba la clienta puede ser
   cuadrado o una tira horizontal, y lo que tiene que quedar constante entre
   los dos es el alto —que es lo que alinea la marca con el menú—, no el ancho.
   `max-width: 100%` es el seguro para el logo muy apaisado: sin él, una tira
   de 6:1 a 56px de alto mide 336px y empuja al menú fuera de la barra. */
.site-navbar__brand img {
    display: block;
    max-height: var(--logo-h, 40px);
    width: auto;
    max-width: 100%;
}
.site-navbar__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--sage-deep);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
}

/* El isotipo ocupa la placa con aire alrededor: pegado a los bordes se ve como
   un icono de interfaz y no como una marca. */
.brand-mark { width: 21px; height: 21px; display: block; }
/* Es el único lugar donde el serif entra a 20px y funciona: acá no es texto que
   haya que leer sino un logotipo, y a esa escala una palabra sola aguanta el
   trazo fino. El resto de la navegación se queda en sans. */
.site-navbar__name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--text-2xl);
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ---- Menú ---- */
.site-navbar__menu {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin: 0 auto;
    /* El menú es lo único que cede espacio cuando la barra se aprieta. */
    min-width: 0;
}
.site-navbar__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--sh-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1;
    /* Un título largo del CMS partía en tres líneas y rompía la fila entera. */
    white-space: nowrap;
    padding: .6rem .7rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.site-navbar__menu a:hover { color: var(--sh-fg); background: var(--color-bg-hover); }
.site-navbar__menu a.is-active { color: var(--sh-fg); font-weight: 600; }

/* Barra bajo el ítem activo. Antes era un punto anclado al borde inferior del
   enlace: cuando un vecino saltaba de línea, el punto quedaba flotando lejos
   del texto. La barra se ancla al propio enlace y siempre queda debajo.

   Va en el resalte de la marca. En verde claro se confundía con el resto de la
   cabecera —que ya es toda verde— y había que buscar en qué página estabas;
   en rosa se ve de reojo, que es todo lo que tiene que hacer. */
.site-navbar__menu a.is-active::after {
    content: '';
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .18rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-alt);
}

/* ---- Acciones ---- */
/* `margin-left: auto` y no el `margin: 0 auto` del menú: en escritorio el menú
   centrado ya empuja las acciones al borde, pero en móvil el menú está oculto
   —no ocupa lugar y no empuja nada— y el bloque quedaba pegado a la marca, con
   el aire sobrante a la derecha de la hamburguesa. Anclarlas al final las deja
   a la derecha en los dos casos, con menú o sin él. */
.site-navbar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.site-navbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* Misma altura para los dos botones, pase lo que pase con el texto. */
    height: 40px;
    padding: 0 1.05rem;
    background: var(--sh-accent);
    color: var(--sh-accent-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background .15s, box-shadow .15s;
}
.site-navbar__cta:hover {
    background: var(--sh-accent-hover);
    box-shadow: var(--shadow-sm);
    color: var(--sh-accent-text);
}

/* Agendar es la acción que persigue el sitio: va en el azul sólido, y el de
   WhatsApp queda en teal como acción secundaria.
   El hover va DESPUÉS del genérico: con el orden inverso, la regla general
   ganaba por orden y el botón de agendar cambiaba a teal al pasar el mouse. */
.site-navbar__cta--book {
    /* Sin gap: el genérico separa el icono del texto —lo necesita el botón de
       WhatsApp—, pero este botón no tiene icono y ahí el gap se sumaba al
       espacio entre "Agendar" y "hora", que quedaba del doble. La palabra va en
       un <span> para poder esconderla en pantallas angostas. */
    gap: 0;
    background: var(--color-cta);
    color: var(--color-cta-text);
    box-shadow: var(--shadow-cta);
}
.site-navbar__cta--book:hover {
    background: var(--color-cta-hover);
    color: var(--color-cta-text);
}

/* ---- Carro ----
   Icono y no botón con texto: al lado de "Agendar hora" —que es la acción que
   persigue el sitio— un tercer botón sólido reparte la atención en tres y no
   se sabe cuál apretar. El carro es una prenda de estado, no un llamado: se
   consulta cuando ya se puso algo adentro.

   44px de lado, como la hamburguesa: es el mínimo táctil y en el teléfono son
   los dos únicos controles que se tocan con el pulgar. */
.site-navbar__carro {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--sh-fg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.site-navbar__carro:hover { background: var(--color-bg-hover); color: var(--color-accent-text); }
.site-navbar__carro:focus-visible { outline: none; box-shadow: var(--ring-cta); }
/* Con algo adentro el icono se tiñe del acento: la chapa dice cuánto, y el
   color dice que hay algo aunque se mire de reojo. */
.site-navbar__carro.has-items { color: var(--color-cta); }

.site-navbar__carro-num {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-cta);
    color: var(--color-cta-text);
    font-size: var(--text-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    text-align: center;
    /* El anillo del color de la barra separa la chapa del dibujo sin dibujarle
       un borde gris encima. */
    box-shadow: 0 0 0 2px var(--color-bg);
}

.site-drawer__carro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.site-drawer__carro span {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-cta);
    color: var(--color-cta-text);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* 44px de lado: el mínimo táctil. A 38 el objetivo quedaba por debajo, y es el
   único control de navegación que hay en el teléfono. El dibujo sigue midiendo
   22px —lo que crece es el área, no las tres barras—. */
.site-navbar__burger {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-sm);
}
.site-navbar__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sh-fg);
    border-radius: 1px;
}

/* ---- Drawer mobile ---- */
.site-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 34, 29, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 90;
}
.site-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.site-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(86vw, 340px);
    /* Sólido, no --sh-bg. Ese token es el blanco al 82% de la cabecera, que se
       ve bien porque la cabecera lleva backdrop-filter y difumina lo que pasa
       por detrás. El menú lateral no lo lleva: heredaba la transparencia sin el
       desenfoque y el titular del hero se leía a través de los ítems del menú.
       Un menú abierto tapa, no compite. */
    background: var(--color-bg);
    z-index: 100;
    transform: translateX(100%);
    /* `visibility` saca del foco y del lector de pantalla lo que está fuera de
       pantalla; se retrasa hasta el final para no cortar la animación de salida.
       Sin esto, el menú cerrado seguía siendo navegable con Tab. */
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
}
.site-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    .site-drawer { transition: none; }
    .site-drawer.is-open { transition: none; }
}
.site-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--sh-border);
}
.site-drawer__brand {
    color: var(--sh-fg);
    text-decoration: none;
    font-weight: 700;
}
/* El menú lateral es una pieza de teléfono: toma la medida de teléfono. */
.site-drawer__brand img {
    display: block;
    max-height: var(--logo-h-mobile, 36px);
    width: auto;
    max-width: 100%;
}
.site-drawer__close {
    background: transparent;
    border: none;
    color: var(--sh-muted);
    cursor: pointer;
    padding: .3rem;
    display: inline-flex;
}
.site-drawer__close:hover { color: var(--sh-fg); }

.site-drawer__menu {
    display: flex;
    flex-direction: column;
    padding: .6rem .4rem;
    gap: 0;
}
.site-drawer__menu a {
    color: var(--sh-fg);
    text-decoration: none;
    padding: .85rem 1rem;
    font-weight: 500;
    border-radius: 8px;
}
.site-drawer__menu a:hover { background: var(--color-bg-hover); }
.site-drawer__menu a.is-active { color: var(--sh-accent); background: var(--color-cta-soft); }

.site-drawer__contact {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--sh-border);
    margin-top: auto;
}
.site-drawer__contact a {
    color: var(--sh-fg);
    text-decoration: none;
    font-size: var(--text-base);
}
.site-drawer__cta {
    background: var(--sh-accent);
    color: #fff !important;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-weight: 600;
}
.site-drawer__cta:hover { background: var(--sh-accent-hover); }

.site-drawer__socials {
    display: flex;
    gap: .8rem;
    padding: .8rem 1.2rem 1.4rem;
    border-top: 1px solid var(--sh-border);
}
.site-drawer__socials a { color: var(--sh-muted); display: inline-flex; }
.site-drawer__socials a:hover { color: var(--sh-fg); }
.site-drawer__socials svg { width: 20px; height: 20px; }

/* ---- Responsive ---- */
/* El menú se guarda a los 1050px, no a los 860.
   ------------------------------------------------------------
   Entre esos dos anchos —tablet apaisada, o una ventana a media pantalla en un
   portátil— los siete ítems no entraban junto a la marca y los dos botones, y
   no envolvían: se metían DEBAJO del botón de agendar. "Contacto" y "Nosotros"
   quedaban con el botón encima, texto sobre texto, en la pieza que más se mira
   de la página. Medido: rompe a los 861 y recién se ordena pasados los 1050. */
@media (max-width: 1050px) {
    .site-navbar__menu { display: none; }
    .site-navbar__burger { display: inline-flex; }
}

@media (max-width: 860px) {
    .site-topbar__contact { font-size: var(--text-xs); gap: .9rem; }
    .site-topbar__hours { display: none; }
    /* Acá pasa a valer la otra medida del logo. El corte son los 860 y no los
       1050 donde se guarda el menú: entre esos dos anchos la barra todavía
       tiene sitio de sobra —lo que se fue fue el menú, no el espacio—, y
       encoger la marca ahí la deja chica sin motivo. */
    .site-navbar__brand img { max-height: var(--logo-h-mobile, 32px); }
}
/* En el teléfono la barra es: marca a la izquierda, agendar y hamburguesa a la
   derecha. Una sola fila, y las tres piezas alineadas a la misma altura. */
@media (max-width: 540px) {
    /* La barra de contacto envolvía: el teléfono y el correo no entraban en
       390px y el icono de Instagram bajaba solo a una segunda línea, con lo que
       la franja oscura pasaba a medir el doble y quedaba un icono suelto en
       mitad de la nada.

       El correo se va de la barra —sigue en el menú lateral, en el pie y en la
       sección de contacto, y en un teléfono la acción es llamar o escribir por
       WhatsApp, no abrir el cliente de correo—. Con el teléfono a la izquierda
       y las redes a la derecha, la fila cierra a los extremos y no envuelve. */
    /* Y además baja de alto.
       ------------------------------------------------------------
       Medía 36px contra los 68 de la barra principal: más de la mitad de la
       cabecera para un dato de apoyo, y los dos bloques juntos se comían 105px
       —un octavo de la pantalla— antes de que empezara la página. La franja
       está para que el teléfono quede a un toque, no para competir con la
       marca.

       El alto sale del relleno y del interlineado, no de la letra: encogerla
       más allá de los 12px la deja ilegible justo en el único enlace de
       "llamar" del primer pantallazo.

       Dónde se paró: 21px. El alto lo pone el relleno, no la letra —los 12px
       del texto no se tocan, porque este es el único "toca para llamar" del
       primer pantallazo y por debajo de eso deja de leerse—. Con el relleno al
       mínimo y el interlineado justo, la franja queda del alto de su propio
       texto y ni un píxel más.

       El enlace igual toma la franja entera, así que el objetivo táctil son
       esos 21px. No llega a los 44 del mínimo y es una concesión consciente y
       ya repetida: la franja es un apoyo, y el teléfono está a tamaño completo
       en el menú lateral, en el pie y en /contacto. */
    .site-topbar__inner {
        padding: .12rem var(--container-pad);
        line-height: 1.25;
        flex-wrap: nowrap;
    }
    /* El enlace toma todo el alto de la franja en vez de solo el de su texto:
       es el poco blanco táctil que hay, y ya estaba ahí. */
    .site-topbar__contact a,
    .site-topbar__socials a { padding-block: .12rem; margin-block: -.12rem; }
    /* El icono de la red mide 15px de ancho: como objetivo suelto es un punto.
       El relleno lateral con margen negativo lo ensancha sin correr nada. */
    .site-topbar__socials a { padding-inline: .4rem; margin-inline: -.4rem; }
    /* A 14px el dibujo del teléfono era lo más alto de la fila y la estiraba él
       solo, un par de píxeles por encima del texto que acompaña. */
    .site-topbar__contact svg { width: 13px; height: 13px; }
    .site-topbar__socials svg { width: 14px; height: 14px; }
    .site-topbar__contact a[href^="mailto"] { display: none; }
    /* El icono de la red baja con la franja: a 16px sobre una fila de 26 era lo
       más alto de la barra y la estiraba solo él. */
    .site-topbar__socials svg { width: 15px; height: 15px; }

    .site-navbar__inner { padding: .7rem var(--container-pad); gap: .6rem; }

    /* El botón de agendar se aprieta para dejarle su ancho a la hamburguesa sin
       que las dos se toquen. Baja de 40 a 38px de alto para no pesar más que la
       marca, que mide 34. */
    .site-navbar__cta--book {
        height: 38px;
        padding: 0 .85rem;
    }

    /* La marca se queda con el nombre —es lo que identifica el sitio— pero baja
       un paso de la escala: a 20px, con el botón y la hamburguesa al lado, los
       tres bloques se tocaban. Si algún día el nombre configurado es más largo,
       el que cede es el nombre, no las acciones. */
    .site-navbar__brand { min-width: 0; }
    .site-navbar__name {
        font-size: var(--text-xl);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Bajo 430px ya no hay ancho que repartir: el botón se queda en "Agendar", que
   dice lo mismo. El destino y el texto del enlace no cambian para el resto. */
@media (max-width: 430px) {
    .site-navbar__cta-extra { display: none; }
    /* Marca + carro + agendar + hamburguesa en 390px: el carro cede los cuatro
       píxeles que sobran de su área táctil —queda en 40, todavía sobre el
       mínimo cómodo— antes que apretar el botón de agendar. */
    .site-navbar__carro { width: 40px; }
    .site-navbar__actions { gap: .25rem; }
}

/* ============ Site footer ============ */
/* Sin margen propio: la separación con el contenido la pone el relleno de
   `.site-footer__inner`. Ver la nota en layout.css. */
.site-footer {
    background: var(--ink-deep);
    color: var(--color-text-on-dark);
    margin-top: 0;
    /* Los dos hacen falta para el ornamento: relative para que se ancle a este
       bloque y no a la página, y hidden para que la parte que sobresale se
       recorte en vez de estirar el ancho del documento. */
    position: relative;
    overflow: hidden;
    /* El relleno vive en `__inner` y `__bottom`. El de la regla genérica se
       sumaba al de ellos: 40px arriba y 40 abajo que no separaban nada, porque
       adentro ya había 28 y 16. */
    padding: 0;
}
/* Tres columnas de ancho igual con contenido muy desigual —una descripción de
   tres líneas, dos enlaces y cinco datos de contacto— hacían un pie de 396px
   para lo poco que dice. Las columnas se reparten según lo que llevan: las de
   texto largo se ensanchan y sus líneas dejan de partirse, y la de enlaces se
   angosta. */
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1.75rem var(--container-pad) 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem 2rem;
}

@media (min-width: 860px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.4fr); }
}
/* Las versalitas eran lo más "panel de control" que quedaba en la página. En
   serif y en caja baja el pie deja de parecer el índice de una aplicación. */
.site-footer__col .site-footer__title {
    color: #fff;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 .55rem;
    letter-spacing: .02em;
    text-transform: none;
}
.site-footer__col p { margin: 0 0 .6rem; font-size: var(--text-md); line-height: 1.5; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: var(--text-md); }
.site-footer__col a { color: var(--color-text-on-dark); text-decoration: none; }
.site-footer__col a:hover { color: #fff; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: .8rem; font-size: var(--text-md); }
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .75rem 1.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: var(--text-sm);
    max-width: var(--container-max);
    margin: 0 auto;
    color: var(--color-text-on-dark);
}
.site-footer__legal a { color: var(--color-text-on-dark); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }

/* ============ WhatsApp floating button ============ */
.wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
    /* Por debajo de la cabecera (80), y esto no es un número al voleo: el menú
       lateral y su velo viven DENTRO de <header>, que es sticky con z-index 80
       y por eso abre su propio contexto de apilamiento. Sus 100 y 90 solo valen
       puertas adentro; contra el resto de la página, el menú abierto compite
       con el 80 del header. Con el botón en 90 —como estaba— el círculo verde
       quedaba flotando sobre el menú abierto, encima de los enlaces.
       Debajo del header también es lo correcto al hacer scroll. */
    z-index: 70;
    transition: transform .18s, box-shadow .18s;
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(37, 211, 102, .55); }

/* Dos botones del mismo peso en un teléfono no ayudan a decidir, así que en la
   barra queda uno solo: el de agendar, que es de lo que vive el negocio.
   WhatsApp no se pierde — sigue en el botón flotante y en el menú lateral.
   (Antes era al revés: se escondía agendar, la acción principal.) */
@media (max-width: 860px) {
    .site-navbar__actions .site-navbar__cta:not(.site-navbar__cta--book) { display: none; }
}

/* ============ Modo oscuro: ya no ============
   Acá vivía la versión oscura de los tokens del header. Se fue primero de esta
   hoja —que la carga solo el sitio público, y la portada siempre fue clara— y
   después del proyecto entero: ya no queda modo oscuro en ninguna pantalla, ni
   siquiera en el panel. La razón está en base.css. */