:root{
  --white:#fff;
  --fog:#F5F5F7;
  --fog-deep:#E8E8ED;
  --ink:#1D1D1F;
  --muted:#6E6E73;
  --blue:#2C8FD1;
  --blue-deep:#1D6FA8;
  --blue-tint:#E4F1FA;
  --navy:#0B2236;
  --navy-soft:#123049;
  --gold:#F4B942;
  --brand-yellow:#FFE602;
  --line:#D8D8DC;
  --whatsapp:#25D366;
  --whatsapp-deep:#1DA851;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.47059;
}
h1,h2,h3{margin:0 0 .4em; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:600; letter-spacing:-.03em; line-height:1.05}
h2{font-size:clamp(2rem,4.2vw,3.1rem); letter-spacing:-.025em; line-height:1.08}
h3{font-size:1.28rem; font-weight:600}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.02em}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.lede{font-size:clamp(1.15rem,2vw,1.45rem); color:var(--muted); font-weight:400; max-width:38ch}
.eyebrow{
  font-size:.8rem; letter-spacing:.02em; color:var(--blue-deep); font-weight:600; margin-bottom:14px;
  text-transform:none;
}
section{padding:108px 0}
@media (max-width:780px){section{padding:64px 0} h1{font-size:2.4rem}}
.center{text-align:center; margin-left:auto; margin-right:auto}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:980px; font-weight:600; font-size:1rem;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 14px 28px -14px rgba(44,143,209,.55)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-whatsapp{background:var(--whatsapp); color:#fff; box-shadow:0 14px 28px -14px rgba(37,211,102,.55)}
.btn-whatsapp:hover{background:var(--whatsapp-deep)}
.btn-light{background:#fff; color:var(--ink)}
.btn-outline{border:1.5px solid rgba(255,255,255,.5); color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:10px 20px; font-size:.88rem}
.link-chevron{display:inline-flex; align-items:center; gap:6px; font-weight:500; color:var(--blue-deep); font-size:1.02rem}
.link-chevron svg{width:9px; transition:transform .18s ease}
.link-chevron:hover svg{transform:translateX(3px)}

.has-wa-icon::before{
  content:'';
  width:17px; height:17px; flex:none; order:-1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.73-.85-2-.95-.27-.1-.46-.15-.66.15-.2.29-.76.95-.93 1.14-.17.2-.34.22-.63.07-.29-.15-1.22-.45-2.32-1.43-.86-.76-1.44-1.71-1.6-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.59-.9-2.18-.24-.57-.48-.5-.66-.5-.17-.01-.37-.01-.56-.01-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.43 0 1.43 1.05 2.82 1.2 3.01.15.2 2.06 3.15 5 4.42.7.3 1.24.48 1.67.62.7.22 1.34.19 1.84.12.56-.08 1.73-.71 1.97-1.39.24-.68.24-1.27.17-1.39-.07-.12-.27-.2-.56-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.14 6.4 2.14 11.82c0 1.85.51 3.58 1.4 5.07L2 22l5.27-1.37a9.98 9.98 0 0 0 4.77 1.21c5.46 0 9.9-4.4 9.9-9.82C21.94 6.4 17.5 2 12.04 2zm0 17.9a8.1 8.1 0 0 1-4.14-1.13l-.3-.18-3.13.81.84-3.03-.2-.31a7.99 7.99 0 0 1-1.24-4.24c0-4.42 3.62-8.02 8.08-8.02 2.16 0 4.19.84 5.71 2.36a8 8 0 0 1 2.37 5.66c0 4.42-3.62 8.08-7.99 8.08z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.73-.85-2-.95-.27-.1-.46-.15-.66.15-.2.29-.76.95-.93 1.14-.17.2-.34.22-.63.07-.29-.15-1.22-.45-2.32-1.43-.86-.76-1.44-1.71-1.6-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.59-.9-2.18-.24-.57-.48-.5-.66-.5-.17-.01-.37-.01-.56-.01-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.43 0 1.43 1.05 2.82 1.2 3.01.15.2 2.06 3.15 5 4.42.7.3 1.24.48 1.67.62.7.22 1.34.19 1.84.12.56-.08 1.73-.71 1.97-1.39.24-.68.24-1.27.17-1.39-.07-.12-.27-.2-.56-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.14 6.4 2.14 11.82c0 1.85.51 3.58 1.4 5.07L2 22l5.27-1.37a9.98 9.98 0 0 0 4.77 1.21c5.46 0 9.9-4.4 9.9-9.82C21.94 6.4 17.5 2 12.04 2zm0 17.9a8.1 8.1 0 0 1-4.14-1.13l-.3-.18-3.13.81.84-3.03-.2-.31a7.99 7.99 0 0 1-1.24-4.24c0-4.42 3.62-8.02 8.08-8.02 2.16 0 4.19.84 5.71 2.36a8 8 0 0 1 2.37 5.66c0 4.42-3.62 8.08-7.99 8.08z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background-color:currentColor;
  display:inline-block;
}

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:var(--brand-yellow);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; max-width:1200px; margin:0 auto; height:52px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:32px; width:auto}
.brand-full{height:38px; width:auto}
.nav-links{display:flex; gap:30px; font-size:.86rem; font-weight:500; color:var(--ink)}
.nav-links a{opacity:.86; transition:opacity .15s ease}
.nav-links a:hover{opacity:1}
@media (max-width:860px){.nav-links{display:none}}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px; text-align:center; background:var(--white)}
.hero .wrap{display:flex; flex-direction:column; align-items:center}
.hero .lede{margin:18px auto 30px}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue-tint); color:var(--blue-deep);
  font-size:.88rem; font-weight:600;
  padding:9px 18px; border-radius:999px; margin:0 auto 26px;
}
.hero-badge svg{width:17px; height:17px; flex:none}
.hero-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:14px}
.hero-microcopy{font-size:.86rem; color:var(--muted); margin-bottom:8px}

