/* Destaques da home (revisão 17): faixa menor, um banner por vez, cada um com cor e fundo próprios,
   como os banners da Sodiê. O cabeçalho acompanha a cor do banner (--banner-cor). */
:root{--banner-cor:#bfeef7}
.vitrine-v2 .site-header{background:var(--banner-cor);transition:background-color .6s var(--ease)}
body[data-banner-tema="claro"] .site-header nav a{color:var(--ameixa)}
body[data-banner-tema="claro"] .site-header nav a:hover{color:var(--roxo-escuro)}
body[data-banner-tema="claro"] .site-header .btn.bag{box-shadow:0 0 0 1.5px rgb(50 16 68 / .12)}

.banners img{height:auto;max-width:none}
.banners{position:relative;background:var(--banner-cor);transition:background-color .6s var(--ease);overflow:hidden}
.banner{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(16px,3vw,48px);height:clamp(360px,30vw,430px);padding:0 max(24px,calc((100vw - 1240px)/2));color:var(--ameixa);isolation:isolate;animation:banner-entra .7s var(--ease)}
.banner[hidden]{display:none}
@keyframes banner-entra{from{transform:translateX(12px)}to{transform:none}}
.b-copy{position:relative;z-index:3;max-width:520px}
.b-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgb(255 255 255 / .7);font-weight:800;font-size:13px;color:var(--roxo-escuro)}
.banner h1,.banner h2{font:600 clamp(36px,4.4vw,62px)/1 'Fredoka',sans-serif;letter-spacing:-.02em;margin:14px 0 12px;color:var(--ameixa)}
.banner h1 span,.banner h2 span{display:block;color:var(--roxo)}
.b-copy>p:not(.b-kicker){font-size:clamp(15px,1.3vw,18px);line-height:1.5;max-width:40ch;color:var(--texto-2)}
.b-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.b-acoes .pill{min-height:50px}
.b-link{font-weight:800;color:var(--ameixa);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.b-nota{font-size:12px;font-weight:700;color:var(--texto-2)}
.b-arte{position:relative;height:100%;z-index:2}
.b-bolo{position:absolute;filter:drop-shadow(0 22px 22px rgb(50 16 68 / .28))}
.b-balao{position:absolute;filter:drop-shadow(0 12px 14px rgb(50 16 68 / .25));animation:enfeite-flutua 6.5s ease-in-out infinite}
.b-tag{position:absolute;z-index:4;display:inline-flex;align-items:center;border-radius:999px;background:#fff;box-shadow:0 10px 18px -10px rgb(50 16 68 / .5);font:800 14px/1 'Nunito Sans',sans-serif;color:var(--ameixa);overflow:hidden;white-space:nowrap}
.b-tag b{background:var(--ciano);padding:9px 10px;font:600 15px/1 'Fredoka',sans-serif}
.b-tag em{font-style:normal;background:var(--ameixa);color:#fff;padding:9px 12px;margin-left:10px}
.b-tag{padding-right:0}
.b-tag:not(:has(em)){padding-right:14px}
.b-tag b+*{margin-left:10px}

/* 1 · Nuvens */
.b-nuvens{background:linear-gradient(180deg,#8fdcef 0%,#c4f0f8 55%,#e9fbfd 100%)}
.b-fundo{position:absolute;inset:0;z-index:0;pointer-events:none}
.bn{position:absolute;height:auto;animation:nuvem-deriva 14s ease-in-out infinite alternate}
.bn-1{width:min(26vw,360px);left:-4%;bottom:-14%}
.bn-2{width:min(15vw,200px);left:36%;top:8%;animation-duration:11s;animation-direction:alternate-reverse}
.bn-3{width:min(20vw,280px);right:-3%;top:-10%;opacity:.95}
.bn-4{width:min(22vw,300px);right:16%;bottom:-18%;opacity:.95;animation-duration:12s}
.b-bolo-1{width:min(78%,520px);right:6%;bottom:6%}
.b-nuvens .b-trio{width:clamp(70px,8vw,110px);right:2%;top:6%}
.b-nuvens .b-tag{right:16%;bottom:6%}

/* 2 · Mesa */
.b-mesa{background:#f1ebf7 url(assets/banner/marmore.webp) center/cover}
.b-mesa::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(248 245 251 / .92) 0%,rgb(248 245 251 / .55) 42%,transparent 70%);z-index:1}
.b-mesa .b-kicker{background:var(--lilas)}
.b-arte-mesa{display:flex;align-items:flex-end;justify-content:center;gap:0;padding-bottom:6%}
.b-mesa-item{position:relative;margin:0 -2%;flex:1}
.b-mesa-item img{width:100%;filter:drop-shadow(0 18px 18px rgb(50 16 68 / .25))}
.b-mesa-item.m-2{flex:.82;z-index:2;margin-bottom:6%}
.b-mesa-item .b-tag{left:50%;transform:translateX(-50%);bottom:-6px;font-size:12px}
.b-mesa-item .b-tag b{font-size:13px;padding:7px 8px}
.b-mesa-item .b-tag em{padding:7px 9px}

/* 3 · Um bolo só */
.b-destaque{background:radial-gradient(60% 90% at 70% 55%,#9b3fbf 0%,#5b1a7a 55%,#3a0f52 100%);color:#fff}
.b-destaque h2{color:#fff}
.b-destaque h2 span{color:var(--ciano)}
.b-destaque .b-copy>p:not(.b-kicker){color:#ecdcf5}
.b-destaque .b-kicker{background:rgb(255 255 255 / .16);color:#fff}
.b-preco{font:600 30px/1 'Fredoka',sans-serif;color:#fff}
.b-bolo-solo{width:min(62%,400px);left:50%;transform:translateX(-50%);bottom:4%;filter:drop-shadow(0 30px 28px rgb(10 0 20 / .55))}
.b-destaque .b-arte::before{content:"";position:absolute;left:12%;right:12%;bottom:2%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .22),transparent)}
.b-destaque .b-tag{right:6%;top:14%}

/* 4 · WhatsApp */
.b-whats{background:linear-gradient(120deg,#d4f6fa 0%,#e7fbf0 100%)}
.b-wa-ico{width:18px;height:18px;border-radius:50%;background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-.9 1.1-.3.2-.6.1a8.2 8.2 0 0 1-4-3.5c-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6a1.2 1.2 0 0 0-.8.4 3.6 3.6 0 0 0-1.1 2.6 6.2 6.2 0 0 0 1.3 3.3 14 14 0 0 0 5.4 4.8c2 .9 2.8.9 3.8.8a3.2 3.2 0 0 0 2.1-1.5 2.6 2.6 0 0 0 .2-1.5c-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E") center/80% no-repeat}
.pill-whats{background:#1fa855;color:#fff;box-shadow:0 10px 22px -10px rgb(31 168 85 / .7)}
.pill-whats:hover{background:#178a45}
.b-arte-chat{display:grid;place-items:center}
.celular{position:relative;width:min(300px,80%);height:94%;margin-top:6%;border-radius:36px 36px 0 0;background:#fff;border:8px solid var(--ameixa);border-bottom:0;box-shadow:0 30px 50px -24px rgb(50 16 68 / .5);overflow:hidden;display:flex;flex-direction:column}
.cel-topo{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#075e54;color:#fff}
.cel-topo img{width:32px;height:32px;border-radius:50%;background:#fff}
.cel-topo b{display:block;font-size:14px}
.cel-topo small{font-size:11px;opacity:.85}
.cel-chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px;background:#ece5dd;font-size:13px;line-height:1.35}
.msg{max-width:84%;padding:8px 10px;border-radius:12px;box-shadow:0 1px 1px rgb(0 0 0 / .08);animation:msg-entra .5s var(--ease) backwards}
.msg.eu{align-self:flex-end;background:#dcf8c6;border-top-right-radius:4px}
.msg.ela{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.msg:nth-child(2){animation-delay:.6s}.msg:nth-child(3){animation-delay:1.3s}.msg:nth-child(4){animation-delay:1.9s}
@keyframes msg-entra{from{transform:translateY(8px) scale(.96)}}
.b-conversa{width:clamp(64px,7vw,96px);right:4%;top:10%}

/* 5 · Clube */
.b-clube{background:linear-gradient(135deg,#ffd7ea 0%,#f1e0fb 100%)}
.b-clube .b-kicker{background:#fff}
.b-arte-clube{display:grid;place-items:center}
.cartao-clube{position:relative;z-index:2;background:#fff;border-radius:26px;padding:22px 24px;box-shadow:0 24px 40px -22px rgb(50 16 68 / .5);transform:rotate(-4deg)}
.cartao-clube b{font:600 22px/1 'Fredoka',sans-serif}
.cartao-clube div{display:grid;grid-template-columns:repeat(6,46px);gap:8px;margin-top:14px}
.cartao-clube span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:2px dashed #c9a8e0;font:600 16px 'Fredoka',sans-serif;color:var(--texto-2)}
.cartao-clube span:has(img){border:0;background:var(--rosinha)}
.cartao-clube img{width:80%}
.b-presente{width:clamp(80px,9vw,120px);left:6%;bottom:8%}
.b-balao-coracao{width:clamp(60px,6vw,86px);right:8%;top:6%;animation-delay:-2s}
.b-selo{width:clamp(56px,5.5vw,80px);right:14%;bottom:10%;animation-delay:-4s}

/* Controles */
.b-controles{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:2px 6px;border-radius:999px;background:rgb(255 255 255 / .9);box-shadow:0 8px 18px -10px rgb(50 16 68 / .5)}
.b-controles button{width:40px;height:40px;border:0;background:none;color:var(--ameixa);display:grid;place-items:center;font-size:18px;cursor:pointer;border-radius:50%}
.b-controles button span{width:8px;height:8px;border-radius:9px;background:#c7b6d3;transition:width .3s var(--ease),background-color .3s}
.b-controles button[aria-pressed=true] span{width:24px;background:var(--roxo)}
.b-controles .b-pausa{font-size:13px}

@media (max-width:860px){
 .banner{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:680px;padding:22px 20px 70px;gap:4px;align-items:start}
 .b-arte{height:100%;min-height:240px}
 .b-copy{max-width:none}
 .banner h1,.banner h2{font-size:clamp(32px,9vw,44px)}
 .b-bolo-1{width:min(76%,340px);right:12%;bottom:0}
 .b-nuvens .b-tag{right:4%;bottom:4%}
 .b-arte-mesa{padding-bottom:16px}
 .b-mesa::before{background:linear-gradient(180deg,rgb(248 245 251 / .92) 0%,rgb(248 245 251 / .5) 55%,transparent 80%)}
 .b-bolo-solo{width:min(78%,340px)}
 .celular{width:min(260px,74%);height:250px;margin-top:10px}
 .cartao-clube div{grid-template-columns:repeat(6,34px);gap:6px}
 .cartao-clube span{width:34px;height:34px;font-size:13px}
 .bn-2,.bn-4{display:none}
 .bn-1{width:52vw;bottom:-6%}
 .bn-3{width:40vw}
}
@media (max-width:420px){
 .b-mesa-item .b-tag em{display:none}
 .b-mesa-item .b-tag{font-size:11px}
 .b-acoes .pill{width:100%}
}
@media (prefers-reduced-motion:reduce){.banner,.msg{animation:none;opacity:1;transform:none}.bn,.b-balao{animation:none}}