/* ==========================================================================
   TOKENS — Sistema compartido de Yeguada Casablanca

   Contiene lo que usan todas las páginas: variables, reset, base tipográfica,
   utilidades, cabecera, pie, menú móvil, botones, campos de formulario,
   componentes reutilizables, estados y keyframes.

   Los estilos exclusivos de cada página viven en su propia hoja.
   Cada regla de componente parte de la clase de la sección que lo contiene.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía local
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
    /* Colores de marca */
    --primary-color: #0a4dbe;
    --primary-dark-color: #083c96;
    --secondary-color: #f9b208;
    --secondary-dark-color: #d4960a;
    /* El cobalto es más claro que el azul anterior, así que el amarillo de la
       marca se queda en 4,05 sobre él. Este tono, un punto más claro, sube a
       4,85 sin salirse de la familia. */
    --secondary-on-primary-color: #ffc933;

    /* Superficies y texto */
    --body-color: #f5f3ef;
    --surface-color: #ffffff;
    --surface-alt-color: #eceae4;
    --deep-color: #12233a;
    --title-color: #12233a;
    --text-color: #3d4a5c;
    /* Texto secundario. Cumple AA sobre los tres fondos claros del sistema:
       5,08 sobre crema, 5,63 sobre blanco y 4,68 sobre gris. */
    --muted-color: #5e6878;
    --inverse-color: #f5f3ef;
    /* Texto secundario sobre oscuro: 9,97 sobre el azul profundo y 5,27 sobre
       el azul de marca, donde el tono anterior se quedaba en 3,99. */
    --inverse-muted-color: #c6ced9;
    --border-color: rgba(18, 35, 58, 0.16);
    --border-strong-color: rgba(18, 35, 58, 0.42);
    --border-inverse-color: rgba(245, 243, 239, 0.24);
    /* Los bordes de un campo identifican el componente, así que necesitan 3:1
       frente al fondo (WCAG 1.4.11). El borde decorativo no tiene ese deber. */
    --field-border-color: rgba(18, 35, 58, 0.55);
    --field-border-inverse-color: rgba(245, 243, 239, 0.62);

    /* Estados */
    --error-color: #b3261e;
    --success-color: #146c43;

    /* Tipografía */
    --primary-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --title-weight: 800;
    --label-tracking: 0.18em;

    /* Espaciado */
    --spacing-2xs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    --section-padding: clamp(3.5rem, 7vw, 7rem);
    --shell-width: 1440px;
    --shell-gutter: clamp(1.25rem, 4vw, 3rem);

    /* Campos de formulario */
    --field-height: 3.25rem;
    --field-padding-inline: 0.9rem;
    --field-icon-size: 20px;

    /* Otros */
    --radius-none: 0;
    --transition-fast: 0.2s ease;
    --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-card: 0 18px 40px rgba(18, 35, 58, 0.12);
    --header-height: 76px;
}

/* --------------------------------------------------------------------------
   3. Reset y base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--body-color);
    color: var(--text-color);
    font-family: var(--primary-font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--title-color);
    font-weight: var(--title-weight);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    text-transform: uppercase;
}

h2 {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
}

h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1rem;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Indicador de foco de doble aro: el dorado destaca sobre los fondos oscuros y
   el aro interior azul profundo lo hace sobre los claros, de modo que siempre
   hay al menos 3:1 contra lo que tenga detrás. */
:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--deep-color), 0 0 0 7px rgba(18, 35, 58, 0.35);
}

/* --------------------------------------------------------------------------
   4. Utilidades transversales
   -------------------------------------------------------------------------- */

.site-shell {
    width: 100%;
    max-width: var(--shell-width);
    margin-inline: auto;
    padding-inline: var(--shell-gutter);
}

.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-sm);
    z-index: 100;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--secondary-color);
    color: var(--deep-color);
    font-weight: 700;
}

