/* ==========================================================================
   UPO.DIGITAL — VISTA "PANEL"  ·  css/panel.css
   A1 (diseño/CSS). Contrato: PANEL-SPEC.md §2 (tokens), §3 (DOM), §9 (tareas).

   REGLAS QUE CUMPLE ESTE FICHERO
   - Cero selectores de elemento globales: TODO arranca por `.pnl`, `.pnl-*`,
     `.view-toggle`, `body.view-panel`, `body.view-planets` o `#panelRoot`.
   - No toca la vista de planetas salvo para OCULTAR su HUD cuando
     `body.view-panel` está activo.
   - Sin @import, sin fuentes nuevas, sin dependencias.

   ÍNDICE
     01. Tokens de diseño
     02. Convivencia de vistas (neutralizar el HUD 3D / scroll / cursor)
     03. Lienzo del panel: raíz, fondo animado, retícula
     04. Barra superior + selector de idioma + botón de vista
     05. Secciones y tipografía de display
     06. Hero
     07. Secciones pilar: rail con scroll-snap + tarjeta
     08. Índice: buscador, chips y grid de baldosas
     09. Pie del panel, barra inferior fija y nav SEO
     10. Overlay de menú
     11. Ficha de proyecto (detalle)
     12. Estados de revelado (.is-in + escalonado --i)
     13. Responsive (1024 / 768 / 560 / 390)
     14. prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   01. TOKENS DE DISEÑO
   Bloque canónico del §2 del spec + extras necesarios para el layout.
   Qué controla cada token:
     --pnl-bg/-soft ......... negros del fondo y de las superficies
     --pnl-ink/-muted ....... los DOS tonos del titular (blanco + azul acero)
     --pnl-dim/-faint ....... textos secundarios y etiquetas apagadas
     --pnl-line/-soft ....... hairlines (bordes de 1px de todo el sistema)
     --pnl-pill ............. relleno translúcido de píldoras y botones
     --pnl-cta-* ............ CTA blanco sobre negro
     --pnl-radius ........... radio único (8px) de tarjetas, CTA y ficha
     --pnl-gutter ........... margen lateral maestro de TODA la vista
     --pnl-display/-label ... familias: display fina / etiqueta condensada
     --pnl-h1/-h2/-label-sz . escala tipográfica fluida
   ========================================================================== */

.pnl {
    --pnl-bg:        #000000;
    --pnl-bg-soft:   #05080a;
    --pnl-ink:       #ffffff;
    --pnl-muted:     #8faab2;              /* azul acero exacto de 8bit.ai */
    --pnl-dim:       rgba(255, 255, 255, .55);
    --pnl-faint:     rgba(255, 255, 255, .32);
    --pnl-line:      rgba(255, 255, 255, .12);
    --pnl-line-soft: rgba(255, 255, 255, .06);
    --pnl-pill:      rgba(255, 255, 255, .10);
    --pnl-cta-bg:    #ffffff;
    --pnl-cta-ink:   #1a1a1a;
    --pnl-radius:    8px;
    --pnl-gutter:    clamp(20px, 4vw, 64px);
    --pnl-display:   'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    --pnl-label:     'Roboto Condensed', 'Share Tech Mono', ui-monospace, monospace;
    --pnl-h1:        clamp(44px, 7.2vw, 116px);
    --pnl-h2:        clamp(34px, 5vw, 76px);
    --pnl-label-sz:  clamp(9.5px, .72vw, 11.5px);

    /* --- extras de layout (no sustituyen a ninguno de los anteriores) --- */
    --pnl-topbar:    clamp(56px, 6vw, 72px);   /* alto de la barra superior fija */
    --pnl-bottombar: clamp(46px, 4.4vw, 58px); /* alto de la barra inferior fija */
    --pnl-body-sz:   clamp(13px, .95vw, 15.5px);
    --pnl-sub-sz:    clamp(14px, 1.08vw, 17.5px);
    --pnl-card-w:    clamp(260px, 26vw, 380px);   /* ancho de .pnl-card */
    --pnl-tile-min:  clamp(220px, 22vw, 300px);   /* mínimo de columna del grid */
    --pnl-ease:      cubic-bezier(.16, .84, .44, 1);
    --pnl-dur:       .78s;
    --pnl-step:      90ms;                     /* retardo por unidad de --i */
    --pnl-z-bg:      0;
    --pnl-z-overlay: 1;
    --pnl-z-main:    2;
    --pnl-z-bars:    30;
    --pnl-z-toggle:  1200;   /* por encima de .language-selector (1000) */
    --pnl-z-menu:    1400;   /* por debajo de .modal-overlay (2000) */
    --pnl-z-detail:  1500;
}

/*  El botón de vista y el selector de idioma viven en <body>, FUERA de
    #panelRoot.pnl, así que no heredarían ningún token: se replican aquí. */
