/* Bloom — "Doceria de Luz": vitrine de loja de doces com cores vivas.
   Base fixa do DNA (Creme Açúcar + Cacau Profundo, Bricolage/DM Sans/Space Mono),
   coleção vibrante: ciano, laranja, chiclete, limão, menta, uva. Site só no claro (a marca vive na claridade). */
:root{
  --creme:#FAF4EC; --creme-2:#F3E9DC; --cacau:#2A1E2E; --cacau-70:rgba(42,30,46,.72);
  --ciano:#00BFE6; --laranja:#FF7A1A; --chiclete:#FF4FA3; --limao:#FFD23F; --menta:#2FD39A; --uva:#7B4DFF;
  --neon:#FFC98A;
  --f-display:"Bricolage Grotesque","Archivo Black","Segoe UI",system-ui,sans-serif;
  --f-body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,Consolas,monospace;
  --r:22px; --r-lg:34px;
  --shadow:0 6px 0 var(--cacau);
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--creme);color:var(--cacau);font:17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.02;letter-spacing:-.02em;text-wrap:balance;margin:0;font-weight:800}
h1{font-size:clamp(2.6rem,8vw,6.2rem)}
h2{font-size:clamp(2rem,5vw,3.6rem)}
h3{font-size:1.35rem;line-height:1.15}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:200;background:var(--limao);padding:8px 12px;border-radius:8px}
:focus-visible{outline:3px solid var(--uva);outline-offset:3px;border-radius:6px}

/* ---------- Toldo listrado (awning) ---------- */
.awning{height:46px;background:repeating-linear-gradient(90deg,var(--ciano) 0 56px,var(--creme) 56px 112px);position:relative}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;
  background:radial-gradient(circle at 28px 0,var(--ciano) 27px,transparent 28px) 0 0/112px 18px repeat-x,
             radial-gradient(circle at 84px 0,var(--creme) 27px,transparent 28px) 0 0/112px 18px repeat-x;
  filter:drop-shadow(0 4px 0 rgba(42,30,46,.12))}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-block:14px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--creme);border:2.5px solid var(--cacau);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 4px 0 var(--cacau)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px;object-fit:contain}
.brand b{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.brand small{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem}
.nav ul a:hover{background:var(--limao)}
.nav ul a[aria-current="page"]{background:var(--cacau);color:var(--creme)}
.menu-btn{display:none;background:var(--limao);border:2.5px solid var(--cacau);border-radius:999px;font:700 .9rem var(--f-body);padding:8px 14px;cursor:pointer;color:var(--cacau)}
@media (max-width:1000px){
  .nav ul{display:none;position:absolute;left:var(--gutter);right:var(--gutter-r);top:calc(100% + 6px);flex-direction:column;background:var(--creme);border:2.5px solid var(--cacau);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
  .nav.open ul{display:flex}
  .menu-btn{display:inline-block}
  .nav .btn-wa{display:none}
}

/* ---------- Botões "bala" ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1.02rem/1 var(--f-body);text-decoration:none;color:var(--cacau);background:var(--laranja);border:2.5px solid var(--cacau);border-radius:999px;padding:15px 24px;box-shadow:0 5px 0 var(--cacau);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--cacau)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cacau)}
.btn.alt{background:var(--creme)}
.btn.ciano{background:var(--ciano)}
.btn-wa{padding:10px 16px;background:var(--menta);font-size:.92rem;box-shadow:0 3px 0 var(--cacau)}
.btn svg{width:20px;height:20px;flex:none}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:48px 90px;overflow:hidden}
.sprinkles{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
   radial-gradient(ellipse 4px 11px at 20% 30%,var(--chiclete) 98%,transparent),
   radial-gradient(ellipse 11px 4px at 70% 18%,var(--ciano) 98%,transparent),
   radial-gradient(ellipse 4px 11px at 85% 70%,var(--limao) 98%,transparent),
   radial-gradient(ellipse 11px 4px at 40% 80%,var(--menta) 98%,transparent),
   radial-gradient(ellipse 4px 11px at 55% 45%,var(--uva) 98%,transparent),
   radial-gradient(ellipse 11px 4px at 8% 65%,var(--laranja) 98%,transparent);
  background-size:340px 300px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-grid>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--cacau);color:var(--creme);border-radius:999px;padding:7px 14px;margin-bottom:22px}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 3px rgba(255,201,138,.35),0 0 14px var(--neon)}
.hero h1 .hl{position:relative;white-space:nowrap;z-index:0}
.hero h1 .hl::before{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.06em;height:.42em;background:var(--limao);z-index:-1;border-radius:.2em;transform:rotate(-1.2deg)}
.hero h1 .c1{color:var(--chiclete)} .hero h1 .c2{color:var(--ciano)}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:34ch;margin-top:22px;color:var(--cacau-70)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--cacau);border-radius:999px;padding:6px 12px;background:var(--creme);font-weight:600;font-size:.88rem}
.chip b{font-family:var(--f-mono);font-size:.85rem}

/* Potes de foto */
.jars{position:relative;height:560px}
.jar{position:absolute;border:3px solid var(--cacau);border-radius:var(--r-lg);overflow:hidden;box-shadow:8px 8px 0 var(--cacau);background:var(--creme-2)}
.jar img{width:100%;height:100%;object-fit:cover}
.jar figcaption{position:absolute;left:12px;bottom:12px;background:var(--creme);border:2px solid var(--cacau);border-radius:999px;padding:4px 10px;font:700 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.jar.j1{width:62%;height:62%;left:0;top:4%;transform:rotate(-4deg);border-color:var(--cacau);outline:10px solid var(--chiclete)}
.jar.j2{width:52%;height:50%;right:0;top:0;transform:rotate(5deg);outline:10px solid var(--ciano)}
.jar.j3{width:56%;height:48%;right:6%;bottom:0;transform:rotate(-2deg);outline:10px solid var(--laranja)}
.sticker{position:absolute;left:4%;bottom:6%;width:132px;height:132px;border-radius:50%;background:var(--limao);border:3px solid var(--cacau);display:grid;place-items:center;text-align:center;font:800 1.05rem/1.05 var(--f-display);transform:rotate(-12deg);box-shadow:4px 4px 0 var(--cacau);animation:wobble 6s ease-in-out infinite}
.sticker span{display:block;font:700 .62rem var(--f-mono);letter-spacing:.08em;margin-top:4px}
@keyframes wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-4deg) scale(1.04)}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.jars{height:420px;max-width:520px;width:100%;margin:10px auto 0}.sticker{width:108px;height:108px;font-size:.9rem}}

