/* ==========================================================================
   Orian — hoja de estilos

   Concepto: «registro de operación». La web se lee como un informe técnico bien
   compuesto: papel cálido, tinta verde-azulada, titulares con serifa, datos y
   etiquetas en monoespaciada, reglas finas en lugar de cajas y numeración de
   sección. El anillo con la luna recortada del logotipo es el único motivo
   gráfico y aparece a gran escala, recortado por el borde.

   Reglas de color (cada una tiene una razón):
     · teal      → información: enlaces, etiquetas, estados vivos.
     · naranja   → acción: solo el botón principal.
     · tinta     → estructura: titulares, reglas y superficies oscuras.

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

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

/* --- Fuentes --------------------------------------------------------------
   Autoalojadas. Plex Serif solo 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;
}

/* Carga cruzada entre páginas sin JavaScript. La cabecera permanece fija. */
@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 {
        /* Superficies: papel cálido, casi blanco, y tinta oscura. */
        --paper: #f6f4ef;
        --paper-2: #ece9e1;
        --paper-3: #e0dcd0;
        --white: #ffffff;
        --ink: #062a30;
        --ink-2: #0b3a42;

        /* Texto sobre papel. Todos superan 4,5:1 sobre --paper y --paper-2. */
        --text: #0b2126;
        --text-2: #354b51;
        --text-3: #566b70;

        /* Reglas y filetes. */
        --line: rgba(6, 42, 48, 0.14);
        --line-2: rgba(6, 42, 48, 0.32);
        --rule: #062a30;

        /* Teal corporativo (#058696). --teal para formas grandes; --teal-ink
           para texto pequeño, que necesita más contraste. */
        --teal: #058696;
        --teal-ink: #04707e;
        --teal-soft: #dbecee;
        --teal-lit: #5cc0cd;

        /* Naranja corporativo (#FA9526). Reservado para la acción principal. */
        --signal: #fa9526;
        --signal-hi: #ffab4d;
        --signal-ink: #96520a;

        /* Texto sobre tinta. */
        --on-ink: #eef5f5;
        --on-ink-2: #b6cfd3;
        --on-ink-3: #8db0b6;
        --line-ink: rgba(255, 255, 255, 0.16);
        --line-ink-2: rgba(255, 255, 255, 0.34);

        /* Estado. */
        --ok: #1c7a4a;
        --ok-bg: #e2f1e8;
        --err: #b3261e;
        --err-bg: #f8e4e2;

        /* Semánticos que cambian en superficies oscuras. */
        --heading: var(--ink);
        --accent: var(--teal-ink);
        --focus: var(--teal-ink);

        /* 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.375rem, 1.45rem + 3.3vw, 4.25rem);
        --fs-h1: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
        --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem);
        --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
        --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);

        /* Espacio y medidas. */
        --gutter: clamp(1.25rem, 4vw, 3rem);
        --wrap: 80rem;
        --wrap-narrow: 46rem;
        --section-y: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);
        --edge-h: clamp(5rem, 11vw, 9.5rem);
        --black: #031a1e;
        --edge-soft: clamp(2.5rem, 5.5vw, 4.75rem);
        --wave-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23093840'/%3E%3Cstop offset='1' stop-color='%23062a30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%235cc0cd' fill-opacity='.14' d='M0 110C60 96 120 70 220 72S380 100 470 88 640 44 760 60 900 96 1010 78 1160 42 1260 50 1360 84 1440 70V140H0Z'/%3E%3Cpath fill='%232b96a1' fill-opacity='.22' d='M0 118C80 104 160 84 260 88S420 108 520 98 690 60 800 74 930 104 1040 92 1190 62 1290 68 1380 96 1440 88V140H0Z'/%3E%3Cpath fill='url(%23s)' d='M0 128C90 118 180 102 280 106S450 122 560 114 720 84 830 94 950 116 1060 108 1210 86 1310 90 1390 112 1440 108V140H0Z'/%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%232b96a1' stroke-opacity='.4' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='1 7' d='M0 100C70 86 140 62 240 64S410 92 500 80 670 36 790 52 920 88 1030 70 1180 34 1280 42 1380 74 1440 60'/%3E%3C/svg%3E");
        --wave-ink-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a323a'/%3E%3Cstop offset='1' stop-color='%23062a30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%235cc0cd' fill-opacity='.12' d='M0 74C120 92 190 116 300 110S450 60 570 66 700 122 820 116 950 58 1070 62 1230 118 1330 106 1400 70 1440 78V140H0Z'/%3E%3Cpath fill='%232b96a1' fill-opacity='.2' d='M0 96C140 112 210 130 330 122S480 78 610 84 740 134 870 126 1000 74 1130 78 1280 128 1370 116 1420 92 1440 96V140H0Z'/%3E%3Cpath fill='url(%23s2)' d='M0 114C150 126 230 140 350 132S500 96 630 100 760 140 890 132 1020 90 1150 94 1300 136 1390 126 1430 108 1440 110V140H0Z'/%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%232b96a1' stroke-opacity='.32' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='1 8' d='M0 62C130 80 200 106 320 98S470 48 600 54 730 112 860 104 990 46 1120 50 1270 106 1360 94 1410 60 1440 66'/%3E%3C/svg%3E");
        --header-h: 4.25rem;
        --bleed: max(var(--gutter), calc((100vw - var(--wrap)) / 2));

        --r: 2px;
        --r-lg: 6px;

        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

        /* Vidrio esmerilado: cristal claro sobre papel y cristal tenue sobre tinta. */
        --glass-bg: color-mix(in srgb, var(--white) 55%, transparent);
        --glass-line: rgba(6, 42, 48, 0.1);
        --glass-shadow: 0 12px 32px -16px rgba(6, 42, 48, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        --dur: 0.28s;

        --shot-shadow: 0 1px 2px rgba(6, 42, 48, 0.1), 0 24px 48px -24px rgba(6, 42, 48, 0.4);

        /* Anillo del logotipo (geometría medida sobre el original). */
        --ring-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cmask id='m'%3E%3Crect width='300' height='300' fill='white'/%3E%3Cpath d='M211 34.59A128.92 128.92 0 0 1 211 264.15L211 242.78A109.78 109.78 0 0 0 211 56.26Z' fill='black'/%3E%3C/mask%3E%3Ccircle cx='149.5' cy='149.5' r='124.25' fill='none' stroke='black' stroke-width='51.5' mask='url(%23m)'/%3E%3C/svg%3E");
    }

    /* Superficies oscuras: se redefinen los semánticos y todo lo demás sigue. */
    .section--ink,
    .cta-band,
    .site-footer,
    .cookie-banner {
        --heading: var(--on-ink);
        --text: var(--on-ink);
        --text-2: var(--on-ink-2);
        --text-3: var(--on-ink-3);
        --line: var(--line-ink);
        --line-2: var(--line-ink-2);
        --rule: var(--line-ink-2);
        --accent: var(--teal-lit);
        --focus: #ffffff;
        --glass-bg: rgba(255, 255, 255, 0.06);
        --glass-line: rgba(255, 255, 255, 0.18);
        --glass-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        background: var(--ink);
        color: var(--on-ink-2);
    }
}

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

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

    body {
        font-family: var(--f-sans);
        font-size: 1.0625rem;
        line-height: 1.65;
        color: var(--text);
        background: var(--paper);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        counter-reset: sec fig;
        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.03;
        letter-spacing: -0.03em;
    }

    h2 {
        font-size: var(--fs-h2);
        line-height: 1.08;
        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(--accent);
    }

    p {
        text-wrap: pretty;
    }

    strong,
    b {
        font-weight: 600;
    }

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

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

    ::selection {
        background: var(--teal);
        color: var(--white);
    }

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

    .skip-link {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 200;
        padding: 0.75rem 1rem;
        background: var(--ink);
        color: var(--white);
        font-weight: 500;
        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;
    }

    .mt-16 {
        margin-top: clamp(1.25rem, 3vw, 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.12em;
        text-transform: uppercase;
        color: var(--accent);
        line-height: 1.5;
    }
}