body.view-panel,
.view-toggle {
    --pnl-bg:        #000000;
    --pnl-bg-soft:   #05080a;
    --pnl-ink:       #ffffff;
    --pnl-muted:     #8faab2;
    --pnl-dim:       rgba(255, 255, 255, .55);
    --pnl-faint:     rgba(255, 255, 255, .32);
    --pnl-line:      rgba(255, 255, 255, .12);
    --pnl-line-soft: rgba(255, 255, 255, .06);
    --pnl-pill:      rgba(255, 255, 255, .10);
    --pnl-cta-bg:    #ffffff;
    --pnl-cta-ink:   #1a1a1a;
    --pnl-radius:    8px;
    --pnl-gutter:    clamp(20px, 4vw, 64px);
    --pnl-label:     'Roboto Condensed', 'Share Tech Mono', ui-monospace, monospace;
    --pnl-label-sz:  clamp(9.5px, .72vw, 11.5px);
    --pnl-topbar:    clamp(56px, 6vw, 72px);
    --pnl-bottombar: clamp(46px, 4.4vw, 58px);
    --pnl-ease:      cubic-bezier(.16, .84, .44, 1);
    --pnl-z-toggle:  1200;
}


/* ==========================================================================
   02. CONVIVENCIA DE VISTAS
   La vista de planetas manda mientras `body.view-planets`; el panel manda
   mientras `body.view-panel`. Nunca las dos a la vez.
   ========================================================================== */

/* El panel no existe visualmente en la vista 3D (el DOM se conserva). */
body.view-planets #panelRoot { display: none; }

/* En la vista PANEL se apaga TODO el HUD de la vista 3D. */
body.view-panel #universeCanvas,
body.view-panel #planetLabels,
body.view-panel .hud-corner,
body.view-panel .hud-title,
body.view-panel .hud-tooltip,
body.view-panel .hud-scanlines,
body.view-panel .hud-warp,
body.view-panel .hud-cursor { display: none !important; }

/*  Scroll: styles.css deja `html, body { overflow: hidden; height: 100% }`.
    Como no se puede tocar ese fichero, el elemento que scrollea en la vista
    panel es <body> (html mantiene overflow:hidden, así que NO hay propagación
    al viewport y body se convierte en su propio contenedor de scroll).
    Consecuencia para A2: `document.body.style.overflow='hidden'` SÍ bloquea el
    scroll, pero `window.scrollY` / `window.scrollTo` NO sirven: usar
    `el.scrollIntoView()` o `document.body.scrollTop`. */
body.view-panel {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    background: var(--pnl-bg);
    color: var(--pnl-ink);
    cursor: auto;                    /* se anula el cursor de cruz del HUD */
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    -webkit-text-size-adjust: 100%;
}

body.view-panel::-webkit-scrollbar { width: 10px; height: 10px; }
body.view-panel::-webkit-scrollbar-track { background: #000; }
body.view-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border: 3px solid #000;
    border-radius: 999px;
}
body.view-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }

/* Cursor normal dentro del panel (styles.css fuerza `cursor:none` en a/button). */
.pnl,
.pnl *,
body.view-panel .language-selector,
body.view-panel .language-selector * { cursor: auto; }

.pnl a,
.pnl button,
.pnl [role="button"],
.pnl summary,
body.view-panel .lang-btn,
.view-toggle { cursor: pointer; }

.pnl button:disabled { cursor: not-allowed; }

/* Selección y foco coherentes con el sistema. */
.pnl ::selection { background: var(--pnl-muted); color: #06090b; }

.pnl a:focus-visible,
.pnl button:focus-visible,
.pnl input:focus-visible,
.pnl [tabindex]:focus-visible,
.view-toggle:focus-visible {
    outline: 2px solid var(--pnl-ink);   /* WCAG 2.2 · 2.4.11 Focus Appearance */
    outline-offset: 3px;
}
body.view-planets .view-toggle:focus-visible { outline-color: #0a1a2e; }

/*  Utilidad de filtrado: los hijos del panel usan display:flex/grid, que gana
    a la regla de UA `[hidden]{display:none}`. Esto lo restaura para A2. */
.pnl [hidden] { display: none !important; }


/* ==========================================================================
   03. LIENZO DEL PANEL: raíz, fondo animado y retícula
   ========================================================================== */

/*  overflow:hidden evita cualquier scroll horizontal del <body> (criterio 10).
    IMPORTANTE 1: nunca poner transform/filter/backdrop-filter en `.pnl`, o los
    hijos `position:fixed` (barras, canvas, overlays) quedarían atrapados.
    IMPORTANTE 2: `.pnl` NO lleva z-index (queda en `auto`) para no crear un
    contexto de apilamiento; si lo creara, `.pnl-detail` (1500) nunca podría
    pintarse por encima de `.view-toggle` (1200) ni de `.language-selector`. */
.pnl {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: var(--pnl-bg);
    color: var(--pnl-ink);
    font-family: var(--pnl-display);
    font-weight: 300;
    font-size: var(--pnl-body-sz);
    line-height: 1.5;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Canvas de estelas de luz (lo anima panel.js). Siempre detrás de todo. */
.pnl-bg {
    position: fixed;
    inset: 0;
    z-index: var(--pnl-z-bg);
    display: block;
    width: 100%;
    height: 100%;
    background: var(--pnl-bg);
    pointer-events: none;
}

/* Retícula de hairlines + viñeta cinematográfica sobre el canvas. */
.pnl-grid-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--pnl-z-overlay);
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,
            var(--pnl-line-soft) 0, var(--pnl-line-soft) 1px,
            transparent 1px, transparent 25%),
        radial-gradient(130% 100% at 50% 38%,
            rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .55) 100%);
}

