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

:root {
  /* Paleta exacta de la app */
  --zg:   #0cd400;
  --zgd:  rgba(12,212,0,0.10);
  --zgx:  rgba(12,212,0,0.25);
  --zdk:  #0e0e0e;
  --zd2:  #000000;
  --zd3:  #121214;
  --zb:   #1a1a1a;
  --zb2:  #2a2a2a;
  --zt:   #ffffff;
  --zt2:  #a3a3a3;
  --zt3:  #9298a3;
  --zt4:  #6b6f78;
  --red:  #E53935;
  --yellow: #facc15;
  --blue: #3b82f6;
  --violet: #a78bfa;
  --amber: #fbbf24;
  --orange: #f97316;

  /* Card3D gradiente — igual que la app */
  --card-g0: #2c2e37;
  --card-g1: #1f2026;
  --card-g2: #191a1f;
  --card-border-top: rgba(255,255,255,0.24);
  --card-border-left: rgba(255,255,255,0.10);
  --card-border-other: rgba(255,255,255,0.06);

  /* Tile de ícono inset */
  --tile-bg: #0c0c0e;
  --tile-bt: rgba(0,0,0,0.6);
  --tile-br: rgba(255,255,255,0.05);
  --tile-bb: rgba(255,255,255,0.07);
  --tile-bl: rgba(0,0,0,0.4);

  /* Aliases legacy (usados en inline styles del HTML) */
  --ztm: rgba(163,163,163,0.7);
  --ztd: rgba(163,163,163,0.35);
  --zsafe: #0cd400;
  --zwarn: #facc15;
  --zdng: #E53935;
  --zinfo: #3b82f6;
  --zs:  rgba(255,255,255,0.025);
  --zsh: rgba(255,255,255,0.045);
  --zb2: #2a2a2a;

  --fd: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth }

body {
  background: var(--zdk);
  color: var(--zt);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000;
  border-bottom: 1px solid var(--zb)
}

.nav-logo {
  font-family: var(--fd);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--zt);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none
}

.nav-links a {
  color: var(--zt3);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .02em;
  transition: color .2s
}

.nav-links a:hover { color: var(--zt) }

.nav-cta {
  background: linear-gradient(180deg,#1ee85a,var(--zg),#09a800) !important;
  color: #04210a !important;
  padding: .5rem 1.25rem;
  border-radius: 8px;
  font-weight: 800 !important;
  font-size: .82rem !important;
  letter-spacing: .04em;
  border-top: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 4px 12px rgba(12,212,0,0.35);
  transition: opacity .2s, transform .15s !important
}

.nav-cta:hover { opacity: .88 !important; transform: translateY(-1px) !important }

.logo-nav { width: 50px }

/* hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--zt);
  border-radius: 2px;
  transition: all .3s
}

/* ── LAYOUT ── */
section {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 clamp(1.5rem, 5vw, 4rem)
}

.container { max-width: 1120px; margin: 0 auto }

/* ── CARD 3D (sistema visual de la app) ── */
.card3d {
  background: linear-gradient(160deg, var(--card-g0) 0%, var(--card-g1) 50%, var(--card-g2) 100%);
  border-width: 1px;
  border-style: solid;
  border-color: var(--card-border-other);
  border-top-color: var(--card-border-top);
  border-left-color: var(--card-border-left);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  transition: transform .15s, box-shadow .15s
}

.card3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.6)
}

