/* ========================================================================
   ELENIA — premium health tracking landing
   Palette: brand kit. System: premium, limpio, sofisticado.
   ======================================================================== */

:root{
  /* brand */
  --verde:        #166534;   /* verde principal */
  --verde-vivo:   #4ADE80;   /* verde vivo */
  --verde-suave:  #DCFCE7;   /* verde suave */
  --verde-prof:   #0F766E;   /* verde profundo */
  --carbon:       #111827;   /* carbón */
  --fondo:        #F8FAF8;   /* fondo cálido */

  /* derived */
  --ink:          #0c1410;
  --ink-2:        #3a463f;
  --ink-3:        #6b7a70;
  --line:         #e6ebe7;
  --line-2:       #d6e0d9;
  --white:        #ffffff;
  --verde-deep:   #0c3d20;
  --grad-green:   linear-gradient(135deg, var(--verde) 0%, var(--verde-prof) 100%);
  --grad-vivo:    linear-gradient(135deg, var(--verde-vivo) 0%, var(--verde) 100%);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px;
  --shadow-sm: 0 1px 2px rgba(16,40,24,.04), 0 4px 14px rgba(16,40,24,.05);
  --shadow:    0 4px 10px rgba(16,40,24,.05), 0 24px 60px rgba(12,61,32,.10);
  --shadow-lg: 0 10px 30px rgba(16,40,24,.08), 0 50px 110px rgba(12,61,32,.16);

  --font-d: "Schibsted Grotesk", system-ui, sans-serif;
  --font-b: "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; }
*{ scrollbar-width:thin; scrollbar-color:rgba(107,122,112,.4) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(107,122,112,.32); border-radius:100px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(107,122,112,.55); }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--fondo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--verde-vivo); color:var(--verde-deep); }

.skip{ position:fixed; left:-999px; top:0; z-index:200; background:var(--verde); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; }
.skip:focus{ left:0; }

h1,h2,h3,h4{ font-family:var(--font-d); font-weight:800; line-height:1.02; letter-spacing:-.025em; color:var(--ink); }

.kicker{
  font-family:var(--font-d); font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.1rem;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--verde-vivo); border-radius:2px; }
.kicker--light{ color:var(--verde-suave); }
.kicker--light::before{ background:var(--verde-vivo); }

.section-head{ max-width:760px; margin:0 auto clamp(40px,6vw,80px); text-align:center; padding:0 var(--pad); }
.section-head .kicker{ justify-content:center; }
.section-title{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
.section-sub{ margin-top:1.1rem; color:var(--ink-3); font-size:1.12rem; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-d); font-weight:600; font-size:.98rem;
  padding:.82em 1.5em; border-radius:100px; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s, box-shadow .35s, color .3s, border-color .3s;
  will-change:transform;
}
.btn--lg{ padding:1.02em 1.9em; font-size:1.04rem; }
.btn--block{ width:100%; }
.btn--solid{
  background:var(--verde); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 22px rgba(22,101,52,.28);
}
.btn--solid:hover{ background:var(--verde-deep); transform:translateY(-2px); box-shadow:0 14px 32px rgba(22,101,52,.34); }
.btn--ghost{
  background:var(--white); color:var(--ink); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ border-color:var(--verde); color:var(--verde); transform:translateY(-2px); }
.btn .play{ color:var(--verde); font-size:.8em; }

