/* FEELSGO TECH v2 - dirección premium (referencia de nivel: dinamosites.com)
   Familia AupaZu (navy/terracota/crema/lima) en registro cinematográfico oscuro */
:root {
  --cream: #F2EFE5;
  --paper: #FAF8F1;
  --ink: #10233B;
  --ink-deep: #0A1826;
  --terra: #BC4F32;
  --terra-deep: #9E3B22;
  --acid: #DCE94B;
  --pad: clamp(20px, 6vw, 96px);
  --sans: "Montserrat", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  /* tema oscuro = defecto (cinematográfico) */
  --bg: var(--ink-deep);
  --bg-raise: #0E2136;
  --fg: var(--cream);
  --fg-soft: rgba(242, 239, 229, .66);
  --line: rgba(242, 239, 229, .14);
  --accent: var(--acid);
  --glow-a: rgba(220, 233, 75, .10);
  --glow-b: rgba(188, 79, 50, .16);
}
.light-theme {
  --bg: var(--paper);
  --bg-raise: #FFFFFF;
  --fg: var(--ink);
  --fg-soft: rgba(16, 35, 59, .70);
  --line: rgba(16, 35, 59, .16);
  --accent: var(--terra);
  --glow-a: rgba(188, 79, 50, .08);
  --glow-b: rgba(220, 233, 75, .28);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}
a { color: inherit; }
::selection { background: var(--acid); color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--sans); font-weight: 800; font-size: 16px;
  letter-spacing: .06em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
}
.brand-mark {
  width: 12px; height: 12px; background: var(--acid);
  box-shadow: 5px 5px 0 var(--terra); flex: none;
}
.brand-tech { color: var(--accent); margin-left: 6px; font-weight: 700; }
.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
  text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--fg-soft);
  transition: color .18s;
}
.site-nav a:hover { color: var(--fg); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  border: 1px solid var(--line); background: none; color: var(--fg);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 15px;
  transition: border-color .18s;
}
.theme-toggle:hover { border-color: var(--fg); }

/* ---------- Botones pill ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  text-decoration: none; padding: 14px 28px; border-radius: 999px;
  background: var(--acid); color: var(--ink); border: 1px solid var(--acid);
  transition: transform .18s, background-color .18s, color .18s, border-color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-arrow { font-weight: 600; }
.btn-ghost { background: none; color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--fg); }
.light-theme .btn { background: var(--terra); border-color: var(--terra); color: var(--paper); }
.light-theme .btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); }
.light-theme .btn-ghost { background: none; color: var(--fg); border-color: var(--line); }
.btn-small { padding: 9px 18px; font-size: 13px; }

/* ---------- Hero cinematográfico ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(96px, 16vh, 180px) var(--pad) 0;
}
.hero-glow {
  position: absolute; inset: -20% -10% auto; height: 130%;
  background:
    radial-gradient(42% 38% at 72% 30%, var(--glow-b), transparent 70%),
    radial-gradient(38% 34% at 30% 60%, var(--glow-a), transparent 70%);
  filter: blur(10px);
  animation: heroDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.06); }
}
.hero-inner { position: relative; max-width: 1080px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: .24em; color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; margin-bottom: 34px;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(38px, 5.6vw, 76px); line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 15ch; margin-bottom: 28px;
}
.hero h1 em, .section h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--accent); letter-spacing: 0;
}
.lede {
  font-size: clamp(16px, 1.5vw, 19px); color: var(--fg-soft);
  max-width: 52ch; margin-bottom: 40px;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-rule {
  position: relative; margin-top: clamp(72px, 12vh, 140px);
  height: 1px; background: var(--line);
}
.hero-rule span {
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* ---------- Secciones ---------- */
.section { padding: clamp(72px, 11vh, 128px) var(--pad); border-bottom: 1px solid var(--line); }
.section-head { max-width: 1080px; }
.section-num {
  font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: .24em; color: var(--fg-soft); margin-bottom: 18px;
}
.section h2 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: 32px; max-width: 22ch;
}
.section p { color: var(--fg-soft); max-width: 62ch; font-size: 16.5px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1080px; }
.two-col p strong, .band-text strong { color: var(--fg); }

/* ---------- Pasos ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 24px;
  transition: transform .18s, border-color .18s;
}
.steps li:hover { transform: translateY(-4px); border-color: var(--accent); }
.step-num {
  display: inline-block; font-family: var(--sans); font-weight: 800; font-size: 12.5px;
  background: var(--acid); color: var(--ink);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 18px;
}
.light-theme .step-num { background: var(--terra); color: var(--paper); }
.steps h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.steps p { font-size: 14.5px; }

/* ---------- Banda AupaZu ---------- */
.section-band { background: var(--bg-raise); }
.band-text { margin-bottom: 28px; }