.pnl-main {
    position: relative;
    z-index: var(--pnl-z-main);
    display: block;
}

/* Píldora translúcida del lenguaje 8bit ("CLICK FOR SOUND"): utilidad. */
.pnl-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 7px 16px;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: var(--pnl-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--pnl-label);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pnl-ink);
}


/* ==========================================================================
   04. BARRA SUPERIOR + SELECTOR DE IDIOMA + BOTÓN DE VISTA
   Reparto del extremo derecho (de fuera hacia dentro):
       [hamburguesa]  [#viewToggle]      ← fila 1 (alto = --pnl-topbar)
                      [.language-selector] ← fila 2
   ========================================================================== */

.pnl-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--pnl-z-bars);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--pnl-topbar);
    padding: 0 var(--pnl-gutter);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;            /* la barra no captura el ratón... */
}
.pnl-top > * { pointer-events: auto; }   /* ...sólo sus controles */

.pnl-wordmark {
    font-family: var(--pnl-display);
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--pnl-ink);
    text-decoration: none;
    opacity: .95;
    transition: color .3s var(--pnl-ease), opacity .3s var(--pnl-ease);
}
.pnl-wordmark:hover { color: var(--pnl-muted); opacity: 1; }

/* Hamburguesa de dos hairlines (idéntica al patrón de 8bit). */
.pnl-menu-btn {
    position: relative;
    width: 44px;                     /* WCAG 2.2 · 2.5.8 Target Size */
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pnl-ink);
}
.pnl-menu-btn::before,
.pnl-menu-btn::after {
    content: '';
    position: absolute;
    left: 9px;
    width: 26px;
    height: 1px;
    background: currentColor;
    transition: transform .35s var(--pnl-ease), opacity .25s linear;
}
.pnl-menu-btn::before { top: calc(50% - 4px); }
.pnl-menu-btn::after  { top: calc(50% + 4px); }
.pnl-menu-btn:hover { color: var(--pnl-muted); }
.pnl-menu-btn.is-open::before,
.pnl-menu-btn[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
.pnl-menu-btn.is-open::after,
.pnl-menu-btn[aria-expanded="true"]::after  { transform: translateY(-4px) rotate(-45deg); }

/* --- Selector de idioma existente, reubicado SÓLO en la vista panel ------- */
body.view-panel .language-selector {
    top: calc(var(--pnl-topbar) + 6px);
    right: var(--pnl-gutter);
    z-index: var(--pnl-z-toggle);
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: var(--pnl-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
    clip-path: none;
}
body.view-panel .lang-btn {
    width: 22px;
    height: 22px;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}
body.view-panel .lang-btn:hover {
    border-color: var(--pnl-ink);
    box-shadow: none;
    transform: scale(1.08);
}
body.view-panel .lang-btn.active {
    border-color: var(--pnl-muted);
    box-shadow: 0 0 0 2px rgba(143, 170, 178, .25);
}

/* --- Botón de vista (vive fuera de #panelRoot: visible en AMBAS vistas) --- */
.view-toggle {
    position: fixed;
    z-index: var(--pnl-z-toggle);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;                /* WCAG 2.2 · 2.5.8 */
    padding: 9px 16px;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: var(--pnl-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--pnl-ink);
    font-family: var(--pnl-label);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
    transition: background .3s var(--pnl-ease), border-color .3s var(--pnl-ease),
                color .3s var(--pnl-ease), transform .3s var(--pnl-ease);
}
.view-toggle:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .34);
    transform: translateY(-1px);
}
.view-toggle__label { display: inline-block; }

/* Icono: anillo con satélite (destino = planetas). */
.view-toggle__icon {
    position: relative;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .9;
    transition: transform .5s var(--pnl-ease), border-radius .3s var(--pnl-ease);
}
.view-toggle__icon::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: currentColor;
}
.view-toggle:hover .view-toggle__icon { transform: rotate(140deg); }

/*  En la vista 3D el botón lleva AL PANEL y el fondo del sitio es blanco:
    icono de retícula + tinta oscura para que se lea (contraste AA). */
body.view-planets .view-toggle {
    top: 122px;                      /* bajo el HUD de la esquina superior derecha */
    right: 36px;                     /* alineado con .language-selector */
    background: rgba(255, 255, 255, .88);
    border-color: rgba(10, 26, 46, .26);
    color: #0a1a2e;
    box-shadow: 0 2px 16px rgba(0, 85, 122, .16);
}
body.view-planets .view-toggle:hover {
    background: #ffffff;
    border-color: rgba(10, 26, 46, .5);
}
body.view-planets .view-toggle__icon {
    border: 0;
    border-radius: 0;
    transform: none;
}
body.view-planets .view-toggle__icon::after {
    top: 1px;
    left: 1px;
    width: 4px;
    height: 4px;
    margin-left: 0;
    border-radius: 1px;
    box-shadow: 7px 0 0 currentColor, 0 7px 0 currentColor, 7px 7px 0 currentColor;
}
body.view-planets .view-toggle:hover .view-toggle__icon { transform: none; }

/* En la vista PANEL: dentro de la barra superior, a la izquierda de la hamburguesa. */
body.view-panel .view-toggle {
    top: calc((var(--pnl-topbar) - 34px) / 2);
    right: calc(var(--pnl-gutter) + 58px);
}

