/* Identifícame · landing (mismo sistema de diseño que la app) */
@font-face{font-family:"Display";src:url(/assets/fonts/display.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Text";src:url(/assets/fonts/text.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#f1f4f8;--surface:#fff;--surface-2:#f7f9fc;--ink:#0a1624;--ink-2:#566579;--line:#e3e9f1;
  --night:#0a1624;--brand:#0b8da6;--brand-2:#075f72;--signal:#2dd4e6;
  --r:22px;--sh:0 1px 2px rgba(10,22,36,.05),0 10px 30px -12px rgba(10,22,36,.14);
  --font:"Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Display","Text",ui-sans-serif,system-ui,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#070e18;--surface:#0e1a2b;--surface-2:#12213a;--ink:#e9f0f9;--ink-2:#93a4bb;--line:#1b2d45;
  --night:#050b13;--brand:#2dc3dc;--brand-2:#7fe3f1;--sh:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.7)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.06;margin:0 0 .5em;font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}a{color:var(--brand-2);text-underline-offset:3px}
.muted{color:var(--ink-2)}.small{font-size:.86rem}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* barra */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.12rem var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand img{border-radius:9px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.94rem}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a.cta{background:var(--ink);color:var(--bg)}.nav a.cta:hover{background:var(--brand);color:#fff}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:14px;background:var(--ink);color:var(--bg);font:700 1rem var(--font);text-decoration:none;border:1.5px solid transparent;transition:transform .12s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* hero */
.hero{padding-top:24px}
.hero-in{position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding:64px 56px;border-radius:32px;background:radial-gradient(120% 120% at 85% 20%,#14405a 0,var(--night) 58%);color:#eaf3fb}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.045em;color:#fff}
.kicker{display:inline-block;margin-bottom:14px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.hero .kicker{color:var(--signal)}
.lead{font-size:1.12rem;color:#a9bdd2;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px}
.hero .btn{background:#fff;color:var(--night)}.hero .btn:hover{background:var(--signal)}
.hero .btn.ghost{background:transparent;color:#fff;border-color:#35506f}.hero .btn.ghost:hover{border-color:#fff}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;color:#8fa6bf;font-size:.9rem}
.trust li::before{content:"✓ ";color:var(--signal);font-weight:700}


/* secciones */
.sec{padding-top:80px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 0;padding:0}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:12px;background:var(--brand);color:#fff;font:700 1.05rem var(--display)}
.steps b{display:block;font:700 1.15rem var(--display);letter-spacing:-.02em;margin-bottom:6px}
.steps span{color:var(--ink-2)}
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.use{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.use p{color:var(--ink-2);margin:0}
.ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.ic svg{width:24px;height:24px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:24px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat{background:var(--surface);padding:24px}
.feat b{display:block;font:700 1.05rem var(--display);letter-spacing:-.02em;margin-bottom:4px}
.feat span{color:var(--ink-2);font-size:.95rem}

/* precio */
.price{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:48px;border-radius:32px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.amount{font:800 clamp(3rem,7vw,4.6rem)/1 var(--display);letter-spacing:-.05em;margin:.1em 0 .25em;color:var(--ink)}
.price-cta{display:flex;flex-direction:column;gap:12px}
.price-cta p{margin:4px 0 0;text-align:center}

/* faq */
.faq{display:grid;gap:10px;margin-top:24px;max-width:780px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin:0 0 18px}

/* contacto y pie */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:40px 48px;border-radius:32px;background:var(--surface);border:1px solid var(--line)}
.contact ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.contact a{font-weight:600;text-decoration:none}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:56px;padding-bottom:40px;color:var(--ink-2);font-size:.88rem}

@media(max-width:900px){
  .uses{grid-template-columns:1fr 1fr}.feats{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .hide-sm{display:none}
  .hero-in{grid-template-columns:1fr;padding:40px 24px;text-align:center;border-radius:26px}
  .lead{margin-left:auto;margin-right:auto}.hero-cta,.trust{justify-content:center}
  .phone{transform:none;margin:8px auto 0}
  .sec{padding-top:56px}
  .steps,.uses,.feats{grid-template-columns:1fr}
  .price,.contact{grid-template-columns:1fr;padding:30px 24px}
  .hero-cta .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.ph-toast{animation:none}html{scroll-behavior:auto}}
/* maqueta del celular */
.phone{position:relative;justify-self:center;width:250px;padding:10px;border-radius:40px;background:linear-gradient(160deg,#2a3f57,#0c1726);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1.5px #3a5571;transform:rotate(3deg)}
.ph-screen{border-radius:31px;background:#f3f6fa;color:#0a1624;padding:34px 16px 18px;text-align:center;position:relative;overflow:hidden}
.ph-notch{position:absolute;top:9px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0c1726}
.ph-photo{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(140deg,#0b8da6,#7fe0f0);color:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px #2dd4e6}
.ph-photo svg{width:40px;height:40px}
.ph-small{margin:0;font-size:.72rem;color:#566579}
.ph-name{margin:0 0 8px;font:800 1.5rem/1.1 var(--display);letter-spacing:-.04em}
.ph-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.ph-chips span{padding:3px 8px;border-radius:999px;background:#fff;border:1px solid #e3e9f1;font-size:.64rem;font-weight:700}
.ph-note{margin-bottom:12px;padding:8px 10px;border-radius:10px;background:#fff2d6;color:#7a4a00;font-size:.68rem;text-align:left}
.ph-btn{padding:10px;border-radius:11px;font-size:.74rem;font-weight:700;margin-bottom:6px}
.ph-btn.wa{background:#1fa855;color:#fff}.ph-btn.ghost{background:#fff;border:1px solid #d3dce8}
.ph-loc{margin:6px 0 0;font-size:.62rem;color:#566579}
.ph-toast{position:absolute;left:-74px;bottom:-18px;display:flex;flex-direction:column;gap:2px;max-width:200px;padding:11px 14px;border-radius:14px;background:#fff;color:#0a1624;text-align:left;font-size:.7rem;box-shadow:0 18px 36px -12px rgba(0,0,0,.55);transform:rotate(-3deg);animation:pop 4s ease-in-out infinite}
.ph-toast b{font-size:.78rem}.ph-toast span{color:#566579}
.ph-toast::before{content:"";position:absolute;left:-6px;top:12px;width:12px;height:12px;border-radius:50%;background:#1fa855;box-shadow:0 0 0 3px #fff}
@keyframes pop{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)}}
@media(max-width:720px){.ph-toast{left:-18px;bottom:-22px}.phone{width:230px;margin-bottom:26px}}

/* foto real del producto */
.hero-in{grid-template-columns:1fr;text-align:center;padding-bottom:56px}
.hero .lead{margin-left:auto;margin-right:auto}.hero-cta,.trust{justify-content:center}
.shot{margin:18px 0 0;width:100%;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.shot img{display:block;width:100%;height:auto}
@media(max-width:720px){.shot{border-radius:16px;margin-top:6px}}