/* ================================================================
   base.css — FUNDACIÓN COMPARTIDA por todas las páginas
   ----------------------------------------------------------------
   Única fuente de verdad de: reset, tokens (:root), html/body,
   scrollbar y accesibilidad. La enlazan LAS 5 páginas.
   Cambiar un color aquí lo cambia en toda la app.
   ================================================================ */

/* --- Transición suave entre páginas: cross-fade nativo (Chromium 126+, y el
   WebView de la futura app). Degradación elegante: los navegadores sin soporte
   simplemente no transicionan, sin romper nada. --- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; }

/* --- Confeti de celebración (lo lanza js/confetti.js) --- */
.confetti-host { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece {
    position: absolute;
    top: -14px;
    border-radius: 2px;
    animation-name: confettiFall;
    animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1);
    animation-fill-mode: forwards;
}
@keyframes confettiFall {
    0%   { transform: translate(0, -14px) rotate(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: 0; }
}

/* --- Estrellas del resumen de lección: rebote escalonado al ganarlas --- */
#summary-stars .star--filled { animation: starPop 0.5s cubic-bezier(0.2, 1.5, 0.5, 1) both; }
#summary-stars .star--filled:nth-child(1) { animation-delay: 0.12s; }
#summary-stars .star--filled:nth-child(2) { animation-delay: 0.28s; }
#summary-stars .star--filled:nth-child(3) { animation-delay: 0.44s; }
@keyframes starPop {
    0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* --- Reset --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Tokens globales --- */
:root {
    /* === Fondo "Aqua Mist" (gradiente global de la app) === */
    --bg-gradient-start:     #E8F7F7;
    --bg-gradient-mid:       #C8EAE9;
    --bg-gradient-end:       #9FD6D2;

    /* === MARCA compartida — acento morado premium ===
       Úsalo en TODAS las pantallas para que nunca se desincronice. */
    --brand-purple:          #8A2BE2;
    --brand-purple-dark:     #6B1FB8;
    --brand-purple-light:    #B85EFF;
    --brand-purple-soft:     #F3E8FE;
    --brand-purple-glow:     rgba(138, 43, 226, 0.30);

    /* === Fondo claro plano (light mode de las pantallas internas) === */
    --light-bg:              #F8FAFC;

    /* === Superficies oscuras (tarjetas del home + tarjetas premium) === */
    --dark-bg-color:         #1a1d23;
    --surface-color:         #24272f;
    --card-bg-color:         #1c1f26;
    --card-bg-hover-color:   #262a33;

    /* === Tipografía === */
    --text-color:            #f0f0f0;   /* sobre superficies oscuras */
    --text-muted-color:      #a0a7b4;
    --text-on-light:         #2D3748;   /* gris carbón sobre fondos claros */
    --text-on-light-soft:    #718096;

    /* === Bordes === */
    --border-color:          #2a2f38;
    --border-soft-color:     #1f232a;

    /* === Colores por tarjeta del home === */
    --feature-abc-color:           #FF5A5F;
    --feature-books-color:         #2D7DF6;
    --feature-words-color:         #ffd447;
    --feature-exercises-color:     #a855f7;
    --feature-new-exercises-color: #4ade80;

    --feature-abc-card-bg:                 #2E1012;
    --feature-abc-card-bg-hover:           #3D161A;
    --feature-books-card-bg:               #0a1d3a;
    --feature-books-card-bg-hover:         #102747;
    --feature-words-card-bg:               #2d260a;
    --feature-words-card-bg-hover:         #3a3210;
    --feature-exercises-card-bg:           #1d143a;
    --feature-exercises-card-bg-hover:     #241a47;
    --feature-new-exercises-card-bg:       #0f2a1a;
    --feature-new-exercises-card-bg-hover: #143a22;

    /* === Sombras (tinte slate, suaves sobre fondo claro) === */
    --shadow-sm: 0 1px 2px  rgba(15, 23, 42, 0.06),
                 0 1px 3px  rgba(30, 41, 59, 0.10);
    --shadow-md: 0 2px 4px  rgba(15, 23, 42, 0.08),
                 0 8px 20px rgba(30, 41, 59, 0.14);
    --shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.10),
                 0 18px 40px rgba(30, 41, 59, 0.18);

    /* === Header glassmorphism === */
    --header-bg-color:  rgba(18, 22, 30, 0.55);
    --header-gradient:  linear-gradient(to right,
                            rgba(79, 140, 255, 0.18) 0%,
                            rgba(0, 245, 255, 0.10) 40%,
                            transparent 80%);
    --header-border:    rgba(255, 255, 255, 0.08);
    --header-blur:      saturate(180%) blur(24px);
    --shadow-header:    0 4px 24px rgba(0, 0, 0, 0.35),
                        0 1px 0   rgba(255, 255, 255, 0.06) inset;
    --title-shadow:     0 1px 1px rgba(0, 0, 0, 0.35);
    --icon-btn-hover-bg: rgba(255, 255, 255, 0.06);

    /* === Scrollbar === */
    --scrollbar-thumb:        rgba(255, 255, 255, 0.16);
    --scrollbar-thumb-hover:  rgba(255, 255, 255, 0.32);
    --scrollbar-track:        transparent;

    /* === Métricas === */
    --header-height:     60px;
    --transition-base:   0.3s ease-out;
    --radius-card:       18px;
    --radius-icon:       14px;
    --radius-control:    10px;
    --radius-icon-btn:   12px;
    --side-menu-width:   280px;
}

/* --- html / body --- */
html, body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}

