/* YomiScore · web pública
   Lienzo oscuro de escenario, papel cálido para la partitura y la paleta de la app como acento
   (Encore, la del icono H · Encore, por defecto). Títulos en Plus Jakarta Sans, la letra del logotipo;
   Fraunces queda solo para lo que imita una partitura impresa (títulos de obra, marcas a lápiz).
   Sin estilos en línea (CSP style-src 'self'): la paleta cambia con data-palette en <html>. */

/* ------------------------------------------------------------------ fuentes */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-roman.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
/* Subconjunto de Bravura (SIL OFL, renombrado por su Reserved Font Name). «block»: mejor nada
   que un cuadradito mientras carga. */
@font-face {
    font-family: 'Scorix Music Glyphs';
    src: url('/assets/fonts/scorix-music-glyphs.woff2') format('woff2');
    font-display: block;
}
/* Respaldos con métricas ajustadas: el cambio de fuente no mueve el texto (CLS). */
@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia');
    size-adjust: 115%;
    ascent-override: 85%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Fraunces Fallback';
    font-style: italic;
    src: local('Georgia Italic'), local('Georgia-Italic');
    size-adjust: 110.5%;
    ascent-override: 88.5%;
    descent-override: 23%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Jakarta Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 103%;
    ascent-override: 100.7%;
    descent-override: 21.5%;
    line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */

@property --p1 { syntax: '<color>'; inherits: true; initial-value: #ff8a5b; }
@property --p2 { syntax: '<color>'; inherits: true; initial-value: #ff3d77; }
@property --p3 { syntax: '<color>'; inherits: true; initial-value: #b53cf0; }
@property --at { syntax: '<color>'; inherits: true; initial-value: #ff4f85; }
@property --atl { syntax: '<color>'; inherits: true; initial-value: #c2185b; }
@property --b1 { syntax: '<color>'; inherits: true; initial-value: #d4145a; }
@property --b2 { syntax: '<color>'; inherits: true; initial-value: #8a2bd0; }
@property --halo { syntax: '<color>'; inherits: true; initial-value: #ff5a6e; }

:root {
    --canvas: #0b0a10;
    --surface: #15131c;
    --surface-2: #1b1824;
    --surface-3: #242030;
    --line: rgb(245 241 234 / 0.08);
    --line-2: rgb(245 241 234 / 0.14);
    --ink: #f5f1ea;
    --ink-2: #d4cfd9;
    --muted: #9d97aa;
    --paper: #f5f1e8;
    --paper-ink: #1b1822;

    /* Paleta Encore (por defecto, la de la marca): coral → magenta → orquídea. --at: acento como texto
       sobre oscuro (≥ 4,6:1); --atl: sobre papel (≥ 4,6:1 sobre #f5f1e8); --b1/--b2: degradado de botón
       legible con --on (blanco, ≥ 4,5:1 en todo el recorrido). */
    --p1: #ff8a5b;
    --p2: #ff3d77;
    --p3: #b53cf0;
    --at: #ff4f85;
    --atl: #c2185b;
    --b1: #d4145a;
    --b2: #8a2bd0;
    --on: #fff;
    /* --halo: color de las luces, sombras de color y tintes translúcidos. En el resto de paletas es su
       primario; en Encore, el coral rosado del icono (#ff5a6e): el coral puro, tan transparente sobre
       el escenario oscuro, se vuelve marrón. */
    --halo: #ff5a6e;

    /* Colores fijos de la marca (no cambian con la paleta): el magenta de la sombra del icono y el
       «Score» del logotipo sobre oscuro. */
    --brand-magenta: #ff3d77;
    --brand-score: #ff8fb6;

    --font-sans: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--font-sans);
    --font-serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
    --font-music: 'Scorix Music Glyphs';

    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 34px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --header-h: 68px;
    --gutter: clamp(16px, 4vw, 40px);
    --maxw: 1200px;

    color-scheme: dark;
    transition: --p1 0.7s var(--ease), --p2 0.7s var(--ease), --p3 0.7s var(--ease), --at 0.7s var(--ease),
        --atl 0.7s var(--ease), --b1 0.7s var(--ease), --b2 0.7s var(--ease), --halo 0.7s var(--ease);
}

:root[data-palette='aurora'] { --p1: #7c5cff; --p2: #22d3ee; --p3: #ff5caa; --at: #8d70ff; --atl: #6c47ea; --b1: #4c0cbd; --b2: #007e94; --on: #fff; --halo: #7c5cff; }
:root[data-palette='teatro'] { --p1: #c0264a; --p2: #e9b44c; --p3: #8b5cf6; --at: #eb526c; --atl: #c0264a; --b1: #84001d; --b2: #956b00; --on: #fff; --halo: #c0264a; }
:root[data-palette='coral'] { --p1: #ff5f6d; --p2: #ffb86b; --p3: #8b5cf6; --at: #ff5f6d; --atl: #c5243f; --b1: #ff5f6d; --b2: #ffb86b; --on: #17151f; --halo: #ff5f6d; }
:root[data-palette='emerald'] { --p1: #10b981; --p2: #a3e635; --p3: #0ea5e9; --at: #10b981; --atl: #007745; --b1: #10b981; --b2: #a3e635; --on: #17151f; --halo: #10b981; }
:root[data-palette='midnight'] { --p1: #e6b54a; --p2: #f7dc8b; --p3: #6d7cff; --at: #e6b54a; --atl: #8b5d00; --b1: #e6b54a; --b2: #f7dc8b; --on: #17151f; --halo: #e6b54a; }
:root[data-palette='sakura'] { --p1: #f472b6; --p2: #a78bfa; --p3: #34d399; --at: #f472b6; --atl: #b2357c; --b1: #bf4688; --b2: #7d61ca; --on: #fff; --halo: #f472b6; }
:root[data-palette='ocean'] { --p1: #2563eb; --p2: #06b6d4; --p3: #f59e0b; --at: #4182ff; --atl: #1f5ce4; --b1: #0037be; --b2: #007c96; --on: #fff; --halo: #2563eb; }

/* ------------------------------------------------------------------ base */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--canvas);
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* Grano de papel casi imperceptible sobre todo el lienzo. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg { max-width: 100%; }

a { color: inherit; }

h1,
h2,
h3 { margin: 0; font-weight: 600; }

p { margin: 0 0 1em; }

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

main:focus { outline: none; }

::selection { background: color-mix(in srgb, var(--halo) 45%, transparent); color: var(--ink); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mus { font-family: var(--font-music); font-style: normal; font-weight: 400; line-height: 1; }

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

.skip-link {
    position: absolute;
    left: 16px;
    top: -120px;
    z-index: 200;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    background: var(--ink);
    color: var(--canvas);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ tipografía */

.display {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.7rem, 1.5rem + 4.8vw, 5.9rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.display em,
.sec-title em,
.footer-tag em,
.legal-title em,
.nf-title em,
.tray-count,
.sx {
    font-style: normal;
    background: linear-gradient(100deg, var(--p1) 0%, var(--p2) 58%, var(--p3) 115%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-right: 0.06em;
}

.sec-title {
    font-family: var(--font-display);
    font-weight: 780;
    font-size: clamp(2rem, 1.25rem + 2.9vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.sec-title em { display: inline-block; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    margin: 0 0 1.1rem;
    font: 700 0.78rem/1.2 var(--font-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--at);
}
.eyebrow::before {
    content: '';
    width: 22px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--p1), var(--p2));
}
.eyebrow.pill {
    padding: 0.55em 1em;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgb(255 255 255 / 0.03);
}
.eyebrow.pill::before { display: none; }

.sec-intro {
    max-width: 60ch;
    margin: 1.3rem 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    text-wrap: pretty;
}
.sec-intro a,
.faq-a a,
.wl-legal a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--p2) 70%, transparent); }

/* ------------------------------------------------------------------ botones */

.btn {
    --h: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: var(--h);
    padding: 0 1.35em;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 650 1rem/1 var(--font-sans);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn .i { width: 1.15em; height: 1.15em; transition: transform 0.25s var(--ease); }
.btn-primary {
    color: var(--on);
    background: linear-gradient(120deg, var(--b1), var(--b2));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 12px 32px -12px color-mix(in srgb, var(--halo) 75%, transparent);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 18px 44px -14px color-mix(in srgb, var(--halo) 90%, transparent);
}
.btn-primary:hover .i { transform: translateX(3px); }
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-ghost { color: var(--ink); background: rgb(255 255 255 / 0.04); border-color: var(--line-2); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(245 241 234 / 0.26); }
.btn-lg { --h: 56px; padding: 0 1.6em; font-size: 1.0625rem; }
.btn-sm { --h: 44px; padding: 0 1.1em; font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: progress; opacity: 0.85; }

/* ------------------------------------------------------------------ cabecera */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgb(11 10 16 / 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s;
}
.site-header.is-scrolled { background: rgb(11 10 16 / 0.78); border-bottom-color: var(--line); }

.header-inner { display: flex; align-items: center; gap: 1rem; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    flex: none;
}
/* El icono ya trae sus esquinas (radio 228/1024) y su transparencia: la sombra sigue su silueta. */
.logo {
    display: block;
    width: 34px;
    height: 34px;
    flex: none;
    filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--brand-magenta) 40%, transparent));
}
.g-p1 { stop-color: var(--p1); }
.g-p2 { stop-color: var(--p2); }
/* «YomiScore» como en el lockup oscuro: «Yomi» gruesa en blanco y «Score» más fina en rosa. */
.brand-word {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
}
.bw-score { font-weight: 500; color: var(--brand-score); }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.9375rem;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
}
.nav a:hover { color: var(--ink); background: rgb(255 255 255 / 0.06); }

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

/* ---- selector de idioma: botón con el idioma actual y panel de cristal con los 20 idiomas */

.lang { position: relative; }
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 44px;
    padding: 0 0.7rem 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgb(255 255 255 / 0.04);
    color: var(--ink);
    font: 700 0.8rem/1 var(--font-sans);
    letter-spacing: 0.06em;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(245 241 234 / 0.26); }
.lang-btn:focus-visible { outline: 2px solid var(--p2); outline-offset: 2px; }
.lang-btn .i { width: 18px; height: 18px; flex: none; }
.lang-btn > .i { color: var(--at); }
.lang-cur { min-width: 1.4em; text-align: center; }
.lang-chev { display: inline-flex; color: var(--muted); transition: transform 0.3s var(--ease); }
.lang-chev .i { width: 15px; height: 15px; }
.lang[open] .lang-btn {
    background: rgb(255 255 255 / 0.1);
    border-color: color-mix(in srgb, var(--halo) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--halo) 14%, transparent);
}
.lang[open] .lang-chev { transform: rotate(180deg); }

.lang-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 12px);
    z-index: 70;
    width: min(424px, calc(100vw - 32px));
    padding: 0.55rem;
    border-radius: 24px;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--halo) 16%, transparent), transparent 60%),
        rgb(19 17 26 / 0.8);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgb(245 241 234 / 0.14);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 34px 70px -24px rgb(0 0 0 / 0.85);
    /* Un desenfoque dentro de otro (la cabecera) no se aplica en Chromium: por eso
       la cabecera deja de difuminar mientras el panel está abierto (se vuelve casi opaca). */
    transform-origin: top right;
}
[dir='rtl'] .lang-panel { transform-origin: top left; }
.lang[open] .lang-panel { animation: lang-in 0.26s var(--ease) both; }
@keyframes lang-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
.lang-title {
    margin: 0.35rem 0.75rem 0.5rem;
    color: var(--muted);
    font: 700 0.7rem/1.2 var(--font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    max-height: calc(100dvh - var(--header-h) - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lang-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.6rem 0 0.8rem;
    border-radius: 14px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.94rem;
    transition: background-color 0.18s, color 0.18s;
}
.lang-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-iso {
    flex: none;
    min-width: 2.2em;
    padding: 0.28em 0.45em;
    border-radius: 8px;
    background: rgb(255 255 255 / 0.05);
    color: var(--muted);
    font: 700 0.66rem/1 var(--font-sans);
    letter-spacing: 0.08em;
    text-align: center;
}
.lang-opt:hover,
.lang-opt:focus-visible { background: rgb(255 255 255 / 0.07); color: var(--ink); outline: none; }
.lang-opt:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--p2) 80%, transparent); }
.lang-opt[aria-current] {
    color: var(--ink);
    background: linear-gradient(135deg, color-mix(in srgb, var(--p1) 22%, transparent), color-mix(in srgb, var(--p3) 18%, transparent));
}
.lang-opt[aria-current] .lang-iso { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--on); }

/* Móvil: el panel ocupa el ancho de la pantalla bajo la cabecera (nunca se sale por los lados). */
@media (max-width: 640px) {
    .lang-panel {
        position: fixed;
        top: calc(var(--header-h) + 6px);
        left: 16px;
        right: 16px;
        width: auto;
        transform-origin: top center;
        /* Fijo dentro de la cabecera pegajosa, Chromium pinta mal el desenfoque: aquí, fondo casi opaco. */
        background:
            radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--halo) 16%, transparent), transparent 60%),
            rgb(19 17 26 / 0.97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    [dir='rtl'] .lang-panel { transform-origin: top center; }
}
@media (max-width: 400px) {
    .lang-btn { gap: 0.3rem; padding: 0 0.6rem; }
    .lang-chev { display: none; }
}

.cta-short { display: none; }

.menu { display: none; position: relative; }
.menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgb(255 255 255 / 0.04);
    cursor: pointer;
    list-style: none;
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu[open] .menu-toggle { background: rgb(255 255 255 / 0.1); }
.menu-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 32px));
    padding: 0.6rem;
    border-radius: 22px;
    background: rgb(21 19 28 / 0.97);
    border: 1px solid var(--line-2);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.75);
}
.menu-panel ul { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; }
.menu-panel ul a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}
.menu-panel ul a:hover { background: rgb(255 255 255 / 0.06); }