/*  Durante el intro (overlay blanco a pantalla completa, z-index 9999) el
    botón queda tapado: se oculta también para evitar destellos de foco. */
body.view-panel:has(.intro-overlay.is-active) .view-toggle,
body.view-planets:has(.intro-overlay.is-active) .view-toggle {
    opacity: 0;
    pointer-events: none;
}


/* ==========================================================================
   05. SECCIONES Y TIPOGRAFÍA DE DISPLAY
   Cada sección ocupa la pantalla y ancla su contenido ABAJO A LA IZQUIERDA.
   ========================================================================== */

.pnl-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;       /* anclaje inferior (clave del look 8bit) */
    align-items: flex-start;
    gap: clamp(18px, 2.2vw, 34px);
    min-height: 100vh;
    min-height: 100svh;
    padding:
        calc(var(--pnl-topbar) + var(--pnl-gutter))
        var(--pnl-gutter)
        calc(var(--pnl-bottombar) + var(--pnl-gutter));
    scroll-margin-top: 0;
}
.pnl-sec + .pnl-sec { border-top: 1px solid var(--pnl-line-soft); }

/* Titulares: peso 300, interlineado 0.95, tracking negativo (regla del §2). */
.pnl-display {
    margin: 0;
    font-family: var(--pnl-display);
    font-weight: 300;
    font-size: var(--pnl-h1);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--pnl-ink);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.pnl-sec--pillar .pnl-display,
.pnl-sec--index .pnl-display { font-size: var(--pnl-h2); }

/* Los dos tonos del titular: eyebrow en azul acero, resto en blanco puro. */
.pnl-eyebrow,
.pnl-line {
    display: block;
}
.pnl-eyebrow { color: var(--pnl-muted); }
.pnl-line    { color: var(--pnl-ink); }

.pnl-sub {
    max-width: 52ch;
    margin: 0;
    font-size: var(--pnl-sub-sz);
    font-weight: 300;
    line-height: 1.55;
    color: var(--pnl-dim);
}

/* Etiqueta genérica del sistema (§2: label + uppercase + tracking .18em). */
.pnl-label,
.pnl-card__idx,
.pnl-tile__idx,
.pnl-card__cta,
.pnl-tile__cta,
.pnl-rail-count,
.pnl-chip,
.pnl-bottom,
.pnl-foot,
.pnl-stat__label,
.pnl-detail__idx {
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.4;
}


/* ==========================================================================
   06. HERO
   ========================================================================== */

.pnl-sec--hero { padding-bottom: calc(var(--pnl-bottombar) + var(--pnl-gutter)); }

.pnl-sec--hero .pnl-display { max-width: 16ch; }
.pnl-sec--hero .pnl-sub     { max-width: 46ch; }

.pnl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 72px);
    width: 100%;
    padding-top: clamp(16px, 1.8vw, 26px);
    border-top: 1px solid var(--pnl-line-soft);
}

.pnl-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pnl-stat__num,
.pnl-stat > :first-child:not(:last-child) {
    font-family: var(--pnl-display);
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--pnl-ink);
    font-variant-numeric: tabular-nums;
}
.pnl-stat__label,
.pnl-stat > :last-child:not(:first-child) {
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pnl-faint);
}


/* ==========================================================================
   07. SECCIONES PILAR: RAIL CON SCROLL-SNAP + TARJETA
   ========================================================================== */

/* Las secciones pilar llevan más contenido: ritmo vertical más apretado. */
.pnl-sec--pillar { gap: clamp(14px, 1.7vw, 26px); }
.pnl-sec--pillar .pnl-sub { max-width: 48ch; }

/*  El rail sangra hasta el borde derecho de la ventana para que la última
    tarjeta se "salga" de pantalla, como en el carrusel de 8bit. */
.pnl-rail {
    display: flex;
    gap: clamp(12px, 1.4vw, 22px);
    width: calc(100% + var(--pnl-gutter));
    margin-right: calc(var(--pnl-gutter) * -1);
    padding: 2px var(--pnl-gutter) 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.pnl-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pnl-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/*  Durante el auto-desplazamiento por proximidad al borde el snap debe
    ceder: con `x mandatory` el navegador devuelve el scroll al punto
    encajado y los incrementos pequenos no llegan a moverse. */
.pnl-rail.is-autoscroll { scroll-snap-type: none; }
.pnl-rail:focus-visible { outline: 2px solid var(--pnl-ink); outline-offset: 6px; }

/* Navegación del rail: prev / contador / next */
.pnl-rail-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pnl-prev,
.pnl-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: transparent;
    color: var(--pnl-ink);
    font-family: var(--pnl-display);
    font-size: 15px;
    line-height: 1;
    transition: border-color .3s var(--pnl-ease), background .3s var(--pnl-ease),
                color .3s var(--pnl-ease), transform .3s var(--pnl-ease);
}
.pnl-prev:hover,
.pnl-next:hover {
    border-color: var(--pnl-muted);
    background: var(--pnl-pill);
}
.pnl-prev:active,
.pnl-next:active { transform: scale(.94); }
.pnl-prev:disabled,
.pnl-next:disabled { opacity: .3; }
/* Glifo de reserva si A2 no inyecta texto dentro del botón. */
.pnl-prev:empty::after { content: '\2190'; }
.pnl-next:empty::after { content: '\2192'; }

