:root{
  --p:#c1baff;
  --p2:#8b7dff;

  --bg:#07070b;
  --bg2:#0b0b10;

  --stroke:rgba(193,186,255,.26);
  --glass:rgba(255,255,255,.06);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 22px;
  --max: 1160px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Neue Haas Grotesk Display Pro", "NeueHaasDisplay", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 800px at 10% 0%, rgba(193,186,255,.12), transparent 60%),
    radial-gradient(900px 700px at 80% 10%, rgba(139,125,255,.10), transparent 60%),
    var(--bg);
  color:#f7f7ff;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

.ambient{
  position:fixed;
  inset:-40vmax;
  pointer-events:none;
  background:
    radial-gradient(40vmax 30vmax at 30% 20%, rgba(193,186,255,.13), transparent 55%),
    radial-gradient(36vmax 28vmax at 70% 30%, rgba(139,125,255,.10), transparent 55%),
    radial-gradient(50vmax 40vmax at 50% 80%, rgba(193,186,255,.08), transparent 60%);
  filter: blur(12px);
  opacity:.9;
  transform: translateZ(0);
  animation: floatAmb 16s ease-in-out infinite;
}
@keyframes floatAmb{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-1.5%,0) scale(1.03); }
}

/* Snow canvas */
#snow{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.7;
}

/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:74px;
  z-index:50;
  background: linear-gradient(to bottom, rgba(7,7,11,.72), rgba(7,7,11,.30));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(193,186,255,.12);
}
.topbarInner{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.brandLogo{
  width:34px; height:34px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(193,186,255,.18);
  background: rgba(193,186,255,.12);
}
.brandText{ text-transform: lowercase; }
.brandText.bold{ font-weight:900; }

.nav{
  display:flex;
  gap:18px;
  opacity:.92;
}
.nav a{
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
  color: rgba(255,255,255,.86);
  transition: .22s ease;
  position:relative;
}
.nav a:hover{
  background: rgba(193,186,255,.10);
  color:#fff;
}
.nav a.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:2px;
  background: linear-gradient(90deg, var(--p), var(--p2));
  border-radius:999px;
  opacity:.9;
}

.pillBtn{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(193,186,255,.26);
  background: rgba(255,255,255,.05);
  transition: .22s ease;
  font-weight:800;
  overflow:hidden;
}
.pillBtn:hover{ transform: translateY(-1px); border-color: rgba(193,186,255,.42); }
.pillGlow{
  position:absolute;
  inset:-60px;
  background: radial-gradient(circle at 30% 30%, rgba(193,186,255,.22), transparent 60%);
  opacity:0; transition:.22s ease;
}
.pillBtn:hover .pillGlow{ opacity:1; }

/* Sections */
.section{
  min-height: 100vh;
  padding: 120px 0 90px;
  position:relative;
  z-index:2;
}
.section.dark{
  background:
    radial-gradient(1100px 800px at 10% 0%, rgba(193,186,255,.10), transparent 60%),
    radial-gradient(900px 700px at 80% 10%, rgba(139,125,255,.08), transparent 60%),
    var(--bg);
}

.centerHead{ text-align:center; }
.h2{ font-size: clamp(32px, 4vw, 52px); margin:0 0 12px; letter-spacing: -.6px; }
.p{ margin:0 0 26px; font-size: 16px; line-height: 1.6; opacity:.9; }
.muted{ opacity:.72; }