/* Tile de ícono inset (hundido, como en la app) */
.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tile-bg);
  border-width: 1px;
  border-style: solid;
  border-top-color: var(--tile-bt);
  border-left-color: var(--tile-bl);
  border-right-color: var(--tile-br);
  border-bottom-color: var(--tile-bb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.icon-tile svg { color: #e2e2e2 }

/* ── JELLY BUTTON (efecto rebote de la app) ── */
@keyframes jelly-press {
  0%   { transform: scale(1) }
  30%  { transform: scale(0.936) }
  60%  { transform: scale(1.034) }
  80%  { transform: scale(0.992) }
  100% { transform: scale(1) }
}

.btn-jelly:active { animation: jelly-press .28s ease }

/* Botón primario 3D */
.btn-primary {
  background: linear-gradient(180deg, #1ee85a, var(--zg), #09a800);
  color: #04210a;
  padding: .9rem 2rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.45);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(12,212,0,0.4);
  transition: opacity .2s, transform .15s
}

.btn-primary:hover { opacity: .88; transform: translateY(-1px) }
.btn-primary:active { animation: jelly-press .28s ease }

/* Botón secundario 3D ghost */
.btn-secondary {
  background: linear-gradient(180deg, #26272d, #191a1e, #121214);
  color: #d4d4d4;
  padding: .9rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: .92rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-top-color: rgba(255,255,255,0.16);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  transition: opacity .2s, transform .15s
}

.btn-secondary:hover { opacity: .88; transform: translateY(-1px) }
.btn-secondary:active { animation: jelly-press .28s ease }

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 68px;
  overflow: hidden
}

.hero-bg-glow {
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12,212,0,0.08) 0%, transparent 65%);
  pointer-events: none; z-index: 0
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5.5rem 0 4rem
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--zgd);
  border: 1px solid rgba(12,212,0,.3);
  border-radius: 100px;
  padding: 6px 14px 6px 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--zg);
  letter-spacing: .04em;
  margin-bottom: 1.75rem
}

.hbd {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--zg);
  animation: pulse 2s infinite
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1) }
  50%      { opacity:.4; transform:scale(.75) }
}

.hero-title {
  font-family: var(--fd);
  font-size: clamp(2.6rem,4.8vw,4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: .75rem
}

.hero-accent { color: var(--zg) }

.hero-tagline {
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--zt3);
  margin-bottom: 1.25rem;
  letter-spacing: .01em
}

.hero-sub {
  font-size: 1rem;
  color: var(--zt3);
  line-height: 1.72;
  max-width: 480px;
  margin-bottom: 2.25rem
}

.hero-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap }

.hero-stores { display:flex; gap:12px; margin-top:1.75rem; align-items:center }

.store-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg,#26272d,#191a1e,#121214);
  border: 1px solid rgba(255,255,255,0.06);
  border-top-color: rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: .78rem;
  color: var(--zt3);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, opacity .15s
}

.store-badge:hover { transform: translateY(-1px); opacity:.88 }
.store-badge:active { animation: jelly-press .28s ease }
.store-badge strong { display:block; font-size:.83rem; color:var(--zt); font-weight:600 }
.store-badge img { width:24px; height:24px }

/* Phone mockup */
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center }

.phone-mockup {
  width: 255px; height: 510px;
  background: var(--zd3);
  border-radius: 36px;
  border: 1.5px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
  box-shadow: 0 60px 120px rgba(0,0,0,.85), 0 0 80px rgba(12,212,0,.07)
}

.phone-screen {
  position: absolute; inset: 0;
  background: linear-gradient(160deg,#0d1a0d 0%,#080808 55%);
  overflow: hidden
}

.phone-notch {
  width: 88px; height: 24px;
  background: var(--zd3);
  border-radius: 0 0 16px 16px;
  margin: 0 auto;
  position: relative; z-index: 2
}

.phone-content { padding: 10px 15px 0 }

.phone-header {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  justify-content: flex-start;
  margin-left: 55px
}

.phone-logo-text {
  font-family: var(--fd);
  font-size: .88rem;
  font-weight: 800;
  margin-left: 10px;
  letter-spacing: .06em;
  color: var(--zt)
}

.psd { width:7px;height:7px;border-radius:50%;background:var(--zg);animation:pulse 2s infinite }

/* Cards dentro del mockup */
.analysis-card {
  background: linear-gradient(160deg,rgba(44,46,55,0.9),rgba(31,32,38,0.9),rgba(25,26,31,0.9));
  border: 1px solid rgba(255,255,255,0.06);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 13px;
  padding: 13px;
  margin-bottom: 9px;
  animation: slideIn .5s ease forwards;
  opacity: 0
}

.analysis-card:nth-child(1) { animation-delay:.3s }
.analysis-card:nth-child(2) { animation-delay:.65s }
.analysis-card:nth-child(3) { animation-delay:1s }

@keyframes slideIn {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}

.card-label { font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,240,240,0.28);margin-bottom:5px }
.card-result { font-size:.83rem;font-weight:600;margin-bottom:3px }
.card-result.safe  { color:var(--zg) }
.card-result.warn  { color:var(--yellow) }
.card-result.danger{ color:var(--red) }
.card-score { font-size:.62rem;color:rgba(240,240,240,0.28);margin-bottom:4px }
.card-desc  { font-size:.68rem;color:rgba(240,240,240,0.5);line-height:1.4 }

