@font-face{font-family:'Archivo';src:url(/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo Black';src:url(/fonts/archivo-black.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --ground:#0A0C0F;
  --ground-2:#0D1218;
  --surface:#151A21;
  --surface-2:#1B2129;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --azul:#097BB8;
  --azul-soft:#0E90D6;
  --cian:#00C8FF;
  --acento-txt:#00C8FF;
  --hero-glow:34%;
  --niebla:#8B96A5;
  --niebla-dim:#6B7686;
  --hueso:#E9EDF2;
  --hueso-max:#FFFFFF;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --reflejo:.30;
  --maxw:1080px;
}
@media (prefers-color-scheme: light){
  :root{
    --ground:#F3F6F9;--ground-2:#EAEFF5;--surface:#FFFFFF;--surface-2:#F6F9FC;
    --line:rgba(10,12,15,.10);--line-strong:rgba(10,12,15,.20);
    --azul:#06628F;--azul-soft:#097BB8;--cian:#0489C4;--acento-txt:#045E86;--hero-glow:14%;
    --niebla:#5B6675;--niebla-dim:#7A8492;--hueso:#12171E;--hueso-max:#050708;
    --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -22px rgba(9,29,48,.5);--reflejo:.17;
  }
}
:root[data-theme="dark"]{
  --ground:#0A0C0F;--ground-2:#0D1218;--surface:#151A21;--surface-2:#1B2129;
  --line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.16);
  --azul:#097BB8;--azul-soft:#0E90D6;--cian:#00C8FF;--acento-txt:#00C8FF;--hero-glow:34%;
  --niebla:#8B96A5;--niebla-dim:#6B7686;--hueso:#E9EDF2;--hueso-max:#FFFFFF;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);--reflejo:.30;
}
:root[data-theme="light"]{
  --ground:#F3F6F9;--ground-2:#EAEFF5;--surface:#FFFFFF;--surface-2:#F6F9FC;
  --line:rgba(10,12,15,.10);--line-strong:rgba(10,12,15,.20);
  --azul:#06628F;--azul-soft:#097BB8;--cian:#0489C4;--acento-txt:#045E86;--hero-glow:14%;
  --niebla:#5B6675;--niebla-dim:#7A8492;--hueso:#12171E;--hueso-max:#050708;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -22px rgba(9,29,48,.5);--reflejo:.17;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--hueso);
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  font-size:15.3px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media (max-width:600px){.wrap{padding:0 20px}body{font-size:14.4px}}

/* ---------- wordmark ---------- */
.mark{font-family:'Archivo Black',sans-serif;letter-spacing:-.02em;line-height:1;display:inline-block}
.mark i{font-style:normal;color:var(--hueso-max)}
.mark b{font-weight:400;color:var(--cian)}

/* ---------- streak strip: dispositivo estructural ---------- */
.streak{display:flex;gap:4px;align-items:center}
.streak span{width:9px;height:9px;border-radius:2px;background:var(--line-strong);display:block}
.streak span.on{background:var(--azul-soft)}
.streak span.now{background:var(--cian);box-shadow:0 0 0 3px color-mix(in srgb,var(--cian) 18%,transparent)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--ground) 82%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.nav .mark{font-size:18px}
.nav-links{display:flex;gap:26px;font-size:12.6px;font-weight:500;color:var(--niebla)}
.nav-links a{text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--hueso-max)}
@media (max-width:820px){.nav-links{display:none}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 24px;
  font-weight:600;font-size:13.5px;text-decoration:none;border:1px solid transparent;
  transition:transform .16s,background .16s,border-color .16s}
.btn-primary{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-primary:hover{background:var(--azul-soft);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--hueso)}
.btn-ghost:hover{border-color:var(--acento-txt);color:var(--hueso-max)}
a:focus-visible,button:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px;border-radius:6px}

/* ---------- slots de imagen (para cargar tus graficos) ---------- */
.slot{position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-2);border-radius:16px;
  color:var(--niebla-dim);text-align:center;padding:21px}
.slot::before{content:"";position:absolute;inset:0;border:1px dashed var(--line-strong);
  border-radius:inherit;pointer-events:none}
.slot img{width:100%;height:100%;object-fit:cover;border-radius:15px}
/* Capa de imagen: si el archivo existe, tapa el placeholder; si falta, no se ve nada roto. */
.slot::after,.avatar::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:var(--shot,none);background-size:cover;background-position:center top;background-repeat:no-repeat}
/* Los mockups tienen version clara y oscura; se elige la que calza con el tema de la landing.
   Mismo patron que los tokens de color: la base es oscura, la clara la sobreescribe. */