/* ---------- Faixa corrida ---------- */
.ticker{background:var(--uva);color:var(--creme);border-block:3px solid var(--cacau);overflow:hidden;transform:rotate(-1.2deg);margin-block:-10px 10px;position:relative;z-index:2}
.ticker div{display:flex;gap:34px;padding:14px 0;width:max-content;animation:roll 32s linear infinite;font:800 1.35rem var(--f-display);text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"✦";margin-left:34px;color:var(--limao)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- Seções ---------- */
section{padding-block:84px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.sec-head p{max-width:46ch;color:var(--cacau-70);font-size:1.08rem}
.tag{display:inline-block;font:700 .78rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:2px solid var(--cacau);border-radius:999px;margin-bottom:16px}

/* Prateleira de segmentos (potes) */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shelf>a{min-width:0}
@media (min-width:561px){
  .shelf.feature>a:first-child{grid-column:span 2;flex-direction:row}
  .shelf.feature>a:first-child .ph{aspect-ratio:auto;flex:1.3;border-bottom:0;border-right:3px solid var(--cacau);min-height:260px}
  .shelf.feature>a:first-child .bd{flex:1;justify-content:center;padding:26px}
  .shelf.feature>a:first-child h3{font-size:2rem}
}
@media (max-width:900px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shelf{grid-template-columns:1fr}}
.pot{position:relative;display:flex;flex-direction:column;text-decoration:none;border:3px solid var(--cacau);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;background:var(--c)}
.pot:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 var(--cacau)}
.pot .ph{aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--cacau);background:var(--creme-2)}
.pot .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pot:hover .ph img{transform:scale(1.06)}
.pot .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.pot .bd p{font-size:.95rem}
.pot .go{font:700 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.c-chiclete{--c:var(--chiclete)} .c-laranja{--c:var(--laranja)} .c-ciano{--c:var(--ciano)} .c-uva{--c:var(--uva);color:var(--creme)} .c-limao{--c:var(--limao)} .c-menta{--c:var(--menta)}
.c-uva .pot,.pot.c-uva{color:var(--creme)}

/* Bloco do logo */
.logo-band{background:var(--laranja);border-block:3px solid var(--cacau)}
.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.logo-grid>*{min-width:0}
@media (max-width:900px){.logo-grid{grid-template-columns:1fr}}
.big-quote{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,9vw,7rem);line-height:.92;letter-spacing:-.04em}
.big-quote em{font-style:normal;color:var(--creme);-webkit-text-stroke:3px var(--cacau);paint-order:stroke fill}
.modes{display:grid;gap:14px;margin-top:26px}
.mode{background:var(--creme);border:2.5px solid var(--cacau);border-radius:var(--r);padding:16px 18px;box-shadow:0 4px 0 var(--cacau)}
.mode b{font-family:var(--f-display);font-size:1.15rem}
.mode p{font-size:.95rem;margin-top:4px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo figure{margin:0;border:3px solid var(--cacau);border-radius:var(--r);overflow:hidden;background:var(--creme);box-shadow:var(--shadow)}
.duo figure:nth-child(2){transform:translateY(34px) rotate(2deg)}
.duo img{aspect-ratio:3/4;object-fit:cover;width:100%}

/* Galeria */
.gallery{columns:3 260px;column-gap:18px}
.gallery figure{break-inside:avoid;margin:0 0 18px;border:3px solid var(--cacau);border-radius:var(--r);overflow:hidden;position:relative;background:var(--creme-2);box-shadow:0 5px 0 var(--cacau)}
.gallery figure:nth-child(6n+1){outline:7px solid var(--chiclete)}
.gallery figure:nth-child(6n+2){outline:7px solid var(--ciano)}
.gallery figure:nth-child(6n+3){outline:7px solid var(--limao)}
.gallery figure:nth-child(6n+4){outline:7px solid var(--menta)}
.gallery figure:nth-child(6n+5){outline:7px solid var(--laranja)}
.gallery figure:nth-child(6n+6){outline:7px solid var(--uva)}
.gallery figure{outline-offset:-10px}
.gallery figcaption{position:absolute;left:10px;top:10px;background:var(--creme);border:2px solid var(--cacau);border-radius:999px;padding:3px 9px;font:700 .68rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}

/* Etapas (é uma sequência real) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps>li{min-width:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps{list-style:none;padding:0;margin:0}
.steps li{position:relative;background:var(--creme);border:2.5px solid var(--cacau);border-radius:var(--r);padding:58px 20px 22px;box-shadow:var(--shadow)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:18px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:800 1.6rem var(--f-display);border:2.5px solid var(--cacau);background:var(--sc)}
.steps li:nth-child(1){--sc:var(--chiclete)} .steps li:nth-child(2){--sc:var(--ciano)} .steps li:nth-child(3){--sc:var(--limao)} .steps li:nth-child(4){--sc:var(--menta)}
.steps h3{margin-bottom:6px}
.steps p{font-size:.95rem;color:var(--cacau-70)}

/* Depoimentos */
.bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.bubbles>figure{min-width:0}
@media (max-width:760px){.bubbles{grid-template-columns:1fr}}
.bubble{margin:0;position:relative;background:var(--bc);border:3px solid var(--cacau);border-radius:var(--r-lg);padding:26px 26px 22px;box-shadow:var(--shadow)}
.bubble::after{content:"";position:absolute;left:36px;bottom:-20px;width:28px;height:28px;background:var(--bc);border-right:3px solid var(--cacau);border-bottom:3px solid var(--cacau);transform:rotate(45deg)}
.bubble blockquote{margin:0;font-size:1.08rem;font-weight:500}
.bubble figcaption{margin-top:14px;font-weight:700}
.bubble figcaption span{display:block;font:400 .78rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.bubble:nth-child(1){--bc:var(--limao)} .bubble:nth-child(2){--bc:var(--ciano)} .bubble:nth-child(3){--bc:var(--chiclete)} .bubble:nth-child(4){--bc:var(--menta)}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--creme);border:2.5px solid var(--cacau);border-radius:var(--r);box-shadow:0 4px 0 var(--cacau)}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font:700 1.08rem var(--f-body);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--limao);border:2px solid var(--cacau);display:grid;place-items:center;font:800 1.2rem var(--f-display)}
.faq details[open] summary::after{content:"–";background:var(--chiclete)}
.faq details p{padding:0 20px 20px;color:var(--cacau-70)}