@media (max-width: 1180px) {
    .cta-long { display: none; }
    .cta-short { display: inline; }
    /* Entre 1024 y 1180 px el menú cabe en una línea junto al logotipo si se aprieta un poco. */
    .nav a { padding: 0 0.6rem; }
}
@media (max-width: 1023px) {
    .nav { display: none; }
    .menu { display: block; }
    /* Sin la navegación (oculta), las acciones vuelven al borde derecho: el panel del menú se abre
       desde ahí (right: 0) y no se sale de la pantalla por la izquierda. */
    .nav + .header-actions { margin-inline-start: auto; }
}
/* Móvil: el logotipo y la llamada a la acción caben con el menú sin salirse por la derecha. */
@media (max-width: 400px) {
    .header-inner { gap: 0.5rem; }
    .site-header .brand { gap: 0.5rem; }
    .site-header .logo { width: 30px; height: 30px; }
    .site-header .brand-word { font-size: 1.18rem; }
    .header-actions { gap: 0.4rem; }
    .header-cta { padding: 0 0.85em; font-size: 0.875rem; }
}
@media (max-width: 359px) {
    .header-cta { display: none; }
}

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative;
    padding: clamp(2.2rem, 1.5rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
    overflow: clip;
    isolation: isolate;
}

.hero-aurora,
.legal-bg {
    position: absolute;
    inset: -10% 0 auto;
    height: 110%;
    z-index: -1;
    pointer-events: none;
}
.blob { position: absolute; border-radius: 50%; }
.blob.b1 {
    width: min(70vw, 820px);
    aspect-ratio: 1;
    left: -14%;
    top: -14%;
    background: radial-gradient(circle, color-mix(in srgb, var(--halo) 55%, transparent) 0%, transparent 66%);
    opacity: 0.75;
}
.blob.b2 {
    width: min(60vw, 700px);
    aspect-ratio: 1;
    right: -12%;
    top: 4%;
    background: radial-gradient(circle, color-mix(in srgb, var(--p2) 45%, transparent) 0%, transparent 66%);
    opacity: 0.55;
}
.blob.b3 {
    width: min(50vw, 560px);
    aspect-ratio: 1;
    left: 32%;
    top: 46%;
    background: radial-gradient(circle, color-mix(in srgb, var(--p3) 38%, transparent) 0%, transparent 68%);
    opacity: 0.45;
}
/* Un pentagrama tenue que cruza el escenario. */
.hero-aurora::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 62%;
    height: 49px;
    background: repeating-linear-gradient(to bottom, rgb(245 241 234 / 0.06) 0 1px, transparent 1px 12px);
    -webkit-mask: linear-gradient(90deg, transparent 48%, #000 62%, #000 88%, transparent);
    mask: linear-gradient(90deg, transparent 48%, #000 62%, #000 88%, transparent);
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.6rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgb(255 255 255 / 0.045);
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
}
.pulse {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--p2);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--p2) 60%, transparent);
}