.slot::after{background-image:var(--oscuro,var(--shot,none))}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .slot::after{background-image:var(--claro,var(--shot,none))}
}
:root[data-theme="light"] .slot::after{background-image:var(--claro,var(--shot,none))}
:root[data-theme="dark"] .slot::after{background-image:var(--oscuro,var(--shot,none))}
.slot .slot-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.9}
.slot .slot-dim{font-size:12px;color:var(--niebla-dim);opacity:.75;font-variant-numeric:tabular-nums}
.slot-phone{aspect-ratio:9/19.5;max-width:290px;margin-inline:auto}
.slot-wide{aspect-ratio:16/10}
.circuito{margin:0;padding:26px 22px 18px;background:var(--ground-2);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.circuito svg{display:block;width:100%;height:auto}
.circuito figcaption{margin-top:16px;text-align:center;font-size:12px;color:var(--niebla-dim)}
.circuito text{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif}
.circuito .cap{font-size:21.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--acento-txt)}
.circuito .lbl{font-size:21.6px;font-weight:700;fill:var(--hueso)}
.circuito .lbl.sm{font-size:21.6px}
.circuito .sub{font-size:16.2px;fill:var(--niebla)}
.circuito .num{font-size:27.88px;font-weight:700;fill:var(--hueso);text-anchor:end;font-variant-numeric:tabular-nums}
.circuito .num.accent{fill:var(--acento-txt)}
.circuito .mid{text-anchor:middle}
.circuito .big{font-family:'Archivo Black',sans-serif;font-size:75.44px;fill:var(--hueso-max);text-anchor:middle;font-variant-numeric:tabular-nums}
.circuito .big.sm{font-size:38.54px}
.circuito .bigunit{font-size:23.4px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;fill:var(--niebla);text-anchor:middle}
.circuito .bar{fill:var(--surface);stroke:var(--line);stroke-width:2}
.circuito .bar.hot{stroke:var(--azul-soft);stroke-width:3}
.circuito .total{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.circuito .brace{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
.circuito .flow{fill:none;stroke:var(--azul-soft);stroke-width:4}
.circuito .head{fill:var(--azul-soft)}
.circuito .ring-bg{fill:none;stroke:var(--line-strong);stroke-width:18}
.circuito .ring-fg{fill:none;stroke:var(--azul-soft);stroke-width:18;stroke-linecap:round;stroke-dasharray:193 679}
.circuito .prot-bg{fill:var(--line)}
.circuito .prot-fg{fill:var(--acento-txt)}
.circuito .loop{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-dasharray:9 13;stroke-linecap:round}
.circuito .loop-head{fill:var(--niebla)}
.circuito .loop-pill{fill:var(--surface);stroke:var(--line);stroke-width:2}
@media (max-width:780px){
  .circuito{overflow-x:auto;padding:20px 16px 14px}
  .circuito svg{min-width:720px}
}
.slot-square{aspect-ratio:1/1}
/* ---------- marco de telefono ---------- */
.device{position:relative;max-width:312px;margin-inline:auto;padding:11px;
  border-radius:48px;
  background:linear-gradient(155deg,#3c424a 0%,#1a1d22 22%,#0e1013 55%,#242830 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 3px rgba(255,255,255,.14) inset,
             0 42px 70px -34px rgba(0,0,0,.85)}
.device .slot{max-width:none;margin-bottom:0;border-radius:37px;background:var(--ground-2)}
/* isla / notch: quitar la clase con-isla del div.device si las capturas son de Android */
.device.con-isla::after{content:"";position:absolute;top:23px;left:50%;transform:translateX(-50%);
  width:88px;height:25px;border-radius:13px;background:#05060a;z-index:2;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
@media (max-width:520px){.device{max-width:270px;padding:9px;border-radius:42px}
  .device .slot{border-radius:33px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%, color-mix(in srgb,var(--azul) var(--hero-glow),transparent) 0%, transparent 68%);}
.hero .wrap{position:relative;padding:63px 28px 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px;text-align:center}}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acento-txt);margin:0}
.hero .mark{font-size:clamp(42.64px,7.38vw,75.44px);margin:22px 0 0}
.tagline{font-size:clamp(14.4px,1.98vw,18px);color:var(--niebla);margin:12px 0 0;font-weight:500}
.thesis{font-family:'Archivo Black',sans-serif;font-size:clamp(24.3px,3.78vw,37.8px);line-height:1.12;
  letter-spacing:-.025em;margin:34px 0 0;max-width:15ch;text-wrap:balance;color:var(--hueso-max)}
@media (max-width:900px){.thesis{margin-inline:auto}}
.thesis em{font-style:normal;color:var(--acento-txt)}
.hero p.lead{max-width:52ch;margin:18px 0 0;color:var(--niebla);font-size:15.3px}
@media (max-width:900px){.hero p.lead{margin-inline:auto}}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
@media (max-width:900px){.cta{justify-content:center}}
.hero-note{margin:18px 0 0;font-size:12.15px;color:var(--niebla-dim)}
.hero-visual{padding-bottom:64px}
.hero-streak{display:flex;flex-direction:column;gap:11px;margin:44px 0 64px}
@media (max-width:900px){.hero-streak{align-items:center;margin-bottom:44px}}
.hero-streak .streak span{width:30px;height:36px;border-radius:6px;border:1px solid var(--line);background:var(--surface)}
.hero-streak .streak span.fill{background:linear-gradient(180deg,var(--azul-soft),var(--azul));border-color:transparent}
.hero-streak small{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--niebla-dim);font-weight:600}
@media (max-width:520px){.hero-streak .streak span{width:24px;height:29px}}