/* ---------- Brands bar ---------- */
.brands{padding:8px 0 40px}
.brands-label{
  text-align:center; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:0 0 22px;
}
.brands-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:44px 56px;
}
.brands-row img{
  height:32px; width:auto; display:block;
  opacity:.88; transition:opacity .2s ease, transform .2s ease;
}
.brands-row img:hover{opacity:1; transform:translateY(-2px)}
@media (max-width:600px){.brands-row{gap:28px 34px} .brands-row img{height:26px}}
.hero-collage{width:100%; max-width:960px; margin:0 auto 28px}
.hero-collage img{width:100%; height:auto; display:block}
.glow{
  position:absolute; width:70%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(44,143,209,.30) 0%, rgba(44,143,209,.12) 45%, rgba(44,143,209,0) 72%);
  filter:blur(6px); animation:breathe 6s ease-in-out infinite; z-index:0;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{transform:scale(1); opacity:.85}
  50%{transform:scale(1.14); opacity:1}
}

/* ---------- Stat strip ---------- */
.stat-strip{background:var(--fog); padding:0}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:44px 24px}
.stat-strip .item{text-align:center; padding:0 12px; border-left:1px solid var(--line)}
.stat-strip .item:first-child{border-left:none}
.stat-strip h3{font-size:1.05rem; margin-bottom:4px}
.stat-strip p{font-size:.86rem; color:var(--muted); margin:0}
@media (max-width:760px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr); gap:24px 0} .stat-strip .item:nth-child(3){border-left:none}}

.payments{border-top:1px solid var(--line); padding:26px 24px 34px; text-align:center}
.payments-label{font-size:.76rem; letter-spacing:.04em; color:var(--muted); margin:0 0 14px; text-transform:uppercase}
.payments-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px}
.payment-badge{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  height:44px; padding:0 18px; display:flex; align-items:center; justify-content:center;
}
.payment-badge img{display:block; max-height:26px; width:auto}
@media (max-width:600px){.payment-badge{height:38px; padding:0 14px} .payment-badge img{max-height:20px}}

