/* ==========================================================
   ESTILO «SLUSH» · todo el sitio (rama experimento-slush)
   Papel pastel, pegatinas recortadas con contorno, titulares
   inflados y una cinta azul 3D. Sin sombras ni degradados.
   Paleta suave (sin rosa) y modo noche con html[data-sl-theme="dark"].
   Los tokens antiguos (--color-*, --font-*) se reasignan aquí, así
   que cada página hereda la paleta; slush-site.css afina cada una.
   Para descartarlo: git checkout mejoras-ui (o el tag punto-seguro).
   ========================================================== */

:root {
    --sl-carbon: #16161a;      /* tinta del tema: texto y contornos */
    --sl-paper: #fbfaf6;       /* papel: blanco roto, menos brillo */
    --sl-card: #ffffff;        /* superficie de tarjetas sobre el papel */
    --sl-on: #16161a;          /* texto sobre pegatinas de color (siempre oscuro) */
    --sl-muted: #4b4a52;
    --sl-sky: #dde9f4;
    --sl-gray: #dcd9d1;
    --sl-mist: #ecebe5;
    --sl-blue: #8bbbea;
    --sl-mint: #a8dcc0;
    --sl-sand: #eee2c4;
    --sl-ember: #f08c62;
    --sl-sun: #fbdb78;
    --sl-violet: #5a52c4;
    --sl-on-violet: #fff;
    --sl-ok: #0b6e42;
    --sl-bad: #b3261e;
    --sl-ribbon: #79aee6;
    --sl-ribbon-shade: #6a9fd9;
    --sl-ribbon-light: #a9cdf2;
    --sl-line: rgba(22, 22, 26, .16);   /* divisores internos suaves */
    --sl-display: "Bowlby One", "Anton", Impact, system-ui, sans-serif;
    --sl-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Cinta azul 3D como fondo de las portadas de cada página. */
    --sl-ribbon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke='%2379aee6' stroke-width='118' d='M-80 470 C 160 470, 220 120, 470 150 S 760 520, 980 360 S 1180 60, 1300 140'/%3E%3Cpath stroke='%236a9fd9' stroke-opacity='.7' stroke-width='52' d='M-80 500 C 160 500, 230 150, 470 182 S 760 552, 980 392 S 1180 92, 1300 172'/%3E%3Cpath stroke='%23a9cdf2' stroke-opacity='.9' stroke-width='20' d='M-80 442 C 160 442, 212 92, 470 122 S 760 492, 980 332 S 1180 32, 1300 112'/%3E%3C/g%3E%3C/svg%3E");

    /* Tokens heredados del sitio, reasignados a la paleta Slush. */
    color-scheme: light;
    --color-bg: #fbfaf6;
    --color-background: #fbfaf6;
    --color-surface: #ffffff;
    --color-surface-2: #f3f1ea;
    --color-surface-3: #ebe8df;
    --color-border: #16161a;
    --color-border-strong: #16161a;
    --color-text: #16161a;
    --color-text-muted: #4b4a52;
    --color-text-subtle: #5f5e66;
    --color-primary: #5a52c4;
    --color-primary-hover: #463fae;
    --color-primary-strong: #16161a;
    --color-primary-deep: #16161a;
    --color-primary-soft: rgba(90, 82, 196, .12);
    --color-primary-line: rgba(90, 82, 196, .45);
    --color-success: #0b6e42;
    --color-success-soft: rgba(168, 220, 192, .55);
    --color-danger: #b3261e;
    --color-danger-soft: rgba(240, 140, 98, .25);
    --color-warning: #8a6100;
    --color-violet: #5a52c4;
    --color-cyan: #1f6f80;
    --color-on-primary: #fbfaf6;
    --focus-ring: #5a52c4;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Bowlby One", "Anton", Impact, system-ui, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-pill: 1600px;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --glow-primary: none;
    --glow-primary-strong: none;
}

