:root{
  --ink:#121212;
  --ink-soft:#5b5f5c;
  --paper:#ffffff;
  --panel:#f3f3f1;
  --card:#ffffff;
  --line:rgba(18,18,18,0.09);
  --green:#0C7A3E;
  --green-soft:#e7f3ec;
  --green-glow:rgba(12,122,62,0.35);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --font:'Plus Jakarta Sans', sans-serif;
  --mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.5; overflow-x:hidden; width:100%;}
a{color:inherit; text-decoration:none;}
img,.ph{display:block; width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
section{position:relative;}
::selection{background:var(--ink); color:#fff;}

h1,h2,h3,h4{font-weight:700; letter-spacing:-.02em; line-height:1.06;}

.ph{
  background:repeating-linear-gradient(45deg, rgba(18,18,18,0.04) 0 2px, transparent 2px 14px), var(--panel);
  border:1.5px dashed rgba(18,18,18,0.25);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-soft); font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; padding:20px; min-height:120px;
}
.ph span{max-width:280px; line-height:1.5; opacity:.85; text-transform:none;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}

.pill{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:8px 16px; border-radius:100px; background:var(--green-soft); color:var(--green);}
.pill.dark{background:var(--ink); color:#fff;}
.pill.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:100px; font-weight:600; font-size:14.5px; cursor:pointer; border:none; position:relative; --mx:50%; --my:50%; --gx:0px; --gy:0px; transition:transform .18s, box-shadow .18s, background .18s;}
.btn-primary{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(18,18,18,0.26), 0 0 0 1px rgba(12,122,62,0.25);}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
  transform:translateX(-120%);
  transition:none;
  pointer-events:none;
}
.btn-primary:hover::after{transform:translateX(220%); transition:transform .55s cubic-bezier(.4,0,.2,1);}
.btn-text{color:var(--ink); font-weight:600; font-size:14.5px; border-bottom:1.5px solid var(--ink); padding-bottom:2px;}

/* botones: brillo de borde + sombra interna que siguen el cursor, contenidos dentro del botón */
.btn::before, .island-nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:radial-gradient(90px circle at var(--mx) var(--my), var(--green) 0%, transparent 70%);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:3;
}
.btn:hover::before, .island-nav:hover::before{opacity:1;}
.btn:not(.btn-primary):hover{box-shadow:inset var(--gx) var(--gy) 24px -10px var(--green-glow);}

/* nav — floating capsule, separated from top, blurred background */
header{
  position:fixed; top:10px; left:50%; z-index:50;
  width:calc(100% - 40px); max-width:1160px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:100px;
  box-shadow:0 10px 30px rgba(18,18,18,0.07);
  transform:translateX(-50%);
  opacity:1;
  overflow:hidden;
  transition:width 1.35s cubic-bezier(.16,1.15,.25,1), opacity .55s ease .15s, box-shadow .3s ease;
}
nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:10px 10px 10px 32px; max-width:100%; margin:0; white-space:nowrap;}
.logo{display:flex; align-items:center; gap:10px; flex:none;}
.logo-img{height:30px; width:auto; display:block;}
.nav-center{display:flex; align-items:center; justify-content:center; gap:32px;}
.nav-center a{font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .2s ease; white-space:nowrap;}
.nav-center a:hover{color:var(--ink);}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:10px;}

/* mobile hamburger + dropdown menu (nav-center is hidden below 900px, this replaces it) */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; flex:0 0 auto; border:none; background:none; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-mobile{
  position:fixed; top:70px; left:20px; right:20px; z-index:49; max-width:1120px; margin:0 auto;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(18,18,18,0.16);
  padding:14px; display:flex; flex-direction:column; gap:4px;
  opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1.4,.36,1);
}
.nav-mobile.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.nav-mobile a{padding:13px 16px; border-radius:12px; font-size:15px; font-weight:600; color:var(--ink); transition:background .2s ease;}
.nav-mobile a:hover{background:var(--panel);}
.nav-mobile .btn-primary{justify-content:center; margin-top:6px; color:#fff;}
@media (min-width:901px){
  .nav-mobile{display:none;}
}

/* scroll behavior: collapses horizontally to nothing on scroll down, expands back open (with a soft elastic overshoot) on scroll up */
header.nav-hidden{
  width:0;
  opacity:0;
  border-color:transparent;
  pointer-events:none;
  transition:width .45s cubic-bezier(.5,0,.75,0), opacity .2s ease, box-shadow .3s ease;
}

/* ============ HERO — 21st.dev inspired, con parallax de capas ============ */
.hero{padding:120px 0 0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; text-align:center; overflow:hidden; position:relative; --spot-x:50%; --spot-y:20%; will-change:transform;}

[data-parallax]{will-change:transform;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(500px circle at var(--spot-x) var(--spot-y), var(--green-glow), transparent 70%);
  opacity:.35; transition:opacity .3s;
}

.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.hero-bg .grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(to right, rgba(18,18,18,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,18,18,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 20%, #000 40%, transparent 78%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 20%, #000 40%, transparent 78%);
  animation:drift 26s linear infinite;
}
@keyframes drift{
  0%{background-position:0 0, 0 0;}
  100%{background-position:44px 44px, 44px 44px;}
}
.hero-bg .blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;}
.hero-bg .b1{width:420px; height:420px; background:radial-gradient(circle, var(--green-glow), transparent 70%); top:-140px; left:8%; animation:float1 13s ease-in-out infinite;}
.hero-bg .b2{width:380px; height:380px; background:radial-gradient(circle, rgba(18,18,18,0.18), transparent 70%); top:-60px; right:6%; animation:float2 16s ease-in-out infinite;}
.hero-bg .b3{width:280px; height:280px; background:radial-gradient(circle, var(--green-glow), transparent 70%); top:220px; left:42%; animation:float3 19s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,50px);}}
@keyframes float2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,30px);}}
@keyframes float3{0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-40px);}}

