/* ===== SECTION: hero =====
   Top bar + neural-scene hero + the band below it (video, promise, 5 benefits).
   Tokens come from ../site.css. Mobile (390px) is designed first; desktop
   composition lives in the min-width:1025px block at the end. */

/* ---------- top bar ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter) 16px; color:var(--ink);
}
.wordmark{
  font-family:var(--serif); font-weight:400; font-size:1.2rem; letter-spacing:-.01em;
  text-decoration:none; font-variation-settings:'opsz' 24; color:var(--ink);
}
.topbar-cta{
  display:none; font-size:.86rem; font-weight:500; text-decoration:none; padding:9px 18px;
  background:var(--ink); color:var(--ground); border-radius:var(--pill); transition:background .2s ease;
}
.topbar-cta:hover{ background:#2b2b29; }

/* ---------- stage ---------- */
section.hero{ display:block; min-height:0; padding:0; border:0; overflow:visible; background:var(--surface); color:var(--ink); }
section.hero > div{ width:100%; max-width:none; margin:0; }
.hero-stage{
  position:relative; isolation:isolate; overflow:hidden; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:7rem var(--gutter) 6rem;
}
.hero-stage > *{ position:relative; z-index:1; }

/* scene layers (painted by neural-hero.js; drift + blur here) */
.hero-scene{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:.42; }
.hero-scene canvas{ position:absolute; top:0; left:0; will-change:transform; }
.scene-far{ filter:blur(22px); animation:drift-far 90s ease-in-out infinite alternate; }
.scene-mid,.scene-live{ animation:drift-mid 110s ease-in-out infinite alternate; }
.scene-near{ filter:blur(28px); animation:drift-near 75s ease-in-out infinite alternate; }
/* a soft pool of light where the copy sits */
.scene-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 78% 42% at 50% 47%,rgba(250,249,245,.62),rgba(250,249,245,.25) 55%,transparent 78%);
}
.scene-grain{
  position:absolute; inset:-50%; opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.75'/></svg>");
  animation:grain 1.4s steps(6) infinite;
}
@keyframes drift-far{ from{ transform:translate3d(-1%,-.6%,0) scale(1.02); } to{ transform:translate3d(1%,.6%,0) scale(1.05); } }
@keyframes drift-mid{ from{ transform:translate3d(-.5%,.35%,0); } to{ transform:translate3d(.5%,-.35%,0); } }
@keyframes drift-near{ from{ transform:translate3d(1.4%,1%,0); } to{ transform:translate3d(-1.4%,-1%,0); } }

/* ---------- copy ---------- */
.hero .callout{
  font-size:.64rem; font-weight:500; line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 auto 22px; white-space:nowrap;
}
.hero .callout .hl{ font:inherit; color:inherit; background:none; padding:0; letter-spacing:inherit; }
.hero .callout .callout-dot{ display:inline-block; width:4px; height:4px; margin:0 .7em; border-radius:50%; background:var(--accent); vertical-align:.18em; }
@media (max-width:640px){ .hero .callout{ white-space:normal; text-wrap:balance; line-height:1.7; } }
.hero h1{ margin:0 auto 26px; color:var(--ink); font-size:clamp(2.4rem,10.6vw,3.25rem); line-height:1; }
/* palabra rotativa: ocupa su propia línea, nunca parte ni cambia de alto; el cursor solo aparece con JS */
.hero-rotate{ display:block; white-space:nowrap; min-height:1em; }
.hero-caret{
  display:none; width:.055em; height:.82em; margin-left:.08em; border-radius:1px;
  background:var(--accent); vertical-align:-.04em;
}
.hero-rotate.is-live .hero-caret{ display:inline-block; animation:hero-caret 1.1s steps(2,start) infinite; }
/* logo junto a la palabra (Claude Code → marca de Claude Code de LobeHub Icons, ChatGPT → flor de
   OpenAI); aparece al terminar de escribirla. --w: ancho encendido (la de Claude Code es 24:15) */
