/* ════════════════════════════════════════════════════════════
   🥚 LIMPIAAI v8.0 — ULTRA-PREMIUM DESIGN SYSTEM
   Egg Portal • Symbol Particles • Neon Glow • Dark Mode
   Glassmorphism • Cinematic Animations • High-End VFX
   ════════════════════════════════════════════════════════════ */

/* ═══ VARIABLES ═══ */
:root {
  --p: #7c3aed; --pl: #a78bfa; --pd: #5b21b6;
  --pg: rgba(124,58,237,.35);
  --acc: #f59e0b; --accl: #fbbf24;
  --ok: #10b981; --okl: #34d399;
  --warn: #f59e0b; --warnl: #fbbf24;
  --err: #ef4444; --errl: #f87171;
  --info: #3b82f6; --infol: #60a5fa;
  --cyan: #06b6d4; --gold: #eab308;
  --bg0: #030311; --bg1: #080820; --bg2: #0e0e2a; --bg3: #181840;
  --bgc: rgba(8,8,32,.92);
  --t1: #f1f5f9; --t2: #94a3b8; --t3: #64748b; --ta: #c4b5fd;
  --bd: rgba(148,163,184,.06); --bda: rgba(124,58,237,.3);
  --gp: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gc: linear-gradient(145deg, rgba(12,12,36,.9), rgba(6,6,20,.95));
  --gg: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  --gh: linear-gradient(120deg, rgba(124,58,237,.08), rgba(59,130,246,.06), rgba(16,185,129,.05));
  --gneon: linear-gradient(135deg, #7c3aed, #3b82f6, #06b6d4);
  --ss: 0 2px 8px rgba(0,0,0,.5); --sm: 0 4px 24px rgba(0,0,0,.6);
  --sl: 0 8px 48px rgba(0,0,0,.7);
  --sg: 0 0 24px var(--pg); --sn: 0 0 40px var(--pg), 0 0 80px rgba(124,58,237,.12);
  --sneon: 0 0 20px rgba(124,58,237,.4), 0 0 60px rgba(124,58,237,.15), 0 0 120px rgba(59,130,246,.08);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --hh: 56px; --bh: 72px;
  /* v21 CORRECCIÓN DE ALINEACIÓN GLOBAL — CAUSA RAÍZ DEL DESFASE:
     el ancho de la columna estaba escrito a mano (480px) en `.app`, en
     `.bottom-nav`, en `.footer-legal` y en cada hoja de modal. Pero el bloque
     `@media (min-width:769px)` sólo ensanchaba `.app` a 600px: las barras fijas
     se quedaban en 480px y, al estar centradas con `left:50%`, terminaban 60px
     más estrechas por cada lado que el contenido que debían tapar.
     Eso producía los dos síntomas de la captura: los bordes de las barras no
     coincidían con los del contenido, y el contenido del extremo izquierdo
     (el banner Zen) asomaba por el hueco descubierto junto al pie.
     Ahora existe UNA sola fuente de verdad: todo mide `var(--appw)`, así que
     los bordes coinciden por construcción y no pueden volver a desfasarse. */
  --appw: 480px;
  --r: 12px; --rl: 16px; --rx: 22px;
  --tf: .15s ease; --tn: .3s ease; --ts: .45s cubic-bezier(.16,1,.3,1);
  --mono: 'JetBrains Mono', monospace;
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg0); color: var(--t1); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; min-height: 100dvh;
}
a { color: var(--pl); text-decoration: none; }
img { max-width: 100%; display: block; }
button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; }
input { font-family: inherit; font-size: 16px; color: var(--t1); }
::selection { background: var(--pd); color: #fff; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pg); border-radius: 99px; }

/* ═══ PARTICLE CANVAS (background) ═══ */
.particle-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .6;
}

/* ═══ AMBIENT AURORA (enhanced) ═══ */
body::before {
  content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(124,58,237,.06) 0deg, rgba(59,130,246,.04) 90deg,
    rgba(6,182,212,.03) 180deg, rgba(16,185,129,.03) 270deg,
    rgba(124,58,237,.06) 360deg);
  animation: auroraRotate 40s linear infinite; pointer-events: none; z-index: -1;
}
body::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(124,58,237,.04) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(59,130,246,.03) 0%, transparent 50%);
  pointer-events: none; z-index: -1;
}
@keyframes auroraRotate { to { transform: rotate(360deg); } }

/* ═══ GLASSMORPHISM ═══ */
.glass-card {
  background: var(--gc) !important;
  border: 1px solid var(--bd) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ═══ GLOW / NEON EFFECTS ═══ */
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--sg); }
  50% { box-shadow: 0 0 50px var(--pg), 0 0 100px rgba(124,58,237,.18); }
}
.neon-border { border: 1px solid rgba(124,58,237,.3); box-shadow: var(--sneon); }
.neon-text {
  text-shadow: 0 0 10px rgba(124,58,237,.5), 0 0 30px rgba(124,58,237,.2), 0 0 60px rgba(124,58,237,.1);
}

/* ═══ EGG PORTAL ANIMATION (Splash) ═══ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2rem;
  background: var(--bg0); transition: opacity 1s, visibility 1s, filter 1s;
  overflow: hidden;
}
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; filter: blur(15px) scale(1.05); }
.splash-stars {
  position: absolute; inset: 0; overflow: hidden;
}

/* Portal */
.portal {
  /* v19: ampliado de 220px para dar aire al huevo ceremonial de 200px */
  position: relative; width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 380px) {
  .portal { width: 260px; height: 260px; }
  .pixar-mode .portal-egg { width: 160px; height: 160px; }
}
.portal-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
}
/* v19 FIX: `border-image` anula `border-radius`, así que este anillo se
   dibujaba como un CUADRADO giratorio (el "cuadro" visible en el splash).
   Se sustituye por un degradado cónico enmascarado, que sí respeta el círculo. */
