:root{
  --bg:#0a0a0f;
  --bg-panel:#131319;
  --bg-panel-2:#1c1c26;
  --gold:#FFD700;
  --gold-deep:#C9971A;
  --rojo:#C8102E;
  --rojo-deep:#8B0A1F;
  --voz:#3355A4;
  --text:#F3F1EA;
  --text-soft:#9797AE;
  --text-faint:#5C5C70;
  --border:rgba(255,255,255,0.08);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

::selection{background:var(--gold);color:var(--bg);}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ===== BACKGROUND TEXTURE ===== */
.bg-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,215,0,0.08), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 20%, rgba(155,89,182,0.07), transparent 55%),
    radial-gradient(ellipse 800px 500px at 50% 110%, rgba(200,16,46,0.06), transparent 60%);
}

.andean-dots{
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events:none;
}

/* ===== LAYOUT ===== */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}

section{padding:120px 0;}
@media (max-width:760px){ section{padding:76px 0;} }

/* ===== NAV ===== */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,10,15,0.72);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-mark{
  font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:0.5px;
  color:var(--text);display:flex;align-items:center;gap:9px;
}
.nav-mark svg{width:22px;height:22px;flex-shrink:0;}
.icon-cord{animation:iconSway 3.6s ease-in-out infinite;}
.icon-cord-1{animation-delay:0s;}
.icon-cord-2{animation-delay:.2s;}
.icon-cord-3{animation-delay:.4s;}
.icon-cord-4{animation-delay:.6s;}
.icon-cord-5{animation-delay:.8s;}
@keyframes iconSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.icon-knot{animation:iconKnotPulse 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.icon-cord-1 .icon-knot{animation-delay:.12s;}
.icon-cord-2 .icon-knot{animation-delay:.32s;}
.icon-cord-3 .icon-knot{animation-delay:.52s;}
.icon-cord-4 .icon-knot{animation-delay:.72s;}
.icon-cord-5 .icon-knot{animation-delay:.92s;}
@keyframes iconKnotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
@media (prefers-reduced-motion: reduce){
  .icon-cord,.icon-knot{animation:none !important;}
}
.nav-cta{
  font-family:var(--sans);font-weight:600;font-size:13.5px;
  color:var(--bg);background:var(--gold);
  padding:9px 19px;border-radius:8px;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,215,0,0.25);}

/* ===== HERO ===== */
.hero{padding:104px 0 90px;position:relative;}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);opacity:0.6;}
.eyebrow .gloss{color:var(--text-faint);text-transform:none;letter-spacing:0;font-style:italic;}

.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(42px, 7vw, 78px);
  line-height:1.03;
  letter-spacing:-0.01em;
  max-width:14ch;
  margin-bottom:26px;
}
.hero h1 em{
  font-style:italic;font-weight:500;
  background:linear-gradient(100deg, var(--gold) 20%, var(--gold-deep) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero .lede{
  font-size:19px;line-height:1.6;color:var(--text-soft);
  max-width:46ch;margin-bottom:44px;
}
.hero .lede strong{color:var(--text);font-weight:600;}

.hero-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:14px;}

.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#1a1408;font-weight:700;font-size:15.5px;
  padding:16px 30px;border-radius:11px;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(255,215,0,0.3);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,215,0,0.42);}
.btn-primary svg{width:17px;height:17px;transition:transform .18s ease;}
.btn-primary:hover svg{transform:translateX(3px);}

.link-secondary{
  font-size:14.5px;font-weight:600;color:var(--text-soft);
  text-decoration:none;border-bottom:1px solid var(--border);
  padding-bottom:2px;transition:color .15s ease, border-color .15s ease;
}
.link-secondary:hover{color:var(--gold);border-color:var(--gold);}

.hero-hint{
  font-family:var(--mono);font-size:12px;color:var(--text-faint);
  display:flex;align-items:center;gap:8px;
}
.hero-hint .kbd{
  background:var(--bg-panel-2);border:1px solid var(--border);
  padding:2px 7px;border-radius:5px;color:var(--text-soft);font-size:11px;
}

/* ===== WAVEFORM SIGNATURE ===== */
.waveform-stage{
  margin-top:64px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-panel), var(--bg));
  border-radius:18px;
  padding:38px 32px 30px;
  position:relative;
  overflow:hidden;
}
.waveform-stage::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 500px 200px at 50% 0%, rgba(255,215,0,0.08), transparent 70%);
  pointer-events:none;
}
.wf-label{
  font-family:var(--mono);font-size:11.5px;color:var(--text-faint);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.wf-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:wfPulseDot 1.6s ease-in-out infinite;}
@keyframes wfPulseDot{0%,100%{opacity:1;}50%{opacity:0.35;}}

