/* ==========================================================================
   Laudate — hoja de estilos

   Concepto: «templo de noche». Tradición y tecnología.
   Fondo oscuro cálido (la penumbra de un templo), cristal esmerilado flotante
   (las interfaces de la app) y dos acentos con significado:
     · oro    → lo sagrado y lo litúrgico (la luz de las velas, la Tau).
     · violeta→ lo tecnológico (la app, la transposición, los datos).

   Nada de papel claro, ni de olas, ni de filetes: las superficies son vidrio
   suspendido sobre la penumbra, y la jerarquía la marcan la luz y la
   profundidad.

   Es un único fichero servido por AssetMapper. El orden de las capas es el
   orden de la cascada.
   ========================================================================== */

@layer reset, tokens, ambience, base, layout, components, sections, motion;

/* --- Fuentes --------------------------------------------------------------
   Autoalojadas. Plex Serif en titulares; Sans en lectura; Mono en datos. */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-RssxsJZ.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;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-6jrsEWt.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin-78NWkmx.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;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin-ext-WlFXyXd.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin-QJNNIVc.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;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin-ext-Uqu9TNw.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-400-latin-We-90pK.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;
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-500-latin-21kcFb5.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;
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-serif-400-italic-latin-HSeficb.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;
}

@view-transition {
    navigation: auto;
}

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {

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

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 6rem;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd,
    ul,
    ol {
        margin: 0;
    }

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

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

    button,
    input,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    table {
        border-collapse: collapse;
    }

    [hidden] {
        display: none !important;
    }
}

/* ==========================================================================
   Tokens
   ========================================================================== */

@layer tokens {
    :root {
        /* Penumbra: la escala de oscuridad sobre la que flota todo. */
        --night: #140b06;
        --night-2: #1e1109;
        --night-3: #2a190f;

        /* Texto sobre la penumbra. */
        --text: #f6ecdf;
        --text-2: #cbb49c;
        --text-3: #9a8370;

        /* Oro: lo sagrado y lo litúrgico. */
        --gold: #e3a951;
        --gold-hi: #f2c47a;
        --gold-deep: #a9762a;
        --gold-soft: rgba(227, 169, 81, 0.16);

        /* Violeta litúrgico: lo tecnológico. */
        --violet: #8b7bd8;
        --violet-hi: #a99ce8;
        --violet-soft: rgba(139, 123, 216, 0.18);

        /* Semánticos. */
        --heading: var(--text);
        --accent: var(--gold);
        --focus: var(--gold-hi);

        /* Vidrio. El corazón del sistema: superficies suspendidas. */
        --glass: rgba(246, 236, 223, 0.06);
        --glass-2: rgba(246, 236, 223, 0.09);
        --glass-edge: rgba(246, 236, 223, 0.16);
        --glass-edge-2: rgba(246, 236, 223, 0.3);
        --blur: 22px;

        /* Sombras: dos luces opuestas, como un objeto realmente elevado. */
        --lift-1: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
        --lift-2: 0 4px 8px rgba(0, 0, 0, 0.32), 0 28px 56px -20px rgba(0, 0, 0, 0.6);
        --lift-3: 0 8px 16px rgba(0, 0, 0, 0.34), 0 44px 84px -28px rgba(0, 0, 0, 0.66);
        --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12);

        /* Estado. */
        --ok: #6fce9a;
        --err: #ff9b8f;

        /* Tipografía. */
        --f-display: 'IBM Plex Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
        --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

        /* Escala fluida. */
        --fs-hero: clamp(2.75rem, 1.4rem + 4.6vw, 5rem);
        --fs-h1: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
        --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
        --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
        --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);

        /* Espacio. */
        --gutter: clamp(1.25rem, 4vw, 3rem);
        --wrap: 78rem;
        --wrap-narrow: 44rem;
        --section-y: clamp(3rem, 1.5rem + 4vw, 5.5rem);
        --header-h: 4.5rem;

        --r-sm: 12px;
        --r: 20px;
        --r-lg: 28px;
        --r-round: 999px;

        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        --dur: 0.3s;
    }
}

/* ==========================================================================
   Ambiente
   Dos manchas de luz difusa —oro arriba a la izquierda, violeta abajo a la
   derecha— fijas detrás de todo. El vidrio las desenfoca y de ahí sale el
   efecto de profundidad.
   ========================================================================== */