/* ---------- secciones ---------- */
.sec{padding:66px 0;border-bottom:1px solid var(--line)}
.sec-alt{background:var(--ground-2)}
.sec-head{max-width:64ch;margin:0 0 44px}
.sec-head .streak{margin-bottom:20px}
.sec-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--niebla-dim);margin:0 0 12px}
.sec-title{font-family:'Archivo Black',sans-serif;font-size:clamp(22.5px,3.24vw,34.2px);line-height:1.14;
  letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--hueso-max)}
.sec-sub{color:var(--niebla);margin:16px 0 0;max-width:62ch}
.sec-sub strong{color:var(--hueso);font-weight:600}

/* ---------- grids ---------- */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g3{grid-template-columns:1fr}}
@media (max-width:620px){.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}

/* ---------- modos: Completo / Rápido / Salva tu racha ---------- */
.modo{display:flex;flex-direction:column}
.modo .tiempo{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.02em;
  color:var(--acento-txt);font-variant-numeric:tabular-nums;margin-bottom:14px}
.modo h3{font-family:'Archivo Black',sans-serif;font-size:18.9px;letter-spacing:-.02em;margin:0 0 9px;color:var(--hueso-max)}
.modo p{margin:0;color:var(--niebla);font-size:13.95px;line-height:1.55}
.modo .bar{height:5px;border-radius:99px;background:var(--line-strong);margin-top:20px;overflow:hidden}
.modo .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--azul-soft),var(--cian))}

/* ---------- bloque funcionalidad (texto + imagen) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.feature.flip .feature-media{order:-1}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:34px}.feature.flip .feature-media{order:0}}
.feature h3{font-family:'Archivo Black',sans-serif;font-size:clamp(19.8px,2.7vw,27px);letter-spacing:-.025em;
  margin:14px 0 0;color:var(--hueso-max);text-wrap:balance}
.feature > div > p{color:var(--niebla);margin:16px 0 0;max-width:52ch}
.flist{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:0}
.flist li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-size:13.95px}
.flist li:last-child{border-bottom:1px solid var(--line)}
.flist b{color:var(--hueso-max);font-weight:600}
.flist span{color:var(--niebla)}
.tick{flex:0 0 auto;width:19px;height:19px;margin-top:3px;color:var(--acento-txt)}

/* ---------- el puente entrenamiento <-> nutricion ---------- */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;position:relative}
@media (max-width:860px){.loop{grid-template-columns:1fr}}
.node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px;
  box-shadow:var(--shadow);position:relative}
.node .paso{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--acento-txt);margin:0 0 12px}
.node h3{font-family:'Archivo Black',sans-serif;font-size:16.2px;letter-spacing:-.02em;margin:0 0 9px;color:var(--hueso-max)}
.node p{margin:0;color:var(--niebla);font-size:13.5px;line-height:1.55}
.node .arrow{position:absolute;right:-19px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  color:var(--acento-txt);z-index:2;background:var(--ground-2);border-radius:50%;padding:2px}
@media (max-width:860px){
  .node .arrow{right:50%;top:auto;bottom:-19px;transform:translateX(50%) rotate(90deg)}
}
.loop-back{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;
  font-size:12.15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--niebla-dim)}
.loop-back .l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong))}
.loop-back .r{flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* ---------- Tem ---------- */
.tem-sec{position:relative;overflow:hidden}
.tem-sec::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%, color-mix(in srgb,var(--cian) calc(var(--hero-glow) * .6),transparent) 0%, transparent 70%);}
.tem-sec .wrap{position:relative}
.tem-hero{text-align:center;max-width:60ch;margin:0 auto 48px}
.tem-logo{font-family:'Archivo Black',sans-serif;font-size:clamp(45.92px,9.02vw,85.28px);line-height:1;
  letter-spacing:-.04em;color:var(--acento-txt);margin:0}