.pnl-rail-count {
    color: var(--pnl-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Tarjeta / baldosa (anatomía compartida, §3) -------------------------- */
.pnl-card,
.pnl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pnl-line-soft);
    border-bottom-color: var(--pnl-line);
    border-radius: var(--pnl-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    color: inherit;
    text-decoration: none;
    transition: border-color .45s var(--pnl-ease), background .45s var(--pnl-ease),
                box-shadow .45s var(--pnl-ease);
}
.pnl-card {
    flex: 0 0 var(--pnl-card-w);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.pnl-card:hover,
.pnl-tile:hover,
.pnl-card:focus-visible,
.pnl-tile:focus-visible {
    border-color: var(--pnl-line);
    border-bottom-color: var(--pnl-muted);   /* el hairline inferior se ilumina */
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.pnl-card__media,
.pnl-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;           /* reserva de espacio: CLS = 0 */
    background: var(--pnl-bg-soft);
}
.pnl-card__media img,
.pnl-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transform: scale(1.001);
    transition: filter .6s var(--pnl-ease), transform .9s var(--pnl-ease);
}
.pnl-card:hover .pnl-card__media img,
.pnl-card:focus-visible .pnl-card__media img,
.pnl-tile:hover .pnl-tile__media img,
.pnl-tile:focus-visible .pnl-tile__media img,
.pnl-tile:hover .pnl-card__media img,
.pnl-tile:focus-visible .pnl-card__media img {
    filter: grayscale(0) contrast(1.02);
    transform: scale(1.04);
}
/* Degradado inferior para que el texto respire sobre la imagen. */
.pnl-card__media::after,
.pnl-tile__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    pointer-events: none;
}

.pnl-card__body,
.pnl-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    padding: clamp(14px, 1.2vw, 20px);
}

.pnl-card__idx,
.pnl-tile__idx {
    color: var(--pnl-faint);
    font-variant-numeric: tabular-nums;
}

.pnl-card__title,
.pnl-tile__title {
    font-family: var(--pnl-display);
    font-size: clamp(16px, 1.35vw, 21px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--pnl-ink);
}

.pnl-card__desc,
.pnl-tile__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;            /* baldosas del índice: 3 líneas */
    overflow: hidden;
    font-size: clamp(12.5px, .92vw, 14px);
    line-height: 1.5;
    color: var(--pnl-dim);
}
/* En el rail la tarjeta es más compacta para que la sección quepa en pantalla. */
.pnl-card .pnl-card__desc { -webkit-line-clamp: 2; }

.pnl-card__cta,
.pnl-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    color: var(--pnl-muted);
    transition: color .3s var(--pnl-ease);
}
.pnl-card__cta::after,
.pnl-tile__cta::after {
    content: '\2192';
    display: inline-block;
    transition: transform .35s var(--pnl-ease);
}
.pnl-card:hover .pnl-card__cta,
.pnl-tile:hover .pnl-tile__cta,
.pnl-tile:hover .pnl-card__cta { color: var(--pnl-ink); }
.pnl-card:hover .pnl-card__cta::after,
.pnl-tile:hover .pnl-tile__cta::after,
.pnl-tile:hover .pnl-card__cta::after { transform: translateX(5px); }


/* ==========================================================================
   08. ÍNDICE: buscador, chips y grid de baldosas
   ========================================================================== */

.pnl-sec--index {
    justify-content: flex-start;     /* aquí el contenido crece hacia abajo */
    padding-top: calc(var(--pnl-topbar) + clamp(48px, 7vw, 120px));
    padding-bottom: calc(var(--pnl-bottombar) + clamp(40px, 5vw, 90px));
}

.pnl-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(14px, 1.6vw, 28px);
    width: 100%;
    padding-top: clamp(6px, 1vw, 14px);
}

.pnl-search {
    flex: 1 1 260px;
    max-width: 420px;
    min-height: 44px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--pnl-line);
    border-radius: 0;
    background: transparent;
    color: var(--pnl-ink);
    font-family: var(--pnl-label);
    font-size: calc(var(--pnl-label-sz) + 2px);
    letter-spacing: .14em;
    text-transform: uppercase;
    -webkit-appearance: none;
    appearance: none;
}
.pnl-search::placeholder { color: var(--pnl-faint); }
.pnl-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.pnl-search:hover { border-bottom-color: rgba(255, 255, 255, .26); }
.pnl-search:focus {
    outline: none;
    border-bottom-color: var(--pnl-muted);
    box-shadow: 0 2px 0 0 var(--pnl-muted);   /* foco visible de 3px (WCAG 2.4.11) */
}

.pnl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pnl-chip {
    min-height: 34px;
    padding: 9px 16px;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: transparent;
    color: var(--pnl-dim);
    transition: color .28s var(--pnl-ease), border-color .28s var(--pnl-ease),
                background .28s var(--pnl-ease);
}
.pnl-chip:hover { color: var(--pnl-ink); border-color: rgba(255, 255, 255, .32); }
.pnl-chip[aria-pressed="true"],
.pnl-chip.is-active {
    background: var(--pnl-cta-bg);
    border-color: var(--pnl-cta-bg);
    color: var(--pnl-cta-ink);
}

