/* "Rasca y conoce" — Selección natural de Sergio */

/* Mobile-only / desktop-only copies */
.ss-copy-mobile{ display: none; }
@media (max-width: 720px){
    .ss-copy-desktop{ display: none; }
    .ss-copy-mobile{ display: block; }
}

:root{
    --ss-bg: #0e0e0e;
    --ss-fg: #ffffff;
    --ss-accent: #f3ca2b;
    --ss-muted: rgba(255,255,255,.55);
    --ss-line: rgba(255,255,255,.14);
}

/* ---------- "Mi cerebro" vertical side tab (right edge, yellow, no icon) ---------- */
.ss-rasca-toggle{
    position: fixed;
    right: 0;
    left: auto;
    top: 50%;
    bottom: auto;
    z-index: 9998;
    padding: 16px 8px;
    border: 0;
    border-radius: 14px 0 0 14px;
    background: var(--ss-accent);
    color: #141414;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    animation: ss-brain-call 2.4s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    transition: padding .2s ease, background .2s ease;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
}
.ss-rasca-toggle__icon{ display: none; }
.ss-rasca-toggle__label{ display: inline-block; }
.ss-rasca-toggle:hover{ padding-left: 12px; background: #141414; color: var(--ss-accent); }
@keyframes ss-brain-call{
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(243,202,43,.55); }
    50%      { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 12px rgba(243,202,43,0); }
}
body.ss-rasca-open .ss-rasca-toggle{ opacity: 0; pointer-events: none; }

/* ---------- Overlay ---------- */
.ss-rasca{
    position: fixed; inset: 0; z-index: 9999;
    background: var(--ss-bg); color: var(--ss-fg);
    transform: translateX(100%);
    visibility: hidden; overflow: hidden;
    /* Avoid double-tap-zoom + stop page-level pinch while the overlay is open */
    touch-action: pan-x pan-y;
}
body.ss-rasca-open .ss-rasca{ visibility: visible; }
body.ss-rasca-open{ overflow: hidden !important; }
.ss-rasca::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ---------- Top bar ---------- */
.ss-rasca__top{
    position: relative; z-index: 5;
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 28px; pointer-events: none;
}
.ss-rasca__top > *{ pointer-events: auto; }
.ss-rasca__brand{ display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.ss-rasca__brand em{ font-style: normal; color: var(--ss-muted); font-weight: 400; }
.ss-rasca__brand .dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--ss-accent); }
.ss-rasca__where{ font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--ss-accent); font-weight: 600; }

