/* =========================================================
   Trusty — refresh moderno (propuesta)
   Marca conservada (morado/magenta/naranja dark) + tipografía Space Grotesk/Inter
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --bg:            hsl(260 32% 5%);
  --bg-2:          hsl(262 32% 7%);
  --surface:       hsl(260 30% 10%);
  --surface-2:     hsl(262 28% 13%);
  --border:        hsl(260 22% 20%);
  --border-soft:   hsl(260 22% 16%);

  --fg:            hsl(240 8% 96%);
  --fg-muted:      hsl(245 8% 70%);
  --fg-faint:      hsl(245 8% 52%);

  --primary:       hsl(270 100% 63%);
  --primary-deep:  hsl(270 100% 40%);
  --accent:        hsl(285 96% 64%);   /* magenta */
  --secondary:     hsl(30 100% 52%);   /* naranja */
  --wa:            hsl(145 63% 45%);   /* whatsapp */

  --grad-text:  linear-gradient(100deg, hsl(275 100% 78%), hsl(288 96% 68%) 55%, hsl(30 100% 62%));
  --grad-cta:   linear-gradient(100deg, hsl(288 96% 58%), hsl(30 100% 52%));
  --grad-brand: linear-gradient(135deg, hsl(270 100% 55%), hsl(285 96% 60%));

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --maxw: 1180px;
  --gap-section: clamp(4.5rem, 9vw, 8rem);

  --shadow-card: 0 24px 60px -30px hsl(275 100% 8% / .9);
  --shadow-glow: 0 0 0 1px hsl(285 96% 64% / .35), 0 20px 60px -20px hsl(285 96% 40% / .35);

  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.08; letter-spacing:-.02em }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
img{ max-width:100%; display:block }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto }

/* ---------- HELPERS ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-head); font-weight:500; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.6 }
.gradient-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section{ padding-block:var(--gap-section) }
.section-head{ max-width:640px; margin-bottom:3.2rem }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 3rem); margin:.8rem 0 .9rem }
.section-head p{ color:var(--fg-muted); font-size:1.06rem }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--font-head); font-weight:600; font-size:.98rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-pill); border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px }
.btn-primary{ background:var(--grad-cta); color:hsl(275 60% 10%); box-shadow:0 10px 30px -10px hsl(30 100% 50% / .5) }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px hsl(30 100% 50% / .65) }
.btn-ghost{ background:hsl(260 30% 14% / .6); color:var(--fg); border-color:var(--border) }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); background:hsl(260 30% 18% / .7) }
.btn-lg{ padding:1rem 1.8rem; font-size:1.05rem }

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s, backdrop-filter .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:hsl(260 32% 5% / .82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; font-size:1.28rem }
.brand .logo{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad-brand); box-shadow:0 6px 18px -6px hsl(285 96% 50% / .7);
}
.brand .logo svg{ width:20px; height:20px; color:#fff }
.nav-links{ display:flex; align-items:center; gap:2rem }
.nav-links a{ font-size:.95rem; color:var(--fg-muted); transition:color .2s; position:relative }
.nav-links a:hover{ color:var(--fg) }
.nav-cta{ display:flex; align-items:center; gap:1rem }
.nav-toggle{ display:none; background:none; border:0; color:var(--fg); cursor:pointer }

/* ---------- HERO ---------- */
.hero{ position:relative; padding-top:9.5rem; padding-bottom:5rem; overflow:hidden }
.hero-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.hero-glow::before,.hero-glow::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px) }
.hero-glow::before{ width:560px; height:560px; top:-180px; left:-120px; background:hsl(270 100% 45% / .38) }
.hero-glow::after{ width:520px; height:520px; bottom:-220px; right:-100px; background:hsl(30 100% 50% / .22) }
.hero-grid-bg{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(hsl(260 30% 40% / .07) 1px, transparent 1px),
                   linear-gradient(90deg, hsl(260 30% 40% / .07) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 75%);
}
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center }
.badge{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.82rem; font-weight:500;
  padding:.4rem .85rem; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:hsl(260 30% 12% / .6); color:var(--fg-muted);
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px hsl(145 63% 45% / .2) }
.hero h1{ font-size:clamp(2.5rem, 5.4vw, 4.15rem); margin:1.4rem 0 1.3rem }
.hero p.lead{ font-size:1.16rem; color:var(--fg-muted); max-width:33ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem }
.trust{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--border-soft) }
.trust div{ display:flex; flex-direction:column }
.trust b{ font-family:var(--font-head); font-size:1.5rem }
.trust span{ font-size:.82rem; color:var(--fg-faint) }

