:root{
  /* base branca */
  --bg:#ffffff; --bg-2:#f5f8fc; --surf:#ffffff; --surf-2:#f2f6fb;
  --ink:#0f1b2d; --muted:#51627a; --faint:#8494ab;
  --line:#e3eaf3; --line-forte:#cfdbe9;

  /* detalhes: azul e verde */
  --azul:#1565d8; --azul-esc:#0f4fae; --azul-claro:#eaf2ff;
  --verde:#11a06a; --verde-esc:#0b7f53; --verde-claro:#e6f7f0;

  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:54px; --sp-6:80px;
  --fs-xs:13px; --fs-sm:15px; --fs-md:17px; --fs-lg:clamp(19px,2vw,21px); --fs-xl:clamp(24px,3vw,28px);
  --fs-2xl:clamp(27px,4.4vw,40px); --fs-3xl:clamp(32px,6vw,56px);
  --r:16px; --r-g:22px; --maxw:1120px;
  --sombra:0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.06);
  --sombra-alta:0 8px 20px rgba(15,27,45,.09), 0 24px 48px rgba(15,27,45,.1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); line-height:1.62; font-size:var(--fs-md);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden;
  font-feature-settings:"cv05" 1, "cv08" 1, "ss03" 1;  /* l com cauda, í mais claro */
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
h1,h2,h3{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  margin:0 0 var(--sp-2); font-weight:800;
  text-wrap:balance;                 /* não deixa palavra órfã na última linha */
}
h1{font-size:var(--fs-3xl); line-height:1.08; letter-spacing:-.035em}
h2{font-size:var(--fs-2xl); line-height:1.14; letter-spacing:-.028em}
h3{font-size:var(--fs-lg); line-height:1.25; letter-spacing:-.018em}
p{text-wrap:pretty}                  /* evita linha final com uma palavra só */
/* palavra-chave do título em gradiente, como vitrine de marca */
.destaca{background:linear-gradient(95deg,var(--azul),var(--verde));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-lg)}
p{margin:0 0 var(--sp-2)}
a{color:var(--azul)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:16px}
.narrow{max-width:760px; margin-inline:auto}
section{padding-block:var(--sp-5)}
.muted{color:var(--muted)} .faint{color:var(--faint); font-size:var(--fs-sm)}
.lead{font-size:var(--fs-lg); color:var(--muted); line-height:1.55; text-wrap:pretty}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul); font-weight:700; margin-bottom:var(--sp-1)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:var(--azul); color:#fff; font-weight:700; font-size:var(--fs-md);
  text-decoration:none; padding:14px 24px; border-radius:12px; border:0; cursor:pointer;
  font-family:inherit; transition:background .16s, transform .16s, box-shadow .16s;
  box-shadow:0 2px 8px rgba(21,101,216,.22);
}
.btn:hover{background:var(--azul-esc); transform:translateY(-1px); box-shadow:0 8px 20px rgba(21,101,216,.28)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.verde{background:var(--verde); box-shadow:0 2px 8px rgba(17,160,106,.24)}
.btn.verde:hover{background:var(--verde-esc); box-shadow:0 8px 20px rgba(17,160,106,.3)}
.btn.sec{background:#fff; color:var(--azul); border:1.5px solid var(--line-forte); box-shadow:none}
.btn.sec:hover{border-color:var(--azul); background:var(--azul-claro)}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- formulário ---------- */
.campo{margin-bottom:var(--sp-2)}
.campo label{display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:6px; color:var(--ink)}
.campo input{
  width:100%; background:#fff; border:1.5px solid var(--line-forte); color:var(--ink);
  padding:13px 15px; border-radius:11px; font-family:inherit; font-size:var(--fs-md);
  transition:border-color .15s, box-shadow .15s;
}
.campo input:hover{border-color:#b9cbdf}
.campo input:focus{outline:0; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-claro)}
.campo input:user-invalid{border-color:#d84a4a}

.card{background:var(--surf); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra)}
.aviso{background:#fdecec; border:1px solid #f3c4c4; color:#9c2a2a;
  padding:11px 14px; border-radius:11px; font-size:var(--fs-sm); margin-bottom:var(--sp-2)}
.aviso.ok{background:var(--verde-claro); border-color:#aee3cd; color:var(--verde-esc)}

/* ---------- topo ---------- */
.topo{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line); padding:12px 0}
@supports(backdrop-filter:blur(1px)){.topo{backdrop-filter:blur(12px) saturate(1.5)}}
.topo .wrap{display:flex; align-items:center; gap:var(--sp-2)}
/* ---------- marca ---------- */
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:none}
.logo .marca{flex:none; border-radius:10px; box-shadow:0 2px 6px rgba(21,101,216,.26); display:block}
.logo .palavra{font-weight:800; font-size:var(--fs-lg); letter-spacing:-.035em; line-height:1; white-space:nowrap}
.logo .palavra b{color:var(--azul); font-weight:800}
.logo:hover .marca{transform:translateY(-1px)}
.logo .marca{transition:transform .16s}
.marca-grande{display:inline-flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.marca-grande .marca{border-radius:18px; box-shadow:0 8px 22px rgba(21,101,216,.26)}
.marca-grande .palavra{font-weight:800; font-size:32px; letter-spacing:-.04em; line-height:1}
.marca-grande .palavra b{color:var(--azul)}
.marca-grande .lema{font-size:var(--fs-sm); color:var(--muted); font-weight:500; letter-spacing:0}
.topo nav{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); min-width:0}
.topo nav .faint{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px}
@media(max-width:560px){ .topo nav .faint{display:none} }
.topo nav a{color:var(--muted); text-decoration:none; font-weight:500}
.topo nav a:hover{color:var(--azul)}
.sair{background:#fff; border:1px solid var(--line-forte); color:var(--muted); padding:7px 13px;
  border-radius:9px; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:600}
.sair:hover{border-color:var(--azul); color:var(--azul)}

/* ---------- faixa de confiança ---------- */
.confianca{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  padding:14px 16px; background:var(--bg-2); border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--muted); font-weight:500}
.confianca b{color:var(--ink); font-weight:600}
.confianca span{display:inline-flex; align-items:center; gap:7px}
.pt{width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none}