html {
    background:
        linear-gradient(170deg,
            var(--bg-gradient-start) 0%,
            var(--bg-gradient-mid)   55%,
            var(--bg-gradient-end)   100%);
    background-attachment: fixed;
    background-color: var(--bg-gradient-end);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color);
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

/* --- Scrollbar --- */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }

/* --- Accesibilidad: reducción de movimiento --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --- Mascotas "vivas": respiración muy sutil ---
   Vaivén de 3px, lento, con retardos distintos para que no respiren a la vez.
   Usa `translate` (no `transform`) para componerse con hovers existentes.
   js/anim-pause.js las pausa al salir de pantalla (batería). */
@keyframes pa-breathe {
    from { translate: 0 0; }
    to   { translate: 0 -3px; }
}
.level-card__mascot,
.node__freddye img,
.vnode__trufa img {
    animation: pa-breathe 2.6s ease-in-out infinite alternate;
}
.node__freddye img { animation-delay: 0.9s; }
.vnode__trufa img  { animation-delay: 0.5s; }

/* --- Transiciones entre páginas (View Transitions API) ---
   Al navegar entre páginas, el navegador funde la vieja con la nueva en vez
   del "salto en blanco". Chrome/Edge/Safari modernos; en el resto simplemente
   no pasa nada (navegación normal). Sin librerías. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: pa-page-out 200ms ease both;
}
::view-transition-new(root) {
    animation: pa-page-in 240ms ease both;
}
@keyframes pa-page-out {
    to { opacity: 0; }
}
@keyframes pa-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Hero-morph: la tarjeta tocada en el home (view-transition-name: active-card,
   lo pone js/core.js) viaja y se transforma en el <h1> de la página destino. */
::view-transition-group(active-card) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
}
::view-transition-old(active-card),
::view-transition-new(active-card) { animation-duration: 0.38s; }

/* Ola de color: círculo del color de la sección que inunda la pantalla al tocar
   una tarjeta (js/core.js lo crea donde hiciste clic). Solo transform+opacity. */
.pa-ripple {
    position: fixed;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;             /* centrado en el punto del toque */
    border-radius: 50%;
    transform: scale(0);
    opacity: 0.45;
    pointer-events: none;
    z-index: 9998;
    will-change: transform, opacity;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.4, 1), opacity 0.55s ease;
}
.pa-ripple--go {
    transform: scale(140);               /* baratísimo: escala por GPU, sin layout */
    opacity: 0.22;
}

/* Cascada de entrada: los bloques de la página destino (nav → título →
   contenido) aparecen escalonados. js/core.js pone .pa-cascade al contenedor.
   Con perspectiva: los bloques vienen desde ATRÁS, inclinados, y se enderezan
   al aterrizar (coreografía 3D). */
