/* ============================================================
   STARSEED CAFÉ · ONBOARDING — introducción guiada (2 pasos)
   Cristal líquido · Art Nouveau · Solarpunk · neón.
   Aparece tras iniciar sesión. Pantalla completa, backdrop blur.
   Usa exclusivamente los tokens de tokens.css (no inventa colores).
   Sin dependencias externas.
   ============================================================ */

/* ---------- overlay raíz (capa muy alta, sobre todo) ---------- */
.sos-onb{
  position:fixed; inset:0; z-index:400;            /* por encima de modales (200) y FAB */
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3vw,40px);
  /* velo cacao oscuro + tinte de marca + desenfoque del fondo vivo */
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--musgo) 30%,transparent), transparent 60%),
    radial-gradient(120% 90% at 80% 110%, color-mix(in srgb,var(--cacao) 60%,transparent), transparent 62%),
    color-mix(in srgb,var(--bg-0) 88%, #000);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  opacity:0; visibility:hidden;
  transition:opacity .34s var(--ease-glide), visibility 0s linear .34s;
  overflow-y:auto;
}
.sos-onb.show{ opacity:1; visibility:visible; transition:opacity .4s var(--ease-glide); }
/* estado de salida (cierre con animación) */
.sos-onb.leaving{ opacity:0; }

/* aura iridiscente sutil que respira detrás del panel */
.sos-onb::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:var(--grad-cristal); opacity:.10; mix-blend-mode:screen;
  filter:blur(60px);
  animation:sos-aura var(--breath-slow) var(--ease-soft) infinite alternate;
}
@keyframes sos-aura{ from{transform:scale(1) rotate(0)} to{transform:scale(1.12) rotate(8deg)} }

/* ---------- panel principal (cristal) ---------- */
.sos-onb-card{
  position:relative; z-index:1;
  width:min(980px, 100%); margin:auto;
  border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,46px) clamp(20px,3.4vw,48px) clamp(24px,3vw,40px);
  background:linear-gradient(180deg, var(--glass-strong), var(--glass));
  border:1px solid var(--stroke);
  box-shadow:
    0 40px 120px rgba(0,0,0,.6),
    inset 0 1px 0 var(--glass-hi),
    0 0 60px color-mix(in srgb, var(--ac, var(--neon-amber)) 22%, transparent);
  /* el acento --ac lo inyecta el JS según el paso/local */
  --ac:var(--neon-amber);
  transition:box-shadow .5s var(--ease-glide);
}
/* borde-arcoíris fino en el contorno del panel */
.sos-onb-card::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1.4px;
  pointer-events:none; opacity:.55; background:var(--grad-arcoiris);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* aparición del panel */
.sos-onb.show .sos-onb-card{ animation:sos-pop .5s var(--ease-elastic) both; }
@keyframes sos-pop{ from{transform:translateY(22px) scale(.96); opacity:0} to{transform:none; opacity:1} }

/* ---------- cabecera: marca + pasos + cerrar ---------- */
.sos-onb-top{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(18px,2.4vw,30px); }
.sos-onb-brand{ display:flex; align-items:center; gap:13px; min-width:0; }
.sos-onb-brand img{
  width:54px; height:54px; border-radius:50%; flex:none;
  box-shadow:var(--halo-amber);
  animation:sos-breathe var(--breath) var(--ease-soft) infinite;
}
@keyframes sos-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.sos-onb-brand .bt{ font-family:var(--serif); font-weight:600; font-size:clamp(18px,2vw,23px); line-height:1; }
.sos-onb-brand .bs{ font-size:11px; color:var(--ink-mute); letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }

