/* Vuelto — landing. IndieLob, 2026. */

:root{
  --black:#000000;
  --ink:#0b0c0d;
  --ink-2:#141518;
  --paper:#f5f5f7;
  --paper-2:#ffffff;
  --white:#f5f5f7;
  --dim:rgba(245,245,247,.66);
  --dim-2:rgba(245,245,247,.46);
  --dark-ink:#1d1d1f;
  --dark-dim:rgba(29,29,31,.68);
  --accent:#30d158;
  --line-dark:rgba(245,245,247,.14);
  --line-light:rgba(0,0,0,.10);
  --radius:22px;
  --nav-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}

/* ---------- barra superior ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(245,245,247,.08);
}
.nav-inner{
  max-width:1024px; margin:0 auto; height:100%;
  padding:0 22px;
  display:flex; align-items:center; gap:26px;
}
.nav-logo{
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; color:var(--white); flex:0 0 auto;
}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex; gap:24px; flex:1 1 auto}
.nav-links a{
  font-size:12.5px; font-weight:400; color:rgba(245,245,247,.82);
  text-decoration:none; transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-right{display:flex; align-items:center; gap:14px; flex:0 0 auto}

.lang-wrap{position:relative; display:flex; align-items:center}
.lang-wrap svg{position:absolute; left:8px; width:13px; height:13px; opacity:.7; pointer-events:none}
#lang{
  appearance:none; -webkit-appearance:none;
  background:rgba(245,245,247,.10); color:var(--white);
  border:1px solid rgba(245,245,247,.14); border-radius:99px;
  font:inherit; font-size:12.5px; line-height:1;
  padding:6px 24px 6px 26px; cursor:pointer;
}
#lang:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#lang option{background:#1d1d1f; color:#f5f5f7}
.lang-wrap::after{
  content:""; position:absolute; right:10px; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid rgba(245,245,247,.7); pointer-events:none;
}

.nav-cta{
  font-size:12.5px; font-weight:500; text-decoration:none;
  background:var(--white); color:#000;
  padding:6px 14px; border-radius:99px;
  transition:opacity .2s var(--ease);
}
.nav-cta:hover{opacity:.82}
@media (max-width:780px){ .nav-links{display:none} }

/* ---------- estructura ---------- */
section{position:relative; overflow:hidden}
.wrap{max-width:1024px; margin:0 auto; padding:0 22px}
.narrow{max-width:720px; margin:0 auto}
.center{text-align:center}

.dark{background:var(--black); color:var(--white)}
.dim-bg{background:var(--ink)}
.light{background:var(--paper); color:var(--dark-ink)}
.light .sub, .light .body{color:var(--dark-dim)}
.light .eyebrow{color:#6e6e73}

.pad{padding:110px 0}
.pad-sm{padding:76px 0}
@media (max-width:740px){ .pad{padding:76px 0} .pad-sm{padding:56px 0} }

/* ---------- tipografía ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--accent); margin:0 0 12px; text-transform:none;
}
h1{
  font-size:clamp(42px,8.4vw,88px);
  line-height:1.03; letter-spacing:-.035em; font-weight:700;
  margin:0 0 20px;
}
h2{
  font-size:clamp(32px,5.4vw,56px);
  line-height:1.07; letter-spacing:-.03em; font-weight:700;
  margin:0 0 18px;
}
h3{
  font-size:clamp(21px,2.6vw,26px);
  line-height:1.2; letter-spacing:-.022em; font-weight:600;
  margin:0 0 10px;
}
.sub{
  font-size:clamp(18px,2.3vw,23px); line-height:1.4; letter-spacing:-.02em;
  color:var(--dim); margin:0 auto 30px; max-width:640px; font-weight:400;
}
.body{font-size:17.5px; line-height:1.55; color:var(--dim); margin:0 0 16px}
.tiny{font-size:12.5px; line-height:1.5; color:var(--dim-2)}
.light .tiny{color:#86868b}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; padding:13px 26px; border-radius:99px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover{opacity:.86; transform:translateY(-1px)}
.btn-primary{background:var(--white); color:#000}
.light .btn-primary{background:#1d1d1f; color:#fff}
.btn-ghost{border:1px solid rgba(245,245,247,.28); color:var(--white)}
.light .btn-ghost{border-color:rgba(0,0,0,.2); color:var(--dark-ink)}
.btn svg{width:17px; height:17px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px}

/* ---------- marcos de dispositivo ---------- */
.iphone{
  position:relative; width:100%; max-width:var(--w,300px); margin:0 auto;
  aspect-ratio:1206/2622;
  background:linear-gradient(160deg,#3a3c40,#111214 42%,#37393d);
  border-radius:13.5%/6.2%;
  padding:.9%;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 .5px rgba(255,255,255,.16);
}
.iphone-screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:12.6%/5.8%; background:#0b0c0d;
}
.iphone-screen img{width:100%; height:100%; object-fit:cover; object-position:top center}
.iphone::after{ /* isla dinámica */
  content:""; position:absolute; top:2.1%; left:50%; transform:translateX(-50%);
  width:30%; height:2.6%; background:#000; border-radius:99px; z-index:2;
}
.light .iphone{box-shadow:0 40px 80px -34px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.18)}

.ipad{
  position:relative; width:100%; max-width:var(--w,560px); margin:0 auto;
  aspect-ratio:1668/2420;
  background:linear-gradient(160deg,#3a3c40,#111214 42%,#37393d);
  border-radius:4.6%/3.2%;
  padding:1.15%;
  box-shadow:0 46px 100px -34px rgba(0,0,0,.85), 0 0 0 .5px rgba(255,255,255,.16);
}
.ipad-screen{
  width:100%; height:100%; overflow:hidden;
  border-radius:3.5%/2.4%; background:#0b0c0d;
}
.ipad-screen img{width:100%; height:100%; object-fit:cover; object-position:top center}
.light .ipad{box-shadow:0 46px 90px -38px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.18)}