/* hero card (QR) */
.hero-card{
  position:relative; background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem;
  box-shadow:var(--shadow-card);
}
.hero-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:var(--grad-cta); opacity:.35; filter:blur(14px);
}
.hero-card .qr{
  aspect-ratio:1; background:#fff; border-radius:var(--radius-sm); display:grid; place-items:center;
  padding:1rem;
}
.hero-card .qr img{ width:100% }
.hero-card h3{ font-size:1.1rem; margin:1.1rem 0 .3rem }
.hero-card p{ font-size:.9rem; color:var(--fg-muted) }
.hero-card .wa-mini{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; color:var(--wa); font-weight:600; font-size:.9rem }

/* ---------- AUDIENCE ---------- */
.audience-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem }
.trait{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:1.5rem 1.2rem; transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.trait:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--surface-2) }
.trait .ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:1rem;
  background:hsl(285 96% 64% / .12); color:var(--accent);
}
.trait .ico svg{ width:22px; height:22px }
.trait h3{ font-size:1.02rem; margin-bottom:.3rem }
.trait p{ font-size:.86rem; color:var(--fg-muted) }

/* ---------- MODULES ---------- */
.modules-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.module{
  position:relative; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:1.7rem 1.6rem; overflow:hidden;
  transition:transform .28s var(--ease), border-color .28s, box-shadow .28s;
}
.module::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; opacity:0; transition:opacity .28s;
  background:var(--grad-cta);
}
.module:hover{ transform:translateY(-5px); border-color:var(--border); box-shadow:var(--shadow-card) }
.module:hover::after{ opacity:1 }
.module .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem }
.module .ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg, hsl(270 100% 55% / .18), hsl(285 96% 60% / .1));
  border:1px solid hsl(285 96% 64% / .22); color:var(--accent);
}
.module .ico svg{ width:23px; height:23px }
.module .num{ font-family:var(--font-head); font-weight:700; font-size:2.2rem; color:hsl(260 20% 22%) }
.module h3{ font-size:1.12rem; margin-bottom:.5rem }
.module > p{ font-size:.9rem; color:var(--fg-muted); margin-bottom:1.1rem }
.doc{ border-top:1px dashed var(--border); padding-top:.9rem }
.doc span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); font-weight:600 }
.doc p{ font-size:.85rem; color:var(--fg-muted); margin-top:.35rem }

/* ---------- CONOCE TRUSTY (value prop) ---------- */
.band{
  position:relative; background:linear-gradient(160deg, hsl(262 30% 9%), hsl(260 32% 6%));
  border-block:1px solid var(--border-soft);
}
.band-inner{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center }
.band .section-head{ margin-bottom:0 }
.features{ display:grid; gap:1rem }
.feature{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; background:hsl(260 30% 11% / .55); border:1px solid var(--border-soft); border-radius:var(--radius) }
.feature .ico{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:hsl(285 96% 64% / .12); color:var(--accent) }
.feature .ico svg{ width:21px; height:21px }
.feature h3{ font-size:1rem; margin-bottom:.2rem }
.feature p{ font-size:.88rem; color:var(--fg-muted) }

/* ---------- FUNDADOR ---------- */
.founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center }
.founder-photo{ position:relative; max-width:380px }
.founder-photo img{ width:100%; border-radius:var(--radius); border:1px solid var(--border); aspect-ratio:1; object-fit:cover }
.founder-photo::before{
  content:""; position:absolute; inset:-14px -14px auto auto; width:70%; height:70%; z-index:-1;
  border-radius:var(--radius); background:var(--grad-cta); opacity:.5; filter:blur(38px);
}
.founder-card h3{ font-size:clamp(1.6rem, 3vw, 2.1rem) }
.cred{ display:inline-flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 1.3rem; color:var(--accent); font-family:var(--font-head); font-weight:500; font-size:.9rem }
.founder-card > p{ color:var(--fg-muted); margin-bottom:1.4rem }
.tags{ display:flex; flex-wrap:wrap; gap:.6rem }
.tag{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; padding:.45rem .9rem; border-radius:var(--radius-pill); background:hsl(260 30% 13%); border:1px solid var(--border); color:var(--fg-muted) }
.tag svg{ width:15px; height:15px; color:var(--secondary) }
.founder-cta{ margin-top:1.6rem }
.founder-cta svg{ color:#0A66C2 }

/* ---------- EXPERIENCIA (WhatsApp mockup) ---------- */
.exp{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center }
.phone{
  justify-self:center; width:330px; max-width:100%; background:hsl(260 30% 8%);
  border:10px solid hsl(260 20% 15%); border-radius:38px; overflow:hidden;
  box-shadow:var(--shadow-card), 0 0 0 1px var(--border);
}
.chat-head{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; background:hsl(260 30% 12%); border-bottom:1px solid var(--border-soft) }
.chat-head .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--grad-brand); font-family:var(--font-head); font-weight:700; color:#fff }
.chat-head b{ font-size:.95rem; display:block }
.chat-head span{ font-size:.75rem; color:var(--wa) }
.chat{
  padding:1rem .9rem; display:flex; flex-direction:column; gap:.55rem; min-height:420px;
  background:
    radial-gradient(circle at 20% 10%, hsl(270 60% 20% / .25), transparent 40%),
    hsl(260 30% 6%);
}
.bubble{ max-width:80%; padding:.6rem .8rem; border-radius:14px; font-size:.86rem; line-height:1.45; position:relative }
.bubble.in{ align-self:flex-start; background:hsl(260 24% 17%); border-bottom-left-radius:4px }
.bubble.out{ align-self:flex-end; background:hsl(145 45% 26%); border-bottom-right-radius:4px; color:hsl(140 30% 96%) }
.bubble time{ display:block; font-size:.62rem; opacity:.6; margin-top:.25rem; text-align:right }

