/* =========================================================================
   Kit Festa PB — site público
   Estrutura baseada em .agents/DESIGN.md (referência Food Website Design).
   Paleta vinda da logomarca real da Kit Festa PB.
   Tokens e regras completas em .agents/docs/DESIGN.md
   ========================================================================= */

/* ------------------------------------------------------------- fontes --- */
/* Variáveis, subset latin. Português inteiro cabe em U+0000-00FF. */
@font-face {
    font-family: 'Fredoka';
    src: url('/assets/fonts/fredoka-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Marca (extraída da logomarca) --- */
    --rosa:          #F06277;   /* primária: CTA, destaques, ícones */
    --rosa-escuro:   #D64A61;   /* hover do CTA */
    --rosa-profundo: #A8324A;   /* texto rosa sobre fundo claro (contraste AA) */
    --rosa-claro:    #F9C9D1;
    --blush:         #FDEEF0;   /* fundo de seção secundária */
    --chocolate:     #4A2A18;   /* títulos e texto forte */
    --chocolate-medio:#7A5540;
    --creme:         #FFFCF5;   /* fundo base da página */
    --manteiga:      #FFD84D;   /* blocos de alto impacto */
    --manteiga-claro:#FFF1BE;

    /* --- Neutros --- */
    --tinta:       #38241A;
    --tinta-suave: #7A6157;
    --linha:       #EFE3D8;
    --branco:      #FFFFFF;
    --whatsapp:    #25D366;
    --whatsapp-esc:#1EB456;

    /* --- Tipografia (nenhuma serifada) --- */
    --fonte-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
    --fonte-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    --t-lg:   clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
    --t-2xl:  clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
    --t-3xl:  clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);

    /* --- Espaço --- */
    --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
    --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 88px;

    /* --- Raio: visual "soft/pill" da referência --- */
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   24px;
    --r-xl:   28px;
    --r-2xl:  36px;
    --r-full: 999px;

    --s-1: 0 1px 2px rgba(74,42,24,.06);
    --s-2: 0 6px 20px rgba(74,42,24,.08);
    --s-3: 0 16px 40px rgba(74,42,24,.12);
    --s-rosa: 0 8px 22px rgba(240,98,119,.32);

    --tempo-rapido: 140ms;
    --tempo-base:   240ms;
    --curva: cubic-bezier(.22,.61,.36,1);

    --container: 1200px;
    --gutter: clamp(16px, 5vw, 32px);

    /* Padrão decorativo dos blocos coloridos (rabiscos de confeitaria). */
    --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M12 30c4-5 8-5 12 0s8 5 12 0'/%3E%3Ccircle cx='90' cy='24' r='7'/%3E%3Cpath d='M90 17c1-4 3-6 6-6'/%3E%3Cpath d='M66 70c3-4 6-4 9 0s6 4 9 0'/%3E%3Cpath d='M20 88h22v14H20z'/%3E%3Cpath d='M20 88c3-4 6-4 9 0s7 4 11 0'/%3E%3Ccircle cx='102' cy='96' r='5'/%3E%3Cpath d='M52 18v10M47 23h10'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display declarado em classe.
   Sem isto, elementos como o overlay de carregamento e a barra de ações em
   massa ficam permanentemente visíveis, porque `.classe { display: flex }`
   tem mais peso que a regra padrão do navegador para [hidden]. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte-ui);
    font-size: var(--t-base);
    line-height: 1.55;
    color: var(--tinta);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--fonte-display);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--chocolate);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--rosa);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.pular {
    position: absolute; left: var(--e-4); top: -100px; z-index: 999;
    background: var(--rosa); color: #fff;
    padding: var(--e-3) var(--e-5);
    border-radius: var(--r-full); font-weight: 600;
    transition: top var(--tempo-base) var(--curva);
}
.pular:focus { top: var(--e-4); }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- botões -- */
.botao {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--e-2);
    min-height: 46px;
    padding: var(--e-3) var(--e-5);
    border: 2px solid transparent;
    border-radius: var(--r-full);
    font-family: var(--fonte-ui);
    font-size: .95rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: transform var(--tempo-rapido) var(--curva),
                box-shadow var(--tempo-base) var(--curva),
                background-color var(--tempo-rapido) var(--curva),
                color var(--tempo-rapido) var(--curva);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao--grande { min-height: 54px; padding-inline: var(--e-6); font-size: var(--t-md); }

.botao--primario { background: var(--rosa); color: #fff; box-shadow: var(--s-rosa); }
.botao--primario:hover { background: var(--rosa-escuro); }

.botao--contorno { background: transparent; color: var(--chocolate); border-color: var(--chocolate); }
.botao--contorno:hover { background: var(--chocolate); color: var(--creme); }

.botao--claro { background: var(--branco); color: var(--chocolate); box-shadow: var(--s-1); }
.botao--claro:hover { background: var(--manteiga-claro); }

.botao--zap { background: var(--whatsapp); color: #fff; }
.botao--zap:hover { background: var(--whatsapp-esc); }

/* ------------------------------------------------------------- cabeçalho -- */
.cabecalho {
    position: sticky; top: 0; z-index: 50;
    padding-block: var(--e-3);
    background: linear-gradient(var(--creme) 62%, rgba(255,252,245,0));
}

/* Barra em cápsula flutuante — como na referência. */
.cabecalho__barra {
    display: flex; align-items: center; gap: var(--e-4);
    min-height: 64px;
    padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-full);
    box-shadow: var(--s-2);
}

.marca { display: block; margin-right: auto; flex: none; }
.marca img { width: 132px; height: auto; }

.cabecalho__menu {
    display: grid; place-items: center; position: relative;
    width: 44px; height: 44px;
    background: var(--blush); border: 0; border-radius: 50%;
    cursor: pointer; color: var(--chocolate);
}
.hamburguer, .hamburguer::before, .hamburguer::after {
    display: block; width: 18px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--tempo-base) var(--curva), opacity var(--tempo-rapido);
}
.hamburguer::before, .hamburguer::after { content: ""; position: absolute; }
.hamburguer::before { transform: translateY(-6px); }
.hamburguer::after  { transform: translateY(6px); }