/* ---------- héroe ---------- */
.hero{padding:76px 0 0; text-align:center; background:radial-gradient(120% 80% at 50% -10%, #17181b 0%, #000 62%)}
.hero .glow{
  position:absolute; top:-260px; left:50%; transform:translateX(-50%);
  width:820px; height:620px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(48,209,88,.16), transparent 72%);
  filter:blur(14px);
}
.hero-device{margin-top:52px; position:relative}
.hero-device .iphone{--w:308px}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  background:linear-gradient(to bottom, transparent, #000);
  pointer-events:none;
}

/* ---------- cifras ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  border-top:1px solid var(--line-light); padding-top:48px;
}
.stat .n{
  font-size:clamp(34px,4.6vw,52px); font-weight:700; letter-spacing:-.035em;
  line-height:1; margin:0 0 8px;
}
.stat .l{font-size:14px; color:#6e6e73; line-height:1.35; margin:0}
@media (max-width:740px){ .stats{grid-template-columns:repeat(2,1fr); gap:34px 18px} }

/* ---------- filas de función ---------- */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.feature.flip .feature-text{order:2}
@media (max-width:860px){
  .feature{grid-template-columns:1fr; gap:44px; text-align:center}
  .feature.flip .feature-text{order:0}
  .feature .sub{margin-left:auto; margin-right:auto}
}
.feature .iphone{--w:284px}
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.checks li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16px; line-height:1.45; color:var(--dim);
}
.light .checks li{color:var(--dark-dim)}
.checks li::before{
  content:""; flex:0 0 auto; width:17px; height:17px; margin-top:3px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") center/11px no-repeat;
}
@media (max-width:860px){ .checks{max-width:420px; margin-left:auto; margin-right:auto; text-align:left} }

/* ---------- categorías ---------- */
.cats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin-top:44px;
}
.cat{
  background:var(--paper-2); border-radius:16px; padding:22px 18px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  border:1px solid rgba(0,0,0,.05);
}
.dark .cat, .dim-bg .cat{background:var(--ink-2); border-color:var(--line-dark)}
.cat svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.9}
.cat b{font-size:15.5px; font-weight:600; letter-spacing:-.015em}
.cat span{font-size:13px; color:#86868b; line-height:1.35}

/* ---------- privacidad ---------- */
.priv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px}
@media (max-width:860px){ .priv-grid{grid-template-columns:1fr} }
.priv{
  background:var(--ink-2); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:28px 26px;
}
.priv .k{font-size:15.5px; font-weight:600; margin:0 0 8px; letter-spacing:-.015em}
.priv .v{font-size:14.5px; color:var(--dim); margin:0; line-height:1.5}
.priv .tag{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:99px; margin-bottom:14px;
  background:rgba(48,209,88,.14); color:var(--accent);
}

/* ---------- precios ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; align-items:start}
@media (max-width:740px){ .plans{grid-template-columns:1fr} }
.plan{
  border-radius:var(--radius); padding:32px 30px;
  border:1px solid var(--line-light); background:var(--paper-2);
}
.plan.pro{background:#1d1d1f; color:var(--white); border-color:transparent}
.plan .pname{font-size:13px; font-weight:600; letter-spacing:.02em; margin:0 0 6px; color:#6e6e73}
.plan.pro .pname{color:var(--accent)}
.plan .price{font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1; margin:0 0 6px}
.plan .pnote{font-size:13.5px; color:#86868b; margin:0 0 22px}
.plan.pro .pnote{color:var(--dim-2)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.plan li{font-size:15px; line-height:1.45; display:flex; gap:10px; color:var(--dark-dim)}
.plan.pro li{color:var(--dim)}
.plan li::before{content:"—"; color:#c7c7cc; flex:0 0 auto}
.plan.pro li::before{content:"—"; color:var(--accent)}

/* ---------- pie ---------- */
.footer{background:var(--ink); padding:56px 0 40px; border-top:1px solid var(--line-dark)}
.foot-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{font-size:13.5px; color:var(--dim); text-decoration:none}
.foot-links a:hover{color:var(--white); text-decoration:underline}
.foot-note{font-size:12px; color:var(--dim-2); line-height:1.6; max-width:640px}
.foot-brand{margin:0 0 26px}
.foot-brand img{height:24px; width:auto; opacity:.85}

/* ---------- aparición al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* la página está pensada en oscuro; se respeta también en claro del sistema */
@media print{ .nav{display:none} body{background:#fff; color:#000} }

/* el desplazamiento por anclas no debe quedar bajo la barra fija */
section{scroll-margin-top:60px}

/* en las secciones centradas el subtítulo necesita aire tras el titular */
.center h2 + .sub, .center .narrow + .sub{margin-top:22px}

/* los dos iPad, uno al lado del otro; apilados cuando no caben */
.ipads{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:900px; margin:44px auto 0}
@media (max-width:700px){
  .ipads{grid-template-columns:1fr; gap:34px; max-width:400px}
  .ipads .ipad{--w:340px}
}

/* ---------- logotipo de la app ---------- */
.nav-logo img{height:16px; width:auto}
.footer .nav-logo img{height:19px}
.hero-logo{
  width:clamp(216px,29vw,300px); height:auto;
  margin:0 auto 26px;
}
@media (max-width:740px){ .hero-logo{margin-bottom:20px} }
/* el eyebrow del heroe lleva debajo una segunda linea con los dispositivos */
.hero .eyebrow{margin-bottom:5px}
.hero-devices{font-size:13px; font-weight:500; color:var(--dim); margin:0 0 18px; letter-spacing:.01em}