/* Blossom Criativa · landing para lojistas
   Paleta e fontes do sistema visual aprovado. */
:root{
  --coral:#ec5f6e; --coral-esc:#c8414f; --menta:#2f9e7a; --menta-esc:#1f7a5c;
  --tinta:#23303a; --creme:#fff6ec; --rosa:#fde3e5; --kraft:#c9a57a; --areia:#efe7dc;
  --muted:#5f6b75; --line:#e8dfd3;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --script:"Dancing Script",cursive;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--creme);color:var(--tinta);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font:700 .78rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--coral-esc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99;background:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

.kraft{background-color:var(--kraft);
  background-image:radial-gradient(rgba(90,60,30,.18) 1px,transparent 1.4px),radial-gradient(rgba(255,240,220,.18) 1px,transparent 1.6px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:700 1rem var(--body);text-decoration:none;padding:.95em 1.5em;border-radius:99px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 22px rgba(236,95,110,.35)}
.btn-coral:hover{background:var(--coral-esc)}
.btn-linha{border:2px solid var(--tinta);color:var(--tinta)}
.btn-linha:hover{background:var(--tinta);color:#fff}

/* ===== tags (peça reutilizável) ===== */
.tag{position:relative;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;box-shadow:0 14px 26px rgba(60,40,20,.25)}
.tag::before{content:"";position:absolute;top:6.5%;left:50%;width:7%;height:7%;margin-left:-3.5%;border-radius:50%;background:var(--furo,var(--creme));box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.tag img{width:82%;margin-top:6%}
.txt{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--tinta);line-height:1;gap:.12em;margin-top:8%;container-type:inline-size;width:84%}
.txt .cur{font-family:var(--script);font-weight:700;font-size:1.4em;letter-spacing:-.01em}
.txt .sm{font:700 .5em var(--body);letter-spacing:.14em;text-transform:uppercase}
.txt .ic{width:.8em;height:.8em}
.txt .rm{width:3.4em;height:.85em;margin-top:.15em}
.ret{border-radius:12px;aspect-ratio:1/2.2;box-shadow:0 14px 26px rgba(60,40,20,.25);display:grid;place-items:center;position:relative}
.ret::before{content:"";position:absolute;top:8%;left:50%;width:16%;aspect-ratio:1;margin-left:-8%;border-radius:50%;background:var(--creme);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.txt.v{margin-top:30%}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(255,246,236,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:block;width:168px;height:49px;color:var(--tinta)}
.menu{display:flex;gap:26px;font:600 .95rem var(--body)}
.menu a{text-decoration:none;opacity:.85}
.menu a:hover{opacity:1;color:var(--coral-esc)}
.topo .btn{padding:.7em 1.2em;font-size:.92rem}
@media (max-width:900px){.menu{display:none}}
@media (max-width:420px){.logo{width:136px;height:40px}.topo .btn{padding:.6em 1em;font-size:.85rem}}

/* ===== abertura ===== */
.hero{position:relative;overflow:hidden;padding-block:56px 84px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(3rem,6.6vw,5.4rem);line-height:.92;letter-spacing:-.045em;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--rosa);z-index:-1;border-radius:4px}
.hero .lead{font-size:1.18rem;color:var(--muted);max-width:34ch;margin:24px 0 32px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero .selos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font:600 .9rem var(--body);color:var(--muted)}
.hero .selos span{display:flex;align-items:center;gap:8px}
.hero .selos svg{width:18px;height:18px;flex:none}

/* mesa com a variedade de produtos */
.mesa{position:relative;aspect-ratio:1;width:100%;max-width:600px;justify-self:center;container-type:inline-size}
.mesa .blob{position:absolute;inset:8% 6%;border-radius:46% 54% 52% 48%/50% 44% 56% 50%;background:var(--menta);overflow:hidden}
.mesa .blob svg{width:100%;height:100%}
.mesa .pc{position:absolute;width:var(--w);transform:rotate(var(--r));animation:flutua 7s ease-in-out infinite}
.mesa .pc:nth-child(odd){animation-delay:-3s}
.mesa svg.pc{height:auto;aspect-ratio:1}
.mesa .tag .txt{font-size:6.2cqi}
.mesa .ret .txt{font-size:5.2cqi}
.mesa .tag .fl{width:62%;height:62%;margin-top:6%}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:900px){
  .hero{padding-block:28px 60px}
  .hero .wrap{grid-template-columns:1fr}
  .mesa{max-width:480px;order:-1}
}

/* faixa */
.faixa{background:var(--tinta);color:#fff;overflow:hidden;padding-block:16px}
.faixa .trilho{display:flex;gap:46px;width:max-content;animation:rola 32s linear infinite;font:800 1.15rem var(--display);letter-spacing:-.01em}
.faixa span{display:flex;align-items:center;gap:46px;white-space:nowrap}
.faixa svg{width:22px;height:22px}
@keyframes rola{to{transform:translateX(-50%)}}

/* seções */
section{padding-block:108px}
.sec-areia{background:var(--areia)}
.cab{display:flex;flex-direction:column;gap:14px;margin-bottom:52px;max-width:660px}
.cab h2,.h2,.marca h2{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.cab p{color:var(--muted);font-size:1.1rem}
@media (max-width:900px){section{padding-block:72px}}

/* a marca */
.marca .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.marca-simbolo{display:flex;align-items:center;justify-content:center;gap:18px}
.marca-simbolo svg{width:44%;aspect-ratio:1;height:auto}
.marca-simbolo .seta{font:800 3rem var(--display);color:var(--coral)}
.marca h2{margin:14px 0 20px}
.txt-grande{font-size:1.2rem;color:var(--muted);max-width:56ch}
.txt-grande strong{color:var(--tinta)}
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.pilares div{background:#fff;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.pilares b{font:800 1.15rem var(--display);letter-spacing:-.01em}
.pilares span{font-size:.92rem;color:var(--muted);line-height:1.4}
@media (max-width:900px){.marca .wrap{grid-template-columns:1fr;gap:36px}.marca-simbolo{max-width:340px;margin:auto}.pilares{grid-template-columns:1fr}}

/* produtos */
.produtos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.produtos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.produtos{grid-template-columns:1fr}}
.prod{background:#fff;border-radius:24px;padding:20px 20px 26px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s}
.prod:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(60,40,20,.12)}
.prod .vitrine{aspect-ratio:1;border-radius:16px;background:var(--creme);display:grid;place-items:center;position:relative;overflow:hidden;--furo:var(--creme)}
.prod .mini{position:absolute}
.prod .furo{position:absolute;width:5%;aspect-ratio:1;border-radius:50%;background:var(--creme)}
.prod h3{font-size:1.4rem;margin-top:6px}
.prod p{color:var(--muted);font-size:.97rem;line-height:1.45}

/* coleções */
.colecoes{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:1080px){.colecoes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.colecoes{grid-template-columns:repeat(2,1fr)}}
.col{background:#fff;border-radius:20px;padding:22px 16px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border-top:6px solid var(--c);container-type:inline-size}
.col .tag{width:78%;margin-bottom:10px;--furo:#fff}
.col .tag .txt{font-size:13cqi}
.col .tag .txt .cur{font-size:1.5em}
.col b{font:800 1.12rem var(--display);letter-spacing:-.01em}
.col span{font-size:.86rem;color:var(--muted);line-height:1.35}

/* como trabalhamos */
.carinho{background:var(--areia)}
.carinho .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.carinho figure{margin:0;position:relative}
.carinho figure img{border-radius:28px;box-shadow:0 30px 60px rgba(60,40,20,.18)}
.carinho .selo{position:absolute;right:-22px;bottom:-26px;width:132px;height:132px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 14px 28px rgba(200,65,79,.35);animation:gira 24s linear infinite}
.carinho .selo svg{width:122px;height:122px}
@keyframes gira{to{rotate:360deg}}
.h2{margin-top:14px}
.lista{display:flex;flex-direction:column;gap:22px;margin-top:32px}
.lista>div{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.lista .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff}
.lista .ic svg{width:30px;height:30px}
.lista h3{font-size:1.2rem;margin-bottom:4px;letter-spacing:-.01em}
.lista p{color:var(--muted);font-size:1rem}
@media (max-width:900px){.carinho .wrap{grid-template-columns:1fr;gap:48px}.carinho .selo{right:10px;width:104px;height:104px}.carinho .selo svg{width:96px;height:96px}}

/* revenda */
.revenda{background:var(--coral-esc);color:#fff;position:relative;overflow:hidden}
.revenda .bg{position:absolute;inset:0;width:100%;height:100%}
.revenda .wrap{position:relative}
.revenda .eyebrow{color:#fff;opacity:.85}
.rev-topo{max-width:760px}
.rev-topo h2{font-size:clamp(2.4rem,5vw,4.2rem);margin:14px 0 18px}
.rev-topo p{font-size:1.18rem;opacity:.95;max-width:52ch}
.vantagens{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:48px 0 56px}
@media (max-width:980px){.vantagens{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.vantagens{grid-template-columns:1fr}}
.vantagens div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:22px}
.vantagens span{font:800 .9rem var(--display);opacity:.8}
.vantagens b{display:block;font:800 1.25rem/1.15 var(--display);letter-spacing:-.01em;margin:10px 0 8px}
.vantagens p{font-size:.95rem;opacity:.92;line-height:1.45}
.rev-form{display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;color:var(--tinta);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px rgba(120,20,30,.3)}
.rev-form figure{margin:0;min-height:100%}
.rev-form figure img{width:100%;height:100%;object-fit:cover}
.rev-form>div{padding:44px 44px 40px}
.rev-form h3{font-size:2rem}
.rev-form>div>p{color:var(--muted);margin:10px 0 24px}
@media (max-width:900px){.rev-form{grid-template-columns:1fr}.rev-form figure{max-height:260px}.rev-form>div{padding:30px 22px}}

/* formulário */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:22px}
.campos .largo{grid-column:1/-1}
@media (max-width:560px){.campos{grid-template-columns:1fr}}
.form label{display:flex;flex-direction:column;gap:6px;font:600 .88rem var(--body)}
.form input,.form select,.form textarea{font:500 1rem var(--body);color:var(--tinta);background:var(--creme);border:1.5px solid var(--line);border-radius:12px;padding:.8em .9em;width:100%;transition:border-color .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--coral);background:#fff}
.form .erro{border-color:var(--coral-esc);background:#fff4f5}
.form textarea{resize:vertical}
.form button[disabled]{opacity:.6;cursor:wait}
.aviso{margin-top:14px;font-weight:600;font-size:.95rem;min-height:1.4em}
.aviso.ok{color:var(--menta-esc)} .aviso.err{color:var(--coral-esc)}

/* varejo (secundário) */
.varejo{padding-block:48px;border-top:1px solid var(--line)}
.varejo .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.varejo p{color:var(--muted)}
.lojas-mini{display:flex;flex-wrap:wrap;gap:10px}
.lojas-mini a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 .92rem var(--body);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:.55em 1.1em;transition:border-color .2s}
.lojas-mini a:hover{border-color:var(--coral)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* rodapé */
.rodape{background:var(--menta);color:#fff;padding-block:80px 40px;position:relative;overflow:hidden}
.rodape .bg{position:absolute;inset:0;width:100%;height:100%}
.rodape .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.rodape .frase{font:800 clamp(2.2rem,5vw,3.6rem)/1 var(--display);letter-spacing:-.03em}
.contatos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contatos a{text-decoration:none;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:.6em 1.2em;overflow-wrap:anywhere}
.contatos a:hover{background:rgba(255,255,255,.25)}
.rodape nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-weight:600;opacity:.9}
.rodape nav a{text-decoration:none}
.rodape nav a:hover{text-decoration:underline}
.rodape .logo{width:220px;height:64px;color:#fff;margin-top:10px}
.rodape small{opacity:.75;font-size:.85rem}

/* aparecer ao rolar (sem suporte, a página aparece completa) */
@supports (animation-timeline:view()){
  .revela{animation:sobe both cubic-bezier(.2,.7,.2,1);animation-timeline:view();animation-range:entry 0% entry 35%}
}
@keyframes sobe{from{opacity:.001;translate:0 30px}}