/* Modo noche: papel grafito y pegatinas en tonos apagados. */
html[data-sl-theme="dark"] {
    --sl-carbon: #e6e2d8;
    --sl-paper: #17181c;
    --sl-card: #1f2025;
    --sl-muted: #b3afa5;
    --sl-sky: #1d2531;
    --sl-gray: #22242a;
    --sl-mist: #2b2d34;
    --sl-blue: #6f9bc9;
    --sl-mint: #79b597;
    --sl-sand: #c7b88f;
    --sl-ember: #d07a55;
    --sl-sun: #dcc066;
    --sl-violet: #9a92ee;
    --sl-on-violet: #16161a;
    --sl-ok: #0a5c37;
    --sl-bad: #ff8a80;
    --sl-ribbon: #2f5c8f;
    --sl-ribbon-shade: #284f7c;
    --sl-ribbon-light: #44749f;
    --sl-line: rgba(230, 226, 216, .18);
    --sl-ribbon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke='%232f5c8f' stroke-width='118' d='M-80 470 C 160 470, 220 120, 470 150 S 760 520, 980 360 S 1180 60, 1300 140'/%3E%3Cpath stroke='%23284f7c' stroke-opacity='.7' stroke-width='52' d='M-80 500 C 160 500, 230 150, 470 182 S 760 552, 980 392 S 1180 92, 1300 172'/%3E%3Cpath stroke='%2344749f' stroke-opacity='.9' stroke-width='20' d='M-80 442 C 160 442, 212 92, 470 122 S 760 492, 980 332 S 1180 32, 1300 112'/%3E%3C/g%3E%3C/svg%3E");

    color-scheme: dark;
    --color-bg: #17181c;
    --color-background: #17181c;
    --color-surface: #1f2025;
    --color-surface-2: #26282e;
    --color-surface-3: #2e3037;
    --color-border: #e6e2d8;
    --color-border-strong: #e6e2d8;
    --color-text: #e6e2d8;
    --color-text-muted: #b3afa5;
    --color-text-subtle: #9c988f;
    --color-primary: #9a92ee;
    --color-primary-hover: #b2acf3;
    --color-primary-strong: #e6e2d8;
    --color-primary-deep: #e6e2d8;
    --color-primary-soft: rgba(154, 146, 238, .16);
    --color-primary-line: rgba(154, 146, 238, .5);
    --color-success: #8fd3ad;
    --color-success-soft: rgba(121, 181, 151, .2);
    --color-danger: #ff8a80;
    --color-danger-soft: rgba(208, 122, 85, .22);
    --color-warning: #dcc066;
    --color-violet: #9a92ee;
    --color-cyan: #7cc4d2;
    --color-on-primary: #17181c;
    --focus-ring: #9a92ee;
}

html,
body { background: var(--sl-paper); color: var(--sl-carbon); }
/* Bowlby One tiene un solo grosor: sin negritas sintéticas. */
html { font-synthesis: none; }
body { font-family: var(--sl-sans); }
::selection { background: var(--sl-sun); color: var(--sl-on); }

.site-footer,
.site-footer * { background: transparent; color: var(--sl-carbon); }
.site-footer { background: var(--sl-paper); border-top: 0; box-shadow: none; }
.site-footer-socials a { border: 1px solid var(--sl-carbon); border-radius: 50%; }
.site-footer-socials a:hover { background: var(--sl-sun); }
.site-footer-socials a:hover i { color: var(--sl-on); }

.sl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 1440px;
    margin-inline: auto;
    font-family: var(--sl-sans);
    font-weight: 500;
    letter-spacing: -.01em;
    /* Las piezas giradas no deben crear desplazamiento horizontal. */
    overflow-x: clip;
}

.sl :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.sl :where(ul) { padding: 0; list-style: none; }
.sl :where(a) { color: inherit; text-decoration: none; }
.sl :focus-visible { outline: 3px solid var(--sl-violet); outline-offset: 3px; }

/* ---------- Piezas ---------- */

.sl-pill-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    border: 1px solid var(--sl-carbon);
    border-radius: 1600px;
    background: var(--sl-paper);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .032em;
    text-transform: uppercase;
}

