/* ============================================================
   Guiadeo Web — landing de funnel (Fase 1)
   Dirección de arte: 04 Kinetic Type + 10 Cinematic Dark (catálogo)
   Tipo: Bricolage Grotesque (display) + Hanken Grotesk (cuerpo) — 2 familias
   (gate G1 del design-lint prohíbe una 3ra familia — no Instrument Serif acá).
   Color: tinta #0C1220 + coral #E05C5C + blanco #F4F4F2.
   Motion: reveals via IntersectionObserver + 1 marquee keyframe + 1 pulse
   keyframe. Respeta prefers-reduced-motion en todo momento.
   ============================================================ */

:root{
  /* ---- Paleta (única fuente de hex del documento — gate G2) ---- */
  --ink:        #0C1220;   /* fondo base cinematográfico */
  --ink-2:      #121A2E;   /* paneles / secciones alternas */
  --surface:    #182238;   /* cards */
  --white:      #F4F4F2;   /* texto principal sobre oscuro */
  --coral:      #E05C5C;   /* acento marca — CTAs, foco */
  --coral-600:  #C64848;   /* hover del acento */
  --coral-100:  #F7DCDA;   /* tinte claro — solo texto pequeño sobre oscuro */

  --line:  rgba(244,244,242,.14);
  --line-strong: rgba(244,244,242,.24);
  --muted: rgba(244,244,242,.64);
  --muted-2: rgba(244,244,242,.44);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.83rem,.80rem + .15vw,.94rem);
  --step-0:  clamp(1rem,.96rem + .22vw,1.13rem);
  --step-1:  clamp(1.25rem,1.17rem + .39vw,1.5rem);
  --step-2:  clamp(1.56rem,1.42rem + .66vw,2.05rem);
  --step-3:  clamp(1.95rem,1.6rem + 1.6vw,2.9rem);
  --display: clamp(2.6rem,1.75rem + 4.6vw,4.9rem);

  --maxw: 1160px;
  --r-block: 20px;
  --r-inner: 12px;
  --r-pill: 999px;

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* grano de firma cinematográfico — 0KB, SVG inline (mismo patrón que planes-webs-ads) */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:screen;
}
header, main, footer, .wa-float{ position:relative; z-index:2; }

h1,h2,h3{ font-family:var(--font-display); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button{ font:inherit; }
::selection{ background:var(--coral); color:var(--ink); }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:8px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:clamp(56px,9vw,112px) 0; }
.muted{ color:var(--muted); }

/* ---- Reveal on scroll — solo opacity/transform, sin @keyframes ---- */
.fade-up{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.fade-up.visible{ opacity:1; transform:none; }
.fade-up.stagger-1{ transition-delay:.06s; }
.fade-up.stagger-2{ transition-delay:.12s; }
.fade-up.stagger-3{ transition-delay:.18s; }
.fade-up.stagger-4{ transition-delay:.24s; }

/* Kinetic type — palabra por palabra, mismo patrón que app.js de planes-webs-ads */
.reveal-words .w{ display:inline-block; opacity:0; transform:translateY(.4em); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.reveal-words.visible .w{ opacity:1; transform:none; }

.section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); }
.kicker{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:700; font-size:var(--step--1); text-transform:uppercase; letter-spacing:.16em;
  color:var(--coral);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--coral); display:inline-block; }