[aria-expanded="true"] .hamburguer { background: transparent; }
[aria-expanded="true"] .hamburguer::before { transform: rotate(45deg); }
[aria-expanded="true"] .hamburguer::after  { transform: rotate(-45deg); }

.navegacao {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
    display: grid; gap: var(--e-1);
    padding: var(--e-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-3);
    transform: translateY(-10px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--tempo-base) var(--curva),
                transform var(--tempo-base) var(--curva),
                visibility var(--tempo-base);
}
.navegacao.aberto { opacity: 1; visibility: visible; transform: none; }

.navegacao ul { display: grid; gap: var(--e-1); }
.navegacao ul a {
    display: block; padding: var(--e-3);
    border-radius: var(--r-sm);
    font-size: .95rem; font-weight: 500;
}
.navegacao ul a:hover { background: var(--blush); color: var(--rosa-profundo); }
.cabecalho__zap { margin-top: var(--e-2); }

@media (min-width: 960px) {
    .cabecalho__menu { display: none; }
    .navegacao {
        position: static; display: flex; align-items: center; gap: var(--e-5);
        padding: 0; background: none; border: 0; box-shadow: none;
        opacity: 1; visibility: visible; transform: none;
    }
    .navegacao ul { display: flex; gap: var(--e-2); }
    .navegacao ul a { padding: var(--e-2) var(--e-3); }
    .cabecalho__zap { margin: 0; }
    .marca img { width: 148px; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: var(--e-5) var(--e-8); }

.hero__grade { display: grid; gap: var(--e-4); }

@media (min-width: 900px) {
    .hero__grade { grid-template-columns: 45fr 55fr; gap: var(--e-5); align-items: stretch; }
}

/* Bloco amarelo de alto impacto, com padrão decorativo. */
.hero__bloco {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--e-4);
    padding: var(--e-7) var(--e-6);
    background: var(--manteiga);
    background-image: var(--padrao);
    background-size: 140px;
    border-radius: var(--r-2xl);
}

.hero__selo {
    align-self: flex-start;
    padding: var(--e-2) var(--e-4);
    background: var(--branco);
    border-radius: var(--r-full);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--rosa-profundo);
}

.hero__titulo { font-size: var(--t-3xl); font-weight: 700; }
.hero__realce { display: block; color: var(--rosa-profundo); }

.hero__subtitulo {
    max-width: 42ch;
    color: var(--chocolate);
    opacity: .82;
    line-height: 1.55;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.hero__aviso {
    display: inline-flex; align-items: center; gap: var(--e-2);
    align-self: flex-start;
    padding: var(--e-2) var(--e-4);
    background: rgba(255,255,255,.72);
    border-radius: var(--r-full);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--chocolate);
}
.hero__aviso strong { color: var(--rosa-profundo); }

/* Imagem do hero (LCP). */
.hero__figura {
    position: relative; margin: 0;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--blush);
    min-height: 300px;
}
.hero__figura img { width: 100%; height: 100%; object-fit: cover; }

.hero__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: clamp(4.5rem, 15vw, 8rem);
    background:
        radial-gradient(circle at 32% 28%, rgba(240,98,119,.24), transparent 58%),
        radial-gradient(circle at 76% 76%, rgba(255,216,77,.35), transparent 58%),
        var(--blush);
}

/* ---------------------------------------------------------------- seções -- */
.secao { padding-block: var(--e-8); }
.secao--blush {
    margin-inline: var(--gutter);
    padding-inline: var(--gutter);
    background: var(--blush);
    border-radius: var(--r-2xl);
}
@media (min-width: 768px) { .secao { padding-block: var(--e-9); } }

.secao__cabecalho { max-width: 60ch; margin: 0 auto var(--e-7); text-align: center; }
.secao__olho {
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--rosa); margin-bottom: var(--e-2);
}
.secao__titulo { font-size: var(--t-2xl); font-weight: 700; margin-bottom: var(--e-3); }
.secao__texto  { color: var(--tinta-suave); }

/* --------------------------------------------------------- diferenciais -- */
.grade-diferenciais {
    display: grid; gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.diferencial {
    padding: var(--e-5);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
    text-align: center;
}
.diferencial__titulo {
    font-family: var(--fonte-ui);
    font-size: .76rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rosa); margin-bottom: var(--e-2);
}
.diferencial__texto {
    font-family: var(--fonte-display);
    font-size: var(--t-lg); font-weight: 600; line-height: 1.15;
    text-transform: uppercase; color: var(--chocolate);
}

/* ------------------------------------------------------------ categorias -- */
.grade-categorias {
    display: grid; gap: var(--e-4);
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
.categoria {
    position: relative; overflow: hidden;
    display: block;
    border-radius: var(--r-xl);
    background: var(--branco);
    box-shadow: var(--s-1);
    transition: transform var(--tempo-base) var(--curva),
                box-shadow var(--tempo-base) var(--curva);
}
.categoria:hover { transform: translateY(-4px); box-shadow: var(--s-2); }

.categoria__foto {
    display: block;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 34% 30%, rgba(240,98,119,.28), transparent 62%),
        radial-gradient(circle at 72% 74%, rgba(255,216,77,.38), transparent 62%),
        var(--manteiga-claro);
    transition: transform var(--tempo-base) var(--curva);
}
.categoria:hover .categoria__foto { transform: scale(1.04); }

/* Rótulo sobreposto na base — como nos cards da referência. */
/* A contagem de modelos (só na galeria) fica colada ao nome, e a seta continua
   na ponta — por isso o `margin-right: auto` em vez de mais um wrapper. */
.categoria__rotulo small {
    margin-right: auto;
    font-family: var(--fonte-ui);
    font-size: .68rem; font-weight: 500; text-transform: none;
    color: var(--tinta-suave);
}

.categoria__rotulo {
    position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3);
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    background: rgba(255,255,255,.94);
    border-radius: var(--r-full);
    font-family: var(--fonte-display);
    font-size: 13px; line-height: 1.2; font-weight: 600; text-transform: uppercase;
    color: var(--chocolate);
}
.categoria__seta {
    display: grid; place-items: center; flex: none;
    width: 26px; height: 26px;
    background: var(--rosa); color: #fff;
    border-radius: 50%;
    font-size: .8rem; font-family: var(--fonte-ui);
    transition: transform var(--tempo-base) var(--curva);
}
.categoria:hover .categoria__seta { transform: translateX(3px); }