.p-ring1 {
  inset: 0;
  border: 2px solid rgba(124,58,237,.45);
  border-radius: 50%;
  animation: portalSpin 8s linear infinite;
  box-shadow: 0 0 30px rgba(124,58,237,.2), inset 0 0 30px rgba(124,58,237,.1);
}
/* Arco cromático del anillo exterior, recortado en anillo con mask */
.p-ring1::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, #7c3aed 70deg, #3b82f6 150deg, #06b6d4 220deg, transparent 300deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  pointer-events: none;
}
.p-ring2 {
  inset: 15px;
  border-color: rgba(59,130,246,.3);
  animation: portalSpin 12s linear infinite reverse;
  box-shadow: 0 0 20px rgba(59,130,246,.15);
}
.p-ring3 {
  inset: 30px;
  border-color: rgba(6,182,212,.25);
  border-style: dashed;
  animation: portalSpin 16s linear infinite;
  box-shadow: 0 0 15px rgba(6,182,212,.1);
}
.p-ring4 {
  inset: -10px;
  border-color: rgba(124,58,237,.15);
  border-style: dotted;
  animation: portalSpin 24s linear infinite reverse;
}
@keyframes portalSpin { to { transform: rotate(360deg); } }

.portal-core {
  position: absolute; inset: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.15) 0%, rgba(59,130,246,.1) 40%, transparent 70%);
  animation: portalPulse 3s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(124,58,237,.2);
}
@keyframes portalPulse {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

.portal-symbols {
  position: absolute; inset: -15px; pointer-events: none;
}
.ps-sym {
  position: absolute; font-size: 1.1rem; opacity: 0;
  animation: symbolOrbit 6s ease-in-out infinite;
}
.ps-sym:nth-child(1) { animation-delay: 0s; }
.ps-sym:nth-child(2) { animation-delay: .5s; }
.ps-sym:nth-child(3) { animation-delay: 1s; }
.ps-sym:nth-child(4) { animation-delay: 1.5s; }
.ps-sym:nth-child(5) { animation-delay: 2s; }
.ps-sym:nth-child(6) { animation-delay: 2.5s; }
.ps-sym:nth-child(7) { animation-delay: 3s; }
.ps-sym:nth-child(8) { animation-delay: 3.5s; }
.ps-sym:nth-child(9) { animation-delay: 4s; }
.ps-sym:nth-child(10) { animation-delay: 4.5s; }
.ps-sym:nth-child(11) { animation-delay: 5s; }
.ps-sym:nth-child(12) { animation-delay: 5.5s; }
@keyframes symbolOrbit {
  0% { top: 50%; left: 50%; opacity: 0; transform: translate(-50%,-50%) rotate(0) translateX(148px) scale(.5); }
  15% { opacity: .9; }
  85% { opacity: .9; }
  100% { top: 50%; left: 50%; opacity: 0; transform: translate(-50%,-50%) rotate(360deg) translateX(148px) scale(.5); }
}

.portal-egg {
  position: relative; z-index: 5; font-size: 4.5rem;
  filter: drop-shadow(0 0 35px var(--pg)) drop-shadow(0 0 60px rgba(124,58,237,.2));
  animation: portalEggFloat 3s ease-in-out infinite;
}
@keyframes portalEggFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 35px var(--pg)); }
  50% { transform: translateY(-16px) scale(1.05); filter: drop-shadow(0 0 55px rgba(124,58,237,.6)); }
}

.splash-info { text-align: center; position: relative; z-index: 5; }
.splash-brand {
  font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900;
  background: var(--gp); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -.5px;
  filter: drop-shadow(0 0 20px rgba(124,58,237,.3));
}
.splash-ver {
  color: var(--t3); font-size: .7rem; letter-spacing: 3px;
  text-transform: uppercase; margin-top: 6px; font-family: var(--mono);
}
.splash-bar {
  width: 200px; height: 3px; background: var(--bg3); border-radius: 99px;
  margin: 20px auto 10px; overflow: hidden;
}
.splash-bar-fill {
  width: 0; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #7c3aed, #3b82f6, #06b6d4);
  animation: barFill 2.4s ease-in-out forwards;
  box-shadow: 0 0 12px var(--pg);
}
.splash-status { color: var(--t3); font-size: .65rem; font-family: var(--mono); }
@keyframes barFill { to { width: 100%; } }

/* ═══ LEGAL / PRIVACY MODALS ═══ */
.legal-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.legal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,3,17,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.legal-content {
  position: relative; z-index: 1; width: 100%; max-width: 500px;
  max-height: 90vh; display: flex; flex-direction: column;
  background: var(--gc); border: 1px solid var(--bda);
  border-radius: var(--rx); overflow: hidden;
  box-shadow: var(--sneon);
  animation: modalIn .5s var(--ts);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.legal-header {
  padding: 20px 20px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--bd); flex-shrink: 0;
  background: rgba(124,58,237,.03);
}
.legal-icon { font-size: 1.8rem; }
.legal-header h2 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 800; flex: 1; }
.legal-close-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); color: var(--t3); transition: all var(--tf);
}
.legal-close-btn:active { background: var(--bg3); color: var(--t1); }
.legal-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.legal-section {
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(148,163,184,.04);
}
.legal-section:last-child { border-bottom: none; margin-bottom: 0; }
.legal-section h3 { font-size: .88rem; font-weight: 800; margin-bottom: 8px; color: var(--pl); }
.legal-section p { font-size: .76rem; color: var(--t2); line-height: 1.65; margin-bottom: 8px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section-mx {
  background: rgba(16,185,129,.03);
  border: 1px solid rgba(16,185,129,.1);
  border-radius: var(--r); padding: 14px; margin-bottom: 16px;
}
.legal-footer {
  padding: 16px 20px; border-top: 1px solid var(--bd); flex-shrink: 0;
  background: rgba(0,0,0,.2);
}
.legal-check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: .78rem; color: var(--t2); margin-bottom: 14px; line-height: 1.5;
  user-select: none;
}
.legal-check input { display: none; }
.legal-checkmark {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--t3); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tn); font-size: .7rem;
}
.legal-check input:checked + .legal-checkmark {
  background: var(--p); border-color: var(--p);
  box-shadow: 0 0 16px rgba(124,58,237,.3);
}
.legal-check input:checked + .legal-checkmark::after {
  content: '✓'; color: #fff; font-weight: 900;
}
.privacy-intro { font-size: .82rem; color: var(--t2); margin-bottom: 16px; line-height: 1.6; }

