/* ============================================================================
   PeakMC — Sistema "Liquid Glass"
   Fichas de diseño, cristal, controles y movimiento.

   Concepto: hora dorada sobre la cumbre. Todo el cromo de la interfaz es
   cristal que refracta un atardecer naranja-amarillo. La tipografía va en
   tinta marrón oscura porque el fondo es luminoso: blanco sobre ámbar no se
   lee, tinta sobre cristal esmerilado sí.
   ============================================================================ */

/* ---------------------------------------------------------------- FICHAS -- */
:root {
    /*  Cielo del atardecer.
        La versión anterior iba de naranja a naranja: sin recorrido de luz, y
        por eso el cristal parecía una mancha en vez de vidrio. Un cristal
        esmerilado solo se lee como tal si detrás hay claro Y oscuro que
        refractar. Ahora arranca en un rojo profundo arriba y llega al amarillo
        pálido del horizonte, que además es como se ve un atardecer de verdad. */
    --sky-top:      #83250f;
    --sky-high:     #b83914;
    --sky-mid:      #e4601c;
    --sky-low:      #ff9c33;
    --sky-glow:     #ffca62;
    --sky-horizon:  #ffe9a8;
    --sun-core:     #fff8de;

    /*  Dos tintas, según sobre qué se escriba.
        El cielo es oscuro arriba y claro abajo, y está fijo: un panel que se
        desplaza pasa por los dos. Por eso los paneles de contenido llevan
        suficiente velo cálido como para valerse solos (tinta oscura dentro,
        legible caiga donde caiga), y lo que va suelto sobre el cielo —cabecera
        y portada, siempre en la franja alta y oscura— va en crema.            */
    --ink:          #3b1a0a;
    --ink-strong:   #261004;
    --ink-soft:     rgba(59, 26, 10, 0.70);
    --ink-faint:    rgba(59, 26, 10, 0.45);
    --ink-ghost:    rgba(59, 26, 10, 0.16);

    --cream:        #fff7ec;
    --on-sky:       #fff4e2;
    --on-sky-soft:  rgba(255, 244, 226, 0.82);
    --on-sky-faint: rgba(255, 244, 226, 0.58);

    /* Acentos */
    --gold:         #ffc83d;
    --gold-deep:    #f2a516;
    --ember:        #f2622b;
    --copper:       #c96a2c;
    --mint:         #3fb98a;   /* estados correctos */
    --alert:        #d93b2b;   /* errores */

    /* Cristal */
    --glass-tint:        rgba(255, 255, 255, 0.08);
    --glass-tint-strong: rgba(255, 255, 255, 0.14);
    --glass-tint-solid:  rgba(255, 250, 242, 0.22);
    --glass-edge:        rgba(255, 255, 255, 0.15);
    --glass-specular:    rgba(255, 255, 255, 0.5);
    --glass-inner-glow:  rgba(255, 255, 255, 0.2);
    --glass-drop:        0 8px 32px rgba(74, 24, 4, 0.20);
    --glass-drop-lg:     0 24px 70px rgba(74, 24, 4, 0.28);

    /* Radios */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Ritmo */
    --gap-xs: 8px;
    --gap-sm: 14px;
    --gap-md: 22px;
    --gap-lg: 40px;
    --gap-xl: 72px;

    /* Curvas de movimiento */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --shell: min(1280px, 92vw);
}

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

/*  El atributo `hidden` tiene que ganar SIEMPRE.
    El navegador lo aplica con `display: none`, pero cualquier regla nuestra que
    ponga `display: flex` le gana por cascada y el elemento se queda visible.
    Pasaba con la ficha del jugador (que salía con la imagen rota porque su src
    está vacío hasta iniciar sesión), con el botón de Entrar, con los mensajes
    de error de los formularios y con el aviso de Tebex del panel.             */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    /* El scroll no debe esconder títulos bajo la barra fija */
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--sky-mid);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', 'Figtree', sans-serif;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink-strong);
}

p { margin: 0; }

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

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

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

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