.pnl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pnl-tile-min), 1fr));
    gap: clamp(12px, 1.4vw, 22px);
    width: 100%;
}

/* Mensaje pnlNoResults (A2: usar .pnl-empty; .pnl-no-results también vale). */
.pnl-empty,
.pnl-no-results {
    grid-column: 1 / -1;
    padding: clamp(36px, 6vw, 80px) 0;
    color: var(--pnl-faint);
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid var(--pnl-line-soft);
}


/* ==========================================================================
   09. PIE DEL PANEL, BARRA INFERIOR FIJA Y NAV SEO
   ========================================================================== */

.pnl-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(48px, 7vw, 110px) var(--pnl-gutter) clamp(30px, 3vw, 52px);
    border-top: 1px solid var(--pnl-line-soft);
    color: var(--pnl-dim);
}
.pnl-foot a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--pnl-ease), border-color .3s var(--pnl-ease);
}
.pnl-foot a:hover { color: var(--pnl-ink); border-bottom-color: var(--pnl-muted); }

/* Barra inferior fija: aviso legal a la izquierda, "scroll" a la derecha. */
.pnl-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--pnl-z-bars);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--pnl-bottombar);
    padding: 0 var(--pnl-gutter);
    background: linear-gradient(0deg,
        rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .40) 62%, rgba(0, 0, 0, 0) 100%);
    color: var(--pnl-dim);
    pointer-events: none;
}
.pnl-bottom > * { pointer-events: auto; }
.pnl-bottom__left,
.pnl-bottom__right {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 22px);
    min-width: 0;
}
.pnl-bottom__left { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-bottom a {
    color: inherit;
    text-decoration: none;
    transition: color .3s var(--pnl-ease);
}
.pnl-bottom a:hover { color: var(--pnl-ink); }
.pnl-bottom__scroll {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pnl-dim);
}
.pnl-bottom__scroll::after {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    animation: pnl-scrollcue 2.4s var(--pnl-ease) infinite;
}
@keyframes pnl-scrollcue {
    0%, 100% { transform: translateX(0); opacity: .6; }
    50%      { transform: translateX(7px); opacity: 1; }
}

/*  #seoNav (styles.css) está fijo abajo-centro y chocaría con .pnl-bottom.
    En la vista panel se devuelve al flujo: queda como fila de enlaces reales
    al final de la página (mejor para rastreo que ocultarlo). */
body.view-panel #seoNav {
    position: static;
    z-index: auto;
    transform: none;
    display: block;
    padding: clamp(20px, 2.5vw, 34px) var(--pnl-gutter) calc(var(--pnl-bottombar) + 22px);
    border-top: 1px solid var(--pnl-line-soft);
    background: var(--pnl-bg);
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    line-height: 2.4;
    text-align: left;
}
body.view-panel #seoNav a { color: var(--pnl-faint); }
body.view-panel #seoNav a:hover { color: var(--pnl-ink); }


/* ==========================================================================
   10. OVERLAY DE MENÚ (.pnl-menu)
   Abrir/cerrar: A2 alterna `.is-open` (también se acepta aria-hidden="false").
   ========================================================================== */

.pnl-menu {
    position: fixed;
    inset: 0;
    z-index: var(--pnl-z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 3vw, 40px);
    padding:
        calc(var(--pnl-topbar) + var(--pnl-gutter))
        var(--pnl-gutter)
        calc(var(--pnl-bottombar) + var(--pnl-gutter));
    background: rgba(0, 0, 0, .93);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s var(--pnl-ease), visibility .45s var(--pnl-ease);
}
.pnl-menu.is-open,
.pnl-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pnl-menu__list {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, .6vw, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pnl-menu a,
.pnl-menu__link {
    display: block;
    padding: .1em 0;
    font-family: var(--pnl-display);
    font-size: clamp(30px, 5vw, 68px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--pnl-dim);
    text-decoration: none;
    opacity: 0;
    transform: translateY(18px);
    transition: color .3s var(--pnl-ease), opacity .5s var(--pnl-ease),
                transform .5s var(--pnl-ease);
}
.pnl-menu.is-open a,
.pnl-menu.is-open .pnl-menu__link,
.pnl-menu[aria-hidden="false"] a,
.pnl-menu[aria-hidden="false"] .pnl-menu__link {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 55ms);
}
.pnl-menu a:hover,
.pnl-menu__link:hover,
.pnl-menu a[aria-current="true"] { color: var(--pnl-ink); }

.pnl-menu__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 28px);
    color: var(--pnl-faint);
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Botón de cierre compartido por el menú y la ficha. */
.pnl-menu__close,
.pnl-detail__close {
    position: absolute;
    top: clamp(12px, 1.6vw, 22px);
    right: clamp(12px, 1.6vw, 22px);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pnl-line);
    border-radius: 999px;
    background: var(--pnl-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--pnl-ink);
    font-size: 0;
    transition: border-color .3s var(--pnl-ease), background .3s var(--pnl-ease),
                transform .3s var(--pnl-ease);
}
.pnl-menu__close::before,
.pnl-menu__close::after,
.pnl-detail__close::before,
.pnl-detail__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1px;
    margin: -.5px 0 0 -7.5px;
    background: currentColor;
}
.pnl-menu__close::before,
.pnl-detail__close::before { transform: rotate(45deg); }
.pnl-menu__close::after,
.pnl-detail__close::after  { transform: rotate(-45deg); }
.pnl-menu__close:hover,
.pnl-detail__close:hover {
    border-color: var(--pnl-muted);
    background: rgba(255, 255, 255, .16);
    transform: rotate(90deg);
}