.section-head h2{ font-size:var(--step-3); margin-top:14px; }
.section-head p{ font-size:var(--step-1); color:var(--muted); margin-top:14px; max-width:56ch; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(12,18,32,.78); border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.nav__logo img{ height:26px; width:auto; }
.nav__links{ display:none; list-style:none; margin:0; padding:0; gap:28px; align-items:center; }
.nav__links a{ font-weight:600; font-size:var(--step--1); color:var(--muted); transition:color var(--dur-fast); }
.nav__links a:hover{ color:var(--white); }
@media (min-width:860px){ .nav__links{ display:flex; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  cursor:pointer; border:0; border-radius:var(--r-pill); padding:15px 26px;
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast);
  white-space:nowrap;
}
.btn--sm{ padding:11px 18px; font-size:var(--step--1); }
.btn--wa{ background:var(--coral); color:var(--ink); box-shadow:0 8px 30px rgba(224,92,92,.28); }
.btn--wa:hover{ background:var(--coral-600); transform:translateY(-2px); }
.btn--ghost{ background:transparent; border:1.5px solid var(--line-strong); color:var(--white); }
.btn--ghost:hover{ border-color:var(--coral); color:var(--coral); }
.wa-ico{ width:18px; height:18px; flex:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(40px,7vw,88px) 0 clamp(24px,4vw,48px); position:relative; }
.hero__inner{ display:grid; grid-template-columns:1fr; gap:clamp(36px,6vw,64px); align-items:center; }
@media (min-width:920px){ .hero__inner{ grid-template-columns:1.05fr .95fr; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:8px; font-size:var(--step--1); font-weight:700;
  color:var(--coral-100); background:rgba(224,92,92,.14); border:1px solid rgba(224,92,92,.3);
  padding:7px 14px; border-radius:var(--r-pill); margin-bottom:18px;
}
.hero__badge svg{ width:12px; height:12px; }

.hero h1{ font-size:var(--display); letter-spacing:-.035em; }
.hero h1 em{ font-style:normal; color:var(--coral); }
.hero__sub{ font-size:var(--step-1); color:var(--muted); max-width:46ch; margin-top:20px; line-height:1.5; }

.hero__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__trust{ margin-top:28px; display:flex; flex-wrap:wrap; gap:18px 26px; }
.hero__trust-item{ display:flex; align-items:center; gap:8px; font-size:var(--step--1); color:var(--muted); }
.hero__trust-item svg{ width:14px; height:14px; color:var(--coral); flex:none; }

/* Phone mockup con video real embebido */
.hero__phone{ justify-self:center; width:min(320px,78vw); position:relative; }
.hero__phone-frame{
  border:10px solid var(--surface); border-radius:38px; overflow:hidden;
  aspect-ratio:9/19.5; background:var(--ink); box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px var(--line);
  position:relative;
}
.hero__phone-frame::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:46%; height:22px; background:var(--surface); border-radius:0 0 16px 16px; z-index:2;
}
.hero__phone video{ width:100%; height:100%; object-fit:cover; }
.hero__phone-glow{
  position:absolute; inset:-40px; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(224,92,92,.28), transparent 70%);
  filter:blur(10px);
}

/* ============================================================
   MARQUEE firma
   ============================================================ */
.marquee{ overflow:hidden; border-top:1.5px solid var(--line-strong); border-bottom:1.5px solid var(--line-strong); background:var(--coral); }
.marquee .track{ display:inline-flex; gap:0; white-space:nowrap; will-change:transform; animation:gd-scroll 28s linear infinite; }
.marquee span{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.1rem,2.8vw,1.7rem);
  letter-spacing:-.01em; padding:14px 26px; display:inline-flex; align-items:center; gap:22px;
  text-transform:uppercase; color:var(--ink);
}
.marquee span::after{ content:"✱"; opacity:.55; }
@keyframes gd-scroll{ to{ transform:translateX(-50%); } }

/* ============================================================
   SHOWCASE — webs reales
   ============================================================ */
.showcase{ background:var(--ink-2); }
.showcase__grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:760px){ .showcase__grid{ grid-template-columns:1fr 1fr; } }

.showcase__video{
  border-radius:var(--r-block); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:9/16; max-height:520px; margin:0 auto; box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.showcase__video video{ width:100%; height:100%; object-fit:cover; }

.showcase__shots{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }
.shot-card{
  border-radius:var(--r-inner); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); position:relative; aspect-ratio:9/14;
}
.shot-card img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.shot-card__tag{
  position:absolute; left:10px; bottom:10px; font-size:.72rem; font-weight:700;
  background:rgba(12,18,32,.82); color:var(--white); padding:6px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
}

/* ============================================================
   PLANES — ladder good-better-best
   ============================================================ */
.plans{ display:grid; gap:22px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:880px){ .plans{ grid-template-columns:repeat(3,1fr); } }

.plan-card{
  border:1px solid var(--line); border-radius:var(--r-block); padding:clamp(26px,3vw,32px);
  background:var(--surface); display:flex; flex-direction:column; gap:18px; position:relative;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.plan-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.plan-card__eyebrow{ font-size:var(--step--1); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.plan-card__name{ font-family:var(--font-display); font-weight:800; font-size:var(--step-2); }
.plan-card__price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan-card__price .amount{ font-family:var(--font-display); font-weight:800; font-size:var(--step-3); }
.plan-card__price .period{ color:var(--muted); font-size:var(--step--1); }
.plan-card__setup{ font-size:var(--step--1); color:var(--muted); }
.plan-card__tagline{ color:var(--muted); font-size:var(--step-0); }
.plan-card__features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan-card__features li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--step--1); }
.plan-card__features svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--coral); }
.plan-card .btn{ width:100%; }