/* ═══ LANGUAGE MODAL ═══ */
.lang-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-end; justify-content: center;
}
.lang-backdrop {
  position: absolute; inset: 0; background: rgba(3,3,17,.8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lang-content {
  position: relative; z-index: 1; width: 100%; max-width: var(--appw);
  background: var(--bg1); border: 1px solid var(--bda);
  border-radius: var(--rx) var(--rx) 0 0; max-height: 85vh;
  overflow: hidden; animation: langSlide .4s var(--ts);
  box-shadow: 0 -10px 60px rgba(124,58,237,.15);
}
@keyframes langSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lang-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--bd);
}
.lang-header h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 800; }
.lang-header button {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); color: var(--t3); transition: all var(--tf);
}
.lang-header button:active { background: var(--bg3); }
.lang-list { padding: 10px; overflow-y: auto; max-height: 60vh; }
.lang-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--rl); cursor: pointer; transition: all var(--tn);
  margin-bottom: 4px;
}
.lang-item:hover, .lang-item:active { background: var(--bg3); }
.lang-item.active { background: rgba(124,58,237,.1); border: 1px solid var(--bda); }
.lang-flag { font-size: 1.6rem; }
.lang-name { font-weight: 700; font-size: .9rem; }
.lang-native { font-size: .72rem; color: var(--t3); }
.lang-check { margin-left: auto; color: var(--ok); font-size: .9rem; display: none; }
.lang-item.active .lang-check { display: block; }

/* ═══ APP SHELL ═══ */
.app {
  max-width: var(--appw); margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; background: var(--bg0); position: relative;
  z-index: 1;
}