/* ---------- Contacto ---------- */
.contact-lede { margin-bottom: 34px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card {
  display: block; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 26px; text-decoration: none;
  transition: transform .18s, border-color .18s;
}
a.contact-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.contact-label {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; color: var(--fg-soft); margin-bottom: 12px;
}
.contact-value { font-weight: 600; font-size: 16.5px; line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer { padding: 40px var(--pad) 48px; font-size: 13.5px; color: var(--fg-soft); }
.footer-links { margin-top: 8px; }
.footer-links a { text-decoration: none; border-bottom: 1px solid var(--line); transition: color .18s, border-color .18s; }
.footer-links a:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- Legal ---------- */
.legal-body { padding: clamp(56px, 9vh, 96px) var(--pad); max-width: 820px; }
.legal-body h1 { font-family: var(--sans); font-weight: 800; letter-spacing: -.015em; font-size: clamp(28px, 3vw, 40px); margin-bottom: 30px; }
.legal-body h2 { font-family: var(--sans); font-size: 19px; margin: 34px 0 12px; }
.legal-body p { color: var(--fg-soft); margin-bottom: 12px; }
.back-link { display: inline-block; margin-bottom: 30px; font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.28,1); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-glow { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .eyebrow { font-size: 10px; letter-spacing: .16em; padding: 7px 13px; }
}
/* ---------- Hero WebGL: añadir al final del CSS existente ---------- */
.hero {
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  /* Tema oscuro por defecto; variante clara completa bajo .light-theme */
  --hero-bg: var(--ink-deep);
  --hero-fg: var(--cream);
  --hero-fg-soft: rgba(242, 239, 229, .82);
  --hero-accent: var(--acid);
  --hero-line: rgba(242, 239, 229, .18);
  --hero-base: #0A1826;
  --hero-tint-a: #DCE94B;
  --hero-tint-b: #BC4F32;
  background: var(--hero-bg);
  color: var(--hero-fg);
  --fg: var(--hero-fg);
  --fg-soft: var(--hero-fg-soft);
  --accent: var(--hero-accent);
  --line: var(--hero-line);
}
.light-theme .hero {
  --hero-bg: var(--cream);
  --hero-fg: var(--ink);
  --hero-fg-soft: rgba(16, 35, 59, .74);
  --hero-accent: var(--terra);
  --hero-line: rgba(16, 35, 59, .22);
  --hero-base: #F2EFE5;
  --hero-tint-a: #DCE94B;
  --hero-tint-b: #E09478;
}
/* Fallback visible antes del JS, con movimiento reducido o sin WebGL. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 88% 36%, rgba(188,79,50,.21), transparent 52%),
    radial-gradient(ellipse at 72% 65%, rgba(220,233,75,.16), transparent 56%),
    var(--ink-deep);
}
.light-theme .hero::before {
  background:
    radial-gradient(ellipse at 88% 36%, rgba(188,79,50,.20), transparent 52%),
    radial-gradient(ellipse at 72% 65%, rgba(220,233,75,.42), transparent 56%),
    var(--cream);
}
.hero-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.hero-fluid-ready .hero-fluid { opacity: 1; }
/* Velo constante, también sobre el fallback; protege texto y CTA. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10,24,38,.82), rgba(10,24,38,.16));
}
.light-theme .hero::after {
  background: linear-gradient(90deg, rgba(242,239,229,.86), rgba(242,239,229,.18));
}
.hero-inner, .hero-rule { z-index: 2; }
.hero .reveal { opacity: 1; transform: none; transition: none; }
.hero .btn:not(.btn-ghost) { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.hero .btn-ghost { background: var(--ink-deep); color: var(--cream); border-color: rgba(242,239,229,.38); }
.hero .btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
.light-theme .hero .btn:not(.btn-ghost) { background: var(--terra); border-color: var(--terra); color: var(--paper); }
.light-theme .hero .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(16,35,59,.42); }
.light-theme .hero .btn:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .hero-fluid { display: none; }
  .hero *, .hero::before, .hero::after { animation: none !important; transition: none !important; }
  .hero .btn:hover { transform: none; }
}

/* FEELSGO MVP RFQ - 17/09/2026 */
.lang-link { font: 700 12px var(--sans); letter-spacing:.12em; text-decoration:none; padding:8px 4px; }
.demo-section { background: color-mix(in srgb,var(--bg) 94%,var(--accent)); }
.demo-shell { margin-top:42px; max-width:1280px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--bg-raise); box-shadow:0 30px 90px rgba(0,0,0,.18); }
.demo-top { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line); }
.demo-label,.local-chip { font:700 10px var(--sans); letter-spacing:.15em; }
.demo-label { color:var(--accent); }.local-chip { color:var(--fg-soft); }
.demo-flow { display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--line); }
.demo-flow span { padding:15px 10px; text-align:center; font:600 11px var(--sans); color:var(--fg-soft); border-right:1px solid var(--line); }.demo-flow span:last-child{border:0}.demo-flow .active{color:var(--fg);box-shadow:inset 0 -2px var(--accent)}
.demo-grid { display:grid; grid-template-columns:1fr 1fr; }.demo-panel{min-height:255px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.demo-panel:nth-child(2n){border-right:0}.demo-panel:nth-last-child(-n+2){border-bottom:0}.demo-panel h3{font:700 18px var(--sans);margin-bottom:16px}.panel-kicker{font:700 10px var(--sans)!important;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;color:var(--accent)!important}.mail-line{font-size:13px;color:var(--fg-soft);padding:10px 0;border-bottom:1px solid var(--line)}.file-pill{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:10px;font-weight:600}.file-pill small{float:right;color:var(--fg-soft)}.synthetic{margin-top:18px;font:700 9px var(--sans)!important;letter-spacing:.12em}.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.fields div{padding:12px;border:1px solid var(--line);border-radius:8px}.fields dt{font-size:10px;color:var(--fg-soft)}.fields dd{font-weight:600;font-size:13px;margin-top:4px}.warning{margin-top:18px;padding:12px;border-left:3px solid #e6ad43;background:rgba(230,173,67,.08);font-size:13px!important}.score{display:flex;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:12px}.score strong{font:800 34px var(--sans);color:var(--accent)}.score span{font-size:13px}.comparable>p:last-child{font-size:13px}.trace{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.trace span{font-size:11px;padding:7px 10px;border:1px solid var(--line);border-radius:999px}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.case-card{padding:28px;background:var(--bg-raise);border:1px solid var(--line);border-radius:14px}.case-index{font:800 11px var(--sans);color:var(--accent)}.case-card h3{font:700 19px var(--sans);margin:18px 0}.case-card p{font-size:14px;margin-bottom:14px}.case-card .local-data{padding-top:14px;border-top:1px solid var(--line);color:var(--fg)!important}.case-card .metric{color:var(--accent)!important;font-weight:600}.pilot-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.pilot-steps li{padding:32px;background:var(--bg-raise)}.pilot-steps li>span{font:800 36px var(--sans);color:var(--accent)}.pilot-steps h3{font:700 18px var(--sans);margin:18px 0 10px}.pilot-steps p{font-size:14px}.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.trust-item{display:flex;gap:20px;padding:28px;background:var(--bg)}.trust-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--accent);color:var(--ink);font:800 13px var(--sans)}.light-theme .trust-icon{color:white}.trust-item h3{font:700 17px var(--sans);margin-bottom:7px}.trust-item p{font-size:14px}.contact-section{background:var(--bg-raise)}.contact-section .section-head{max-width:900px}.contact-actions{margin-top:34px}
@media(max-width:900px){.header-cta{display:none}.case-grid{grid-template-columns:1fr}.site-header{gap:14px}.header-actions{margin-left:auto}.demo-grid{grid-template-columns:1fr}.demo-panel,.demo-panel:nth-child(2n),.demo-panel:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--line)}.demo-panel:last-child{border-bottom:0}.pilot-steps{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr}.hero{padding-top:92px}}
@media(max-width:520px){.brand{font-size:13px}.site-header{padding:13px 18px}.header-actions{gap:7px}.theme-toggle{width:31px;height:31px}.hero{min-height:auto;padding-top:88px}.hero h1{font-size:39px}.hero-rule{margin-top:70px}.demo-flow{grid-template-columns:1fr 1fr}.demo-flow span{display:none}.demo-flow span:first-child,.demo-flow span:last-child{display:block}.demo-top{align-items:flex-start;gap:10px}.local-chip{text-align:right}.demo-panel{min-height:auto;padding:22px}.fields{grid-template-columns:1fr}.section{padding-top:70px;padding-bottom:70px}.trust-item{padding:22px}.contact-actions .btn{width:100%;justify-content:center}}
/* Deterministic full-page capture: prevents 100vh hero from expanding to the tall screenshot viewport. */
.capture-mode .hero { min-height: 900px; }
@media(max-width:520px){.capture-mode .hero{min-height:780px}}