.site-skip-link:focus {
    top: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   5. Componentes del sistema
   -------------------------------------------------------------------------- */

/* Antetítulo: rótulo pequeño en versales sobre cada sección. */
.site-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.site-eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 2px;
    background-color: currentColor;
}

.site-eyebrow--on-dark {
    color: var(--secondary-color);
}

/* Botones */
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 2.9rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-none);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), transform var(--transition-fast);
}

.site-button:hover {
    transform: translateY(-2px);
}

.site-button--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--inverse-color);
}

.site-button--primary:hover {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}

.site-button--accent {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--deep-color);
}

.site-button--accent:hover {
    background-color: var(--secondary-dark-color);
    border-color: var(--secondary-dark-color);
}

/* Sobre fondo oscuro el contorno claro mantiene el contraste. */
.site-button--outline-light {
    border-color: var(--inverse-color);
    color: var(--inverse-color);
}

.site-button--outline-light:hover {
    background-color: var(--inverse-color);
    color: var(--deep-color);
}

.site-button--outline-dark {
    border-color: var(--deep-color);
    color: var(--deep-color);
}

.site-button--outline-dark:hover {
    background-color: var(--deep-color);
    color: var(--inverse-color);
}

.site-button__icon {
    flex: none;
}

/* Enlace con flecha */
.site-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-2xs);
    border-bottom: 2px solid currentColor;
    color: var(--title-color);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.site-arrow-link:hover {
    gap: var(--spacing-sm);
    color: var(--primary-color);
}

.site-arrow-link__icon {
    flex: none;
}

/* Etiqueta breve sobre un dato */
.site-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-color);
    background-color: var(--surface-alt-color);
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-tag--accent {
    border-color: rgba(10, 77, 190, 0.3);
    background-color: rgba(10, 77, 190, 0.08);
    color: var(--primary-color);
}

/* Encabezado de sección con título y acción a la derecha */
.site-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
}

/* Héroe de página interior.

   Lo comparten las seis páginas de dentro. Cada una lleva además su clase de
   bloque propia, que es la que usa el importador para identificar la sección;
   estas reglas van sobre la clase común para no repetir el bloque seis veces.

   La composición: fotografía de la página bajo un velo azul, antetítulo y
   título a la izquierda, bajada a la derecha sobre un filete dorado, y un
   remate dorado cerrando la banda. */

.site-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 46vh, 30rem);
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background-color: var(--deep-color);
    overflow: hidden;
}

/* Remate dorado al pie de la banda. */
.site-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background-color: var(--secondary-color);
}

.site-page-hero__media {
    position: absolute;
    inset: 0;
}

.site-page-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    filter: grayscale(1);
}

/* El velo no baja del 82 % para que el texto conserve contraste sea cual sea
   la fotografía que ponga el cliente. */
.site-page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(18, 35, 58, 0.95) 0%,
        rgba(18, 35, 58, 0.88) 55%,
        rgba(18, 35, 58, 0.82) 100%
    );
}

.site-page-hero__shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: end;
}

.site-page-hero__intro {
    display: grid;
    gap: var(--spacing-sm);
}

.site-page-hero__title {
    color: var(--inverse-color);
    font-size: clamp(2.75rem, 7.5vw, 5.5rem);
    line-height: 0.94;
}

.site-page-hero__description {
    max-width: 42ch;
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--secondary-color);
    color: var(--inverse-muted-color);
    font-size: 1.02rem;
}