.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid var(--sl-carbon);
    border-radius: 1600px;
    background: var(--sl-paper);
    color: var(--sl-carbon);
    font-family: var(--sl-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.sl-btn i { transition: transform var(--duration) var(--ease-out); }
.sl-btn--solid { background: var(--sl-carbon); color: var(--sl-paper); }
.sl-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
/* Dentro de las tarjetas de color el botón sólido siempre es oscuro. */
.sl-card .sl-btn--solid { border-color: var(--sl-on); background: var(--sl-on); color: #fbfaf6; }

/* ---------- Barra superior: cinta + interruptor de modo ---------- */

.sl-top { display: flex; gap: 10px; align-items: stretch; }

.sl-marquee {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sl-carbon);
    border-radius: 1600px;
    background: var(--sl-on);
    color: #fbfaf6;
}

.sl-marquee-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    padding: 11px 18px 11px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .032em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: slMarquee 28s linear infinite;
}

.sl-marquee-track i { color: var(--sl-sun); font-style: normal; opacity: .7; }

.sl-theme-toggle {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    border: 1px solid var(--sl-carbon);
    border-radius: 1600px;
    background: var(--sl-paper);
    color: var(--sl-carbon);
    font-size: 17px;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out);
}

.sl-theme-toggle .bi-sun-fill,
html[data-sl-theme="dark"] .sl-theme-toggle .bi-moon-stars-fill { display: none; }
html[data-sl-theme="dark"] .sl-theme-toggle .bi-sun-fill { display: inline; }

/* En el menú lateral (escritorio) y en la cabecera móvil. */
.sl-theme-toggle--sb { width: 30px; height: 30px; font-size: 13px; }
.sb-meta .sb-online { margin-left: auto; }
.sl-theme-toggle--header { display: none; }

@media (max-width: 960px) {
    .sl-theme-toggle--header {
        position: absolute;
        top: 50%;
        right: 66px;
        display: grid;
        width: 42px;
        height: 42px;
        pointer-events: auto;
        translate: 0 -50%;
    }
}

/* ---------- Portada ---------- */

.sl-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    align-items: center;
    min-height: clamp(560px, 70vh, 720px);
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    background: var(--sl-sky);
}

/* Cinta estática, sin filtros: no se repinta al desplazar. */
.sl-ribbon { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.sl-ribbon path { fill: none; stroke-linecap: round; }
.sl-ribbon-tube { stroke: var(--sl-ribbon); stroke-width: 118; }
.sl-ribbon-shade { stroke: var(--sl-ribbon-shade); stroke-width: 52; opacity: .7; }
.sl-ribbon-light { stroke: var(--sl-ribbon-light); stroke-width: 20; opacity: .9; }

.sl-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 22px;
    padding: 48px 24px 56px clamp(28px, 4vw, 60px);
}

.sl-display {
    font-family: var(--sl-display);
    font-size: clamp(3rem, .8rem + 4.6vw, 6.4rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: .8;
    text-transform: uppercase;
}

.sl-display span { display: block; }

.sl-tagline {
    max-width: 30ch;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    font-weight: 500;
    line-height: 1.2;
}

.sl-prompt {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 10px 18px;
    border: 1px solid var(--sl-carbon);
    border-radius: 1600px;
    background: var(--sl-paper);
    font-family: var(--font-mono);
    font-size: 13px;
}

.sl-prompt-user { color: var(--sl-violet); font-weight: 700; }
.sl-prompt-caret { display: inline-block; width: .55em; height: 1.1em; background: var(--sl-carbon); animation: slBlink 1s steps(1) infinite; }

.sl-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pegatinas. Se usan translate/rotate/scale por separado: así el gesto
   al pasar el ratón no pisa el centrado y la imagen no salta. */
.sl-stickers { position: relative; z-index: 2; align-self: stretch; min-height: 420px; }

.sl-sticker {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--sl-carbon);
    color: var(--sl-on);
    transition: rotate var(--duration-slow) var(--ease-out), scale var(--duration-slow) var(--ease-out);
}

.sl-sticker--pc {
    top: 50%;
    right: 6%;
    width: min(92%, 440px);
    padding: 10px;
    border-radius: 28px;
    background: var(--sl-paper);
    translate: 0 -50%;
    rotate: 4deg;
}

.sl-sticker--pc img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    background: var(--sl-sand);
}

.sl-sticker--question {
    top: 8%;
    right: 4%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--sl-sun);
    font-family: var(--sl-display);
    font-size: 58px;
    line-height: 1;
    rotate: -12deg;
}