.risk-bar { height:2.5px;background:rgba(255,255,255,.07);border-radius:2px;margin-top:7px;overflow:hidden }
.risk-fill { height:100%;border-radius:2px }
.risk-fill.safe   { background:var(--zg);width:12% }
.risk-fill.warn   { background:var(--yellow);width:58% }
.risk-fill.danger { background:var(--red);width:92% }

.floating-alert {
  position:absolute;top:172px;right:-64px;
  background:rgba(229,57,53,.1);
  border:1px solid rgba(229,57,53,.28);
  border-radius:12px;padding:12px 14px;width:152px;
  animation:floatIn .8s ease 1.6s forwards;opacity:0
}

@keyframes floatIn {
  from { opacity:0;transform:translateX(18px) }
  to   { opacity:1;transform:translateX(0) }
}

.fa-title { font-size:.68rem;font-weight:600;color:var(--red);margin-bottom:3px }
.fa-desc  { font-size:.63rem;color:rgba(240,240,240,0.5);line-height:1.4 }

.floating-safe {
  position:absolute;bottom:115px;left:-72px;
  background:rgba(12,212,0,.07);
  border:1px solid rgba(12,212,0,.22);
  border-radius:12px;padding:12px 14px;width:145px;
  animation:floatIn2 .8s ease 2.1s forwards;opacity:0
}

@keyframes floatIn2 {
  from { opacity:0;transform:translateX(-18px) }
  to   { opacity:1;transform:translateX(0) }
}

.phone-glow {
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,212,0,.1) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1
}

/* ── STATS ── */
#stats { padding-top:3rem;padding-bottom:3rem }

.stats-strip {
  border-top:1px solid var(--zb);
  border-bottom:1px solid var(--zb);
  padding:2.5rem 0;
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.stat-item { text-align:center;padding:0 1.5rem;border-right:1px solid var(--zb) }
.stat-item:last-child { border-right:none }

.stat-number {
  font-family:var(--fd);
  font-size:2.3rem;font-weight:800;
  color:var(--zg);line-height:1;
  margin-bottom:.35rem;letter-spacing:-.025em
}

.stat-label  { font-size:.78rem;color:var(--zt3);line-height:1.45 }
.stat-source { font-size:.65rem;color:var(--zt4);margin-top:.2rem }

/* ── SECTION HEADER ── */
.section-header { text-align:center;max-width:640px;margin:0 auto 4rem }

.section-tag {
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--zg);margin-bottom:.9rem
}

.section-title {
  font-family:var(--fd);
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  font-weight:800;line-height:1.1;
  letter-spacing:-.022em;margin-bottom:.9rem
}

.section-desc { color:var(--zt3);font-size:.98rem;line-height:1.72 }

/* ── CÓMO FUNCIONA ── */
#como-funciona { padding-top:5rem;padding-bottom:5rem }

.how-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.how-col {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:0 8px 26px rgba(0,0,0,0.5)
}

.how-col-header {
  display:flex;align-items:center;gap:12px;
  margin-bottom:1.75rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--zb)
}

.how-col-icon {
  width:46px;height:46px;border-radius:14px;
  background:var(--tile-bg);
  border:1px solid var(--card-border-other);
  border-top-color:var(--tile-bt);
  border-left-color:var(--tile-bl);
  border-right-color:var(--tile-br);
  border-bottom-color:var(--tile-bb);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}

.how-col-title { font-family:var(--fd);font-weight:700;font-size:1.05rem }
.how-col-sub   { font-size:.78rem;color:var(--zt3);margin-top:2px }

.how-steps { display:flex;flex-direction:column;gap:1rem }

.how-step { display:flex;gap:14px;align-items:flex-start }