.reveal{ opacity:0; transform: translateY(14px); transition: opacity .75s ease, transform .75s ease; transition-delay: var(--d, 0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* HERO */
.heroSection{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;     /* centra TODO en ambos ejes */
  padding: 0;              /* sin padding raro arriba */
  isolation: isolate;
  overflow: hidden;
}

.heroWrap{
  position: relative;
  z-index: 2;
  width: min(1160px, calc(100% - 40px));
  text-align: center;      /* texto centrado */
  display: grid;
  justify-items: center;
  gap: 14px;
}


.heroBg{
  position:absolute;
  inset:0;
  z-index:0;
  background: url("./assets/fondo1.png") center/cover no-repeat;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.heroOverlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1000px 700px at 20% 0%, rgba(193,186,255,.20), transparent 60%),
    linear-gradient(to bottom, rgba(7,7,11,.30), rgba(7,7,11,.82));
}

.heroWrap{ z-index:2; }



.heroWrap{
  position: relative;
  z-index: 2;
  width: min(1160px, calc(100% - 40px));
  text-align: center;      /* texto centrado */
  display: grid;
  justify-items: center;
  gap: 14px;
}


.heroCenter{
  text-align:center;
  display:grid;
  justify-items:center;
  gap: 18px;
}

.heroName{
  margin: 0;
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -1.5px;
  color: #fff;
  line-height: 1;
}

.heroSection.section{
  padding: 0 !important;
  min-height: 100vh;
}

.heroSection{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: 74px;     /* compensa topbar */
  padding-bottom: 0;
}


.caret{
  width:10px;
  height: clamp(34px, 4vw, 52px);
  border-radius: 3px;
  background: var(--p);
  display:inline-block;
  transform: translateY(6px);
  margin-left: 10px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.outlineBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(193,186,255,.32);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  overflow:hidden;
  transition: .22s ease;
}
.outlineBtn.big{
  /* grande, pero NO más largo */
  padding: 14px 22px;
  border-radius: 18px;
  min-width: 220px;
}
.inviteBtn{ min-width: 240px; }
.outlineBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(193,186,255,.55);
  background: rgba(193,186,255,.08);
}
.outlineFx{
  position:absolute;
  inset:-120%;
  background: conic-gradient(from 180deg, transparent, rgba(193,186,255,.75), transparent, rgba(139,125,255,.55), transparent);
  animation: spin 3.2s linear infinite;
  opacity:.55;
  filter: blur(2px);
}
.outlineBtn::after, .joinTier::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  background: rgba(7,7,11,.58);
  opacity: .55;
  pointer-events:none;
}
.outlineBtn > *{ position:relative; z-index:1; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Scroll hint */
.scrollHint{
  position:absolute;
  left:50%;
  bottom: 28px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:10;
}
.mouse{
  width: 22px; height: 34px;
  border-radius: 999px;
  border:1px solid rgba(245, 245, 245, 0.882);
  position:relative;
}
.mouse::after{
  content:"";
  position:absolute;
  width:4px;height:7px;border-radius:4px;
  left:50%; top:8px; transform: translateX(-50%);
  background: rgba(193,186,255,.85);
  animation: wheel 1.35s ease-in-out infinite;
}
@keyframes wheel{
  0%{ opacity:0; transform: translate(-50%,0); }
  30%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%,12px); }
}
.scrollText{ font-size:12px; color: rgba(255,255,255,.78); }

/* STATS + testimonials */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items:start;
}

/* FIX REAL: auto-fit + min width para evitar corte */
.statsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

/* KPI card */
.kpi{
  border-radius: 20px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  overflow: visible; /* por si el navegador quería recortar */
}

/* FIX: número gigante pero responsive y NO se corta */
.kpiNum{
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: .92;
  margin-bottom: 10px;

  /* clave: escala con vw para que quepa */
  font-size: clamp(54px, 6.2vw, 92px);

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpiMeta{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.72);
  font-weight:800;
  text-transform: lowercase;
}
.kpiMeta i{ color: rgba(193,186,255,.85); }