@media (max-width: 900px) {
    .site-page-hero__shell {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .site-page-hero__media::after {
        background: linear-gradient(180deg, rgba(18, 35, 58, 0.84) 0%, rgba(18, 35, 58, 0.94) 100%);
    }
}

/* --------------------------------------------------------------------------
   6. Cabecera
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: var(--body-color);
    border-bottom: 1px solid var(--border-color);
}

.site-header__shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: var(--header-height);
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.site-header__logo-mark {
    flex: none;
    width: 44px;
    height: 48px;
    object-fit: contain;
}

.site-header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__logo-name {
    color: var(--deep-color);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.site-header__logo-tag {
    color: var(--muted-color);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.site-header__nav-link {
    color: var(--deep-color);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.site-header__nav-link:hover,
.site-header__nav-link[aria-current="page"] {
    color: var(--primary-color);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-color);
    background-color: transparent;
}

.site-header__toggle-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px;
}

.site-header__toggle-bar {
    height: 2px;
    background-color: var(--deep-color);
}

.site-header__panel {
    display: none;
    padding-block: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* La lista y el enlace de «Visitar la finca» son dos piezas separadas —una es
   el menú y el otro su entrada de botón—, así que el panel las reparte con el
   mismo hueco que la lista usa por dentro y las seis entradas se siguen
   leyendo como una sola columna. */
.site-header__panel[data-open="true"] {
    display: grid;
    gap: var(--spacing-sm);
}

.site-header__panel-list {
    display: grid;
    gap: var(--spacing-sm);
}

.site-header__panel-link {
    color: var(--deep-color);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
    width: 100%;
    background-color: var(--deep-color);
    color: var(--inverse-muted-color);
}

.site-footer__shell {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--spacing-xl);
    padding-block: var(--spacing-2xl) var(--spacing-xl);
}

.site-footer__brand-mark {
    width: 52px;
    height: 56px;
    object-fit: contain;
}

.site-footer__brand-name {
    margin-top: var(--spacing-sm);
    color: var(--inverse-color);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
}

.site-footer__brand-description {
    margin-top: var(--spacing-xs);
    font-size: 0.88rem;
}