.sl-sticker--rocket {
    top: 10%;
    left: 4%;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    background: var(--sl-ember);
    font-size: 34px;
    rotate: 10deg;
}

.sl-sticker--check {
    bottom: 10%;
    left: 8%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sl-mint);
    font-size: 38px;
    rotate: -8deg;
}

.sl-sticker--code {
    right: 10%;
    bottom: 8%;
    padding: 10px 18px;
    border-radius: 1600px;
    background: var(--sl-sand);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    rotate: 6deg;
}

.sl-sticker--star {
    top: 44%;
    left: -4%;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--sl-violet);
    color: var(--sl-sun);
    font-size: 28px;
    rotate: -16deg;
}

/* ---------- Bandas ---------- */

.sl-band { border-radius: 30px; padding: clamp(32px, 4vw, 56px); }
.sl-band--paper { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; border: 1px solid var(--sl-carbon); background: var(--sl-paper); }
.sl-band--gray { background: var(--sl-gray); }

.sl-about-intro { display: grid; gap: 18px; justify-items: start; }

.sl-heading {
    font-family: var(--sl-display);
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem);
    font-weight: 400;
    line-height: .86;
    text-transform: uppercase;
}

.sl-heading span { display: block; margin-top: 10px; color: var(--sl-violet); font-size: .62em; line-height: .95; }
.sl-body { max-width: 52ch; font-size: 16px; line-height: 1.5; }

.sl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.sl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--sl-carbon);
    border-radius: 26px;
    color: var(--sl-on);
    transition: rotate var(--duration) var(--ease-out), translate var(--duration) var(--ease-out);
}

.sl-card--sand { background: var(--sl-sand); }
.sl-card--mint { background: var(--sl-mint); }

.sl-card-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--sl-on);
    border-radius: 16px;
    color: #fbfaf6;
    font-size: 26px;
}