/* ---------- categorias ---------- */
.grade{display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
.cat{
  display:block; text-decoration:none; color:inherit; background:var(--surf);
  border:1px solid var(--line); border-radius:var(--r-g); padding:var(--sp-4) var(--sp-3);
  transition:transform .2s, box-shadow .2s, border-color .2s; text-align:center;
  box-shadow:var(--sombra); position:relative; overflow:hidden;
}
.cat::after{content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--azul),var(--verde)); opacity:0; transition:opacity .2s}
.cat:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--line-forte)}
.cat:hover::after{opacity:1}
.cat .ic{font-size:42px; line-height:1; margin-bottom:var(--sp-2)}
.cat h3{margin-bottom:6px}
.cat p{font-size:var(--fs-sm); color:var(--muted); margin:0}
.cat .n{display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--azul); font-weight:700}

/* ---------- card de produto ---------- */
.prod{
  display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--surf);
  border:1px solid var(--line); border-radius:var(--r-g); overflow:hidden; box-shadow:var(--sombra);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.prod:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--line-forte)}
.prod .foto{aspect-ratio:1; background:#fff; display:grid; place-items:center;
  padding:18px; position:relative; overflow:hidden}
.prod .foto img{width:100%; height:100%; object-fit:contain; transition:transform .35s ease}
.prod:hover .foto img{transform:scale(1.06)}
.prod .txt{padding:var(--sp-3); display:flex; flex-direction:column; gap:8px; flex:1}
.prod h3{font-size:var(--fs-md); margin:0; letter-spacing:-.015em}
.prod .sub{font-size:var(--fs-sm); color:var(--muted); margin:0; flex:1; line-height:1.5}
.prod .de{font-size:var(--fs-xs); color:var(--faint); margin:0; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.prod .pr{font-size:var(--fs-xl); font-weight:800; margin:0; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.prod .ver{font-size:var(--fs-sm); font-weight:700; color:var(--azul); margin:4px 0 0}
.prod:hover .ver{text-decoration:underline}

.selo{display:inline-flex; align-items:center; gap:5px; background:var(--azul-claro); color:var(--azul-esc);
  font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; width:fit-content;
  letter-spacing:.01em}
.selo.verde{background:var(--verde-claro); color:var(--verde-esc)}
.selo.atac{background:#fff4e0; color:#9a6413}
.fita-foto{position:absolute; top:12px; left:12px; z-index:2}

footer{padding:var(--sp-5) 0; border-top:1px solid var(--line); color:var(--faint);
  font-size:var(--fs-xs); text-align:center; margin-top:var(--sp-5); background:var(--bg-2)}
footer p{max-width:660px; margin-inline:auto}

/* ---------- disclosure ---------- */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; padding:17px 34px 17px 0; font-weight:600; position:relative; list-style:none}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--azul)}
summary::after{content:"+"; position:absolute; right:4px; top:50%; translate:0 -50%;
  color:var(--azul); font-size:22px; font-weight:400; transition:rotate .2s}
details[open] summary::after{rotate:45deg}
details p{color:var(--muted); font-size:var(--fs-sm); padding-bottom:17px; margin:0}