.lede {
    max-width: 33em;
    margin: 1.6rem 0 0;
    color: var(--ink-2);
    font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
@media (max-width: 420px) {
    .hero .cta-row .btn { width: 100%; }
}

.palette-picker { margin-top: 2.5rem; visibility: hidden; }
.js .palette-picker { visibility: visible; }
.pp-label {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.pp-swatches,
.pal-swatches { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.pal-swatches { visibility: hidden; }
.js .pal-swatches { visibility: visible; }
.pp-name { margin: 0; color: var(--muted); font-size: 0.9rem; }
.pp-name b { color: var(--ink); font-weight: 650; margin-right: 0.35rem; }

.swatch {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.swatch::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sa), var(--sb));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28), 0 6px 16px -6px var(--sa);
    transition: transform 0.35s var(--spring);
}
.swatch::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.swatch:hover::before { transform: scale(1.12); }
.swatch[aria-pressed='true']::after { opacity: 1; transform: none; }
.sw-encore { --sa: #ff3d77; --sb: #b53cf0; }
.sw-encore::before { background: linear-gradient(135deg, #ff8a5b, #ff3d77 50%, #b53cf0); }
.sw-aurora { --sa: #7c5cff; --sb: #22d3ee; }
.sw-teatro { --sa: #c0264a; --sb: #e9b44c; }
.sw-coral { --sa: #ff5f6d; --sb: #ffb86b; }
.sw-emerald { --sa: #10b981; --sb: #a3e635; }
.sw-midnight { --sa: #e6b54a; --sb: #f7dc8b; }
.sw-sakura { --sa: #f472b6; --sb: #a78bfa; }
.sw-ocean { --sa: #2563eb; --sb: #06b6d4; }

/* ---- tableta del hero */

.hero-visual { position: relative; display: flex; justify-content: center; perspective: 1600px; }

.device-stage {
    --rx: 0deg;
    --ry: 0deg;
    --tx: 0;
    --ty: 0;
    position: relative;
    width: min(100%, 500px);
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform 0.7s var(--ease);
}

.device,
.lv-device {
    position: relative;
    padding: 13px;
    border-radius: 34px;
    background: linear-gradient(150deg, #34303f 0%, #17151d 38%, #0d0c11 70%, #24212c 100%);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.09),
        inset 0 1px 0 rgb(255 255 255 / 0.16),
        0 60px 120px -40px rgb(0 0 0 / 0.85),
        0 40px 90px -50px color-mix(in srgb, var(--halo) 70%, transparent);
}
.device::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #050407;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.device-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #e9e6e0;
}

.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 42px;
    padding: 0 10px 0 6px;
    background: #15131c;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 650;
}
.ab-left,
.ab-tools { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ab-left .i { width: 18px; height: 18px; color: var(--muted); }
.ab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; }
.ab-tool { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-2); }
.ab-tool .i { width: 16px; height: 16px; }
.ab-tool.is-on { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--on); }
.ab-page {
    position: relative;
    display: grid;
    margin-left: 4px;
    padding: 0 8px;
    height: 24px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.08);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.ab-page .pg { grid-area: 1 / 1; align-self: center; white-space: nowrap; }
.pg-2 { opacity: 0; }

.score-wrap { position: relative; }
.score { display: block; width: 100%; height: auto; }
.score .paper { fill: #fbf9f4; }
.score .sl { stroke: #26222f; stroke-width: 1; opacity: 0.8; }
.score .mus { font-size: 32px; fill: #1b1822; }
.score .stem { stroke: #1b1822; stroke-width: 1.1; }
.score .bar,
.score .bar-thick,
.score .ink { fill: #1b1822; }
.score .sc-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    font-variation-settings: 'opsz' 48, 'SOFT' 50;
    fill: #1b1822;
}
.score .sc-sub { font: 600 12px var(--font-sans); letter-spacing: 0.06em; fill: #6c6676; }
.score .mnum { font: italic 500 12px var(--font-serif); fill: #6c6676; }
.score .sc-folio { font: 600 12px var(--font-sans); fill: #8a8494; }
.ann-pencil { fill: none; stroke: var(--atl); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.ann-hl { fill: none; stroke: var(--p3); stroke-width: 15; stroke-linecap: round; opacity: 0.34; mix-blend-mode: multiply; stroke-dasharray: 1 1; }
.score .ann-stamp,
.score .ann-static { fill: var(--atl); }
.ann-text { font: italic 600 16px var(--font-serif); fill: var(--atl); font-variation-settings: 'opsz' 18, 'WONK' 1; }
.ann-link rect { fill: #fff; stroke: var(--atl); stroke-width: 1.2; }
.ann-link text { font: 700 11px var(--font-sans); fill: var(--atl); }
.page-2 { opacity: 0; }

.turn-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(100deg, transparent 32%, rgb(255 255 255 / 0.85) 47%, rgb(60 50 80 / 0.22) 53%, transparent 64%);
    transform: translateX(110%);
}

.pedal-hud {
    position: absolute;
    left: 50%;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    border-radius: 999px;
    background: rgb(21 19 28 / 0.86);
    color: var(--ink-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transform: translateX(-50%);
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
    white-space: nowrap;
}
.pedal-hud > .i { width: 14px; height: 14px; color: var(--p2); }
.kc {
    display: grid;
    place-items: center;
    width: 26px;
    height: 22px;
    border-radius: 7px;
    background: rgb(255 255 255 / 0.08);
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.35);
    color: var(--ink);
}
.kc .i { width: 13px; height: 13px; stroke-width: 2.4; }

.float-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1rem 0.65rem 0.7rem;
    border-radius: 18px;
    background: rgb(21 19 28 / 0.74);
    border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 44px -22px rgb(0 0 0 / 0.75);
    transform: translate3d(calc(var(--tx) * -22px), calc(var(--ty) * -16px), 60px);
    transition: transform 0.7s var(--ease);
}
.fc-layers { left: -11%; top: 6.5%; }
.fc-stamps { right: -9%; bottom: -4.5%; }
.fc-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    color: var(--on);
}
.fc-icon .i { width: 18px; height: 18px; }
.fc-glyphs { font-size: 26px; letter-spacing: 6px; color: var(--at); padding: 0 2px; line-height: 1; }
.fc-text { display: flex; flex-direction: column; line-height: 1.25; }
.fc-text b { font-size: 0.85rem; font-weight: 700; }
.fc-text small { font-size: 0.72rem; color: var(--muted); }
@media (max-width: 640px) {
    .float-chip { padding: 0.45rem 0.7rem 0.45rem 0.5rem; gap: 0.5rem; border-radius: 14px; }
    /* Por encima del marco de la tableta: más abajo tapaba el título de la partitura en la barra. */
    .fc-layers { left: 3%; top: -5%; }
    .fc-stamps { right: 3%; bottom: -3%; }
    .fc-icon { width: 30px; height: 30px; }
    .fc-glyphs { font-size: 20px; }
    .fc-text b { font-size: 0.75rem; }
    .fc-text small { display: none; }
}

/* ---- franja de esenciales */

.proof { border-block: 1px solid var(--line); background: rgb(255 255 255 / 0.015); }
.proof-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 2.2rem;
    margin: 0;
    padding: 1.4rem 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 0.9375rem;
    font-weight: 550;
}
.proof-list li { display: inline-flex; align-items: center; gap: 0.55rem; }
.proof-list .i { width: 19px; height: 19px; color: var(--at); }

/* ------------------------------------------------------------------ secciones */

.sec { position: relative; padding-block: clamp(4rem, 2.5rem + 5.5vw, 7.5rem); }
.sec-head.center { display: flex; flex-direction: column; align-items: center; max-width: 840px; margin-inline: auto; text-align: center; }
.sec-head.center .sec-intro { margin-inline: auto; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 960px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
    .split-rev { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
    .split-rev > .split-media { order: -1; }
}

/* ---- tarjetas con foco de luz */

.card {
    position: relative;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.018));
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
}
.card[data-spotlight]::before,
.tile[data-spotlight]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), color-mix(in srgb, var(--halo) 17%, transparent), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s;
}
.card[data-spotlight]::after,
.tile[data-spotlight]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), color-mix(in srgb, var(--p2) 70%, transparent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s;
}
.card[data-spotlight]:hover::before,
.card[data-spotlight]:hover::after,
.tile[data-spotlight]:hover::before,
.tile[data-spotlight]:hover::after { opacity: 1; }

.card-copy { padding: clamp(1.4rem, 2.5vw, 2rem); }
.card h3 { margin: 1rem 0 0.45rem; font: 650 1.2rem/1.3 var(--font-sans); letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--halo) 26%, transparent), color-mix(in srgb, var(--p2) 14%, transparent));
    border: 1px solid color-mix(in srgb, var(--halo) 34%, transparent);
    color: var(--ink);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.tag-row li,
.ambients li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 650;
}
.ambients .i { width: 15px; height: 15px; color: var(--at); }

/* ---- biblioteca (bento) */

.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
.b-lib { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 480px; }
.b-scan { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.b-col,
.b-set,
.b-pal { grid-column: span 2; display: flex; flex-direction: column; }
@media (max-width: 1023px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-lib { grid-column: span 2; grid-row: auto; }
    .b-scan,
    .b-col,
    .b-set,
    .b-pal { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 680px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .b-lib,
    .b-scan,
    .b-col,
    .b-set,
    .b-pal { grid-column: auto; }
    .b-lib { min-height: 0; }
}

.shelf {
    --w: min(150px, 21vw);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(var(--w) * 1.62);
    padding: 0 1rem;
    overflow: hidden;
}
.cover {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    width: var(--w);
    aspect-ratio: 3 / 4;
    margin-left: calc(var(--w) * -0.22);
    padding: calc(var(--w) * 0.08);
    border-radius: 9px 9px 3px 3px;
    background: #f7f4ec;
    color: #1b1822;
    box-shadow: 0 30px 40px -24px rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(0 0 0 / 0.06);
    transform: translateY(18%) rotate(var(--r, 0deg));
    transform-origin: 50% 100%;
    transition: transform 0.6s var(--ease);
}
.cover:first-child { margin-left: 0; }
.cv-1 { --r: -9deg; z-index: 1; }
.cv-2 { --r: -4.5deg; z-index: 2; background: #1e2a46; color: #f1e3bf; }
.cv-3 { --r: 0deg; z-index: 3; }
.cv-4 { --r: 4.5deg; z-index: 2; background: #dfe5d6; }
.cv-5 { --r: 9deg; z-index: 1; background: #3a1d2a; color: #f3d9c9; }
.b-lib:hover .cover { transform: translateY(8%) rotate(calc(var(--r, 0deg) * 1.5)); }
.b-lib:hover .cv-3 { transform: translateY(2%); }
.cv-title { font: italic 600 calc(var(--w) * 0.09) / 1.12 var(--font-serif); font-variation-settings: 'opsz' 24; }
.cv-comp { margin-top: 3px; font: 700 calc(var(--w) * 0.05) / 1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.cv-page { width: 100%; height: auto; margin-top: auto; }
.cv-page .mp-paper,
.cv-page .mp-title { fill: transparent; }
.cv-2 .cv-page,
.cv-5 .cv-page { opacity: 0; }

.scan-visual { display: grid; place-items: center; flex: 1; padding: 1.8rem 1.6rem 0; }
.scan-frame { position: relative; width: 180px; height: 236px; padding: 14px; }
.scan-page { display: block; width: 100%; height: 100%; transform: rotate(-3deg); filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.55)); }
.scan-frame .c { position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--p2); }
.c1 { top: 0; left: 0; border-right: 0 !important; border-bottom: 0 !important; border-top-left-radius: 10px; }
.c2 { top: 0; right: 0; border-left: 0 !important; border-bottom: 0 !important; border-top-right-radius: 10px; }
.c3 { bottom: 0; left: 0; border-right: 0 !important; border-top: 0 !important; border-bottom-left-radius: 10px; }
.c4 { bottom: 0; right: 0; border-left: 0 !important; border-top: 0 !important; border-bottom-right-radius: 10px; }
.scan-line {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--p2), transparent);
    box-shadow: 0 0 18px 3px color-mix(in srgb, var(--p2) 55%, transparent);
    opacity: 0;
}

.col-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: auto 0 0;
    padding: 0 clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2rem);
    list-style: none;
}
.col-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line);
    font-size: 0.86rem;
    font-weight: 600;
}
.col-chips .i { width: 16px; height: 16px; color: var(--at); }

.setlist {
    margin: auto clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2rem);
    padding: 0.8rem;
    border-radius: 18px;
    background: rgb(0 0 0 / 0.28);
    border: 1px solid var(--line);
}
.sl-head { margin: 0.1rem 0.4rem 0.6rem !important; color: var(--ink) !important; font: 750 0.98rem var(--font-display) !important; letter-spacing: -0.015em; }
.setlist ol { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.setlist li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.045);
    font-size: 0.88rem;
    font-weight: 600;
}
.sl-n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    color: var(--on);
    font-size: 0.72rem;
    font-weight: 800;
}
.sl-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setlist li .i { width: 16px; height: 16px; color: var(--muted); stroke-width: 2.6; }

