/* ══════════════════════════════════════════════════════════════
   RESET & TOKENS — RowFlu, lenguaje visual Apple.
   Paleta compartida con /login/ y con la app (src/app/css/style.css).
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

:root{
  /* Stack SF-first: en Apple resuelve a SF Pro sin coste de red; fuera de
     Apple cae a Inter. La única webfont propia es el wordmark. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
               'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-brand: 'Bricolage Grotesque', var(--font-sans);

  --bg:         #F5F5F7;
  --surface:    #FFFFFF;
  --surface-2:  #FBFBFD;
  --ink:        #111111;
  --ink-soft:   #6E6E73;
  --ink-tenue:  #8E8E93;
  --line:       #E5E5EA;
  --line-soft:  rgba(0,0,0,.06);

  --lime:       #C7FF6B;
  --lime-rgb:   199,255,107;
  /* Lima legible como texto sobre fondo claro (#C7FF6B daría ~1.4:1) */
  --lime-text:  #4D7C0F;

  --grad-cool:  linear-gradient(135deg,#7DD3FC 0%,#A78BFA 100%);
  --halo-cool:  radial-gradient(closest-side, rgba(125,211,252,.42), rgba(167,139,250,.20), transparent 70%);
  --halo-lime:  radial-gradient(closest-side, rgba(199,255,107,.34), transparent 70%);

  --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 140ms; --dur-base: 180ms; --dur-slow: 220ms;
}

body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   WORDMARK — única pieza que conserva la tipografía de marca
   ══════════════════════════════════════════════════════════════ */
.wordmark{display:inline-flex;align-items:flex-end;text-decoration:none;font-family:var(--font-brand);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;font-size:1.24rem;line-height:1}
.wordmark .wm-row{color:var(--ink)}
.wordmark .wm-flu{color:var(--ink-soft)}
.wordmark .wm-accent{width:.2em;height:.62em;background:var(--lime);transform:skewX(-18deg);margin:0 .08em .02em .02em;border-radius:1px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   LAYOUT — mucho aire, contenido centrado, atmósfera sutil detrás
   ══════════════════════════════════════════════════════════════ */
.beta-page{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:2.4rem 1.5rem 4rem;
  overflow:hidden;
}
/* Halo de aurora difuso detrás de la tarjeta — da profundidad sin
   ensuciar el fondo. Una sola capa, muy difuminada. */
.beta-page::before{
  content:'';
  position:absolute;
  top:-180px;left:50%;
  width:min(900px,120vw);height:620px;
  transform:translateX(-50%);
  background:var(--halo-cool);
  filter:blur(40px);
  opacity:.75;
  pointer-events:none;
  z-index:0;
}
.beta-page > *{position:relative;z-index:1}

.beta-top{width:100%;max-width:620px;margin-bottom:2.2rem}

@keyframes betaFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:betaFadeIn .5s var(--ease) both}
.beta-waitlist.reveal{animation-delay:.07s}
.beta-access.reveal{animation-delay:.14s}

/* ── Tarjeta principal: vidrio muy discreto sobre el halo ── */
.beta-card{
  width:100%;max-width:620px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:3rem 2.6rem 3.2rem;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(0,0,0,.16);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .beta-card{backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
}

/* ── Badge de beta: lima usado con moderación, texto en tono legible ── */
.beta-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lime-text);
  background:rgba(var(--lime-rgb),.16);
  border:1px solid rgba(var(--lime-rgb),.45);
  padding:.38rem .8rem;border-radius:var(--r-full);
  margin-bottom:1.8rem;
}
.beta-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--lime-text);position:relative;flex-shrink:0}
.beta-badge-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--lime-text);animation:betaPulse 2.4s ease-out infinite}
@keyframes betaPulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.2);opacity:0}}