/* ---------- TESTIMONIOS ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem }
.testi{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.7rem; display:flex; flex-direction:column; gap:1rem }
.testi:hover{ border-color:var(--border) }
.stars{ display:flex; gap:.15rem; color:var(--secondary) }
.stars svg{ width:17px; height:17px; fill:currentColor }
.testi blockquote{ color:var(--fg); font-size:.98rem; line-height:1.6 }
.testi .who{ display:flex; align-items:center; gap:.8rem; margin-top:auto }
.avatar{ width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-head); font-weight:600; color:#fff; background:var(--grad-brand) }
.who .name{ font-weight:600; font-size:.92rem }
.who .meta{ font-size:.78rem; color:var(--fg-faint) }
.who .badge-pilot{ margin-left:auto; font-size:.68rem; padding:.3rem .6rem; border-radius:var(--radius-pill); background:hsl(285 96% 64% / .12); color:var(--accent); border:1px solid hsl(285 96% 64% / .25); white-space:nowrap }

/* ---------- CTA BAND ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(3.5rem,7vw,6rem) }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 60% 100% at 50% 100%, hsl(285 96% 45% / .22), transparent 70%) }
.cta-card{
  max-width:760px; margin-inline:auto; padding:clamp(2rem,5vw,3.5rem);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:calc(var(--radius) + 6px); box-shadow:var(--shadow-card);
}
.cta-card h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin-bottom:.9rem }
.cta-card p{ color:var(--fg-muted); margin-bottom:1.8rem; font-size:1.05rem }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--border-soft); background:hsl(260 32% 4%) }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-block:3.5rem 2.5rem }
.footer .brand{ margin-bottom:.9rem }
.footer p.tag-line{ color:var(--fg-muted); font-size:.9rem; max-width:32ch }
.footer h4{ font-family:var(--font-head); font-size:.95rem; margin-bottom:1rem }
.footer ul{ display:grid; gap:.6rem }
.footer a{ color:var(--fg-muted); font-size:.9rem; transition:color .2s }
.footer a:hover{ color:var(--fg) }
.socials{ display:flex; gap:.7rem; margin-top:.3rem }
.socials a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:hsl(260 30% 12%); border:1px solid var(--border); color:var(--fg-muted) }
.socials a:hover{ color:var(--accent); border-color:var(--accent) }
.socials svg{ width:18px; height:18px }
.foot-bottom{ border-top:1px solid var(--border-soft); padding-block:1.4rem; text-align:center; color:var(--fg-faint); font-size:.82rem }

@media (max-width:960px){
  .band-inner, .founder, .exp{ grid-template-columns:1fr; gap:2.5rem }
  .founder-photo{ max-width:300px }
  .testi-grid{ grid-template-columns:1fr }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:2rem }
}
@media (max-width:560px){
  .footer-inner{ grid-template-columns:1fr }
}

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s } .reveal.d3{ transition-delay:.18s }
.reveal.d4{ transition-delay:.24s } .reveal.d5{ transition-delay:.3s }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; gap:2.5rem }
  .hero-card{ max-width:360px }
  .audience-grid{ grid-template-columns:repeat(2,1fr) }
  .modules-grid{ grid-template-columns:repeat(2,1fr) }
  .nav-links{ display:none }
  .nav-toggle{ display:grid }
}
@media (max-width:560px){
  .audience-grid{ grid-template-columns:1fr 1fr }
  .modules-grid{ grid-template-columns:1fr }
  .hero p.lead{ max-width:none }
  .nav-cta .btn span{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}