.tem-hero .sec-title{margin-top:22px}
.tem-hero p{color:var(--niebla);margin:18px 0 0}
.tem-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media (max-width:900px){.tem-grid{grid-template-columns:1fr;gap:36px}}
.tem-list{display:flex;flex-direction:column;gap:16px}
.tem-item{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:20px 22px;box-shadow:var(--shadow)}
.tem-item h4{font-size:14.85px;font-weight:600;margin:0 0 6px;color:var(--hueso-max);letter-spacing:-.01em}
.tem-item p{margin:0;font-size:13.5px;color:var(--niebla);line-height:1.55}
.tem-quote{margin:44px auto 0;max-width:56ch;text-align:center;font-family:'Archivo Black',sans-serif;
  font-size:clamp(17.1px,2.34vw,23.4px);line-height:1.3;letter-spacing:-.02em;color:var(--hueso-max);text-wrap:balance}
.tem-quote span{color:var(--acento-txt)}

/* ---------- razones (comercial, compacto) ---------- */
.razon{display:flex;gap:14px;align-items:flex-start}
.razon svg{flex:0 0 auto;width:21px;height:21px;margin-top:2px;color:var(--acento-txt)}
.razon b{display:block;color:var(--hueso-max);font-weight:600;font-size:14.4px;margin-bottom:4px;letter-spacing:-.01em}
.razon span{color:var(--niebla);font-size:13.5px;line-height:1.55}

/* ---------- fundadores ---------- */
.founder{display:flex;flex-direction:column}
.founder .slot{margin-bottom:18px}
.avatar{position:relative;overflow:hidden;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;
  font-family:'Archivo Black',sans-serif;font-size:23.4px;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(140deg,var(--azul),color-mix(in srgb,var(--cian) 55%,var(--azul)));
  border:1px solid color-mix(in srgb,var(--cian) 30%,transparent)}
.founder h3{font-size:16.2px;font-weight:600;margin:0 0 4px;color:var(--hueso-max);letter-spacing:-.01em}
.founder .foco{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--acento-txt);margin:0 0 14px}
.founder p{margin:0;color:var(--niebla);font-size:13.5px;line-height:1.55}
.founder .li{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  color:var(--niebla-dim);text-decoration:none;transition:color .16s;align-self:flex-start}
.founder .li:hover{color:var(--acento-txt)}
.founder .li svg{width:15px;height:15px}

/* ---------- cierre ---------- */
.cierre{text-align:center;padding:72px 0}
.cierre h2{font-family:'Archivo Black',sans-serif;font-size:clamp(25.2px,4.14vw,41.4px);line-height:1.1;
  letter-spacing:-.03em;margin:0 auto;max-width:17ch;text-wrap:balance;color:var(--hueso-max)}
.cierre p{color:var(--niebla);margin:20px auto 0;max-width:52ch}
.cierre .cta{justify-content:center;margin-top:34px}
.avisos{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.avisos input{flex:0 1 280px;min-width:0;border-radius:999px;padding:13px 20px;
  font:inherit;font-size:13.5px;color:var(--hueso);background:var(--surface);
  border:1px solid var(--line-strong);transition:border-color .16s}
.avisos input::placeholder{color:var(--niebla-dim)}
.avisos input:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px;border-color:var(--acento-txt)}
.avisos button{cursor:pointer;font-family:inherit}
.cierre .avisos-nota{margin:14px auto 0;max-width:44ch;font-size:12px;color:var(--niebla-dim)}
.cierre .avisos-nota a{color:var(--niebla);text-decoration:underline}
.avisos.listo input,.avisos.listo button{display:none}

/* ---------- footer ---------- */
.foot{padding:54px 0 40px;background:var(--ground-2)}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;gap:32px}}
.foot .mark{font-size:24.6px}
.foot-claim{font-family:'Archivo Black',sans-serif;font-size:19.8px;line-height:1.2;letter-spacing:-.02em;
  margin:18px 0 0;color:var(--hueso-max);max-width:18ch}
.foot-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--niebla)}
.foot-links a{text-decoration:none;transition:color .16s}
.foot-links a:hover{color:var(--acento-txt)}
.foot-label{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--niebla-dim);margin-bottom:6px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--niebla);
  border:1px solid var(--line);background:var(--surface);transition:color .18s,border-color .18s,transform .18s}
.social a:hover{color:var(--acento-txt);border-color:color-mix(in srgb,var(--acento-txt) 45%,transparent);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;font-size:12px;color:var(--niebla)}