/* ---------------------------------------------------------------- passos -- */
.passos { display: grid; gap: var(--e-5); }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); } }

.passo {
    position: relative;
    padding: var(--e-7) var(--e-5) var(--e-5);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
}
.passo__numero {
    position: absolute; top: calc(var(--e-5) * -1); left: var(--e-5);
    display: grid; place-items: center;
    width: 48px; height: 48px;
    background: var(--rosa); color: #fff;
    border: 4px solid var(--creme);
    border-radius: 50%;
    font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 700;
}
.passo h3 { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--e-2); }
.passo p  { color: var(--tinta-suave); font-size: .95rem; }

/* -------------------------------------------------------------- banner --- */
.banner {
    position: relative; overflow: hidden;
    display: grid; gap: var(--e-4); justify-items: center;
    padding: var(--e-8) var(--e-5);
    background: var(--manteiga);
    background-image: var(--padrao);
    background-size: 150px;
    border-radius: var(--r-2xl);
    text-align: center;
}
.banner h2 { font-size: var(--t-2xl); font-weight: 700; max-width: 22ch; }
.banner p  { max-width: 46ch; color: var(--chocolate); opacity: .82; }
.banner__nota { font-size: var(--t-sm); opacity: .7; }

/* ---------------------------------------------------------------- rodapé -- */
.rodape {
    margin: var(--e-8) var(--gutter) var(--e-5);
    padding: var(--e-8) var(--e-6) var(--e-5);
    background: var(--blush);
    border-radius: var(--r-2xl);
}
.rodape__grade { display: grid; gap: var(--e-6); padding-inline: 0; }
@media (min-width: 768px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--e-7); } }

.rodape__marca img { width: 150px; height: auto; margin-bottom: var(--e-4); }
.rodape__texto { color: var(--tinta-suave); max-width: 38ch; margin-bottom: var(--e-4); font-size: .95rem; }
.rodape__selo {
    display: inline-block;
    padding: var(--e-2) var(--e-4);
    background: var(--branco);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
}
.rodape__selo strong { color: var(--rosa-profundo); }

.rodape__titulo {
    font-family: var(--fonte-ui);
    font-size: .76rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rosa-profundo);
    margin-bottom: var(--e-3);
}
.rodape__lista { display: grid; gap: var(--e-2); color: var(--tinta-suave); font-size: .95rem; }
.rodape__lista a:hover { color: var(--rosa-profundo); }

.rodape__base {
    margin-top: var(--e-6); padding-top: var(--e-4);
    border-top: 1px solid rgba(74,42,24,.1);
    font-size: var(--t-sm); color: var(--tinta-suave);
    text-align: center;
}

/* ------------------------------------------------------- zap flutuante --- */
.zap-flutuante {
    position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 60;
    display: grid; place-items: center;
    width: 58px; height: 58px;
    background: var(--whatsapp); color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(37,211,102,.42);
    transition: transform var(--tempo-base) var(--curva);
}
.zap-flutuante:hover { transform: scale(1.06); }
.zap-flutuante::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; border: 2px solid var(--whatsapp);
    animation: pulso 6s ease-out infinite;
}
@keyframes pulso {
    0%, 70%, 100% { transform: scale(1);   opacity: 0; }
    72%           { transform: scale(1);   opacity: .85; }
    88%           { transform: scale(1.55);opacity: 0; }
}

/* ---------------------------------------------------- voltar ao topo --- */
/* Lado esquerdo, de propósito: o canto direito já é do WhatsApp — os dois
   flutuantes juntos ali brigariam por espaço (D-070). */
.voltar-topo {
    position: fixed; left: var(--e-4); bottom: var(--e-4); z-index: 60;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    background: rgba(74, 42, 24, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform var(--tempo-base) var(--curva), background var(--tempo-base) var(--curva);
}
.voltar-topo:hover, .voltar-topo:focus-visible { background: rgba(74, 42, 24, .85); transform: translateY(-3px); }

/* -------------------------------------------------- animação de entrada -- */
[data-animar] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 460ms var(--curva) var(--atraso, 0ms),
                transform 460ms var(--curva) var(--atraso, 0ms);
}
[data-animar].visivel { opacity: 1; transform: none; }

/* Escalonamento sem style inline — mantém a CSP estrita. */
.grade-diferenciais > [data-animar]:nth-child(2),
.grade-categorias   > [data-animar]:nth-child(2),
.passos             > [data-animar]:nth-child(2) { --atraso:  60ms; }
.grade-diferenciais > [data-animar]:nth-child(3),
.grade-categorias   > [data-animar]:nth-child(3),
.passos             > [data-animar]:nth-child(3) { --atraso: 120ms; }
.grade-diferenciais > [data-animar]:nth-child(4),
.grade-categorias   > [data-animar]:nth-child(4) { --atraso: 180ms; }
.grade-categorias   > [data-animar]:nth-child(5)   { --atraso: 240ms; }
.grade-categorias   > [data-animar]:nth-child(6)   { --atraso: 300ms; }
.grade-categorias   > [data-animar]:nth-child(n+7) { --atraso: 360ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-animar] { opacity: 1; transform: none; }
}

/* =========================================================================
   Catálogo, produto e avaliações (Fase 2)
   ========================================================================= */

.secao--topo { padding-top: var(--e-5); }

/* Cabeçalho de página (h1): sem o rótulo em cima e com a contagem na mesma
   linha do título, colada na borda direita — sobra altura para o conteúdo
   começar mais cedo. Vai até a borda (sem `max-width`), então quem limita a
   largura de leitura é o texto de apoio, não o cabeçalho inteiro. */
.secao__cabecalho--esquerda {
    margin-inline: 0;
    text-align: left;
    max-width: none;
    margin-bottom: var(--e-5);
}
.secao__cabecalho-linha {
    display: flex; flex-wrap: wrap;
    align-items: baseline; justify-content: space-between;
    gap: var(--e-2) var(--e-4);
}
.secao__cabecalho--esquerda .secao__titulo { margin-bottom: 0; }
.secao__cabecalho--esquerda .secao__texto { max-width: 70ch; margin-top: var(--e-3); }
.secao__contagem { font-size: var(--t-sm); color: var(--tinta-suave); white-space: nowrap; }
.secao__acao { margin-top: var(--e-7); text-align: center; }
/* Texto solto centralizado, com respiro maior acima — usado depois de um
   `.secao__acao` (botões), para não ficar colado neles (D-067). */