.hero-logo{
  --w:.7em;
  display:inline-block; width:0; height:.7em; margin-left:0; opacity:0; vertical-align:-.02em;
  background:var(--ink);
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
  transition:width .28s var(--ease), margin .28s var(--ease), opacity .28s ease;
}
.hero-logo.is-on{ width:var(--w); margin-left:.22em; opacity:1; }
.hero-logo[data-logo="claude"]{ --logo:url("../logos/claude-code.svg"); --w:1.04em; height:.65em; background:var(--accent); }
.hero-logo[data-logo="openai"]{ --logo:url("../logos/openai.svg"); }   /* la flor de OpenAI, en negro como manda su marca */
@media (prefers-reduced-motion:reduce){ .hero-logo{ transition:none; } }
@keyframes hero-caret{ to{ visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .hero-rotate.is-live .hero-caret{ display:none; } }

.hero .social-proof{
  display:inline-flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:4px 9px;
  margin:0 auto 26px; padding:4px 12px 4px 4px; max-width:100%; white-space:nowrap;
  background:var(--white); border:1px solid var(--line); border-radius:var(--pill);
  box-shadow:0 1px 2px rgba(20,20,19,.04), 0 8px 20px -16px rgba(20,20,19,.3);
  color:var(--body-ink); font-size:.78rem; letter-spacing:0; text-decoration:none; line-height:1.2;
}
.hero .social-proof > span{ display:inline-flex; align-items:center; gap:4px; }
.hero .social-proof strong{ color:var(--ink); font-weight:600; }
/* pila de avatares al estilo Skool: iniciales de miembros reales */
.hero .social-proof .avatars{ display:inline-flex; gap:0; margin-right:2px; }
.hero .social-proof .avatars i{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:-9px;
  border-radius:50%; border:2px solid var(--white); font-style:normal; font-weight:600; font-size:.66rem; color:#fff;
  background:var(--accent);
}
.hero .social-proof .avatars i:first-child{ margin-left:0; }
.hero .social-proof .avatars i:nth-child(2){ background:var(--kraft); }
.hero .social-proof .avatars i:nth-child(3){ background:var(--cactus); }
.hero .social-proof .avatars i:nth-child(4){ background:#6a6a66; }
.hero .social-proof .stars{ color:var(--kraft); font-size:.9em; transform:translateY(-.04em); }
.hero .social-proof > span + span::before{ content:""; width:3px; height:3px; margin-right:6px; border-radius:50%; background:var(--line-strong); }
.hero .social-proof > span.avatars + span::before{ display:none; }
.hero .social-proof .more-link{
  color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line-strong);
  text-underline-offset:3px; transition:text-decoration-color .2s ease;
}
.hero .social-proof:hover .more-link{ text-decoration-color:var(--ink); }

.hero .mt{ margin:0; display:flex; width:100%; justify-content:center; }
.hero .cta-offer{
  display:inline-flex; width:auto; min-height:52px; gap:12px; padding:13px 24px; font-size:.92rem;
  box-shadow:0 18px 40px -22px rgba(20,20,19,.45);
}
.hero .cta-offer .cta-label{ font-size:inherit; }
.hero .cta-offer .cta-pricing{ font-size:.82rem; opacity:.62; }
.hero .cta:hover{ transform:translateY(-1px); }
.hero .hero-note{ margin-top:16px; color:var(--muted); font-size:.78rem; letter-spacing:.01em; text-align:center; }

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .hero .callout,.hero h1,.hero .social-proof,.hero .mt,.hero .hero-note{ opacity:0; animation:hero-in 1s var(--ease) forwards; }
  .hero h1{ animation-delay:.1s; }
  .hero .social-proof{ animation-delay:.2s; }
  .hero .mt{ animation-delay:.3s; }
  .hero .hero-note{ animation-delay:.36s; }
}

/* ---------- band below the scene: video + promise + 5 benefits ---------- */
.hero-more{ background:var(--ground); color:var(--ink); padding:3.5rem var(--gutter) 4.5rem; border-top:1px solid var(--line); }
.hero-more > *{ width:min(100%,1040px); margin-inline:auto; }
/* En móvil el hero empieza más abajo: el globo del video (≈135 px de alto) no debe tapar el eyebrow. */
@media (max-width:640px){
  /* centrado "seguro": si el contenido no cabe en 100svh, respeta el padding superior en vez de
     desbordar por arriba (justify-content:center lo haría) */
  .hero-stage{ padding-top:10.5rem; justify-content:flex-start; }
  .hero .callout{ margin-top:auto; }
  .hero .hero-note{ margin-bottom:auto; }
}