.how-step-num {
  width:24px;height:24px;border-radius:50%;
  background:var(--zgd);border:1px solid rgba(12,212,0,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--zg);
  flex-shrink:0;margin-top:1px
}

.how-step-text { font-size:.86rem;color:var(--zt3);line-height:1.6 }
.how-step-text strong { color:var(--zt);font-weight:600 }

/* ── PROBLEMA ── */
#problema { padding-top:5rem;padding-bottom:5rem }

.problem-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }

.problem-cell {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;
  padding:1.75rem;
  position:relative;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s,box-shadow .15s
}

.problem-cell:hover { transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,0.6) }

.problem-cell::before {
  content:'';position:absolute;top:0;left:0;
  width:3px;height:100%;background:var(--zg);
  opacity:0;transition:opacity .3s
}

.problem-cell:hover::before { opacity:1 }

.problem-icon {
  width:46px;height:46px;border-radius:14px;
  background:var(--tile-bg);
  border:1px solid var(--card-border-other);
  border-top-color:var(--tile-bt);
  border-left-color:var(--tile-bl);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.9rem
}

.problem-title { font-weight:600;font-size:.92rem;margin-bottom:.45rem;color:var(--zt) }
.problem-desc  { font-size:.82rem;color:var(--zt3);line-height:1.62 }

/* ── MÓDULOS ── */
#modulos { padding-top:5rem;padding-bottom:5rem }

.modules-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }

.module-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;
  padding:1.6rem;
  position:relative;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s,box-shadow .15s
}

.module-card:hover { transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.65) }

.module-card.featured {
  grid-column:span 2;
  border-top-color:rgba(12,212,0,0.4)
}

.module-icon {
  width:46px;height:46px;border-radius:14px;
  background:var(--tile-bg);
  border:1px solid var(--card-border-other);
  border-top-color:var(--tile-bt);
  border-left-color:var(--tile-bl);
  border-right-color:var(--tile-br);
  border-bottom-color:var(--tile-bb);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;position:relative;z-index:1
}

.module-code { font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--zg);margin-bottom:.4rem;position:relative;z-index:1 }
.module-name { font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:.5rem;position:relative;z-index:1 }
.module-desc { font-size:.83rem;color:var(--zt3);line-height:1.62;position:relative;z-index:1 }

.module-plan {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid var(--zb);
  border-radius:100px;padding:3px 10px;
  font-size:.65rem;color:var(--zt4);
  margin-top:.75rem;position:relative;z-index:1;
  letter-spacing:.06em;font-weight:600;text-transform:uppercase
}

.module-plan.free {
  background:rgba(12,212,0,.08);
  border-color:rgba(12,212,0,.2);
  color:var(--zg)
}

/* ── VENTAJAS ── */
#ventajas { padding-top:5rem;padding-bottom:5rem }

.compare-wrap {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,0.5)
}

.compare-wrap table { width:100%;border-collapse:collapse }

.compare-wrap th {
  background:rgba(0,0,0,0.3);padding:.9rem 1.4rem;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-align:left;color:var(--zt3);
  border-bottom:1px solid var(--zb)
}

.compare-wrap th.hl { color:var(--zg);background:rgba(12,212,0,.05) }

.compare-wrap td {
  padding:.85rem 1.4rem;font-size:.85rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle
}

.compare-wrap tr:last-child td { border-bottom:none }
.compare-wrap tr:hover td { background:rgba(255,255,255,.02) }

td.feature { color:var(--zt3);font-weight:500;font-size:.83rem }
td.no      { color:var(--zt4);font-size:.8rem }
td.yes     { color:var(--zg);font-weight:600;font-size:.8rem;background:rgba(12,212,0,.03) }

/* ── SEGMENTOS ── */
#segmentos { padding-top:5rem;padding-bottom:5rem }

.segments-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px }

.segment-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;
  padding:1.75rem;
  display:grid;grid-template-columns:60px 1fr;gap:1.1rem;align-items:start;
  box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s
}

.segment-card:hover { transform:translateY(-2px) }

.segment-avatar {
  width:52px;height:52px;border-radius:14px;
  background:var(--tile-bg);
  border:1px solid var(--card-border-other);
  border-top-color:var(--tile-bt);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}