/* Precios y cifras en mono: alinean en columna y se leen como datos */
.num {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------- CIELO DE FONDO -- */
/*  Solo el color del atardecer: el degradado del cielo y el disco del sol.
    Nada de texturas, nubes ni siluetas. Va en position:fixed para que el
    cristal siempre tenga color que refractar por muy abajo que se baje.      */

.sky {
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        /* Núcleo del sol, justo bajo el borde inferior */
        radial-gradient(90% 55% at 50% 103%, var(--sun-core) 0%, transparent 52%),
        /* Resplandor que sube desde el horizonte */
        radial-gradient(130% 85% at 50% 100%, var(--sky-horizon) 0%, transparent 62%),
        radial-gradient(160% 110% at 50% 100%, var(--sky-glow) 0%, transparent 58%),
        /* Viñeta en las esquinas superiores: encierra la mirada y evita que el
           naranja plano se coma toda la pantalla */
        radial-gradient(120% 90% at 50% -10%, rgba(58, 12, 6, 0.55), transparent 60%),
        linear-gradient(179deg,
            var(--sky-top)    0%,
            var(--sky-high)  22%,
            var(--sky-mid)   46%,
            var(--sky-low)   68%,
            var(--sky-glow)  86%,
            var(--sky-horizon) 100%);
}

/* Halo del sol: late muy despacio, como el calor sobre el horizonte */
.sky::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -32vmin;
    width: 82vmin;
    height: 82vmin;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--sun-core) 0%, rgba(255, 217, 138, 0.55) 42%, transparent 70%);
    filter: blur(28px);
    animation: sun-breathe 11s var(--ease-soft) infinite;
}

@keyframes sun-breathe {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}

/* ============================================================================
   CRISTAL LÍQUIDO
   ============================================================================ */

/*  El filtro SVG (#lg-filter) solo lo aplica Firefox dentro de backdrop-filter;
    Chrome y Safari ignoran esa línea y usan la de -webkit-, que consigue el
    mismo efecto con desenfoque + saturación. Por eso van las dos declaraciones:
    cada motor toma la que sabe ejecutar.                                      */

/*  Anatomía de una pieza de cristal, de arriba abajo en el box-shadow:
      1. contorno fino, para recortarla del fondo
      2. luz especular en el canto superior izquierdo (de dónde viene la luz)
      3. canto inferior derecho EN SOMBRA — esto es lo que le da grosor. Sin
         ello el panel parece una calcomanía plana pegada encima, que era
         justamente el problema.
      4. la masa del vidrio acumulándose en la base
      5. brillo interior difuso
      6. sombra proyectada sobre el fondo                                      */