.ss-rasca__close{
    position: relative;
    width: 42px; height: 42px;
    border: 1px solid var(--ss-line); background: transparent;
    border-radius: 999px; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ss-rasca__close::before, .ss-rasca__close::after{
    content:''; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 2px; background: #fff; border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ss-rasca__close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.ss-rasca__close:hover{ background: var(--ss-accent); border-color: var(--ss-accent); }
.ss-rasca__close:hover::before, .ss-rasca__close:hover::after{ background: #141414; }

/* ---------- Minimap ---------- */
.ss-rasca__minimap{ position: absolute; top: 84px; right: 28px; z-index: 5; width: 96px; height: 130px; opacity: .9; }
.ss-rasca__minimap .mm-node{ cursor: pointer; }
.ss-rasca__minimap .mm-node circle{ transition: fill .25s, r .2s; }
.ss-rasca__minimap .mm-node.is-active circle{ fill: var(--ss-accent); r: 5; }
@media (max-width: 720px){ .ss-rasca__minimap{ display: none; } }

/* ---------- D-pad + legend (bottom-left) ---------- */
.ss-nav{
    position: absolute;
    bottom: 28px; left: 28px;
    z-index: 7;
    display: flex; align-items: center; gap: 18px;
}
.ss-dpad{
    position: relative;
    width: 150px; height: 150px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 0;
}
.ss-dpad-legend{
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;
}
.ss-leg{
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ss-muted);
    opacity: .3;
    transition: opacity .25s, color .25s;
}
.ss-leg.is-visible{ opacity: 1; color: var(--ss-accent); }
.ss-leg__arr{
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; font-family: ui-monospace, Menlo, monospace;
    color: inherit;
    font-size: 14px;
}
.ss-leg__to{ color: inherit; font-weight: 700; }
.ss-leg:not(.is-visible) .ss-leg__to::after{ content: '—'; color: var(--ss-muted); }
.ss-dpad__center{
    grid-column: 2; grid-row: 2;
    background: transparent;
    border: 1px solid var(--ss-line);
    border-radius: 3px;
}
.ss-dpad__btn{
    position: relative;
    pointer-events: auto;
    border: 1px solid var(--ss-line);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, border-color .15s ease;
    overflow: hidden;
}
.ss-dpad__btn i{
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    border-top: 2.5px solid #fff;
    border-right: 2.5px solid #fff;
    transition: border-color .15s ease;
}
.ss-dpad__up    { grid-column: 2; grid-row: 1; border-radius: 10px 10px 2px 2px; }
.ss-dpad__down  { grid-column: 2; grid-row: 3; border-radius: 2px 2px 10px 10px; }
.ss-dpad__left  { grid-column: 1; grid-row: 2; border-radius: 10px 2px 2px 10px; }
.ss-dpad__right { grid-column: 3; grid-row: 2; border-radius: 2px 10px 10px 2px; }
.ss-dpad__up    i{ transform: translate(-50%, -30%) rotate(-45deg); }
.ss-dpad__down  i{ transform: translate(-50%, -70%) rotate(135deg); }
.ss-dpad__left  i{ transform: translate(-30%, -50%) rotate(-135deg); }
.ss-dpad__right i{ transform: translate(-70%, -50%) rotate(45deg); }

/* Active (available) direction turns yellow */
.ss-dpad__btn:not(:disabled){
    border-color: var(--ss-accent);
}
.ss-dpad__btn:not(:disabled) i{
    border-top-color: var(--ss-accent);
    border-right-color: var(--ss-accent);
}
.ss-dpad__btn:disabled{
    opacity: .3; cursor: default;
}
.ss-dpad__btn:disabled i{
    border-top-color: var(--ss-fg);
    border-right-color: var(--ss-fg);
}
.ss-dpad__btn:hover:not(:disabled){
    background: var(--ss-accent);
}
.ss-dpad__btn:hover:not(:disabled) i{
    border-top-color: #141414; border-right-color: #141414;
}
/* Approaching feedback: pulse the d-pad button matching the edge */
.ss-dpad__btn.is-approaching{
    background: rgba(243,202,43,.18);
    animation: ss-pulse-btn 1.1s ease-in-out infinite;
}
.ss-dpad__btn.is-approaching i{ border-top-color: #141414; border-right-color: #141414; }
@keyframes ss-pulse-btn{
    0%, 100% { box-shadow: 0 0 0 0 rgba(243,202,43,.35); }
    50%      { box-shadow: 0 0 0 10px rgba(243,202,43,0); }
}

/* Edge glows on the viewport */
.ss-edge{
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.ss-edge.is-active{ opacity: 1; }
.ss-edge--right{ top: 0; right: 0; bottom: 0; width: 160px;
    background: linear-gradient(to left,  rgba(243,202,43,.22), transparent); }
.ss-edge--left { top: 0; left: 0;  bottom: 0; width: 160px;
    background: linear-gradient(to right, rgba(243,202,43,.22), transparent); }
.ss-edge--up   { left: 0; right: 0; top: 0;    height: 140px;
    background: linear-gradient(to bottom, rgba(243,202,43,.22), transparent); }
.ss-edge--down { left: 0; right: 0; bottom: 0; height: 140px;
    background: linear-gradient(to top,    rgba(243,202,43,.22), transparent); }

/* Arrow chevron hint on the active edge (animated into view) */
.ss-edge::after{
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-top: 3px solid var(--ss-accent);
    border-right: 3px solid var(--ss-accent);
    opacity: 0;
    animation: ss-edge-slide 1.2s ease-in-out infinite;
}
.ss-edge.is-active::after{ opacity: 1; }
.ss-edge--right::after{ right: 26px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.ss-edge--left::after { left: 26px;  top: 50%; transform: translateY(-50%) rotate(-135deg); }
.ss-edge--up::after   { top: 26px;  left: 50%; transform: translateX(-50%) rotate(-45deg); }
.ss-edge--down::after { bottom: 26px; left: 50%; transform: translateX(-50%) rotate(135deg); }
@keyframes ss-edge-slide{
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* Hint (bottom-right so it doesn't clash with d-pad) */
.ss-rasca__hint{
    position: absolute; bottom: 40px; right: 28px;
    z-index: 5; margin: 0; font-size: 11px; color: var(--ss-muted); letter-spacing: .08em;
    text-align: right; max-width: 260px;
}
.ss-rasca__hint kbd{ display: inline-block; border: 1px solid var(--ss-line); padding: 2px 6px; border-radius: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
@media (max-width: 720px){ .ss-rasca__hint{ display: none; } }

/* ---------- Map / room ---------- */
.ss-rasca__viewport{ position: absolute; inset: 0; overflow: hidden; }
.ss-rasca__map{ position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; height: 100dvh; will-change: transform; }
.ss-room{
    position: absolute;
    width: 100vw;
    height: 100vh;    /* fallback */
    height: 100dvh;
    top: 0; left: 0;
    box-sizing: border-box;
    padding: 90px 90px 100px;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
}
/* ==========================================================
   MOBILE LAYOUT (≤720px)
   Strategy: every room is a CSS Grid with named areas. All
   inner content (caption, trigger, graphic, info) lives in
   its own row — no absolute positioning stacked on top of
   each other. Nav (d-pad + MI CEREBRO + lang) is fixed at
   the bottom, respecting env(safe-area-inset-bottom).
   ========================================================== */
@media (max-width: 720px){

    /* ---- Top bar: compact so caption starts higher ---- */
    .ss-rasca__top{ padding: 12px 14px; }
    .ss-rasca__close{ width: 34px; height: 34px; }
    .ss-rasca__brand{ font-size: 10px; letter-spacing: .14em; gap: 8px; }
    .ss-rasca__brand em{ display: none; }

    /* ---- Room becomes a grid; specific rows per room type ---- */
    .ss-room{
        padding: 60px 14px calc(118px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
        justify-items: stretch;
        overflow: hidden;
    }

    /* Caption scale — always compact, never wraps beyond 3 lines */
    .ss-room__step{ font-size: 10px; margin-bottom: 6px; letter-spacing: .2em; }
    .ss-room__caption h2{ font-size: 22px; line-height: 1.12; margin-bottom: 8px; white-space: normal; }
    .ss-room__caption p{ font-size: 13px; line-height: 1.45; max-width: 320px; margin: 0 auto 4px; }
    .ss-room__caption{ align-self: start; }

    /* -------- HOLA: logo / caption / spacer -------- */
    .ss-room--hola{
        grid-template-rows: 1fr auto 1fr;
        grid-template-areas:
          "logo"
          "caption"
          ".";
    }
    .ss-room--hola .ss-hola-stage{ grid-area: logo; width: clamp(220px, 60vw, 320px); margin: auto; }
    .ss-room--hola .ss-room__caption{ grid-area: caption; align-self: start; }

    /* -------- VARIACIÓN: caption / graphic / big info card -------- */
    .ss-room--variation{
        grid-template-rows: auto minmax(220px, 1fr) auto;
        grid-template-areas:
          "caption"
          "graphic"
          "card";
        gap: 10px;
    }
    .ss-room--variation .ss-room__caption{ grid-area: caption; }
    .ss-room--variation .ss-zoom{
        grid-area: graphic;
        position: relative !important;
        inset: auto !important;
        width: 100%; height: 100%;
        min-height: 0;    /* critical so grid 1fr shrinks correctly */
    }
    .ss-room--variation .ss-variacion-card{
        grid-area: card;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding: 12px 16px;
        min-height: 68px;
        border: 1px solid var(--ss-line);
        border-radius: 14px;
        background: rgba(14,14,14,.7);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: border-color .25s, transform .2s;
    }
    .ss-room--variation .ss-variacion-card.is-active{
        border-color: var(--ss-accent);
        transform: scale(1.02);
    }
    .ss-variacion-card__year{
        font-family: ui-monospace, Menlo, monospace;
        font-size: 13px;
        letter-spacing: .22em;
        font-weight: 700;
        color: var(--ss-accent);
        text-transform: uppercase;
    }
    .ss-variacion-card.is-active .ss-variacion-card__year{
        color: var(--ss-accent);
    }
    .ss-variacion-card__label{
        font-size: 20px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--ss-muted);
    }
    .ss-variacion-card.is-active .ss-variacion-card__label{
        color: var(--ss-fg);
    }

    /* Thicker connector lines so the network reads better on small screens */
    .ss-room--variation .ss-net .ss-link{ stroke-width: 2.2; }
    .ss-room--variation .ss-net .ss-link.is-pulsing{ stroke-width: 3; }
    .ss-room--variation .ss-net .ss-pulse{ stroke-width: 4; }

    /* Huge tappable nodes on mobile */
    .ss-room--variation .ss-net .ss-node{ r: 55 !important; }
    .ss-room--variation .ss-net .ss-node.is-yellow{ r: 60 !important; }
    .ss-room--variation .ss-net .ss-node-hit{ r: 90 !important; }
    .ss-room--variation .ss-net .ss-node-glow{ r: 75 !important; }
    /* Hide SVG inner labels on mobile — the info card replaces them */
    .ss-room--variation .ss-net .ss-node-label,
    .ss-room--variation .ss-net .ss-node-year{ display: none; }

    /* -------- COMPETENCIA: caption / trigger / flower / pill -------- */
    .ss-room--competition{
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
          "caption"
          "trigger"
          "graphic"
          "info";
        gap: 4px;
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
    .ss-room--competition .ss-zoom{
        /* Match the cropped mobile viewBox (120 222 760 520 → aspect 760/520)
           so the wrapper is exactly the flower's height. No dead space below
           the flower → the info pill sits right under it. */
        aspect-ratio: 760 / 520;
        height: auto;
        max-height: 60vh;
        width: 100%;
        align-self: start;
        align-items: flex-start;
    }
    .ss-room--competition .ss-comp-trigger{ margin: 0; }
    .ss-room--competition .ss-petal-info{ margin: 0; }
    .ss-room--competition .ss-room__caption{ grid-area: caption; }
    .ss-room--competition .ss-comp-trigger{
        grid-area: trigger;
        position: relative !important;
        top: auto !important; bottom: auto !important; left: auto !important;
        transform: none !important;
        justify-self: center;
        font-size: 10px; padding: 8px 18px;
        margin: 0;
    }
    .ss-room--competition .ss-zoom{
        grid-area: graphic;
        position: relative !important;
        inset: auto !important;
        width: 100%; height: 100%;
        min-height: 0;
    }
    .ss-room--competition .ss-petal-info{
        grid-area: info;
        position: relative !important;
        right: auto !important; top: auto !important; bottom: auto !important; left: auto !important;
        transform: none !important;
        flex-direction: row; gap: 10px;
        width: auto; max-width: calc(100vw - 28px);
        padding: 8px 16px 8px 8px;
        border-radius: 999px;
        justify-self: center;
    }
    .ss-room--competition .ss-petal-info.is-active{ transform: scale(1.04) !important; }
    .ss-room--competition .ss-petal-info__icon{ width: 26px; height: 26px; }
    .ss-room--competition .ss-petal-info__label{ font-size: 10px; min-height: auto; max-width: 60vw; }

    /* -------- SELECCIÓN: caption / canvas (tags hidden on mobile) -------- */
    .ss-room--selection{
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "caption"
          "graphic";
    }
    .ss-room--selection .ss-room__caption{ grid-area: caption; }
    .ss-room--selection .ss-pulse-net{
        grid-area: graphic;
        position: relative !important;
        inset: auto !important;
        top: auto !important; height: auto !important;
        width: 100%; min-height: 0;
    }
    .ss-room--selection .ss-sel-tags{ display: none; }

    /* -------- PERSONAL / HERRAMIENTAS: caption + icon grid -------- */
    .ss-room--variation:not(*),    /* noop selector to group below */
    .ss-room[data-key="personal"],
    .ss-room[data-key="herramientas"]{
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "caption"
          "grid";
    }
    .ss-room[data-key="personal"] .ss-grid-icons,
    .ss-room[data-key="herramientas"] .ss-grid-icons{
        grid-area: grid;
        align-self: center;
        margin: 0 auto;
    }

    /* -------- MÚSICA: caption + vinyl/list (play button overlays the vinyl) -------- */
    .ss-room[data-key="musica"]{
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "caption"
          "content";
        gap: 8px;
    }
    .ss-room[data-key="musica"] .ss-music-stage{
        grid-area: content;
        flex-direction: column;
        gap: 12px;
        align-self: start;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    .ss-room[data-key="musica"] .ss-vinyl-wrap{ width: clamp(180px, 48vw, 240px); }
    /* Música list compact like Manías: no padding, single line, smaller */
    .ss-room[data-key="musica"] .ss-list{ max-width: 100%; width: 100%; gap: 4px; }
    .ss-room[data-key="musica"] .ss-list li{
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0;
        font-size: 12px;
        line-height: 1.3;
        background: transparent;
        transform: none;
    }
    .ss-room[data-key="musica"] .ss-list li:hover{ background: transparent; transform: none; }
    .ss-room[data-key="musica"] .ss-list li::before{ display: none; }
    .ss-room[data-key="musica"] .ss-list li > span:first-child{
        min-width: 22px;
        font-size: 10px;
    }

    /* -------- MANÍAS: caption + scrollable list -------- */
    .ss-room[data-key="manias"]{
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "caption"
          "content";
    }
    .ss-room[data-key="manias"] .ss-list--big{
        grid-area: content;
        overflow-y: auto; min-height: 0;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .ss-room[data-key="manias"] .ss-list--big li{ font-size: 14px; }

    /* ---- SVG node labels: readable at mobile's render scale ---- */
    .ss-net .ss-node{ r: 8; }
    .ss-net .ss-node-label{ font-size: 34px; }
    .ss-net .ss-node-year{ font-size: 26px; }
    .ss-net .ss-node-hit{ r: 36; }
    /* Tap-selected persists the label (no hover on touch) */
    .ss-net .ss-node-group.is-selected .ss-node-label,
    .ss-net .ss-node-group.is-selected .ss-node-year{ opacity: 1; }
    .ss-net .ss-node-group.is-selected .ss-node-glow{ opacity: 1; }
    .ss-net .ss-node-group.is-selected .ss-node{ fill: var(--ss-accent); }

    /* ---- Bottom nav: tiny d-pad floating bottom-left by default ---- */
    .ss-nav{
        bottom: calc(14px + env(safe-area-inset-bottom));
        left: 14px;
        transform: none;
    }
    .ss-dpad{
        width: 84px; height: 84px;
        grid-template-columns: 26px 26px 26px;
        grid-template-rows: 26px 26px 26px;
    }
    .ss-dpad__btn{ border-width: 1px; }
    .ss-dpad__btn i{
        width: 7px; height: 7px;
        border-top-width: 2px;
        border-right-width: 2px;
    }
    .ss-dpad__up    i{ transform: translate(-50%, -30%) rotate(-45deg); }
    .ss-dpad__down  i{ transform: translate(-50%, -70%) rotate(135deg); }
    .ss-dpad__left  i{ transform: translate(-30%, -50%) rotate(-135deg); }
    .ss-dpad__right i{ transform: translate(-70%, -50%) rotate(45deg); }
    .ss-dpad-legend{ display: none; }

    /* ---- HOLA: d-pad bigger, centered at the BOTTOM (only on the first room) ---- */
    .ss-rasca[data-key="hola"] .ss-nav{
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(28px + env(safe-area-inset-bottom));
        top: auto;
    }
    .ss-rasca[data-key="hola"] .ss-dpad{
        width: 150px; height: 150px;
        grid-template-columns: 48px 48px 48px;
        grid-template-rows: 48px 48px 48px;
    }
    .ss-rasca[data-key="hola"] .ss-dpad__btn{ border-width: 1px; }
    .ss-rasca[data-key="hola"] .ss-dpad__btn i{
        width: 14px; height: 14px;
        border-top-width: 2.5px;
        border-right-width: 2.5px;
    }

    /* Fade the language switcher out while the rasca is open and back in
       smoothly when it closes (no jump, no harsh reappearance). */
    .ss-lang-float{
        transition: opacity .45s ease .15s !important;
        will-change: opacity;
    }
    body.ss-rasca-open .ss-lang-float{
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .25s ease 0s !important;
    }

    /* ---- Approaches / edge glow disabled on mobile (no cursor) ---- */
    .ss-edge{ display: none; }
}

/* ---------- Captions (home aesthetic) ---------- */
.ss-room__caption{
    position: relative; z-index: 4;
    text-align: center;
    max-width: 780px; margin: 0 auto;
}
.ss-room__caption--home{ padding-top: 20px; }
.ss-room__step{
    display: inline-block;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ss-accent); margin-bottom: 18px; font-weight: 600;
}
.ss-room__caption h2{
    font-family: inherit;
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 18px;
    color: var(--ss-fg);
    font-weight: 400;
    text-wrap: balance;
    hyphens: none; overflow-wrap: normal;
    white-space: nowrap;  /* single line when it fits */
}
@media (max-width: 720px){
    .ss-room__caption h2{ white-space: normal; }
}
.ss-room__caption .brace{
    color: var(--ss-accent);
    font-weight: 300;
    display: inline-block;
    margin: 0 .08em;
}
.ss-room__caption p{
    margin: 0 auto 8px; color: var(--ss-muted);
    font-size: 16px; line-height: 1.55; max-width: 560px;
}
.ss-room__caption em{ font-style: normal; color: var(--ss-accent); font-weight: 600; }
.ss-room__caption kbd{
    display: inline-block; border: 1px solid var(--ss-line);
    padding: 1px 6px; border-radius: 4px;
    font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ss-fg);
}

/* ---------- Room: HOLA — logo stage (no brain) ---------- */
.ss-room--hola{ justify-content: center; }
.ss-hola-stage{
    position: relative;
    width: clamp(320px, 44vw, 560px);
    aspect-ratio: 1;
    margin: 10px auto 30px;
    display: flex; align-items: center; justify-content: center;
}
/* The brand logo, nice and big with a gentle float + glow */
.ss-brand-logo{
    position: relative;
    width: 68%;
    max-width: 380px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 0 30px rgba(243, 202, 43, .45));
    animation: ss-logo-float 6s ease-in-out infinite, ss-logo-in 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ss-logo-in{
    from { opacity: 0; transform: scale(.85); filter: drop-shadow(0 0 0 rgba(243,202,43,0)); }
    to   { opacity: 1; transform: scale(1);    filter: drop-shadow(0 0 30px rgba(243,202,43,.45)); }
}
@keyframes ss-logo-float{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
/* Three expanding rings behind the logo (sonar pulse) */
.ss-logo-pulse{
    position: absolute;
    top: 50%; left: 50%;
    width: 62%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.5);
    border: 1px solid var(--ss-accent);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: ss-pulse 4s ease-out infinite;
    z-index: 1;
}
.ss-logo-pulse:nth-child(2){ animation-delay: 1.3s; border-color: rgba(243,202,43,.6); }
.ss-logo-pulse:nth-child(3){ animation-delay: 2.6s; border-color: rgba(243,202,43,.35); }
@keyframes ss-pulse{
    0%   { transform: translate(-50%, -50%) scale(.55); opacity: .9; border-width: 1.5px; }
    80%  { opacity: .0; }
    100% { transform: translate(-50%, -50%) scale(1.5);  opacity: 0; border-width: 1px; }
}
/* Four small orbiting dots around the logo */
.ss-logo-orbit{
    position: absolute;
    top: 50%; left: 50%;
    width: 88%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    animation: ss-orbit-spin 20s linear infinite;
}
.ss-logo-orbit span{
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ss-accent);
    box-shadow: 0 0 10px rgba(243,202,43,.8);
}
.ss-logo-orbit span:nth-child(1){ top: -4px;  left: 50%; transform: translateX(-50%); }
.ss-logo-orbit span:nth-child(2){ top: 50%;   right: -4px; transform: translateY(-50%); width: 5px; height: 5px; opacity: .7; }
.ss-logo-orbit span:nth-child(3){ bottom: -4px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; opacity: .85; }
.ss-logo-orbit span:nth-child(4){ top: 50%; left: -4px; transform: translateY(-50%); width: 5px; height: 5px; opacity: .7; }
@keyframes ss-orbit-spin{ to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Zoom wrapper (vector zoom via viewBox, no pixelation) ---------- */
.ss-zoom{
    position: absolute; inset: 90px 90px 100px 90px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* Keep pinch/scroll gestures on the SVG from zooming the whole page */
    touch-action: none;
    -ms-touch-action: none;
    overscroll-behavior: contain;
}
.ss-zoom > svg{
    width: 100%; height: 100%;
    display: block;
}
/* Mobile wrapper bounds moved to the graphics-aware rule further down. */

/* ---------- Variación: info card (mobile only) ---------- */
.ss-variacion-card{ display: none; }

/* ---------- Networks ---------- */
.ss-net{ display: block; pointer-events: auto; }
.ss-net .ss-link{ stroke: rgba(255,255,255,.18); stroke-width: 1; fill: none; transition: stroke .3s ease; }
.ss-net .ss-link.is-pulsing{ stroke: var(--ss-accent); }
.ss-net .ss-pulse{ stroke: var(--ss-accent); stroke-width: 2; fill: none; stroke-linecap: round; pointer-events: none; }
.ss-net .ss-node-hit{ fill: transparent; cursor: pointer; }
.ss-net .ss-node{ fill: rgba(255,255,255,.95); transition: fill .25s, r .2s; pointer-events: none; }
.ss-net .ss-node.is-yellow{ fill: var(--ss-accent); }
.ss-net .ss-node-glow{ fill: rgba(243,202,43,.18); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ss-net .ss-node-group:hover .ss-node-glow{ opacity: 1; }
.ss-net .ss-node-group:hover .ss-node{ fill: var(--ss-accent); }
.ss-net .ss-node-label{ fill: rgba(255,255,255,.9); font-size: 11px; text-anchor: middle; pointer-events: none; opacity: 0; transition: opacity .25s; }
.ss-net .ss-node-year{ fill: var(--ss-accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; font-family: ui-monospace, Menlo, monospace; text-anchor: middle; pointer-events: none; opacity: 0; transition: opacity .25s; }
.ss-net .ss-node-group:hover .ss-node-label, .ss-net .ss-node-group:hover .ss-node-year{ opacity: 1; }

/* ---------- Flower ---------- */
.ss-flower{ width: 100%; height: 100%; display: block; }
.ss-flower .ss-petal{ transition: opacity .6s ease, stroke .6s ease, stroke-width .2s ease; cursor: pointer; }
.ss-flower .ss-petal:hover{ stroke-width: 2.6; stroke: var(--ss-accent); }
.ss-flower .ss-petal.is-wilted{ opacity: .18; stroke: rgba(255,255,255,.25); cursor: default; pointer-events: none; }
.ss-flower .ss-wave{ fill: none; stroke: var(--ss-accent); stroke-width: 2; pointer-events: none; }

/* Petal info card — next to the flower on the right */
.ss-petal-info{
    position: absolute;
    right: 50px; top: 50%; transform: translateY(-50%);
    z-index: 6;
    width: 160px;
    padding: 24px 18px;
    border: 1px solid var(--ss-line);
    border-radius: 18px;
    background: rgba(14,14,14,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    pointer-events: none;
    transition: border-color .3s ease, transform .3s ease;
}
.ss-petal-info.is-active{ border-color: var(--ss-accent); transform: translateY(-50%) scale(1.04); }
.ss-petal-info__icon{
    width: 64px; height: 64px;
    color: var(--ss-muted);
    display: flex; align-items: center; justify-content: center;
    transition: color .3s ease;
}
.ss-petal-info.is-active .ss-petal-info__icon{ color: var(--ss-accent); }
.ss-petal-info__icon svg{ width: 100%; height: 100%; display: block; }
.ss-petal-info__label{
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 700; text-align: center; line-height: 1.35;
    color: var(--ss-muted);
    transition: color .3s ease;
    min-height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.ss-petal-info.is-active .ss-petal-info__label{ color: var(--ss-accent); }
@media (max-width: 900px){
    .ss-petal-info{ right: 16px; width: 120px; padding: 16px 12px; }
    .ss-petal-info__icon{ width: 50px; height: 50px; }
    .ss-petal-info__label{ font-size: 10px; letter-spacing: .18em; }
}
/* On phones flip the card to a horizontal pill below the flower */
@media (max-width: 720px){
    .ss-petal-info{
        right: auto; top: auto;
        left: 50%; bottom: 180px;
        transform: translateX(-50%);
        flex-direction: row; gap: 10px;
        width: auto; max-width: calc(100vw - 32px);
        padding: 8px 16px 8px 8px;
        border-radius: 999px;
    }
    .ss-petal-info.is-active{ transform: translateX(-50%) scale(1.04); }
    .ss-petal-info__icon{ width: 26px; height: 26px; }
    .ss-petal-info__label{ font-size: 10px; min-height: auto; max-width: 60vw; }
}
/* ---------- Competition trigger (BELOW the flower on desktop) ---------- */
.ss-comp-trigger{
    position: absolute; bottom: 36px; top: auto; left: 50%; transform: translateX(-50%); z-index: 7;
    background: transparent; border: 1px solid var(--ss-accent); color: var(--ss-accent);
    padding: 10px 22px; border-radius: 999px;
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
    cursor: pointer; transition: background .2s, color .2s;
}
.ss-comp-trigger:hover:not(:disabled){ background: var(--ss-accent); color: #141414; }
.ss-comp-trigger:disabled{ opacity: .25; cursor: default; }

/* ---------- Selection ---------- */
.ss-pulse-net{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.ss-anchor-label{
    position: absolute; z-index: 3; pointer-events: none;
    background: #141414; border: 1px solid var(--ss-accent); color: var(--ss-accent);
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    opacity: 0; transform: translate(-50%, -100%);
    transition: opacity .2s ease; white-space: nowrap;
}
.ss-anchor-label.is-visible{ opacity: 1; }
.ss-sel-tags{
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 4;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 80%; pointer-events: none;
}
.ss-sel-tags span{
    border: 1px solid var(--ss-line); color: var(--ss-fg);
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; letter-spacing: .08em;
    background: rgba(14,14,14,.6);
}
.ss-sel-tags span.acc-tag{ border-color: var(--ss-accent); color: var(--ss-accent); font-weight: 600; }

/* ---------- Música: play button + hidden YT player ---------- */
.ss-music-yt{
    position: absolute; width: 1px; height: 1px;
    top: 0; left: 0; opacity: 0; pointer-events: none;
    border: 0;
}
.ss-music-play{
    /* Centered ON TOP of the vinyl, single-line label */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #141414;
    border: 1px solid var(--ss-accent);
    color: var(--ss-accent);
    padding: 8px 20px 8px 16px;
    border-radius: 999px;
    font-family: inherit; font-weight: 700;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    white-space: nowrap;
    width: max-content;
    max-width: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    transition: background .2s, color .2s;
}
.ss-music-play:hover{ background: var(--ss-accent); color: #141414; }
.ss-music-play__text{ white-space: nowrap; }
.ss-music-play:hover{ background: var(--ss-accent); color: #141414; }
.ss-music-play__icon{
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
    transition: border .2s;
}
.ss-music-play.is-playing .ss-music-play__icon{
    width: 10px; height: 12px;
    border: 0;
    background: linear-gradient(90deg, currentColor 30%, transparent 30%, transparent 70%, currentColor 70%);
}

/* ---------- Música ---------- */
.ss-music-stage{
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 80px;
    width: 100%; max-width: 960px; margin: 20px auto 0;
    position: relative;
}
.ss-vinyl-wrap{
    position: relative;
    width: clamp(240px, 30vw, 360px);
    aspect-ratio: 1;
    flex-shrink: 0;
}
.ss-art--vinyl{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    color: var(--ss-fg);
    animation: ss-spin 14s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes ss-spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
/* Radiating sound waves */
.ss-sound-wave{
    position: absolute; inset: 0;
    border: 1px solid var(--ss-accent);
    border-radius: 50%;
    opacity: 0;
    animation: ss-wave 3s ease-out infinite;
    pointer-events: none;
}
.ss-sound-wave:nth-child(2){ animation-delay: 1s; }
.ss-sound-wave:nth-child(3){ animation-delay: 2s; }
@keyframes ss-wave{
    0%   { transform: scale(.9); opacity: .5; }
    100% { transform: scale(1.35); opacity: 0; }
}
/* Equalizer bars (in the center of vinyl) */
.ss-eq{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: flex-end; gap: 3px;
    height: 22px;
    z-index: 3;
    pointer-events: none;
}
.ss-eq span{
    display: block; width: 3px;
    background: var(--ss-accent);
    border-radius: 2px;
    animation: ss-bar .8s ease-in-out infinite alternate;
}
.ss-eq span:nth-child(1){ height: 60%; animation-delay: .1s; }
.ss-eq span:nth-child(2){ height: 90%; animation-delay: .3s; }
.ss-eq span:nth-child(3){ height: 50%; animation-delay: .0s; }
.ss-eq span:nth-child(4){ height: 80%; animation-delay: .4s; }
.ss-eq span:nth-child(5){ height: 70%; animation-delay: .2s; }
@keyframes ss-bar{
    from{ height: 20%; }
    to  { height: 100%; }
}
/* Tracks: entering + hover */
.ss-music-stage .ss-list{ max-width: 420px; }
.ss-music-stage .ss-list li{
    padding: 10px 14px;
    border-radius: 10px;
    transition: background .2s, transform .2s;
    cursor: default;
    position: relative;
}
.ss-music-stage .ss-list li:hover{
    background: rgba(255,255,255,.04);
    transform: translateX(4px);
}
.ss-music-stage .ss-list li:hover > span:first-child{ color: var(--ss-fg); }
.ss-music-stage .ss-list li::before{
    content: ''; position: absolute; left: 0; top: 50%;
    width: 2px; height: 0;
    background: var(--ss-accent);
    transform: translateY(-50%);
    transition: height .2s;
}
.ss-music-stage .ss-list li:hover::before{ height: 60%; }
@media (max-width: 720px){ .ss-music-stage{ flex-direction: column; gap: 24px; } }

/* ---------- Lists ---------- */
.ss-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-list li{ display: flex; align-items: baseline; gap: 12px; color: var(--ss-fg); font-size: 14px; }
.ss-list li > span:first-child{ color: var(--ss-accent); font-weight: 700; min-width: 28px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.ss-list li em{ color: var(--ss-accent); font-style: normal; font-weight: 600; }
.ss-list--big{ flex: 1; align-items: flex-start; margin: 30px auto 0; max-width: 720px; width: 100%; }
.ss-list--big li{ font-size: 16px; line-height: 1.4; }

/* ---------- Icon grids ---------- */
.ss-grid-icons{
    flex: 1;
    display: grid; grid-template-columns: repeat(3, minmax(120px, 160px)); gap: 30px;
    margin: 30px auto 0; align-content: center; justify-content: center;
}
.ss-icon{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ss-icon svg{ width: 70px; height: 70px; display: block; }
.ss-icon span{ font-size: 11px; letter-spacing: .1em; text-align: center; color: var(--ss-muted); line-height: 1.3; }
@media (max-width: 720px){
    .ss-grid-icons{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .ss-icon svg{ width: 50px; height: 50px; }
}