/* ═══ HEADER ═══ */
.hdr {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--st) + 8px) 14px 8px;
  background: rgba(3,3,17,.95); backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid var(--bd); height: calc(var(--hh) + var(--st));
}
.hdr::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg), rgba(59,130,246,.2), transparent);
}
.hdr-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); color: var(--t3); transition: all var(--tf);
}
.hdr-btn:active { background: var(--bg3); color: var(--t1); transform: scale(.88); }
.hdr-brand { display: flex; align-items: center; gap: 7px; }
.hdr-egg {
  font-size: 1.4rem; filter: drop-shadow(0 0 12px var(--pg));
  animation: eggBreathe 3s ease-in-out infinite;
}
@keyframes eggBreathe { 0%,100% { filter: drop-shadow(0 0 12px var(--pg)); } 50% { filter: drop-shadow(0 0 28px rgba(124,58,237,.7)); } }
.hdr-title {
  font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 800;
  background: var(--gp); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hdr-badge {
  font-size: .52rem; font-weight: 800; background: var(--gneon); color: #fff;
  padding: 2px 7px; border-radius: 99px; font-family: var(--mono); letter-spacing: .5px;
  box-shadow: 0 0 16px rgba(124,58,237,.3);
}
.hdr-right { display: flex; gap: 2px; }

/* ═══ MAIN / SCREENS ═══ */
.main { flex: 1; position: relative; overflow: hidden; }
.scr { display: none; position: absolute; inset: 0; overflow: hidden; }
.scr.active { display: flex; flex-direction: column; animation: scrFadeIn .4s var(--ts); }
.scr-inner {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 20px 16px calc(var(--bh) + var(--sb) + 48px);
  -webkit-overflow-scrolling: touch;
}
@keyframes scrFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ BOTTOM NAV ═══ */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--appw); display: flex; align-items: flex-end;
  justify-content: space-around; padding: 6px 8px calc(var(--sb) + 4px);
  background: rgba(3,3,17,.97); backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-top: 1px solid var(--bd); z-index: 100; height: calc(var(--bh) + var(--sb));
}
.bottom-nav::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg), rgba(6,182,212,.15), transparent);
}
.bnav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 14px; border-radius: var(--r); color: var(--t3);
  font-size: .58rem; font-weight: 600; transition: all var(--tn); min-width: 58px;
}
.bnav-btn i { font-size: 1.1rem; transition: all var(--tn); }
.bnav-btn.active { color: var(--pl); }
.bnav-btn.active i { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--pg)); }
.bnav-btn:active { transform: scale(.85); }
.bnav-main-btn {
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  background: var(--gneon); border-radius: 50%; margin-top: -22px;
  box-shadow: var(--sneon); color: #fff; transition: all var(--tn);
}
.bnav-main-btn:active { transform: scale(.92); }
.bnav-main-btn i { color: #fff; font-size: 1.2rem; }

/* ═══ FOOTER LEGAL BAR ═══ */
.footer-legal {
  position: fixed; bottom: calc(var(--bh) + var(--sb)); left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--appw); z-index: 99;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 16px; font-size: .56rem;
  background: rgba(3,3,17,.9); border-top: 1px solid rgba(148,163,184,.03);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.footer-legal a { color: var(--t3); transition: color var(--tf); }
.footer-legal a:hover, .footer-legal a:active { color: var(--pl); }
.footer-sep { color: rgba(148,163,184,.2); }

/* ═══ BUTTONS ═══ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 36px; background: var(--gneon); color: #fff; font-size: 1rem;
  font-weight: 800; border-radius: var(--rx); min-height: 52px;
  transition: all var(--tn); box-shadow: var(--sneon); letter-spacing: .3px;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%); transition: transform .7s;
}
.btn-primary:hover::before, .btn-primary:focus::before { transform: translateX(100%); }
.btn-primary:active { transform: scale(.96); box-shadow: var(--sg); }
.btn-primary:disabled { opacity: .35; pointer-events: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 24px; font-size: .85rem; min-height: 42px; }
.btn-secondary {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; background: var(--gneon); color: #fff; border-radius: var(--rl);
  font-weight: 800; font-size: .88rem; min-height: 50px; transition: all var(--tn);
  box-shadow: var(--sg);
}
.btn-secondary:active { transform: scale(.95); }
.btn-outline {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; background: var(--bgc); color: var(--t1); border: 1px solid var(--bda);
  border-radius: var(--rl); font-weight: 800; font-size: .88rem; min-height: 50px;
  transition: all var(--tn); backdrop-filter: blur(8px);
}
.btn-outline:active { transform: scale(.95); border-color: var(--p); box-shadow: var(--sg); }

/* ═══ HERO ═══ */
.hero { text-align: center; padding: 2rem 0 1.5rem; position: relative; }
.hero-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 320px; height: 320px; background: radial-gradient(circle, var(--pg), transparent 60%);
  border-radius: 50%; filter: blur(70px); animation: heroGlow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroGlow {
  0%,100% { opacity: .3; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: .6; transform: translate(-50%,-50%) scale(1.15); }
}
.hero-egg-wrap {
  /* v21 CORRECCIÓN DE CENTRADO:
     era `display:inline-block`, así que su posición dependía del flujo de
     texto de la línea. Las partículas `.hp` van posicionadas con `left`/`right`
     NEGATIVOS (hasta -8%) y, al participar en esa línea, la ensanchaban por la
     izquierda: el envoltorio acababa ~129px a la izquierda del centro del
     título, que es el huevo descolocado que se veía.
     Con `display:block` + márgenes automáticos el centrado es geométrico y no
     depende de nada que haya alrededor. */
  position: relative;
  display: block;
  width: 150px; height: 150px;
  margin: 0 auto 1.2rem;
}
.hero-egg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem; z-index: 2; filter: drop-shadow(0 0 30px var(--pg));
  animation: eggFloat 3s ease-in-out infinite;
}
@keyframes eggFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-ring {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(124,58,237,.15);
}
.ring1 { inset: 5px; animation: spin 14s linear infinite; box-shadow: 0 0 15px rgba(124,58,237,.08); }
.ring2 { inset: 18px; border-color: rgba(59,130,246,.12); animation: spinReverse 20s linear infinite; }
.ring3 { inset: -10px; border-color: rgba(6,182,212,.08); animation: spin 30s linear infinite; border-style: dashed; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
.hero-particles { position: absolute; inset: -20px; pointer-events: none; }
.hp {
  position: absolute; font-size: .9rem; color: var(--pl); opacity: .4;
  animation: particleFloat 4s ease-in-out infinite;
}
.hp:nth-child(1) { top: 5%; left: 8%; animation-delay: 0s; }
.hp:nth-child(2) { top: 12%; right: 5%; animation-delay: .7s; }
.hp:nth-child(3) { bottom: 18%; left: -3%; animation-delay: 1.4s; }
.hp:nth-child(4) { bottom: 5%; right: 8%; animation-delay: 2.1s; }
.hp:nth-child(5) { top: 45%; left: -8%; animation-delay: 2.8s; }
.hp:nth-child(6) { top: 50%; right: -6%; animation-delay: 3.5s; }
@keyframes particleFloat {
  0%,100% { opacity: .15; transform: translateY(0) scale(.7); }
  50% { opacity: .8; transform: translateY(-14px) scale(1.2); }
}
.hero-title {
  font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900;
  line-height: 1.12; margin-bottom: .7rem;
  background: linear-gradient(135deg, #f1f5f9 15%, #c4b5fd 45%, #818cf8 65%, #06b6d4 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  background-size: 200% 200%; animation: textShimmer 5s ease infinite;
}
@keyframes textShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero-sub { color: var(--t2); font-size: .82rem; max-width: 340px; margin: 0 auto 1.5rem; line-height: 1.65; }
.hero-sub strong { color: var(--pl); }

/* ═══ STATS ROW ═══ */
/* v21 CORRECCIÓN DE ALINEACIÓN:
   antes era `display:flex` + `overflow-x:auto`. Esa combinación recortaba la
   cuarta tarjeta ("28 Tradiciones") en cuanto el ancho disponible bajaba de
   los 568 px que exigen 4 tarjetas de 136 px + 3 huecos: el desbordamiento
   se ocultaba tras un scroll horizontal que en móvil nadie ve, así que la
   tarjeta simplemente parecía cortada.
   Con una rejilla de columnas iguales el reparto es exacto por definición y
   no existe desbordamiento posible: 2×2 en pantallas estrechas, 4 en línea
   a partir de 420 px de contenido. */
.stats-row {
  display: grid;
  /* `minmax(0, 1fr)` es la clave: sin el mínimo en 0 las columnas se niegan
     a encogerse por debajo del contenido y la última tarjeta se sale. Con él,
     las 4 columnas reparten SIEMPRE el ancho disponible a partes iguales, así
     que no puede haber desbordamiento a ningún ancho de pantalla. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 1.8rem;
  padding: 2px 0;
}
.stat-card {
  min-width: 0; border-radius: var(--rl); padding: 16px 8px;
  text-align: center; position: relative; overflow: hidden; transition: all var(--tn);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.stat-card::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(124,58,237,.05), transparent, rgba(59,130,246,.03), transparent);
  animation: cardGlow 8s linear infinite; pointer-events: none;
}
@keyframes cardGlow { to { transform: rotate(360deg); } }
.stat-card:active { border-color: var(--bda) !important; transform: scale(.97); }
.stat-emoji { font-size: 1.3rem; margin-bottom: 4px; position: relative; z-index: 1; }
.stat-val {
  font-size: 1.15rem; font-weight: 900; font-family: var(--mono); position: relative; z-index: 1;
  background: var(--gneon); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-label {
  font-size: .54rem; color: var(--t3); font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; margin-top: 2px; position: relative; z-index: 1;
  /* v21: "TRADICIONES" es la etiqueta más larga y con letra espaciada llega
     al filo de la tarjeta. Se permite partir en dos líneas antes que salirse,
     y todas las tarjetas comparten la misma altura de dos líneas para que las
     cifras queden alineadas horizontalmente entre sí. */
  line-height: 1.25;
  min-height: 2.5em;
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  max-width: 100%;
  hyphens: auto;
}

/* ═══ TECH GRID ═══ */
.section-heading {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 800;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 10px;
}
.section-heading i { color: var(--pl); filter: drop-shadow(0 0 8px var(--pg)); }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 2rem; }
.tech-card {
  border-radius: var(--rl); padding: 16px 14px; position: relative; overflow: hidden;
  transition: all var(--tn);
}
.tech-card::after {
  content: ''; position: absolute; inset: 0; background: var(--gh);
  opacity: 0; transition: opacity var(--tn);
}
.tech-card:active { border-color: var(--bda) !important; transform: scale(.98); }
.tech-card:active::after { opacity: 1; }
.tech-icon { font-size: 1.6rem; margin-bottom: 8px; display: block; }
.tech-card h4 { font-size: .78rem; font-weight: 800; margin-bottom: 4px; }
.tech-card p { font-size: .66rem; color: var(--t3); line-height: 1.5; }

/* ═══ STEPS LIST ═══ */
.steps-list { position: relative; padding-left: 48px; margin-bottom: 2rem; }
.steps-list::before {
  content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(to bottom, var(--p), var(--pl), var(--cyan), var(--acc));
  border-radius: 1px;
}
.step-item { position: relative; margin-bottom: 20px; }
.step-item:last-child { margin-bottom: 0; }
.step-num {
  position: absolute; left: -48px; top: 0; width: 34px; height: 34px;
  background: var(--gneon); border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .78rem; font-weight: 900; color: #fff;
  box-shadow: 0 0 20px rgba(124,58,237,.3);
}
.step-body strong { font-size: .88rem; display: block; margin-bottom: 2px; }
.step-body p { font-size: .76rem; color: var(--t2); line-height: 1.45; }

/* ═══ NOTICE ═══ */
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border-radius: var(--rl); margin-top: 1rem;
  background: rgba(245,158,11,.03) !important;
  border: 1px solid rgba(245,158,11,.1) !important;
}
.notice i { color: var(--warn); font-size: 1rem; flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 8px rgba(245,158,11,.4)); }
.notice p { font-size: .72rem; color: var(--t2); line-height: 1.55; }