@layer ambience {
    body::before {
        content: '';
        position: fixed;
        inset: -20%;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(42% 38% at 18% 8%, rgba(227, 169, 81, 0.22), transparent 62%),
            radial-gradient(46% 42% at 88% 22%, rgba(139, 123, 216, 0.16), transparent 64%),
            radial-gradient(58% 50% at 50% 108%, rgba(227, 169, 81, 0.12), transparent 66%);
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
    html {
        background: var(--night);
    }

    body {
        font-family: var(--f-sans);
        font-size: 1.0625rem;
        line-height: 1.65;
        color: var(--text-2);
        background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%) fixed;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        min-width: 20rem;
    }

    body.has-cookie-modal {
        overflow: hidden;
    }

    html:has(.mobile-nav[data-open="true"]) {
        overflow: hidden;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--f-display);
        font-weight: 400;
        color: var(--heading);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--fs-h1);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    h2 {
        font-size: var(--fs-h2);
        line-height: 1.1;
        letter-spacing: -0.022em;
    }

    h3 {
        font-size: var(--fs-h3);
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    h1 em,
    h2 em,
    h3 em {
        font-style: italic;
        color: var(--gold);
    }

    p {
        text-wrap: pretty;
    }

    strong,
    b {
        font-weight: 600;
        color: var(--text);
    }

    a {
        color: var(--gold-hi);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }

    a:hover {
        text-decoration-thickness: 2px;
    }

    ::selection {
        background: var(--gold);
        color: var(--night);
    }

    :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: var(--r-sm);
    }

    .skip-link {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 210;
        padding: 0.75rem 1rem;
        background: var(--gold);
        color: var(--night);
        font-weight: 600;
        border-radius: var(--r-sm);
        transform: translateY(-200%);
    }

    .skip-link:focus {
        transform: none;
    }

    .measure {
        max-width: 42rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .mt-6 {
        margin-top: 1.5rem;
    }

    .mt-8 {
        margin-top: 2rem;
    }

    /* Etiqueta en monoespaciada: el «tipo de letra de los datos». */
    .eyebrow {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold);
        line-height: 1.5;
    }

    .lede {
        font-family: var(--f-display);
        font-style: italic;
        font-size: var(--fs-lead);
        line-height: 1.5;
        color: var(--text);
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

@layer layout {
    .container {
        width: 100%;
        max-width: calc(var(--wrap) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .container--narrow {
        max-width: calc(var(--wrap-narrow) + 2 * var(--gutter));
    }

    .section {
        position: relative;
        padding-block: var(--section-y);
    }

    .grid {
        display: grid;
        gap: clamp(1rem, 2.2vw, 1.75rem);
        counter-reset: card;
    }

    @media (min-width: 640px) {

        .grid--3,
        .grid--4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 760px) {
        .grid--2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 980px) {
        .grid--3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 1100px) {
        .grid--4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .split {
        display: grid;
        gap: clamp(1.75rem, 5vw, 3.5rem);
        align-items: center;
    }

    @media (min-width: 900px) {
        .split {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Cabecera de sección: etiqueta, titular y entradilla. Sin filetes:
       la separación la da el aire y la luz. */
    .section-head {
        display: grid;
        gap: 1rem;
        max-width: 44rem;
        margin-bottom: clamp(1.75rem, 4vw, 3rem);
    }

    .section-head--center {
        justify-items: center;
        text-align: center;
        margin-inline: auto;
    }
}

/* ==========================================================================
   Componentes
   ========================================================================== */

@layer components {

    /* --- Botones ----------------------------------------------------------- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.8rem 1.5rem;
        border: 1px solid transparent;
        border-radius: var(--r-round);
        font-family: var(--f-sans);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    /* La acción sagrada: luz de vela. */
    .btn--primary {
        background: linear-gradient(180deg, var(--gold-hi), var(--gold));
        color: #2a1608;
        font-weight: 600;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -12px rgba(227, 169, 81, 0.8);
    }

    .btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 32px -14px rgba(227, 169, 81, 0.9);
    }

    /* La acción tecnológica: violeta. */
    .btn--violet {
        background: linear-gradient(180deg, var(--violet-hi), var(--violet));
        color: #18122c;
        font-weight: 600;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 24px -12px rgba(139, 123, 216, 0.8);
    }

    .btn--violet:hover {
        transform: translateY(-2px);
    }

    .btn--glass {
        background: var(--glass);
        border-color: var(--glass-edge-2);
        color: var(--text);
        backdrop-filter: blur(var(--blur));
    }

    .btn--glass:hover {
        background: var(--glass-2);
        border-color: var(--gold);
        transform: translateY(-2px);
    }

    .btn--sm {
        padding: 0.55rem 1rem;
        font-size: 0.875rem;
    }

    .btn--block {
        width: 100%;
    }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 500;
        text-decoration: none;
    }

    .link-arrow svg {
        transition: transform var(--dur) var(--ease);
    }

    .link-arrow:hover svg {
        transform: translateX(3px);
    }

    /* --- Etiquetas ---------------------------------------------------------- */
    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.8rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-round);
        background: var(--glass);
        backdrop-filter: blur(12px);
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--text-2);
        white-space: nowrap;
    }

    .chip--gold {
        border-color: rgba(227, 169, 81, 0.4);
        background: var(--gold-soft);
        color: var(--gold-hi);
    }

    .chip--violet {
        border-color: rgba(139, 123, 216, 0.4);
        background: var(--violet-soft);
        color: var(--violet-hi);
    }

    /* --- Cristal: la superficie fundamental -------------------------------- */
    .glass {
        position: relative;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-lg);
        background: var(--glass);
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-2), var(--inset-hi);
    }

    /* --- Tarjetas flotantes ------------------------------------------------ */
    .card {
        position: relative;
        padding: clamp(1.375rem, 2.5vw, 1.875rem);
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-lg);
        background: linear-gradient(158deg, var(--glass-2), var(--glass));
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-2), var(--inset-hi);
        counter-increment: card;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    /* Flotan de verdad: se elevan al pasar por encima. */
    .card:hover {
        transform: translateY(-6px);
        border-color: var(--glass-edge-2);
        box-shadow: var(--lift-3), var(--inset-hi);
    }

    /* Halo de luz que entra por la esquina superior izquierda. */
    .card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.1), transparent 58%);
        opacity: 0.9;
        pointer-events: none;
    }

    .card>* {
        position: relative;
        z-index: 1;
    }

    .card--gold {
        border-color: rgba(227, 169, 81, 0.34);
    }

    .card--violet {
        border-color: rgba(139, 123, 216, 0.34);
    }

    .card__index {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--r-round);
        background: var(--gold-soft);
        border: 1px solid rgba(227, 169, 81, 0.34);
        font-family: var(--f-mono);
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--gold-hi);
    }

    .card__index::before {
        content: counter(card, decimal-leading-zero);
    }

    .card--violet .card__index {
        background: var(--violet-soft);
        border-color: rgba(139, 123, 216, 0.34);
        color: var(--violet-hi);
    }

    .card h3 {
        margin-top: 0.875rem;
    }

    .card p {
        margin-top: 0.5rem;
        color: var(--text-2);
        font-size: 0.9875rem;
    }

    /* --- Formularios -------------------------------------------------------- */
    .form {
        display: grid;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    /* Panel de cristal que centra el formulario de contacto. */
    .form-panel {
        margin-top: 2rem;
        padding: clamp(1.5rem, 4vw, 2.5rem);
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-lg);
        background: linear-gradient(158deg, var(--glass-2), var(--glass));
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-2), var(--inset-hi);
        text-align: left;
    }

    .form-panel .form {
        margin-top: 0;
    }

    .contact-intro {
        text-align: center;
        color: var(--text-2);
    }

    .contact-alternative {
        margin-top: 1.5rem;
        text-align: center;
        font-size: 0.9375rem;
        color: var(--text-3);
    }

    .form__group {
        border: 0;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 0.6rem;
    }

    .form__legend,
    .form label {
        font-weight: 600;
        color: var(--text);
    }

    .form input[type="text"],
    .form input[type="email"],
    .form input[type="number"],
    .form textarea {
        width: 100%;
        padding: 0.8rem 1rem;
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r-sm);
        background: rgba(20, 11, 6, 0.5);
        backdrop-filter: blur(8px);
        font: inherit;
        color: var(--text);
    }

    .form input::placeholder,
    .form textarea::placeholder {
        color: var(--text-3);
    }

    .form input:focus-visible,
    .form textarea:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 1px;
    }

    .form__legal {
        font-size: 0.9rem;
        color: var(--text-3);
    }

    /* --- Casilla de consentimiento ------------------------------------------ */
    /* Sin estilar es un control nativo, ajeno al resto del formulario. */
    .form__check {
        /* Symfony pinta primero la etiqueta y después la casilla, así que la
           casilla saldría a la derecha del texto. Con columnas explícitas se
           coloca donde debe, a la izquierda, que es como se lee. */
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 0.7rem;
        padding: 0.85rem 1rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-sm);
        background: var(--glass);
        backdrop-filter: blur(12px);
    }

    .form__check input[type='checkbox'] {
        grid-column: 1;
        grid-row: 1;
        flex: none;
        appearance: none;
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.1rem 0 0;
        border: 1px solid var(--glass-edge-2);
        border-radius: 6px;
        background: rgba(20, 11, 6, 0.6);
        cursor: pointer;
        display: grid;
        place-content: center;
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    /* La marca se dibuja con un trazo; así hereda el color del tema. */
    .form__check input[type='checkbox']::after {
        content: '';
        width: 0.6rem;
        height: 0.3rem;
        margin-top: -0.12rem;
        border-left: 2px solid var(--night);
        border-bottom: 2px solid var(--night);
        transform: rotate(-45deg) scale(0);
        transition: transform var(--dur) var(--ease);
    }

    .form__check input[type='checkbox']:checked {
        background: var(--gold);
        border-color: var(--gold-hi);
    }

    .form__check input[type='checkbox']:checked::after {
        transform: rotate(-45deg) scale(1);
    }

    .form__check input[type='checkbox']:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    /* La etiqueta queda como parte de la tarjeta y es clicable por completo. */
    .form__check label {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 1.45;
        color: var(--text-2);
        cursor: pointer;
    }

    /* --- Errores de campo --------------------------------------------------- */
    /* Symfony pinta los errores como una lista dentro del propio campo. Sin
       estilar, el reset deja el texto en el color del cuerpo y sin viñeta, así
       que un error pasa por una línea más del formulario y el visitante no ve
       por qué se ha rechazado el envío. */
    .form > div > ul {
        margin: 0.4rem 0 0;
        padding: 0;
        list-style: none;
        font-size: 0.875rem;
        line-height: 1.45;
        color: var(--err);
    }

    .form > div > ul li + li {
        margin-top: 0.2rem;
    }

    /* La casilla de consentimiento es una rejilla de dos columnas: sin esto el
       error cae en la columna estrecha de la casilla y se parte en varias
       líneas. */
    .form__check > ul {
        grid-column: 1 / -1;
    }

    /* --- Aviso dentro del formulario ---------------------------------------- */
    /* Se pinta al principio del formulario, que es donde queda la vista tras
       recargar la página; el script lo lleva a la pantalla si hiciera falta. */
    .form-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        margin-top: 0.25rem;
        padding: 0.85rem 1rem;
        border: 1px solid var(--glass-edge);
        border-left: 3px solid var(--err);
        border-radius: var(--r-sm);
        background: rgba(255, 155, 143, 0.09);
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--err);
    }

    /* El icono se dibuja con CSS: no depende de una fuente ni de un SVG externo. */
    .form-notice::before {
        content: '';
        flex: none;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: 0.15rem;
        background: currentColor;
        mask-image: radial-gradient(circle at 50% 22%, transparent 0.11rem, #000 0.12rem);
        -webkit-mask-image: radial-gradient(circle at 50% 22%, transparent 0.11rem, #000 0.12rem);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .form-notice--success {
        border-left-color: var(--ok);
        background: rgba(111, 206, 154, 0.09);
        color: var(--ok);
    }

    .form-notice--success::before {
        clip-path: none;
        mask-image: none;
        -webkit-mask-image: none;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.85;
    }

    /* --- Aviso de privacidad dentro del formulario -------------------------- */
    .privacy-note {
        display: grid;
        gap: 0.5rem;
        padding: 1rem 1.15rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-sm);
        background: var(--glass);
        font-size: 0.9rem;
        line-height: 1.55;
        color: var(--text-2);
    }

    .privacy-note__title {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold-hi);
    }

    .privacy-note__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        font-size: 0.875rem;
    }

    .privacy-note__links a {
        color: var(--gold-hi);
    }

    /* El detalle legal del formulario reutiliza las fichas de cristal. */
    .privacy-detail {
        margin-top: clamp(2rem, 4vw, 3rem);
    }

    .choice-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 0.6rem;
    }

    .choice-grid--rows {
        grid-template-columns: 1fr;
    }

    .choice-grid label {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 1rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r-sm);
        background: var(--glass);
        backdrop-filter: blur(12px);
        font-weight: 500;
        cursor: pointer;
        transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .choice-grid label:hover {
        border-color: var(--glass-edge-2);
    }

    .choice-grid label:has(input:checked) {
        border-color: var(--gold);
        background: var(--gold-soft);
        box-shadow: 0 0 0 3px rgba(227, 169, 81, 0.14);
    }

    /* --- Avisos ------------------------------------------------------------- */
    .flash {
        max-width: calc(var(--wrap) + 2 * var(--gutter));
        margin: 1rem auto 0;
        padding: 0.9rem 1.25rem;
        border-radius: var(--r-sm);
        border: 1px solid var(--glass-edge);
        background: var(--glass);
        backdrop-filter: blur(var(--blur));
        font-size: 0.9375rem;
    }

    .flash--success {
        border-color: rgba(111, 206, 154, 0.4);
        color: var(--ok);
    }

    .flash--error {
        border-color: rgba(255, 155, 143, 0.4);
        color: var(--err);
    }

    .notice {
        padding: 1rem 1.25rem;
        border: 1px solid var(--glass-edge);
        border-left: 3px solid var(--gold);
        border-radius: var(--r-sm);
        background: var(--glass);
        backdrop-filter: blur(var(--blur));
        color: var(--text-2);
    }

    .notice--pending {
        border-left-color: var(--violet);
        color: var(--text-2);
    }

    .callout {
        padding: clamp(1.25rem, 3vw, 1.875rem);
        border: 1px solid rgba(227, 169, 81, 0.3);
        border-radius: var(--r-lg);
        background: linear-gradient(158deg, var(--glass-2), var(--glass));
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-2), var(--inset-hi);
    }

    .callout__title {
        font-size: var(--fs-h3);
    }

    .callout__list {
        margin-top: 0.875rem;
        display: grid;
        gap: 0.5rem;
    }

    .callout__list li {
        position: relative;
        padding-left: 1.6rem;
        color: var(--text-2);
    }

    .callout__list li::before {
        content: '';
        position: absolute;
        left: 0.3rem;
        top: 0.62em;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
        background: var(--gold);
    }

    /* --- Capturas ----------------------------------------------------------- */
    .shot {
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r);
        box-shadow: var(--lift-3), var(--inset-hi);
        background: var(--night-2);
        overflow: hidden;
    }

    /* --- Interruptor (consentimiento) --------------------------------------- */
    .switch {
        position: relative;
        display: inline-flex;
        flex: none;
    }

    .switch input {
        position: absolute;
        opacity: 0;
        width: 2.75rem;
        height: 1.5rem;
        margin: 0;
        cursor: pointer;
    }

    .switch__track {
        position: relative;
        width: 2.75rem;
        height: 1.5rem;
        border-radius: var(--r-round);
        background: rgba(20, 11, 6, 0.6);
        border: 1px solid var(--glass-edge-2);
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
        pointer-events: none;
    }

    .switch__track::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 50%;
        background: var(--text-2);
        transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .switch input:checked+.switch__track {
        background: var(--gold-soft);
        border-color: var(--gold);
    }

    .switch input:checked+.switch__track::after {
        transform: translateX(1.25rem);
        background: var(--gold-hi);
    }

    .switch input:focus-visible+.switch__track {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }
}