/* ---------- selector de tema ---------- */
.theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--niebla);cursor:pointer;padding:0;transition:color .16s,border-color .16s,background .16s}
.theme-btn:hover{color:var(--acento-txt);border-color:var(--acento-txt);background:var(--surface-2)}
.theme-btn:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
.theme-btn svg{width:18px;height:18px;display:block}
.theme-btn .luna{display:none}
/* En claro se ofrece pasar a oscuro (luna); en oscuro, pasar a claro (sol). */
:root[data-theme="light"] .theme-btn .luna{display:block}
:root[data-theme="light"] .theme-btn .sol{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-btn .luna{display:block}
  :root:not([data-theme="dark"]) .theme-btn .sol{display:none}
}
:root[data-theme="dark"] .theme-btn .luna{display:none}
:root[data-theme="dark"] .theme-btn .sol{display:block}
.nav-right{display:flex;align-items:center;gap:12px}
@media (max-width:520px){.theme-btn{width:34px;height:34px}}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.social a:hover{transform:none}
}
/* ==========================================================================
   MOVIMIENTO
   Todo lo de aqui abajo es decorativo. Va colgado de :root.js, que lo pone el
   primer script del <head>: si un dia la CSP bloquea los scripts, la landing
   se ve completa y quieta en vez de quedar en blanco.
   ========================================================================== */

html{scroll-behavior:smooth}
[id]{scroll-margin-top:86px}

/* El cambio de tema deja de ser un salto y pasa a ser un fundido. */
body,.nav,.sec,.foot,.circuito,.slot,.theme-btn,.avatar{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease}

/* ---------- revelado por scroll ---------- */
/* El escalonado lo reparte el script: a cada hermano le pone su --rd. */
:root.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1) var(--rd,0s),
             transform .7s cubic-bezier(.16,.84,.44,1) var(--rd,0s)}
:root.js .rv.in{opacity:1;transform:none}

/* ---------- entrada del hero ---------- */
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes entra-lateral{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
:root.js .hero-grid>div:first-child>*{animation:entra .85s cubic-bezier(.16,.84,.44,1) both}
:root.js .hero-grid>div:first-child>*:nth-child(1){animation-delay:.05s}
:root.js .hero-grid>div:first-child>*:nth-child(2){animation-delay:.12s}
:root.js .hero-grid>div:first-child>*:nth-child(3){animation-delay:.19s}
:root.js .hero-grid>div:first-child>*:nth-child(4){animation-delay:.26s}
:root.js .hero-grid>div:first-child>*:nth-child(5){animation-delay:.33s}
:root.js .hero-grid>div:first-child>*:nth-child(6){animation-delay:.40s}
:root.js .hero-grid>div:first-child>*:nth-child(7){animation-delay:.47s}
:root.js .hero-visual{animation:entra-lateral 1s cubic-bezier(.16,.84,.44,1) .18s both}
/* El halo azul del hero respira, muy despacio. */
.hero::before{animation:respira 11s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.82}50%{opacity:1}}

/* ---------- reflejo bajo los telefonos ---------- */
/* El telefono se apoya sobre una superficie que lo devuelve. La mascara deja ver
   solo la franja pegada al marco: un espejo largo se ve barato, uno corto se ve
   como vidrio. En claro va mas suave, porque sobre fondo claro un reflejo fuerte
   ensucia en vez de dar profundidad.
   Firefox todavia no implementa box-reflect: ahi el telefono se ve sin reflejo,
   que es exactamente como se veia antes. */
.device{
  -webkit-box-reflect:below 1px
    linear-gradient(to bottom, transparent 90%, rgba(0,0,0,var(--reflejo,.3)) 100%);
  /* El reflejo no ocupa lugar en el layout, asi que el hueco hay que reservarlo:
     sin esto se monta sobre el texto que venga debajo. */
  margin-bottom:64px;
}
.duo .device{margin-bottom:46px}
/* La sombra de contacto se acorta para no pelear con el reflejo: antes caia
   justo donde ahora empieza el espejo y lo enturbiaba. */
.device{box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 3px rgba(255,255,255,.14) inset,
                   0 26px 44px -30px rgba(0,0,0,.85)}
/* En el par reflejan los dos: se leen como dos telefonos apoyados en el mismo
   vidrio, que es justo el efecto. No hay que apagar ninguno. */

/* ---------- dos telefonos en una misma celda ---------- */
/* El de adelante manda; el de atras asoma corrido y un poco mas abajo.
   Las medidas del marco se achican en la misma proporcion que el ancho,
   para que la isla no quede desproporcionada. */