.secao__texto--centro { margin-top: var(--e-6); text-align: center; }

/* ------------------------------------------------------------- migalhas -- */
.migalhas { padding-block: var(--e-4) 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.migalhas a:hover { color: var(--rosa-profundo); }
.migalhas__sep { opacity: .45; }

/* -------------------------------------------------------------- filtros -- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.filtros--sub { margin-top: calc(var(--e-5) * -1); }

.filtros__item {
    padding: var(--e-2) var(--e-4);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-full);
    font-size: .9rem; font-weight: 500;
    transition: border-color var(--tempo-rapido), color var(--tempo-rapido),
                background-color var(--tempo-rapido);
}
.filtros__item:hover { border-color: var(--rosa); color: var(--rosa-profundo); }
.filtros__item--ativo { background: var(--chocolate); border-color: var(--chocolate); color: var(--creme); }
.filtros--sub .filtros__item { background: transparent; }

/* -------------------------------------------------- grade de produtos --- */
.grade-produtos {
    display: grid; gap: var(--e-4);
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.produto {
    position: relative;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: transform var(--tempo-base) var(--curva),
                box-shadow var(--tempo-base) var(--curva);
}
.produto:hover { transform: translateY(-4px); box-shadow: var(--s-2); }

.produto__link { display: block; height: 100%; }

.produto__foto {
    display: block; overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--manteiga-claro);
}
.produto__foto img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 420ms var(--curva);
}
.produto:hover .produto__foto img { transform: scale(1.04); }

.produto__corpo { display: grid; gap: var(--e-1); padding: var(--e-4); }
.produto__nome {
    font-family: var(--fonte-display);
    font-size: 1.02rem; font-weight: 600; text-transform: uppercase;
    line-height: 1.15; color: var(--chocolate);
}
.produto__resumo { font-size: .86rem; color: var(--tinta-suave); line-height: 1.4; }

.produto__selecionar {
    position: absolute; top: var(--e-3); right: var(--e-3);
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.94);
    border: 0; border-radius: 50%;
    box-shadow: var(--s-1);
    font-size: 1.15rem; line-height: 1; color: var(--rosa);
    cursor: pointer;
    transition: transform var(--tempo-rapido) var(--curva), background-color var(--tempo-rapido);
}
.produto__selecionar:hover,
.produto__selecionar[aria-pressed="true"] { background: var(--rosa); color: #fff; }
.produto__selecionar.pulsou { animation: pulo 240ms var(--curva); }

/* Produto que precisa de escolhas não entra na seleção por um coração: o card
   leva para a página, onde as perguntas existem (D-061). Por isso é pílula com
   texto, e não o mesmo círculo — a ação é outra. */
.produto__escolher {
    position: absolute; top: var(--e-3); right: var(--e-3);
    padding: var(--e-2) var(--e-3);
    background: rgba(255,255,255,.94);
    border-radius: var(--r-full);
    box-shadow: var(--s-1);
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--rosa-profundo);
    transition: background-color var(--tempo-rapido), color var(--tempo-rapido);
}
.produto__escolher:hover { background: var(--rosa); color: #fff; }

@keyframes pulo {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Placeholder de produto sem foto — mantém a altura e evita CLS. */
.imagem-vazia {
    display: grid; place-items: center;
    width: 100%; height: 100%; min-height: 120px;
    font-size: clamp(2rem, 8vw, 3.5rem);
    background:
        radial-gradient(circle at 35% 30%, rgba(240,98,119,.20), transparent 62%),
        var(--manteiga-claro);
}

/* --------------------------------------------------------- sem produtos -- */
.aviso-vazio {
    display: grid; gap: var(--e-4); justify-items: center; text-align: center;
    padding: var(--e-8) var(--e-5);
    background: var(--branco);
    border: 1px dashed var(--linha);
    border-radius: var(--r-xl);
    color: var(--tinta-suave);
}

/* ---------------------------------------------------- paginação do site -- */
.paginacao-site {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--e-4); margin-top: var(--e-7);
}
.paginacao-site__info { font-size: var(--t-sm); color: var(--tinta-suave); }

/* ------------------------------------------------------ página do modelo -- */
/* Modelo é foto de referência: a imagem manda, o texto acompanha (D-061). Por
   isso a coluna da foto é maior que a do produto, onde o configurador precisa
   de espaço igual. */
.modelo { padding-block: var(--e-5) var(--e-8); }
.modelo__grade { display: grid; gap: var(--e-6); }

@media (min-width: 900px) {
    .modelo__grade { grid-template-columns: 3fr 2fr; gap: var(--e-7); align-items: start; }
}

.modelo__principal {
    position: relative;
    margin: 0;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--manteiga-claro);
    aspect-ratio: 4 / 5;
}
.modelo__principal img { width: 100%; height: 100%; object-fit: cover; }

.modelo__etiqueta { margin-bottom: var(--e-3); }
.modelo__nome { font-size: var(--t-2xl); font-weight: 700; margin-bottom: var(--e-2); }

.modelo__categoria {
    font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rosa); margin-bottom: var(--e-4);
}
.modelo__categoria a:hover { color: var(--rosa-profundo); }

.modelo__explicacao {
    font-size: var(--t-sm); color: var(--tinta-suave);
    margin-bottom: var(--e-5);
}

.modelo__acoes { display: grid; gap: var(--e-3); }
@media (min-width: 560px) { .modelo__acoes { grid-auto-flow: column; justify-content: start; } }

.modelo__destino {
    margin-top: var(--e-3);
    font-size: .8rem; color: var(--tinta-suave);
}
.modelo__descricao { margin-top: var(--e-5); color: var(--tinta-suave); font-size: var(--t-sm); }
.modelo__ver-todos { margin-top: var(--e-6); text-align: center; }

/* Card de modelo não tem coração — o espaço dele vira respiro na foto. */
.produto--modelo .produto__corpo { padding-bottom: var(--e-4); }