/* ==========================================================================
   Estructura: cabecera, portada, secciones, pie
   ========================================================================== */

@layer sections {

    /* --- Cabecera: cristal suspendido --------------------------------------- */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(20, 11, 6, 0.62);
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        transition: box-shadow var(--dur) var(--ease);
    }

    .site-header[data-scrolled="true"] {
        box-shadow: 0 1px 0 var(--glass-edge), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        min-height: var(--header-h);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
        color: var(--heading);
    }

    .brand__mark {
        width: auto;
        height: 2.25rem;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(227, 169, 81, 0.35));
    }

    .brand__text {
        display: grid;
        line-height: 1;
    }

    .brand__name {
        font-family: var(--f-display);
        font-size: 1.375rem;
        letter-spacing: -0.01em;
    }

    .brand__sub {
        font-family: var(--f-mono);
        font-size: 0.625rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-top: 0.25rem;
    }

    .site-nav {
        margin-inline-start: auto;
    }

    .site-nav__list {
        display: none;
        gap: 1.75rem;
    }

    .site-nav__link {
        position: relative;
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--text-2);
        transition: color var(--dur) var(--ease);
    }

    .site-nav__link:hover,
    .site-nav__link[aria-current="page"] {
        color: var(--gold-hi);
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-inline-start: auto;
    }

    .site-nav+.header-actions {
        margin-inline-start: 0;
    }

    .header-cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r-round);
        background: var(--glass);
        backdrop-filter: blur(12px);
    }

    .nav-toggle__bars {
        display: grid;
        gap: 4px;
        width: 1.125rem;
    }

    .nav-toggle__bars span {
        height: 2px;
        border-radius: 2px;
        background: var(--gold);
        transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .mobile-nav {
        display: grid;
        overflow: hidden;
        max-height: 0;
        transition: max-height var(--dur) var(--ease);
    }

    .mobile-nav[data-open="true"] {
        max-height: 26rem;
    }

    .mobile-nav__list {
        display: grid;
        gap: 0.25rem;
        padding-block: 1rem;
    }

    .mobile-nav__link {
        display: block;
        padding: 0.85rem 0;
        font-family: var(--f-display);
        font-size: 1.25rem;
        text-decoration: none;
        color: var(--text);
    }

    .mobile-nav__cta {
        margin-block: 1rem 1.5rem;
    }

    /* --- Portada ------------------------------------------------------------ */
    .hero {
        position: relative;
        overflow: hidden;
        padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
    }

    /* El símbolo de Laudate se ancla a la columna de las capturas, no a la
       ventana: en pantallas ultrapanorámicas se queda junto a ellas en lugar
       de perderse en el borde. El contenedor lo recorta. */
    .hero__stage {
        position: relative;
        isolation: isolate;
    }

    .hero__mark {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: calc(-50% + 9rem) -50%;
        z-index: -1;
        /* El reset global limita las imágenes a `max-width: 100%`, que ataría
           el símbolo al ancho de la columna. Aquí queremos que la desborde. */
        max-width: none;
        width: 104%;
        height: auto;
        opacity: 0.12;
        pointer-events: none;
        user-select: none;
        /* El símbolo del logo —la Tau de madera con la clave fundida dentro—
           se queda como una talla apenas entrevista tras las pantallas, con un
           halo cálido. No se oscurece con `brightness`: sobre el fondo de noche
           eso lo fundiría con el negro y desaparecería. */
        filter: saturate(0.9) sepia(0.08) drop-shadow(0 0 70px rgba(227, 169, 81, 0.32));
    }

    /* En una sola columna las capturas quedan debajo del texto y ocupan todo
       el ancho: el símbolo se limita para no invadir el titular. */
    @media (max-width: 979px) {
        .hero__mark {
            width: min(88%, 18rem);
            translate: -50% -50%;
            opacity: 0.1;
        }
    }

    .hero__grid {
        position: relative;
        display: grid;
        gap: clamp(2.5rem, 6vw, 4.5rem);
        align-items: center;
    }

    .hero__grid>* {
        min-width: 0;
    }

    @media (min-width: 980px) {
        .hero__grid {
            grid-template-columns: 1.05fr 0.95fr;
        }
    }

    .hero__title {
        margin-top: 1rem;
    }

    .hero__lead {
        margin-top: 1.25rem;
        max-width: 34rem;
        font-size: var(--fs-lead);
        line-height: 1.55;
        color: var(--text-2);
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 2rem;
    }

    .hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1.75rem;
    }

    /* Las capturas flotan en diagonal, como pantallas suspendidas. */
    .hero__shots {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(0.75rem, 2vw, 1.5rem);
        perspective: 1200px;
    }

    .hero__shot {
        flex: 0 1 12rem;
        width: 38%;
        min-width: 0;
        border-radius: var(--r);
    }

    .hero__shot:first-child {
        transform: translateY(1.5rem);
    }

    .hero__shot:last-child {
        transform: translateY(-1.5rem);
    }

    /* --- Tiendas ------------------------------------------------------------ */
    .store-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.875rem;
        margin-top: 1.75rem;
    }

    .store {
        display: inline-flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.9rem 1.5rem;
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r);
        background: var(--glass);
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-2), var(--inset-hi);
        text-decoration: none;
        color: var(--text);
        transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .store:hover {
        transform: translateY(-4px);
        border-color: var(--gold);
        box-shadow: var(--lift-3), var(--inset-hi);
    }

    .store__label {
        display: grid;
        line-height: 1.15;
    }

    .store__brand {
        font-family: var(--f-display);
        font-size: 1.125rem;
    }

    .store__hint {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    /* --- Galería ------------------------------------------------------------ */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        gap: clamp(1rem, 2.5vw, 1.75rem);
    }

    .gallery figure {
        display: grid;
        gap: 0.75rem;
        transition: transform var(--dur) var(--ease);
    }

    .gallery figure:hover {
        transform: translateY(-6px);
    }

    .gallery figcaption {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-3);
        text-align: center;
    }

    /* --- Vitrina: capturas de escritorio ------------------------------------ */
    .showcase {
        display: grid;
        gap: 1rem;
        margin-top: clamp(2rem, 4vw, 3rem);
    }

    .showcase figure {
        display: grid;
        gap: 0.75rem;
    }

    .showcase img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r-lg);
        background: var(--night-2);
        box-shadow: var(--lift-3), var(--inset-hi);
    }

    .showcase figcaption {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .showcase--pair {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    }

    /* --- Franja de donación ------------------------------------------------- */
    .donate-band {
        position: relative;
        margin-top: var(--section-y);
        padding-block: clamp(3rem, 7vw, 5rem);
    }

    .donate-band__panel {
        position: relative;
        overflow: hidden;
        padding: clamp(1.75rem, 4vw, 3.25rem);
        border: 1px solid rgba(227, 169, 81, 0.3);
        border-radius: var(--r-lg);
        background: linear-gradient(150deg, rgba(227, 169, 81, 0.14), rgba(139, 123, 216, 0.1) 60%, transparent);
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-3), var(--inset-hi);
    }

    .donate-band__inner {
        position: relative;
        display: grid;
        gap: 1.5rem;
        justify-items: start;
        max-width: 44rem;
    }

    /* --- Legal -------------------------------------------------------------- */
    .legal-hero {
        padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    }

    /* En las páginas de trámite, todo el bloque va centrado en la página. */
    .legal-hero--center .container {
        text-align: center;
    }

    .legal-hero__meta {
        margin-top: 0.75rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .legal-document {
        max-width: 52rem;
        margin-inline: auto;
    }

    .legal-document h2 {
        margin-top: 2.75rem;
        font-size: var(--fs-h3);
    }

    .legal-document h2:first-of-type {
        margin-top: 1.5rem;
    }

    .legal-document p,
    .legal-document ul,
    .legal-document dl {
        margin-top: 0.875rem;
        color: var(--text-2);
    }

    .legal-document ul {
        display: grid;
        gap: 0.5rem;
        padding-left: 1.25rem;
        list-style: disc;
    }

    .legal-document ul::marker,
    .legal-document li::marker {
        color: var(--gold);
    }

    .legal-document code {
        font-family: var(--f-mono);
        font-size: 0.875em;
        background: var(--glass-2);
        border: 1px solid var(--glass-edge);
        border-radius: 6px;
        padding: 0.1em 0.4em;
        color: var(--gold-hi);
    }

    /* Datos legales: cada dato en su propia ficha de cristal. Se lee mucho
       mejor que una tabla, sobre todo en móvil. */
    .legal-details {
        display: grid;
        gap: 0.875rem;
        margin-top: 1.25rem;
    }

    .legal-details>div {
        padding: 1rem 1.25rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r);
        background: var(--glass);
        backdrop-filter: blur(var(--blur));
    }

    .legal-details dt {
        font-weight: 600;
        color: var(--text);
    }

    .legal-details dd {
        margin-top: 0.35rem;
        color: var(--text-2);
    }

    .legal-details dd code {
        word-break: break-word;
    }

    /* --- Consentimiento: barra inferior ------------------------------------- */
    .cookie-banner {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 150;
        background: rgba(20, 11, 6, 0.82);
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        border-top: 1px solid var(--glass-edge);
        box-shadow: 0 -18px 44px -26px rgba(0, 0, 0, 0.9);
    }

    .cookie-banner__inner {
        display: grid;
        gap: 1.25rem;
        padding-block: 1.25rem;
    }

    @media (min-width: 880px) {
        .cookie-banner__inner {
            grid-template-columns: 1fr auto;
            align-items: center;
        }
    }

    .cookie-banner__title {
        font-family: var(--f-display);
        font-size: 1.125rem;
        color: var(--text);
        margin-bottom: 0.25rem;
    }

    .cookie-banner__text {
        max-width: 52rem;
        font-size: 0.9375rem;
        color: var(--text-2);
    }

    .cookie-banner__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
    }

    .cookie-banner__link {
        font-size: 0.875rem;
        color: var(--gold-hi);
    }

    /* --- Consentimiento: panel ---------------------------------------------- */
    .cookie-modal {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        place-items: center;
        padding: var(--gutter);
    }

    .cookie-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(8, 4, 2, 0.72);
        backdrop-filter: blur(6px);
    }

    .cookie-modal__panel {
        position: relative;
        width: min(38rem, 100%);
        max-height: min(90vh, 46rem);
        overflow: auto;
        padding: clamp(1.5rem, 3.5vw, 2.25rem);
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r-lg);
        background: linear-gradient(158deg, rgba(42, 25, 15, 0.92), rgba(20, 11, 6, 0.94));
        backdrop-filter: blur(var(--blur)) saturate(1.3);
        box-shadow: var(--lift-3), var(--inset-hi);
        color: var(--text);
    }

    .cookie-modal__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .cookie-modal__close {
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--glass-edge-2);
        border-radius: var(--r-round);
        background: var(--glass);
        color: var(--text);
    }

    .cookie-modal__close:hover {
        border-color: var(--gold);
    }

    .cookie-modal__lead {
        margin-top: 0.75rem;
        color: var(--text-2);
        font-size: 0.9375rem;
    }

    .cookie-modal__list {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.75rem;
    }

    .cookie-modal__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        padding: 1.125rem 1.25rem;
        border: 1px solid var(--glass-edge);
        border-radius: var(--r);
        background: var(--glass);
    }

    .cookie-modal__name {
        font-weight: 600;
        color: var(--text);
    }

    .cookie-modal__desc {
        font-size: 0.875rem;
        color: var(--text-3);
        margin-top: 0.2rem;
    }

    .cookie-modal__always {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ok);
        white-space: nowrap;
    }

    .cookie-modal__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        justify-content: flex-end;
        margin-top: 1.75rem;
    }

    /* --- Pie ---------------------------------------------------------------- */
    .site-footer {
        position: relative;
        margin-top: var(--section-y);
        padding-block: var(--section-y) 1.75rem;
        border-top: 1px solid var(--glass-edge);
        background: rgba(10, 5, 2, 0.5);
        backdrop-filter: blur(var(--blur));
    }

    .site-footer__grid {
        display: grid;
        gap: clamp(1.75rem, 4vw, 3rem);
    }

    @media (min-width: 760px) {
        .site-footer__grid {
            grid-template-columns: 1.6fr 1fr 1fr;
        }
    }

    .site-footer__claim {
        margin-top: 0.875rem;
        max-width: 26rem;
        color: var(--text-2);
    }

    .site-footer__entity {
        margin-top: 1rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        line-height: 1.7;
        color: var(--text-3);
    }

    .site-footer__title {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 1rem;
    }

    .site-footer__list {
        display: grid;
        gap: 0.6rem;
    }

    .site-footer__list a,
    .site-footer__link {
        color: var(--text-2);
        text-decoration: none;
        font-size: 0.9375rem;
        background: none;
        border: 0;
        padding: 0;
        text-align: left;
    }

    .site-footer__list a:hover,
    .site-footer__link:hover {
        color: var(--gold-hi);
    }

    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        justify-content: space-between;
        align-items: center;
        margin-top: clamp(2rem, 5vw, 3rem);
        padding-top: 1.5rem;
        border-top: 1px solid var(--glass-edge);
        font-size: 0.8125rem;
        color: var(--text-3);
    }

    .site-footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
    }

    .site-footer__legal a,
    .site-footer__legal button {
        color: var(--text-3);
        text-decoration: none;
        background: none;
        border: 0;
        padding: 0;
        font-size: 0.8125rem;
    }

    .site-footer__legal a:hover,
    .site-footer__legal button:hover {
        color: var(--gold-hi);
    }
}

/* ==========================================================================
   Movimiento
   ========================================================================== */

@layer motion {

    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }

        .reveal {
            opacity: 1;
            transform: none;
        }
    }
}