/* ═══ UPLOAD ═══ */
.upload-header { text-align: center; margin-bottom: 1.2rem; }
.upload-header h2 { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 800; }
.upload-header p { color: var(--t2); font-size: .82rem; margin-top: 5px; }
.upload-header strong { color: var(--pl); }
.upload-counter { display: flex; justify-content: space-between; font-size: .8rem; color: var(--t2); margin-bottom: 8px; }
.upload-badge {
  background: var(--gneon); color: #fff; padding: 3px 11px; border-radius: 99px;
  font-weight: 800; font-size: .73rem; font-family: var(--mono);
  box-shadow: 0 0 14px rgba(124,58,237,.25);
}
.upload-bar { width: 100%; height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; margin-bottom: 1.2rem; }
.upload-bar-fill {
  height: 100%; background: var(--gneon); border-radius: 99px;
  transition: width .4s ease-out; width: 0; position: relative;
}
.upload-bar-fill::after {
  content: ''; position: absolute; right: 0; top: -1px; width: 12px; height: 6px;
  background: rgba(255,255,255,.6); border-radius: 99px; filter: blur(3px);
}
.upload-zone {
  border: 2px dashed rgba(124,58,237,.25) !important; border-radius: var(--rx);
  padding: 36px 20px; text-align: center; cursor: pointer;
  transition: all var(--tn); position: relative; overflow: hidden;
}
.upload-zone::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(124,58,237,.04), transparent 70%);
  opacity: 0; transition: opacity var(--tn);
}
.upload-zone:active, .upload-zone.drag { border-color: var(--p) !important; transform: scale(.99); }
.upload-zone:active::before, .upload-zone.drag::before { opacity: 1; }
.upload-zone-icon {
  font-size: 2.8rem; color: var(--pl); margin-bottom: 12px; display: block;
  animation: uploadPulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px var(--pg));
}
@keyframes uploadPulse { 0%,100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-8px); } }
.upload-zone-title { font-size: .95rem; font-weight: 800; color: var(--t1); margin-bottom: 3px; }
.upload-zone-hint { font-size: .75rem; color: var(--t3); }
.upload-btns { display: flex; gap: 10px; margin-top: 14px; }
.upload-preview { margin-top: 20px; animation: fadeUp .4s ease-out; }
.upload-preview h4 { font-size: .9rem; font-weight: 800; margin-bottom: 12px; }
.upload-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.upload-prev-item {
  position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  border: 2px solid var(--bd); animation: zoomIn .35s var(--ts);
  transition: border-color var(--tn);
}
.upload-prev-item:active { border-color: var(--p); }
.upload-prev-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.upload-prev-badge {
  position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.75); color: #fff;
  padding: 2px 7px; border-radius: 99px; font-size: .58rem; font-weight: 800;
  font-family: var(--mono); backdrop-filter: blur(6px);
}
.upload-prev-del {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
  background: rgba(239,68,68,.9); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .6rem;
  backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(239,68,68,.4);
  transition: transform var(--tf);
}
.upload-prev-del:active { transform: scale(.82); }
.upload-add-btn {
  width: 100%; padding: 12px; margin-top: 12px;
  border: 2px dashed rgba(124,58,237,.2); border-radius: var(--rl);
  color: var(--pl); font-weight: 800; font-size: .85rem;
  background: rgba(124,58,237,.03); transition: all var(--tn);
}
.upload-add-btn:active { background: rgba(124,58,237,.08); border-color: var(--p); }
.upload-tips {
  border-radius: var(--rl); padding: 16px; margin-top: 18px;
  background: rgba(59,130,246,.03) !important;
  border: 1px solid rgba(59,130,246,.08) !important;
}
.upload-tips h4 { font-size: .86rem; font-weight: 800; color: var(--infol); margin-bottom: 10px; }
.tip { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .76rem; color: var(--t2); }
.tip i { color: var(--ok); font-size: .7rem; flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(16,185,129,.4)); }
.upload-analyze-wrap {
  position: sticky; bottom: 0; padding: 14px 0;
  background: linear-gradient(to top, var(--bg0) 65%, transparent); z-index: 10;
}