/* ── Orbe AI ── */
.beta-orb-wrap{position:relative;width:min(200px,50vw);aspect-ratio:1/1;margin:0 auto 1.8rem}
.beta-orb-wrap::before{
  content:'';position:absolute;inset:-18%;
  background:var(--halo-lime);filter:blur(22px);opacity:.7;pointer-events:none;
}
.beta-orb-canvas{position:relative;width:100%;height:100%;display:block}

/* ── Tipografía editorial: titular grande, tracking apretado ── */
.beta-title{
  font-size:clamp(1.75rem,4.2vw,2.6rem);
  font-weight:680;
  line-height:1.08;
  letter-spacing:-.032em;
  color:var(--ink);
  margin-bottom:1.1rem;
  text-wrap:balance;
}
.beta-subtitle{
  font-size:1.02rem;line-height:1.55;color:var(--ink);
  font-weight:500;letter-spacing:-.012em;
  max-width:470px;margin:0 auto 1rem;
  text-wrap:pretty;
}
.beta-body{
  font-size:.92rem;line-height:1.68;color:var(--ink-soft);
  max-width:440px;margin:0 auto 2.2rem;
  text-wrap:pretty;
}

/* ── Botones: primario negro sólido, secundario en superficie clara ── */
.beta-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.btn-beta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.82rem 1.6rem;border-radius:var(--r-full);
  font-weight:590;font-size:.92rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.btn-beta:active{transform:scale(.978)}
.btn-beta-primary{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn-beta-primary:hover{background:#26262A;box-shadow:0 8px 22px -8px rgba(0,0,0,.4)}
.btn-beta-outline{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-beta-outline:hover{background:var(--surface-2);border-color:#D2D2D7}
.btn-beta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(125,211,252,.5)}

/* ── Secciones secundarias ── */
.beta-waitlist,.beta-access{width:100%;max-width:620px;text-align:center;margin-top:3rem}
.beta-waitlist h2{font-size:1.22rem;font-weight:640;letter-spacing:-.022em;color:var(--ink);margin-bottom:.6rem}
.beta-waitlist p{font-size:.9rem;line-height:1.65;color:var(--ink-soft);max-width:480px;margin:0 auto;text-wrap:pretty}

.beta-access{padding-top:2.4rem;border-top:1px solid var(--line)}
.beta-access h3{font-size:1.04rem;font-weight:620;letter-spacing:-.018em;color:var(--ink);margin-bottom:.5rem}
.beta-access p{font-size:.88rem;line-height:1.6;color:var(--ink-soft);max-width:430px;margin:0 auto 1.3rem;text-wrap:pretty}

.beta-footer{margin-top:3.2rem;font-size:.78rem;color:var(--ink-soft)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .beta-page{padding:1.8rem 1.1rem 3rem}
  .beta-card{padding:2.2rem 1.4rem 2.4rem;border-radius:var(--r-lg)}
  .beta-actions{flex-direction:column;width:100%}
  .btn-beta{width:100%}
  .beta-waitlist,.beta-access{margin-top:2.2rem}
  .beta-access{padding-top:1.8rem}
}

/* ══════════════════════════════════════════════════════════════
   MODO OSCURO — sigue la preferencia del sistema
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0B0C; --surface:#141416; --surface-2:#1C1C1F;
    --ink:#F5F5F7; --ink-soft:#B0B0B5; --ink-tenue:#8E8E93;
    --line:#2C2C2E; --line-soft:rgba(255,255,255,.07);
    --lime-text:#C7FF6B;
    --halo-cool:radial-gradient(closest-side, rgba(125,211,252,.24), rgba(167,139,250,.14), transparent 70%);
    --halo-lime:radial-gradient(closest-side, rgba(199,255,107,.18), transparent 70%);
  }
  .beta-card{background:rgba(20,20,22,.72);box-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 60px -24px rgba(0,0,0,.6)}
  .btn-beta-primary{background:var(--ink);color:#0B0B0C}
  .btn-beta-primary:hover{background:#E4E4E7}
  .btn-beta-outline{background:var(--surface);border-color:var(--line)}
  .btn-beta-outline:hover{background:var(--surface-2);border-color:#3A3A3C}
}