.site-footer__column-title {
    color: var(--secondary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.site-footer__list {
    display: grid;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

/* La columna de secciones reparte el menú en dos piezas —la lista y el enlace
   destacado, que se pintan por separado—, así que las envuelve para darles el
   mismo hueco que tienen las entradas de la lista entre sí. La separación con
   el título pasa aquí, y la lista deja de ponerla. */
.site-footer__nav {
    display: grid;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.site-footer__nav .site-footer__list {
    margin-top: 0;
}

.site-footer__link {
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--inverse-color);
}

.site-footer__link--accent {
    color: var(--secondary-color);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-md);
    border-top: 1px solid var(--border-inverse-color);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Botón flotante de WhatsApp */
.site-whatsapp {
    position: fixed;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #25d366;
    color: #ffffff;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast);
}

.site-whatsapp:hover {
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   8. Campos de formulario
   -------------------------------------------------------------------------- */

.site-field {
    display: grid;
    gap: var(--spacing-2xs);
}

.site-field__label {
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-field__control {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-inline: var(--field-padding-inline);
    border: 2px solid var(--field-border-color);
    background-color: var(--body-color);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.site-field__control:focus-within {
    border-color: var(--primary-color);
    background-color: var(--surface-color);
}

.site-field__control:focus-within .site-field__icon {
    color: var(--primary-color);
}

.site-field__control--invalid {
    border-color: var(--error-color);
}

.site-field__icon {
    flex: none;
    color: var(--muted-color);
    transition: color var(--transition-fast);
}

.site-field__input {
    flex: 1;
    min-height: var(--field-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--title-color);
    font-family: inherit;
    font-size: 1rem;
}

.site-field__input:focus {
    outline: none;
}

.site-field__input::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

/* Chrome pinta de amarillo el autorrelleno: se neutraliza con una sombra interior. */
.site-field__input:-webkit-autofill {
    box-shadow: inset 0 0 0 100px var(--body-color);
    -webkit-text-fill-color: var(--title-color);
}

textarea.site-field__input {
    padding-block: 0.85rem;
    min-height: 7rem;
    resize: vertical;
}

/* En un campo alto el icono acompaña a la primera línea, no al centro. */
.site-field__control:has(textarea) {
    align-items: flex-start;
}

.site-field__control:has(textarea) .site-field__icon {
    margin-top: 0.95rem;
}

select.site-field__input {
    appearance: none;
    cursor: pointer;
}

.site-field__error {
    color: var(--error-color);
    font-size: 0.8rem;
    font-weight: 600;
}

.site-field__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    color: var(--muted-color);
    font-size: 0.85rem;
    cursor: pointer;
}

.site-field__checkbox {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Trampa anti-spam: fuera de la vista y fuera del recorrido de foco. */
.site-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-form-message {
    padding: var(--spacing-sm);
    border-left: 3px solid var(--success-color);
    background-color: rgba(20, 108, 67, 0.08);
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.site-form-message--error {
    border-left-color: var(--error-color);
    background-color: rgba(179, 38, 30, 0.08);
    color: var(--error-color);
}

/* --------------------------------------------------------------------------
   9. Cursor con carácter equino
   -------------------------------------------------------------------------- */

/* El cursor y su rastro los crea `cursor.js` en tiempo de ejecución, y solo en
   dispositivos con ratón. Aquí queda su apariencia. */

.site-cursor,
.site-cursor-trail {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
}

.site-cursor__dot,
.site-cursor__ring,
.site-cursor-trail__print {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.site-cursor__dot {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background-color: var(--secondary-color);
}

.site-cursor__ring {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 1.5px solid var(--secondary-color);
    border-radius: 50%;
    opacity: 0.55;
    transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease,
        background-color 0.25s ease, opacity 0.25s ease;
}

/* Sobre un elemento accionable el anillo crece y se rellena. */
.site-cursor[data-hovering="true"] .site-cursor__ring {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background-color: rgba(249, 178, 8, 0.16);
    opacity: 0.9;
}

.site-cursor-trail__print {
    color: var(--secondary-color);
    line-height: 0;
}

/* El cursor del sistema se oculta solo cuando el propio hay tomado el relevo. */
@media (hover: hover) and (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor label,
    body.has-custom-cursor summary {
        cursor: none;
    }

    /* En los campos de texto se conserva el cursor nativo: ahí indica dónde
       se va a escribir y sustituirlo entorpecería la escritura. */
    body.has-custom-cursor input,
    body.has-custom-cursor textarea,
    body.has-custom-cursor select {
        cursor: auto;
    }
}

/* --------------------------------------------------------------------------
   10. Animaciones
   -------------------------------------------------------------------------- */

@keyframes site-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* El contenido es visible por defecto. Solo se oculta cuando `reveal.js` lo
   arma, justo antes de observarlo, y se descubre al entrar en pantalla.

   El planteamiento inverso —ocultar aquí y esperar a que el JS lo revele— deja
   la página en blanco en cuanto ese revelado no llega: dentro del editor de
   Elementor, con un error de consola previo, o si el módulo no se encola. */
/* Armar es instantáneo: este estado no declara transición. Si la declarase, el
   contenido se desvanecería a la vista antes de volver a entrar y se vería
   aparecer dos veces. */
[data-reveal][data-reveal-armed="true"] {
    opacity: 0;
    transform: translateY(24px);
}

/* La transición vive en el estado de llegada, así que solo anima el revelado. */
[data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Tiene que llevar los dos atributos: con `[data-reveal]` a secas pierde
       por especificidad contra la regla de armado y el contenido se quedaría
       oculto justo para quien pidió menos movimiento. */
    [data-reveal][data-reveal-armed="true"] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   11. Responsive del sistema
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .site-footer__shell {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Con seis entradas de menú, el logotipo y la llamada a la acción, la barra
   se queda sin aire antes de llegar a la tableta: el menú pasa al panel
   desplegable ya en 1180 px. */
@media (max-width: 1180px) {
    .site-header__nav {
        display: none;
    }

    .site-header__toggle {
        display: flex;
    }
}

@media (max-width: 640px) {
    /* Con el menú ya plegado, la llamada a la acción solo estorba cuando el
       logotipo y el botón del menú se disputan el ancho. Sigue disponible
       como última entrada del panel. */
    .site-header__actions .site-button {
        display: none;
    }

    .site-footer__shell {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .site-footer__bottom {
        flex-direction: column;
    }
}