/* En móvil el video vive escondido hasta que tocan el globo (video-bubble.js abre el hueco). */
.hero-video-slot{ display:grid; grid-template-rows:1fr; }
.hero-video-slot-inner{ min-height:0; overflow:hidden; }
@media (max-width:640px){
  .hero-video-slot{ grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
  .hero-video-slot.is-open{ grid-template-rows:1fr; }
  .hero-video-slot:not(.is-open) + .benefits-intro{ margin-top:0; }
}
.hero-video{
  display:block; width:min(100%,800px); margin:0 auto; aspect-ratio:16/9; object-fit:cover;
  background:#141413; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 40px 90px -40px rgba(20,20,19,.35);
}
.hero .benefits-intro{
  text-align:center; font-weight:400; color:var(--ink); margin:3rem auto 1.5rem; max-width:22ch;
  font-family:var(--serif); font-size:1.5rem; line-height:1.2; letter-spacing:-.01em; font-variation-settings:'opsz' 36; text-wrap:balance;
}
/* mobile: one quiet column with fine rules */
.hero ul.checks{ display:block; border-top:1px solid var(--line); }
.hero ul.checks li{
  position:relative; padding:15px 0 15px 38px; border-bottom:1px solid var(--line);
  background:none; border-radius:0; color:var(--ink); font-family:var(--serif); font-size:1.18rem; line-height:1.3;
  letter-spacing:-.01em; font-variation-settings:'opsz' 24;
}
.hero ul.checks li::before{
  left:0; top:15px; width:22px; height:22px; border-radius:50%;
  background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-size:.66rem;
}
.hero ul.checks li strong{ font-weight:400; }

/* ---------- desktop ---------- */
@media (min-width:641px){
  .topbar{ padding:22px var(--gutter); }
  .wordmark{ font-size:1.35rem; }
  .topbar-cta{ display:inline-flex; align-items:center; }
  .hero-stage{ padding:clamp(7rem,18vh,11rem) var(--gutter) clamp(6rem,14vh,9rem); }
  .scene-vignette{ background:radial-gradient(ellipse 52% 50% at 50% 50%,rgba(250,249,245,.5),rgba(250,249,245,.18) 55%,transparent 76%); }
  .hero .callout{ font-size:.72rem; letter-spacing:.18em; margin-bottom:28px; white-space:normal; }
  .hero h1{ font-size:clamp(2.75rem,5.8vw,5.2rem); line-height:1.04; margin-bottom:30px; }
  .hero .social-proof{ gap:6px 12px; margin-bottom:34px; padding:6px 16px 6px 6px; font-size:.86rem; }
  .hero .social-proof .avatars i{ width:28px; height:28px; font-size:.7rem; }
  .hero .cta-offer{ padding:14px 28px; font-size:.95rem; }
  .hero .hero-note{ font-size:.8rem; }
  .hero-more{ padding:clamp(4rem,8vw,7rem) var(--gutter); }
  .hero-video{ border-radius:var(--radius); }
  .hero .benefits-intro{ font-size:clamp(1.5rem,2.2vw,1.9rem); margin:clamp(3rem,6vw,4.5rem) auto 2.25rem; max-width:none; }
}
@media (min-width:1025px){
  /* five columns separated by hairlines, icon above a short serif line */
  .hero ul.checks{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .hero ul.checks li{
    padding:28px 22px 30px 24px; border-bottom:0; border-left:1px solid var(--line); font-size:1.22rem; line-height:1.25;
  }
  .hero ul.checks li:first-child{ border-left:0; padding-left:0; }
  .hero ul.checks li::before{ position:static; display:inline-flex; margin-bottom:18px; }
  .hero ul.checks li strong{ display:block; text-wrap:balance; }
}