/* ============================================
   HOOKA — marketing site styles (extends tokens)
   ============================================ */

/* fonts inherited from /styles.css if loaded — declared minimal here so /web is self-contained too */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:ital,wght@0,300..700;1,300..700&family=Geist+Mono:wght@400;500;600&family=Mona+Sans:ital,wdth,wght@0,75..125,400..800;1,75..125,400..800&display=swap');

:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-accent: "Mona Sans", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  --bg: #0A0B0F;
  --bg-elev: #101218;
  --panel: #14161C;
  --panel-2: #1A1D26;
  --panel-hi: #21252F;
  --line: #252934;
  --line-soft: #1C2029;
  --text: #F4F1EC;
  --text-mid: #B8BAC4;
  --text-dim: #7A7E8C;
  --text-faint: #4F5360;

  --accent-1: #FF5B3A;     /* brasa */
  --accent-2: #C8A2FF;     /* lila */
  --accent-3: #FFB400;     /* ámbar */
  --accent-grad: linear-gradient(135deg, #FFB400 0%, #FF6A30 38%, #FF4F8E 68%, #C8A2FF 100%);
  --accent-glow: 0 0 80px -10px rgba(255, 140, 46, .55);

  --ok: #6EE7A8;
  --warn: #FBBF24;

  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  --max-w: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body, #app { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}
::selection { background: var(--accent-1); color: #0A0B0F; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.display { font-family: var(--font-display); letter-spacing: -.03em; }
.accent  { font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -.025em; }
.mono    { font-family: var(--font-mono); font-feature-settings: "tnum","ss01"; }
.grad    {
  background-image: linear-gradient(110deg, #FFB400, #FF6A30 35%, #FF4F8E 65%, #C8A2FF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* containers */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
section { position: relative; }

/* hairline divider */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  font-size: 12px; color: var(--text-mid);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(110,231,168,.5);
  animation: alivePulse 2s ease-out infinite;
}
@keyframes alivePulse {
  0% { box-shadow: 0 0 0 0 rgba(110,231,168,.55); }
  70% { box-shadow: 0 0 0 8px rgba(110,231,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,168,0); }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 500; font-size: 14px;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--panel-hi); border-color: var(--panel-hi); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent-grad);
  color: #0A0B0F;
  border: 0;
  font-weight: 600;
  box-shadow: var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-mid); }
.btn-ghost:hover { color: var(--text); background: var(--panel-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 11px; }
.btn-lg { height: 54px; padding: 0 24px; font-size: 15px; border-radius: 16px; }

/* card */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

/* shimmer fill (for alive surfaces) */
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(6%,-4%) scale(1.06); }
  66% { transform: translate(-4%,5%) scale(.96); }
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
  pointer-events: none; mix-blend-mode: screen;
  animation: blobFloat 20s ease-in-out infinite;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .blob { animation: none; }
}

/* focus */
:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 6px; }

/* =========================================================
   RESPONSIVE — mobile/tablet overrides (use !important to
   beat the inline grid styles set in the JSX components)
   ========================================================= */

/* comparison table always scrolls horizontally if it must */
.cmp-scroll { overflow: hidden; border-radius: var(--r-xl, 28px); }
.cmp-grid { min-width: 0; }
@media (max-width: 760px) {
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 980px) {
  /* trim heavy vertical rhythm */
  main > section { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* hero must clear the fixed navbar (≈68px) — keep generous top space */
  .hero-sec { padding-top: 104px !important; }

  /* alternating feature blocks → stack, visual under text */
  .r-split { grid-template-columns: 1fr !important; gap: 30px !important; }
  .r-split > * { order: 0 !important; }
  .r-split .r-split-visual { order: 2 !important; }
  .r-split .r-split-text { order: 1 !important; }

  /* 3 / 4 col grids → 2 col */
  .r-3 { grid-template-columns: 1fr 1fr !important; }
  .r-4 { grid-template-columns: 1fr 1fr !important; }

  /* how-it-works connecting line off */
  .how-line { display: none !important; }

  /* footer columns */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* product preview: drop the fake sidebar, stack the panes */
  .pp-grid { grid-template-columns: 1fr !important; }
  .pp-aside { display: none !important; }
  .pp-main { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  main > section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .hero-sec { padding-top: 100px !important; }

  /* hero rotating phrase: flow normally, smaller, never touch the edges */
  .hero-rotor { display: block !important; min-width: 0 !important; }
  .hero-rotor-spacer { display: none !important; }
  .hero-rotor-phrase {
    position: static !important; transform: none !important;
    display: block !important; white-space: normal !important;
    text-align: center !important; padding-bottom: 0 !important;
    font-size: clamp(34px, 11vw, 52px) !important; line-height: 1 !important;
    margin-top: .12em !important;
  }

  /* everything to a single column */
  .r-2, .r-3, .r-4 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }

  /* hide inline nav links; keep logo + CTA */
  .nav-links { display: none !important; }

  /* comparison table: let it scroll, give it a sensible min width */
  .cmp-grid { min-width: 560px !important; }

  /* hero KPI row stays 3-up but tighten */
  .pp-kpis { gap: 6px !important; }

  /* featured pricing card: remove the lift so it doesn't overlap */
  .plan-featured { transform: none !important; }

  /* big watermark wordmark a touch smaller already via clamp */
  .form-inline { flex-direction: column !important; }
  .form-inline > * { width: 100% !important; }
}

/* generic: never let a grid/flat row force horizontal scroll on the page */
@media (max-width: 980px) {
  .wrap { overflow-x: clip; }
}