.plan-card--featured{
  border-color:var(--coral); background:linear-gradient(165deg, var(--surface), var(--ink-2));
  box-shadow:0 30px 70px rgba(224,92,92,.14);
}
@media (min-width:880px){ .plan-card--featured{ transform:scale(1.04); } .plan-card--featured:hover{ transform:scale(1.04) translateY(-4px); } }
.plan-card__ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--coral); color:var(--ink); font-family:var(--font-display); font-weight:800;
  font-size:var(--step--1); padding:6px 16px; border-radius:var(--r-pill); white-space:nowrap;
}
.plans__note{ text-align:center; color:var(--muted-2); font-size:var(--step--1); margin-top:26px; }

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.steps{ display:grid; gap:26px; grid-template-columns:1fr; counter-reset:step; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ display:flex; flex-direction:column; gap:14px; position:relative; padding-top:6px; }
.step__n{
  font-family:var(--font-display); font-weight:800; font-size:var(--step-2); color:var(--coral);
  display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  border:1.5px solid var(--line-strong); border-radius:16px;
}
.step h3{ font-size:var(--step-1); }
.step p{ color:var(--muted); }

/* ============================================================
   LEAD FORM — POST /api/growth/lead + botón WhatsApp
   ============================================================ */
.capture{ background:var(--ink-2); }
.capture__inner{ display:grid; gap:clamp(32px,5vw,54px); }
@media (min-width:920px){ .capture__inner{ grid-template-columns:.85fr 1.15fr; align-items:start; } }

.capture__wa{
  border:1px solid var(--line); border-radius:var(--r-block); padding:clamp(28px,3vw,36px);
  background:var(--surface); display:flex; flex-direction:column; gap:18px;
}
.capture__wa h3{ font-size:var(--step-1); }
.capture__wa p{ color:var(--muted); }
.capture__wa .btn{ align-self:flex-start; }

.leadform{
  border:1px solid var(--line); border-radius:var(--r-block); padding:clamp(28px,3vw,36px);
  background:var(--surface); display:flex; flex-direction:column; gap:16px;
}
.field label{ display:block; font-size:var(--step--1); font-weight:700; margin-bottom:8px; color:var(--muted); }
.field input, .field textarea{
  width:100%; background:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-inner);
  color:var(--white); font-family:var(--font-body); font-size:var(--step-0); padding:13px 14px;
  transition:border-color var(--dur-fast);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--coral); }
.field textarea{ resize:vertical; min-height:88px; }
.leadform__row{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:560px){ .leadform__row{ grid-template-columns:1fr 1fr; } }
.leadform__msg{ font-size:var(--step--1); min-height:1.2em; }
.leadform__msg.show.ok{ color:var(--coral-100); }
.leadform__msg.show.err{ color:#ffb4b4; }
.leadform__submit{ width:100%; }

/* ============================================================
   CTA FINAL + FOOTER
   ============================================================ */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:var(--step-3); }
.cta-final p{ color:var(--muted); font-size:var(--step-1); margin-top:14px; max-width:52ch; margin-left:auto; margin-right:auto; }
.cta-final .btn{ margin-top:28px; font-size:1.05rem; padding:17px 34px; }

.footer{ border-top:1px solid var(--line); padding:32px 0; }
.footer__inner{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.footer__logo img{ height:22px; }
.footer__copy{ color:var(--muted-2); font-size:var(--step--1); }
@media (min-width:700px){ .footer__inner{ flex-direction:row; justify-content:space-between; text-align:left; } }

/* ============================================================
   WA FLOTANTE — siempre visible, esquina inferior derecha
   ============================================================ */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:30;
  display:flex; align-items:center; gap:9px; background:var(--coral); color:var(--ink);
  padding:14px 18px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:800;
  font-size:var(--step--1); box-shadow:0 14px 34px rgba(224,92,92,.4); animation:gd-pulse 2.6s ease-in-out infinite;
}
.wa-float svg{ width:20px; height:20px; }
@keyframes gd-pulse{ 0%,100%{ box-shadow:0 14px 34px rgba(224,92,92,.4); } 50%{ box-shadow:0 14px 34px rgba(224,92,92,.65), 0 0 0 8px rgba(224,92,92,.08); } }

/* ============================================================
   ACCESIBILIDAD — reduced motion mata TODO el motion, sin excepción
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .fade-up, .reveal-words .w{ opacity:1 !important; transform:none !important; }
  .marquee .track{ animation:none !important; }
  .wa-float{ animation:none !important; }
}