.pa-cascade {
    perspective: 1000px;
}
.pa-cascade > * {
    animation: paCascadeIn 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.pa-cascade > *:nth-child(1) { animation-delay: 0.04s; }
.pa-cascade > *:nth-child(2) { animation-delay: 0.10s; }
.pa-cascade > *:nth-child(3) { animation-delay: 0.16s; }
.pa-cascade > *:nth-child(4) { animation-delay: 0.22s; }
.pa-cascade > *:nth-child(5) { animation-delay: 0.28s; }
.pa-cascade > *:nth-child(n+6) { animation-delay: 0.34s; }
@keyframes paCascadeIn {
    from { opacity: 0; transform: translateY(18px) rotateX(9deg); }
    to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Accesibilidad: sin animación de página si el usuario pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(active-card),
    ::view-transition-old(active-card),
    ::view-transition-new(active-card) { animation: none; }
    .pa-ripple { display: none; }
    .pa-cascade > * { animation: none; }
}

/* --- Rendimiento: animaciones pausadas fuera de pantalla ---
   js/anim-pause.js pone esta clase a los elementos con animación infinita
   cuando salen del viewport (ahorra CPU/batería en móvil). */
.anim-paused,
.anim-paused::before,
.anim-paused::after,
.anim-paused *,
.anim-paused *::before,
.anim-paused *::after {
    animation-play-state: paused !important;
}

/* --- Rendimiento móvil: fuera el desenfoque en pantallas pequeñas ---
   `backdrop-filter: blur()` es de lo MÁS caro para la GPU en móviles de
   gama media/baja (causa tirones). Los fondos que lo usan ya son
   semitransparentes, así que sin blur siguen legibles. En PC se mantiene. */
@media (max-width: 767px) {
    *, *::before, *::after {
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
}

/* --- Modo ahorro: batería ≤15% sin cargar (js/battery-saver.js) ---
   Fuera animaciones, transiciones, desenfoques y sombras con brillo: la app
   queda quieta pero 100% funcional, y no remata la batería del alumno. */
body.pa-battery-saver *,
body.pa-battery-saver *::before,
body.pa-battery-saver *::after {
    animation: none !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}

/* ================================================================
   Feedback físico COMPARTIDO (accent + exercises):
   · .pa-flash → destello a pantalla completa (verde acierto / rojo fallo).
   · body.pa-danger → ÚLTIMA VIDA: bordes en rojo latiendo (idea de Axel).
   Solo opacity/box-shadow en elementos fijos — barato para la GPU.
   ================================================================ */
.pa-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
}
.pa-flash--ok  { background: rgba(34, 197, 94, 0.22);  animation: paFlash 0.4s ease-out both; }
.pa-flash--bad { background: rgba(220, 38, 38, 0.20);  animation: paFlash 0.4s ease-out both; }
@keyframes paFlash {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}

body.pa-danger::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    box-shadow: inset 0 0 70px 10px rgba(220, 38, 38, 0.30),
                inset 0 0 26px 4px  rgba(255, 90, 90, 0.20);
    animation: paDangerPulse 1.1s ease-in-out infinite alternate;
}
@keyframes paDangerPulse {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-flash--ok, .pa-flash--bad { animation: none; opacity: 0; }
    body.pa-danger::after { animation: none; opacity: 0.7; }
}

/* ================================================================
   GRANO DE PELÍCULA (idea de Luna): micro-ruido sobre toda la app
   al 3.5% de opacidad. El ojo percibe "material físico", no plástico.
   Es un SVG con ruido en data-URI: cero peticiones, se pinta una vez.
   ================================================================ */
html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9997;               /* sobre la UI, bajo el confeti (9999) */
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   TARJETA HOLOGRÁFICA (idea de Luna): al clavar un nivel PERFECTO
   (3 estrellas), la tarjeta de resumen gana un reflejo arcoíris que
   se desliza según inclinas el móvil (giroscopio) o mueves el ratón.
   js/holo.js escribe --holo-x / --holo-y; aquí solo se pinta.
   ================================================================ */
:root { --holo-x: 50%; --holo-y: 40%; }
.holo-on { position: relative; overflow: hidden; }
.holo-on::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--holo-x) var(--holo-y),
            rgba(255, 255, 255, 0.5) 0%, transparent 32%),
        linear-gradient(115deg,
            transparent 22%,
            rgba(255, 0, 132, 0.20) 38%,
            rgba(255, 231, 0, 0.18) 46%,
            rgba(0, 255, 163, 0.18) 54%,
            rgba(0, 174, 255, 0.20) 62%,
            transparent 78%);
    background-size: 170% 170%, 220% 100%;
    background-position:
        var(--holo-x) var(--holo-y),
        calc(var(--holo-x) * 1.6) 0;
    mix-blend-mode: overlay;
    opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
    .holo-on::after { background-position: 50% 40%, 50% 0; }
}

/* =============================================================================
   ODÓMETRO 🎰 (js/odometer.js) — dígitos que giran y frenan con rebote
   ========================================================================== */