.duo{display:flex;justify-content:center;align-items:flex-start}
.duo .device{flex:0 0 auto;max-width:228px;margin-inline:0;padding:8px;border-radius:35px;z-index:2}
.duo .device .slot{border-radius:27px}
.duo .device.con-isla::after{top:17px;width:64px;height:18px;border-radius:9px}
.duo .duo-atras{margin-left:-58px;margin-top:48px;z-index:1}
@media (max-width:900px){.duo{margin-inline:auto}}
@media (max-width:520px){
  .duo .device{max-width:172px;padding:6px;border-radius:27px}
  .duo .device .slot{border-radius:21px}
  .duo .device.con-isla::after{top:13px;width:48px;height:14px;border-radius:7px}
  .duo .duo-atras{margin-left:-44px;margin-top:36px}
}

/* ---------- parallax e inclinacion de los telefonos ---------- */
/* El script escribe tres variables y las tres viven en la misma transformacion:
   --py lo mueve contra el scroll, --rx y --ry lo giran hacia donde esta el cursor.
   El giro llega hasta dos grados y medio, lo justo para que el reflejo de abajo
   gire con el telefono y se note que hay un objeto, no una foto pegada. */
.device{transform:perspective(1200px) translate3d(0,var(--py,0px),0)
                  rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---------- barras que se llenan ---------- */
:root.js .modo .bar i{transform-origin:left center;transform:scaleX(0);
  transition:transform .95s cubic-bezier(.2,.7,.3,1) calc(var(--rd,0s) + .18s)}
:root.js .modo.in .bar i{transform:none}

/* ---------- el circuito se completa al entrar ---------- */
:root.js .circuito .ring-fg{stroke-dasharray:0 872;
  transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.3,1) .25s}
:root.js .circuito.dibuja .ring-fg{stroke-dasharray:193 679}
:root.js .circuito .prot-fg{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);
  transition:transform 1s cubic-bezier(.2,.7,.3,1) .5s}
:root.js .circuito.dibuja .prot-fg{transform:none}

/* ---------- tarjetas: elevacion al pasar el cursor ---------- */
.card,.node,.tem-item{
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .35s ease,
             box-shadow .28s ease,background-color .35s ease}
@media (hover:hover){
  .card:hover,.node:hover,.tem-item:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--acento-txt) 32%,var(--line));
    box-shadow:var(--shadow),0 22px 44px -30px color-mix(in srgb,var(--azul) 70%,transparent)}
  .founder .li:hover,.foot-links a:hover{transform:none}
}
/* Los mockups tambien responden, sin moverse de sitio. */
@media (hover:hover){
  .feature-media .device,.hero-visual .device{transition:box-shadow .35s ease}
  .feature-media .device:hover,.hero-visual .device:hover{
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 3px rgba(255,255,255,.14) inset,
               0 34px 56px -32px rgba(0,0,0,.9)}
}

/* ---------- nav: se compacta y marca la seccion en la que vas ---------- */
.nav{transition:box-shadow .3s ease,background-color .3s ease,border-color .35s ease}
.nav .wrap{transition:height .3s cubic-bezier(.2,.7,.3,1)}
.nav.baja{box-shadow:0 14px 34px -28px rgba(0,0,0,.95);
  background:color-mix(in srgb,var(--ground) 93%,transparent)}
.nav.baja .wrap{height:56px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:var(--acento-txt);transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover::after,.nav-links a.activo::after{transform:scaleX(1)}
.nav-links a.activo{color:var(--hueso-max)}

/* ---------- botones ---------- */
.btn{transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s,box-shadow .18s}
.btn-primary:hover{box-shadow:0 12px 26px -14px color-mix(in srgb,var(--azul) 85%,transparent)}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- nada de esto si el visitante pidio menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root.js .rv{opacity:1;transform:none;transition:none}
  :root.js .hero-grid>div:first-child>*,:root.js .hero-visual{animation:none}
  .hero::before{animation:none}
  .device{transform:none}
  :root.js .modo .bar i{transform:none;transition:none}
  :root.js .circuito .ring-fg{stroke-dasharray:193 679;transition:none}
  :root.js .circuito .prot-fg{transform:none;transition:none}
  .card:hover,.node:hover,.tem-item:hover,.btn:active{transform:none}
  .nav .wrap,.nav-links a::after{transition:none}
}

/* ---------- botones de tienda: Google Play y App Store ---------- */
.tiendas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
@media (max-width:900px){.hero .tiendas{justify-content:center}}
.cierre .tiendas{justify-content:center;margin-top:34px}
.tienda{display:inline-flex;align-items:center;gap:12px;padding:10px 22px 10px 16px;border-radius:14px;
  text-decoration:none;text-align:left;line-height:1.15;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--hueso-max);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s,box-shadow .18s}