.b-pal .pal-swatches { padding: 0 clamp(1.1rem, 2.2vw, 1.7rem); margin-top: auto; }
.ambients { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0.8rem clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2rem); list-style: none; }

/* ---- listas de funciones (anotación, banda, sincronización) */

.tool-grid,
.feature-list { display: grid; gap: 1.4rem 1.6rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
    .tool-grid,
    .feature-list.two { grid-template-columns: minmax(0, 1fr); }
}
.tool-grid li,
.feature-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
.ti {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 13px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line-2);
    color: var(--at);
}
.tool-grid h3,
.feature-list h3 { margin: 0.1rem 0 0.2rem; font: 650 1.03rem/1.35 var(--font-sans); }
.tool-grid p,
.feature-list p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

/* ---- anotación */

.annotate-media { display: grid; }
.tray { padding: 1.3rem 1.3rem 4.5rem; }
.tray-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; font-weight: 700; }
.tray-count { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.tray-svg { display: block; width: 100%; height: auto; }
.tray-tile rect { fill: #1f1c28; stroke: rgb(245 241 234 / 0.06); transition: fill 0.3s; }
.tray-tile text { font-size: 42px; fill: #ebe6dc; transition: fill 0.3s; }
.tray-tile:nth-child(7n + 1) rect { fill: #f5f1e8; }
.tray-tile:nth-child(7n + 1) text { fill: var(--atl); }
.tray-tile:nth-child(9) rect,
.tray-tile:nth-child(20) rect { fill: url(#sx-grad); }
.tray-tile:nth-child(9) text,
.tray-tile:nth-child(20) text { fill: #fff; }
.tray-tile:hover rect { fill: #2b2737; }
.tray-tile:hover text { fill: var(--p2); }
.layers-card {
    position: relative;
    width: min(330px, 92%);
    margin: -3.6rem 1.2rem 0 auto;
    padding: 1.1rem 1.1rem 1.2rem;
    background: rgb(23 21 31 / 0.94);
    border-color: var(--line-2);
    box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.85);
}
.layers-title { margin: 0 0 0.7rem; font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.layers { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.ly {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.045);
    border: 1px solid var(--line);
}
.ly-dot { width: 12px; height: 12px; flex: none; border-radius: 4px; }
.ly-1 .ly-dot { background: var(--p1); }
.ly-2 .ly-dot { background: var(--p3); }
.ly-3 .ly-dot { background: var(--p2); }
.ly-name { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.3; }
.ly-name b { font-size: 0.88rem; }
.ly-name small { color: var(--muted); font-size: 0.75rem; }
.ly .i { width: 18px; height: 18px; color: var(--ink-2); }
.ly:not(.is-on) .ly-name b,
.ly:not(.is-on) .i { color: var(--muted); }

/* ---- editor de páginas */

.editor-visual {
    display: grid;
    align-content: center;
    gap: 1.6rem;
    min-height: clamp(280px, 30vw, 380px);
    padding: clamp(1.1rem, 2.5vw, 2rem);
    background:
        radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--p2) 12%, transparent), transparent 70%),
        linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.018));
}
.ed-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.35rem;
    border-radius: 16px;
    background: rgb(0 0 0 / 0.3);
    border: 1px solid var(--line);
}
.ed-tool { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-2); }
.ed-tool.is-on { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--on); }
.pages-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.4rem, 1.4vw, 0.9rem); padding: 1.2rem 0.2rem 0.4rem; }
.pthumb { position: relative; }
.pthumb .mini-page { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 16px 26px -14px rgb(0 0 0 / 0.85); }
.pt-3 .mini-page { outline: 2px solid var(--p2); outline-offset: 3px; }
.pnum { display: block; margin-top: 0.55rem; text-align: center; color: var(--muted); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.op-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line-2);
    font-size: 0.95rem;
    font-weight: 600;
}
.op-chips .i { width: 18px; height: 18px; color: var(--at); }

/* Miniaturas de partitura (símbolos #sx-sys-*). */
.mini-page .mp-paper { fill: #f7f4ec; }
.mini-page .mp-title { fill: #c9c3b8; }
.mp-lines line { stroke: #4a4555; stroke-width: 0.35; }
.mp-ink ellipse { fill: #1b1822; }
.mp-stem { stroke: #1b1822; stroke-width: 0.35; }
.mp-clef { font-size: 10px; fill: #1b1822; }

/* ---- modo directo (historia con scroll) */

.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) {
    .story { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; align-items: start; }
}
.story-visual-wrap { position: sticky; top: calc(var(--header-h) + 1rem); z-index: 2; }
@media (max-width: 959px) {
    .story-visual-wrap {
        top: var(--header-h);
        margin-inline: calc(var(--gutter) * -1);
        padding: 0.8rem var(--gutter) 1rem;
        background: linear-gradient(180deg, var(--canvas) 82%, rgb(11 10 16 / 0));
    }
}
.story-visual { display: grid; justify-items: center; gap: 1rem; }
.lv-device { width: min(100%, 520px); padding: 11px; border-radius: 28px; }
@media (max-width: 959px) {
    .lv-device { width: min(100%, 380px); }
}
.lv-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #e2ded6; }
.lv-track {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    transition: transform 0.6s var(--ease);
}
.lv-page { flex: none; height: calc(100% - 0px); aspect-ratio: 3 / 4; }
.lv-track .lv-page { height: 100%; }
.lv-page svg,
.lv-next svg { display: block; width: 100%; height: 100%; }
.lv-page .mp-paper { fill: #fbf9f4; }
.lv-next .mp-paper { fill: color-mix(in srgb, var(--p1) 8%, #fbf9f4); }
.lv-next {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    aspect-ratio: 3 / 4;
    transform: translateX(-50%);
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
}
.lv-half-line,
.lv-auto-hud,
.lv-jump,
.lv-head-cue,
.lv-sheen { position: absolute; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.lv-half-line { left: 8%; right: 8%; top: 50%; height: 0; border-top: 2px dashed var(--atl); }
.lv-half-line span {
    position: absolute;
    right: 0;
    top: -14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--paper-ink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.lv-half-line .i { width: 13px; height: 13px; }
.lv-auto-hud {
    left: 50%;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: rgb(21 19 28 / 0.88);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    transform: translateX(-50%);
}
.lv-auto-hud .i { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--on); fill: currentColor; stroke: none; }
.lv-speed { position: relative; width: 54px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.15); }
.lv-speed i { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: 2px; background: var(--p2); }
.lv-jump { inset: 12% 22% 14% 22%; }
.lv-jump svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv-jump path { fill: none; stroke: var(--atl); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.lv-ds,
.lv-segno {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--atl);
    box-shadow: 0 0 0 2px var(--atl), 0 8px 18px -8px rgb(0 0 0 / 0.5);
}
.lv-ds { right: -6%; bottom: -6%; padding: 4px 8px; font: italic 700 0.85rem var(--font-serif); }
.lv-segno { left: -2%; top: -4%; width: 40px; height: 40px; font-size: 22px; }
.lv-head-cue {
    right: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 14px;
    background: rgb(21 19 28 / 0.88);
    color: var(--ink);
}
.lv-head-cue > .i { width: 24px; height: 24px; }
.lv-arrow .i { width: 16px; height: 16px; color: var(--p2); }
.lv-sheen { inset: 0; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.7) 48%, transparent 62%); transform: translateX(110%); }

.lv-pedal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 7px;
    border-radius: 18px;
    background: linear-gradient(180deg, #24212c, #141218);
    border: 1px solid var(--line-2);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.8);
    opacity: 0.45;
    transition: opacity 0.4s;
}
.pd { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 10px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.4); color: var(--ink-2); }
.pd .i { width: 16px; height: 16px; stroke-width: 2.4; }
.pd-label { color: var(--ink-2); font-size: 0.75rem; font-weight: 700; margin-left: 4px; }

/* Estados por modo (data-mode lo pone site.js al avanzar la historia). */
[data-mode='half'] .lv-half-line { opacity: 1; }
[data-mode='half'] .lv-next { clip-path: inset(0 0 50% 0); }
[data-mode='continuous'] .lv-track,
[data-mode='autoscroll'] .lv-track { padding: 10px 0; }
[data-mode='continuous'] .lv-track .lv-page,
[data-mode='autoscroll'] .lv-track .lv-page { height: auto; width: 62%; }
[data-mode='autoscroll'] .lv-auto-hud { opacity: 1; }
[data-mode='links'] .lv-jump { opacity: 1; }
[data-mode='pedal'] .lv-pedal { opacity: 1; }
[data-mode='head'] .lv-head-cue { opacity: 1; }

.story-steps { display: grid; gap: clamp(1rem, 10vh, 7rem); margin: 0; padding: 4vh 0 12vh; list-style: none; }
.story-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.3rem;
    border-radius: 22px;
    border: 1px solid transparent;
    transition: background-color 0.45s, border-color 0.45s;
}
.story-step h3 { margin: 0.15rem 0 0.35rem; font: 650 1.25rem/1.3 var(--font-sans); color: var(--ink-2); transition: color 0.45s; }
.story-step p { margin: 0; color: var(--muted); }
.step-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line-2);
    color: var(--muted);
    transition: background 0.45s, color 0.45s, border-color 0.45s;
}
.story-step.is-active { background: rgb(255 255 255 / 0.045); border-color: var(--line-2); }
.story-step.is-active h3 { color: var(--ink); }
.story-step.is-active .step-icon { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--on); border-color: transparent; }