.glass {
    position: relative;
    background: var(--glass-tint);
    backdrop-filter: blur(2.5px) url(#lg-filter) blur(5px) saturate(1.5) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.15) contrast(1.05);
    box-shadow:
        inset 0 0 0 1px var(--glass-edge),
        inset 1.5px 1.5px 0 var(--glass-specular),
        inset -1px -1px 0 rgba(105, 42, 8, 0.20),
        inset 0 -20px 26px -24px rgba(80, 30, 4, 0.55),
        inset 0 0 12px var(--glass-inner-glow),
        var(--glass-drop);
    border-radius: var(--r-md);
}

/*  Panel de contenido. Lleva bastante velo cálido a propósito: el cielo va de
    rojo oscuro a oro y el panel se desplaza por encima de los dos, así que
    tiene que difundir lo suficiente para que la tinta oscura se lea siempre.
    Es lo que hace un vidrio esmerilado de verdad: difundir, no transparentar. */
.glass--panel {
    background: linear-gradient(
        158deg,
        rgba(255, 247, 236, 0.52) 0%,
        rgba(255, 238, 219, 0.42) 55%,
        rgba(255, 232, 208, 0.46) 100%
    );
    -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(1.06);
    backdrop-filter: blur(3px) url(#lg-filter) blur(7px) saturate(1.5) brightness(1.06);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        inset 2px 2px 0 rgba(255, 255, 255, 0.72),
        inset -1.5px -1.5px 0 rgba(120, 52, 12, 0.14),
        inset 0 -28px 34px -32px rgba(80, 30, 4, 0.42),
        0 14px 44px rgba(74, 24, 4, 0.16);
    border-radius: var(--r-lg);
}

/* Capa flotante (modales, menús): más sólida todavía y con sombra larga */
.glass--raised {
    background: linear-gradient(
        158deg,
        rgba(255, 249, 240, 0.72) 0%,
        rgba(255, 241, 224, 0.62) 60%,
        rgba(255, 235, 212, 0.66) 100%
    );
    -webkit-backdrop-filter: blur(40px) saturate(1.5) brightness(1.05);
    backdrop-filter: blur(4px) url(#lg-filter) blur(9px) saturate(1.5) brightness(1.05);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 2px 2px 0 rgba(255, 255, 255, 0.85),
        inset -2px -2px 0 rgba(120, 52, 12, 0.12),
        inset 0 -34px 40px -38px rgba(80, 30, 4, 0.38),
        var(--glass-drop-lg);
    border-radius: var(--r-xl);
}

/*  Cristal oscuro. Para la cabecera, que vive siempre sobre la franja alta del
    cielo: un velo claro ahí arriba haría un parche lechoso, y uno oscuro se
    integra y deja que el texto crema destaque.                                */
.glass--dark {
    background: linear-gradient(158deg, rgba(74, 20, 8, 0.42), rgba(52, 14, 6, 0.52));
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(3px) url(#lg-filter) blur(6px) saturate(1.6);
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 180, 0.20),
        inset 1.5px 1.5px 0 rgba(255, 232, 200, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 12px 38px rgba(50, 14, 2, 0.32);
}

.glass--dark::before { opacity: 0.35; }

/*  Borde refractante. Chrome no admite filtros SVG en backdrop-filter, así que
    el "canto de vidrio" se dibuja: un degradado cónico en el borde imita cómo
    la luz recorre el bisel de una pieza de cristal real.                      */
.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from 130deg,
        rgba(255, 255, 255, 0.75),
        rgba(255, 214, 150, 0.15) 25%,
        rgba(255, 255, 255, 0.55) 42%,
        rgba(255, 180, 110, 0.1)  62%,
        rgba(255, 255, 255, 0.7)  84%,
        rgba(255, 255, 255, 0.75)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-soft);
}

/*  Reflejo especular que sigue al cursor. Las variables --mx/--my las escribe
    effects.js; sin JS el brillo se queda centrado y tampoco desentona.        */
.glass--live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        45% 45% at var(--mx, 50%) var(--my, 0%),
        rgba(255, 255, 255, 0.35),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.45s var(--ease-soft);
    pointer-events: none;
}

.glass--live:hover::after { opacity: 1; }

/* ============================================================================
   CONTROLES
   ============================================================================ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--r-pill);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.35s var(--ease-back),
        box-shadow 0.35s var(--ease-soft),
        filter 0.25s var(--ease-soft);
}

/* Barrido de luz: cruza el botón al pasar el cursor, como un destello sobre vidrio */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%);
    transform: translateX(-130%);
    transition: transform 0.75s var(--ease-out);
}

.btn:hover::after { transform: translateX(130%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.975); transition-duration: 0.1s; }

.btn:focus-visible {
    outline: 2px solid var(--ink-strong);
    outline-offset: 3px;
}

.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn[disabled]::after { display: none; }

/* Principal: ámbar sólido con tinta oscura, como el botón CONTINUAR */
.btn--primary {
    background: linear-gradient(168deg, #ffd45c 0%, var(--gold) 45%, var(--gold-deep) 100%);
    color: var(--ink-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 0 rgba(150, 88, 0, 0.28),
        0 8px 24px rgba(180, 110, 10, 0.36);
}

.btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 0 rgba(150, 88, 0, 0.3),
        0 14px 34px rgba(180, 110, 10, 0.46);
}

/* Cristal: para acciones secundarias sobre el cielo */
.btn--glass {
    background: var(--glass-tint-strong);
    color: var(--ink-strong);
    -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.15);
    backdrop-filter: blur(2px) url(#lg-filter) blur(5px) saturate(1.6) brightness(1.12);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 12px rgba(255, 255, 255, 0.22),
        0 6px 22px rgba(74, 24, 4, 0.16);
}

.btn--glass:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Fantasma: solo el canto de cristal */
.btn--ghost {
    background: transparent;
    color: var(--ink-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

.btn--sm { padding: 9px 18px; font-size: 0.83rem; }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn--danger {
    background: linear-gradient(168deg, #f2705c, var(--alert));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px rgba(160, 30, 20, 0.32);
}

/* ------------------------------------------------------------- CAMPOS ----- */

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/*  Los campos llevan velo suficiente para valerse solos: uno puede aparecer
    sobre la parte oscura del cielo y con un fondo casi transparente la tinta
    dejaría de leerse.                                                         */
.input,
.textarea,
.select {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--r-md);
    background: rgba(255, 248, 238, 0.60);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    color: var(--ink-strong);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.8),
        inset -1px -1px 0 rgba(120, 52, 12, 0.10),
        0 3px 12px rgba(74, 24, 4, 0.10);
    transition: box-shadow 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    background: rgba(255, 252, 246, 0.82);
    box-shadow:
        inset 0 0 0 1.5px var(--gold-deep),
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.7),
        0 0 0 4px rgba(255, 200, 61, 0.3);
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233b1a0a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

.select option { background: #ffe9c9; color: var(--ink-strong); }

.field__error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: #8f1f13;
}

/* ------------------------------------------------------- INTERRUPTOR ------ */
/*  El de "¿Eres de Bedrock?"                                                 */

.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 13px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.35);
    cursor: pointer;
    user-select: none;
    transition: background 0.3s var(--ease-soft);
}

