/* Camada "doce": cores Gôgô em tons de confeitaria, bordas de calda e botões em pílula.
   Usada pela página Marca e como pele da vitrine. */
:root{
 --ameixa:#321044;--ameixa-2:#4a1d63;--texto-2:#5b3a6b;
 --roxo:#a830cc;--roxo-escuro:#8e24b3;--ciano:#00e0f0;--rosa:#f07fb0;
 --lilas:#f1e0fb;--agua:#d4f6fa;--rosinha:#ffdfee;--fundo:#fffafd;
 --raio:28px;--raio-sm:18px;
 --sombra:0 1px 2px rgb(50 16 68 / .06),0 12px 32px -12px rgb(50 16 68 / .18);
 --ease:cubic-bezier(.22,1,.36,1);
 --z-header:20;--z-borda:2;
}
.doce-lilas{--bg:var(--lilas);background:var(--bg)}
.doce-agua{--bg:var(--agua);background:var(--bg)}
.doce-rosinha{--bg:var(--rosinha);background:var(--bg)}

/* Calda que escorre para a próxima seção, na cor da seção atual. */
.calda,.onda-topo{position:relative}
.calda::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:clamp(34px,4vw,56px);background:var(--bg,#fff);-webkit-mask:url(assets/doce/calda.svg) repeat-x 0 0/clamp(360px,40vw,560px) 100%;mask:url(assets/doce/calda.svg) repeat-x 0 0/clamp(360px,40vw,560px) 100%;z-index:var(--z-borda);pointer-events:none}
/* Onda suave no topo, na cor da própria seção, por cima da anterior. */
.onda-topo::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:22px;background:var(--bg,#fff);-webkit-mask:url(assets/doce/onda.svg) repeat-x 0 0/120px 100%;mask:url(assets/doce/onda.svg) repeat-x 0 0/120px 100%;transform:scaleY(-1);z-index:var(--z-borda);pointer-events:none}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;border:2px solid transparent;font:800 16px/1.2 'Nunito Sans',sans-serif;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,box-shadow .25s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.pill-roxo{background:var(--roxo);color:#fff;box-shadow:0 10px 22px -10px rgb(168 48 204 / .7)}
.pill-roxo:hover{background:var(--roxo-escuro)}
.pill-linha{background:#fff;color:var(--roxo-escuro);border-color:currentColor}
.pill-linha:hover{background:var(--lilas)}
.pill-branco{background:#fff;color:var(--ameixa)}
.pill-branco:hover{background:var(--agua)}

.selo{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:#fff;color:var(--roxo-escuro);font-weight:800;font-size:14px;box-shadow:0 0 0 1.5px rgb(168 48 204 / .25)}
.link{background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--roxo-escuro);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.link:hover{color:var(--ameixa)}

@media (prefers-reduced-motion:reduce){.pill,.pill:hover{transition:none;transform:none}}