/* ---- herramientas: Metonik × YomiScore */

.cabin {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3.6rem);
    border-radius: var(--r-xl);
    background:
        radial-gradient(110% 130% at 0% 0%, color-mix(in srgb, var(--halo) 20%, transparent), transparent 55%),
        radial-gradient(110% 130% at 100% 100%, color-mix(in srgb, var(--p2) 14%, transparent), transparent 55%),
        linear-gradient(180deg, #18151f, #0f0d14);
    border: 1px solid var(--line-2);
    overflow: hidden;
    isolation: isolate;
}
.cabin-glow {
    position: absolute;
    right: -10%;
    top: -40%;
    z-index: -1;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--p3) 18%, transparent), transparent 65%);
}
.cabin-head { max-width: 760px; }
.cabin-lockup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.05em 0.28em;
    margin: 0.2rem 0 0.9rem;
    font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem);
    font-weight: 400;
    line-height: 1.02;
}
.mk { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.045em; }
.cabin-lockup .x { font-family: var(--font-sans); font-weight: 300; font-size: 0.62em; color: var(--muted); }
.sx { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
.cabin-sub { margin: 0; font: 600 clamp(1.2rem, 1rem + 0.8vw, 1.55rem) / 1.3 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.tool-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 1023px) {
    .tool-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .tool-tiles { grid-template-columns: minmax(0, 1fr); }
}
.tile {
    position: relative;
    padding: 1.1rem;
    border-radius: 22px;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
}
.tile h3 { display: flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0.3rem; font: 650 1.05rem/1.3 var(--font-sans); }
.tile h3 .i { width: 20px; height: 20px; color: var(--at); }
.tile p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.tl-visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 124px;
    border-radius: 16px;
    background: rgb(0 0 0 / 0.32);
    border: 1px solid var(--line);
    overflow: hidden;
}
.beats { display: flex; gap: 14px; margin-top: -14px; }
.beats i { width: 14px; height: 14px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.beats i:first-child { background: color-mix(in srgb, var(--p1) 70%, #fff 0%); box-shadow: 0 0 18px color-mix(in srgb, var(--halo) 70%, transparent); }
.bpm { position: absolute; bottom: 10px; margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.bpm .mus { font-size: 22px; color: var(--ink); vertical-align: -2px; }
.gauge { width: 150px; height: auto; margin-top: 6px; }
.g-arc { fill: none; stroke: rgb(255 255 255 / 0.14); stroke-width: 6; stroke-linecap: round; }
.g-ok { fill: none; stroke: var(--p2); stroke-width: 6; stroke-linecap: round; }
.g-tick { stroke: rgb(255 255 255 / 0.35); stroke-width: 1.5; }
.needle { transform-box: view-box; transform-origin: 60px 62px; }
.needle line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.needle circle { fill: var(--ink); }
.note { position: absolute; left: 12px; top: 8px; margin: 0; font: 800 1.3rem/1 var(--font-display); letter-spacing: -0.02em; }
.note small { display: block; margin-top: 3px; color: var(--muted); font: 650 0.64rem var(--font-sans); letter-spacing: 0.06em; }
.wave { display: flex; align-items: center; gap: 4px; height: 64px; }
.wave i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(var(--p1), var(--p3)); transform: scaleY(0.4); }
.wave .w0 { transform: scaleY(0.35); }
.wave .w1 { transform: scaleY(0.7); }
.wave .w2 { transform: scaleY(0.5); }
.wave .w3 { transform: scaleY(0.9); }
.wave .w4 { transform: scaleY(0.25); }
.rec { position: absolute; left: 12px; top: 10px; display: flex; align-items: center; gap: 0.4rem; margin: 0; color: #ff8a8a; font: 800 0.68rem var(--font-sans); letter-spacing: 0.14em; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; }
.timeline { position: relative; width: 82%; height: 44px; }
.tl-bar,
.tl-loop { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.tl-bar { left: 0; right: 0; background: rgb(255 255 255 / 0.12); }
.tl-loop { left: 28%; width: 38%; background: linear-gradient(90deg, var(--p1), var(--p2)); }
.mk-a,
.mk-b {
    position: absolute;
    top: -4px;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    font: 800 0.66rem/1 var(--font-sans);
    transform: translateX(-50%);
}
.mk-a { left: 28%; }
.mk-b { left: 66%; }
.tl-head {
    position: absolute;
    top: 50%;
    left: 28%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p2) 35%, transparent);
}

/* ---- banda y director */

.band-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) clamp(36px, 6vw, 72px) minmax(0, 0.85fr);
    align-items: center;
}
.bd { position: relative; display: flex; flex-direction: column; }
.bd-screen {
    position: relative;
    overflow: hidden;
    padding: 7px;
    border-radius: 16px;
    background: linear-gradient(150deg, #34303f, #121016 60%, #24212c);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 30px 50px -28px rgb(0 0 0 / 0.85);
}
.bd-dir .bd-screen { aspect-ratio: 3 / 4; border-radius: 22px; padding: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 70px -30px rgb(0 0 0 / 0.85), 0 30px 70px -40px color-mix(in srgb, var(--halo) 70%, transparent); }
.bd-m .bd-screen { aspect-ratio: 4 / 3; }
.bd-pa,
.bd-pb { position: absolute; inset: 7px; display: grid; place-items: center; border-radius: 10px; background: #e2ded6; overflow: hidden; }
.bd-dir .bd-pa,
.bd-dir .bd-pb { inset: 10px; border-radius: 14px; }
.bd-pa svg,
.bd-pb svg { width: auto; height: 100%; }
.bd-pb { opacity: 0; }
.bd-sheen { position: absolute; inset: 7px; border-radius: 10px; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.75) 50%, transparent 65%); transform: translateX(100%); opacity: 0; pointer-events: none; }
.bd-label { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; color: var(--ink-2); font-size: 0.8rem; font-weight: 650; }
.bd-label .i { width: 16px; height: 16px; color: var(--at); }
.live-badge {
    position: absolute;
    top: -12px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    color: var(--on);
    font: 800 0.68rem/1 var(--font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--halo) 80%, transparent);
}
.live-badge .pulse { background: currentColor; }
.bd-links { display: block; width: 100%; height: 100%; min-height: 220px; overflow: visible; }
.bd-links path { fill: none; vector-effect: non-scaling-stroke; }
.bd-links .base { stroke: rgb(245 241 234 / 0.18); stroke-width: 1.5; stroke-dasharray: 0.015 0.02; }
.bd-links .sig { stroke: var(--p2); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.16 2; stroke-dashoffset: 0.16; opacity: 0; }
.bd-members { display: grid; gap: clamp(0.7rem, 2vw, 1.2rem); }
.bd-m .bd-label { margin-top: 0.4rem; font-size: 0.75rem; }

/* ---- descubrir */