.pa-odo {
    display: inline-flex;
    overflow: hidden;
    height: 1em;
    line-height: 1;
    vertical-align: baseline;
}
.pa-odo__col,
.pa-odo__ch {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.pa-odo__col span,
.pa-odo__ch {
    display: block;
    height: 1em;
}
.pa-odo__col {
    /* Curva con sobreimpulso: pasa de largo un pelín y vuelve = frenada de tragaperras */
    transition: transform 1.15s cubic-bezier(0.22, 1.18, 0.36, 1);
    will-change: transform;
}
/* Valor real para lectores de pantalla (visualmente oculto) */
.pa-odo__sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
body.pa-battery-saver .pa-odo__col { transition: none; }

/* =============================================================================
   ESQUELETO BRILLANTE ✨ — siluetas de carga con brillo que las recorre
   (sustituye a los "Cargando…"; el JS las pisa al llegar el contenido real)
   ========================================================================== */
.pa-skel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.13);
}
.pa-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    animation: pa-skel-shine 1.4s ease-in-out infinite;
}
@keyframes pa-skel-shine {
    100% { transform: translateX(100%); }
}
.pa-skel--chip { display: inline-block; height: 2.3em; border-radius: 999px; }
.pa-skel--card { display: block; height: 116px; margin-bottom: 14px; border-radius: 18px; }
.pa-skel--tile { display: inline-block; width: 52px; height: 52px; margin: 4px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .pa-skel::after { animation: none; } }
body.pa-battery-saver .pa-skel::after { animation: none; }

/* =============================================================================
   HUELLITAS 🐾 (js/paw-trail.js) — pisadas que se desvanecen al arrastrar
   ========================================================================== */
.pa-paw {
    position: absolute;
    width: 17px;
    height: 17px;
    margin: -8px 0 0 -8px;
    color: currentColor;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transform: rotate(var(--paw-rot, 0deg));
    animation: pa-paw-fade 1.05s ease-out forwards;
}
.pa-paw svg { width: 100%; height: 100%; display: block; }
@keyframes pa-paw-fade {
    0%   { opacity: 0;    transform: rotate(var(--paw-rot)) scale(0.6); }
    18%  { opacity: 0.34; transform: rotate(var(--paw-rot)) scale(1); }
    100% { opacity: 0;    transform: rotate(var(--paw-rot)) scale(1); }
}
/* Las huellas se posicionan respecto al propio carril del mapa */
.vmap__path, .mwmap__path { position: relative; }

/* --- App nativa: fuera la barra de scroll de PC (pastilla blanca que se veía
   en el borde derecho del S23). En pantallas táctiles no pinta nada. --- */
@media (pointer: coarse) {
    *::-webkit-scrollbar,
    ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
    *::-webkit-scrollbar-thumb { background: transparent !important; }
}

/* =============================================================================
   TROFEOS SECRETOS 🏆 (compartido: pueden caer en cualquier página)
   ========================================================================== */