.quipu-hero-wrap{max-width:640px;margin:0 auto;}
#heroQuipuSvg{width:100%;height:auto;display:block;overflow:visible;}
.hero-spine{stroke:#FFD700;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,215,0,0.4));}
.hero-cord{stroke:#C9971A;stroke-width:2.2;stroke-linecap:round;}
.hero-knot{transform-box:fill-box;transform-origin:center;}
.hero-knot-hollow{fill:#0a0a0f;stroke:#D4A72C;stroke-width:1.6;}
.hero-knot-filled{fill:#F3E9D2;stroke:#F3E9D2;stroke-width:1.6;}
.hero-cord-letter{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;fill:#8a8598;text-anchor:middle;}
.hero-anim-draw{animation:heroDrawLine .6s ease-out forwards;}
@keyframes heroDrawLine{from{stroke-dashoffset:var(--len);}to{stroke-dashoffset:0;}}
.hero-anim-pop{opacity:0;animation:heroPopKnot .4s ease-out forwards;}
@keyframes heroPopKnot{0%{opacity:0;transform:scale(0.3);}70%{transform:scale(1.15);}100%{opacity:1;transform:scale(1);}}
.hero-anim-letter{opacity:0;animation:heroFadeUpLetter .5s ease-out forwards;}
@keyframes heroFadeUpLetter{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Vaivén continuo, como cuerdas de quipu meciéndose — arranca tras la entrada inicial */
.hero-cord-sway{
  animation:heroCordSway 4s ease-in-out infinite;
}
@keyframes heroCordSway{
  0%{transform:rotate(0deg);}
  25%{transform:rotate(2.2deg);}
  75%{transform:rotate(-2.2deg);}
  100%{transform:rotate(0deg);}
}
@keyframes heroKnotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

.wf-caption{
  text-align:center;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:17px;color:var(--text-soft);margin-top:14px;
}

@media (prefers-reduced-motion: reduce){
  .hero-anim-draw,.hero-anim-pop,.hero-anim-letter,.wf-dot{animation:none !important;opacity:1 !important;}
}

/* ===== SECTION HEADERS ===== */
.section-head{margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px, 4.4vw, 44px);line-height:1.12;
  max-width:16ch;
}

/* ===== DEMO SECTION (habla -> se registra) ===== */
.demo-section{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.demo-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:0;align-items:stretch;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:var(--bg);
}
@media (max-width:820px){
  .demo-grid{grid-template-columns:1fr;}
  .demo-arrow{transform:rotate(90deg);padding:14px 0;}
}

.demo-col{padding:36px 32px;}
.demo-col-label{
  font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:22px;
}
.demo-quote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:22px;line-height:1.42;color:var(--text);
  position:relative;padding-left:6px;
}
.demo-mic{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--voz);
}
.demo-mic svg{width:15px;height:15px;}

.demo-arrow{
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;color:var(--gold);flex-shrink:0;
}
.demo-arrow svg{width:26px;height:26px;}

.receipt{
  background:var(--bg-panel-2);border-radius:11px;padding:20px 22px;
  font-family:var(--mono);font-size:13.5px;
}
.receipt-row{display:flex;justify-content:space-between;padding:7px 0;color:var(--text-soft);}
.receipt-row b{color:var(--text);font-weight:500;}
.receipt-div{height:1px;background:var(--border);margin:10px 0;}
.receipt-total{display:flex;justify-content:space-between;font-size:15px;padding-top:2px;}
.receipt-total b{color:var(--gold);font-weight:700;}
.receipt-check{
  margin-top:16px;display:flex;align-items:center;gap:7px;
  font-size:12px;color:#4ADE80;
}
.receipt-check svg{width:14px;height:14px;}

/* ===== VALUE LIST ===== */
.value-list{display:flex;flex-direction:column;}
.value-row{
  display:grid;grid-template-columns:120px 1fr;gap:32px;
  padding:36px 0;border-top:1px solid var(--border);
  align-items:baseline;
}
.value-row:last-child{border-bottom:1px solid var(--border);}
@media (max-width:600px){
  .value-row{grid-template-columns:1fr;gap:10px;}
}
.value-tag{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:20px;color:var(--gold);
}
.value-body p{font-size:16.5px;line-height:1.62;color:var(--text-soft);max-width:52ch;}
.value-body p strong{color:var(--text);font-weight:600;}

/* ===== PRICE STRIP ===== */
.price-strip{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;
  font-family:var(--mono);font-size:13.5px;color:var(--text-soft);
  margin-top:20px;
}
.price-strip b{color:var(--gold);font-weight:600;}
.price-dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint);}

/* ===== FINAL CTA ===== */
.final-cta{text-align:center;}
.final-cta h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(34px, 5.4vw, 56px);line-height:1.08;
  margin-bottom:22px;
}
.final-cta h2 em{
  font-style:italic;font-weight:500;color:var(--gold);
}
.final-cta .lede{
  font-size:17px;color:var(--text-soft);max-width:44ch;margin:0 auto 40px;
}
.final-cta .hero-cta-row{justify-content:center;}
.final-cta .hero-hint{justify-content:center;margin-top:18px;}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);padding:44px 0;}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-mark{
  font-family:var(--mono);font-size:12.5px;color:var(--text-faint);
  display:flex;align-items:center;gap:10px;
}
.footer-links{display:flex;gap:22px;}
.footer-links a{
  font-size:13px;color:var(--text-soft);text-decoration:none;
  display:flex;align-items:center;gap:7px;transition:color .15s ease;
}
.footer-links a:hover{color:var(--gold);}
.footer-links svg{width:15px;height:15px;}