.SectionBlock {
    grid-column: 1 / -1;

    /* Cada sección llena como mínimo la pantalla que queda bajo la barra:
       al saltar desde el menú no asoma la siguiente por el borde inferior.
       Si el contenido es más alto, la sección crece con normalidad. */
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));

    /* El sobrante se queda como aire al final, sin repartirse ni estirar
       las filas: así el encuadre no se mueve respecto al punto donde frena
       el scroll. (.ServiciosMini lo cambia a `center` a propósito.) */
    align-content: start;

    padding: 96px 48px;
}

/* De tablet hacia abajo se suelta el alto mínimo: el contenido ya desborda
   la pantalla por sí solo, y forzarlo dejaría huecos enormes. Es la misma
   decisión que ya tomaban .Hero y .ServiciosMini en estos anchos. */
@media (max-width: 1024px) {
    .SectionBlock {
        min-height: auto;
    }
}

.SectionTag {
    width: fit-content;

    padding: 8px 14px;

    border-radius: var(--radius-pill);

    color: var(--gold-ink);
    background-color: var(--gold);

    font-size: 14px;
    font-weight: 700;
}

/* Superficie base de todas las tarjetas del sitio.
   -----------------------------------------------
   Vidrio: relleno translúcido, desenfoque del fondo y un filo claro de
   1px. Lo que no vuelve es la sombra proyectada — la tarjeta se apoya en
   la página, no flota sobre ella — ni la elevación al pasar el cursor. */
.GlassCard {
    border-radius: var(--radius);
    border: 1px solid var(--glass-line);

    background-color: var(--glass);

    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    transition:
        border-color var(--dur-base) var(--ease-soft),
        background-color var(--dur-base) var(--ease-soft);
}

/* La respuesta al cursor es un cambio de color, no una elevación: el
   vidrio se aclara y el borde se tiñe de oro sin moverse del sitio. */
.GlassCard:hover {
    border-color: var(--gold);
    background-color: var(--glass-hover);
}

/* Botones
   -------
   .ButtonBase fija lo que comparte todo lo pulsable: forma de píldora,
   tipografía, respuesta al cursor (sólo color, nunca desplazamiento ni
   brillo) y anillo de foco. Las variantes de abajo eligen colores y
   tamaño, nada más. Deliberadamente no lleva alto ni relleno: los hay de
   tres tamaños (barra, formulario y sección) y ponerlos aquí obligaría a
   deshacerlos en cada uno. */
/* Etiqueta de tarjeta
   -------------------
   La versión pequeña de .SectionTag: misma píldora dorada, dentro de una
   tarjeta en vez de encabezando una sección. Estaba definida tres veces
   idéntica —en HeroFeatures, zonas y contacto— y siempre como selector de
   elemento (`.ContactoCard span`), que teñía de dorado *cualquier* span de
   la tarjeta. Por eso la etiqueta de un botón metido en una tarjeta salía
   con aspecto de badge. */
.CardBadge {
    width: fit-content;

    padding: 6px 10px;

    border-radius: var(--radius-pill);

    color: var(--gold-ink);
    background-color: var(--gold);

    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .CardBadge {
        padding: 6px 10px;
        font-size: clamp(12px, 3.2vw, 13px);
    }
}

/* Barras de desplazamiento ocultas
   --------------------------------
   Sobre superficies oscuras y pequeñas la barra se lee como un filo claro
   pegado al borde, y compite con el propio borde de la pieza. El contenido
   sigue desplazándose igual con rueda, dedo y teclado: sólo desaparece el
   dibujo de la barra. Se agrupan aquí los contenedores desplazables del
   sitio en lugar de repetir las dos reglas —una estándar y otra de
   WebKit— en cada hoja. */
.ReservaModal,
.ReservaSuggestions,
.Navi,
.OpinionesTrack {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ReservaModal::-webkit-scrollbar,
.ReservaSuggestions::-webkit-scrollbar,
.Navi::-webkit-scrollbar,
.OpinionesTrack::-webkit-scrollbar {
    display: none;
}

/* Sprite de iconos: no se dibuja, sólo guarda los trazados. Se saca de la
   vista con posición y tamaño cero en lugar de con display:none, que en
   algunos navegadores impide que <use> resuelva la referencia. */
.IconSprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* El icono se tiñe con el color del texto que acompaña. Es lo que permite
   que el mismo trazado salga verde sobre los botones de vidrio y en tinta
   oscura sobre el verde macizo del envío del formulario. El tamaño va en
   `em` para que siga a la tipografía del botón en cada tamaño de pantalla. */
.Icon {
    width: 1.1em;
    height: 1.1em;

    fill: currentColor;
}

.ButtonBase {
    display: inline-grid;
    grid-auto-flow: column;
    justify-content: center;
    place-items: center;
    gap: 10px;

    /* Transparente en vez de `none`: así una variante de contorno puede
       teñir su borde sin que la pieza cambie de tamaño al hacerlo. */
    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    text-decoration: none;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color var(--dur-fast) var(--ease-soft),
        border-color var(--dur-fast) var(--ease-soft),
        color var(--dur-fast) var(--ease-soft);
}

/* Un único anillo de foco para todo lo pulsable del sitio.
   -------------------------------------------------------
   Se agrupan aquí los selectores en lugar de repetir la regla en cada
   hoja: así ninguno vuelve a quedarse sin él. Cinco de los nueve botones
   no lo tenían, y el de los flotantes era blanco mientras el resto era
   dorado. Como esta hoja se carga antes que las de los componentes, sus
   declaraciones propias se han quitado para que ésta sea la única. */
.ButtonBase:focus-visible,
.HeaderMenuButton:focus-visible,
.FloatingButton:focus-visible,
.OpinionesButton:focus-visible,
.ReservaClose:focus-visible,
.ReservaGeoButton:focus-visible,
.ReservaOpcion:focus-visible,
.ReservaBack:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Botones de sección
   ------------------
   Viven rodeados de tarjetas de vidrio, así que usan su mismo lenguaje:
   relleno translúcido, filo de 1px y desenfoque del fondo. El color de la
   marca lo llevan el filo y el texto, no un bloque macizo — eran las dos
   únicas piezas 100% opacas y saturadas de la página. El filo transparente
   de .ButtonBase permite teñirlo sin que la pieza cambie de tamaño. */
.ButtonCall,
.ButtonWReservar {
    min-height: 52px;
    padding: 0 26px;

    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ButtonCall {
    border-color: var(--gold);
    background-color: var(--gold-glass);
    color: var(--gold);
}

.ButtonCall:hover {
    background-color: var(--gold-glass-hover);
}

.ButtonWReservar {
    border-color: var(--whatsapp);
    background-color: var(--whatsapp-glass);
    color: var(--whatsapp);
}

.ButtonWReservar:hover {
    background-color: var(--whatsapp-glass-hover);
}

@media (max-width: 768px) {
    .SectionBlock {
        padding: 96px 24px;
    }

    .SectionTag {
        padding: 8px 14px;
        font-size: 14px;
    }

    .ButtonCall,
    .ButtonWReservar {
        min-height: 54px;
        padding-inline: 22px;
        font-size: 16px;
    }
}