.sl-card-badge--violet,
.sl-card-badge--ember { width: 48px; height: 48px; border-radius: 50%; background: #16161a; font-size: 21px; }
.sl-card-kicker { font-size: 12px; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; }
.sl-card h3 { font-family: var(--sl-display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 400; line-height: .9; text-transform: uppercase; }
.sl-card-text { font-size: 15px; line-height: 1.4; }
.sl-card .sl-btn { margin-top: auto; }

/* Métricas */
.sl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.sl-metric {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--sl-carbon);
    border-radius: 20px;
    color: var(--sl-on);
}

.sl-metric:nth-child(odd) { rotate: -1.2deg; }
.sl-metric:nth-child(even) { rotate: 1.2deg; }
.sl-metric i { font-size: 24px; }
.sl-metric strong { font-family: var(--sl-display); font-size: clamp(2rem, 1.4rem + 1.8vw, 3.4rem); font-weight: 400; line-height: .85; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sl-metric span { font-size: 12px; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; }
.sl-metric--blue { background: var(--sl-blue); }
.sl-metric--sun { background: var(--sl-sun); }
.sl-metric--ember { background: var(--sl-ember); }
.sl-metric--violet { background: var(--sl-violet); color: var(--sl-on-violet); }
.sl-metric--violet strong { font-size: clamp(1.15rem, .6rem + 1.15vw, 2rem); white-space: nowrap; overflow-wrap: normal; }

/* Gestos al pasar el ratón: solo con puntero fino, nunca en pantallas táctiles. */
@media (hover: hover) and (pointer: fine) {
    .sl-btn:hover { transform: translateY(-2px) rotate(-1deg); background: var(--sl-sun); color: var(--sl-on); }
    .sl-btn:hover i { transform: translateX(3px); }
    .sl-btn--solid:hover,
    .sl-card .sl-btn--solid:hover { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
    .sl-theme-toggle:hover { background: var(--sl-sun); color: var(--sl-on); }
    .sl-sticker:not(.sl-sticker--pc):hover { rotate: 0deg; scale: 1.06; }
    .sl-sticker--pc:hover { rotate: 1.5deg; }
    .sl-card:hover { translate: 0 -3px; }
}

/* ---------- Menú lateral en clave Slush ---------- */

:root .sb {
    --sb-line: var(--sl-carbon);
    --sb-text: var(--sl-carbon);
    --sb-dim: var(--sl-carbon);
    border: 1px solid var(--sl-carbon);
    border-radius: 30px;
    background: var(--sl-paper);
    box-shadow: none;
    font-family: var(--sl-sans);
}

:root .sb::before { display: none; }
:root .sb-logo { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); box-shadow: none; }
:root .sb-brand-text strong { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; }
:root .sb-brand-text strong span { color: var(--sl-violet); }
:root .sb-meta { border-top-color: var(--sl-carbon); color: var(--sl-carbon); }
:root .sb-online { border-color: var(--sl-carbon); background: var(--sl-mint); color: var(--sl-on); }
:root .sb .sb-search { border-color: var(--sl-carbon); border-radius: 1600px; background: var(--sl-paper); color: var(--sl-carbon); }
:root .sb .sb-search kbd { border-color: var(--sl-carbon); background: var(--sl-mist); color: var(--sl-carbon); }
:root .sb .sb-search:hover { background: var(--sl-sky); }
:root .sb-label { color: var(--sl-carbon); font-weight: 700; }
:root .sb-link { border: 1px solid transparent; border-radius: 1600px; color: var(--sl-carbon); font-weight: 700; }
:root .sb-link > i,
:root .sb-link:hover > i { color: var(--sl-carbon); }
:root .sb-nav:not(.has-indicator) .sb-link:hover,
:root .sb-indicator { border-color: var(--sl-carbon); border-radius: 1600px; background: var(--sl-sky); }
:root .sb-link.is-active { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); box-shadow: none; }
:root .sb-link.is-active > i { color: var(--sl-sun); }
html[data-sl-theme="dark"] .sb-link.is-active > i { color: #5a52c4; }
:root .sb-term { border-color: var(--sl-carbon); border-radius: 20px; background: var(--sl-sand); }
:root .sb-term-bar { border-bottom-color: var(--sl-carbon); background: var(--sl-paper); color: var(--sl-carbon); }
:root .sb-term-body,
:root .sb-term-cmd,
:root .sb-term-list dd,
:root .sb-term-list dt { color: var(--sl-on); }
:root .sb-term-list > div::after { border-bottom-color: rgba(22, 22, 26, .35); }
:root .sb-term-cmd span,
:root .sb-term-list dd.is-ok { color: var(--sl-ok); }
:root .sb-term-prompt,
:root .sb-term-prompt span { color: var(--sl-on); }
:root .sb-term-prompt i { background: var(--sl-on); }
:root .sb-socials a { border-color: var(--sl-carbon); border-radius: 20px; background: var(--sl-paper); color: var(--sl-carbon); }
:root .sb-socials i { color: var(--sl-carbon); }
:root .sb-socials a:hover { background: var(--sl-sun); }
:root .sb-socials a:hover i { color: var(--sl-on); }
:root .sb-loc,
:root .sb-loc i { color: var(--sl-carbon); }

/* Cabecera móvil */
:root .responsive-brand { background: var(--sl-paper); box-shadow: 0 1px 0 var(--sl-carbon); }
:root .responsive-brand::after { display: none; }
:root .brand-header .brand-title { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; }
:root .brand-header .brand-mark { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); box-shadow: none; }
:root .brand-header .brand-domain { color: var(--sl-violet); }
:root .brand-header .brand-version { border-color: var(--sl-carbon); color: var(--sl-carbon); }
:root .sidebar-toggle { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); color: var(--sl-carbon); box-shadow: none; }

/* ---------- Adaptación ---------- */

@media (max-width: 1180px) {
    .sl-band--paper { grid-template-columns: minmax(0, 1fr); }
    .sl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .sl-hero { grid-template-columns: minmax(0, 1fr); }
    .sl-hero-copy { padding: 36px 22px 8px; }
    .sl-stickers { min-height: 340px; margin-bottom: 24px; }
    .sl-sticker--pc { right: 50%; width: min(80%, 380px); translate: 50% -50%; }
}