/* ============================================================ progress spine */
.spine{
  position:fixed; left:clamp(14px,2.4vw,34px); bottom:clamp(16px,3vw,34px);
  z-index:60; display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.spine.is-on{ opacity:1; transform:none; }
.spine__ring{ width:64px; height:64px; transform:rotate(-90deg); filter:drop-shadow(0 8px 18px rgba(12,61,32,.18)); }
.spine__track{ fill:rgba(255,255,255,.85); stroke:var(--line-2); stroke-width:5; }
.spine__fill{ fill:none; stroke:var(--verde); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:201; stroke-dashoffset:201; }
.spine__num{
  position:absolute; top:21px; left:0; right:0; text-align:center;
  font-family:var(--font-d); font-weight:800; font-size:1.02rem; color:var(--verde-deep);
  letter-spacing:-.03em;
}
.spine__num i{ font-style:normal; font-size:.6em; opacity:.6; }

/* ==================================================================== nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  transition:transform .4s var(--ease);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:24px;
}
.nav__inner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(248,250,248,.72); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; opacity:0; transition:opacity .4s, border-color .4s;
}
.nav.is-scrolled .nav__inner::before{ opacity:1; border-bottom-color:var(--line); }

.brand{ display:inline-flex; align-items:center; gap:.42em; min-height:44px; font-family:var(--font-d); font-weight:800; font-size:1.4rem; letter-spacing:-.04em; color:var(--ink); }
.brand__mark{ width:1.16em; height:1.16em; flex:none; color:var(--verde); }
.brand__word{ position:relative; top:.02em; }

.nav__links{ display:flex; gap:30px; margin-left:18px; }
.nav__links a{ font-size:.95rem; color:var(--ink-2); font-weight:450; position:relative; padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--verde); border-radius:2px; transition:width .3s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav__login{ padding:.6em 1.1em; }

.nav__burger{ display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:var(--white); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav__burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.sheet{
  position:fixed; inset:0 0 0 auto; width:min(86vw,340px); z-index:79;
  background:var(--white); box-shadow:var(--shadow-lg);
  padding:96px 28px 28px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .45s var(--ease); visibility:hidden;
}
.sheet.is-open{ transform:none; visibility:visible; }
.sheet a{ font-family:var(--font-d); font-weight:600; font-size:1.2rem; padding:14px 4px; border-bottom:1px solid var(--line); }
.sheet a.btn{ border:0; margin-top:18px; justify-content:center; }

/* =================================================================== hero */
.hero{ position:relative; padding:clamp(120px,17vh,180px) var(--pad) clamp(40px,7vh,90px); overflow:clip; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.6; }
.orb--1{ width:46vw; height:46vw; right:-10vw; top:-6vw; background:radial-gradient(circle at 30% 30%, var(--verde-vivo), transparent 65%); opacity:.4; }
.orb--2{ width:34vw; height:34vw; left:-12vw; bottom:-12vw; background:radial-gradient(circle at 50% 50%, var(--verde-suave), transparent 68%); opacity:.7; }
.orb--3{ width:50vw; height:50vw; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--verde-vivo), transparent 60%); opacity:.18; }
.grain{ position:absolute; inset:0; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.hero__grid{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(24px,4vw,56px); align-items:center;
}
.eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-d); font-weight:600; font-size:.9rem; color:var(--verde); background:var(--verde-suave); padding:7px 15px 7px 12px; border-radius:100px; }
.eyebrow__dot{ width:8px; height:8px; border-radius:50%; background:var(--verde-vivo); box-shadow:0 0 0 4px rgba(74,222,128,.25); }
.hero__title{ font-size:clamp(3rem, 7.6vw, 6.2rem); margin:1.2rem 0 0; }
.hero__sub{ margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-2); max-width:30ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }
.hero__proof{ display:flex; align-items:center; gap:14px; margin-top:2.4rem; }
.avstack{ display:flex; }
.avstack img{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:3px solid var(--fondo); margin-left:-14px; box-shadow:var(--shadow-sm); }
.avstack img:first-child{ margin-left:0; }
.hero__prooftxt b{ display:block; font-family:var(--font-d); font-weight:700; font-size:.94rem; color:var(--ink); line-height:1.2; }
.hero__prooftxt span{ font-size:.86rem; color:var(--ink-3); }