.discover-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) {
    .discover-shell { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.discover { padding: clamp(0.9rem, 2vw, 1.3rem); }
.dc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.dc-search {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 0.6rem;
    height: 48px;
    padding: 0 1rem;
    border-radius: 14px;
    background: rgb(0 0 0 / 0.32);
    border: 1px solid var(--line-2);
    color: var(--muted);
    font-size: 0.95rem;
}
.dc-search .i { width: 19px; height: 19px; }
.dc-search span::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.2em;
    background: var(--p2);
}
.dc-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.dc-filters li { padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 0.82rem; font-weight: 650; }
.dc-filters li.on { background: var(--ink); border-color: transparent; color: var(--canvas); }
.dc-results { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.dc-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.035);
    border: 1px solid var(--line);
}
.dc-thumb svg { display: block; width: 54px; height: auto; border-radius: 4px; }
.dc-title { margin: 0; font-weight: 650; font-size: 1rem; line-height: 1.3; }
.dc-who { margin: 0.1rem 0 0.45rem; color: var(--muted); font-size: 0.85rem; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.tag { padding: 0.25rem 0.5rem; border-radius: 6px; background: rgb(255 255 255 / 0.07); color: var(--ink-2); font-size: 0.7rem; font-weight: 700; }
.tag-src { background: color-mix(in srgb, var(--halo) 26%, transparent); color: var(--ink); }
.dc-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.dc-action:not(.is-ext) { background: linear-gradient(135deg, var(--b1), var(--b2)); border-color: transparent; color: var(--on); }
.dc-action .i { width: 15px; height: 15px; }
@media (max-width: 560px) {
    .dc-item { grid-template-columns: 44px minmax(0, 1fr); }
    .dc-thumb svg { width: 44px; }
    .dc-action { grid-column: 2; justify-self: start; }
}
.dc-sources { display: grid; gap: 1rem; }
.src-card { display: flex; gap: 1rem; padding: 1.4rem; border-radius: 22px; background: rgb(255 255 255 / 0.03); border: 1px solid var(--line); }
.src-card h3 { margin: 0.2rem 0 0.35rem; font: 650 1.1rem/1.3 var(--font-sans); }
.src-card p { margin: 0; color: var(--muted); }
.fine { margin: 1.6rem 0 0; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ---- sin conexión y sincronizado */

.sync-visual {
    display: grid;
    align-content: center;
    gap: 3rem;
    min-height: clamp(300px, 34vw, 420px);
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.2rem);
    background:
        radial-gradient(60% 70% at 50% 42%, color-mix(in srgb, var(--halo) 16%, transparent), transparent 70%),
        linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.018));
}
.sv-row { display: flex; align-items: center; justify-content: center; }
.sv-node,
.sv-cloud { position: relative; display: grid; justify-items: center; flex: none; }
.sv-node > .i {
    width: 60px;
    height: 60px;
    padding: 14px;
    border-radius: 18px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line-2);
    color: var(--ink);
}
.sv-node > span { position: absolute; top: calc(100% + 0.55rem); color: var(--ink-2); font-size: 0.82rem; font-weight: 650; white-space: nowrap; }
.sv-cloud > .i {
    width: 88px;
    height: 88px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    color: var(--on);
    box-shadow: 0 22px 50px -20px color-mix(in srgb, var(--halo) 85%, transparent);
}
.sv-state { position: absolute; top: calc(100% + 0.7rem); display: grid; justify-items: center; }
.st-off,
.st-on {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}
.st-off { background: rgb(255 255 255 / 0.07); color: var(--muted); opacity: 0; }
.st-on { background: color-mix(in srgb, var(--p2) 22%, transparent); color: var(--ink); }
.sv-state .i { width: 14px; height: 14px; stroke-width: 2.2; }
.sv-wire {
    position: relative;
    flex: 1 1 0;
    max-width: 130px;
    min-width: 28px;
    height: 2px;
    margin: 0 0.6rem;
    background: repeating-linear-gradient(90deg, rgb(245 241 234 / 0.22) 0 6px, transparent 6px 12px);
}
.sv-wire i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--p2);
    box-shadow: 0 0 12px var(--p2);
    opacity: 0;
}
.sv-signin { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1.4rem; }
.sv-signin span { padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 0.8rem; font-weight: 650; }

/* ---- privacidad */

.priv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 860px) {
    .priv-grid { grid-template-columns: minmax(0, 1fr); }
}
.priv-card { padding: 1.8rem; }
.priv-card h3 { margin: 1.1rem 0 0.4rem; }
.center-link { margin: 2.2rem 0 0; text-align: center; }
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    color: var(--ink);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--p2) 60%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
}
.link-arrow .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.link-arrow:hover .i { transform: translateX(3px); }

/* ---- lista de espera */

.wl {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(1.25rem, 4vw, 3.5rem);
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, #18151f, #0e0c13);
    border: 1px solid var(--line-2);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 960px) {
    .wl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}
.wl-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wl-glow::before,
.wl-glow::after { content: ''; position: absolute; border-radius: 50%; aspect-ratio: 1; }
.wl-glow::before { width: 70%; right: -20%; top: -45%; background: radial-gradient(circle, color-mix(in srgb, var(--halo) 38%, transparent), transparent 65%); }
.wl-glow::after { width: 60%; left: -25%; bottom: -50%; background: radial-gradient(circle, color-mix(in srgb, var(--p2) 22%, transparent), transparent 65%); }
.wl-perks { display: grid; gap: 0.65rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.wl-perks li { display: flex; align-items: center; gap: 0.65rem; color: var(--ink-2); }
.wl-perks .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--p2) 22%, transparent); color: var(--p2); stroke-width: 2.6; }
.wl-panel {
    position: relative;
    padding: clamp(1.15rem, 3vw, 2rem);
    border-radius: 26px;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid var(--line-2);
}
.field { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.field label,
.devices legend { font-size: 0.92rem; font-weight: 650; }
.opt { color: var(--muted); font-weight: 500; }
.field input {
    width: 100%;
    height: 54px;
    padding: 0 1rem;
    border-radius: 14px;
    border: 1px solid var(--line-2);
    background: rgb(0 0 0 / 0.32);
    color: var(--ink);
    font: 500 1rem var(--font-sans);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: #8a8496; }
.field input:focus { outline: none; border-color: var(--p2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p2) 26%, transparent); }
.field input[aria-invalid='true'] { border-color: #ff7a8e; }
.devices { min-width: 0; margin: 0 0 1.3rem; padding: 0; border: 0; }
.devices legend { margin-bottom: 0.6rem; padding: 0; }
.dev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 560px) {
    .dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dev { position: relative; display: block; cursor: pointer; }
.dev input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dev-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 98px;
    padding: 0.8rem 0.4rem;
    border-radius: 16px;
    border: 1.5px solid var(--line-2);
    background: rgb(0 0 0 / 0.22);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.dev-card .i { width: 24px; height: 24px; margin-bottom: 0.25rem; color: var(--muted); transition: color 0.2s; }
.dev-card b { font-size: 0.92rem; }
.dev-card small { color: var(--muted); font-size: 0.72rem; line-height: 1.3; }
.dev:hover .dev-card { border-color: rgb(245 241 234 / 0.3); }
.dev input:checked + .dev-card {
    border-color: transparent;
    background: linear-gradient(#1d1a26, #1d1a26) padding-box, linear-gradient(135deg, var(--p1), var(--p2)) border-box;
}
.dev input:checked + .dev-card .i { color: var(--p2); }
.dev input:focus-visible + .dev-card { outline: 2px solid var(--p2); outline-offset: 2px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl-status { min-height: 1.4em; margin: 0.9rem 0 0; font-size: 0.92rem; font-weight: 600; }
.wl-status:empty { margin: 0; min-height: 0; }
.wl-status.is-error { color: #ff95a4; }
/* Vuelta del envío sin JS: /api/waitlist responde 303 a #lista-ok, #lista-error o #lista-limit
   (#waitlist-… en inglés) y el aviso es el destino del enlace. Con JS, site.js pone .wl-ready y
   resuelve la vuelta en el propio formulario, así que estas reglas dejan de aplicarse. */
.wl-note { display: none; margin: 0 0 1rem; font-size: 0.92rem; font-weight: 600; color: #ff95a4; }
.wl-note:focus { outline: none; }
html:not(.wl-ready) .wl-note:target,
html:not(.wl-ready) .wl-done:target { display: block; }
html:not(.wl-ready) .wl-panel:has(.wl-done:target) .wl-form { display: none; }
.wl-legal { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.8rem; }
.wl-done { padding: 2rem 0.5rem; text-align: center; }
.wl-done:focus { outline: none; }
.done-check {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    color: var(--on);
    box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--halo) 85%, transparent);
}
.done-check .i { width: 30px; height: 30px; stroke-width: 2.6; }
.done-title { margin: 0 0 0.5rem; font: 800 1.75rem/1.15 var(--font-display); letter-spacing: -0.03em; }
.wl-done p:last-child { margin: 0; color: var(--ink-2); }

/* ---- preguntas */

.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 960px) {
    .faq-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
    .faq-wrap .sec-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq-list { display: grid; gap: 0.6rem; }
.faq { border-radius: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.025); transition: background-color 0.3s, border-color 0.3s; }
.faq[open] { background: rgb(255 255 255 / 0.045); border-color: var(--line-2); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 62px;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    cursor: pointer;
    font-size: 1.03rem;
    font-weight: 650;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 20px; height: 20px; color: var(--muted); transition: transform 0.3s var(--ease); }
.faq[open] summary .i { transform: rotate(180deg); }
.faq-a { padding: 0 1.25rem 1.25rem; color: var(--muted); }
.faq-a p { margin: 0; }

/* ------------------------------------------------------------------ pie */

.site-footer { padding: 4.5rem 0 2rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.018)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 760px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
.footer-tag { margin: 1rem 0 0.7rem; font: 750 1.3rem/1.3 var(--font-display); letter-spacing: -0.025em; }
.footer-status { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--muted); font-size: 0.88rem; }
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--p2); }
.footer-h { margin: 0.4rem 0 0.8rem; color: var(--muted); font: 700 0.78rem/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.footer-col ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; transition: color 0.2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }
.footer-credits { flex: 1 1 320px; }

/* ------------------------------------------------------------------ páginas legales */