/* ---------- Dark environment section ---------- */
.environment{background:radial-gradient(120% 140% at 50% 0%, var(--navy-soft) 0%, var(--navy) 60%); color:#fff; text-align:center; position:relative; overflow:hidden}
.environment h2{color:#fff}
.environment .lede{color:#AEC6D6; margin:0 auto 8px}
.environment .eyebrow{color:#7FC4EE}
.environment-stage{position:relative; margin-top:56px; display:flex; align-items:center; justify-content:center}
.environment .glow{background:radial-gradient(circle, rgba(244,185,66,.22) 0%, rgba(44,143,209,.22) 45%, rgba(44,143,209,0) 72%)}
.environment-photo{position:relative; z-index:1; width:min(460px,86%); border-radius:32px; overflow:hidden}
.environment-photo img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* ---------- Compression boots spotlight ---------- */
.compression{background:radial-gradient(120% 140% at 50% 0%, var(--navy-soft) 0%, var(--navy) 60%); color:#fff; text-align:center; position:relative; overflow:hidden}
.compression h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.6rem)}
.compression .eyebrow{color:#7FC4EE}
.compression .lede{color:#AEC6D6}
.compression-visual-full{position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:40px}
.compression-photo-full{position:relative; z-index:1; width:100%; max-width:960px; border-radius:28px; overflow:hidden; background:#fff}
.compression-photo-full img{width:100%; height:auto; display:block}

/* ---------- Product grid (Apple tiles) ---------- */
.section-head{max-width:640px; margin:0 auto 56px; text-align:center}
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:920px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tile-grid{grid-template-columns:1fr}}
.tile{
  background:var(--fog); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.tile:hover{transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(0,0,0,.22)}
.tile .thumb{aspect-ratio:1/1; background:#fff}
.tile .thumb img{width:100%; height:100%; object-fit:cover}
.tile-body{padding:26px 26px 30px; flex:1; display:flex; flex-direction:column; gap:10px}
.tile-body .cat{font-size:.78rem; color:var(--blue-deep); font-weight:600}
.tile-body p.desc{font-size:.92rem; color:var(--muted); margin:0; flex:1}
.tile-body .btn{align-self:flex-start; margin-top:6px}

/* ---------- Category pills ---------- */
.pill-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.pill-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pill-grid{grid-template-columns:1fr}}
.pill{
  border:1px solid var(--line); border-radius:18px; padding:26px 24px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
  background:#fff;
}
.pill:hover{border-color:var(--blue); transform:translateY(-2px); background:var(--blue-tint)}
.pill h3{font-size:1.05rem; margin-bottom:4px}
.pill p{font-size:.88rem; color:var(--muted); margin:0}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step .num{font-size:.82rem; color:var(--blue-deep); font-weight:700; display:block; margin-bottom:10px; letter-spacing:.03em}
.step h3{font-size:1.08rem; margin-bottom:6px}
.step p{font-size:.92rem; color:var(--muted); margin:0}

/* ---------- Stores ---------- */
.store-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){.store-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.store-grid{grid-template-columns:1fr}}
.store{background:var(--fog); border-radius:20px; padding:22px; display:flex; gap:16px; align-items:flex-start}
.store img{width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none}
.store h3{font-size:1rem; margin-bottom:4px}
.store p{font-size:.85rem; color:var(--muted); margin:0 0 4px}
.store .phone{font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--blue-deep); margin-bottom:10px; display:block}
.store a.btn{padding:9px 16px; font-size:.8rem}
.store .actions{display:flex; gap:8px; flex-wrap:wrap}
.btn-uber{background:#000; color:#fff}
.btn-uber:hover{background:#222}
.btn-uber svg{width:14px; height:14px; flex:none}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer; list-style:none; padding:24px 4px; display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:var(--ink); font-size:1.05rem; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:''; flex:none; width:14px; height:14px; position:relative;
}
.faq-item summary::before{
  content:'+'; font-size:1.6rem; font-weight:300; color:var(--blue); flex:none; transition:transform .2s ease; line-height:0;
}
.faq-item[open] summary::before{transform:rotate(45deg)}
.faq-item .a{padding:0 4px 24px; color:var(--muted); font-size:.98rem; max-width:64ch}

/* ---------- Final CTA ---------- */
.final{background:var(--fog); text-align:center}
.final .lede{margin:0 auto 30px}

/* ---------- Footer ---------- */
footer{padding:44px 0 32px; color:#5B4E00; font-size:.82rem; background:var(--brand-yellow)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
footer .brand img{height:20px}
footer .brand{margin-bottom:8px}
footer .brand-full{height:26px}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Utility classes (substitui estilos inline; permite CSP sem 'unsafe-inline' em style-src) ---------- */
.u-lede-tight{margin:14px auto 0}
.u-btn-outline-light{border:1px solid var(--line)}
.u-h2-16ch{max-width:16ch; margin-left:auto; margin-right:auto}
.u-h2-18ch{max-width:18ch; margin-left:auto; margin-right:auto}
.u-mt44-mb0{margin-top:44px; margin-bottom:0}
.u-mb0{margin-bottom:0}
.u-bg-fog{background:var(--fog)}
.u-bg-white{background:#fff}
.u-max-820{max-width:820px}
.u-m0{margin:0}