.segment-name  { font-weight:600;font-size:.97rem;margin-bottom:.3rem }
.segment-desc  { font-size:.83rem;color:var(--zt3);line-height:1.62 }

.segment-stat {
  display:inline-flex;align-items:center;gap:5px;
  background:var(--zgd);border:1px solid rgba(12,212,0,.2);
  border-radius:6px;padding:3px 10px;
  font-size:.72rem;color:var(--zg);font-weight:700;
  margin-top:.65rem;letter-spacing:.04em
}

/* ── MODO ABUELITO ── */
#abuelito { padding-top:5rem;padding-bottom:5rem }

.abuelito-layout { display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center }

.abuelito-phone {
  width:215px;height:400px;
  background:var(--zd3);
  border-radius:28px;
  border:1.5px solid rgba(255,255,255,.1);
  overflow:hidden;position:relative;margin:0 auto;
  box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 60px rgba(12,212,0,.06)
}

.ab-screen { background:#070f07;height:100%;padding:18px 14px;display:flex;flex-direction:column;gap:10px }
.ab-header { font-family:var(--fd);font-size:.8rem;font-weight:700;color:var(--zg);text-align:center;letter-spacing:.06em }

.ab-big-btn {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:rgba(12,212,0,0.3);
  border-radius:13px;padding:14px;text-align:center;cursor:pointer;transition:transform .15s
}

.ab-big-btn:hover { transform:scale(0.98) }

.ab-btn-text { font-size:.8rem;font-weight:600;color:var(--zt);display:block }
.ab-btn-sub  { font-size:.63rem;color:var(--zt3);display:block;margin-top:2px }

.ab-msg {
  background:rgba(255,255,255,.03);border:1px solid var(--zb);
  border-radius:10px;padding:10px 12px;
  font-size:.71rem;color:var(--zt3);line-height:1.55;text-align:center
}

.ab-msg strong { color:var(--zg);font-weight:700 }

.abuelito-content h2 { font-family:var(--fd);font-size:2.1rem;font-weight:800;line-height:1.1;letter-spacing:-.022em;margin-bottom:.9rem }
.abuelito-content p  { color:var(--zt3);line-height:1.72;margin-bottom:1.4rem;font-size:.97rem }

.feature-list { list-style:none;display:flex;flex-direction:column;gap:.7rem }

.feature-list li { display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--zt3) }

.feature-list li::before {
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--zg);margin-top:9px;flex-shrink:0
}

/* ── MAPA ── */
#mapa { padding-top:5rem;padding-bottom:5rem }

.mapa-showcase { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center }

.mapa-visual {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 8px 26px rgba(0,0,0,0.5)
}

/* ── PRIVACIDAD ── */
#privacidad { padding-top:5rem;padding-bottom:5rem }

.privacy-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }

.privacy-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;padding:1.6rem;text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s
}

.privacy-card:hover { transform:translateY(-2px) }

.privacy-icon-wrap {
  width:48px;height:48px;border-radius:14px;
  background:var(--tile-bg);
  border:1px solid var(--card-border-other);
  border-top-color:var(--tile-bt);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.1rem
}

.privacy-title { font-weight:600;font-size:.9rem;margin-bottom:.45rem }
.privacy-desc  { font-size:.79rem;color:var(--zt3);line-height:1.62 }

/* ── PLANES ── */
#planes { padding-top:5rem;padding-bottom:5rem }

.plans-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start }

.plan-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;padding:1.75rem;
  box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s;position:relative
}

.plan-card:hover { transform:translateY(-3px) }

/* Colores por plan — igual que en la app */
.plan-card.plan-free    { border-top-color:rgba(163,163,163,0.3) }
.plan-card.plan-escudo  { border-top-color:rgba(96,165,250,0.4) }
.plan-card.plan-familia { border-top-color:rgba(167,139,250,0.4) }
.plan-card.plan-empresa { border-top-color:rgba(251,191,36,0.4) }

.plan-card.featured { box-shadow:0 8px 40px rgba(12,212,0,0.15),0 8px 26px rgba(0,0,0,0.5) }