/* =====================================================================
   Movimento ao rolar — animações dirigidas por scroll (CSS puro).
   Progressive enhancement: sem suporte, o conteúdo simplesmente aparece.
   ===================================================================== */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {

    /* revelar: sobe e aparece ao entrar na tela */
    .revela{
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 46%;
    }
    @keyframes revelar{
      from{ opacity:0; transform:translateY(26px) }
      to  { opacity:1; transform:none }
    }

    /* parallax: a camada decorativa anda mais devagar que a página */
    .parallax{
      animation: deslizar linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes deslizar{
      from{ transform:translateY(-7%) }
      to  { transform:translateY(7%) }
    }

    /* foto do produto ganha profundidade dentro do próprio quadro */
    .profundidade img{
      animation: afastar linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes afastar{
      from{ transform:scale(1.07) translateY(-2%) }
      to  { transform:scale(1.07) translateY(2%) }
    }
  }
}

/* =====================================================================
   Estrutura: ritmo de seções, como em vitrine de marca
   ===================================================================== */
.capa-hero{
  position:relative; overflow:clip; padding-block:var(--sp-6) var(--sp-5);
  background:
    radial-gradient(820px 560px at 84% -6%, rgba(21,101,216,.11), transparent 62%),
    radial-gradient(700px 520px at 4% 100%, rgba(17,160,106,.10), transparent 60%),
    linear-gradient(170deg,#fbfdfe 0%, #f1f6fa 55%, #eef5f1 100%);
  border-bottom:1px solid var(--line);
}
.capa-hero h1{max-width:16ch; margin-inline:auto}
.capa-hero .lead{max-width:48ch; margin-inline:auto}
.capa-hero .enfeite{position:absolute; inset:0; pointer-events:none; z-index:0}
.capa-hero .enfeite i{
  position:absolute; display:block; border-radius:50%; filter:blur(46px); opacity:.5;
}
.capa-hero .enfeite i:nth-child(1){width:220px;height:220px;background:rgba(21,101,216,.22); left:-70px; top:12%}
.capa-hero .enfeite i:nth-child(2){width:260px;height:260px;background:rgba(17,160,106,.20); right:-90px; bottom:-10%}
.capa-hero > .wrap{position:relative; z-index:1}

.secao-clara{background:var(--bg-2); border-block:1px solid var(--line)}

/* como funciona — três passos */
.passos{display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:p}
.passo{position:relative; padding-left:56px}
.passo::before{
  counter-increment:p; content:counter(p);
  position:absolute; left:0; top:-2px; width:40px; height:40px; border-radius:12px;
  background:#fff; border:1.5px solid var(--line-forte); color:var(--azul);
  font-weight:800; font-size:17px; display:grid; place-items:center;
}
.passo h3{font-size:var(--fs-md); margin-bottom:5px}
.passo p{font-size:var(--fs-sm); color:var(--muted); margin:0}

/* título de seção com respiro */
.titulo-secao{text-align:center; max-width:620px; margin:0 auto var(--sp-4)}
.titulo-secao h2{margin-bottom:10px}
.titulo-secao p{color:var(--muted); margin:0}

/* ---------- abas (criar conta / entrar) ---------- */
.abas{display:flex; gap:5px; background:var(--surf-2); padding:5px; border-radius:13px; margin-bottom:var(--sp-3)}
.abas button{flex:1; background:none; border:0; color:var(--muted); font-family:inherit;
  font-size:var(--fs-sm); font-weight:600; padding:12px 10px; border-radius:9px; cursor:pointer;
  transition:background .15s, color .15s}
.abas button:hover{color:var(--ink)}
.abas button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:var(--sombra)}

/* ---------- tira de vantagens da entrada ---------- */
.vantagens{display:grid; gap:2px; margin-top:var(--sp-3);
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.vantagens div{display:flex; align-items:flex-start; gap:12px; background:#fff; padding:15px 16px}
.vantagens svg{flex:none; width:34px; height:34px; border-radius:10px; padding:7px; margin-top:1px}
.vantagens .az{background:var(--azul-claro); color:var(--azul)}
.vantagens .vd{background:var(--verde-claro); color:var(--verde-esc)}
.vantagens p{margin:0; font-size:var(--fs-sm); color:var(--muted); line-height:1.45}
.vantagens b{color:var(--ink); font-weight:700; display:block; font-size:var(--fs-md); margin-bottom:1px}
@media(min-width:700px){ .vantagens{grid-template-columns:repeat(3,1fr)} }

/* ---------- letra miúda honesta ---------- */
.miudo{margin-top:var(--sp-3); padding:14px 16px; border-radius:var(--r);
  background:var(--surf-2); border:1px solid var(--line);
  font-size:12.5px; line-height:1.6; color:var(--muted); text-align:left}
.miudo strong{color:var(--ink)}
.miudo .titulo{display:block; font-weight:700; color:var(--ink); font-size:var(--fs-xs);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px}