.is-legal main,
.is-404 main { position: relative; overflow: clip; isolation: isolate; }
.legal-bg { inset: -30% 0 auto; height: 760px; }
.legal-bg .b1 { opacity: 0.5; }
.legal-bg .b2 { opacity: 0.35; }
.legal { max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem); }
.legal-head { margin-bottom: 2.4rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.legal-back { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; margin-bottom: 1.2rem; color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.legal-back:hover { color: var(--ink); }
.legal-back .i { width: 18px; height: 18px; }
.legal-head .eyebrow { display: flex; width: fit-content; }
.legal-title {
    margin: 1.1rem 0 1rem;
    font-family: var(--font-display);
    font-weight: 800;
    /* El mínimo deja entera en 375 px una palabra larga («Datenschutzerklärung») donde no hay guiones. */
    font-size: clamp(1.75rem, 0.9rem + 4.2vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.legal-lead { margin: 0 0 0.8rem; color: var(--ink-2); font-size: 1.2rem; line-height: 1.55; }
.legal-updated { margin: 0; color: var(--muted); font-size: 0.9rem; }
.prose { color: #ddd7d0; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.prose h2 {
    margin: 2.8rem 0 0.8rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.prose h3 { margin: 1.9rem 0 0.5rem; color: var(--ink); font: 650 1.12rem/1.4 var(--font-sans); }
.prose > :first-child { margin-top: 0; }
.prose p,
.prose ul,
.prose ol { margin: 0 0 1.1rem; }
.prose ul,
.prose ol { padding-left: 1.3rem; }
.prose li { margin: 0.35rem 0; }
.prose li::marker { color: var(--at); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--p2) 70%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose details { margin: 0 0 0.7rem; padding: 0 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.025); }
.prose details[open] { padding-bottom: 0.4rem; background: rgb(255 255 255 / 0.04); }
.prose summary { display: flex; align-items: center; min-height: 54px; color: var(--ink); font-weight: 650; cursor: pointer; }
.legal-card {
    margin: 1.6rem 0;
    padding: 1.3rem 1.4rem;
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--halo) 13%, transparent), color-mix(in srgb, var(--p2) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--halo) 30%, transparent);
}
.legal-card > :first-child { margin-top: 0; }
.legal-card > :last-child { margin-bottom: 0; }
.legal-cta { margin: 2.4rem 0 0; }

/* ------------------------------------------------------------------ 404 */

.nf { position: relative; display: grid; place-items: center; min-height: 72vh; padding: 4rem 0; text-align: center; overflow: clip; isolation: isolate; }
.nf-inner { display: flex; flex-direction: column; align-items: center; }
.nf .hero-aurora::after { display: none; }
.nf-glyph { width: min(280px, 72vw); height: auto; margin-bottom: 1rem; }
.nf-staff line { stroke: rgb(245 241 234 / 0.24); stroke-width: 1.5; }
.nf-rest,
.nf-fermata { font-size: 60px; fill: var(--ink); }
.nf-fermata { fill: var(--at); }
.nf-title {
    max-width: 16ch;
    margin: 1.1rem 0 1rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.nf-text { margin: 0; color: var(--ink-2); }
.nf-en { margin-top: 0.35rem; color: var(--muted); }
.nf-cta { justify-content: center; }

/* ------------------------------------------------------------------ movimiento
   Todo lo que se mueve vive aquí dentro: con «reducir movimiento» no existe. */

.reveal-pending { opacity: 0; transform: translateY(26px); }
.reveal-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }

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

    .pulse { animation: pulse 2.4s var(--ease) infinite; }
    .blob.b1 { animation: drift-a 26s ease-in-out infinite alternate; }
    .blob.b2 { animation: drift-b 30s ease-in-out infinite alternate; }
    .blob.b3 { animation: drift-a 34s ease-in-out infinite alternate-reverse; }
    .float-chip { animation: bob 7s ease-in-out infinite; }
    .fc-stamps { animation-delay: -3.5s; }

    /* Secuencia de la tableta del hero: un ciclo de 14 s compartido por todas las piezas. */
    .page-1 { animation: pg-1 14s linear infinite; }
    .page-2 { animation: pg-2 14s linear infinite; }
    .ab-page .pg-1 { animation: pg-1 14s linear infinite; }
    .ab-page .pg-2 { animation: pg-2 14s linear infinite; }
    .ann.draw { animation: ann-draw 14s var(--ease) infinite both; }
    .ann.pop { transform-box: fill-box; transform-origin: center; animation: ann-pop 14s infinite both; }
    .t0 { animation-delay: 0s !important; }
    .t1 { animation-delay: 1.2s !important; }
    .t2 { animation-delay: 1.6s !important; }
    .t3 { animation-delay: 2.4s !important; }
    .t4 { animation-delay: 2s !important; }
    .t5 { animation-delay: 2.15s !important; }
    .t6 { animation-delay: 2.3s !important; }
    .t7 { animation-delay: 3s !important; }
    .t8 { animation-delay: 3.2s !important; }
    .t9 { animation-delay: 3.6s !important; }
    .turn-sweep { animation: sweep 14s var(--ease) infinite; }
    .k-next { animation: key-next 14s infinite; }
    .k-prev { animation: key-prev 14s infinite; }

    .scan-line { animation: scan 3.4s var(--ease) infinite alternate; }
    .setlist li:nth-child(2) { animation: lift 5s var(--ease) infinite; }
    .pt-2 .mini-page { animation: fix-rotate 8s var(--ease) infinite; }
    .pt-4 { animation: swap-r 8s var(--ease) infinite; }
    .pt-5 { animation: swap-l 8s var(--ease) infinite; }

    [data-mode='half'] .lv-next { animation: half-in 4.5s var(--ease) infinite; }
    [data-mode='continuous'] .lv-track { animation: steps-v 7.5s var(--ease) infinite; }
    [data-mode='autoscroll'] .lv-track { animation: scroll-v 12s linear infinite alternate; }
    [data-mode='autoscroll'] .lv-speed i { animation: speed 12s linear infinite alternate; }
    [data-mode='links'] .lv-jump path { animation: jump-draw 3.6s var(--ease) infinite; }
    [data-mode='links'] .lv-segno { animation: target 3.6s var(--ease) infinite; }
    [data-mode='pedal'] .lv-next,
    [data-mode='head'] .lv-next { animation: flip-in 4s var(--ease) infinite; }
    [data-mode='pedal'] .lv-sheen,
    [data-mode='head'] .lv-sheen { animation: sheen 4s var(--ease) infinite; }
    [data-mode='pedal'] .pd-r { animation: pd-press 4s infinite; }
    [data-mode='head'] .lv-head-cue > .i { animation: head-turn 4s var(--ease) infinite; }

    .beats i { animation: beat 2.5s infinite; }
    .beats i:nth-child(2) { animation-delay: 0.625s; }
    .beats i:nth-child(3) { animation-delay: 1.25s; }
    .beats i:nth-child(4) { animation-delay: 1.875s; }
    .needle { animation: needle 5s var(--ease) infinite; }
    .g-ok { animation: in-tune 5s infinite; }
    .wave i { animation: wave 1.1s ease-in-out infinite alternate; }
    .wave i:nth-child(3n) { animation-duration: 0.8s; }
    .wave i:nth-child(4n + 1) { animation-duration: 1.4s; animation-delay: -0.4s; }
    .wave i:nth-child(5n + 2) { animation-delay: -0.7s; }
    .rec-dot { animation: blink 1.2s steps(2, jump-none) infinite; }
    .tl-head { animation: playhead 3.2s linear infinite; }

    .bd-dir .bd-pa,
    .bd-m .bd-pa { animation: bd-a 6s var(--ease) infinite; }
    .bd-dir .bd-pb,
    .bd-m .bd-pb { animation: bd-b 6s var(--ease) infinite; }
    .bd-sheen { animation: bd-sheen 3s var(--ease) infinite; }
    .bd-m1 .bd-pa,
    .bd-m1 .bd-pb { animation-delay: 0.42s; }
    .bd-m2 .bd-pa,
    .bd-m2 .bd-pb { animation-delay: 0.5s; }
    .bd-m3 .bd-pa,
    .bd-m3 .bd-pb { animation-delay: 0.58s; }
    .bd-m1 .bd-sheen { animation-delay: 0.42s; }
    .bd-m2 .bd-sheen { animation-delay: 0.5s; }
    .bd-m3 .bd-sheen { animation-delay: 0.58s; }
    .bd-links .sig { animation: signal 3s var(--ease) infinite; }

    .dc-search span::after { animation: blink 1.1s steps(2, jump-none) infinite; }
    .sv-wire i { animation: wire 2.2s linear infinite, online 8s infinite; }
    .sv-wire.w2 i { animation-direction: reverse, normal; }
    .st-off { animation: st-off 8s infinite; }
    .st-on { animation: st-on 8s infinite; }
    .sv-cloud > .i { animation: cloud 8s infinite; }
}

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

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p2) 60%, transparent); }
    70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(6%, 8%, 0) scale(1.08); }
}
@keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to { transform: translate3d(-8%, 6%, 0) scale(0.95); }
}
@keyframes bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* 14 s: dibuja y sella (0–5 s), pasa a la página 2 con el pedal (~8,4 s) y vuelve (~13 s). */
@keyframes pg-1 {
    0%, 60% { opacity: 1; }
    63%, 94% { opacity: 0; }
    97%, 100% { opacity: 1; }
}
@keyframes pg-2 {
    0%, 60% { opacity: 0; }
    63%, 94% { opacity: 1; }
    97%, 100% { opacity: 0; }
}
@keyframes ann-draw {
    0%, 5% { stroke-dashoffset: 1; opacity: 1; }
    15%, 65% { stroke-dashoffset: 0; opacity: 1; }
    66%, 99.9% { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes ann-pop {
    0%, 7% { opacity: 0; transform: scale(0.35); }
    9.5% { opacity: 1; transform: scale(1.22); }
    11.5%, 65% { opacity: 1; transform: scale(1); }
    66%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes sweep {
    0%, 58% { opacity: 0; transform: translateX(110%); }
    58.5% { opacity: 1; transform: translateX(105%); }
    65% { opacity: 1; transform: translateX(-110%); }
    65.5%, 92% { opacity: 0; transform: translateX(-110%); }
    92.5% { opacity: 1; transform: translateX(-105%); }
    99% { opacity: 1; transform: translateX(110%); }
    100% { opacity: 0; transform: translateX(110%); }
}
@keyframes key-next {
    0%, 56% { background: rgb(255 255 255 / 0.08); color: var(--ink); transform: none; }
    57.5% { background: var(--p2); color: #0b0a10; transform: translateY(1px) scale(0.92); }
    61%, 100% { background: rgb(255 255 255 / 0.08); color: var(--ink); transform: none; }
}
@keyframes key-prev {
    0%, 90% { background: rgb(255 255 255 / 0.08); color: var(--ink); transform: none; }
    91.5% { background: var(--p2); color: #0b0a10; transform: translateY(1px) scale(0.92); }
    95%, 100% { background: rgb(255 255 255 / 0.08); color: var(--ink); transform: none; }
}

@keyframes scan {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(206px); opacity: 1; }
}
@keyframes lift {
    0%, 30%, 70%, 100% { transform: none; box-shadow: none; }
    40%, 60% { transform: translateX(6px) scale(1.02); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.8); background: rgb(255 255 255 / 0.09); }
}
@keyframes fix-rotate {
    0%, 22% { transform: rotate(-90deg) scale(0.74); }
    34%, 88% { transform: none; }
    100% { transform: rotate(-90deg) scale(0.74); }
}
@keyframes swap-r {
    0%, 45% { transform: none; }
    55%, 88% { transform: translateX(calc(100% + clamp(0.4rem, 1.4vw, 0.9rem))); }
    98%, 100% { transform: none; }
}
@keyframes swap-l {
    0%, 45% { transform: none; }
    55%, 88% { transform: translateX(calc(-100% - clamp(0.4rem, 1.4vw, 0.9rem))); }
    98%, 100% { transform: none; }
}

@keyframes half-in {
    0%, 20% { clip-path: inset(0 0 100% 0); }
    40%, 82% { clip-path: inset(0 0 50% 0); }
    100% { clip-path: inset(0 0 100% 0); }
}
@keyframes steps-v {
    0%, 22% { transform: translateY(0); }
    32%, 55% { transform: translateY(-45%); }
    65%, 88% { transform: translateY(-95%); }
    100% { transform: translateY(0); }
}
@keyframes scroll-v {
    from { transform: translateY(0); }
    to { transform: translateY(-130%); }
}
@keyframes speed {
    from { width: 35%; }
    to { width: 80%; }
}
@keyframes jump-draw {
    0%, 10% { stroke-dashoffset: 1; }
    45%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes target {
    0%, 42% { transform: scale(1); box-shadow: 0 0 0 2px var(--atl), 0 8px 18px -8px rgb(0 0 0 / 0.5); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--atl), 0 0 0 10px color-mix(in srgb, var(--atl) 25%, transparent); }
    62%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--atl), 0 8px 18px -8px rgb(0 0 0 / 0.5); }
}
@keyframes flip-in {
    0%, 30% { clip-path: inset(0 0 0 100%); }
    44%, 88% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}
@keyframes sheen {
    0%, 28% { opacity: 0; transform: translateX(110%); }
    30% { opacity: 1; }
    46% { opacity: 1; transform: translateX(-110%); }
    48%, 100% { opacity: 0; transform: translateX(-110%); }
}
@keyframes pd-press {
    0%, 26% { background: rgb(255 255 255 / 0.07); color: var(--ink-2); transform: none; }
    29% { background: var(--p2); color: #0b0a10; transform: translateY(2px); }
    36%, 100% { background: rgb(255 255 255 / 0.07); color: var(--ink-2); transform: none; }
}
@keyframes head-turn {
    0%, 18% { transform: none; }
    26%, 34% { transform: rotate(14deg) translateX(2px); }
    44%, 100% { transform: none; }
}

@keyframes beat {
    0%, 18% { background: var(--p2); transform: scale(1.3); box-shadow: 0 0 18px color-mix(in srgb, var(--p2) 75%, transparent); }
    24%, 100% { background: rgb(255 255 255 / 0.14); transform: none; box-shadow: none; }
}
@keyframes needle {
    0% { transform: rotate(-34deg); }
    25% { transform: rotate(16deg); }
    45% { transform: rotate(-9deg); }
    62%, 92% { transform: rotate(0deg); }
    100% { transform: rotate(-34deg); }
}
@keyframes in-tune {
    0%, 60% { opacity: 0.35; }
    64%, 92% { opacity: 1; }
    100% { opacity: 0.35; }
}
@keyframes wave {
    from { transform: scaleY(0.18); }
    to { transform: scaleY(1); }
}
@keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes playhead {
    from { left: 28%; }
    to { left: 66%; }
}

@keyframes bd-a {
    0%, 6% { opacity: 1; }
    10%, 54% { opacity: 0; }
    58%, 100% { opacity: 1; }
}
@keyframes bd-b {
    0%, 6% { opacity: 0; }
    10%, 54% { opacity: 1; }
    58%, 100% { opacity: 0; }
}
@keyframes bd-sheen {
    0%, 4% { opacity: 0; transform: translateX(100%); }
    6% { opacity: 1; }
    18% { opacity: 1; transform: translateX(-100%); }
    20%, 100% { opacity: 0; transform: translateX(-100%); }
}
@keyframes signal {
    0%, 3% { stroke-dashoffset: 0.16; opacity: 1; }
    14% { stroke-dashoffset: -1; opacity: 1; }
    15%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes wire {
    from { left: 0; }
    to { left: calc(100% - 8px); }
}
@keyframes online {
    0%, 45% { opacity: 0; }
    50%, 100% { opacity: 1; }
}
@keyframes st-off {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes st-on {
    0%, 45% { opacity: 0; }
    50%, 100% { opacity: 1; }
}
@keyframes cloud {
    0%, 45% { filter: grayscale(1) brightness(0.6); }
    50%, 100% { filter: none; }
}

/* ------------------------------------------------------------------ idiomas: pie, aviso legal y cambio */

.lang-footer { padding: 1.2rem 0 0.4rem; border-top: 1px solid var(--line); }
.lang-footer ul { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; list-style: none; margin: 0; padding: 0; }
.lang-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}
.lang-footer a:hover { color: var(--ink); }
.lang-footer a[aria-current] { color: var(--ink); font-weight: 700; }

.legal-notice {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin: 1.4rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--halo) 35%, transparent);
    background: color-mix(in srgb, var(--halo) 9%, transparent);
    color: var(--ink-2);
    font-size: 0.92rem;
}
.legal-notice .i { flex: none; width: 20px; height: 20px; margin-top: 0.1em; color: var(--at); }
.legal-notice p { margin: 0; }
.legal-notice a { color: var(--ink); font-weight: 700; }

/* boot.js lleva a la portada del idioma del navegador en la primera visita: sin destello de la española. */
html.lang-redirect body { visibility: hidden; }

/* Cambio de idioma (y de página) con fundido en los navegadores que lo admiten. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}
.site-header:has(.lang[open]) {
    background: rgb(11 10 16 / 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Palabras largas (alemán, neerlandés, sueco…): en pantallas estrechas se parten con guion, no a
   mitad de palabra; solo las de 10 letras o más, para no salpicar de guiones el resto de idiomas. */
h1, h2, h3, .sec-title, .legal-title, .nf-title, .prose h2, .prose h3 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
}