.testiWrap{
  border-radius: var(--radius);
  border: 1px solid rgba(193,186,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
.testiHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.testiHeader h3{ margin:0; font-size:16px; }
.miniTag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(193,186,255,.18);
  background: rgba(193,186,255,.10);
  color: rgba(255,255,255,.90);
}

.testiCard{
  padding: 16px;
  min-height: 230px;
  transition: opacity .35s ease, transform .35s ease;
}
.testiCard.fadeOut{ opacity:0; transform: translateY(8px); }
.testiWho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.testiName a{
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testiStars{
  display:flex;
  gap:4px;
  color: var(--p);
  filter: drop-shadow(0 0 8px rgba(193,186,255,.22));
  font-size: 14px;
}
.testiWhen{ color: rgba(255,255,255,.65); font-size: 12px; }
.testiQuote{ margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.84); }

.testiDots{ display:flex; gap:8px; padding: 12px 16px 16px; }
.testiDots span{ width:8px;height:8px;border-radius:999px; background: rgba(255,255,255,.14); }
.testiDots span.on{ background: rgba(193,186,255,.75); }

/* Commands window */
.codeWindow{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(193,186,255,.22);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.codeTop{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.22); }
.dot.red{ background:#ff5f57; }
.dot.yellow{ background:#febc2e; }
.dot.green{ background:#28c840; }
.codeTitle{ margin-left: 8px; font-weight: 900; opacity:.92; }
.codeHint{ margin-left:auto; font-size: 12px; opacity:.65; }
.codeBody{ margin:0; padding: 18px 18px 20px; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.92); }

/* Story */
.storyGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.storyCard{
  border-radius: 20px;
  border:1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.storyCard h3{ margin:0 0 10px; font-weight:900; letter-spacing:-.3px; }
.storyCard p{ margin:0; opacity:.84; line-height:1.65; }

/* Pricing */
.pricingGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.priceCard{
  border-radius: 24px;
  border: 1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 16px;
  position:relative;
}
.priceCard.featured{
  transform: translateY(-8px);
  border-color: rgba(193,186,255,.38);
  background:
    radial-gradient(650px 220px at 50% 0%, rgba(193,186,255,.12), transparent 60%),
    rgba(255,255,255,.05);
}
.featuredRibbon{
  position:absolute; top: 14px; right: 14px;
  font-size: 12px; font-weight: 900;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(193,186,255,.26);
  background: rgba(193,186,255,.12);
  letter-spacing:.5px;
}

/* Tier images 16:9 big horizontal */
.tierBanner{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  margin-bottom: 12px;
}

.priceHead h3{ margin:0; font-weight: 900; letter-spacing:-.3px; }
.priceLine{ display:flex; align-items:baseline; gap:10px; margin-top: 8px; }
.money{
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -1px;
}
.money.orange{ color:#ffb15a; }
.money.cyan{ color:#5be7ff; }
.money.wine{ color:#c74a6c; }
.per{ opacity:.72; }

.tierDesc{ margin: 10px 0 12px; opacity:.82; line-height:1.6; }
.benefits{ margin:0; padding:0 0 0 18px; display:grid; gap: 8px; opacity:.9; }

.joinTier{
  margin-top: 14px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(193,186,255,.32);
  background: rgba(255,255,255,.05);
  font-weight: 900;
  overflow:hidden;
  transition:.22s ease;
}
.joinTier:hover{ transform: translateY(-1px); border-color: rgba(193,186,255,.55); }
.joinTier.strong{ background: rgba(193,186,255,.10); border-color: rgba(193,186,255,.45); }

.payments{ margin-top: 18px; display:flex; align-items:center; gap: 12px; opacity:.9; justify-content:center; flex-wrap:wrap; }
.payLabel{ font-size: 13px; opacity:.78; }
.payIcons{ display:flex; gap:10px; flex-wrap:wrap; }
.payPill{ font-size: 12px; padding: 8px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }

/* Big updates carousel */
.bigCarousel{
  position:relative;
  margin-top: 10px;
  border-radius: 24px;
  border:1px solid rgba(193,186,255,.20);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  overflow:hidden;
}
.carBigViewport{ overflow:hidden; }
.carBigTrack{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 18px;
  will-change: transform;
}
.carBigSlide{
  flex: 0 0 min(760px, 82vw);
  aspect-ratio: 16/9;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  transform: scale(.88);
  opacity: .42;
  transition: transform .45s ease, opacity .45s ease;
  position:relative;
}
.carBigSlide img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.carBigSlide.is-center{
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.carBigBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(10,10,16,.55);
  color:#fff;
  font-size: 28px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:3;
  transition:.18s ease;
}
.carBigBtn:hover{ transform: translateY(-50%) scale(1.04); border-color: rgba(193,186,255,.35); }
.carBigBtn.prev{ left: 10px; }
.carBigBtn.next{ right: 10px; }

/* Shumons */
.section.shumons{ background:#05050a; overflow:hidden; }
.shumonBg{
  position:absolute; inset:0;
  background: url("assets/shumon.png") center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.02);
}
.shumonOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 700px at 20% 0%, rgba(193,186,255,.24), transparent 60%),
    linear-gradient(to bottom, rgba(5,5,10,.35), rgba(5,5,10,.86));
}
.center{
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
}
.shumonsHuge{
  font-weight: 950;
  letter-spacing: -2px;
  font-size: clamp(72px, 10vw, 160px);
  color: #ffffff;
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.coming{
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--p);
  text-shadow: 0 18px 60px rgba(193,186,255,.20);
}

/* Footer */
.footer{
  padding: 42px 0;
  background: linear-gradient(to bottom, rgba(7,7,11,.92), rgba(7,7,11,1));
  border-top: 1px solid rgba(193,186,255,.12);
}
.dividerSoft{ height:1px; background: rgba(193,186,255,.16); margin: 24px 0 18px; }

.ctaPanel{
  border-radius: var(--radius);
  border:1px solid rgba(193,186,255,.20);
  background: rgba(255,255,255,.05);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.ctaPanel h3{ margin:0 0 6px; font-size: 22px; font-weight:950; }
.ctaPanel p{ margin:0; opacity:.82; }

.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items:start;
}
.brandFoot{ display:flex; align-items:center; gap:10px; }
.footP{ margin: 12px 0 0; opacity:.82; line-height:1.65; }
.storeRow{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 10px; align-items:center; }
.storeFake{
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
}
.footRight h4{ margin:0 0 10px; }
.footLinks{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.footLinks a{ color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 3px; }
.footMini{ margin-top: 16px; display:flex; flex-wrap:wrap; gap: 10px; opacity:.9; }

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .split{ grid-template-columns: 1fr; }
  .pricingGrid{ grid-template-columns: 1fr; }
  .priceCard.featured{ transform:none; }
  .storyGrid{ grid-template-columns: 1fr; }
  .footerGrid{ grid-template-columns: 1fr; }
}

/* ================================
   ABOUT US (2 páginas)
================================ */
.aboutSection{
  overflow:hidden;
}

.aboutGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:center;
  margin-top: 10px;
}

.aboutGrid.reverse{
  grid-template-columns: .85fr 1.15fr;
}

.aboutPanel{
  border-radius: 24px;
  border: 1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  padding: 26px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

.aboutKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(193,186,255,.95);
  background: rgba(193,186,255,.10);
  border: 1px solid rgba(193,186,255,.18);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.aboutTitle{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
  margin: 0 0 12px;
}

.aboutLead{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
}

.aboutList{
  margin: 0 0 18px;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: rgba(255,255,255,.80);
}

.aboutNext{
  width: fit-content;
  padding: 12px 16px;
  border-radius: 16px;
}

.aboutMedia{
  display:flex;
  justify-content:center;
}



/* Responsive */
@media (max-width: 980px){
  .aboutGrid,
  .aboutGrid.reverse{
    grid-template-columns: 1fr;
  }
  .aboutFrame{
    padding: 14px;
  }
}

/* ================================
   ABOUT US (IMAGEN 16:9 GRANDE)
================================ */
.aboutSection{ overflow:hidden; }

.aboutGrid{
  display:grid;
  gap: 28px;
  align-items:center;
  margin-top: 10px;

  /* clave: texto más “angosto”, imagen usa TODO lo demás */
  grid-template-columns: minmax(320px, 520px) 1fr;
}

.aboutGrid.reverse{
  /* clave: en la página 2, imagen (izq) grande y texto (der) angosto */
  grid-template-columns: 1fr minmax(320px, 520px);
}

.aboutPanel{
  border-radius: 24px;
  border: 1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  padding: 26px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

.aboutKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(193,186,255,.95);
  background: rgba(193,186,255,.10);
  border: 1px solid rgba(193,186,255,.18);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.aboutTitle{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
  margin: 0 0 12px;
}

.aboutLead{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
}

.aboutList{
  margin: 0 0 18px;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: rgba(255,255,255,.80);
}

.aboutNext{
  width: fit-content;
  padding: 12px 16px;
  border-radius: 16px;
}

/* --- IMAGEN COMO “FONDO” (PNG TRANSPARENTE) --- */
.aboutMedia{
  display:flex;
  align-items:center;
  justify-content:center;
}

.aboutArt{
  width: 100%;
  transform: scale(2.50);     /* 🔥 agranda */
  aspect-ratio: 16 / 9;         /* el área ES 16:9 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;      /* NO recorta, respeta el PNG 16:9 */
}


/* imágenes */
.aboutArt.art-2{ background-image: url("assets/elementos/2.png"); }
.aboutArt.art-1{ background-image: url("assets/elementos/1.png"); }



/* Responsive */
@media (max-width: 980px){
  .aboutGrid,
  .aboutGrid.reverse{
    grid-template-columns: 1fr;
  }
}

/* Scroll hint más visible (solo HERO) */
.heroSection .scrollHint{
  opacity: 1;
  filter: drop-shadow(0 10px 22px rgb(0, 0, 0));
}

.heroSection .scrollText{
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 1px;
}

.heroSection .mouse{
  border-color: rgb(255, 255, 255);
}

.heroSection .mouse::after{
  background: rgb(255, 255, 255);
}

/* En la primera sección (#about), empuja el contenedor de la imagen al borde derecho */
#about .aboutMedia{
  justify-content: flex-end;
}

/* La imagen 2 ahora es 1:1 y escala desde la derecha (para que no se vaya hacia la izquierda) */
.aboutArt.art-2{
  aspect-ratio: 1 / 1;          /* 1:1 */
  background-position: right center;
  transform-origin: right center; /* clave con tu scale(2.50) */
  transform: scale(1) translateX(8%); /* más hacia la derecha */
}

/* ================================
   TOPBAR: Invite al lado de Join
================================ */
.topActions{
  display:flex;
  align-items:center;
  gap:10px;
}

.pillBtn.inviteBtnTop{
  border-color: rgba(193,186,255,.32);
  background: rgba(193,186,255,.08);
}

/* ================================
   HERO: scroll MUCHO más visible
================================ */
.heroSection .scrollHint{
  opacity: 1 !important;
  z-index: 6;
}

.heroSection .scrollText{
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-shadow: 0 10px 26px rgba(0,0,0,.75);
}

.heroSection .mouse{
  border-color: rgba(255,255,255,.98) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.heroSection .mouse::after{
  background: rgba(255,255,255,.98) !important;
}

/* ================================
   STORY: ERAS (3 cuadros 1:1)
================================ */
.eraGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.eraCard{
  border-radius: 20px;
  border: 1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  text-align:center;
}

.eraImg{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  display:block;
}

.eraCap{
  margin-top: 10px;
  font-weight: 950;
  text-transform: lowercase;
  letter-spacing: .8px;
  opacity: .92;
}

/* Responsive */
@media (max-width: 980px){
  .eraGrid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   MOBILE / HAMBURGER NAV
================================ */
.topbarActions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* hamburger button */
.menuBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border:1px solid rgba(193,186,255,.26);
  background: rgba(255,255,255,.05);
  display:none;            /* solo mobile */
  place-items:center;
  cursor:pointer;
  transition: .22s ease;
}
.menuBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(193,186,255,.42);
}
.menuBtn span{
  display:block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  margin: 2px 0;
}

/* overlay + drawer */
.menuOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index:60;
}

.mobileMenu{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(360px, 86vw);
  padding: 16px;
  padding-top: 18px;

  background: rgba(10,10,16,.78);
  border-left: 1px solid rgba(193,186,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);

  transform: translateX(105%);
  transition: transform .26s ease;
  z-index:70;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.mobileMenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mobileMenuTitle{
  font-weight: 950;
  letter-spacing:.6px;
  opacity:.95;
}

.menuClose{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border:1px solid rgba(193,186,255,.22);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  transition: .22s ease;
}
.menuClose:hover{
  transform: translateY(-1px);
  border-color: rgba(193,186,255,.42);
}

.mobileNav{
  display:grid;
  gap: 10px;
  padding-top: 6px;
  overflow:auto;
}
.mobileNav a{
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  transition: .18s ease;
}
.mobileNav a:hover{
  background: rgba(193,186,255,.10);
  border-color: rgba(193,186,255,.30);
  color:#fff;
}

.mobileMenuCtas{
  margin-top:auto;
  display:grid;
  gap:10px;
}

body.menuOpen{
  overflow:hidden;
}

/* estado abierto */
.menuOverlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.mobileMenu.is-open{
  transform:none;
}

/* Scroll hint arriba del overlay */
.scrollHint{ z-index: 3; opacity: 1; }

/* ================================
   MOBILE LAYOUT TWEAKS
================================ */
@media (max-width: 980px){
  .menuBtn{ display:grid; }
  .inviteTop{ display:none; }          /* deja el invite dentro del menú */
  .topbarInner{ gap: 10px; }

  .container{ width:min(var(--max), calc(100% - 28px)); }

  /* hero: botones en columna */
  .ctaRow{ flex-direction: column; align-items:center; width:100%; }
  .outlineBtn{ width: min(420px, 100%); }
}

@media (max-width: 720px){
  .section{ padding: 104px 0 72px; }
  .h2{ margin-bottom: 10px; }
  .p{ margin-bottom: 22px; }

  .storyCard{ padding: 16px; }
  .priceCard{ padding: 14px; }
  .codeBody{ padding: 16px 16px 18px; }

  .carBigTrack{ padding: 14px; gap: 14px; }
  .carBigBtn{ width: 42px; height: 42px; font-size: 26px; }
}

@media (max-width: 520px){
  .topbar{ height: 66px; }
  .topbarInner{ height: 66px; }
  .heroSection{ padding-top: 66px; }

  .brandLogo{ width: 32px; height: 32px; border-radius: 12px; }
  .nav a{ font-size: 13px; }

  .pillBtn{ padding: 9px 12px; }
  .menuBtn{ width: 44px; height: 44px; border-radius: 15px; }

  .heroName{
    font-size: clamp(46px, 14vw, 84px);
    letter-spacing: -1px;
  }
  .caret{
    height: clamp(26px, 8vw, 44px);
    transform: translateY(4px);
    margin-left: 8px;
  }

  /* ABOUT visuals: reduce scale en mobile */
  .aboutArt{ transform: scale(1.25); }
  .aboutArt.art-2{ transform: scale(1) translateX(0%); background-position: center; transform-origin: center; }
  #about .aboutMedia{ justify-content:center; }

  /* eras: 3 cuadritos en fila */
  .eraGrid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .eraCard{ padding: 10px; border-radius: 18px; }
  .eraCap{ font-size: 11px; letter-spacing: .6px; }

  .mobileMenu{ width:min(360px, 92vw); }
}

@media (max-width: 360px){
  /* si el teléfono es muy angosto, apílalos */
  .eraGrid{ grid-template-columns: 1fr; }
}

/* ================================
   MOBILE / HAMBURGER (add at END)
================================ */

/* body lock cuando el menú está abierto */
body.noScroll{ overflow: hidden; }

/* Topbar actions wrapper */
.topbarActions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botón hamburguesa */
.menuBtn{
  width:44px;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(193,186,255,.26);
  background: rgba(255,255,255,.05);
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}
.menuBtn span{
  display:block;
  width:18px;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  transition: transform .22s ease, opacity .22s ease;
}
.menuBtn.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menuBtn.is-open span:nth-child(2){ opacity:0; }
.menuBtn.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.mobileMenu{
  position:fixed;
  inset:0;
  z-index: 90;
  display:none;
}
.mobileMenu.is-open{ display:block; }

.mobileMenuOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.mobileMenuPanel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width: min(380px, 92vw);
  background: rgba(7,7,11,.82);
  border-left: 1px solid rgba(193,186,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  transform: translateX(102%);
  transition: transform .28s ease;
  padding: 18px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.mobileMenu.is-open .mobileMenuPanel{ transform: translateX(0); }

.mobileMenuTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.mobileMenuTitle{
  font-weight: 950;
  letter-spacing:.4px;
}
.menuClose{
  width:44px;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(193,186,255,.22);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-size: 22px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.mobileNav{
  display:grid;
  gap: 8px;
  padding-top: 4px;
}
.mobileNav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(193,186,255,.10);
  transition: .18s ease;
  font-weight: 900;
}
.mobileNav a:hover{
  background: rgba(193,186,255,.08);
  border-color: rgba(193,186,255,.28);
}
.mobileNav a.active{
  background: rgba(193,186,255,.12);
  border-color: rgba(193,186,255,.34);
}

.mobileMenuCtas{
  margin-top:auto;
  display:grid;
  gap:10px;
}
.mobileMenuCtas .pillBtn{
  display:flex;
  justify-content:center;
}

/* Scroll hint bien visible */
.heroSection .scrollHint{
  opacity: 1 !important;
  z-index: 6;
}
.heroSection .mouse{
  border-width: 2px;
}
.heroSection .scrollText{
  text-shadow: 0 12px 24px rgba(0,0,0,.55);
}

/* Story eras (3 cuadros 1:1) */
.eraGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.eraCard{
  margin:0;
  border-radius: 20px;
  border:1px solid rgba(193,186,255,.18);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.eraCard img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
}
.eraCard figcaption{
  padding: 10px 12px 12px;
  text-align:center;
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: lowercase;
  color: rgba(255,255,255,.88);
}

/* Responsive fino */
@media (max-width: 980px){
  .menuBtn{ display:flex; }

  /* botones del hero a full en móvil */
  .outlineBtn.big{ width:100%; min-width: 0; }
  .ctaRow{ width:100%; }

  /* menos padding para que se vea “app-like” */
  .section{ padding: 104px 0 74px; }
}

@media (max-width: 860px){
  .eraGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .container{ width: min(var(--max), calc(100% - 28px)); }
  .topbar{ height: 68px; }
  .topbarInner{ height: 68px; }

  /* en móvil muy chico: es mejor solo Join + hamburguesa */
  .topbarActions .inviteTop{ display:none; }

  .heroName{ font-size: clamp(56px, 14vw, 92px); }
  .kpiNum{ font-size: clamp(44px, 12vw, 76px); }

  .eraGrid{ grid-template-columns: 1fr; }
}