/* hero stage / big ring */
.hero__stage{ position:relative; justify-self:center; width:min(100%,520px); aspect-ratio:1; }
.herostage__ring{ position:absolute; inset:0; }
.bigring{ width:100%; height:100%; transform:rotate(-90deg); }
.bigring__track{ fill:none; stroke:var(--line-2); stroke-width:10; opacity:.7; }
.bigring__fill{ fill:none; stroke:url(#g) var(--verde); stroke:var(--verde); stroke-width:12; stroke-linecap:round;
  stroke-dasharray:1495; stroke-dashoffset:1495; filter:drop-shadow(0 8px 16px rgba(22,101,52,.25)); }
.herostage__photo{
  position:absolute; inset:7%; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg, var(--verde-suave), #cfeede);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), var(--shadow-lg);
}
.herostage__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.herostage__glow{ position:absolute; inset:0; border-radius:50%; box-shadow:0 40px 90px rgba(12,61,32,.22); z-index:-1; }

.floatcard{
  position:absolute; z-index:3; background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7); border-radius:16px; box-shadow:var(--shadow);
  padding:12px 16px; display:flex; align-items:center; gap:12px;
}
.floatcard--top{ top:4%; left:-4%; }
.floatcard--top strong{ display:block; font-family:var(--font-d); font-weight:700; font-size:.92rem; }
.floatcard--top span{ font-size:.78rem; color:var(--ink-3); }
.floatcard__ico{ width:34px; height:34px; border-radius:10px; background:var(--verde-suave); color:var(--verde); display:grid; place-items:center; }
.floatcard--bot{ bottom:5%; right:-3%; flex-direction:column; gap:0; align-items:flex-start; padding:14px 18px; }
.floatcard__num{ font-family:var(--font-d); font-weight:800; font-size:1.9rem; color:var(--verde); letter-spacing:-.03em; line-height:1; }
.floatcard__cap{ font-size:.74rem; color:var(--ink-3); }

.hero__scrollcue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:7px; font-family:var(--font-d); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.hero__scrollcue i{ width:1px; height:34px; background:linear-gradient(var(--verde),transparent); position:relative; overflow:hidden; }
.hero__scrollcue i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--verde); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ to{ top:100%; } }

/* ================================================================ marquee */
.marquee{ border-block:1px solid var(--line); background:var(--white); padding:18px 0; overflow:hidden; white-space:nowrap; }
.marquee__row{ display:inline-flex; align-items:center; gap:26px; font-family:var(--font-d); font-weight:600; font-size:clamp(1rem,1.7vw,1.35rem); color:var(--ink); will-change:transform; }
.marquee__row .dot{ color:var(--verde-vivo); font-size:.6em; }
.marquee__row span:not(.dot){ color:var(--ink-2); }