/* ═══ PROCESSING ═══ */
.proc-container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100%; padding: 1.5rem; text-align: center; position: relative; overflow: hidden;
}
.proc-container::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(124,58,237,.05), transparent 60%);
  pointer-events: none;
}
.proc-visual { position: relative; width: 160px; height: 160px; margin-bottom: 1.5rem; }
.proc-glow {
  position: absolute; inset: -40px; background: radial-gradient(circle, var(--pg), transparent 55%);
  border-radius: 50%; filter: blur(40px); animation: heroGlow 2.5s ease-in-out infinite;
}
.proc-egg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3.8rem; z-index: 3; animation: procEggAnim 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 25px var(--pg));
}
@keyframes procEggAnim { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }
.proc-ring-svg { position: absolute; inset: 0; z-index: 2; }
.proc-particles { position: absolute; inset: -30px; z-index: 1; }
.pp {
  position: absolute; font-size: .8rem; color: var(--pl);
  animation: ppOrbit 5s linear infinite;
}
.pp:nth-child(1) { animation-delay: 0s; }
.pp:nth-child(2) { animation-delay: .8s; }
.pp:nth-child(3) { animation-delay: 1.6s; }
.pp:nth-child(4) { animation-delay: 2.4s; }
.pp:nth-child(5) { animation-delay: 3.2s; }
.pp:nth-child(6) { animation-delay: 4s; }
@keyframes ppOrbit {
  0% { top: 50%; left: 50%; opacity: 0; transform: translate(-50%,-50%) rotate(0) translateX(75px); }
  20% { opacity: .8; }
  80% { opacity: .8; }
  100% { top: 50%; left: 50%; opacity: 0; transform: translate(-50%,-50%) rotate(360deg) translateX(75px); }
}
.proc-pct {
  font-size: 2.8rem; font-weight: 900; font-family: var(--mono);
  background: var(--gneon); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 4px; line-height: 1;
  filter: drop-shadow(0 0 12px var(--pg));
}
.proc-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.proc-sub { color: var(--t2); font-size: .7rem; margin-bottom: 1.2rem; min-height: 1.3em; font-family: var(--mono); }