.hero-iguana,.hero-rocas{
  position:absolute; bottom:0; height:46%; max-height:400px; width:auto;
  pointer-events:none; opacity:0; animation:fadeUp .9s ease forwards .3s;
}
.hero-iguana{left:-20px;}
.hero-rocas{right:-20px; animation-delay:.4s;}
@media (max-width:1100px){
  .hero-iguana,.hero-rocas{height:36%;}
}
@media (max-width:900px){
  .hero-iguana,.hero-rocas{display:none;}
}

.hero .pill{margin-bottom:26px; opacity:0; animation:fadeUp .7s ease forwards .05s;}

h1{font-size:clamp(34px,5.4vw,58px); max-width:900px; margin:0 auto; color:var(--ink);}
h1 .line{display:block;}
h1 .word{display:inline-block; opacity:0; filter:blur(6px); transform:translateY(16px); animation:wordIn .7s cubic-bezier(.2,.8,.2,1) forwards; margin-right:.24em;}
h1 .soft{
  background:linear-gradient(100deg, #cfd1cd 30%, var(--ink) 42%, #cfd1cd 54%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wordIn .7s cubic-bezier(.2,.8,.2,1) forwards, shine 5s ease-in-out infinite 2s;
}
h1 .word.cycle{
  color:var(--green); position:relative;
  border-bottom:3px dashed var(--green); padding:0 2px;
}
h1 .word.cycle::after{
  content:""; position:absolute; left:-4px; right:-4px; top:0; bottom:-3px;
  background:var(--green-soft); border-radius:6px; z-index:-1; opacity:.5;
}
@keyframes wordIn{to{opacity:1; filter:blur(0); transform:translateY(0);}}

.hero-scroll-hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em; opacity:0;
  animation:fadeUp .8s ease forwards 1.4s;
  pointer-events:none;
}
.hero-scroll-line{
  width:1px; height:34px; background:var(--ink-soft); position:relative; overflow:hidden;
}
.hero-scroll-line::after{
  content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:linear-gradient(to bottom, var(--green), transparent);
  animation:scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{0%{transform:translateY(-100%);} 100%{transform:translateY(100%);}}
@keyframes shine{
  0%,100%{background-position:200% 0;}
  50%{background-position:0% 0;}
}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.hero p.lead{max-width:480px; margin:22px auto 30px; color:var(--ink-soft); font-size:16px; opacity:0; animation:fadeUp .7s ease forwards .6s;}
.hero-ctas{display:flex; gap:22px; justify-content:center; align-items:center; margin-bottom:60px; opacity:0; animation:fadeUp .7s ease forwards .75s;}

/* bio + stats — 2ª sección del home: negra, corte limpio contra el hero (sin degradado,
   sin blur) — el separador es una simple línea en el borde superior. */
.about{
  position:relative; overflow:hidden;
  padding:110px 0 40px;
  background:var(--ink); color:#fff;
  border-top:2px solid rgba(255,255,255,0.14);
}
.about .wrap{position:relative; z-index:1;}
.about .bio-card{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.14);}
.about .stat-card{background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.14);}
.about .stat-card .num{color:#fff;}
.about .stat-card .label{color:#a9ada9;}
.about-grid{display:grid; grid-template-columns:.9fr 1.4fr; gap:24px;}

.bio-card{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:34px; display:flex; flex-direction:column; justify-content:space-between; min-height:320px;}
.bio-card h3{font-size:20px; margin-bottom:14px;}
.bio-card p{font-size:14.5px; color:#c9cbc8; line-height:1.6;}

/* CTA hacia "Nosotros": sin cápsula que lo encierre — solo texto + flecha, con una
   iguana caminando de fondo en loop horizontal, girada 45°, puramente decorativa */
.slide-cta{
  position:relative; margin-top:24px; height:62px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; -webkit-user-select:none; user-select:none;
}
.slide-text{
  position:relative; z-index:1;
  font-size:13.5px; font-weight:600; color:#c9cbc8; letter-spacing:.01em;
  transition:color .25s ease;
}
.slide-cta:hover .slide-text{color:#eafff1;}
.slide-arrow-static{
  position:relative; z-index:1; font-size:16px; color:var(--green);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.slide-cta:hover .slide-arrow-static{transform:translateX(4px);}
.slide-iguana{
  position:absolute; top:50%; left:8px; width:42px; height:42px;
  transform:translateY(-50%) rotate(45deg); object-fit:contain; opacity:.9;
  pointer-events:none; z-index:0; will-change:left, transform;
}

.stats-grid{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:24px;}
.stat-card{background:var(--card); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; min-height:150px;}
.stat-card .num{font-size:38px; font-weight:800; color:var(--ink); letter-spacing:-.02em;}
.stat-card .num sup{font-size:16px; color:var(--green);}
.stat-card .label{font-size:13px; color:var(--ink-soft); margin-top:6px;}

/* working on — negra; se queda fija (pin real vía GSAP ScrollTrigger, ver home.js)
   mientras "pain" avanza por encima y la tapa por completo */
.working{padding:110px 0; background:var(--ink); color:#fff;}
.working-head{text-align:center; margin-bottom:56px;}
.working-head .pill{margin-bottom:20px;}
.working-head h2{font-size:clamp(28px,3.6vw,40px); max-width:600px; margin:0 auto; color:#fff;}
.proj-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.proj-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.proj-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.3);}
.proj-card .ph{border-radius:0; aspect-ratio:16/11; border:none; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px), rgba(255,255,255,0.03); color:#a9ada9;}
.proj-card .proj-media{width:100%; aspect-ratio:16/11; object-fit:cover; display:block;}
.proj-card .proj-body{padding:20px;}
.proj-card .tag{font-size:11.5px; font-weight:700; color:var(--green-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; display:block;}
.proj-card h4{font-size:17px; margin-bottom:6px; color:#fff;}
.proj-card p{font-size:13.5px; color:#a9ada9;}

/* pain — se desliza por encima de "working" (z-index mayor + fondo opaco) mientras
   se hace scroll, tapándola progresivamente */
.pain{position:relative; z-index:2; padding:110px 0 160px; background:var(--panel);}
.pain-head{max-width:600px; margin:0 auto 56px; text-align:center;}
.pain-head h2{font-size:clamp(28px,3.6vw,40px);}
.pain-head .accent{color:var(--green);}

/* scroll timeline: no visible line at all — just a big swimmer descending on the left,
   flipping direction on scroll-up, with cards stacked to the right that fade in one by
   one as the iguana's progress reaches them */
.timeline{position:relative; padding:10px 0 70px 160px;}
.timeline-track{
  position:absolute; left:70px; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:transparent;
}
.timeline-swimmer{
  position:absolute; left:70px; top:0; width:150px; height:auto;
  transform:translate(-50%,-50%); z-index:2; pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(18,18,18,0.18));
  transition:top .5s cubic-bezier(.16,1,.3,1);
}
.timeline-swimmer.reverse{transform:translate(-50%,-50%) scaleY(-1);}

/* pain card — look de carpeta apilada: cada card es position:sticky con un
   "top" ESCALONADO (120, 168, 216, 264px), no el mismo para todas. Así, al
   hacer scroll, cada card se queda fija más abajo que la anterior — la de
   atrás no desaparece del todo, se le sigue viendo su .card-tab (el
   separador) asomando arriba, como carpetas apiladas con pestañas visibles.
   Es 100% CSS (sticky nativo), sin pines ni JS: el scroll mismo produce el
   movimiento, así que ya es "dinámico" por construcción. */
.pain-card{
  position:sticky; margin:0 0 28px; width:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding:28px 30px 30px;
  box-shadow:0 14px 26px rgba(18,18,18,0.12);
}
.pain-card:nth-child(3){z-index:1; top:120px;}
.pain-card:nth-child(4){z-index:2; top:168px;}
.pain-card:nth-child(5){z-index:3; top:216px;}
.pain-card:nth-child(6){z-index:4; top:264px;}
/* la última card necesita su propio aire abajo para no quedar pegada al borde
   inferior de la sección */
.pain-card:last-child{margin-bottom:40px;}
.card-tab{
  position:absolute; left:0; top:-23px; z-index:1;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-bottom:1px solid var(--card);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  padding:7px 18px 9px; max-width:75%;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.pain-card h4{font-size:12.5px; text-transform:uppercase; color:var(--ink-soft); font-weight:700; letter-spacing:.03em; margin-bottom:6px;}
.pain-card p{font-size:14.5px; color:var(--ink); margin-bottom:18px;}
.pain-card .sol h4{color:var(--green);}
.pain-card .sol{border-top:1px solid var(--line); padding-top:16px;}
@media (max-width:900px){
  .timeline{padding-left:90px;}
  .timeline-track,.timeline-swimmer{left:36px;}
  .timeline-swimmer{width:80px;}
  .pain-card:nth-child(3){top:90px;}
  .pain-card:nth-child(4){top:132px;}
  .pain-card:nth-child(5){top:174px;}
  .pain-card:nth-child(6){top:216px;}
}

/* compare — z-index de seguridad: garantiza que esta sección (y todo lo que viene
   después) siempre se pinte por ENCIMA de "working"/las pain-cards, incluso si
   algún pin de GSAP se libera un poco tarde. Sin esto, un elemento position:fixed
   pinta por encima de cualquier sección estática sin importar el orden en el DOM. */
.compare{position:relative; z-index:5; padding:110px 0; background:var(--paper);}
.compare-head{text-align:center; max-width:600px; margin:0 auto 50px;}
.compare-head h2{font-size:clamp(28px,3.6vw,40px);}
table{width:100%; border-collapse:separate; border-spacing:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);}
thead th{background:var(--panel); padding:16px 20px; font-size:13px; font-weight:700; text-align:left;}
thead th.winner{background:var(--ink); color:#fff;}
tbody td{padding:16px 20px; font-size:13.5px; border-top:1px solid var(--line); color:var(--ink-soft);}
tbody td.winner{background:var(--green-soft); font-weight:700; color:var(--green);}
td:first-child{font-weight:700; color:var(--ink);}

/* features */
.features{position:relative; z-index:5; padding:110px 0; background:var(--panel);}
.features-head{text-align:center; max-width:600px; margin:0 auto 60px;}
.features-head h2{font-size:clamp(28px,3.6vw,40px);}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feat-card{background:var(--card); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--line);}
.feat-card .tag{font-size:11.5px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:block;}
.feat-card h3{font-size:18px; margin-bottom:10px;}
.feat-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px;}
.feat-card .ph{aspect-ratio:16/10;}
.feat-card .feat-media{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-md); margin-top:18px; display:block;}

/* timeline */
.timeline-section{padding:110px 0;}
.timeline-head{text-align:center; max-width:600px; margin:0 auto 60px;}
.timeline-head h2{font-size:clamp(28px,3.6vw,40px);}
.stepper{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.t-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;}
.t-item .day{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--green); text-transform:uppercase; margin-bottom:10px; display:block;}
.t-item h4{font-size:18px; margin-bottom:8px;}
.t-item p{font-size:13.5px; color:var(--ink-soft);}

/* roadmap */
.roadmap{padding:110px 0; background:var(--panel);}
.roadmap-head{text-align:center; max-width:640px; margin:0 auto 50px;}
.roadmap-head h2{font-size:clamp(24px,3vw,32px); font-weight:600;}
.roadmap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.roadmap-card{background:var(--card); border-radius:var(--radius-lg); padding:26px; border:1px solid var(--line);}
.roadmap-card .period{font-size:15px; font-weight:800; color:var(--green); margin-bottom:10px;}
.roadmap-card p{font-size:13.5px; color:var(--ink-soft);}

/* faq */
.faq{position:relative; z-index:5; padding:110px 0; max-width:820px; margin:0 auto; background:var(--paper);}
.faq-head{text-align:center; margin-bottom:44px;}
.faq-head h2{font-size:clamp(28px,3.6vw,38px);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 0; font-size:16px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:20px;}
.faq-q .icon{color:var(--green); font-size:20px; transition:transform .25s; flex-shrink:0;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding-bottom:22px; color:var(--ink-soft); font-size:14.5px; max-width:680px;}

/* final cta */
.final-cta{position:relative; z-index:5; padding:130px 0; text-align:center; background:var(--paper);}
.final-cta-inner{background:var(--ink); border-radius:var(--radius-lg); padding:80px 40px; position:relative; overflow:hidden;}
.final-cta h2{color:#fff; font-size:clamp(30px,4vw,46px); max-width:600px; margin:0 auto 16px;}
.final-cta p{color:#c9cbc8; font-size:15.5px; max-width:420px; margin:0 auto 30px;}
.final-cta .btn-primary{background:var(--green);}

footer{position:relative; z-index:5; padding:60px 0 30px; background:var(--paper);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line);}
.footer-brand p{margin-top:12px; font-size:13.5px; color:var(--ink-soft); max-width:260px;}
.footer-cols{display:flex; gap:60px;}
.footer-col h5{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9a9c99; margin-bottom:14px;}
.footer-col a{display:block; font-size:14px; font-weight:500; margin-bottom:10px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:10px;}
.socials{display:flex; gap:12px;}
.socials a{width:30px; height:30px; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}

/* explore — home section that links out to the other pages, 3ª sección: negra, con un
   separador blanco centrado (pill con glow) marcando el corte contra la 2ª sección */
.explore{padding:44px 0 90px; background:var(--ink); color:#fff; position:relative;}
.explore::before{
  content:""; position:absolute; top:0; left:50%; width:110px; height:3px;
  transform:translateX(-50%); border-radius:999px;
  background:linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow:0 0 18px 1px rgba(255,255,255,0.55);
}
.explore-head{text-align:center; max-width:600px; margin:0 auto 50px;}
.explore-head h2{font-size:clamp(28px,3.6vw,40px); color:#fff;}
.explore-head .accent{color:var(--green-soft);}

/* abanico de fotos — estilo "Made for makers": todas las cards giran alrededor
   de UN MISMO punto pivote (transform-origin muy por debajo de la card, como una
   mano de cartas). Solo cambia la rotación (--r) — la curva sale sola porque
   todas orbitan el mismo centro. Nada de --y a mano: eso era lo que daba el look
   "escalonado" en vez de arco perfecto. */
.explore-fan{display:flex; justify-content:center; align-items:flex-start; margin:60px 0 0; padding-bottom:120px;}
.fan-photo{
  position:relative; width:140px; height:180px; margin:0 -38px;
  border-radius:20px; overflow:hidden; flex-shrink:0;
  border:3px solid rgba(255,255,255,0.1);
  box-shadow:0 20px 40px rgba(0,0,0,0.45);
  transform-origin:50% 440px;
  transform:rotate(var(--r)) translateY(calc(var(--y, 0px) * var(--yscale, 1)));
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
/* las 5 cards son EXACTAMENTE del mismo tamaño — uniformes, como en la referencia */
.fan-photo:nth-child(1){z-index:1;}
.fan-photo:nth-child(2){z-index:2;}
.fan-photo:nth-child(3){z-index:3;}
.fan-photo:nth-child(4){z-index:2;}
.fan-photo:nth-child(5){z-index:1;}
.fan-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.fan-photo:hover{transform:rotate(var(--r)) translateY(calc((var(--y, 0px) * var(--yscale, 1)) - 14px)) scale(1.05); z-index:9; box-shadow:0 28px 50px rgba(0,0,0,0.55);}
.explore-caption{text-align:center; color:#a9ada9; font-size:14px; max-width:460px; margin:0 auto 36px;}
.explore-caption .accent-soft{color:#fff; font-weight:600;}
.explore-links{display:flex; justify-content:center; gap:28px; flex-wrap:wrap;}
.explore-link-item{font-size:13.5px; font-weight:700; color:#fff; border-bottom:1.5px solid var(--green); padding-bottom:2px; transition:color .2s ease;}
.explore-link-item:hover{color:var(--green-soft);}
@media (max-width:640px){
  .fan-photo{width:92px; height:118px; margin:0 -26px; border-radius:14px; transform-origin:50% 300px; --yscale:0.6;}
  .explore-links{gap:16px 22px;}
}

/* shared internal-page hero (nosotros / precios / es-para-ti) */
.page-hero{padding:170px 0 90px; background:var(--panel); overflow:hidden;}
.page-hero .pill{margin-bottom:22px;}
.page-hero h1{font-size:clamp(30px,4.6vw,48px); max-width:760px; margin:0 auto 20px;}
.page-hero .lead{max-width:560px; margin:12px auto 0; color:var(--ink-soft); font-size:16px;}
.page-hero.text-center{text-align:center;}

/* ---------- hero: nosotros — 3D flip card (Antes / Ahora) ---------- */
.hero-nosotros-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; text-align:left;}
.hero-nosotros-copy .pill{margin-bottom:22px;}
.hero-nosotros-copy h1{margin:0 0 16px;}
.hero-nosotros-copy .lead{margin:0;}
.evolve-card{
  position:relative; perspective:1400px; height:280px; cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.evolve-face{
  position:absolute; inset:0; border-radius:var(--radius-lg); padding:34px;
  display:flex; flex-direction:column; justify-content:flex-end;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.34,1.56,.64,1);
}
.evolve-front{background:var(--card); border:1px solid var(--line); transform:rotateY(0deg);}
.evolve-back{background:var(--ink); color:#fff; transform:rotateY(180deg);}
.evolve-card.flipped .evolve-front{transform:rotateY(-180deg);}
.evolve-card.flipped .evolve-back{transform:rotateY(0deg);}
.evolve-tag{font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green); margin-bottom:12px; display:block;}
.evolve-back .evolve-tag{color:var(--green-soft);}
.evolve-face h3{font-size:19px; line-height:1.35;}
.evolve-toggle{
  position:absolute; top:16px; right:16px; z-index:3; width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.evolve-toggle:active{transform:scale(.88) rotate(25deg);}
.evolve-arrow{font-size:17px; color:var(--ink);}

/* ---------- hero: precios — placeholder izquierda, copy derecha ---------- */
.hero-precios-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; text-align:left;}
.hero-precios-visual .hero-precios-ph{height:100%; min-height:320px;}
.hero-precios-visual .hero-precios-img{width:100%; height:100%; min-height:320px; object-fit:cover; border-radius:var(--radius-lg); display:block;}
.hero-precios-copy .pill{margin-bottom:22px;}
.hero-precios-copy h1{margin:0 0 16px;}
.hero-precios-copy .lead{margin:0;}
@media (max-width:900px){
  .hero-precios-grid{grid-template-columns:1fr; text-align:center;}
  .hero-precios-visual{order:2;}
  .hero-precios-copy{order:1; text-align:center;}
  .hero-precios-visual .hero-precios-ph{min-height:220px;}
  .hero-precios-visual .hero-precios-img{min-height:200px; max-height:280px;}
}

/* ---------- precios — slider de planes por isla ---------- */
.plans-head{text-align:center; margin-bottom:44px;}
.plans-head .pill{margin-bottom:16px;}
.plans-slider{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;}

.plans-slider-left{display:flex; align-items:center; gap:14px;}
.plan-island-stack{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  min-height:260px; justify-content:center;
}
.plan-island-thumb{width:120px; height:auto; margin:0 auto;}
.plan-island-name{font-size:34px; margin:0;}
.plan-island-next{font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

@media (max-width:900px){
  .plans-slider{grid-template-columns:1fr; text-align:center;}
  .plans-slider-left{justify-content:center; margin-bottom:8px;}
}

.island-picker{
  position:relative; display:inline-flex; margin:30px 0 0; padding:5px; background:var(--card);
  border:1px solid var(--line); border-radius:100px; gap:2px;
}
.island-btn{
  position:relative; z-index:1; border:none; background:none; cursor:pointer;
  padding:10px 22px; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  border-radius:100px; transition:color .3s ease;
}
.island-btn.is-active{color:#fff;}
.island-picker-thumb{
  position:absolute; top:5px; left:5px; width:calc(50% - 5px); height:calc(100% - 10px);
  background:var(--ink); border-radius:100px; z-index:0;
  transition:transform .55s cubic-bezier(.22,1.4,.36,1);
}
.island-picker[data-active="isabela"] .island-picker-thumb{transform:translateX(100%);}
.island-caption{max-width:420px; font-size:14.5px; color:var(--ink-soft); min-height:44px; margin-top:18px; transition:opacity .25s ease;}

.island-preview{display:flex; align-items:center; justify-content:center; min-height:340px;}
.island-shape{
  width:220px; height:220px; border-radius:50%; background:var(--green);
  box-shadow:0 30px 70px rgba(12,122,62,0.28);
  transition:width .6s cubic-bezier(.22,1.4,.36,1), height .6s cubic-bezier(.22,1.4,.36,1), background .4s ease, box-shadow .4s ease;
}
.island-preview[data-active="isabela"] .island-shape{width:360px; height:360px; background:var(--ink); box-shadow:0 30px 70px rgba(18,18,18,0.25);}
@media (max-width:900px){
  .hero-precios-grid{grid-template-columns:1fr; text-align:center;}
  .hero-precios-copy{text-align:center;}
  .island-picker{margin-left:auto; margin-right:auto;}
  .island-caption{margin-left:auto; margin-right:auto;}
  .island-preview{min-height:220px; margin-top:10px;}
  .island-shape{width:150px; height:150px;}
  .island-preview[data-active="isabela"] .island-shape{width:220px; height:220px;}
}

/* ---------- home — islas 3D (reemplaza el círculo plano de precios) ---------- */
.islands-3d{padding:110px 0; background:var(--panel); overflow:hidden;}
.islands-3d-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center;}
.islands-3d-copy .pill{margin-bottom:20px;}
.islands-3d-copy h2{margin:0 0 14px;}
.islands-3d-copy .lead{margin:0 0 4px; max-width:440px;}
.islands-3d-copy .island-caption{
  margin-top:16px; margin-bottom:22px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px;
}
.islands-3d-copy .btn-text{font-weight:700;}

.island-picker-row{display:flex; align-items:center; gap:10px; margin:28px 0 0;}
.island-picker-row .island-picker{
  margin:0; position:relative; background:none; border:none; padding:0;
}
#homeIslandThumb{display:none;}
.island-nav{
  position:relative; width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:18px; line-height:1; cursor:pointer;
  --mx:50%; --my:50%; --gx:0px; --gy:0px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .2s ease;
}
.island-nav:hover{background:var(--green-soft); box-shadow:inset var(--gx) var(--gy) 16px -6px var(--green-glow);}
.island-nav:active{transform:scale(.88);}
.island-nav:disabled{opacity:.35; cursor:default; transform:none; background:var(--card);}
.island-picker-row .island-btn{
  opacity:0; animation:islandBtnIn .35s ease forwards;
  color:var(--ink); background:var(--card); border:1px solid var(--line);
}
.island-picker-row .island-btn.is-active{color:var(--ink);}
@keyframes islandBtnIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.islands-3d-stage{
  position:relative; height:440px;
  overflow:hidden;
  border:1.5px solid rgba(18,18,18,0.16);
  border-radius:var(--radius-lg);
}
.islands-3d-stage::before,
.islands-3d-stage::after{
  content:""; position:absolute; top:0; bottom:0; width:20%; min-width:80px;
  z-index:2; pointer-events:none;
}
.islands-3d-stage::before{left:0; background:linear-gradient(to right, var(--panel) 0%, rgba(243,243,241,0) 100%);}
.islands-3d-stage::after{right:0; background:linear-gradient(to left, var(--panel) 0%, rgba(243,243,241,0) 100%);}
.islands-3d-fade-top,
.islands-3d-fade-bottom{
  position:absolute; left:0; right:0; height:22%; min-height:50px;
  z-index:2; pointer-events:none;
}
.islands-3d-fade-top{top:0; background:linear-gradient(to bottom, var(--panel) 0%, rgba(243,243,241,0) 100%);}
.islands-3d-fade-bottom{bottom:0; background:linear-gradient(to top, var(--panel) 0%, rgba(243,243,241,0) 100%);}
.map-world{
  position:absolute; left:0; top:0; width:1000px; height:460px;
  transform-origin:0 0;
}
.map-island{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px;
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.map-island-art{
  display:block; height:auto; opacity:1; pointer-events:none;
  transition:filter .4s ease, opacity .4s ease;
}
/* isla seleccionada: su contorno se pinta de verde */
.map-island.is-current .map-island-art{
  filter:drop-shadow(0 0 0 2px var(--green)) drop-shadow(0 0 3px var(--green));
}
/* cualquier isla que NO esté seleccionada se difumina — mapa y nombre por igual */
.map-island:not(.is-current) .map-island-art{
  opacity:.32; filter:blur(2.5px);
}
.map-island:not(.is-current) .map-label{
  opacity:.45; filter:blur(1.5px);
}
.map-dot{
  width:10px; height:10px; border-radius:50%; background:var(--line);
  border:1.5px dashed var(--ink-soft);
}
.map-label{
  font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap;
  background:var(--panel); padding:3px 9px; border-radius:100px;
  border:1px solid var(--line); pointer-events:none;
  transition:filter .4s ease, opacity .4s ease;
}
.map-island.is-placeholder .map-label{color:var(--ink-soft); border-style:dashed;}

.islands-3d-stage-wrap{display:flex; flex-direction:column; gap:18px;}
.island-dots{display:flex; align-items:center; justify-content:center; gap:10px;}
.island-dot{
  width:9px; height:9px; border-radius:50%; padding:0; border:none;
  background:var(--line); cursor:pointer; flex:0 0 auto;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, width .3s ease;
}
.island-dot:hover{background:var(--ink-soft);}
.island-dot.is-active{width:24px; border-radius:100px; background:var(--green);}
@media (max-width:900px){
  .islands-3d{padding:80px 0;}
  .islands-3d-grid{grid-template-columns:1fr; text-align:center;}
  .islands-3d-copy .lead{margin-left:auto; margin-right:auto;}
  .island-picker-row{margin-left:auto; margin-right:auto; justify-content:center;}
  .islands-3d-copy .island-caption{margin-left:auto; margin-right:auto;}
  .islands-3d-stage{height:280px;}
}

/* ---------- es-para-ti — full step-by-step quiz (no scroll needed) ---------- */
.quiz-section{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 60px; background:var(--panel);}

/* layout con imágenes decorativas a los lados del quiz */
.quiz-layout{
  display:grid;
  grid-template-columns:1fr minmax(0,700px) 1fr;
  align-items:center;
  gap:0;
  width:100%;
  max-width:1340px;
  margin:0 auto;
  padding:0 20px;
}
.quiz-center{ min-width:0; }
.quiz-deco{
  display:flex; align-items:center; justify-content:center;
  padding:0 24px;
}
.quiz-deco img{
  width:100%; max-width:210px; height:300px;
  object-fit:cover; border-radius:20px;
  box-shadow:0 24px 56px rgba(18,18,18,0.16);
  opacity:.82;
}
.quiz-deco-left img{ transform:rotate(-5deg) translateY(24px); }
.quiz-deco-right img{ transform:rotate(5deg) translateY(-24px); }
@media (max-width:1100px){
  .quiz-deco{ display:none; }
  .quiz-layout{ grid-template-columns:1fr; max-width:none; padding:0; }
}

.quiz-intro{text-align:center; margin-bottom:30px;}
.quiz-intro .pill{margin-bottom:18px;}
.quiz-intro h1{font-size:clamp(26px,3.6vw,38px); max-width:640px; margin:0 auto;}

.quiz-card{
  position:relative; max-width:640px; margin:0 auto; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:44px 44px 26px; min-height:420px; display:flex; flex-direction:column;
}
.quiz-progress{height:4px; border-radius:4px; background:var(--panel); overflow:hidden; margin-bottom:30px; flex-shrink:0;}
.quiz-progress-fill{height:100%; width:0%; background:var(--green); border-radius:4px; transition:width .5s cubic-bezier(.16,1,.3,1);}

.quiz-step{display:none; flex:1; flex-direction:column;}
.quiz-step.active{display:flex; animation:quizStepIn .45s cubic-bezier(.22,1,.36,1);}
@keyframes quizStepIn{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:translateX(0);}}

.quiz-step-label{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; display:block;}
.quiz-step h2{font-size:clamp(19px,2.4vw,24px); margin-bottom:24px; line-height:1.3;}
.quiz-options{display:flex; flex-direction:column; gap:10px;}
.quiz-option{
  text-align:left; padding:15px 22px; border-radius:100px; border:1.5px solid var(--line);
  background:var(--paper); font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease, color .2s ease;
}
.quiz-option:hover{border-color:var(--green);}
.quiz-option:active{transform:scale(.98);}
.quiz-option.chosen{background:var(--ink); border-color:var(--ink); color:#fff;}

.quiz-result p{font-size:15px; color:var(--ink-soft); margin-bottom:24px; line-height:1.6;}
.quiz-form{display:flex; flex-direction:column; gap:12px; max-width:360px;}
.quiz-form input{
  padding:13px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper);
  font-family:var(--font); font-size:14px; color:var(--ink);
}
.quiz-form input:focus{outline:none; border-color:var(--green);}
.quiz-form-note{font-size:13.5px; color:var(--green); margin-top:14px; font-weight:600;}

.quiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); flex-shrink:0;}
.quiz-back,.quiz-restart{background:none; border:none; cursor:pointer; font-size:13px; font-weight:700; color:var(--ink-soft); padding:6px 0;}
.quiz-back:hover,.quiz-restart:hover{color:var(--ink);}
.quiz-back[hidden],.quiz-restart[hidden]{visibility:hidden;}
@media (max-width:900px){
  .quiz-section{padding:130px 0 40px;}
  .quiz-card{padding:30px 26px 22px; min-height:0;}
}

/* nosotros — origin (por qué Galápagos): slider de flip-cards */
.origin{padding:110px 0; overflow:hidden;}
.origin-head{text-align:center; max-width:640px; margin:0 auto 36px;}
.origin-head h2{font-size:clamp(26px,3.4vw,36px);}
.origin-hint{display:block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}

.origin-slider{max-width:560px; margin:0 auto; overflow:hidden;}
.origin-track{display:flex; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.origin-card{flex:0 0 100%; padding:6px;}
.origin-card-inner{
  position:relative; perspective:1400px; height:340px; cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.origin-face{
  position:absolute; inset:0; border-radius:var(--radius-lg); padding:32px;
  display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.34,1.56,.64,1);
}
.origin-front{background:var(--card); border:1px solid var(--line); transform:rotateY(0deg); justify-content:flex-end; gap:6px;}
.origin-back{background:var(--ink); color:#fff; transform:rotateY(180deg); justify-content:center; gap:10px;}
.origin-card-inner.flipped .origin-front{transform:rotateY(-180deg);}
.origin-card-inner.flipped .origin-back{transform:rotateY(0deg);}
.origin-ph{position:absolute; top:26px; left:26px; right:26px; bottom:110px; min-height:0; overflow:hidden; border-radius:var(--radius-md);}
.origin-ph img{width:100%; height:100%; object-fit:cover; display:block;}
.origin-num{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.04em;}
.origin-back .origin-num{color:var(--green-soft);}
.origin-front h3{font-size:21px; line-height:1.3;}
.origin-back h4{font-size:18px; line-height:1.3;}
.origin-back p{font-size:14px; line-height:1.65; color:#dfe1de;}

.origin-controls{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px;}
.origin-dots{display:flex; gap:8px;}
.origin-dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; transition:background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);}
.origin-dot.is-active{background:var(--green); transform:scale(1.3);}

/* nosotros — story (tu realidad hoy / mañana / ¿listo?): stepper interactivo */
.story{padding:110px 0; background:var(--panel);}
.story-head{text-align:center; max-width:560px; margin:0 auto 40px;}
.story-stepper{
  max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:44px; transition:background .5s ease, border-color .5s ease, color .5s ease;
}
.story-progress{height:4px; border-radius:100px; background:var(--line); overflow:hidden; margin-bottom:30px;}
.story-progress-fill{display:block; height:100%; width:33.33%; background:var(--green); border-radius:100px; transition:width .5s cubic-bezier(.22,1,.36,1);}
.story-panels{position:relative; min-height:150px;}
.story-panel{display:none;}
.story-panel.is-active{display:block;}
.story-tag{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green); margin-bottom:12px;}
.story-panel p{font-size:17px; line-height:1.65; color:var(--ink);}
.story-nav{display:flex; align-items:center; justify-content:space-between; margin-top:32px;}
.story-dots{display:flex; gap:8px;}
.story-dot{width:9px; height:9px; border-radius:50%; background:var(--line); border:1.5px solid transparent; cursor:pointer; padding:0; transition:background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);}
.story-dot.is-active{background:var(--green); transform:scale(1.25);}

.story-stepper.is-dark{background:var(--ink); border-color:var(--ink); color:#fff;}
.story-stepper.is-dark .story-progress{background:rgba(255,255,255,0.18);}
.story-stepper.is-dark .story-tag{color:var(--green-soft);}
.story-stepper.is-dark .story-panel p{color:#e6e6e4;}
.story-stepper.is-dark .story-dot{background:rgba(255,255,255,0.25);}
.story-stepper.is-dark .story-dot.is-active{background:var(--green-soft);}

@media (max-width:640px){
  .origin-card-inner{height:390px;}
  .story-stepper{padding:30px 24px;}
  .story-nav{flex-direction:column; gap:18px; align-items:flex-start;}
}

/* nosotros — De aquí a allá: comparación estática antes/después */
.story-compare{
  display:grid; grid-template-columns:1fr auto 1fr;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.story-col{padding:38px 36px;}
.story-col-before{background:var(--panel);}
.story-col-after{background:var(--ink); color:#fff;}
.story-col-label{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--green); margin-bottom:22px; display:block;
}
.story-col-after .story-col-label{color:var(--green-soft);}
.story-list{list-style:none; display:flex; flex-direction:column; gap:18px;}
.story-list li{
  font-size:14.5px; line-height:1.58; padding-left:22px;
  position:relative; color:var(--ink-soft);
}
.story-col-after .story-list li{color:#c9cbc8;}
.story-list li::before{content:"—"; position:absolute; left:0; color:rgba(18,18,18,0.3);}
.story-col-after .story-list li::before{content:"✓"; color:var(--green-soft); font-weight:700;}
.story-divider{
  display:flex; align-items:center; justify-content:center;
  padding:0 22px; font-size:22px; color:var(--green);
  background:var(--card); border-left:1px solid var(--line); border-right:1px solid var(--line);
}
@media(max-width:760px){
  .story-compare{grid-template-columns:1fr;}
  .story-divider{padding:16px 0; border:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:18px; transform:rotate(90deg);}
}

/* nosotros — team */
.team{padding:110px 0;}
.team-head{text-align:center; max-width:600px; margin:0 auto 40px;}
.team-head h2{font-size:clamp(26px,3.4vw,36px);}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.team-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px 28px; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(18,18,18,0.09);}
.team-avatar{
  width:72px; height:72px; border-radius:50%; background:var(--ink);
  margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff; letter-spacing:-.01em;
}
.team-name{font-size:17px; font-weight:700; margin-bottom:8px;}
.team-role{
  font-size:12px; font-weight:700; color:var(--green);
  text-transform:uppercase; letter-spacing:.05em;
}
@media(max-width:640px){.team-grid{grid-template-columns:1fr;}}

/* bloque "próximamente" — para secciones cuyo contenido real aún no se publica
   (equipo fundador, etc.). Sin corchetes de placeholder: limpio y presentable. */
.coming-soon{
  max-width:620px; margin:0 auto; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px 32px;
}
.coming-soon-badge{
  display:inline-block; margin-bottom:14px; padding:6px 16px; border-radius:100px;
  background:var(--green-soft); color:var(--green);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.coming-soon p{font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0;}
.pending-badge{
  display:inline-block; margin-right:8px; padding:3px 11px; border-radius:100px;
  background:var(--green-soft); color:var(--green);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}

/* precios — data strip */
.data-strip{padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel);}
.data-strip-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-soft); text-align:center;}

/* precios — plan cards (island-named) */
.plans{padding:100px 0;}
.plans-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.plan-card{position:relative; margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg); padding:34px;}
.plan-card.featured{background:var(--ink); border-color:var(--ink); color:#fff;}
.plan-card.featured .card-tab{background:var(--ink); color:#fff; border-color:var(--ink);}
.plan-sub{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:20px;}
.plan-card.featured .plan-sub{color:#c9cbc8;}
.plan-list{margin:0 0 20px; padding-left:18px;}
.plan-list li{font-size:14px; margin-bottom:8px; line-height:1.5; color:var(--ink);}
.plan-card.featured .plan-list li{color:#e6e6e4;}
.plan-note{font-size:13px; color:var(--ink-soft); font-style:italic; margin-bottom:22px;}
.plan-card.featured .plan-note{color:#a9ada9;}
.pending-note{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:26px; line-height:1.6;}

/* grid column modifiers, reused across internal pages */
.cols-2{grid-template-columns:repeat(2,1fr) !important;}
.cols-4{grid-template-columns:repeat(4,1fr) !important;}

/* es-para-ti — softer risk-reversal box (reuses final-cta-inner shape, lighter colors) */
.fit-risk .final-cta-inner{background:var(--card); border:1px solid var(--line);}
.fit-risk .final-cta-inner h2{color:var(--ink);}
.fit-risk .final-cta-inner p{color:var(--ink-soft);}

/* ============ QUIEBRES NEGROS — divisores de sección ============ */
/* 1) marquee angosto que corre horizontal */
.dark-break{
  position:relative; z-index:5;
  background:var(--ink); color:#fff; padding:26px 0; overflow:hidden;
  border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f;
}
.marquee{overflow:hidden; mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);}
.marquee-track{
  display:inline-flex; align-items:center; gap:34px; white-space:nowrap;
  animation:marqueeScroll 22s linear infinite;
  font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.marquee-track .dot{color:var(--green);}
@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* 2) statement grande — palabra por palabra al hacer scroll */
.dark-statement{
  background:var(--ink); color:#fff; padding:140px 0; text-align:center;
  position:relative; z-index:5; overflow:hidden;
}
.dark-statement::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 100%, rgba(12,122,62,0.16), transparent 55%);
  pointer-events:none;
}
.dark-statement .wrap{position:relative; z-index:1;}
.dark-statement .pill-outline{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.22);
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:36px;
}
.statement-text{
  font-size:clamp(30px,5vw,58px); font-weight:700; line-height:1.15; max-width:1000px; margin:0 auto;
  color:#fff; letter-spacing:-.02em;
}
.statement-word{display:inline-block; margin-right:.22em; opacity:.18; transition:opacity .1s ease;}
.statement-word.statement-accent{color:var(--green);}
.statement-word.is-lit{opacity:1;}

@media (max-width:640px){
  .dark-break{padding:20px 0;}
  .marquee-track{gap:24px; font-size:13px;}
  .dark-statement{padding:90px 0;}
}

@media (max-width:900px){
  .about-grid,.stats-grid,.proj-row,.feat-grid,.stepper,.roadmap-grid,.explore-grid,.plans-grid{grid-template-columns:1fr !important;}
  header nav{padding:10px 10px 10px 20px; grid-template-columns:auto auto;}
  .nav-center{display:none;}
  .nav-toggle{display:flex;}
  table{font-size:12px;}
  .page-hero{padding:150px 0 70px;}
  .hero-nosotros-grid{grid-template-columns:1fr; text-align:center;}
  .hero-nosotros-copy{text-align:center;}
  .evolve-card{height:220px; max-width:420px; margin:0 auto;}
  .hero-ctas{flex-wrap:wrap; row-gap:14px;}
  .final-cta-inner{padding:56px 26px;}
  .origin-face{padding:24px;}
  .footer-cols{gap:36px;}
}

@media (max-width:520px){
  .wrap{padding:0 20px;}
  header{width:calc(100% - 24px);}
  .nav-mobile{left:12px; right:12px; top:64px;}
  h1{font-size:clamp(28px,8vw,38px);}
  .hero{padding-top:100px;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-ctas .btn,.hero-ctas .btn-text{width:100%; justify-content:center; text-align:center;}
  .bio-card{padding:26px;}
  .final-cta-inner{padding:44px 20px;}
  .final-cta h2{font-size:clamp(24px,7vw,32px);}
  .quiz-card{padding:24px 20px 18px;}
  .origin-card-inner{height:420px;}
  .origin-face{padding:22px;}
  .story-stepper{padding:24px 18px;}
  .plan-island-name{font-size:26px;}
  .footer-cols{flex-direction:column; gap:26px;}
  .islands-3d-stage{height:240px;}
}