/* El interletraje (negativo en los titulares, positivo en las etiquetas) rompe las letras unidas del
   árabe y los conjuntos del devanagari, y aprieta o separa de más los ideogramas: fuera en esos idiomas
   (salvo en el logotipo, que es latino). */
:is(:lang(ar), :lang(hi), :lang(zh), :lang(ja), :lang(ko)) :not(.brand-word, .bw-score, .lang-iso, .lang-cur) {
    letter-spacing: normal !important;
}
:is(:lang(ar), :lang(hi), :lang(zh), :lang(ja), :lang(ko)) .eyebrow { text-transform: none; }

/* Móvil estrecho: el botón de idioma se queda en su código (sin globo) para que logotipo, idioma,
   llamada a la acción y menú quepan en una fila en todos los idiomas. Si una traducción aún no cupiera,
   la llamada a la acción se recorta antes que provocar scroll horizontal. */
@media (max-width: 420px) {
    .lang-btn { padding: 0 0.75rem; }
    .lang-btn > .i { display: none; }
    .header-actions { min-width: 0; }
    .header-cta { min-width: 0; flex-shrink: 1; padding: 0 0.75em; }
    .header-cta .cta-short { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Japonés: los titulares cortan por frases (BudouX en Chromium), no a mitad de palabra. */
:lang(ja) :is(h1, h2, h3, .sec-title, .legal-title, .nf-title) { word-break: auto-phrase; }