/* ================================================================ reframe */
.reframe{ padding:clamp(90px,14vh,170px) var(--pad); max-width:1080px; margin:0 auto; text-align:center; }
.reframe .kicker{ justify-content:center; }
.reframe__line{ font-size:clamp(1.7rem,4vw,3.1rem); font-weight:700; letter-spacing:-.02em; line-height:1.16; color:var(--ink-2); }
.reframe__line em{ font-style:normal; color:var(--verde); }
.reframe__line .w{ display:inline-block; }
.reframe__foot{ margin-top:1.8rem; font-size:1.1rem; color:var(--ink-3); max-width:60ch; margin-inline:auto; }
.reframe__band{ width:100vw; margin-left:calc(50% - 50vw); margin-top:clamp(44px,6vw,80px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.band__track{ display:flex; gap:18px; width:max-content; padding-inline:9px; will-change:transform; }
.bandimg{ flex:0 0 auto; width:clamp(208px,22vw,278px); aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--verde-suave),#cfeede); box-shadow:var(--shadow); }
.bandimg img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.bandimg:hover img{ transform:scale(1.06); }

/* ============================================================= cómo / how */
.how{ padding:clamp(40px,7vh,80px) var(--pad) clamp(80px,12vh,140px); max-width:var(--maxw); margin:0 auto; }
.how__steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.how__connector{ position:absolute; top:76px; left:16%; right:16%; height:3px; background:var(--verde-suave); border-radius:3px; z-index:0; }
.how__connector span{ display:block; height:100%; width:0; background:var(--verde); border-radius:3px; box-shadow:0 0 14px rgba(22,101,52,.45); }
.step{ position:relative; z-index:1; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px 36px; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s, border-color .5s; }
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.step.is-active{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--verde-suave); }
.step.is-active .step__ring{ filter:drop-shadow(0 6px 16px rgba(22,101,52,.28)); }
.step__ring{ position:relative; width:84px; height:84px; margin-bottom:22px; }
.step__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.r-track{ fill:none; stroke:var(--verde-suave); stroke-width:8; }
.r-fill{ fill:none; stroke:var(--verde); stroke-width:8; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; }
.step__no{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:1.4rem; color:var(--verde-deep); }
.step h3{ font-size:1.55rem; margin-bottom:.6rem; }
.step p{ color:var(--ink-3); font-size:1rem; }

/* ============================================================= calculadora */
.calc{ background:var(--carbon); color:#eaf1ec; padding:clamp(70px,11vh,130px) var(--pad); position:relative; overflow:clip; }
.calc::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 10%, rgba(15,118,110,.45), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(22,101,52,.5), transparent 55%); }
.calc__inner{ position:relative; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr .9fr; gap:clamp(36px,5vw,80px); align-items:center; }
.calc__title{ color:#fff; font-size:clamp(2rem,4.2vw,3.2rem); }
.calc__lead{ margin-top:1.2rem; color:#a9bcb0; font-size:1.08rem; max-width:46ch; }
.calc__field{ margin-top:2rem; }
.calc__field > label{ display:flex; align-items:center; gap:.6em; font-family:var(--font-d); font-weight:600; font-size:.92rem; color:#cfe0d6; margin-bottom:.9rem; }
.calc__field > label b{ margin-left:auto; color:var(--verde-vivo); font-weight:700; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-d); font-weight:600; font-size:.92rem; padding:.62em 1.15em; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#dbe7e0; transition:.28s var(--ease); }
.chip:hover{ border-color:var(--verde-vivo); color:#fff; }
.chip.is-on{ background:var(--verde-vivo); color:var(--verde-deep); border-color:var(--verde-vivo); }
/* The rail stays 6px, but the input itself is 44px tall so the whole strip is
   grabbable on a phone. Negative margins keep the original vertical rhythm. */
.slider{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:-13px 0; padding:0; background:transparent; outline:none; cursor:pointer; }
.slider::-webkit-slider-runnable-track{ height:6px; border-radius:100px; background:rgba(255,255,255,.14); }
.slider::-moz-range-track{ height:6px; border-radius:100px; background:rgba(255,255,255,.14); }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:#fff; border:5px solid var(--verde-vivo); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:grab; transition:transform .2s; }
.slider::-webkit-slider-thumb:active{ transform:scale(1.12); cursor:grabbing; }
.slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--verde-vivo); cursor:grab; }
.slider__ticks{ display:flex; justify-content:space-between; margin-top:.35rem; font-size:.78rem; color:#8ea396; }
.calc__cta{ margin-top:2.4rem; }
.calc__disclaim{ margin-top:1rem; font-size:.8rem; color:#7f9388; }

.calc__viz{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.calc__ring{ position:relative; width:min(86vw,340px); aspect-ratio:1; }
.calc__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cr-track{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:14; }
.cr-fill{ fill:none; stroke:var(--verde-vivo); stroke-width:14; stroke-linecap:round; stroke-dasharray:867; stroke-dashoffset:867; filter:drop-shadow(0 0 18px rgba(74,222,128,.5)); transition:stroke-dashoffset .9s var(--ease); }
.calc__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.calc__pct{ font-family:var(--font-d); font-weight:800; font-size:clamp(3rem,7vw,4.4rem); color:#fff; letter-spacing:-.04em; line-height:1; }
.calc__center p{ color:#a9bcb0; font-size:.92rem; margin-top:.3rem; }
.calc__center p span{ color:var(--verde-vivo); }
.calc__weeks{ font-family:var(--font-d); font-weight:600; font-size:.9rem; color:#8ea396; }
.calc__weeks span{ color:var(--verde-vivo); }

/* =============================================================== seguimiento */
.track{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,13vh,150px) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.track__lead{ margin-top:1.2rem; color:var(--ink-3); font-size:1.1rem; max-width:42ch; }
.track__list{ list-style:none; margin-top:1.8rem; display:flex; flex-direction:column; gap:14px; }
.track__list li{ position:relative; padding-left:34px; color:var(--ink-2); }
.track__list li b{ color:var(--ink); font-weight:600; }
.track__list li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:7px; background:var(--verde-suave); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:15px; background-repeat:no-repeat; background-position:center; }

/* phone */
.track__device{ position:relative; justify-self:center; perspective:1300px; }
.phone{ will-change:transform; }
.track__deviceglow{ position:absolute; inset:-8% -4%; background:radial-gradient(circle at 50% 40%, rgba(74,222,128,.35), transparent 60%); filter:blur(40px); z-index:-1; }
.phone{ width:min(82vw,330px); aspect-ratio:330/680; background:#0b1410; border-radius:46px; padding:11px; box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06); }
.phone__notch{ position:absolute; top:24px; left:50%; transform:translateX(-50%); width:104px; height:26px; background:#0b1410; border-radius:100px; z-index:3; }
.phone__screen{ position:relative; height:100%; background:linear-gradient(180deg,#ffffff, #f3f8f4); border-radius:36px; overflow:hidden; padding:18px 18px 14px; display:flex; flex-direction:column; }
.appbar{ display:flex; justify-content:space-between; align-items:center; font-size:.72rem; font-weight:600; color:var(--ink); padding:4px 6px 12px; }
.appbar__sig{ letter-spacing:-1px; }
.app__head{ display:flex; justify-content:space-between; align-items:center; }
.app__hi{ font-family:var(--font-d); font-weight:800; font-size:1.18rem; color:var(--ink); }
.app__week{ font-size:.82rem; color:var(--ink-3); }
.app__avatar{ width:38px; height:38px; border-radius:50%; background:var(--grad-green); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; }
.app__ring{ position:relative; width:170px; aspect-ratio:1; margin:14px auto 8px; }
.app__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ar-track{ fill:none; stroke:var(--verde-suave); stroke-width:13; }
.ar-fill{ fill:none; stroke:var(--verde); stroke-width:13; stroke-linecap:round; stroke-dasharray:528; stroke-dashoffset:528; }
.app__ringnum{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; color:var(--verde); }
.app__ringnum b{ font-family:var(--font-d); font-weight:800; font-size:2.1rem; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.app__ringnum small{ font-size:.72rem; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.app__metrics{ display:flex; flex-direction:column; gap:13px; margin-top:6px; }
.metric{ display:flex; align-items:center; gap:11px; }
.metric__i{ width:30px; height:30px; border-radius:9px; background:var(--fondo); display:grid; place-items:center; font-size:.95rem; }
.metric__body{ flex:1; }
.metric__body > span{ font-size:.82rem; color:var(--ink-2); display:block; margin-bottom:5px; }
.bar{ display:block; height:7px; border-radius:100px; background:var(--line); overflow:hidden; }
.bar b{ display:block; height:100%; width:0; border-radius:100px; background:var(--grad-vivo); transition:width 1.1s var(--ease); }
.app__tabbar{ display:flex; justify-content:space-between; margin-top:auto; padding:12px 6px 2px; border-top:1px solid var(--line); font-size:.66rem; color:var(--ink-3); font-weight:500; }
.app__tabbar .is-on{ color:var(--verde); font-weight:700; }

/* =================================================================== human */
.human{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vh,80px) var(--pad) clamp(80px,12vh,140px); display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:center; }
.human__media{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,var(--verde-suave),#cfeede); box-shadow:var(--shadow-lg); }
.human__media img{ width:100%; height:100%; object-fit:cover; }
.human__badge{ position:absolute; left:18px; bottom:18px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-radius:100px; padding:8px 15px; font-family:var(--font-d); font-weight:600; font-size:.84rem; display:flex; align-items:center; gap:.5em; box-shadow:var(--shadow-sm); }
.human__dot{ width:8px; height:8px; border-radius:50%; background:var(--verde-vivo); box-shadow:0 0 0 4px rgba(74,222,128,.3); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(74,222,128,0); } }
.human__copy h2{ margin-bottom:1.1rem; }
.human__copy > p{ color:var(--ink-2); font-size:1.12rem; max-width:46ch; }
.human__pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.4rem; }
.human__pillars > div{ border-top:2px solid var(--verde-suave); padding-top:14px; }
.human__pillars strong{ display:block; font-family:var(--font-d); font-weight:700; color:var(--verde); margin-bottom:4px; }
.human__pillars span{ font-size:.88rem; color:var(--ink-3); }

/* =================================================================== planes */
.plans{ padding:clamp(70px,11vh,130px) var(--pad); background:linear-gradient(180deg,var(--white),var(--fondo)); border-top:1px solid var(--line); }
.plans__grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl); padding:36px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); position:relative; transition:transform .4s var(--ease), box-shadow .4s; }
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.plan--feat{ background:linear-gradient(180deg,var(--verde-deep),#0a2e18); color:#eaf1ec; border:0; box-shadow:var(--shadow-lg); transform:translateY(-10px); }
.plan--feat:hover{ transform:translateY(-15px); }
.plan__tag{ position:absolute; top:-13px; left:30px; background:var(--verde-vivo); color:var(--verde-deep); font-family:var(--font-d); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:100px; }
.plan__tag--alt{ background:var(--carbon); color:#fff; }
.plan__head h3{ font-size:1.7rem; }
.plan--feat .plan__head h3{ color:#fff; }
.plan__head p{ color:var(--ink-3); margin-top:.4rem; }
.plan--feat .plan__head p{ color:#9fb6a8; }
.plan__price{ display:flex; align-items:flex-start; gap:5px; margin:22px 0 4px; font-family:var(--font-d); color:var(--ink); }
.plan--feat .plan__price{ color:#fff; }
.plan__price .cur{ font-size:1.5rem; font-weight:700; margin-top:.46em; letter-spacing:-.02em; }
.plan__price .amt{ font-size:3.6rem; font-weight:800; line-height:1; letter-spacing:-.04em; }
.plan__price .per{ font-size:1rem; color:var(--ink-3); margin-top:1.8em; }
.plan--feat .plan__price .per{ color:#9fb6a8; }
.plan__save{ font-size:.84rem; color:var(--verde); font-weight:600; margin-bottom:8px; }
.plan--feat .plan__save{ color:var(--verde-vivo); }
.plan__save--muted{ color:var(--ink-3); }
.plans__note{ max-width:var(--maxw); margin:34px auto 0; text-align:center; font-size:.92rem; color:var(--ink-3); }
.plan__feat{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:18px 0 28px; flex:1; }
.plan__feat li{ position:relative; padding-left:28px; font-size:.96rem; color:var(--ink-2); }
.plan--feat .plan__feat li{ color:#cfe0d6; }
.plan__feat li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--verde-suave); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23166534' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px; background-repeat:no-repeat; background-position:center; }
.plan--feat .plan__feat li::before{ background-color:rgba(74,222,128,.2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%234ADE80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plans__note{ text-align:center; margin-top:2rem; font-size:.82rem; color:var(--ink-3); }

/* ================================================================ historias */
.stories{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,11vh,130px) var(--pad); }
.stories__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.story{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s; }
.story:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.story__metric{ display:inline-flex; flex-direction:column; align-self:flex-start; background:var(--verde-suave); border-radius:14px; padding:10px 16px; }
.story__metric span{ font-family:var(--font-d); font-weight:800; font-size:1.3rem; color:var(--verde); letter-spacing:-.02em; }
.story__metric i{ font-style:normal; font-size:.78rem; color:var(--verde-prof); }
.story blockquote{ font-size:1.05rem; color:var(--ink-2); line-height:1.55; }
.story figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.story__av{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:var(--grad-green); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; box-shadow:0 0 0 3px var(--verde-suave); }
.story__av img{ width:100%; height:100%; object-fit:cover; }
.story figcaption b{ font-family:var(--font-d); font-weight:700; display:block; }
.story figcaption i{ font-style:normal; font-size:.82rem; color:var(--ink-3); }

/* ===================================================================== faq */
.faq{ max-width:860px; margin:0 auto; padding:clamp(40px,7vh,80px) var(--pad) clamp(80px,12vh,140px); }
.faq__head{ text-align:center; margin-bottom:clamp(30px,5vw,56px); }
.faq__head .kicker{ justify-content:center; }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative; font-family:var(--font-d); font-weight:600; font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ position:absolute; right:4px; top:50%; width:18px; height:18px; transform:translateY(-50%); }
.qa summary i::before,.qa summary i::after{ content:""; position:absolute; top:50%; left:0; width:18px; height:2px; background:var(--verde); border-radius:2px; transition:transform .3s var(--ease); }
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0); }
.qa p{ color:var(--ink-3); padding:0 40px 26px 0; max-width:64ch; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(-6px); } }

/* ===================================================================== end */
.end{ position:relative; overflow:clip; background:var(--verde-deep); color:#eaf1ec; padding:clamp(90px,15vh,180px) var(--pad); text-align:center; }
.end__bg{ position:absolute; inset:0; }
.end__inner{ position:relative; max-width:680px; margin:0 auto; }
.end__ring{ position:relative; width:120px; height:120px; margin:0 auto 30px; }
.end__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.er-track{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:8; }
.er-fill{ fill:none; stroke:var(--verde-vivo); stroke-width:8; stroke-linecap:round; stroke-dasharray:603; stroke-dashoffset:603; filter:drop-shadow(0 0 12px rgba(74,222,128,.6)); }
.end__check{ position:absolute; inset:0; display:grid; place-items:center; font-size:2.4rem; color:var(--verde-vivo); opacity:0; transform:scale(.5); transition:opacity .5s var(--ease) .6s, transform .6s var(--ease) .6s; }
.end.is-done .end__check{ opacity:1; transform:scale(1); }
.end__title{ font-size:clamp(2.2rem,5.2vw,4rem); color:#fff; }
.end__sub{ margin-top:1.3rem; font-size:1.15rem; color:#a9bcb0; max-width:44ch; margin-inline:auto; }
.end__form{ display:flex; gap:10px; max-width:480px; margin:2.6rem auto 0; flex-wrap:wrap; }
.end__form input{ flex:1; min-width:200px; padding:1.05em 1.4em; border-radius:100px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; font-size:1rem; font-family:var(--font-b); }
.end__form input::placeholder{ color:#7f9388; }
.end__form input:focus{ outline:none; border-color:var(--verde-vivo); background:rgba(255,255,255,.12); }
.end__ok{ margin-top:1.4rem; color:var(--verde-vivo); font-family:var(--font-d); font-weight:600; }
.end__fine{ margin-top:1.4rem; font-size:.82rem; color:#7f9388; }

/* ================================================================== footer */
.foot{ background:var(--fondo); color:var(--ink-3); padding:clamp(56px,8vh,90px) var(--pad) 36px; border-top:1px solid var(--line); }
.foot__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.2fr 2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line); }
.foot__brand .brand{ color:var(--ink); }
.foot__brand p{ margin-top:14px; font-size:.94rem; line-height:1.6; color:var(--ink-3); }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__cols h4{ font-family:var(--font-d); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; }
.foot__cols a{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:.92rem; color:var(--ink-2); transition:color .2s; }
.foot__soc svg{ width:19px; height:19px; flex:none; }
.foot__cols a:hover{ color:var(--verde); }
.foot__bottom{ max-width:var(--maxw); margin:24px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; }
.foot__legal{ display:flex; gap:20px; align-items:center; }
.foot__legal a{ display:inline-flex; align-items:center; min-height:44px; }
.foot__legal a:hover{ color:var(--verde); }

/* =============================================================== reveal/anim
   The hidden START state is scoped twice over: to html.js (set inline in <head>
   before first paint) and to no-preference. So a crawler, a JS-less browser and
   anyone on reduced motion all get the finished page, never an empty section.
   app.js only ever animates TOWARDS the visible state. */
@media (prefers-reduced-motion: no-preference){
  html.js [data-rise]{ opacity:0; transform:translateY(26px); }
  html.js [data-reveal-words] .w{ opacity:.12; }
}
[data-reveal-words] .w{ transition:opacity .5s var(--ease); }

/* ============================================================== responsive */
@media (max-width:1020px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; text-align:left; }
  .hero__stage{ order:-1; width:min(80%,420px); }
  .hero__sub{ max-width:46ch; }
  .calc__inner{ grid-template-columns:1fr; }
  .calc__viz{ order:-1; }
  .track{ grid-template-columns:1fr; }
  .track__device{ order:-1; }
  .human{ grid-template-columns:1fr; }
  .human__media{ max-width:440px; }
}
@media (max-width:1000px){
  .plans__grid{ grid-template-columns:1fr; max-width:440px; gap:30px; }
  .plan--feat{ transform:none; }
  .plan--feat:hover{ transform:translateY(-5px); }
}
@media (max-width:760px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .how__steps, .stories__grid{ grid-template-columns:1fr; }
  .how__connector{ display:none; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .human__pillars{ grid-template-columns:1fr; gap:12px; }
  .floatcard--top{ left:0; }
  .floatcard--bot{ right:0; }
  .spine{ left:12px; bottom:12px; transform:scale(.86); }
  .spine.is-on{ transform:scale(.86); }
}
@media (max-width:420px){
  .hero__title{ font-size:3.2rem; }
  .floatcard--top{ display:none; }
}

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero__scrollcue{ display:none; }
}