/* ==========================================================================
   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);
    }

    .section--tight {
        padding-block: calc(var(--section-y) * 0.5);
    }

    .section--sunk {
        background: var(--paper-2);
    }

    .grid {
        display: grid;
        gap: clamp(1rem, 2vw, 1.5rem);
        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: 960px) {
        .grid--3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

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

    .split {
        display: grid;
        gap: clamp(1.5rem, 4vw, 3rem);
        align-items: center;
    }

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

    /* Cabecera de sección: regla superior, etiqueta numerada a la izquierda,
       titular y entradilla a la derecha. La numeración es automática. */
    .section-head {
        display: grid;
        gap: 1.25rem 2rem;
        margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
        padding-top: 1.125rem;
        border-top: 1px solid var(--rule);
    }

    .section-head>p:not(.eyebrow) {
        max-width: 42rem;
        font-size: var(--fs-lead);
        line-height: 1.55;
        color: var(--text-2);
    }

    .section-head>.eyebrow::before {
        counter-increment: sec;
        content: counter(sec, decimal-leading-zero) '\00a0\00a0/\00a0\00a0';
        color: var(--text-3);
    }

    @media (min-width: 900px) {
        .section-head {
            grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
            align-items: start;
        }

        .section-head>.eyebrow {
            grid-column: 1;
            grid-row: 1 / span 3;
            padding-top: 0.5rem;
        }

        .section-head> :not(.eyebrow) {
            grid-column: 2;
        }
    }
}

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

@layer components {

    /* --- Botones ----------------------------------------------------------- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        min-height: 3rem;
        padding: 0.5rem 1.375rem;
        border: 1px solid transparent;
        border-radius: var(--r);
        font-family: var(--f-sans);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
            border-color var(--dur) var(--ease), transform 0.12s var(--ease);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn svg {
        flex: none;
        transition: transform var(--dur) var(--ease);
    }

    .btn:hover svg {
        transform: translateX(3px);
    }

    .btn--sm {
        min-height: 2.5rem;
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }

    .btn--lg {
        min-height: 3.5rem;
        padding-inline: 1.75rem;
        font-size: 1rem;
    }

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

    /* La única aparición del naranja: la acción principal. */
    .btn--primary {
        background: var(--signal);
        color: var(--ink);
    }

    .btn--primary:hover {
        background: var(--signal-hi);
    }

    .btn--primary:focus-visible {
        outline-color: var(--ink);
    }

    .section--ink .btn--primary:focus-visible,
    .cta-band .btn--primary:focus-visible,
    .cookie-banner .btn--primary:focus-visible {
        outline-color: var(--white);
    }

    .btn--ghost {
        background: transparent;
        color: var(--heading);
        border-color: var(--line-2);
    }

    .btn--ghost:hover {
        border-color: var(--heading);
        background: color-mix(in srgb, var(--heading) 8%, transparent);
    }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        color: var(--accent);
        text-decoration: none;
        background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
        padding-bottom: 0.125rem;
        transition: background-size var(--dur) var(--ease);
    }

    .link-arrow:hover {
        background-size: 100% 2px;
    }

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

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

    /* --- Etiquetas, notas y citas ------------------------------------------ */

    .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-2);
    }

    .badge--secondary {
        background: var(--teal-soft);
        border-color: transparent;
        color: var(--teal-ink);
    }

    .note {
        display: flex;
        gap: 0.875rem;
        align-items: flex-start;
        max-width: 46rem;
        padding-left: 1.25rem;
        border-left: 2px solid var(--teal);
        color: var(--text-2);
        font-size: 0.9375rem;
    }

    .note svg {
        flex: none;
        margin-top: 0.2rem;
        color: var(--accent);
    }

    .pull-quote {
        position: relative;
        font-family: var(--f-display);
        font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: var(--heading);
    }

    .pull-quote::before {
        content: '\201C';
        display: block;
        margin-bottom: -0.25em;
        font-size: 4em;
        line-height: 0.8;
        color: var(--teal);
    }

    .pull-quote .eyebrow {
        display: block;
        margin-bottom: 1rem;
    }

    .pull-quote cite {
        display: block;
        margin-top: 1.5rem;
        font-family: var(--f-mono);
        font-size: 0.8125rem;
        font-style: normal;
        letter-spacing: 0.06em;
        color: var(--text-3);
    }

    .cert-claim {
        font-family: var(--f-display);
        font-style: italic;
        font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
        line-height: 1.3;
        color: var(--heading);
        max-width: 40rem;
    }

    .market-note {
        max-width: 46rem;
        padding-left: 1.25rem;
        border-left: 1px solid var(--line-2);
        font-size: 0.875rem;
        color: var(--text-3);
    }

    /* --- Listas ------------------------------------------------------------ */

    /* Guion tipográfico en lugar de viñetas o iconos de check. */
    .check-list {
        display: grid;
        gap: 0.625rem;
    }

    .check-list li,
    .tick-list li {
        position: relative;
        padding-left: 1.75rem;
    }

    .check-list li::before,
    .tick-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.85em;
        width: 1rem;
        height: 2px;
        background: var(--teal);
    }

    .check-list--plain li::before {
        background: var(--text-3);
    }

    .tick-list {
        display: grid;
        border-top: 1px solid var(--line-2);
    }

    .tick-list li {
        padding-block: 0.875rem;
        padding-left: 2.25rem;
        border-bottom: 1px solid var(--line);
    }

    .tick-list li::before {
        top: 1.75rem;
        width: 1.125rem;
    }

    .tick-list--alert li::before {
        background: var(--signal-ink);
    }

    @media (min-width: 900px) {
        .tick-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 3rem;
        }
    }

    /* --- Bloque numerado (característica, actor, valor) --------------------- */

    .card,
    .value-card {
        padding: 1.125rem 1.25rem 1.25rem;
        display: grid;
        align-content: start;
        gap: 0.625rem;
    }

    .card::before,
    .value-card::before {
        counter-increment: card;
        content: counter(card, decimal-leading-zero);
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--accent);
    }

    .card__title,
    .value-card__title {
        font-size: 1.3125rem;
    }

    .card__text,
    .value-card__text {
        color: var(--text-2);
        font-size: 1rem;
    }

    .card .check-list {
        margin-top: 0.5rem;
    }

    /* Tarjeta con una sola afirmación: se lee como frase, no como ficha. */
    .value-card__text:only-child {
        font-family: var(--f-display);
        font-size: 1.3125rem;
        line-height: 1.35;
        color: var(--heading);
    }

    /* Filas de registro: término a la izquierda, definición a la derecha. */
    .ledger {
        border-top: 1px solid var(--rule);
    }

    .ledger__row {
        display: grid;
        gap: 0.5rem 2rem;
        padding-block: 1.125rem;
        border-bottom: 1px solid var(--line-2);
    }

    .ledger__term {
        font-family: var(--f-display);
        font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: var(--heading);
    }

    .ledger__def {
        max-width: 38rem;
        font-size: 1.125rem;
        color: var(--text-2);
    }

    .ledger dt {
        display: grid;
        gap: 0.5rem;
    }

    @media (min-width: 800px) {
        .ledger__row {
            grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
            align-items: baseline;
        }
    }

    /* --- Capturas de producto ---------------------------------------------- */

    .shot {
        counter-increment: fig;
    }

    .shot__frame {
        overflow: hidden;
        border: 1px solid var(--line-2);
        border-radius: var(--r-lg);
        background: var(--white);
        box-shadow: var(--shot-shadow);
    }

    .shot__frame img {
        width: 100%;
    }

    .shot__caption {
        display: grid;
        gap: 0.25rem;
        margin-top: 1rem;
        max-width: 40rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--text-2);
    }

    .shot__caption b {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .shot__caption b::before {
        content: 'Fig.\00a0' counter(fig, decimal-leading-zero) '\00a0\00a0/\00a0\00a0';
        color: var(--text-3);
    }

    /* --- Formularios ------------------------------------------------------- */

    .contact-form {
        display: grid;
        gap: 1.5rem;
    }

    .form-row {
        display: grid;
        gap: 1.5rem;
    }

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

    .form-field {
        display: grid;
        gap: 0.5rem;
        align-content: start;
    }

    .form-field label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--heading);
    }

    .form-field__input,
    .form-field__textarea {
        width: 100%;
        min-height: 3.25rem;
        padding: 0.75rem 0.875rem;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        background: var(--white);
        color: var(--text);
        font-size: 1rem;
        transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .form-field__textarea {
        min-height: 10rem;
        resize: vertical;
    }

    .form-field__input::placeholder,
    .form-field__textarea::placeholder {
        color: var(--text-3);
        opacity: 0.8;
    }

    .form-field__input:hover,
    .form-field__textarea:hover {
        border-color: var(--text-3);
    }

    .form-field__input:focus,
    .form-field__textarea:focus {
        outline: none;
        border-color: var(--teal);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 28%, transparent);
    }

    .form-field:has(.form-field__error) .form-field__input,
    .form-field:has(.form-field__error) .form-field__textarea {
        border-color: var(--err);
    }

    .form-field__error {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--err);
    }

    .form-field__hint {
        font-size: 0.8125rem;
        color: var(--text-3);
    }

    .form-privacy-note {
        display: grid;
        gap: 0.5rem;
        padding: 1rem 1.125rem;
        border-left: 2px solid var(--teal);
        background: var(--paper-2);
        font-size: 0.875rem;
        line-height: 1.55;
        color: var(--text-2);
    }

    .form-check {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.875rem;
        align-items: start;
        font-size: 0.9375rem;
    }

    .form-check input[type='checkbox'] {
        appearance: none;
        width: 1.375rem;
        height: 1.375rem;
        margin: 0.125rem 0 0;
        border: 1.5px solid var(--text-2);
        border-radius: var(--r);
        background: var(--white);
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .form-check input[type='checkbox']:checked {
        background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat;
        border-color: var(--ink);
    }

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

    .form-check label {
        cursor: pointer;
    }

    .form-check .form-field__error {
        grid-column: 1 / -1;
        margin-top: 0.5rem;
    }

    .form-recaptcha-note {
        font-size: 0.75rem;
        color: var(--text-3);
    }

    .form-alert {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        padding: 1rem 1.125rem;
        border-left: 3px solid currentColor;
        font-size: 0.9375rem;
        font-weight: 500;
    }

    .form-alert svg {
        flex: none;
        margin-top: 0.15rem;
    }

    .form-alert--ok {
        background: var(--ok-bg);
        color: var(--ok);
    }

    .form-alert--error {
        background: var(--err-bg);
        color: var(--err);
    }

    /* --- Migas de pan ------------------------------------------------------ */

    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.625rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.04em;
    }

    .breadcrumb li+li::before {
        content: '/';
        margin-right: 0.625rem;
        color: var(--text-3);
    }

    .breadcrumb a {
        color: var(--text-3);
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .breadcrumb [aria-current] {
        color: var(--text);
    }

    /* --- Cookies ----------------------------------------------------------- */

    .cookie-banner {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 120;
        max-height: 70svh;
        overflow-y: auto;
        padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-ink-2);
        box-shadow: 0 -12px 32px -12px rgba(6, 42, 48, 0.5);
    }

    .cookie-banner__inner {
        display: grid;
        gap: 1.25rem 3rem;
        align-items: center;
    }

    .cookie-banner__title {
        font-family: var(--f-display);
        font-size: 1.1875rem;
        color: var(--heading);
    }

    .cookie-banner__text {
        display: grid;
        gap: 0.25rem;
        font-size: 0.875rem;
        line-height: 1.55;
        max-width: 52rem;
    }

    .cookie-banner__text a {
        color: var(--white);
    }

    .cookie-banner__actions {
        display: grid;
        gap: 0.625rem;
    }

    .cookie-banner .btn {
        min-height: 2.75rem;
    }

    @media (min-width: 560px) {
        .cookie-banner__actions {
            grid-auto-flow: column;
        }
    }

    @media (min-width: 1000px) {
        .cookie-banner__inner {
            grid-template-columns: minmax(0, 1fr) auto;
        }
    }

    .cookie-modal {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: grid;
        place-items: center;
        padding: 1rem;
    }

    .cookie-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 42, 48, 0.72);
    }

    .cookie-modal__panel {
        position: relative;
        width: 100%;
        max-width: 36rem;
        max-height: calc(100svh - 2rem);
        overflow-y: auto;
        padding: clamp(1.25rem, 4vw, 2rem);
        border-radius: var(--r-lg);
        background: var(--paper);
        box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.6);
    }

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

    .cookie-modal__head h2 {
        font-size: 1.625rem;
    }

    .cookie-modal__close {
        flex: none;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: -0.5rem -0.5rem 0 0;
        border: 0;
        background: none;
        color: var(--text);
    }

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

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

    .cookie-modal__list {
        margin-top: 1.25rem;
        border-top: 1px solid var(--line-2);
    }

    .cookie-modal__item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.25rem;
        padding-block: 1rem;
        border-bottom: 1px solid var(--line);
    }

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

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

    .cookie-modal__always {
        flex: none;
        padding-top: 0.125rem;
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ok);
    }

    .cookie-modal__actions {
        display: grid;
        gap: 0.625rem;
        margin-top: 1.5rem;
    }

    @media (min-width: 560px) {
        .cookie-modal__actions {
            grid-auto-flow: column;
        }
    }

    .cookie-switch {
        position: relative;
        flex: none;
        display: inline-flex;
        cursor: pointer;
    }

    .cookie-switch input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .cookie-switch__track {
        position: relative;
        width: 3rem;
        height: 1.75rem;
        border: 1.5px solid var(--text-2);
        border-radius: 999px;
        background: var(--white);
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .cookie-switch__track::after {
        content: '';
        position: absolute;
        top: 0.1875rem;
        left: 0.1875rem;
        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);
    }

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

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

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

