@font-face{
  font-family:Geist;
  src:url('geist.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#fff;
  --bg2:#f5f5f7;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --blue:#0071e3;
  --line:rgba(0,0,0,.10);
  --card:#f5f5f7;
  --chrome:rgba(255,255,255,.72);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000;
    --bg2:#101012;
    --ink:#f5f5f7;
    --ink2:#8e8e93;
    --blue:#2997ff;
    --line:rgba(255,255,255,.14);
    --card:#1c1c1e;
    --chrome:rgba(0,0,0,.72);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.47;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.narrow{max-width:720px;margin:0 auto;padding:0 22px}

/* ---------- chrome ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--chrome);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:52px}
/* padding para que el area tactil llegue a ~44px sin cambiar como se ve */
.logo{font-size:19px;font-weight:600;letter-spacing:-.02em;padding:11px 2px;margin:0 -2px}
.nav .tel{font-size:14px;color:var(--ink2);letter-spacing:-.005em;padding:13px 2px;margin:0 -2px}
.nav .tel:hover{color:var(--ink)}

/* ---------- tipografia ---------- */
h1{
  font-size:clamp(2.6rem,7vw,4.4rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h2{
  font-size:clamp(1.9rem,4.4vw,3rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.024em;
  text-wrap:balance;
}
h3{font-size:1.3rem;font-weight:600;line-height:1.2;letter-spacing:-.018em}
.lead{font-size:clamp(1.16rem,2.1vw,1.42rem);line-height:1.42;letter-spacing:-.014em;color:var(--ink2);font-weight:400}
.eyebrow{font-size:.95rem;font-weight:600;color:var(--blue);letter-spacing:-.005em;margin-bottom:.7em}

/* ---------- hero ---------- */
.hero{padding:clamp(58px,9vw,104px) 0 clamp(20px,3vw,34px);text-align:center}
.hero .lead{max-width:50ch;margin:22px auto 0}
.hero .acts{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sm{display:block;margin-top:18px;font-size:.86rem;color:var(--ink2)}

.formatos{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding:clamp(34px,5vw,54px) 0 clamp(40px,6vw,64px);
  max-width:840px;margin:0 auto;
}
.fmt{background:var(--card);border-radius:18px;padding:26px 26px 28px;display:flex;flex-direction:column}
.fmt img{
  width:auto;height:178px;object-fit:contain;object-position:center bottom;
  align-self:center;margin-bottom:20px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.16));
}
.fmt .i-adh{height:142px}
.fmt h3{margin-bottom:8px}
.fmt p{color:var(--ink2);font-size:1.02rem;line-height:1.45}

.cta{
  display:inline-block;background:var(--blue);color:#fff;
  font-size:1.02rem;font-weight:400;letter-spacing:-.01em;
  padding:12px 24px;border-radius:980px;
  transition:background 180ms ease,transform 100ms ease-out;
}
.cta:hover{background:color-mix(in srgb,var(--blue) 86%,#fff)}
.cta:active{transform:scale(.97)}
.cta.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px currentColor}
.cta.ghost:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}

/* ---------- pasos ---------- */
.steps{padding:0 0 clamp(46px,7vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--card);border-radius:18px;padding:28px 26px}
.step .n{font-size:.85rem;font-weight:600;color:var(--blue);letter-spacing:-.005em}
.step h3{margin:10px 0 8px}
.step p{color:var(--ink2);font-size:1.02rem;line-height:1.45}

/* ---------- banda incluido ---------- */
.band{background:var(--bg2);padding:clamp(56px,8vw,92px) 0;margin-top:14px}
.band h2{text-align:center;max-width:24ch;margin:0 auto}
.band .cols{
  display:grid;grid-template-columns:1fr 1fr;gap:0 56px;
  max-width:860px;margin:40px auto 0;
}
.band ul{list-style:none}
.band li{
  padding:15px 0 15px 30px;position:relative;
  border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.45;color:var(--ink2);
}
.band li:last-child{border-bottom:none}
.band li b{color:var(--ink);font-weight:600}
.band li:before{
  content:"";position:absolute;left:2px;top:22px;
  width:12px;height:7px;border-left:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}

/* ---------- precios ---------- */
.price{padding:clamp(56px,8vw,92px) 0}
.price h2{text-align:center;margin-bottom:12px}
.psub{text-align:center;max-width:42ch;margin:0 auto 34px;font-size:1.08rem}
.pks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pk{
  background:var(--card);border-radius:18px;padding:32px 30px;
  display:flex;flex-direction:column;
}
.pk.hi{box-shadow:inset 0 0 0 2px var(--blue)}
.pnote{text-align:center;color:var(--ink2);font-size:.95rem;margin-top:24px}
.pk .k{font-size:.92rem;font-weight:600;color:var(--ink2);letter-spacing:-.005em}
.pk .v{font-size:3.1rem;font-weight:600;letter-spacing:-.035em;line-height:1;margin:10px 0 0}
.pk .v small{font-size:1.05rem;font-weight:400;letter-spacing:-.01em;color:var(--ink2)}
.pk .eu{font-weight:400}
.pk p{margin-top:12px;color:var(--ink2);font-size:.98rem;line-height:1.47}
.pk .tag{
  align-self:flex-start;margin-bottom:14px;
  font-size:.78rem;font-weight:600;color:var(--blue);
  background:color-mix(in srgb,var(--blue) 10%,transparent);
  padding:4px 10px;border-radius:980px;
}

/* ---------- faq ---------- */
.faq{padding:clamp(48px,7vw,80px) 0;border-top:1px solid var(--line)}
.faq h2{text-align:center;margin-bottom:34px}
.faq .qs{max-width:760px;margin:0 auto}
.faq .q{padding:24px 0;border-bottom:1px solid var(--line)}
.faq .q:last-child{border-bottom:none}
.faq h4{font-size:1.08rem;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}
.faq p{color:var(--ink2);font-size:1rem;line-height:1.5}

/* ---------- cierre sobre foto de mostrador ---------- */
.end{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(76px,10vw,126px) 0;text-align:center;color:#fff;
  background:#0c0c0e;
}
.end::before{
  content:"";position:absolute;inset:-6%;z-index:-2;
  background:var(--bgimg) center 46% / cover no-repeat;
  filter:blur(17px) saturate(1.14);
  transform:scale(1.06);
}
.end::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,11,14,.58) 0%,rgba(10,11,14,.74) 100%);
}
.end h2{text-shadow:0 1px 20px rgba(0,0,0,.35)}
.end .lead{max-width:34ch;margin:18px auto 30px;color:rgba(255,255,255,.86)}
.end .cta{background:#fff;color:#1d1d1f}
.end .cta:hover{background:rgba(255,255,255,.88)}
@media (prefers-reduced-transparency:reduce){
  .end::before{filter:none;opacity:.5}
}
footer{padding:22px 0 40px;font-size:.8rem;color:var(--ink2);display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
footer span{padding:6px 0}
footer a{display:inline-block;padding:8px 2px;margin:0 -2px}
footer a:hover{color:var(--ink)}

/* ---------- demo ---------- */
.demo{padding:clamp(70px,13vw,130px) 0 clamp(50px,8vw,90px);text-align:center}
.demo .lead{max-width:32ch;margin:20px auto 0}
.demo .cta{margin-top:32px}
.tick{
  width:56px;height:56px;border-radius:50%;background:var(--blue);
  margin:0 auto 26px;position:relative;
}
.tick:before{
  content:"";position:absolute;left:18px;top:20px;width:20px;height:11px;
  border-left:2.6px solid #fff;border-bottom:2.6px solid #fff;transform:rotate(-45deg);
}

@media (max-width:820px){
  .formatos{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr;gap:14px}
  .band .cols{grid-template-columns:1fr;gap:0}
  .band li:last-child{border-bottom:1px solid var(--line)}
  .band ul:last-child li:last-child{border-bottom:none}
  .pks{grid-template-columns:1fr}
  .nav .tel{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta{transition:background 180ms ease}
  .cta:active{transform:none}
}