@media (max-width: 560px) {
    .sl-cards { grid-template-columns: minmax(0, 1fr); }
    .sl-metrics { gap: 12px; }
    .sl-metric { padding: 16px; }
    .sl-sticker--question { width: 70px; height: 70px; font-size: 42px; }
    .sl-sticker--rocket { width: 60px; height: 60px; font-size: 26px; }
    .sl-sticker--check { width: 56px; height: 56px; font-size: 30px; }
    .sl-sticker--code { font-size: 17px; }
    .sl-sticker--star { display: none; }
}

@keyframes slMarquee { to { transform: translateX(-100%); } }
@keyframes slBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sl-marquee-track,
    .sl-prompt-caret { animation: none; }
    .sl-marquee-track + .sl-marquee-track { display: none; }
    .sl-btn:hover { transform: none; }
    .sl-sticker:hover { scale: none; }
    .sl-card:hover { translate: none; }
}

/* ==========================================================
   INICIO SOBRIO: ilustración sin marco y franja de indicadores
   (sustituye a las pegatinas y a las métricas de colores).
   ========================================================== */

.sl-art {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 32px clamp(20px, 3vw, 44px) 32px 0;
}

.sl-art img { display: block; width: min(100%, 540px); height: auto; }

.sl-art-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.sl-art-caption span {
    padding: 5px 12px;
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-paper);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sl-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 8px 24px 8px 8px;
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-card);
}

.sl-stats ul { display: grid; flex: 1 1 640px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sl-stats li {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 16px 20px;
    border-left: 1px solid var(--sl-carbon);
}

.sl-stats li:first-child { border-left: 0; }

.sl-stats li span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sl-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sl-stats li span i { color: var(--sl-carbon); font-size: 14px; }
.sl-stats strong { font-family: var(--sl-display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); font-weight: 400; line-height: .9; font-variant-numeric: tabular-nums; }
.sl-stats .sl-stats-date { font-size: clamp(1.2rem, .9rem + .9vw, 1.8rem); white-space: nowrap; }

@media (max-width: 860px) {
    .sl-art { padding: 8px 20px 32px; }
    .sl-art img { width: min(100%, 420px); }
}

@media (max-width: 760px) {
    .sl-stats { padding: 8px 16px 16px 8px; }
    .sl-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-stats li:nth-child(3) { border-left: 0; }
    .sl-stats li:nth-child(n + 3) { border-top: 1px solid var(--sl-carbon); }
    .sl-stats > .sl-btn { width: 100%; margin-left: 8px; }
}

/* Portada equilibrada: dos columnas iguales; titular contenido a su
   mitad y la ilustración más grande, sobre la curva de la cinta. */
.sl-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 32px);
    min-height: clamp(520px, 64vh, 660px);
}

.sl-hero .sl-display { font-size: clamp(2.8rem, .6rem + 4vw, 5.8rem); }
.sl-hero .sl-tagline { max-width: 26ch; }
.sl-art { align-self: center; padding: 24px clamp(20px, 3vw, 48px) 24px 0; }
.sl-art img { width: min(100%, 640px); }

/* Ordenador más grande sin agrandar la tarjeta: scale no ocupa espacio en
   el diseño. Si llega a rozar el texto, el texto queda por encima. */
.sl-hero .sl-hero-copy { z-index: 2; }
.sl-hero .sl-art { z-index: 1; }

@media (min-width: 861px) {
    .sl-art img { scale: 1.4; transform-origin: 85% 50%; }
}

@media (max-width: 860px) {
    .sl-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .sl-art { padding: 0 20px 28px; }
    .sl-art img { width: min(100%, 440px); scale: 1.18; transform-origin: 50% 70%; }
    /* En una columna, la cinta solo ocupa la franja de la ilustración. */
    .sl-ribbon { inset: auto 0 0; height: 46%; }
}

/* Celular: texto → ordenador → botones. El bloque de texto se «disuelve»
   (display: contents) para poder colocar los botones después de la imagen. */
@media (max-width: 860px) {
    .sl-hero { gap: 20px; padding: 36px 22px 32px; }
    .sl-hero .sl-hero-copy { display: contents; }
    .sl-hero .sl-hero-copy > * { position: relative; z-index: 2; justify-self: start; }
    .sl-hero .sl-art { order: 1; padding: 0; }
    .sl-hero .sl-actions { order: 2; }
}