.pa-trophy-toast {
    position: fixed;
    left: 50%;
    top: 18px;
    transform: translate(-50%, -130%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFD54A, #F0A500);
    color: #4A3B0A;
    box-shadow: 0 12px 30px rgba(120, 80, 0, 0.4);
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
    pointer-events: none;
}
.pa-trophy-toast.is-in { transform: translate(-50%, 0); }
.pa-trophy-toast__emoji { font-size: 1.7rem; }
.pa-trophy-toast__text { display: flex; flex-direction: column; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.pa-trophy-toast__text b { font-size: 0.72rem; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.75; }

.pa-trophy-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 10, 30, 0.55);
    backdrop-filter: blur(3px);
}
.pa-trophy-modal__card {
    width: min(420px, 100%);
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: 22px;
    background: #fff;
    padding: 1.2rem 1.2rem 1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.pa-trophy-modal__card h2 { margin: 0 0 0.8rem; font-size: 1.25rem; color: #1E293B; }
.pa-trophy-modal__card h2 small { color: #B45309; font-size: 0.95rem; margin-left: 6px; }
.pa-trophy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pa-trophy-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    background: #F1F5F9;
    opacity: 0.75;
}
.pa-trophy-row.is-got {
    background: linear-gradient(135deg, rgba(255, 213, 74, 0.25), rgba(240, 165, 0, 0.15));
    opacity: 1;
}
.pa-trophy-row__emoji { font-size: 1.5rem; }
.pa-trophy-row__text { display: flex; flex-direction: column; font-size: 0.86rem; color: #475569; line-height: 1.3; }
.pa-trophy-row__text b { color: #1E293B; font-size: 0.95rem; }
.pa-trophy-close {
    margin-top: 0.9rem;
    width: 100%;
    padding: 0.7rem;
    border: none;
    border-radius: 999px;
    background: #8A2BE2;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .pa-trophy-toast { transition: none; }
}

/* =============================================================================
   FUNDIDO UNIVERSAL DE PÁGINA (recorrido premium 16-jul, receta de Luna)
   -----------------------------------------------------------------------------
   Cada sección es una página HTML distinta: al navegar, el navegador puede
   "escupir" el contenido de golpe. Este fundido de 220ms lo suaviza SIEMPRE.
   Truco clave: el fondo del body se propaga al lienzo del navegador, que NO
   se ve afectado por la opacidad del body → el color de la sección se pinta
   entero desde el primer frame y solo el CONTENIDO se funde encima. Cero lag:
   solo opacity, una vez, al cargar.
   ========================================================================== */
body {
    animation: paPageIn 220ms ease-out;
}
@keyframes paPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}

/* =============================================================================
   POP DE VIDAS 🎁 (recorrido premium 16-jul): cuando llega un regalo o la
   recompensa de un anuncio, las huellas/mancuernas se RELLENAN una a una con
   un bote — ves la vida entrar, no solo el cartel. rewards.js pone la clase
   .pa-bag-pop en el indicador y la quita al terminar. Solo transform/opacity.
   ========================================================================== */
.pa-bag-pop > .huella,
.pa-bag-pop > .vhuella {
    animation: paBagPop 480ms cubic-bezier(0.3, 1.6, 0.4, 1) backwards;
}
.pa-bag-pop > :nth-child(1) { animation-delay: 0ms; }
.pa-bag-pop > :nth-child(2) { animation-delay: 110ms; }
.pa-bag-pop > :nth-child(3) { animation-delay: 220ms; }
.pa-bag-pop > :nth-child(4) { animation-delay: 330ms; }
.pa-bag-pop > :nth-child(5) { animation-delay: 440ms; }
@keyframes paBagPop {
    0%   { transform: scale(0.35); opacity: 0.15; }
    62%  { transform: scale(1.28); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pa-bag-pop > .huella,
    .pa-bag-pop > .vhuella { animation: none; }
}

/* =============================================================================
   TARJETAS DE PERMISO 🐾 (perm-ask.js): el "por qué" antes del pop-up del
   sistema. Una vez por permiso, con perro y botón — nada de sustos en seco.
   ========================================================================== */
.pa-perm {
    position: fixed; inset: 0; z-index: 9600;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: rgba(30, 10, 60, 0);
    transition: background 220ms ease;
}
.pa-perm.is-in { background: rgba(30, 10, 60, 0.5); }
.pa-perm__card {
    max-width: 340px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FF 100%);
    border-radius: 24px;
    padding: 1.6rem 1.5rem 1.4rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(60, 20, 120, 0.35);
    transform: translateY(26px) scale(0.94);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 200ms ease;
}
.pa-perm.is-in .pa-perm__card { transform: none; opacity: 1; }
.pa-perm__dog {
    width: 96px; height: 96px;
    object-fit: contain;
    margin-bottom: 0.4rem;
}
.pa-perm__title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem; font-weight: 900;
    color: #4C1D95;
}
.pa-perm__text {
    margin: 0 0 1.1rem;
    font-size: 0.95rem; line-height: 1.45;
    color: #5B5470;
}
.pa-perm__btn {
    border: none;
    background: linear-gradient(180deg, #A855F7 0%, #7C3AED 100%);
    color: #fff;
    font-weight: 800; font-size: 1rem;
    padding: 0.75rem 2.2rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
    transition: transform 120ms ease;
}
.pa-perm__btn:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
    .pa-perm, .pa-perm__card { transition: none; }
}

/* Enlace secundario de la tarjeta de permiso ("Ahora no"): discreto a propósito. */
.pa-perm__alt {
    display: block;
    margin: 0.7rem auto 0;
    border: none; background: none;
    color: rgba(91, 84, 112, 0.65);
    font-size: 0.85rem; font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================================================
   🐕 TU FICHA EN EL MAPA (map-ficha.js): tu perro elegido junto al nodo donde
   estás. Respira suave (solo transform) y no roba toques.
   ========================================================================== */
.map__path .node, .vmap__path .vnode { position: relative; }
.pa-ficha {
    position: absolute;
    width: 50px; height: 50px;
    bottom: 0;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 5px 5px rgba(30, 10, 60, 0.28));
    animation: paFichaIdle 2.8s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.pa-ficha--left  { left: -44px; }
.pa-ficha--right { right: -44px; }
@keyframes paFichaIdle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05, 0.96) translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
    .pa-ficha { animation: none; }
}