/* indicador de pasos (1/2 · 2/2) a la derecha */
.sos-onb-steps{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
.sos-onb-dots{ display:flex; gap:8px; }
.sos-onb-dot{
  width:34px; height:6px; border-radius:var(--r-pill);
  background:var(--stroke-soft); border:1px solid var(--stroke);
  transition:.3s var(--ease-glide);
}
.sos-onb-dot.on{
  width:46px; background:var(--ac, var(--neon-amber));
  border-color:transparent; box-shadow:0 0 14px color-mix(in srgb,var(--ac,var(--neon-amber)) 60%,transparent);
}
.sos-onb-count{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:.05em; }
.sos-onb-count b{ color:var(--ink); }

/* botón cerrar (esquina) */
.sos-onb-x{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:var(--glass); border:1px solid var(--stroke); color:var(--ink-soft);
  transition:.2s var(--ease-glide);
}
.sos-onb-x:hover{ transform:rotate(90deg) scale(1.08); color:var(--ink); border-color:color-mix(in srgb,var(--ac,var(--neon-amber)) 50%,transparent); }

/* ---------- zona de contenido (pasos) ---------- */
.sos-onb-body{ position:relative; }
.sos-onb-step{ display:none; }
.sos-onb-step.active{ display:block; animation:sos-step-in .42s var(--ease-glide) both; }
@keyframes sos-step-in{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* títulos grandes y generosos */
.sos-onb-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ac, var(--neon-amber)); margin-bottom:10px; display:inline-flex; gap:8px; align-items:center;
}
.sos-onb-title{
  font-family:var(--serif); font-weight:600; line-height:1.05; letter-spacing:-.015em;
  font-size:clamp(30px,5.2vw,56px); margin-bottom:12px;
}
.sos-onb-title em{ font-style:italic; color:var(--ac, var(--neon-amber)); }
.sos-onb-sub{
  font-size:clamp(15px,1.7vw,19px); color:var(--ink-soft); line-height:1.5;
  max-width:60ch; margin-bottom:clamp(20px,2.6vw,32px);
}

/* ============================================================
   PASO 1 · Rejilla de LOCALES (zones)
   ============================================================ */
.sos-zone-grid{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.sos-zone{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:clamp(16px,1.8vw,22px) 16px 18px;
  border-radius:var(--r-card); cursor:pointer;
  background:linear-gradient(180deg, var(--glass-strong), var(--glass));
  border:1.5px solid var(--stroke);
  box-shadow:var(--shadow-card);
  transition:transform .28s var(--ease-glide), box-shadow .28s var(--ease-glide), border-color .28s var(--ease-glide);
  /* --za = acento del local (lo inyecta el JS por tarjeta) */
  --za:var(--neon-amber);
}
.sos-zone:hover, .sos-zone:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--za) 60%, transparent);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb,var(--za) 36%,transparent);
  outline:none;
}
/* halo radial del acento detrás del vaso */
.sos-zone::before{
  content:""; position:absolute; left:50%; top:14%; width:60%; height:50%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, var(--za), transparent 68%);
  opacity:.30; filter:blur(14px); pointer-events:none; z-index:0;
  transition:opacity .3s var(--ease-glide);
}
.sos-zone:hover::before{ opacity:.5; }
/* imagen del vaso */
.sos-zone-img{
  position:relative; z-index:1; width:clamp(96px,12vw,138px); height:auto; aspect-ratio:3/4;
  object-fit:contain; filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
  transition:transform .4s var(--ease-elastic);
}
.sos-zone:hover .sos-zone-img{ transform:scale(1.06) rotate(-1.5deg); }
/* respaldo cuando no hay imagen (gema cristal con inicial) */
.sos-zone-fallback{
  position:relative; z-index:1; width:clamp(96px,12vw,128px); aspect-ratio:3/4;
  border-radius:18px 18px 40px 40px; display:grid; place-items:center;
  font-family:var(--serif); font-size:38px; color:var(--ink);
  background:linear-gradient(180deg, color-mix(in srgb,var(--za) 30%,transparent), color-mix(in srgb,var(--za) 12%,var(--cacao)));
  border:1.5px solid color-mix(in srgb,var(--za) 40%,transparent);
  box-shadow:inset 0 12px 26px rgba(255,255,255,.16), 0 14px 30px rgba(0,0,0,.4);
}
.sos-zone-name{
  position:relative; z-index:1; font-family:var(--serif); font-weight:600;
  font-size:clamp(16px,1.5vw,19px); line-height:1.15; margin-top:4px;
}
.sos-zone-motif{
  position:relative; z-index:1; font-size:12px; color:var(--ink-soft);
  font-family:var(--mono); line-height:1.4; max-width:24ch;
}
/* tarjeta del local actual: marcada */
.sos-zone.current{ border-color:color-mix(in srgb, var(--za) 70%, transparent); }
.sos-zone-chip{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); color:var(--cacao); font-weight:700;
  background:var(--za); box-shadow:0 0 12px color-mix(in srgb,var(--za) 60%,transparent);
}

/* ============================================================
   PASO 2 · Rejilla de ÁREAS (botones grandes + descripción)
   ============================================================ */