/* ==========================================================================
   11. FICHA DE PROYECTO (.pnl-detail)
   Nomenclatura para A2:
     .pnl-detail__panel  contenedor (role="dialog")
     .pnl-detail__close  botón X            .pnl-detail__media  <span> con <img>
     .pnl-detail__body   columna de texto   .pnl-detail__idx    "020"
     .pnl-detail__title  título             .pnl-detail__desc   descripción
     .pnl-detail__cta    CTA blanco (pnlVisit)
   Abrir/cerrar: alternar `.is-open` en .pnl-detail.
   ========================================================================== */

.pnl-detail {
    position: fixed;
    inset: 0;
    z-index: var(--pnl-z-detail);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 48px);
    background: rgba(0, 0, 0, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--pnl-ease), visibility .4s var(--pnl-ease);
}
.pnl-detail.is-open,
.pnl-detail[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pnl-detail__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: min(1040px, 100%);
    max-height: min(88svh, 880px);
    overflow: hidden auto;
    border: 1px solid var(--pnl-line);
    border-radius: var(--pnl-radius);
    background: linear-gradient(180deg, var(--pnl-bg-soft), var(--pnl-bg));
    box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
    transform: translateY(18px) scale(.985);
    transition: transform .5s var(--pnl-ease);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.pnl-detail.is-open .pnl-detail__panel,
.pnl-detail[aria-hidden="false"] .pnl-detail__panel { transform: none; }

.pnl-detail__media {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 260px;
    background: var(--pnl-bg-soft);
}
.pnl-detail__media img,
.pnl-detail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pnl-detail__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.4vw, 20px);
    padding: clamp(24px, 3vw, 48px);
}
.pnl-detail__idx { color: var(--pnl-faint); font-variant-numeric: tabular-nums; }
.pnl-detail__title {
    margin: 0;
    font-family: var(--pnl-display);
    font-size: clamp(24px, 2.6vw, 40px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--pnl-ink);
}
.pnl-detail__desc {
    margin: 0;
    max-width: 52ch;
    font-size: var(--pnl-sub-sz);
    line-height: 1.6;
    color: var(--pnl-dim);
}

/* CTA blanco del §1: #fff / #1a1a1a / radius 8 / padding 24-32. */
.pnl-cta,
.pnl-detail__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 24px 32px;
    border: 0;
    border-radius: var(--pnl-radius);
    background: var(--pnl-cta-bg);
    color: var(--pnl-cta-ink);
    font-family: var(--pnl-label);
    font-size: var(--pnl-label-sz);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .35s var(--pnl-ease), box-shadow .35s var(--pnl-ease),
                background .35s var(--pnl-ease);
}
.pnl-cta::after,
.pnl-detail__cta::after {
    content: '\2192';
    transition: transform .35s var(--pnl-ease);
}
.pnl-cta:hover,
.pnl-detail__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(255, 255, 255, .18);
}
.pnl-cta:hover::after,
.pnl-detail__cta:hover::after { transform: translateX(5px); }
.pnl-cta:focus-visible,
.pnl-detail__cta:focus-visible { outline-color: var(--pnl-muted); }


/* ==========================================================================
   12. ESTADOS DE REVELADO
   A2 añade `.is-in` a cada `.pnl-sec` (IntersectionObserver) y `--i` (índice)
   a los hijos para escalonar el retardo.
   ========================================================================== */

.pnl-sec > * {
    opacity: 0;
    transform: translateY(clamp(18px, 2vw, 34px));
    transition: opacity var(--pnl-dur) var(--pnl-ease),
                transform var(--pnl-dur) var(--pnl-ease);
    transition-delay: calc(var(--i, 0) * var(--pnl-step));
    will-change: opacity, transform;
}
.pnl-sec.is-in > * {
    opacity: 1;
    transform: none;
}

/* Escalonado interno de tarjetas y baldosas (también con --i). */
.pnl-rail .pnl-card,
.pnl-grid .pnl-tile {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--pnl-ease), transform .6s var(--pnl-ease),
                border-color .45s var(--pnl-ease), background .45s var(--pnl-ease),
                box-shadow .45s var(--pnl-ease);
    transition-delay: calc(var(--i, 0) * 55ms);
}
.pnl-sec.is-in .pnl-rail .pnl-card,
.pnl-sec.is-in .pnl-grid .pnl-tile {
    opacity: 1;
    transform: none;
}

/* El pie nunca depende de JS: siempre visible. */
.pnl-foot { opacity: 1; transform: none; }


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    /* La ficha pasa a una columna: media arriba (16:9) y texto debajo. */
    .pnl-detail__panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pnl-detail__media { min-height: 0; aspect-ratio: 16 / 9; }
    .pnl-sec--hero .pnl-display { max-width: 20ch; }
}