/* ==========================================================================
   Estructura del sitio: cabecera, menú, pie
   ========================================================================== */

@layer sections {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        view-transition-name: site-header;
        transition: border-color var(--dur) var(--ease);
    }

    .site-header[data-scrolled='true'] {
        border-bottom-color: var(--line-2);
    }

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

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.875rem;
        color: inherit;
        text-decoration: none;
    }

    .brand__logo {
        width: auto;
        height: 1.75rem;
    }

    .brand__sub {
        display: none;
        padding-left: 0.875rem;
        border-left: 1px solid var(--line-2);
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .site-nav {
        display: none;
    }

    .site-nav__list {
        display: flex;
        gap: clamp(1.25rem, 2.2vw, 2.25rem);
    }

    .site-nav__link {
        position: relative;
        display: inline-block;
        padding: 0.5rem 0;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--text);
        text-decoration: none;
    }

    .site-nav__link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.125rem;
        height: 2px;
        background: var(--teal);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--dur) var(--ease);
    }

    .site-nav__link:hover::after,
    .site-nav__link[aria-current='page']::after {
        transform: scaleX(1);
    }

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

    .header-cta {
        display: none;
    }

    .locale-switch {
        display: inline-flex;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        overflow: hidden;
    }

    .locale-switch__item {
        display: grid;
        place-items: center;
        min-width: 2.375rem;
        min-height: 2.375rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--text-2);
        text-decoration: none;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .locale-switch__item:hover {
        background: var(--paper-2);
    }

    .locale-switch__item[aria-current] {
        background: var(--ink);
        color: var(--paper);
    }

    .locale-switch__item:focus-visible {
        outline-offset: -3px;
    }

    .nav-toggle {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-right: -0.625rem;
        border: 0;
        background: none;
    }

    .nav-toggle__bars {
        position: relative;
        width: 1.375rem;
        height: 0.875rem;
    }

    .nav-toggle__bars span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--ink);
        transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
    }

    .nav-toggle__bars span:nth-child(1) {
        top: 0;
    }

    .nav-toggle__bars span:nth-child(2) {
        top: 6px;
    }

    .nav-toggle__bars span:nth-child(3) {
        top: 12px;
    }

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

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

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

    /* Menú móvil: panel a pantalla completa con la navegación en grande. */
    .mobile-nav {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        z-index: 55;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
        background: var(--paper);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.5rem);
        transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
    }

    .mobile-nav[data-open='true'] {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .mobile-nav .container {
        display: grid;
        gap: 2rem;
        padding-inline: 0;
    }

    .mobile-nav__list {
        counter-reset: mn;
        border-top: 1px solid var(--rule);
    }

    .mobile-nav__link {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding-block: 1.125rem;
        border-bottom: 1px solid var(--line-2);
        font-family: var(--f-display);
        font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2.5rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--heading);
        text-decoration: none;
    }

    .mobile-nav__link::before {
        counter-increment: mn;
        content: counter(mn, decimal-leading-zero);
        min-width: 1.75rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        color: var(--accent);
    }

    .mobile-nav__link[aria-current='page'] {
        font-style: italic;
        color: var(--accent);
    }

    @media (min-width: 1120px) {
        .site-nav {
            display: flex;
            flex: 1;
            justify-content: center;
        }

        .header-cta {
            display: inline-flex;
        }

        .nav-toggle,
        .mobile-nav {
            display: none;
        }
    }

    @media (min-width: 1360px) {
        .brand__sub {
            display: block;
        }
    }

    .no-js .nav-toggle {
        display: none;
    }

    .no-js .mobile-nav {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* --- Cabecera de página interior -------------------------------------- */

    .page-head {
        position: relative;
        overflow: clip;
        padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
        border-bottom: 1px solid var(--line-2);
    }

    .page-head::after {
        content: '';
        position: absolute;
        right: clamp(-9rem, -10vw, -3rem);
        top: 50%;
        width: clamp(16rem, 30vw, 27rem);
        aspect-ratio: 1;
        translate: 0 -50%;
        background: var(--teal);
        opacity: 0.1;
        -webkit-mask: var(--ring-mask) center / contain no-repeat;
        mask: var(--ring-mask) center / contain no-repeat;
        pointer-events: none;
    }

    .page-head>.container {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 1.25rem;
    }

    .page-head .breadcrumb {
        margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    }

    .page-head__title {
        max-width: 19ch;
        font-size: var(--fs-h1);
    }

    .page-head__lead {
        max-width: 40rem;
        margin-top: 0.5rem;
        font-size: var(--fs-lead);
        line-height: 1.55;
        color: var(--text-2);
    }

    .page-head__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    /* --- Cierre oscuro compartido ------------------------------------------- */

    .cta-band {
        position: relative;
        overflow-x: clip;
        padding-block: var(--section-y);
        background: var(--black);
    }

    .site-footer {
        background: var(--black);
    }

    /* Borde curvo de tres capas (aguas, verde marino y tinta) que se apoya en la banda. */
    .cta-band::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% - 1px);
        height: var(--edge-h);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230c3d45'/%3E%3Cstop offset='1' stop-color='%23031a1e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%235cc0cd' fill-opacity='.16' d='M0 210C20 200 50 120 120 108S250 110 330 128 480 150 560 100 650 48 730 90 840 140 930 100 1010 60 1100 64 1200 100 1270 84 1330 6 1345 10 1400 70 1440 96V220H0Z'/%3E%3Cpath fill='%232b96a1' fill-opacity='.3' d='M0 200C30 190 40 130 110 120S230 122 330 150 470 170 520 120 620 60 700 100 790 150 880 120 980 70 1060 78 1160 110 1230 100 1290 20 1300 18 1360 80 1440 110V220H0Z'/%3E%3Cpath fill='url(%23g)' d='M0 220C40 214 60 176 90 158S130 148 190 152 330 172 450 176 560 84 620 84 730 130 793 132 920 92 1030 87 1150 128 1215 139 1290 29 1318 29 1380 120 1440 144V220H0Z'/%3E%3Cg fill='none' stroke='%232b96a1' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='1 7' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 175C40 150 70 120 140 116S330 138 400 150 560 100 640 82 760 122 850 108 1000 62 1090 72 1190 100 1240 84 1290 14 1330 22 1400 60 1440 80'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 190C50 170 90 130 170 128S350 150 430 160 570 110 650 96 780 130 860 122 1010 74 1100 88 1200 112 1260 96 1300 30 1350 40 1410 80 1440 92'/%3E%3C/g%3E%3Ccircle cx='110' cy='60' r='5' fill='%232b96a1' fill-opacity='.45'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
        filter: drop-shadow(0 -8px 12px rgba(6, 42, 48, 0.16));
        pointer-events: none;
    }

    /* La sección anterior cede espacio para que el borde no tape su contenido. */
    main> :has(+ .cta-band) {
        padding-bottom: calc(var(--section-y) * 0.4 + var(--edge-h));
    }

    /* Secciones de tinta: el mismo relieve que el cierre, más bajo y tenue, arriba y abajo. */
    .section--ink::before,
    .section--ink::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: var(--edge-soft);
        background: var(--wave-ink) center bottom / 100% 100% no-repeat;
        filter: drop-shadow(0 -5px 8px rgba(6, 42, 48, 0.12));
        pointer-events: none;
    }

    .section--ink::before {
        bottom: calc(100% - 1px);
    }

    .section--ink::after {
        top: calc(100% - 1px);
        transform: scaleY(-1);
    }

    main> :has(+ .section--ink) {
        padding-bottom: calc(var(--section-y) * 0.4 + var(--edge-soft));
    }

    main>.section--ink+* {
        padding-top: calc(var(--section-y) * 0.4 + var(--edge-soft));
    }

    .cta-band__inner {
        position: relative;
        display: grid;
        gap: 2.5rem 4rem;
    }

    .cta-band__title {
        max-width: 16ch;
        margin-top: 1.25rem;
        font-size: clamp(2.25rem, 1.3rem + 4vw, 4.75rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
    }

    .cta-band__lead {
        max-width: 38rem;
        margin-top: 1.5rem;
        font-size: var(--fs-lead);
        line-height: 1.55;
    }

    .cta-band__punch {
        max-width: 36rem;
        margin-top: 1.25rem;
        font-family: var(--f-display);
        font-style: italic;
        font-size: 1.25rem;
        color: var(--on-ink);
    }

    .cta-band__actions {
        display: grid;
        align-content: end;
        gap: 1rem;
        justify-items: start;
    }

    .cta-band__note {
        max-width: 22rem;
        font-size: 0.875rem;
        color: var(--text-3);
    }

    @media (min-width: 960px) {
        .cta-band__inner {
            grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
            align-items: end;
        }
    }

    /* --- Pie ---------------------------------------------------------------- */

    .site-footer {
        padding-block: clamp(2.5rem, 5vw, 4rem) 1.25rem;
        font-size: 0.9375rem;
        border-top: 1px solid var(--line-ink);
    }

    .site-footer__grid {
        display: grid;
        gap: 2.5rem 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: clamp(1.75rem, 4vw, 3rem);
    }

    .site-footer__about {
        grid-column: 1 / -1;
        display: grid;
        gap: 1.25rem;
        align-content: start;
        max-width: 26rem;
    }

    .site-footer__claim {
        font-family: var(--f-display);
        font-size: 1.25rem;
        line-height: 1.35;
        color: var(--on-ink);
    }

    .site-footer .brand__sub {
        display: block;
    }

    .site-footer__about .link-arrow {
        color: var(--on-ink);
    }

    .site-footer__entity {
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--text-3);
    }

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

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

    .site-footer__list a,
    .site-footer__link,
    .site-footer__legal a {
        color: var(--on-ink-2);
        text-decoration: none;
    }

    .site-footer__list a:hover,
    .site-footer__link:hover,
    .site-footer__legal a:hover {
        color: var(--white);
        text-decoration: underline;
    }

    .site-footer__link {
        padding: 0;
        border: 0;
        background: none;
        font-size: inherit;
        text-align: left;
    }

    .site-footer__bottom {
        display: grid;
        gap: 0.75rem 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--line-ink);
        font-size: 0.8125rem;
        color: var(--text-3);
    }

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

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

    @media (min-width: 960px) {
        .site-footer__grid {
            grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.5fr));
        }

        .site-footer__about {
            grid-column: auto;
        }

        .site-footer__bottom {
            grid-template-columns: 1fr auto;
        }
    }

    /* --- Error --------------------------------------------------------------- */

    .error-page {
        padding-block: clamp(2rem, 6vw, 5rem);
    }

    .error-page__code {
        font-family: var(--f-display);
        font-style: italic;
        font-size: clamp(6rem, 3rem + 16vw, 14rem);
        line-height: 0.9;
        letter-spacing: -0.04em;
        color: var(--teal);
    }

    .error-page h1 {
        margin-block: 1rem 1.25rem;
        font-size: var(--fs-h2);
    }

    .error-page .hero__actions {
        margin-top: 2rem;
    }

    /* ======================================================================
       Portada
       ====================================================================== */

    .hero {
        position: relative;
        overflow-x: clip;
        padding-top: clamp(1.25rem, 3vw, 2.25rem);
    }

    /* Anillo del logotipo a gran escala, detrás de la captura. */
    .hero::before {
        content: '';
        position: absolute;
        right: clamp(-18rem, -16vw, -5rem);
        top: clamp(-6rem, -4vw, 0rem);
        width: clamp(24rem, 62vw, 52rem);
        aspect-ratio: 1;
        background: var(--teal);
        opacity: 0.09;
        -webkit-mask: var(--ring-mask) center / contain no-repeat;
        mask: var(--ring-mask) center / contain no-repeat;
        pointer-events: none;
    }

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

    .hero .eyebrow {
        margin-bottom: 1.5rem;
    }

    .hero__title {
        font-size: var(--fs-hero);
        line-height: 1.02;
        letter-spacing: -0.032em;
    }

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

    .hero__note {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-left: 1.125rem;
        border-left: 2px solid var(--teal);
        font-family: var(--f-display);
        font-style: italic;
        font-size: 1.1875rem;
        color: var(--heading);
    }

    .hero__note svg {
        display: none;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.875rem 1.5rem;
        margin-top: 2.25rem;
    }

    .hero__actions .btn--ghost {
        border-color: transparent;
        padding-inline: 0;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.3em;
    }

    .hero__actions .btn--ghost:hover {
        background: none;
        text-decoration-thickness: 2px;
    }

    @media (min-width: 1000px) and (max-width: 1199px) {
        .hero__title {
            font-size: 3.125rem;
        }
    }

    @media (pointer: coarse) {
        .locale-switch__item {
            min-width: 2.75rem;
            min-height: 2.75rem;
        }
    }

    .hero__figure {
        position: relative;
    }

    .hero__figure .shot__frame img {
        aspect-ratio: 1903 / 1079;
    }

    @media (min-width: 1000px) {
        .hero__grid {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }
    }

    /* Franja de madurez: mismo relieve que las secciones de tinta, arriba y abajo. */
    .maturity::before,
    .maturity::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: var(--edge-soft);
        background: var(--wave-ink) center bottom / 100% 100% no-repeat;
        filter: drop-shadow(0 -5px 8px rgba(6, 42, 48, 0.12));
        pointer-events: none;
    }

    .maturity::before {
        bottom: calc(100% - 1px);
    }

    .maturity::after {
        top: calc(100% - 1px);
        background-image: var(--wave-ink-2);
        transform: scaleY(-1);
    }

    main> :has(+ .maturity) {
        padding-bottom: calc(var(--section-y) * 0.4 + var(--edge-soft));
    }

    /* La franja cierra el hero, así que el hueco va en la sección siguiente. */
    main>.hero:has(> .maturity)+* {
        padding-top: calc(var(--section-y) * 0.4 + var(--edge-soft));
    }

    /* Banda de madurez: franja oscura a sangre con las cifras del producto. */
    .maturity {
        position: relative;
        margin-top: clamp(2rem, 5vw, 4rem);
        padding-block: clamp(2rem, 4vw, 3.5rem);
        background: var(--ink);
        color: var(--on-ink-2);
        --heading: var(--on-ink);
        --text: var(--on-ink);
        --text-2: var(--on-ink-2);
        --text-3: var(--on-ink-3);
        --line: var(--line-ink);
        --line-2: var(--line-ink-2);
        --rule: var(--line-ink-2);
        --accent: var(--teal-lit);
    }

    .trust-band {
        --cols: 3;
        display: grid;
        border-top: 1px solid var(--rule);
    }

    /* En la franja oscura el filete superior sobra: la ola ya marca el corte. */
    .maturity .trust-band {
        border-top: 0;
    }

    .trust-band:has(> :nth-child(4)) {
        --cols: 4;
    }

    .trust-band__item {
        display: grid;
        grid-template-columns: minmax(5.5rem, auto) 1fr;
        gap: 0.25rem 1.25rem;
        align-items: baseline;
        padding-block: 1.125rem;
        border-bottom: 1px solid var(--line);
    }

    .trust-band__value {
        font-family: var(--f-display);
        font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
        line-height: 1;
        letter-spacing: -0.03em;
        font-variant-numeric: lining-nums;
        color: var(--heading);
    }

    .trust-band__value--word {
        font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
        font-style: italic;
        color: var(--accent);
    }

    .trust-band__label {
        font-size: 0.875rem;
        line-height: 1.45;
        color: var(--text-2);
    }

    @media (min-width: 720px) {
        .trust-band {
            grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
        }

        .trust-band__item {
            grid-template-columns: 1fr;
            gap: 0.75rem;
            padding: 0.5rem 1.5rem 0.5rem 0;
            border-bottom: 0;
        }

        .trust-band__item+.trust-band__item {
            padding-left: 1.5rem;
            border-left: 1px solid var(--line);
        }
    }

    /* --- El proceso: una regla con siete estaciones ------------------------- */

    .process-chain {
        --lit: 0.14s;
        position: relative;
        display: grid;
    }

    .process-chain::before,
    .process-chain::after {
        content: '';
        position: absolute;
        left: 0.4375rem;
        top: 1.6rem;
        bottom: 1.6rem;
        width: 1px;
        background: var(--line-2);
    }

    .process-chain::after {
        width: 2px;
        left: 0.375rem;
        background: var(--teal);
        transform: scaleY(0);
        transform-origin: top;
    }

    .process-chain__step {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding: 0.875rem 0 0.875rem 2.25rem;
    }

    .process-chain__step::before {
        content: '';
        position: absolute;
        left: 0;
        top: 1.375rem;
        width: 0.9375rem;
        height: 0.9375rem;
        border: 1.5px solid var(--line-2);
        border-radius: 50%;
        background: var(--paper);
    }

    .process-chain__num {
        min-width: 1.75rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        color: var(--text-3);
    }

    .process-chain__name {
        font-family: var(--f-display);
        font-size: 1.375rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: var(--heading);
    }

    .process-chain__step:last-child .process-chain__name {
        font-style: italic;
        color: var(--accent);
    }

    @media (min-width: 1000px) {
        .process-chain {
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }

        .process-chain::before,
        .process-chain::after {
            left: 0;
            right: 0;
            top: 0.4375rem;
            bottom: auto;
            width: auto;
            height: 1px;
        }

        .process-chain::after {
            height: 2px;
            top: 0.375rem;
            transform: scaleX(0);
            transform-origin: left;
        }

        .process-chain__step {
            display: grid;
            align-content: start;
            align-items: start;
            gap: 0.5rem;
            padding: 2.25rem 1rem 0 0;
        }

        .process-chain__step::before {
            top: 0;
        }

        .process-chain__name {
            font-size: 1.25rem;
        }
    }

    .process-arch {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin-top: clamp(2rem, 4vw, 3rem);
        padding-top: 1.5rem;
        border-top: 1px solid var(--line-2);
    }

    .process-arch__label {
        flex-basis: 100%;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .process-arch__step {
        padding: 0.5rem 0.875rem;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        font-family: var(--f-mono);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--heading);
    }

    .process-arch__step:last-of-type {
        border-color: var(--ink);
        background: var(--ink);
        color: var(--white);
    }

    .process-arch__sep {
        display: inline-grid;
        color: var(--text-3);
    }

    .process__foot {
        max-width: 44rem;
        margin-top: 2rem;
        color: var(--text-2);
    }

    /* --- Producto en funcionamiento: figuras escalonadas -------------------- */

    .shot-grid {
        display: grid;
        gap: clamp(2rem, 4vw, 3.5rem) 2rem;
    }

    @media (min-width: 900px) {
        .shot-grid .shot {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            column-gap: 2rem;
            align-items: end;
        }

        .shot-grid .shot__frame {
            grid-column: 1 / span 8;
            grid-row: 1;
        }

        .shot-grid .shot__caption {
            grid-column: 9 / -1;
            grid-row: 1;
            margin-top: 0;
        }

        /* La segunda figura se lee en espejo: el texto a la izquierda. */
        .shot-grid .shot:nth-child(2) .shot__frame {
            grid-column: 5 / -1;
        }

        .shot-grid .shot:nth-child(2) .shot__caption {
            grid-column: 1 / span 4;
        }
    }

    /* --- Qué nos hace diferentes --------------------------------------------- */

    .model-callout {
        display: grid;
        gap: 1rem 3rem;
        margin-bottom: clamp(2rem, 4vw, 3rem);
    }

    .model-callout__title {
        font-family: var(--f-display);
        font-style: italic;
        font-size: var(--fs-h3);
        color: var(--accent);
    }

    .model-callout__text {
        font-family: var(--f-display);
        font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
        line-height: 1.4;
        letter-spacing: -0.01em;
        color: var(--heading);
    }

    @media (min-width: 900px) {
        .model-callout {
            grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
        }
    }

    .principles {
        display: grid;
        counter-reset: pr;
        border-top: 1px solid var(--line-2);
    }

    .principle {
        display: grid;
        gap: 0.5rem 1.5rem;
        padding-block: 1.125rem;
        border-bottom: 1px solid var(--line-2);
    }

    .principle::before {
        counter-increment: pr;
        content: counter(pr, decimal-leading-zero);
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--accent);
    }

    .principle__text {
        color: var(--text-2);
    }

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

        .principle {
            grid-template-columns: 2.5rem minmax(0, 1fr);
            align-items: baseline;
        }

        .principle>h3,
        .principle>p {
            grid-column: 2;
        }
    }

    .pull-quote--inline {
        max-width: 36rem;
        margin-top: clamp(2rem, 4vw, 3rem);
        margin-left: auto;
        padding-left: 1.5rem;
        border-left: 2px solid var(--teal);
        font-style: italic;
        font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    }

    .pull-quote--inline::before {
        content: none;
    }

    /* --- Módulos: un registro con filas desplegables ------------------------ */

    .group-label {
        margin-bottom: 1rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .module-list {
        counter-reset: mod;
        border-top: 1px solid var(--rule);
    }

    .module-card {
        position: relative;
        scroll-margin-top: calc(var(--header-h) + 1.5rem);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        column-gap: 1rem;
        counter-increment: mod;
        padding: 1.125rem 0.75rem;
        border-bottom: 1px solid var(--line-2);
        transition: background-color 0.3s var(--ease);
    }

    .module-card:hover {
        background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%);
    }

    .module-card[data-open='true'] {
        background: var(--white);
    }

    /* El signo + gira hasta convertirse en ×. */
    .module-card::after {
        content: '';
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: center;
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.875rem;
        background:
            linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
            linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
        color: var(--heading);
        transition: transform 0.4s var(--ease), color var(--dur) var(--ease);
    }

    .module-card:hover::after {
        color: var(--accent);
    }

    .module-card[data-open='true']::after {
        transform: rotate(45deg);
    }

    .module-card__heading {
        grid-column: 1;
        font: inherit;
    }

    .module-card__toggle {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        grid-template-areas:
            'art name'
            'art tag';
        column-gap: 1rem;
        align-items: center;
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
    }

    /* Toda la fila responde al clic: el botón se estira sobre la ficha. */
    .module-card__toggle::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .module-card__toggle::before {
        display: none;
        grid-area: idx;
        content: counter(mod, decimal-leading-zero);
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--text-3);
    }

    .module-card__toggle:focus-visible {
        outline-offset: 8px;
    }

    .module-card__icon {
        grid-area: art;
        display: grid;
        place-items: center;
        width: 3.5rem;
        height: 3.5rem;
    }

    .module-card__icon img {
        width: 3.5rem;
        height: 3.5rem;
        object-fit: contain;
    }

    .module-card__icon:not(.module-card__icon--art) {
        border: 1.5px solid var(--teal);
        border-radius: 50%;
        color: var(--accent);
    }

    .module-card__name {
        grid-area: name;
        align-self: end;
        font-family: var(--f-display);
        font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: var(--heading);
        transition: color var(--dur) var(--ease);
    }

    .module-card:hover .module-card__name {
        color: var(--accent);
    }

    .module-card__tagline {
        grid-area: tag;
        align-self: start;
        margin-top: 0.25rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        color: var(--text-3);
    }

    .module-card__text {
        grid-column: 1;
        margin-top: 1rem;
        color: var(--text-2);
        font-size: 1rem;
    }

    .module-card__hint {
        grid-column: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--accent);
    }

    .module-card__hint svg {
        transition: transform var(--dur) var(--ease);
    }

    .module-card:hover .module-card__hint svg {
        transform: translateX(4px);
    }

    .module-card__hint-close,
    .module-card[data-open='true'] .module-card__hint-open {
        display: none;
    }

    .module-card[data-open='true'] .module-card__hint-close {
        display: inline;
    }

    /* Detalle plegable: la altura anima entre 0fr y 1fr. */
    .module-card__details {
        position: relative;
        z-index: 2;
        grid-column: 1 / -1;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.5s var(--ease);
    }

    .module-card__details[data-open='true'] {
        grid-template-rows: 1fr;
    }

    .module-card__details-inner {
        display: grid;
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s 0.5s;
    }

    .module-card__details[data-open='true']>.module-card__details-inner {
        visibility: visible;
        transition-delay: 0s;
    }

    .module-card__detail-block {
        display: grid;
        gap: 0.75rem;
        align-content: start;
        padding-top: 1.75rem;
    }

    .module-card__detail-label {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line-2);
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .module-card__detail-title {
        font-family: var(--f-display);
        font-size: 1.375rem;
        line-height: 1.25;
        color: var(--heading);
    }

    .module-card__detail-text {
        color: var(--text-2);
        font-size: 1rem;
    }

    .module-card__detail-list {
        display: grid;
        gap: 0.5rem;
        color: var(--text-2);
    }

    .module-card__detail-list li {
        position: relative;
        padding-left: 1.5rem;
    }

    .module-card__detail-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.85em;
        width: 0.875rem;
        height: 2px;
        background: var(--teal);
    }

    .module-card__shot {
        overflow: hidden;
        border: 1px solid var(--line-2);
        border-radius: var(--r-lg);
        box-shadow: var(--shot-shadow);
    }

    .module-card__placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        min-height: 9rem;
        padding: 1.5rem;
        border: 1px dashed var(--line-2);
        border-radius: var(--r-lg);
        font-family: var(--f-mono);
        font-size: 0.8125rem;
        text-align: center;
        color: var(--text-3);
    }

    .module-card__placeholder svg {
        flex: none;
    }

    .module-card__foot {
        position: relative;
        z-index: 2;
        grid-column: 1 / -1;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .module-card__details[data-open='false']~.module-card__foot {
        display: none;
    }

    @media (min-width: 560px) {
        .module-card__toggle {
            grid-template-columns: 2rem 3.5rem minmax(0, 1fr);
            grid-template-areas:
                'idx art name'
                'idx art tag';
        }

        .module-card__toggle::before {
            display: block;
        }
    }

    @media (min-width: 900px) {
        .module-card {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 2.5rem;
            column-gap: 2.5rem;
            align-items: center;
            padding: 1.25rem 1rem;
        }

        .module-card__heading {
            grid-row: 1 / span 2;
        }

        .module-card__text {
            grid-column: 2;
            grid-row: 1;
            align-self: end;
            margin-top: 0;
        }

        .module-card__hint {
            grid-column: 2;
            grid-row: 2;
            align-self: start;
        }

        .module-card::after {
            grid-column: 3;
            grid-row: 1 / span 2;
            align-self: center;
            margin-top: 0;
        }

        .module-card__details {
            grid-row: 3;
        }

        .module-card__details-inner {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            column-gap: 2.5rem;
        }

        .module-card__detail-block:nth-child(1) {
            grid-column: 1;
            grid-row: 1 / span 2;
        }

        .module-card__detail-block:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
        }

        .module-card__detail-block:nth-child(3) {
            grid-column: 2;
            grid-row: 2;
        }

        .module-card__detail-block:nth-child(4) {
            grid-column: 1 / -1;
            grid-row: 3;
            padding-bottom: 1.5rem;
        }

        .module-card__foot {
            grid-row: 4;
        }
    }

    @media (max-width: 899px) {
        .module-card__detail-block:last-child {
            padding-bottom: 1.5rem;
        }
    }

    /* --- Certificación en la portada y en su página ------------------------- */

    .verify {
        display: grid;
        gap: 2.5rem 3rem;
    }

    .verify-card {
        display: grid;
        gap: 0.75rem;
        align-content: start;
        padding-top: 1.5rem;
        border-top: 1px solid var(--line-2);
    }

    .verify-card--accent {
        border-top: 2px solid var(--accent);
    }

    /* Una fotografía frente a una película: un punto aislado o un trazo
       continuo. Es la diferencia entre las dos verificaciones. */
    .verify-card__viz {
        position: relative;
        display: block;
        height: 2.5rem;
        margin-bottom: 0.75rem;
    }

    .verify-card__viz::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 0;
        border-top: 1px dashed var(--line-2);
    }

    .verify-card__viz::after {
        content: '';
        position: absolute;
        left: 62%;
        top: 50%;
        width: 0.875rem;
        height: 0.875rem;
        translate: -50% -50%;
        border: 2px solid var(--text-3);
        border-radius: 50%;
        background: var(--paper);
    }

    .section--ink .verify-card__viz::after {
        background: var(--ink);
    }

    .verify-card--accent .verify-card__viz::before {
        height: 0.75rem;
        top: 50%;
        translate: 0 -50%;
        border: 0;
        background:
            linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
            repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 8px) center / 100% 100% no-repeat;
        transform-origin: left;
    }

    .verify-card--accent .verify-card__viz::after {
        left: auto;
        right: 0;
        translate: 0 -50%;
        border-color: var(--accent);
        background: var(--accent);
    }

    .verify-card__title {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .verify-card__title-lead {
        font-family: var(--f-display);
        font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
        line-height: 1.15;
        letter-spacing: -0.015em;
        color: var(--heading);
    }

    .verify-card__text {
        max-width: 30rem;
        color: var(--text-2);
    }

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

    .seal-panel {
        display: grid;
        gap: clamp(1.5rem, 4vw, 3rem);
        align-items: center;
    }

    .seal-panel h3 {
        font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
        line-height: 1.12;
    }

    .seal-panel p {
        color: var(--text-2);
    }

    .seal-panel .cert-claim {
        color: var(--heading);
    }

    .seal-fan__img {
        width: 100%;
        height: auto;
        filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.3));
    }

    @media (min-width: 900px) {
        .seal-panel {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        }
    }

    .seal-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
        margin-top: clamp(2rem, 4vw, 3rem);
    }

    .seal-legend__item {
        display: inline-flex;
        align-items: baseline;
        gap: 0.625rem;
        padding: 0.5rem 0.875rem;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        font-size: 0.875rem;
        color: var(--text);
    }

    .seal-legend__code {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--accent);
    }

    .seal-legend__item--accent {
        border-color: var(--on-ink);
        background: var(--on-ink);
        color: var(--ink);
        font-weight: 600;
    }

    .seal-legend--stack {
        display: grid;
        margin-top: 1.5rem;
        gap: 0;
        border-top: 1px solid var(--line-2);
    }

    .seal-legend--stack .seal-legend__item {
        padding: 0.75rem 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    /* Los sellos se conceden uno a uno: la leyenda se enciende en secuencia. */
    .seal-legend .seal-legend__item:nth-child(1) {
        --i: 0;
    }

    .seal-legend .seal-legend__item:nth-child(2) {
        --i: 1;
    }

    .seal-legend .seal-legend__item:nth-child(3) {
        --i: 2;
    }

    .seal-legend .seal-legend__item:nth-child(4) {
        --i: 3;
    }

    .seal-legend .seal-legend__item:nth-child(5) {
        --i: 4;
    }

    .seal-legend .seal-legend__item:nth-child(6) {
        --i: 6;
    }

    .stamp {
        display: grid;
        gap: 0.375rem;
        align-content: start;
        padding-top: 1.25rem;
        border-top: 1px solid var(--line-2);
    }

    .stamp__seal {
        display: block;
        width: 8rem;
        margin-bottom: 0.75rem;
    }

    .stamp__code {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--accent);
    }

    .stamp__name {
        font-family: var(--f-display);
        font-size: 1.375rem;
        line-height: 1.2;
        color: var(--heading);
    }

    .stamp__text {
        color: var(--text-2);
        font-size: 1rem;
    }

    .cert-compare {
        display: grid;
        gap: 2.5rem 3rem;
    }

    .cert-compare__col {
        padding-top: 1.5rem;
        border-top: 1px solid var(--line-2);
    }

    .cert-compare__col--accent {
        border-top: 2px solid var(--accent);
    }

    .cert-compare__title {
        margin-bottom: 1.25rem;
        font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    }

    .cert-compare__col:not(.cert-compare__col--accent) .cert-compare__title {
        color: var(--text-2);
    }

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

    /* Recreación del cuadro de certificación. */
    .ui {
        overflow: hidden;
        border: 1px solid var(--line-2);
        border-radius: var(--r-lg);
        background: var(--white);
        box-shadow: var(--shot-shadow);
    }

    .ui__bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 1rem;
        border-bottom: 1px solid var(--line);
        background: var(--paper-2);
        font-family: var(--f-mono);
        font-size: 0.75rem;
    }

    .ui__dots {
        display: inline-flex;
        gap: 0.375rem;
    }

    .ui__dots i {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--paper-3);
    }

    .ui__title {
        font-weight: 500;
        color: var(--text);
    }

    .ui__meta {
        margin-left: auto;
        color: var(--text-3);
    }

    .ui__body {
        display: grid;
        gap: 1.5rem;
        padding: 1.25rem;
    }

    .ui__label {
        margin-bottom: 0.625rem;
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .ui-table {
        width: 100%;
        font-size: 0.8125rem;
    }

    .ui-table th,
    .ui-table td {
        padding: 0.5rem 0.5rem 0.5rem 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .ui-table th {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .ui-table td:first-child {
        font-family: var(--f-mono);
        color: var(--accent);
    }

    .ui-table .num {
        text-align: right;
        padding-right: 0;
    }

    .ui-bars {
        display: grid;
        gap: 0.875rem;
    }

    .ui-bar__head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.375rem;
        font-size: 0.8125rem;
    }

    .ui-bar__track {
        height: 0.5rem;
        border-radius: 999px;
        background: var(--paper-2);
    }

    .ui-bar__fill {
        height: 100%;
        border-radius: inherit;
        background: var(--teal);
    }

    .ui-bar__fill--ok {
        background: var(--ok);
    }

    .ui-bar__fill--warn {
        background: var(--signal-ink);
    }

    /* --- Tecnología y roadmap ------------------------------------------------ */

    .tech-flow {
        display: grid;
        gap: 2rem;
        align-items: center;
        padding-block: 2rem;
        border-block: 1px solid var(--line-2);
    }

    .tech-flow__label {
        margin-bottom: 0.875rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .tech-flow__list {
        display: grid;
        gap: 0.5rem;
    }

    .tech-flow__list li {
        position: relative;
        padding-left: 1.75rem;
        font-family: var(--f-display);
        font-size: 1.1875rem;
        line-height: 1.3;
        color: var(--heading);
    }

    .tech-flow__list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.75em;
        width: 1rem;
        height: 2px;
        background: var(--teal);
    }

    .tech-flow__core {
        position: relative;
        display: grid;
        place-items: center;
        width: 8rem;
        aspect-ratio: 1;
        justify-self: start;
        font-family: var(--f-display);
        font-size: 1.25rem;
        color: var(--heading);
    }

    /* El anillo del logotipo, con su luna recortada, como núcleo del flujo. */
    .tech-flow__core::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--teal);
        -webkit-mask: var(--ring-mask) center / contain no-repeat;
        mask: var(--ring-mask) center / contain no-repeat;
    }

    .tech-flow__core span {
        position: relative;
    }

    .tech-flow__core svg {
        display: none;
    }

    @media (min-width: 900px) {
        .tech-flow {
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            gap: 3rem;
        }

        .tech-flow__core {
            justify-self: center;
        }

        .tech-flow__col:last-child {
            padding-left: 1.5rem;
        }
    }

    .tech-more {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        max-width: 46rem;
        color: var(--text-2);
    }

    .tech-more svg {
        flex: none;
        margin-top: 0.25rem;
        color: var(--accent);
    }

    .roadmap {
        position: relative;
        display: grid;
        gap: 0;
    }

    .roadmap__item {
        position: relative;
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        grid-template-areas:
            'art name'
            'art state';
        column-gap: 1.25rem;
        align-items: center;
        padding-block: 1.25rem;
        border-bottom: 1px solid var(--line-2);
    }

    .roadmap__item:first-child {
        border-top: 1px solid var(--rule);
    }

    .roadmap__art {
        grid-area: art;
        display: grid;
        place-items: center;
        width: 4.5rem;
        height: 4.5rem;
        color: var(--accent);
    }

    .roadmap__art img {
        width: 4.5rem;
        height: 4.5rem;
        object-fit: contain;
        filter: grayscale(1);
        opacity: 0.55;
    }

    .roadmap__item--live .roadmap__art img {
        filter: none;
        opacity: 1;
    }

    .roadmap__name {
        grid-area: name;
        align-self: end;
        font-family: var(--f-display);
        font-size: 1.5rem;
        line-height: 1.15;
        color: var(--heading);
    }

    .roadmap__state {
        grid-area: state;
        align-self: start;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.25rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        color: var(--text-3);
    }

    .roadmap__item--live .roadmap__state {
        color: var(--ok);
    }

    .roadmap__item--live .roadmap__state::before {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--ok);
    }

    @media (min-width: 900px) {
        .roadmap {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            column-gap: 2rem;
            border-top: 1px solid var(--rule);
        }

        .roadmap__item,
        .roadmap__item:first-child {
            grid-template-columns: 1fr;
            grid-template-areas:
                'art'
                'name'
                'state';
            align-items: start;
            gap: 0.25rem;
            padding-block: 1.75rem 0;
            border: 0;
        }

        .roadmap__art {
            justify-content: start;
            margin-bottom: 1rem;
            width: 6rem;
            height: 6rem;
        }

        .roadmap__art img {
            width: 6rem;
            height: 6rem;
        }
    }

    .impact-note {
        max-width: 46rem;
        font-family: var(--f-display);
        font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
        line-height: 1.45;
        color: var(--heading);
    }

    /* --- Contacto ------------------------------------------------------------ */

    .contact-grid {
        display: grid;
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .contact-aside {
        display: grid;
        gap: 2rem;
        align-content: start;
    }

    .contact-aside__item {
        padding-top: 1rem;
        border-top: 1px solid var(--line-2);
    }

    .contact-aside__label {
        margin-bottom: 0.625rem;
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .contact-aside__value {
        font-family: var(--f-display);
        font-size: 1.25rem;
        line-height: 1.35;
        color: var(--heading);
        overflow-wrap: anywhere;
    }

    @media (min-width: 960px) {
        .contact-grid {
            grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
            justify-content: space-between;
        }
    }

    /* --- Páginas legales ------------------------------------------------------ */

    .legal-body {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .legal-body h2 {
        margin-top: 3rem;
        margin-bottom: 0.875rem;
        font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    }

    .legal-body h2:first-child {
        margin-top: 0;
    }

    .legal-body p+p,
    .legal-body p+ul {
        margin-top: 1rem;
    }

    .legal-facts {
        display: grid;
        gap: 0.25rem 2rem;
        margin-block: 1.5rem;
        padding-block: 1.25rem;
        border-block: 1px solid var(--line-2);
    }

    .legal-facts dt {
        margin-top: 0.75rem;
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-3);
    }

    .legal-facts dt:first-child {
        margin-top: 0;
    }

    @media (min-width: 640px) {
        .legal-facts {
            grid-template-columns: 9rem minmax(0, 1fr);
        }

        .legal-facts dt {
            margin-top: 0;
            padding-top: 0.25rem;
        }
    }

    .legal-table-wrap {
        margin-block: 1.5rem;
        overflow-x: auto;
        border-block: 1px solid var(--line-2);
    }

    .legal-table {
        width: 100%;
        min-width: 32rem;
        font-size: 0.9375rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 0.75rem 1rem 0.75rem 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

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

    .legal-table td:first-child {
        font-family: var(--f-mono);
        font-size: 0.8125rem;
        color: var(--accent);
    }

    /* En móvil cada cookie es un bloque con sus etiquetas, sin scroll lateral. */
    @media (max-width: 639px) {
        .legal-table {
            min-width: 0;
        }

        .legal-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
        }

        .legal-table tr,
        .legal-table td {
            display: block;
        }

        .legal-table tr {
            padding-block: 0.75rem;
            border-bottom: 1px solid var(--line-2);
        }

        .legal-table td {
            padding: 0.25rem 0;
            border: 0;
        }

        .legal-table td::before {
            content: attr(data-label);
            display: block;
            font-family: var(--f-mono);
            font-size: 0.6875rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-3);
        }
    }

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

/* ==========================================================================
   Movimiento
   Solo donde comunica algo: revelado al hacer scroll, proceso que se enciende,
   sellos que se conceden en secuencia y trazo de verificación continua.
   ========================================================================== */

@layer motion {
    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }

        .js .reveal {
            opacity: 0;
            transform: translateY(1rem);
            transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
        }

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

        /* El proceso se recorre de principio a fin. */
        .js .process-chain.reveal {
            transform: none;
        }

        .js .process-chain::after {
            transition: transform 1.6s var(--ease) 0.2s;
        }

        .js .process-chain.is-visible::after {
            transform: none;
        }

        .js .process-chain__step::before {
            transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
        }

        .js .process-chain.is-visible .process-chain__step::before {
            background: var(--teal);
            border-color: var(--teal);
        }

        .process-chain__step:nth-child(1)::before {
            transition-delay: 0.2s;
        }

        .process-chain__step:nth-child(2)::before {
            transition-delay: 0.45s;
        }

        .process-chain__step:nth-child(3)::before {
            transition-delay: 0.7s;
        }

        .process-chain__step:nth-child(4)::before {
            transition-delay: 0.95s;
        }

        .process-chain__step:nth-child(5)::before {
            transition-delay: 1.2s;
        }

        .process-chain__step:nth-child(6)::before {
            transition-delay: 1.45s;
        }

        .process-chain__step:nth-child(7)::before {
            transition-delay: 1.7s;
        }

        /* Sellos que se conceden uno tras otro; el certificado, el último. */
        .js .seal-legend.reveal {
            transform: none;
            opacity: 1;
        }

        .js .seal-legend.reveal .seal-legend__item {
            opacity: 0;
            transform: translateY(0.5rem);
            transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
            transition-delay: calc(var(--i) * 0.14s);
        }

        .js .seal-legend.reveal.is-visible .seal-legend__item {
            opacity: 1;
            transform: none;
        }

        /* El trazo continuo se dibuja al aparecer. */
        .js .verify-card--accent .verify-card__viz::before {
            transform: scaleX(0);
            transition: transform 1.4s var(--ease) 0.3s;
        }

        .js .verify.is-visible .verify-card--accent .verify-card__viz::before,
        .js .is-visible>.verify-card--accent .verify-card__viz::before {
            transform: none;
        }
    }

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

        ::view-transition-group(*),
        ::view-transition-old(*),
        ::view-transition-new(*) {
            animation: none !important;
        }

        *,
        *::before,
        *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.22s;
    }

    @media print {

        .site-header,
        .cookie-banner,
        .cookie-modal,
        .cta-band::before,
        .section--ink::before,
        .section--ink::after {
            display: none !important;
        }
    }
}