.tienda:hover{transform:translateY(-1px);border-color:var(--acento-txt)}
.tienda:active{transform:scale(.985)}
.tienda svg{width:26px;height:26px;flex:none}
.tienda small{display:block;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--niebla)}
.tienda b{display:block;font-size:15.3px;font-weight:700;letter-spacing:-.01em}
.tienda.play{background:var(--azul);border-color:var(--azul);color:#fff}
.tienda.play small{color:rgba(255,255,255,.82)}
.tienda.play:hover{background:var(--azul-soft);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--azul) 85%,transparent)}
@media (max-width:520px){.tiendas{flex-direction:column;align-items:center}.tienda{width:100%;max-width:290px}}
/* En un iPhone lo primero que se ofrece es la App Store */
:root.es-ios .tienda.ios{order:-1}
.enlace-sec{display:inline-block;margin-top:16px;font-size:13.05px;color:var(--niebla);text-decoration:underline;text-underline-offset:3px}
.enlace-sec:hover{color:var(--acento-txt)}

/* ---------- barra de descarga fija en el celular ---------- */
.barra-app{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;
  display:none;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  transform:translateY(160%);visibility:hidden;transition:transform .38s cubic-bezier(.16,.84,.44,1),visibility 0s .38s}
@media (max-width:820px){.barra-app{display:flex}}
.barra-app.ver{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.16,.84,.44,1)}
.barra-app p{margin:0;flex:1;min-width:0;font-size:12px;line-height:1.3;color:var(--niebla)}
.barra-app p b{display:block;font-size:13.5px;color:var(--hueso-max)}
.barra-app .btn{padding:10px 18px;font-size:12.6px;white-space:nowrap}
.solo-ios{display:none!important}
:root.es-ios .solo-ios{display:inline-flex!important}
:root.es-ios p.solo-ios{display:block!important}
:root.es-ios .no-ios{display:none!important}
@media (prefers-reduced-motion:reduce){.barra-app{transition:none}}

/* ---------- preguntas frecuentes ---------- */
.faq{max-width:800px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:20px 44px 20px 0;
  font-weight:600;font-size:15.3px;line-height:1.4;color:var(--hueso-max)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:23.4px;font-weight:400;line-height:1;color:var(--acento-txt);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--acento-txt);outline-offset:4px;border-radius:6px}
.faq details p{margin:0 0 22px;color:var(--niebla);max-width:68ch}
.faq details a{color:var(--acento-txt)}

/* ---------- tarjetas hacia las guias ---------- */
.guias a.card{display:block;text-decoration:none}
.guias a.card:hover{border-color:var(--acento-txt)}
.guias .tag{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-txt)}
.guias h3{margin:10px 0 8px;font-size:17.1px;line-height:1.25;color:var(--hueso-max)}
.guias p{margin:0;font-size:13.5px;color:var(--niebla)}
.guias .ir{display:inline-block;margin-top:14px;font-size:12.6px;font-weight:600;color:var(--acento-txt)}

/* ---------- paginas de guia ---------- */
.art{padding:48px 0 54px}
.art .wrap{max-width:800px}
.migas{margin:0 0 26px;font-size:12.15px;color:var(--niebla-dim)}
.migas a{color:var(--niebla);text-decoration:none}
.migas a:hover{color:var(--acento-txt)}
.art h1{font-family:'Archivo Black',sans-serif;font-size:clamp(25.42px,4.43vw,41px);line-height:1.07;
  letter-spacing:-.025em;margin:12px 0 18px;color:var(--hueso-max)}
.art .lead{font-size:clamp(15.3px,1.98vw,17.55px);line-height:1.55;color:var(--niebla);margin:0;max-width:62ch}
.art h2{font-family:'Archivo Black',sans-serif;font-size:clamp(20.7px,2.88vw,27.9px);line-height:1.16;
  letter-spacing:-.018em;margin:60px 0 14px;color:var(--hueso-max)}