.toggle:hover { background: rgba(255, 255, 255, 0.2); }

.toggle__text  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle__title { font-weight: 700; font-size: 0.92rem; color: var(--ink-strong); }
.toggle__hint  { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.35; }

.toggle__switch {
    position: relative;
    flex: none;
    width: 54px;
    height: 30px;
    border-radius: var(--r-pill);
    background: rgba(59, 26, 10, 0.28);
    box-shadow: inset 0 2px 6px rgba(59, 26, 10, 0.3);
    transition: background 0.4s var(--ease-soft);
}

.toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(160deg, #fff, #ffe9c4);
    box-shadow: 0 2px 8px rgba(59, 26, 10, 0.35);
    transition: transform 0.4s var(--ease-back);
}

.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.toggle input:checked + .toggle__switch {
    background: linear-gradient(120deg, var(--gold), var(--gold-deep));
}

.toggle input:checked + .toggle__switch::after { transform: translateX(24px); }

.toggle input:focus-visible + .toggle__switch {
    outline: 2px solid var(--ink-strong);
    outline-offset: 3px;
}

/* --------------------------------------------------------- ETIQUETAS ------ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    color: var(--ink-strong);
}

.chip--hot     { background: linear-gradient(120deg, #ff8a3d, var(--ember)); color: #fff; }
.chip--new     { background: linear-gradient(120deg, #58d6a5, var(--mint)); color: #05301f; }
.chip--sale    { background: linear-gradient(120deg, #ffd45c, var(--gold-deep)); color: var(--ink-strong); }
.chip--limited { background: linear-gradient(120deg, #6e5bd6, #4a37b8); color: #fff; }

/* ------------------------------------------------------------ MOVIMIENTO -- */

/*  Revelado al entrar en pantalla. La clase la pone effects.js con un
    IntersectionObserver; el estado inicial vive aquí para que no haya
    parpadeo antes de que cargue el JS.                                       */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

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

/* Entrada escalonada: cada hijo entra un poco después que el anterior */
.stagger > * { animation: rise-in 0.9s var(--ease-out) backwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.13s; }
.stagger > *:nth-child(3) { animation-delay: 0.21s; }
.stagger > *:nth-child(4) { animation-delay: 0.29s; }
.stagger > *:nth-child(5) { animation-delay: 0.37s; }
.stagger > *:nth-child(6) { animation-delay: 0.45s; }
.stagger > *:nth-child(7) { animation-delay: 0.53s; }
.stagger > *:nth-child(8) { animation-delay: 0.61s; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(24px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 200, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0); }
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------- ACCESIBILIDAD --- */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 20px;
    z-index: 999;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    background: var(--ink-strong);
    color: var(--cream);
    transition: top 0.25s var(--ease-out);
}

.skip-link:focus { top: 16px; }

/*  Quien pide menos movimiento no debería sufrir nubes a la deriva ni logos
    girando: se apaga todo salvo transiciones mínimas.                        */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/*  Sin soporte de backdrop-filter (navegadores viejos) el cristal quedaría
    invisible sobre el cielo: se sustituye por un velo sólido claro.          */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass          { background: rgba(255, 246, 233, 0.82); }
    .glass--panel   { background: rgba(255, 246, 233, 0.88); }
    .glass--raised  { background: rgba(255, 248, 238, 0.94); }
    .btn--glass     { background: rgba(255, 246, 233, 0.8); }
    .input, .textarea, .select { background: rgba(255, 252, 246, 0.85); }
}