/* Ideias (lista de segmento) */
.ideas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0 0}
.ideas li{background:var(--creme);border:2px solid var(--cacau);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.95rem}

/* Página de segmento: topo */
.seg-hero{background:var(--c);border-bottom:3px solid var(--cacau);padding-block:40px 64px;position:relative;overflow:hidden}
.seg-hero .sprinkles{opacity:.55}
.seg-hero .wrap{position:relative}
.seg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.seg-grid>*{min-width:0}
@media (max-width:900px){.seg-grid{grid-template-columns:1fr}}
.seg-hero h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.seg-hero .hook{font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.15;margin-top:18px;max-width:28ch}
.seg-hero .lede{color:inherit;opacity:.85}
.seg-hero figure{margin:0;border:3px solid var(--cacau);border-radius:var(--r-lg);overflow:hidden;box-shadow:10px 10px 0 var(--cacau);transform:rotate(2deg);background:var(--creme)}
.seg-hero figure img{aspect-ratio:4/3;object-fit:cover;width:100%}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px;font:700 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{text-decoration:none}
.c-uva.seg-hero{color:var(--creme)}

/* ---------- Orçamento ---------- */
.order{background:var(--ciano);border-block:3px solid var(--cacau);position:relative;overflow:hidden}
.order-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;position:relative}
.order-grid>*{min-width:0}
@media (max-width:900px){.order-grid{grid-template-columns:1fr}}
.ticket{background:var(--creme);border:3px solid var(--cacau);border-radius:var(--r-lg);padding:28px;box-shadow:10px 10px 0 var(--cacau);position:relative}
.ticket::before{content:"";position:absolute;left:-3px;right:-3px;top:-14px;height:14px;background:radial-gradient(circle at 12px 14px,transparent 9px,var(--creme) 10px) 0 0/24px 14px repeat-x}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:700 .74rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.field input,.field select,.field textarea{font:500 1rem var(--f-body);color:var(--cacau);background:#fff;border:2.5px solid var(--cacau);border-radius:14px;padding:12px 14px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 4px var(--limao)}
.form .note{font-size:.85rem;color:var(--cacau-70)}
.perks{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--cacau);color:var(--creme);padding-block:64px 40px;position:relative;overflow:hidden}
.site-footer .sprinkles{opacity:.35}
.foot-grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot-grid>*{min-width:0}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}
.site-footer h2{font-size:clamp(2.2rem,6vw,4rem);color:var(--neon);text-shadow:0 0 18px rgba(255,201,138,.55)}
.site-footer ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--limao)}
.site-footer .mono{opacity:.7}
.legal{position:relative;margin-top:44px;padding-top:20px;border-top:1px solid rgba(250,244,236,.2);font-size:.85rem;opacity:.75;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ---------- Configurador "Monte seu neon" (veio do conceito C) ---------- */
.cfg-sec{padding-block:70px 84px}
.studio{--tube:#FF4FA3;display:grid;grid-template-columns:1.55fr 1fr;border:3px solid var(--cacau);border-radius:var(--r-lg);overflow:hidden;box-shadow:10px 10px 0 var(--cacau);background:var(--creme)}
.studio>*{min-width:0}
@media (max-width:920px){.studio{grid-template-columns:1fr}}
.wall{position:relative;min-height:420px;display:grid;place-items:center;padding:56px 20px 70px;border-right:3px solid var(--cacau);overflow:hidden;transition:background .4s}
@media (max-width:920px){.wall{border-right:0;border-bottom:3px solid var(--cacau);min-height:300px}}
.wall[data-w="jardim"]{background:radial-gradient(circle at 20% 20%,#3f7d3a 0 2px,transparent 3px) 0 0/14px 14px,radial-gradient(circle at 70% 60%,#2f6a2c 0 2px,transparent 3px) 0 0/11px 11px,#2a5a28}
.wall[data-w="tijolo"]{background:linear-gradient(#0000 92%,#5a2c22 0) 0 0/100% 34px,linear-gradient(90deg,#0000 96%,#5a2c22 0) 0 0/70px 68px,linear-gradient(90deg,#0000 96%,#5a2c22 0) 35px 34px/70px 68px,#8b4433}
.wall[data-w="pessego"]{background:#FDCFC3}
.wall[data-w="lavanda"]{background:#D1A5E8}
.wall[data-w="noite"]{background:radial-gradient(ellipse at 50% 40%,#3a2a40,#2A1E2E 70%)}
.neon-txt{font-size:var(--fs,64px);color:#fff;text-align:center;line-height:1.1;max-width:100%;overflow-wrap:anywhere;transition:text-shadow .3s,color .3s,font-size .3s;
  text-shadow:0 0 2px #fff,0 0 6px var(--tube),0 0 14px var(--tube),0 0 28px var(--tube),0 0 52px var(--tube),0 0 90px var(--tube)}
.neon-txt[data-f="script"]{font-family:"Yellowtail",cursive}
.neon-txt[data-f="grotesca"]{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}
.neon-txt[data-f="retro"]{font-family:"Monoton",cursive;font-weight:400}
.wall.off .neon-txt{color:color-mix(in srgb,var(--tube) 45%,#d9d4cf);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.ruler{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--creme);border:2px solid var(--cacau);border-radius:999px;padding:5px 12px;font:700 .72rem var(--f-mono);letter-spacing:.08em;white-space:nowrap}
.ruler i{display:block;width:var(--rw,120px);height:2px;background:var(--cacau);position:relative;transition:width .3s}
.ruler i::before,.ruler i::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--cacau)}.ruler i::before{left:0}.ruler i::after{right:0}
.switch{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:8px;background:var(--creme);border:2px solid var(--cacau);border-radius:999px;padding:5px 6px 5px 12px;cursor:pointer;font:700 .72rem var(--f-mono);letter-spacing:.08em;color:var(--cacau)}
.switch b{width:38px;height:22px;border-radius:999px;background:var(--menta);border:2px solid var(--cacau);position:relative;transition:background .2s}
.switch b::after{content:"";position:absolute;top:2px;left:17px;width:14px;height:14px;border-radius:50%;background:var(--cacau);transition:left .2s}
.wall.off .switch b{background:#ccc}.wall.off .switch b::after{left:2px}
.cfg-panel{padding:24px;display:flex;flex-direction:column;gap:18px}
.ctrl label,.ctrl .lbl{display:block;font:700 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.ctrl input[type=text]{width:100%;font:700 1.15rem var(--f-body);padding:12px 14px;border:2.5px solid var(--cacau);border-radius:14px;background:#fff;color:var(--cacau)}
.ctrl input[type=text]:focus{outline:none;box-shadow:0 0 0 4px var(--limao)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font:700 .9rem var(--f-body);border:2.5px solid var(--cacau);background:var(--creme);color:var(--cacau);border-radius:999px;padding:8px 14px;cursor:pointer}
.opt[aria-pressed="true"]{background:var(--cacau);color:var(--creme)}
.sw{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--cacau);cursor:pointer;background:var(--c)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--creme),0 0 0 6px var(--cacau)}
.cfg-panel .btn{justify-content:center}
.disc{font-size:.8rem;color:var(--cacau-70)}
.idea-jars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.idea-jars>button{min-width:0}
@media (max-width:860px){.idea-jars{grid-template-columns:repeat(2,1fr)}}
.ijar{position:relative;border:3px solid var(--cacau);border-radius:26px 26px 32px 32px;padding:40px 12px 14px;background:var(--c);box-shadow:0 5px 0 var(--cacau);cursor:pointer;text-align:center;color:var(--cacau);font:inherit;transition:transform .2s}
.ijar::before{content:"";position:absolute;left:18%;right:18%;top:-3px;height:20px;background:var(--cacau);border-radius:0 0 10px 10px}
.ijar:hover{transform:translateY(-4px) rotate(-1deg)}
.ijar .mini{display:block;font-size:1.5rem;line-height:1.1;color:#fff;text-shadow:0 0 6px var(--g),0 0 16px var(--g),0 0 30px var(--g);background:var(--cacau);border-radius:14px;padding:16px 8px;border:2px solid var(--cacau)}
.ijar small{display:block;margin-top:10px;font:700 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Antes × depois (veio do conceito B) ---------- */
.ba{background:var(--uva);color:var(--creme);border-block:3px solid var(--cacau)}
.ba-grid{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:center}
.ba-grid>*{min-width:0}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr}}
.ba h2 span{display:block;color:var(--limao)}
.compare{position:relative;border:3px solid var(--cacau);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:#222;box-shadow:10px 10px 0 var(--cacau);--pos:52%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .off{filter:grayscale(1) brightness(.62) contrast(.85);clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;background:var(--creme);transform:translateX(-50%);pointer-events:none}
.compare .bar::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--limao);color:var(--cacau);border:3px solid var(--cacau);display:grid;place-items:center;font-weight:800}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare .lb{position:absolute;top:14px;padding:5px 11px;border-radius:999px;background:var(--creme);color:var(--cacau);border:2px solid var(--cacau);font:700 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.compare .lb.l{left:14px}.compare .lb.r{right:14px;background:var(--neon)}
.ba .note{margin-top:14px;font-size:.85rem;opacity:.8}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:max(18px, env(safe-area-inset-right, 0px));bottom:max(18px, env(safe-area-inset-bottom, 0px));z-index:60;width:60px;height:60px;border-radius:50%;background:var(--menta);border:3px solid var(--cacau);box-shadow:0 5px 0 var(--cacau);display:grid;place-items:center}
.wa-float svg{width:30px;height:30px}

/* Revelação suave: começa visível (sem esconder conteúdo) */
.pop{animation:pop .7s cubic-bezier(.2,.9,.3,1.3) both}
.pop.d1{animation-delay:.08s}.pop.d2{animation-delay:.16s}.pop.d3{animation-delay:.24s}
@keyframes pop{from{transform:translateY(14px) scale(.98)}to{transform:none}}