/* ==========================================================================
   Vidrio
   Las tarjetas son cristal esmerilado sobre dos manchas de color difuminadas
   que hay detrás de cada rejilla. Sin la mancha el cristal no se ve, por eso
   la rejilla y la tarjeta van siempre juntas.
   ========================================================================== */

@layer glass {

    .grid,
    .roadmap {
        position: relative;
        isolation: isolate;
    }

    .grid::before,
    .grid::after,
    .roadmap::before,
    .roadmap::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: clamp(12rem, 28vw, 22rem);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--accent);
        opacity: 0.28;
        filter: blur(64px);
        pointer-events: none;
    }

    .grid::before,
    .roadmap::before {
        top: -2rem;
        right: 6%;
    }

    .grid::after,
    .roadmap::after {
        bottom: -2rem;
        left: 4%;
        background: var(--teal-lit);
        opacity: 0.22;
    }

    .glass,
    .card,
    .value-card,
    .module-tile,
    .shot--card,
    .roadmap__item {
        border: 1px solid var(--glass-line);
        border-radius: var(--r-lg);
        background: var(--glass-bg);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
        box-shadow: var(--glass-shadow);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

        .glass,
        .card,
        .value-card,
        .module-tile,
        .shot--card,
        .roadmap__item {
            background: color-mix(in srgb, var(--white) 85%, var(--paper));
        }
    }

    /* Ficha de módulo de la portada: enlaza a su detalle en la página de módulos. */
    .module-tile {
        display: grid;
        grid-template-columns: 3.25rem minmax(0, 1fr);
        grid-template-areas:
            'icon name'
            'icon tag'
            'text text'
            'more more';
        column-gap: 0.875rem;
        row-gap: 0.125rem;
        align-content: start;
        padding: 1.125rem 1.25rem 1.25rem;
        color: inherit;
        text-decoration: none;
        transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease);
    }

    .module-tile:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--teal) 45%, transparent);
    }

    .module-tile__icon {
        grid-area: icon;
        align-self: center;
    }

    .module-tile__icon img {
        width: 3.25rem;
        height: 3.25rem;
        object-fit: contain;
    }

    .module-tile__name {
        grid-area: name;
        align-self: end;
        font-family: var(--f-display);
        font-size: 1.3125rem;
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--heading);
    }

    .module-tile__tag {
        grid-area: tag;
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        color: var(--text-3);
    }

    .module-tile__text {
        grid-area: text;
        margin-top: 0.75rem;
        font-size: 0.9375rem;
        line-height: 1.55;
        color: var(--text-2);
    }

    .module-tile__more {
        grid-area: more;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
        font-family: var(--f-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--accent);
    }

    .module-tile__more svg {
        transition: transform var(--dur) var(--ease);
    }

    .module-tile:hover .module-tile__more svg {
        transform: translateX(4px);
    }

    .module-tile:focus-visible {
        outline-offset: 4px;
    }

    /* Capturas de la portada como fichas de cristal. */
    .shot--card {
        display: grid;
        align-content: start;
        padding: 0.625rem 0.625rem 1rem;
    }

    .shot--card .shot__frame {
        border-color: var(--line);
        box-shadow: none;
    }

    .shot--card .shot__caption {
        padding-inline: 0.5rem;
        margin-top: 0.75rem;
        font-size: 0.8125rem;
    }

    /* Hoja de ruta como fichas: sin regla ni bordes propios. */
    .roadmap {
        gap: 1rem;
        border-top: 0;
    }

    .roadmap__item,
    .roadmap__item:first-child {
        padding: 1.25rem;
        border: 1px solid var(--glass-line);
    }

    .card::before,
    .value-card::before {
        color: var(--accent);
    }

    .card__title,
    .value-card__title {
        font-size: 1.1875rem;
    }

    .card__text,
    .value-card__text {
        font-size: 0.9375rem;
    }

    .stamp {
        border-top: 0;
        padding-top: 0;
    }

    /* Ficha de texto suelto (cierre del bloque de impacto). */
    .card--note {
        align-content: center;
    }

    .card--note::before {
        content: none;
    }

    .card--note .card__text {
        font-family: var(--f-display);
        font-size: 1.0625rem;
        line-height: 1.45;
        color: var(--heading);
    }

    /* En móvil las fichas resumen el texto; el detalle está en su página. */
    @media (max-width: 639px) {

        .module-tile__text,
        .shot--card .shot__caption span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }
    }
}