.art h3{font-size:17.1px;line-height:1.3;margin:32px 0 8px;color:var(--hueso-max)}
.art p,.art li{color:var(--niebla)}
.art p{margin:0 0 16px}
.art ul,.art ol{padding-left:1.25em;margin:0 0 18px}
.art li{margin:0 0 8px}
.art li::marker{color:var(--acento-txt)}
.art strong{color:var(--hueso);font-weight:600}
.art a{color:var(--acento-txt)}
.art .nota{font-size:12.6px;color:var(--niebla);border-left:3px solid var(--line-strong);padding:4px 0 4px 16px;margin:24px 0}
.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13.05px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--hueso);overflow-wrap:anywhere}
.tabla{overflow-x:auto;margin:8px 0 22px;border:1px solid var(--line);border-radius:14px}
.tabla table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tabla th,.tabla td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.tabla tr:last-child td{border-bottom:0}
.tabla th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--niebla);font-weight:600;background:var(--ground-2)}
.tabla td{color:var(--niebla)}
.tabla td:first-child{color:var(--hueso);font-weight:600}
.caja-app{margin:52px 0;padding:30px;border-radius:20px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.caja-app h2{margin:0 0 10px}
.caja-app p{margin:0}
.caja-app .tiendas{margin-top:22px}
@media (max-width:600px){.caja-app{padding:22px}}
.art .faq{margin-top:8px}
.art .faq summary{font-size:14.85px}

/* ---------- calculadora ---------- */
.calc{margin:34px 0 0;padding:28px;border-radius:20px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
@media (max-width:600px){.calc{padding:20px}}
.calc-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;padding:0;margin:0}
@media (max-width:560px){.calc-campos{grid-template-columns:1fr}}
.calc label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--niebla)}
.calc .ancho{grid-column:1/-1}
.calc input,.calc select{font:inherit;font-size:14.4px;font-weight:500;width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--ground);color:var(--hueso-max);appearance:none;-webkit-appearance:none}
.calc select{background-image:linear-gradient(45deg,transparent 50%,var(--niebla) 50%),linear-gradient(135deg,var(--niebla) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.calc input:focus-visible,.calc select:focus-visible{outline:2px solid var(--acento-txt);outline-offset:1px;border-color:var(--acento-txt)}
.sexo{display:flex;gap:8px}
.sexo label{flex:1;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--ground);color:var(--hueso);cursor:pointer;font-size:13.5px}
.sexo input{width:auto;appearance:auto;-webkit-appearance:auto;accent-color:var(--azul);margin:0}
.sexo label:has(input:checked){border-color:var(--acento-txt);color:var(--hueso-max)}
.resultado{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.resultado-vacio{margin:0;color:var(--niebla-dim);font-size:13.5px}
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cifras[hidden]{display:none}
@media (max-width:560px){.cifras{grid-template-columns:1fr}}
.cifra{padding:18px 20px;border-radius:14px;background:var(--ground-2);border:1px solid var(--line)}
.cifra.clave{border-color:var(--acento-txt)}
.cifra small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla-dim)}
.cifra b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;font-size:24.6px;line-height:1.1;margin:8px 0 4px;color:var(--hueso-max)}
.cifra span{font-size:12.15px;color:var(--niebla)}
.aviso-basal{margin:14px 0 0;font-size:12.6px;color:var(--niebla)}

/* insignias oficiales de tienda: las dos con el mismo peso (2026-10-21) */
.tienda.insignia{padding:0;border:0;background:none;box-shadow:none;border-radius:10px;width:auto;max-width:none}
.tienda.insignia:hover{transform:translateY(-1px);filter:brightness(1.12)}
.tienda.insignia img{display:block;height:52px;width:auto}
.barra-tiendas{display:flex;gap:8px;flex:none}
.barra-tiendas .tienda.insignia img{height:36px}

/* en iPhone, campos de menos de 16px hacen zoom al tocarlos */
@media (max-width:820px){input,select,textarea{font-size:16px!important}}

/* páginas legales: privacidad, eliminar cuenta, términos (2026-10-21) */
.legal .wrap{max-width:780px}
.legal .sub{font-size:16.2px;color:var(--niebla);margin:-6px 0 4px}
.legal .fecha{font-size:13px;color:var(--niebla);margin:0 0 20px}
.legal .destacado{background:var(--surface);border:1px solid var(--line-strong);border-left:3px solid var(--azul);border-radius:0 14px 14px 0;padding:16px 18px;margin:0 0 26px;color:var(--niebla)}
.legal .indice{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 30px}
.legal .indice p{margin:0 0 8px;font-size:11.7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.legal .indice ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:28px;font-size:14.4px}
.legal .indice li{margin:0 0 6px;break-inside:avoid}
.legal .indice a{text-decoration:none}
@media (max-width:600px){.legal .indice ol{columns:1}}
.legal h2{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:84px}
.legal table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.4px;display:block;overflow-x:auto}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--niebla)}
.legal th{font-size:11.7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--niebla)}
.legal .borrador{background:#F97316;color:#fff;font-weight:700;border-radius:10px;padding:10px 14px;margin:0 0 22px}
.foot-bottom a{color:inherit}

/* enlaces dentro de un texto: subrayados, no solo por color (accesibilidad) */
.art p a,.art li a,.migas a{text-decoration:underline;text-underline-offset:2px}
.legal .indice a{text-decoration:none}