@media (max-width: 768px) {
    .pnl-sec { gap: clamp(16px, 3.4vw, 26px); }
    .pnl-sub { max-width: 42ch; }
    .pnl-stats { gap: 22px 34px; }
    .pnl-menu-btn { margin-right: -8px; }
    .pnl-bottom { justify-content: space-between; }
    .pnl-bottom__left { max-width: 46%; }
    .pnl-detail__body { padding: 22px 20px 26px; }
    .pnl-cta,
    .pnl-detail__cta { padding: 18px 24px; width: 100%; justify-content: space-between; }
    body.view-planets .view-toggle { top: 100px; right: 14px; }
}

@media (max-width: 560px) {
    /* Una tarjeta por pantalla en el rail (390px de ancho de referencia). */
    .pnl-card { flex: 0 0 calc(100vw - var(--pnl-gutter) * 2); }
    .pnl-sec--hero .pnl-display,
    .pnl-sec--pillar .pnl-display,
    .pnl-sec--index .pnl-display { max-width: none; }
    .pnl-tools { gap: 14px; }
    .pnl-search { flex: 1 1 100%; max-width: none; }
    .pnl-grid-overlay {
        background-image:
            repeating-linear-gradient(to right,
                var(--pnl-line-soft) 0, var(--pnl-line-soft) 1px,
                transparent 1px, transparent 50%),
            radial-gradient(150% 100% at 50% 40%,
                rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .6) 100%);
    }
    .pnl-menu { justify-content: flex-end; }
    /* La ficha se convierte en hoja a pantalla completa. */
    .pnl-detail { padding: 0; align-items: stretch; }
    .pnl-detail__panel {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        max-height: 100svh;
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 430px) {
    .view-toggle { gap: 8px; padding: 9px 12px; letter-spacing: .14em; }
    body.view-panel .view-toggle { right: calc(var(--pnl-gutter) + 46px); }
    .pnl-menu-btn { width: 40px; }
    .pnl-menu-btn::before,
    .pnl-menu-btn::after { left: 8px; width: 24px; }
    .pnl-bottom { gap: 10px; padding: 0 var(--pnl-gutter); font-size: 9px; }
    .pnl-bottom__left { max-width: 40%; }
    .pnl-foot { gap: 12px; }
}

/* Pantallas muy anchas: se limita el ancho de lectura, no el de los rails. */
@media (min-width: 1800px) {
    .pnl-sub { max-width: 56ch; }
    .pnl-sec--hero .pnl-display { max-width: 15ch; }
}


/* ==========================================================================
   14. PREFERS-REDUCED-MOTION
   Sin transiciones ni transformaciones de entrada: todo aparece ya colocado.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.view-panel { scroll-behavior: auto; }

    .pnl,
    .pnl *,
    .pnl *::before,
    .pnl *::after,
    .view-toggle,
    .view-toggle *,
    .view-toggle::before,
    .view-toggle::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .pnl-sec > *,
    .pnl-rail .pnl-card,
    .pnl-grid .pnl-tile,
    .pnl-menu a,
    .pnl-menu__link,
    .pnl-detail__panel {
        opacity: 1 !important;
        transform: none !important;
    }

    .pnl-card:hover .pnl-card__media img,
    .pnl-tile:hover .pnl-tile__media img,
    .pnl-tile:hover .pnl-card__media img,
    .view-toggle:hover .view-toggle__icon,
    .pnl-menu__close:hover,
    .pnl-detail__close:hover { transform: none !important; }

    .pnl-rail { scroll-behavior: auto; }
    .pnl-bottom__scroll::after { animation: none; }
}

/* ==========================================================================
   PATCH · Botón de vista segmentado "Web / Galaxy"
   Sustituye al par icono+etiqueta: muestra siempre los dos destinos y resalta
   el que está en pantalla. Las dos palabras son iguales en los 4 idiomas, así
   que el botón no pasa por setLanguage().
   ========================================================================== */

.view-toggle { gap: 7px; padding: 9px 15px; }

.view-toggle__opt {
    display: inline-block;
    color: var(--pnl-faint);
    transition: color .3s var(--pnl-ease), opacity .3s var(--pnl-ease);
}
.view-toggle__opt.is-active { color: var(--pnl-ink); }

.view-toggle__sep {
    display: inline-block;
    color: rgba(255, 255, 255, .26);
    transform: translateY(-.5px);
}

/*  En la vista GALAXY el botón es una píldora clara sobre el universo oscuro
    (regla heredada de la sección 05), así que la tinta se invierte. */
body.view-planets .view-toggle__opt { color: rgba(10, 26, 46, .42); }
body.view-planets .view-toggle__opt.is-active { color: #0a1a2e; }
body.view-planets .view-toggle__sep { color: rgba(10, 26, 46, .3); }

/* Sin animación de color para quien la desactiva. */
@media (prefers-reduced-motion: reduce) {
    .view-toggle__opt { transition: none; }
}

/* ==========================================================================
   PATCH · Rail: señal de auto-desplazamiento por proximidad al borde
   panel.js marca el rail con .is-edge-left / .is-edge-right mientras el ratón
   está en la zona sensible; el cursor lo hace evidente también sobre la
   tarjeta, que es lo que hay bajo el puntero casi siempre.
   ========================================================================== */

.pnl-rail.is-edge-right,
.pnl-rail.is-edge-right .pnl-card { cursor: e-resize; }

.pnl-rail.is-edge-left,
.pnl-rail.is-edge-left .pnl-card { cursor: w-resize; }