.plan-popular {
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#1ee85a,var(--zg),#09a800);
  color:#04210a;font-size:.68rem;font-weight:800;
  letter-spacing:.08em;padding:3px 13px;
  border-radius:100px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(12,212,0,0.4)
}

/* Badge de plan */
.plan-badge {
  display:inline-flex;align-items:center;
  border-radius:100px;padding:4px 12px;
  font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;margin-bottom:.9rem
}

.plan-badge.free    { color:#a3a3a3;background:#141414;border-color:#2a2a2a }
.plan-badge.escudo  { color:#60a5fa;background:#0c1626;border-color:#1e3a5f }
.plan-badge.familia { color:#a78bfa;background:#16092e;border-color:#3b1f6e }
.plan-badge.empresa { color:#fbbf24;background:#1c1200;border-color:#78350f }

.plan-name  { font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:.35rem }
.plan-desc  { font-size:.79rem;color:var(--zt3);margin-bottom:1.25rem;line-height:1.5 }

.plan-price { margin-bottom:1.5rem }

.plan-price-amount {
  font-family:var(--fd);font-size:2rem;font-weight:800;
  line-height:1;letter-spacing:-.025em;color:var(--zt)
}

.plan-price-amount.green { color:var(--zg) }
.plan-price-period { font-size:.78rem;color:var(--zt3);margin-left:3px }

.plan-features { list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem }

.plan-features li { display:flex;align-items:flex-start;gap:7px;font-size:.81rem;color:var(--zt3) }

.chk   { color:var(--zg);flex-shrink:0;margin-top:1px;font-weight:700 }
.nochk { flex-shrink:0;margin-top:1px;opacity:.3 }

.plan-btn {
  width:100%;padding:.8rem;border-radius:12px;
  font-size:.86rem;font-weight:700;
  border:none;cursor:pointer;
  text-align:center;text-decoration:none;
  display:block;transition:opacity .2s,transform .15s
}

.plan-btn:active { animation:jelly-press .28s ease }

.plan-btn.outline {
  background:linear-gradient(180deg,#26272d,#191a1e,#121214);
  color:#d4d4d4;
  border:1px solid rgba(255,255,255,0.06);
  border-top-color:rgba(255,255,255,0.16);
  box-shadow:0 4px 8px rgba(0,0,0,0.4)
}

.plan-btn.outline:hover { opacity:.88;transform:translateY(-1px) }

.plan-btn.solid {
  background:linear-gradient(180deg,#1ee85a,var(--zg),#09a800);
  color:#04210a;
  border:1px solid rgba(255,255,255,0.12);
  border-top-color:rgba(255,255,255,0.45);
  box-shadow:0 4px 12px rgba(12,212,0,0.4)
}

.plan-btn.solid:hover { opacity:.88;transform:translateY(-1px) }

/* ── ROADMAP ── */
#roadmap { padding-top:5rem;padding-bottom:5rem }

.roadmap-phases { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }

.roadmap-phase-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-left-color:var(--card-border-left);
  border-radius:20px;padding:1.6rem;
  box-shadow:0 8px 26px rgba(0,0,0,0.5)
}

.roadmap-phase-card.active { border-top-color:rgba(12,212,0,0.5) }

.rp-top { display:flex;align-items:center;gap:10px;margin-bottom:1.1rem }

.rp-dot { width:10px;height:10px;border-radius:50%;background:var(--zt4);flex-shrink:0 }
.rp-dot.active   { background:var(--zg);box-shadow:0 0 8px rgba(12,212,0,.5) }
.rp-dot.progress { background:var(--yellow) }
.rp-dot.future   { background:var(--zt4) }

.rp-label { font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zt4) }
.rp-label.active   { color:var(--zg) }
.rp-label.progress { color:var(--yellow) }

.rp-title { font-family:var(--fd);font-weight:700;font-size:.95rem;margin-bottom:.75rem }

.rp-items { list-style:none;display:flex;flex-direction:column;gap:.5rem }

.rp-items li { font-size:.79rem;color:var(--zt3);line-height:1.5;display:flex;gap:7px;align-items:flex-start }
.rp-items li::before { content:'';width:4px;height:4px;border-radius:50%;background:var(--zt4);flex-shrink:0;margin-top:7px }
.rp-items.active li::before   { background:var(--zg) }
.rp-items.progress li::before { background:var(--yellow) }

/* ── TECH SPECS ── */
#tech { padding-top:4rem;padding-bottom:5rem }

.tech-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }

.tech-card {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:var(--card-border-top);
  border-radius:20px;padding:1.4rem;text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.5)
}

.tech-value { font-family:var(--fd);font-size:1.5rem;font-weight:800;color:var(--zg);margin-bottom:.3rem;letter-spacing:-.015em }
.tech-label { font-size:.78rem;color:var(--zt3);line-height:1.45 }

/* ── CTA ── */
#cta { padding-top:6rem;padding-bottom:6rem }

.cta-box {
  background: linear-gradient(160deg,var(--card-g0),var(--card-g1),var(--card-g2));
  border:1px solid var(--card-border-other);
  border-top-color:rgba(12,212,0,0.4);
  border-left-color:var(--card-border-left);
  border-radius:24px;padding:5rem 3rem;text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.6)
}

.cta-box::before {
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(12,212,0,.09) 0%,transparent 65%);
  pointer-events:none
}