/* ------------------------------------------- faixa de modelos (D-061) -- */
/* Grade de miniaturas quadradas: muita foto à vista sem virar rolagem infinita,
   que é o ponto — a pessoa decide olhando, não clicando. */
.modelos-faixa {
    display: grid; gap: var(--e-3);
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr));
    margin-top: var(--e-4);
}

.modelos-faixa__foto {
    display: block; position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--manteiga-claro);
    aspect-ratio: 1;
    border: 3px solid transparent;
    transition: border-color var(--tempo-rapido), transform var(--tempo-rapido);
}
.modelos-faixa__foto img { width: 100%; height: 100%; object-fit: cover; }
.modelos-faixa__foto:hover { transform: translateY(-2px); border-color: var(--rosa-claro); }
.modelos-faixa__foto--escolhida { border-color: var(--rosa); }

.modelos-faixa__nome {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--e-4) var(--e-2) var(--e-2);
    background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
    color: #fff; font-size: .74rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Vitrine de modelos da home (D-061l). A faixa comum (acima) deixa o
   navegador decidir quantas colunas cabem — bom dentro da página de produto,
   mas com 14 fotos isso rendia "7 numa linha, 1 sozinho esticado na de
   baixo". Aqui o desktop é fixo em 7 colunas (14 = 2 fileiras cheias) e o
   celular vira uma trilha horizontal com scroll-snap nativo — rolagem de
   verdade, sem nenhum JavaScript, porque nem empilhado nem espremido numa
   grade 14 miniaturas cabem direito numa tela estreita. */
.modelos-faixa--vitrine {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--e-2);
}
.modelos-faixa--vitrine .modelos-faixa__item {
    flex: 0 0 clamp(112px, 32vw, 150px);
    scroll-snap-align: start;
}

@media (min-width: 900px) {
    .modelos-faixa--vitrine {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        overflow: visible;
        padding-bottom: 0;
    }
    .modelos-faixa--vitrine .modelos-faixa__item { flex: initial; }
}

/* Modelo de referência já escolhido, ao lado do botão de pedir. */
.produto-pagina__referencia {
    display: inline-flex; align-items: center; gap: var(--e-2);
    margin-bottom: var(--e-3); padding: var(--e-2) var(--e-3);
    background: var(--blush); border-radius: var(--r-full);
    font-size: .8rem; color: var(--chocolate);
}
.produto-pagina__referencia-tirar {
    padding: 0 var(--e-1); background: none; border: 0;
    color: var(--tinta-suave); cursor: pointer; font-size: .9rem; line-height: 1;
}
.produto-pagina__referencia-tirar:hover { color: var(--rosa-profundo); }

/* Visor da foto grande. Sem biblioteca: uma camada, uma foto, dois botões. */
.visor {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    padding: var(--e-4);
    background: rgba(0, 0, 0, .72);
}
.visor__caixa {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh; overflow: auto;
    background: var(--branco);
    border-radius: var(--r-lg);
    box-shadow: var(--s-3);
}
.visor__foto { display: block; width: 100%; height: auto; }
.visor__fechar {
    position: absolute; top: var(--e-2); right: var(--e-2); z-index: 1;
    width: 34px; height: 34px;
    background: var(--branco); border: 0; border-radius: var(--r-full);
    cursor: pointer; font-size: .9rem; line-height: 1;
    box-shadow: var(--s-2);
}
.visor__rodape { padding: var(--e-4); display: grid; gap: var(--e-3); }
.visor__nome { font-family: var(--fonte-display); font-size: 1rem; color: var(--chocolate); }
.visor__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ----------------------------------------------------- página do produto -- */
.produto-pagina { padding-block: var(--e-5) var(--e-8); }
.produto-pagina__grade { display: grid; gap: var(--e-6); }

@media (min-width: 900px) {
    .produto-pagina__grade { grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: start; }
}

.produto-pagina__principal {
    position: relative;
    margin: 0;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--manteiga-claro);
    aspect-ratio: 4 / 5;
}
.produto-pagina__principal img { width: 100%; height: 100%; object-fit: cover; }

.produto-pagina__miniaturas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }

.miniatura-botao {
    width: 76px; height: 76px; padding: 0;
    background: none; border: 2px solid transparent; border-radius: var(--r-md);
    overflow: hidden; cursor: pointer;
    transition: border-color var(--tempo-rapido);
}
.miniatura-botao img { width: 100%; height: 100%; object-fit: cover; }
.miniatura-botao:hover { border-color: var(--rosa-claro); }
.miniatura-botao--ativa { border-color: var(--rosa); }

.produto-pagina__categoria {
    font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rosa); margin-bottom: var(--e-2);
}
.produto-pagina__categoria a:hover { color: var(--rosa-profundo); }

.produto-pagina__nome { font-size: var(--t-2xl); font-weight: 700; margin-bottom: var(--e-3); }
.produto-pagina__resumo { font-size: var(--t-md); color: var(--tinta-suave); margin-bottom: var(--e-5); }

.produto-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }

.produto-pagina__aviso {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    background: var(--blush);
    border-radius: var(--r-full);
    font-size: var(--t-sm); color: var(--chocolate);
}
.produto-pagina__aviso strong { color: var(--rosa-profundo); }

.produto-pagina__descricao,
.produto-pagina__avaliacoes {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--linha);
}
.produto-pagina__descricao h2,
.produto-pagina__avaliacoes h2 { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--e-3); }
.produto-pagina__descricao { color: var(--tinta-suave); line-height: 1.7; }

/* ---------------------------------------------------------- avaliações --- */
.avaliacao {
    /* position:relative só ancora o selo do Google abaixo (D-064) — sem
       top/left/right/bottom aqui, não move nada do que já existia. */
    position: relative;
    display: grid; gap: var(--e-3);
    margin: 0;
    padding: var(--e-5);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
}
.avaliacao--compacta { padding: var(--e-4); margin-bottom: var(--e-3); }