.sos-area-grid{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  justify-content:center; margin-bottom:clamp(22px,2.6vw,30px);
}
/* cada celda = botón (tarjeta) + descripción debajo */
.sos-area-cell{ display:flex; flex-direction:column; gap:10px; }
.sos-area-btn{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:12px; width:100%; min-height:clamp(150px,17vw,180px);
  padding:clamp(20px,2.4vw,30px) 18px; border-radius:var(--r-card); cursor:pointer;
  background:linear-gradient(180deg, var(--glass-strong), var(--glass));
  border:1.5px solid var(--stroke); color:var(--ink);
  box-shadow:var(--shadow-card);
  transition:transform .28s var(--ease-glide), box-shadow .28s var(--ease-glide), border-color .28s var(--ease-glide);
  /* --aa = acento del área */
  --aa:var(--neon-lime);
}
.sos-area-btn:hover, .sos-area-btn:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--aa) 62%, transparent);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 36px color-mix(in srgb,var(--aa) 38%,transparent);
  outline:none;
}
/* franja de acento superior */
.sos-area-btn::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--aa); opacity:.9;
}
/* aura radial del acento */
.sos-area-btn::after{
  content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px;
  border-radius:50%; background:radial-gradient(circle, var(--aa), transparent 68%);
  opacity:.22; filter:blur(8px); pointer-events:none;
  transition:opacity .3s var(--ease-glide);
}
.sos-area-btn:hover::after{ opacity:.4; }
/* icono grande (emoji/símbolo) */
.sos-area-icon{
  position:relative; z-index:1; font-size:clamp(40px,4.4vw,54px); line-height:1;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
  transition:transform .4s var(--ease-elastic);
}
.sos-area-btn:hover .sos-area-icon{ transform:scale(1.12) translateY(-2px); }
.sos-area-name{
  position:relative; z-index:1; font-family:var(--serif); font-weight:600;
  font-size:clamp(18px,1.9vw,23px); line-height:1.1;
}
/* descripción DEBAJO del botón */
.sos-area-desc{
  font-size:14px; color:var(--ink-soft); line-height:1.5; text-align:center;
  padding:0 6px; max-width:34ch; margin:0 auto;
}

/* ---------- pie del paso 2: acciones grandes ---------- */
.sos-onb-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:clamp(8px,1.4vw,16px);
}
/* botón secundario "Volver" */
.sos-onb-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  background:var(--glass); color:var(--ink); border:1px solid var(--stroke);
  transition:.2s var(--ease-glide);
}
.sos-onb-back:hover{ transform:translateX(-3px); border-color:color-mix(in srgb,var(--ac,var(--neon-amber)) 45%,transparent); }
/* botón secundario grande "Explorar libremente" */
.sos-onb-skip{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:16px;
  background:var(--grad-solar); color:#fff; border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--halo-amber);
  transition:.24s var(--ease-elastic);
}
.sos-onb-skip:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.06); }

/* ============================================================
   RESPONSIVE · en móvil 1 columna y tipografías ajustadas
   ============================================================ */
@media (max-width:720px){
  .sos-onb-card{ padding:22px 18px 26px; border-radius:var(--r-card); }
  .sos-onb-top{ flex-wrap:wrap; gap:12px; }
  .sos-onb-steps{ width:100%; margin-left:0; justify-content:space-between; order:3; }
  .sos-onb-x{ position:absolute; top:14px; right:14px; }
  .sos-zone-grid{ grid-template-columns:1fr; }
  .sos-area-grid{ grid-template-columns:1fr; }
  .sos-onb-foot{ flex-direction:column-reverse; align-items:stretch; }
  .sos-onb-back, .sos-onb-skip{ width:100%; justify-content:center; }
}

/* ============================================================
   ACCESIBILIDAD · respeta prefers-reduced-motion
   (tokens.css ya neutraliza animaciones; reforzamos aquí)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sos-onb, .sos-onb-card, .sos-onb-step,
  .sos-onb::before, .sos-zone, .sos-zone-img, .sos-area-btn,
  .sos-area-icon, .sos-onb-brand img{
    animation:none !important;
    transition-duration:.001ms !important;
  }
  .sos-onb-card{ animation:none !important; }
}

/* foco visible coherente con el sistema */
.sos-onb :focus-visible{ outline:2px solid var(--ac, var(--neon-amber)); outline-offset:3px; border-radius:14px; }