.cta-title { font-family:var(--fd);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin-bottom:.9rem;position:relative }
.cta-sub   { font-size:.98rem;color:var(--zt3);max-width:500px;margin:0 auto 2.25rem;line-height:1.72;position:relative }
.cta-actions { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative }
.cta-note  { margin-top:1.25rem;font-size:.78rem;color:var(--zt4);position:relative }

/* ── FOOTER ── */
.logo-footer { vertical-align:middle }

footer {
  border-top:1px solid var(--zb);
  padding:3rem clamp(1.5rem,5vw,4rem);
  background:#000;
  position:relative;z-index:1
}

.footer-grid {
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;margin-bottom:2.5rem
}

.footer-brand p { font-size:.83rem;color:var(--zt3);margin-top:.7rem;line-height:1.65;max-width:255px }

.footer-col h4 { font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zt4);margin-bottom:.9rem }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:.55rem }
.footer-col a  { color:var(--zt3);text-decoration:none;font-size:.85rem;transition:color .2s }
.footer-col a:hover { color:var(--zt) }

.footer-bottom {
  max-width:1120px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--zb);padding-top:1.5rem;
  font-size:.78rem;color:var(--zt4)
}

/* ── ANIMATIONS ── */
.fade-up { opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease }
.fade-up.visible { opacity:1;transform:translateY(0) }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .plans-grid      { grid-template-columns:repeat(2,1fr) }
  .privacy-cards   { grid-template-columns:repeat(2,1fr) }
  .roadmap-phases  { grid-template-columns:repeat(2,1fr) }
  .tech-grid       { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:900px) {
  .hero-grid       { grid-template-columns:1fr;gap:3rem }
  .hero-visual     { order:-1 }
  .stats-strip     { grid-template-columns:repeat(2,1fr) }
  .stat-item:nth-child(2) { border-right:none }
  .modules-grid    { grid-template-columns:1fr 1fr }
  .module-card.featured { grid-column:span 2 }
  .segments-grid,
  .abuelito-layout,
  .mapa-showcase,
  .how-grid        { grid-template-columns:1fr }
  .footer-grid     { grid-template-columns:1fr 1fr }
  .problem-grid    { grid-template-columns:1fr 1fr }
}

@media(max-width:600px) {
  .nav-hamburger   { display:flex }
  .nav-links       { display:none }
  .nav-links.open  {
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:68px;left:0;right:0;
    background:#000;border-bottom:1px solid var(--zb);
    padding:1rem 0
  }
  .nav-links.open a { padding:.75rem clamp(1.5rem,5vw,4rem) }
  .stats-strip     { grid-template-columns:1fr 1fr }
  .modules-grid,
  .privacy-cards,
  .plans-grid,
  .roadmap-phases,
  .tech-grid,
  .problem-grid    { grid-template-columns:1fr }
  .module-card.featured { grid-column:span 1 }
  .footer-grid     { grid-template-columns:1fr }
  .hero-title      { font-size:2.3rem }
  .segments-grid   { grid-template-columns:1fr }
}