.avaliacao__estrelas { color: #E0A84E; letter-spacing: .1em; font-size: 1rem; }
.avaliacao blockquote { margin: 0; color: var(--tinta); line-height: 1.6; }
.avaliacao figcaption { display: grid; gap: 2px; font-size: var(--t-sm); color: var(--tinta-suave); }
.avaliacao figcaption strong { color: var(--chocolate); }

/* Selo do Google (D-064), só na vitrine da home — pedido do cliente. Fora do
   grid do card, de propósito: um elemento a mais na grade empurraria estrela/
   texto/autor de lugar, e a instrução foi clara — nada mais no card muda. */
.avaliacao__google { position: absolute; top: var(--e-4); right: var(--e-4); width: 22px; height: 22px; }
.avaliacao__google svg { display: block; width: 100%; height: 100%; }

/* -------------------------------------------------- carrossel de avaliações -- */
/*
 * "Quem já provou": um depoimento por vez, trocando sozinho a cada poucos
 * segundos. Estado inicial (sem JS, ou antes do script rodar) é uma pilha —
 * todos os depoimentos visíveis, sem depender de script nenhum. O JS
 * (`site.js`) acrescenta `.carrossel-avaliacoes--ativo` só quando de fato vai
 * controlar o slide; é esse modificador que liga o recorte com overflow e o
 * deslizar por transform. As setas/bolinhas de navegação também só aparecem
 * junto — não faz sentido mostrar um botão "próxima" que não muda nada.
 *
 * Com `--ativo`, a trilha é flex com align-items:stretch (padrão): como cada
 * slide vira item da mesma linha, a ALTURA da linha acompanha o slide mais
 * alto automaticamente — os cards não têm a mesma altura entre si
 * (depoimentos têm tamanhos diferentes), mas o viewport não "pula" ao trocar
 * de slide, porque a altura já é a maior de todas desde o início.
 */
/* 900px (era 640px): dá espaço para 2 cards lado a lado sem apertar nenhum
   deles — a largura do CARD continua igual, só a moldura do carrossel
   cresceu (D-064). */
.carrossel-avaliacoes { max-width: 900px; margin-inline: auto; }
.carrossel-avaliacoes__trilho { display: grid; gap: var(--e-4); }

/* Até 2 avaliações por slide (D-064): empilhadas por padrão — 2 cards
   espremidos num celular ficariam com a fonte do card pequena demais para
   ler, e o pedido foi para não mexer no card. Lado a lado só a partir de
   640px, onde cada card ainda sobra ~300px de largura. Sem `grid-auto-rows`
   nem 3ª/4ª carta: um slide tem no máximo 2 (o último pode ter só 1, se a
   quantidade de avaliações for ímpar). */
.carrossel-avaliacoes__par { display: grid; gap: var(--e-4); }
@media (min-width: 640px) {
    .carrossel-avaliacoes__par { grid-template-columns: repeat(2, 1fr); }
}

.carrossel-avaliacoes--ativo .carrossel-avaliacoes__viewport { overflow: hidden; border-radius: var(--r-xl); }
.carrossel-avaliacoes--ativo .carrossel-avaliacoes__trilho {
    display: flex;
    transition: transform .5s var(--curva);
}
.carrossel-avaliacoes--ativo .carrossel-avaliacoes__slide { flex: 0 0 100%; min-width: 0; border-radius: 0; }

.carrossel-avaliacoes__nav {
    display: none;
    align-items: center; justify-content: center;
    gap: var(--e-4);
    margin-top: var(--e-5);
}
.carrossel-avaliacoes--ativo .carrossel-avaliacoes__nav { display: flex; }

.carrossel-avaliacoes__seta {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-full);
    color: var(--rosa-profundo);
    box-shadow: var(--s-1);
    cursor: pointer;
    transition: transform var(--tempo-base) var(--curva),
                background-color var(--tempo-base) var(--curva),
                color var(--tempo-base) var(--curva),
                box-shadow var(--tempo-base) var(--curva),
                border-color var(--tempo-base) var(--curva);
}
.carrossel-avaliacoes__seta:hover {
    background: var(--rosa); color: #fff; border-color: var(--rosa);
    box-shadow: var(--s-rosa);
    transform: translateY(-2px);
}
.carrossel-avaliacoes__seta:active { transform: translateY(0); }
.carrossel-avaliacoes__seta:focus-visible { outline: 2px solid var(--rosa-profundo); outline-offset: 2px; }

.carrossel-avaliacoes__pontos { display: flex; align-items: center; gap: var(--e-2); }
.carrossel-avaliacoes__ponto {
    width: 8px; height: 8px; padding: 0;
    background: var(--linha);
    border: 0; border-radius: var(--r-full);
    cursor: pointer;
    transition: width var(--tempo-base) var(--curva), background-color var(--tempo-base) var(--curva);
}
.carrossel-avaliacoes__ponto:hover { background: var(--rosa-claro); }
.carrossel-avaliacoes__ponto--atual { width: 22px; background: var(--rosa); }
.carrossel-avaliacoes__ponto:focus-visible { outline: 2px solid var(--rosa-profundo); outline-offset: 2px; }

@media (max-width: 560px) {
    .carrossel-avaliacoes__nav { gap: var(--e-3); }
    .carrossel-avaliacoes__seta { width: 38px; height: 38px; }
}

/* --------------------------------------------------- categoria com foto -- */
.categoria__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- busca no topo -- */
.busca { position: relative; flex: 1 1 180px; min-width: 0; }

.busca input {
    width: 100%; min-height: 42px;
    padding: 0 var(--e-4);
    background: var(--blush);
    color: var(--tinta);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font: inherit; font-size: .92rem;
    transition: border-color var(--tempo-rapido), background-color var(--tempo-rapido);
}
.busca input::placeholder { color: var(--tinta-suave); }
.busca input:focus { outline: none; background: var(--branco); border-color: var(--rosa); }

.busca__resultados {
    position: absolute; z-index: 60;
    left: 0; right: 0; top: calc(100% + 8px);
    /* A caixa acompanhava a largura do campo — estreito no cabeçalho — e
       ficava pequena demais para os 5 resultados. Uma largura mínima própria
       (sem estourar telas pequenas, por isso o `min()`) resolve sem mexer no
       tamanho do campo de busca em si. */
    min-width: min(380px, calc(100vw - 2 * var(--gutter)));
    max-height: 70vh; overflow-y: auto;
    padding: var(--e-2);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-3);
}