/* Per-image progress */
.proc-images { width: 100%; max-width: 340px; margin-bottom: 1.2rem; }
.proc-img-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--gc); border: 1px solid var(--bd); border-radius: var(--r);
  margin-bottom: 6px; font-size: .72rem; animation: fadeUp .3s ease-out;
  transition: all var(--tn);
}
.proc-img-card.active { border-color: var(--p); box-shadow: 0 0 18px rgba(124,58,237,.25); }
.proc-img-card.done { border-color: var(--ok); opacity: .7; }
.proc-img-card.done .proc-img-fill { background: linear-gradient(90deg, var(--ok), var(--okl)) !important; }
.proc-img-icon { font-size: 1.15rem; }
.proc-img-info { flex: 1; text-align: left; }
.proc-img-name { font-weight: 700; font-size: .72rem; }
.proc-img-status {
  font-size: .6rem; color: var(--t3); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.proc-img-bar { width: 55px; height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.proc-img-fill { height: 100%; background: var(--gneon); border-radius: 99px; transition: width .3s ease-out; width: 0; }
.proc-img-pct { font-family: var(--mono); font-size: .6rem; color: var(--t3); min-width: 28px; text-align: right; font-weight: 700; }

/* Pipeline steps */
.proc-steps { width: 100%; max-width: 310px; text-align: left; }
.ps { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .7rem; color: var(--t3); transition: all var(--tn); }
.ps i { width: 15px; text-align: center; font-size: .62rem; transition: all var(--tn); }
.ps-pct { margin-left: auto; font-family: var(--mono); font-size: .58rem; color: var(--t3); transition: color var(--tn); }
.ps.active { color: var(--pl); font-weight: 700; }
.ps.active i { filter: drop-shadow(0 0 8px var(--pg)); }
.ps.active .ps-pct { color: var(--pl); }
.ps.done { color: var(--ok); }
.ps.done i { color: var(--ok); }

/* ═══ RESULTS ═══ */
.res-header {
  background: var(--gc); border: 1px solid var(--bd); border-radius: var(--rx);
  overflow: hidden; margin-bottom: 16px; animation: fadeUp .5s ease-out;
  box-shadow: var(--sneon);
}
.res-level-banner {
  padding: 28px 20px 18px; text-align: center; position: relative; overflow: hidden;
}
.res-level-banner::before { content: ''; position: absolute; inset: 0; opacity: .12; }
.res-level-banner.lv-positivo::before,
.res-level-banner.lv-excelente::before { background: linear-gradient(135deg, var(--ok), #059669); }
.res-level-banner.lv-leve::before { background: linear-gradient(135deg, var(--info), #2563eb); }
.res-level-banner.lv-moderado::before { background: linear-gradient(135deg, var(--warn), #d97706); }
.res-level-banner.lv-alto::before { background: linear-gradient(135deg, #f97316, var(--err)); }
.res-level-banner.lv-critico::before { background: linear-gradient(135deg, var(--err), #b91c1c); }
.res-level-icon { font-size: 3rem; display: block; margin-bottom: 8px; animation: resultReveal 1s ease-out; }
@keyframes resultReveal { from { opacity: 0; transform: scale(.5) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.res-level-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; animation: fadeUp .6s ease-out .2s both; }
.res-level-sub { font-size: .76rem; color: var(--t2); animation: fadeUp .6s ease-out .3s both; }

.res-gauge-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.res-gauge { width: 72px; height: 72px; flex-shrink: 0; position: relative; }
.res-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.res-gauge-bg { fill: none; stroke: var(--bg3); stroke-width: 6; }
.res-gauge-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.8s ease-out .5s; }
.res-gauge-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 900; font-family: var(--mono);
}
.res-gauge-info h4 { font-size: .82rem; font-weight: 700; margin-bottom: 4px; }
.res-gauge-info p { font-size: .72rem; color: var(--t2); line-height: 1.45; }

.res-meta { display: flex; gap: 8px; padding: 0 20px 16px; }
.res-meta-chip {
  flex: 1; background: rgba(255,255,255,.02); border: 1px solid rgba(148,163,184,.04);
  border-radius: var(--r); padding: 10px; text-align: center; transition: border-color var(--tn);
}
.res-meta-chip:active { border-color: var(--bda); }
.res-meta-chip .mc-val {
  font-size: .85rem; font-weight: 900; font-family: var(--mono);
  background: var(--gneon); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.res-meta-chip .mc-label { font-size: .5rem; color: var(--t3); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }

/* Result Sections */
.res-section {
  background: var(--gc); border: 1px solid var(--bd); border-radius: var(--rx);
  overflow: hidden; margin-bottom: 14px; animation: fadeUp .5s ease-out;
}
.res-sec-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none; transition: background var(--tf);
}
.res-sec-hd:active { background: rgba(255,255,255,.02); }
.res-sec-hd h3 { font-size: .86rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.res-sec-hd .chev { transition: transform var(--tn); color: var(--t3); font-size: .72rem; }
.res-sec-hd .chev.open { transform: rotate(180deg); }
.res-sec-bd { display: none; padding: 0 16px 16px; }
.res-sec-bd.open { display: block; animation: slideDown .35s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Symbol cards */
.sym-card {
  display: flex; gap: 12px; padding: 14px; background: rgba(255,255,255,.02);
  border-radius: var(--rl); margin-bottom: 10px; border-left: 4px solid var(--p);
  transition: all var(--tn); position: relative; overflow: hidden;
}
.sym-card.cat-positivo { border-left-color: var(--ok); }
.sym-card.cat-energetico { border-left-color: var(--info); }
.sym-card.cat-alerta { border-left-color: var(--warn); }
.sym-card.cat-critico { border-left-color: var(--err); }
.sym-card:active { background: rgba(255,255,255,.04); }
.sym-icon {
  width: 48px; height: 48px; background: var(--bg3); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  flex-shrink: 0;
}
.sym-info { flex: 1; min-width: 0; }
.sym-name { font-size: .82rem; font-weight: 800; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.sym-conf { font-size: .54rem; padding: 2px 7px; border-radius: 99px; font-weight: 700; font-family: var(--mono); }
.sym-conf.hi { background: rgba(16,185,129,.15); color: var(--okl); }
.sym-conf.md { background: rgba(245,158,11,.15); color: var(--warnl); }
.sym-conf.lo { background: rgba(100,116,139,.15); color: var(--t3); }
.sym-mean { font-size: .72rem; color: var(--t2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sym-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.sym-tag { font-size: .54rem; padding: 2px 7px; background: rgba(124,58,237,.08); color: var(--ta); border-radius: 99px; font-family: var(--mono); }

/* Interpretation */
.res-interp { font-size: .82rem; line-height: 1.75; color: var(--t2); }
.res-interp p { margin-bottom: 12px; }
.res-interp strong { color: var(--t1); }
.interp-box { display: flex; gap: 12px; padding: 14px; border-radius: var(--rl); margin-bottom: 12px; }
.interp-box span { font-size: 1.5rem; flex-shrink: 0; }
.interp-box strong { display: block; font-size: .86rem; margin-bottom: 4px; }
.interp-box p { font-size: .76rem; color: var(--t2); line-height: 1.5; }
.interp-positive { background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.12); }
.interp-alert { background: rgba(239,68,68,.05); border: 1px solid rgba(239,68,68,.12); }
.interp-mixed { background: rgba(59,130,246,.05); border: 1px solid rgba(59,130,246,.12); }

/* Recommendation items */
.rec-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(16,185,129,.03); border-radius: var(--r); margin-bottom: 8px; }
.rec-item:active { background: rgba(16,185,129,.06); }
.rec-num { width: 26px; height: 26px; background: linear-gradient(135deg, var(--ok), #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 900; color: #fff; flex-shrink: 0; box-shadow: 0 0 12px rgba(16,185,129,.3); }
.rec-text { font-size: .76rem; color: var(--t2); line-height: 1.5; }

/* Warning card */
.warn-card { background: rgba(239,68,68,.04); border: 1px solid rgba(239,68,68,.12); border-radius: var(--rl); padding: 16px; margin-bottom: 12px; animation: fadeUp .4s ease-out; }
.warn-title { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 800; color: var(--errl); margin-bottom: 10px; }
.warn-title i { filter: drop-shadow(0 0 8px rgba(239,68,68,.4)); }
.warn-item { font-size: .76rem; color: var(--t2); padding: 4px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }

/* Image thumbs */
.res-imgs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.res-img-thumb { width: 68px; height: 68px; flex-shrink: 0; border-radius: var(--r); overflow: hidden; border: 2px solid var(--bd); cursor: pointer; transition: border-color var(--tn); }
.res-img-thumb:active { border-color: var(--p); }
.res-img-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Action buttons */
.res-actions { display: flex; gap: 8px; padding: 14px 0; position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg0) 75%, transparent); z-index: 5; }
.res-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--rl); font-size: .64rem; font-weight: 700; transition: all var(--tn); min-height: 52px; justify-content: center; }
.res-act:active { transform: scale(.93); }
.res-act i { font-size: 1rem; }
.act-share { background: var(--bgc); color: var(--t1); border: 1px solid var(--bd); backdrop-filter: blur(8px); }
.act-new { background: var(--gneon); color: #fff; box-shadow: var(--sg); }

/* Disclaimer card */
.disc-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: rgba(245,158,11,.03); border: 1px solid rgba(245,158,11,.08); border-radius: var(--rl); margin-bottom: 14px; }
.disc-card i { color: var(--warn); flex-shrink: 0; margin-top: 2px; }
.disc-card p { font-size: .68rem; color: var(--t2); line-height: 1.5; }

/* ═══ LEARN ═══ */
.page-heading { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 800; text-align: center; }
.page-sub { color: var(--t2); font-size: .82rem; text-align: center; margin: 5px 0 1.5rem; }
.accordion { background: var(--gc); border: 1px solid var(--bd); border-radius: var(--rl); margin-bottom: 12px; overflow: hidden; transition: border-color var(--tn); }
.accordion:has(.acc-header.open) { border-color: var(--bda); }
.acc-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; cursor: pointer; font-size: .88rem; font-weight: 800; user-select: none; transition: background var(--tf); }
.acc-header:active { background: rgba(255,255,255,.02); }
.acc-header span { display: flex; align-items: center; gap: 10px; }
.acc-header span i { filter: drop-shadow(0 0 5px var(--pg)); }
.acc-arrow { transition: transform var(--tn); color: var(--t3); font-size: .72rem; }
.acc-header.open .acc-arrow { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 16px 16px; }
.acc-body.open { display: block; animation: slideDown .3s ease-out; }
.learn-step { display: flex; gap: 12px; padding: 12px; background: rgba(255,255,255,.02); border-radius: var(--r); margin-bottom: 8px; }
.learn-step-num { width: 34px; height: 34px; background: var(--gneon); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .8rem; color: #fff; flex-shrink: 0; box-shadow: 0 0 14px rgba(124,58,237,.25); }
.learn-step h5 { font-size: .84rem; font-weight: 700; margin-bottom: 3px; }
.learn-step p { font-size: .74rem; color: var(--t2); line-height: 1.5; }
.dict-search { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rl); padding: 11px 14px; margin-bottom: 14px; transition: border-color var(--tn); }
.dict-search:focus-within { border-color: var(--bda); box-shadow: 0 0 18px rgba(124,58,237,.12); }
.dict-search i { color: var(--t3); }
.dict-search input { flex: 1; border: none; background: none; outline: none; color: var(--t1); }
.dict-item { padding: 12px; background: rgba(255,255,255,.02); border-radius: var(--r); margin-bottom: 8px; cursor: pointer; border-left: 3px solid var(--p); transition: all var(--tn); }
.dict-item:active { background: rgba(255,255,255,.04); }
.dict-hd { display: flex; align-items: center; gap: 10px; }
.dict-icon { font-size: 1.3rem; }
.dict-name { font-weight: 800; font-size: .84rem; flex: 1; }
.dict-sev { font-size: .54rem; padding: 3px 8px; border-radius: 99px; font-weight: 700; }
.dict-bd { display: none; margin-top: 10px; font-size: .74rem; color: var(--t2); line-height: 1.55; }
.dict-item.exp .dict-bd { display: block; animation: slideDown .3s ease-out; }
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cult-card { background: rgba(255,255,255,.02); border-radius: var(--r); padding: 12px 6px; text-align: center; border: 1px solid rgba(148,163,184,.03); font-size: 1.8rem; transition: all var(--tn); }
.cult-card:active { border-color: var(--bda); transform: scale(.97); }
.cult-card h5 { font-size: .7rem; font-weight: 800; margin: 4px 0 1px; }
.cult-card p { font-size: .58rem; color: var(--t3); line-height: 1.3; }
.prac-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.prac-item i { color: var(--ok); margin-top: 3px; flex-shrink: 0; font-size: .7rem; filter: drop-shadow(0 0 5px rgba(16,185,129,.4)); }
.prac-item span { font-size: .76rem; color: var(--t2); line-height: 1.5; }

/* ═══ HISTORY ═══ */
.empty-state { text-align: center; padding: 3rem 2rem; }
.empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: .5; animation: eggFloat 3s ease-in-out infinite; }
.empty-state h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.empty-state p { color: var(--t2); font-size: .82rem; margin-bottom: 1.2rem; }
.hist-item { background: var(--gc); border: 1px solid var(--bd); border-radius: var(--rl); padding: 14px; margin-bottom: 10px; cursor: pointer; transition: all var(--tn); animation: fadeUp .35s ease-out; }
.hist-item:active { transform: scale(.98); border-color: var(--bda); }
.hist-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hist-date { font-size: .7rem; color: var(--t3); font-family: var(--mono); }
.hist-lv { font-size: .6rem; padding: 3px 9px; border-radius: 99px; font-weight: 800; }
.hist-summary { font-size: .78rem; color: var(--t2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hist-syms { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.hist-sym { font-size: .62rem; padding: 2px 7px; background: rgba(124,58,237,.08); color: var(--ta); border-radius: 99px; }

/* ═══ SIDE MENU ═══ */
.side-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 999; opacity: 0; visibility: hidden; transition: all var(--tn); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.side-overlay.on { opacity: 1; visibility: visible; }
.side-menu { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: var(--bg1); z-index: 1000; transform: translateX(-100%); transition: transform var(--ts); display: flex; flex-direction: column; padding-top: var(--st); border-right: 1px solid var(--bda); box-shadow: 10px 0 60px rgba(124,58,237,.1); }
.side-menu.on { transform: translateX(0); }
.side-header { display: flex; align-items: center; gap: 10px; padding: 18px; border-bottom: 1px solid var(--bd); }
.side-egg { font-size: 1.8rem; }
.side-header h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; flex: 1; background: var(--gp); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.side-header button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); color: var(--t3); transition: all var(--tf); }
.side-header button:active { background: var(--bg3); color: var(--t1); }
.side-nav { flex: 1; padding: 10px; overflow-y: auto; }
.side-nav a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); color: var(--t2); font-weight: 600; font-size: .88rem; cursor: pointer; transition: all var(--tn); }
.side-nav a:active { background: var(--bg3); color: var(--t1); }
.side-nav a i { width: 20px; text-align: center; color: var(--pl); filter: drop-shadow(0 0 5px var(--pg)); }
.side-nav hr { border: none; border-top: 1px solid var(--bd); margin: 8px 0; }
.side-footer { padding: 16px; border-top: 1px solid var(--bd); }
.side-footer p { font-size: .62rem; color: var(--t3); margin-bottom: 2px; }

/* ═══ IMAGE VIEWER ═══ */
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.97); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.viewer.on { display: flex; animation: fadeIn .3s; }
.viewer-close { position: absolute; top: calc(var(--st) + 16px); right: 16px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border-radius: 50%; color: #fff; font-size: 1rem; z-index: 1; transition: all var(--tf); backdrop-filter: blur(8px); }
.viewer-close:active { background: rgba(255,255,255,.2); transform: scale(.9); }
.viewer img { max-width: 100%; max-height: 85vh; border-radius: var(--r); object-fit: contain; }

/* ═══ TOASTS ═══ */
.toasts { position: fixed; top: calc(var(--st) + 66px); left: 50%; transform: translateX(-50%); z-index: 5000; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.toast { background: rgba(12,12,40,.96); border: 1px solid var(--bd); border-radius: var(--rl); padding: 12px 16px; margin-bottom: 7px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sl); animation: toastIn .4s ease-out; pointer-events: all; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.toast.ok { border-left: 4px solid var(--ok); }
.toast.err { border-left: 4px solid var(--err); }
.toast.warn { border-left: 4px solid var(--warn); }
.toast.info { border-left: 4px solid var(--info); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast-msg { font-size: .78rem; line-height: 1.4; }
.toast.hiding { animation: toastOut .3s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-18px) scale(.94); } }

/* ═══ UTILITY ANIMATIONS ═══ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r); }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ═══ RESPONSIVE ═══ */
@media (min-width: 480px) {
  .upload-preview-grid { grid-template-columns: repeat(4, 1fr); }
  .culture-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) {
  /* Se ensancha la VARIABLE, no `.app`. Así la barra inferior, el pie legal y
     las hojas modales crecen con la columna y sus bordes siguen coincidiendo. */
  :root { --appw: 600px; }
  .app { box-shadow: -1px 0 0 var(--bd), 1px 0 0 var(--bd); }
}