/* `flex-direction: column` em vez de um `display: grid` sem colunas: o
   resultado visual foi o mesmo raciocínio, mas por escrito explícito não há
   como um resultado acabar do lado do outro — cada `li` estica para 100% da
   largura (é o padrão de `align-items: stretch` no eixo cruzado) e empilha,
   nunca em coluna (D-058b). Sem foto: cada item é só texto, então não há
   `flex`/alinhamento lateral a resolver dentro do link. */
.busca__lista { display: flex; flex-direction: column; }
.busca__lista li + li { border-top: 1px solid var(--linha); }
.busca__lista a {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--e-3) var(--e-2);
    border-radius: var(--r-sm);
}
.busca__lista a:hover { background: var(--blush); }
.busca__lista strong {
    font-family: var(--fonte-display);
    font-size: .82rem; font-weight: 600; text-transform: uppercase;
    color: var(--chocolate);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca__lista em { font-style: normal; font-size: .7rem; color: var(--rosa); }
.busca__lista small {
    font-size: .74rem; line-height: 1.3; color: var(--tinta-suave);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.busca__vazio { padding: var(--e-4); font-size: .9rem; color: var(--tinta-suave); text-align: center; }
.busca__vazio a { color: var(--rosa-profundo); text-decoration: underline; }

/* ------------------------------------------------- chip da seleção ------ */
.selecao-chip {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    background: var(--blush);
    border-radius: var(--r-full);
    font-size: .85rem; font-weight: 600; color: var(--rosa-profundo);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--tempo-base, .2s);
}
.selecao-chip:hover, .selecao-chip:focus-visible { background: var(--rosa-claro, var(--blush)); }
.selecao-chip .contador {
    display: grid; place-items: center;
    min-width: 22px; height: 22px; padding-inline: 6px;
    background: var(--rosa); color: #fff;
    border-radius: var(--r-full);
    font-size: .78rem;
}
.selecao-chip__texto { font-weight: 500; color: var(--tinta-suave); }

@media (max-width: 959px) {
    .selecao-chip { align-self: flex-start; }
}

/* ============================================================== AVISOS === */
.avisos { display: grid; gap: var(--e-2); margin-block: var(--e-5) 0; }
.aviso {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    border-left: 4px solid;
    font-size: .92rem;
    background: var(--branco);
    box-shadow: var(--s-1);
    animation: aviso-surgir 280ms var(--curva);
}
.aviso--sucesso { border-color: #2E8B57; }
.aviso--erro    { border-color: #C0392B; }
.aviso span { flex: 1; }
.aviso__fechar {
    background: none; border: 0; font-size: 1.2rem; line-height: 1;
    cursor: pointer; color: inherit; opacity: .5;
}
.aviso__fechar:hover { opacity: 1; }
@keyframes aviso-surgir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ========================================================= MINHA SELEÇÃO === */
.selecao-pagina__vazio {
    display: grid; justify-items: center; gap: var(--e-4);
    padding: var(--e-9) var(--e-4);
    text-align: center;
    background: var(--blush);
    border-radius: var(--r-lg);
}
.selecao-pagina__vazio p { color: var(--tinta-suave); max-width: 40ch; }

.selecao-lista { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.selecao-item {
    display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: var(--e-4);
    padding: var(--e-3);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}
.selecao-item__foto {
    width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden;
    background: var(--blush);
}
.selecao-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.selecao-item__nome { font-weight: 600; color: var(--chocolate); }
.selecao-item__qtd { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.selecao-item__qtd button {
    width: 28px; height: 28px; border-radius: var(--r-full);
    border: 1px solid var(--linha); background: var(--creme);
    font: inherit; font-weight: 700; cursor: pointer; line-height: 1;
}
.selecao-item__qtd button:hover { background: var(--blush); }
.selecao-item__qtd span { min-width: 2ch; text-align: center; font-weight: 600; }
.selecao-item__remover {
    background: none; border: 0; cursor: pointer;
    color: var(--tinta-suave); font-size: .85rem; text-decoration: underline;
    justify-self: end;
}
.selecao-item__remover:hover { color: var(--rosa-profundo); }

.selecao-acoes {
    display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center;
    margin-bottom: var(--e-7);
}

.formulario-site { display: grid; gap: var(--e-4); max-width: 560px; }
.formulario-site .campo { display: grid; gap: var(--e-2); }
.formulario-site .grade-2 { display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr; }
.formulario-site label { font-weight: 600; font-size: .9rem; color: var(--chocolate); }
.formulario-site input, .formulario-site textarea {
    width: 100%; min-height: 46px; padding: 0 var(--e-4);
    background: var(--blush); color: var(--tinta);
    border: 1px solid transparent; border-radius: var(--r-md);
    font: inherit; font-size: .95rem;
    transition: border-color var(--tempo-rapido), background-color var(--tempo-rapido);
}
.formulario-site textarea { min-height: 96px; padding-block: var(--e-3); resize: vertical; }
.formulario-site input:focus, .formulario-site textarea:focus {
    outline: none; background: var(--branco); border-color: var(--rosa);
}
.formulario-site .campo__ajuda { font-size: .82rem; color: var(--tinta-suave); }
.armadilha { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 599px) {
    .selecao-item { grid-template-columns: 60px 1fr; }
    .selecao-item__remover { grid-column: 2; }
    .formulario-site .grade-2 { grid-template-columns: 1fr; }
}

/* ========================================================= CONFIGURADOR === */
.configurador { display: grid; gap: var(--e-5); margin-block: var(--e-6); }
.configurador__grupo { border: 0; padding: 0; margin: 0; }
.configurador__rotulo {
    padding: 0; margin-bottom: var(--e-2);
    font-family: var(--fonte-display); font-size: var(--t-md); font-weight: 600;
    color: var(--chocolate);
}
.configurador__obrigatorio { color: var(--rosa); }
.configurador__ajuda { font-size: .85rem; color: var(--tinta-suave); margin-bottom: var(--e-2); }

/* Opções (Massa, Recheio…) na página do produto: texto a 14px e menos
   padding em cada opção — o padrão herdava o tamanho do corpo (16px) e as
   caixas/chips ficavam maiores do que o conteúdo precisava (pedido do
   cliente). */
.configurador__opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.configurador__escolha {
    display: inline-flex; align-items: baseline; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    background: var(--branco);
    border: 2px solid var(--linha);
    border-radius: var(--r-full);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color var(--tempo-rapido), background-color var(--tempo-rapido);
}
.configurador__escolha:hover { border-color: var(--rosa-claro); }
.configurador__escolha small { color: var(--tinta-suave); font-size: .78rem; }
.configurador__escolha input { accent-color: var(--rosa); }
.configurador__escolha:has(input:checked) { border-color: var(--rosa); background: var(--blush); }
.configurador__escolha:has(input:focus-visible) { outline: 3px solid var(--rosa); outline-offset: 2px; }
.configurador__escolha--sozinha { width: fit-content; }

.configurador__quantidades { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.configurador__quantidade {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-md);
    font-size: .875rem;
}
.configurador__quantidade input { width: 64px; text-align: center; }

.configurador__campo, .configurador__quantidade input {
    min-height: 40px; padding: 0 var(--e-3);
    background: var(--blush); color: var(--tinta);
    border: 1px solid transparent; border-radius: var(--r-md);
    font: inherit; font-size: .875rem;
}
.configurador__campo { width: 100%; }
.configurador__campo:focus, .configurador__quantidade input:focus {
    outline: none; background: var(--branco); border-color: var(--rosa);
}

.configurador__erro { margin-top: var(--e-2); font-size: .85rem; color: #C0392B; font-weight: 600; }
.configurador__grupo--erro .configurador__rotulo { color: #C0392B; }

/* Opções escolhidas, na lista de "Minha seleção". */
.selecao-item__opcoes { display: grid; gap: 2px; margin-top: var(--e-1); font-size: .82rem; color: var(--tinta-suave); }

/* Botão grande da página do produto quando o item já está na seleção: vira
   contorno para o "Remover" não competir visualmente com o CTA do WhatsApp. */
.botao--primario.esta-na-selecao {
    background: var(--branco);
    color: var(--rosa-profundo);
    border-color: var(--rosa);
    box-shadow: none;
}
.botao--primario.esta-na-selecao:hover { background: var(--blush); }

/* ============================ MONTE SEU KIT FESTA (D-055) === */
/* O visitante monta do zero: cada item é um cartão com quantidade, sabores e
   a regra de quantos sabores aquela quantidade permite. Nada aqui garante a
   regra — o servidor decide de novo (MontadorService). */

.montador__itens { display: grid; gap: var(--e-4); margin-bottom: var(--e-6); }

.montador-item {
    padding: var(--e-4);
    background: var(--branco);
    border: 2px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-1);
    transition: border-color var(--tempo-rapido);
}
.montador-item--escolhido { border-color: var(--rosa); }

.montador-item__topo {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--e-4);
}
.montador-item__foto {
    width: 84px; height: 84px; border-radius: var(--r-md);
    overflow: hidden; background: var(--blush); flex: none;
}
.montador-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.montador-item__identidade { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.montador-item__nome {
    font-family: var(--fonte-display); font-size: var(--t-md); font-weight: 600;
    text-transform: uppercase; color: var(--chocolate);
}
.montador-item__ajuda { font-size: .85rem; color: var(--tinta-suave); }

.montador-item__quantidade { display: grid; gap: 4px; justify-items: end; text-align: right; }
.montador-item__quantidade label { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); }
.montador-item__quantidade input {
    width: 7rem; text-align: center;
    font-size: 1.1rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.montador-item__minimo { font-size: .76rem; color: var(--tinta-suave); }

/* Configurador próprio do produto (Massa, Recheio, Peso…), quando o item
   liberado no montador já tem um — D-057. Mesma moldura do bloco de sabores,
   para os dois lerem como seções do mesmo cartão. `.configurador` já vem com
   `margin-block`, então zera aqui para não duplicar respiro. */
.montador-item__configurador {
    margin-top: var(--e-4); padding-top: var(--e-4);
    border-top: 1px dashed var(--linha);
}
.montador-item__configurador .configurador { margin-block: 0; }

.montador-item__sabores {
    margin-top: var(--e-4); padding-top: var(--e-4);
    border-top: 1px dashed var(--linha);
}
.montador-item__regra {
    display: inline-block; margin-bottom: var(--e-2);
    padding: 3px var(--e-3); border-radius: var(--r-full);
    background: var(--blush); color: var(--rosa-profundo);
    font-size: .82rem; font-weight: 600;
}

.montador-sabores {
    display: grid; gap: var(--e-2);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    margin-top: var(--e-2);
}
.montador-sabor {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--linha); border-radius: var(--r-md);
    background: var(--branco);
}
.montador-sabor__escolha { display: flex; align-items: center; gap: var(--e-2); cursor: pointer; }
.montador-sabor__escolha input { accent-color: var(--rosa); }

/* Sabor além do que a faixa permite: apagado, mas **continua na tela**. A
   regra limita a escolha, não a vitrine — foi o que o cliente pediu. */
.montador-sabor--bloqueado { opacity: .45; }
.montador-sabor--bloqueado .montador-sabor__escolha { cursor: not-allowed; }

.montador-sabor__quantidade { display: flex; align-items: center; gap: 4px; }
.montador-sabor__quantidade input {
    width: 5rem; text-align: center; font-variant-numeric: tabular-nums;
}
.montador-sabor__unidade { font-size: .78rem; color: var(--tinta-suave); }

.montador-item__soma { margin-top: var(--e-3); font-size: .85rem; color: var(--tinta-suave); }
.montador-item__soma--erro { color: #C0392B; font-weight: 600; }
.montador-item__erro { margin-top: var(--e-3); font-size: .88rem; color: #C0392B; font-weight: 600; }

.montador__acoes { text-align: center; }
.montador__aviso {
    margin-top: var(--e-3); text-align: center;
    font-size: .92rem; font-weight: 600;
}
.montador__aviso--erro { color: #C0392B; }
.montador__aviso--ok { color: var(--ok, #2E8B57); }

@media (max-width: 700px) {
    .montador-item__topo { grid-template-columns: 1fr; justify-items: start; }
    .montador-item__quantidade { justify-items: start; text-align: left; width: 100%; }
}