/* ==========================================================
   Vitrine de cestas — estilos
   A cor da marca vem do painel (--marca / --marca-texto).
   ========================================================== */

:root {
    color-scheme: only light;
    --papel: #ffffff;
    --leite: #f8f4ee;
    --kraft: #d8c3a5;
    --kraft-escuro: #8f7655;
    --cafe: #0b1534;
    --cafe-suave: #525a70;
    --linha: #e8decf;
    --manteiga: #d8c3a5;
    --ok: #2f7d4f;
    --erro: #b3261e;

    --fonte-titulo: "Fraunces", "Young Serif", Georgia, serif;
    --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-mao: "Caveat", "Segoe Script", cursive;

    --raio: 14px;
    --raio-grande: 22px;
    --largura: 1080px;
    --sombra-painel: 0 -8px 40px rgba(11, 21, 52, .18);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--cafe);
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 96px;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { width: 1.2em; height: 1.2em; fill: currentColor; flex-shrink: 0; }

/* ---------- Topo: toalha xadrez na cor da marca ---------- */
.topo { position: relative; text-align: center; }

.topo__capa {
    height: 170px;
    background-color: var(--marca);
    background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--kraft) 30%, transparent) 0 18px, transparent 18px 36px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--kraft) 30%, transparent) 0 18px, transparent 18px 36px);
    background-size: cover;
    background-position: center;
}

.topo__conteudo { max-width: 640px; margin: 0 auto; padding: 0 20px; }

.topo__logo {
    width: 104px; height: 104px;
    margin: -52px auto 14px;
    border-radius: 50%;
    border: 5px solid var(--papel);
    background: color-mix(in srgb, var(--kraft) 45%, white);
    overflow: hidden;
    display: grid; place-items: center;
    position: relative;
}
.topo__logo img { width: 100%; height: 100%; object-fit: cover; }
.topo__logo span { font-family: var(--fonte-titulo); font-size: 44px; color: var(--marca); }

.topo__nome {
    font-family: var(--fonte-titulo);
    font-weight: 400;
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.topo__slogan { margin: 0 auto 14px; color: var(--cafe-suave); max-width: 34ch; }

.topo__infos {
    list-style: none; margin: 0 0 10px; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    font-size: 14px;
}
.topo__infos li { padding: 4px 12px; border-radius: 999px; background: var(--leite); border: 1px solid var(--linha); }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.status--aberta::before { background: var(--ok); }
.status--fechada::before { background: var(--kraft-escuro); }

.topo__horario { font-size: 14px; color: var(--cafe-suave); margin: 0 0 14px; }

.topo__acoes { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.btn-redondo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--cafe); color: var(--cafe);
    text-decoration: none; font-weight: 600; font-size: 14px;
}
.btn-redondo:hover { background: var(--cafe); color: var(--papel); }

.aviso-fechada {
    max-width: var(--largura); margin: 18px auto 0; padding: 12px 16px;
    background: #f6efe4; border-left: 4px solid var(--manteiga);
    font-size: 14px; border-radius: 8px;
    width: calc(100% - 32px);
}

/* ---------- Navegação por categorias ---------- */
.categorias {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linha);
    margin-top: 22px;
}
.categorias__trilho {
    max-width: var(--largura); margin: 0 auto;
    display: flex; gap: 6px; align-items: center;
    padding: 10px 16px;
    overflow-x: auto; scrollbar-width: none;
}
.categorias__trilho::-webkit-scrollbar { display: none; }

.busca {
    display: flex; align-items: center; gap: 6px;
    background: var(--leite); border: 1px solid var(--linha);
    border-radius: 999px; padding: 0 12px; flex: 0 0 auto;
    color: var(--cafe-suave);
}
.busca input { border: 0; background: transparent; padding: 8px 0; width: 150px; outline: none; color: var(--cafe); }
.busca:focus-within { border-color: var(--marca); }

.categorias__link {
    flex: 0 0 auto; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    text-decoration: none; color: var(--cafe); font-weight: 500; font-size: 15px;
}
.categorias__link:hover { background: var(--leite); }
.categorias__link.ativo { background: var(--cafe); color: var(--papel); }

/* ---------- Vitrine ---------- */
.vitrine { max-width: var(--largura); margin: 0 auto; padding: 8px 16px 0; }

.secao { padding-top: 28px; }
.secao__titulo {
    font-family: var(--fonte-titulo); font-weight: 400;
    font-size: 24px; line-height: 1.2; margin: 0 0 14px;
}

.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 720px)  { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.destaques {
    display: grid; grid-auto-flow: column; grid-auto-columns: 62%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    scrollbar-width: thin;
}
.destaques .produto { scroll-snap-align: start; }
@media (min-width: 720px) { .destaques { grid-auto-columns: 32%; } }
@media (min-width: 1000px) { .destaques { grid-auto-columns: 24%; } }

.produto__abrir {
    all: unset; display: block; width: 100%; cursor: pointer; border-radius: var(--raio);
}
.produto__abrir:focus-visible { outline: 3px solid var(--marca); outline-offset: 4px; }

.produto__foto {
    position: relative; display: block;
    aspect-ratio: 1 / 1; border-radius: var(--raio); overflow: hidden;
    background: var(--leite);
}
.produto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.produto__abrir:hover .produto__foto img { transform: scale(1.04); }

.foto-vazia { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kraft-escuro); background: linear-gradient(160deg, var(--leite), var(--kraft)); }
.foto-vazia svg { width: 46%; height: 46%; fill: none; opacity: .75; }

.selo {
    position: absolute; left: 10px; top: 10px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.selo--promo { background: var(--manteiga); color: var(--cafe); }
.selo--esgotado { background: var(--cafe); color: var(--papel); }

.produto--esgotado .produto__foto img,
.produto--esgotado .foto-vazia { filter: grayscale(1); opacity: .6; }

.produto__info { display: block; padding: 10px 2px 0; }
.produto__nome { display: block; font-weight: 600; line-height: 1.3; }
.produto__desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; color: var(--cafe-suave); margin-top: 3px; line-height: 1.4;
}
.produto__preco { display: block; margin-top: 6px; font-size: 15px; }
.produto__preco s { color: var(--cafe-suave); font-size: 13px; margin-right: 2px; }
.produto__preco strong { color: var(--marca); font-weight: 700; }
.preco-a-partir { font-size: 13px; color: var(--cafe-suave); }

.vazio, .sem-resultado { text-align: center; color: var(--cafe-suave); padding: 48px 16px; }

.rodape {
    max-width: 640px; margin: 56px auto 0; padding: 28px 20px;
    text-align: center; color: var(--cafe-suave); font-size: 14px;
    border-top: 1px solid var(--linha);
}
.rodape p { margin: 0 0 8px; }
.rodape__assinatura { font-family: var(--fonte-mao); font-size: 22px; color: var(--cafe); }

/* ---------- Barra da sacola ---------- */
.barra-sacola {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(520px, calc(100% - 32px));
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border: 0; border-radius: 999px;
    background: var(--marca); color: var(--marca-texto);
    font-weight: 700; font-size: 16px;
    box-shadow: 0 10px 30px rgba(11, 21, 52, .28);
    z-index: 30;
}
.barra-sacola[hidden] { display: none; }
.barra-sacola__qtd {
    min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
    background: var(--marca-texto); color: var(--marca);
    display: grid; place-items: center; font-size: 14px;
}
.barra-sacola__texto { flex: 1; text-align: left; }
.barra-sacola.pulsar { animation: pulsar .45s ease; }
@keyframes pulsar { 50% { transform: translateX(-50%) scale(1.05); } }

/* ---------- Painéis (dialog) ---------- */
.painel {
    border: 0; padding: 0; margin: auto auto 0;
    width: 100%; max-width: 100%;
    max-height: 94dvh; height: auto;
    border-radius: var(--raio-grande) var(--raio-grande) 0 0;
    background: var(--papel); color: var(--cafe);
    box-shadow: var(--sombra-painel);
    display: none; flex-direction: column;
    overflow: hidden;
}
.painel[open] { display: flex; animation: subir .28s ease-out; }
.painel::backdrop { background: rgba(11, 21, 52, .55); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

@media (min-width: 720px) {
    .painel--produto {
        margin: auto; max-width: 560px; max-height: 90vh;
        border-radius: var(--raio-grande);
    }
    .painel--sacola {
        margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; max-width: 440px;
        border-radius: var(--raio-grande) 0 0 var(--raio-grande);
    }
    .painel--sacola[open] { animation: deslizar .28s ease-out; }
    @keyframes deslizar { from { transform: translateX(40px); opacity: 0; } }
}

.painel__rolagem { overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }

.painel__fechar-form { position: absolute; right: 12px; top: 12px; z-index: 2; margin: 0; }
.painel__fechar, .painel__voltar {
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.92); color: var(--cafe);
    display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(11, 21, 52, .15);
}
.painel__fechar--fixo, .painel__voltar { box-shadow: none; background: var(--leite); }

.painel__cabecalho {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 12px; border-bottom: 1px solid var(--linha);
}
.painel__cabecalho h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.painel__cabecalho form { margin: 0; }
.painel__voltar[hidden] { display: none; }

.painel__rodape {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha); background: var(--papel);
}
.painel__rodape--coluna { flex-direction: column; align-items: stretch; gap: 8px; }

/* Galeria do produto */
.galeria {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    aspect-ratio: 1 / 1; background: var(--leite); scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria img, .galeria .foto-vazia { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.galeria .foto-vazia { position: relative; }
.galeria-pontos { display: flex; justify-content: center; gap: 6px; margin-top: -22px; position: relative; padding-bottom: 8px; }
.galeria-caixa { position: relative; }
.galeria-seta {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0 0 3px;
    background: rgba(255,255,255,.92); color: var(--cafe); font-size: 30px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(11, 21, 52, .18);
}
.galeria-seta--ant { left: 10px; }
.galeria-seta--prox { right: 10px; }
.galeria-seta:hover { background: #fff; }
.galeria-seta[hidden] { display: none !important; }
.galeria-pontos { margin-top: 0; padding: 8px 0 0; }
.galeria-pontos button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--cafe) 22%, transparent);
}
.galeria-pontos button.ativo { background: var(--cafe); }

.mp-corpo { padding: 18px 18px 8px; }
.mp-nome { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 6px; }
.mp-preco { margin: 0 0 10px; font-size: 18px; }
.mp-preco strong { color: var(--marca); }
.mp-preco s { color: var(--cafe-suave); font-size: 15px; margin-right: 4px; }
.mp-desc { color: var(--cafe-suave); margin: 0 0 18px; white-space: pre-line; }
.mp-esgotado { background: var(--leite); padding: 10px 14px; border-radius: 10px; font-weight: 600; }

/* Etiqueta kraft: o que vem na cesta */
.etiqueta {
    position: relative;
    background: var(--kraft);
    background-image: radial-gradient(rgba(11, 21, 52, .05) 1px, transparent 1px);
    background-size: 5px 5px;
    padding: 22px 20px 18px 46px;
    margin: 0 0 22px;
    border-radius: 6px 18px 18px 6px;
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
}
.etiqueta__furo {
    position: absolute; left: 22px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--kraft-escuro);
}
.etiqueta__titulo { font-family: var(--fonte-mao); font-weight: 700; font-size: 24px; line-height: 1; margin: 0 0 8px; }
.etiqueta__lista { margin: 0; padding: 0; list-style: none; columns: 1; font-size: 15px; }
.etiqueta__lista li { padding: 3px 0 3px 16px; position: relative; break-inside: avoid; }
.etiqueta__lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--kraft-escuro); }
@media (min-width: 520px) { .etiqueta__lista { columns: 2; column-gap: 20px; } }

/* Blocos de opção */
.bloco { margin: 0 0 22px; }
.bloco__cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.bloco__titulo { display: block; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.bloco__cabeca .bloco__titulo { margin: 0; }
.bloco__regra { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--leite); color: var(--cafe-suave); white-space: nowrap; }
.bloco__regra--obrigatorio { background: var(--cafe); color: var(--papel); }
.bloco__ajuda { font-size: 14px; color: var(--cafe-suave); margin: 0 0 10px; }
.bloco--erro .bloco__regra--obrigatorio { background: var(--erro); }

.opcao {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 12px;
    margin-bottom: 8px; cursor: pointer;
}
.opcao:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 6%, white); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.opcao--off { opacity: .5; cursor: not-allowed; }
.opcao input { accent-color: var(--marca); width: 20px; height: 20px; margin: 0; flex-shrink: 0; }
.opcao__nome { flex: 1; }
.opcao__preco { font-size: 14px; color: var(--cafe-suave); white-space: nowrap; }

textarea, .campo input, .campo select {
    width: 100%; border: 1.5px solid var(--linha); border-radius: 12px;
    padding: 11px 13px; background: var(--papel); resize: vertical;
}
textarea:focus, .campo input:focus, .campo select:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.contador { display: block; text-align: right; font-size: 12px; color: var(--cafe-suave); margin-top: 4px; }

/* Prévia do cartão escrito à mão */
.cartao-preview {
    position: relative; margin: 0 0 10px; padding: 22px 22px 18px;
    min-height: 92px;
    background: #fffdf8;
    background-image: repeating-linear-gradient(transparent 0 29px, rgba(143, 118, 85, .22) 29px 30px);
    background-position: 0 14px;
    border: 1px solid var(--linha); border-radius: 4px;
    transform: rotate(-.6deg);
    box-shadow: 2px 3px 0 var(--kraft);
}
.cartao-preview::after {
    content: ""; position: absolute; right: 14px; top: -7px; width: 52px; height: 16px;
    background: color-mix(in srgb, var(--marca) 55%, white); opacity: .7; transform: rotate(4deg);
}
.cartao-preview__texto {
    font-family: var(--fonte-mao); font-size: 25px; line-height: 30px;
    color: var(--cafe); white-space: pre-wrap; word-break: break-word;
}
.cartao-preview__texto.vazio { color: var(--kraft-escuro); }

/* Quantidade e botões */
.quantidade { display: flex; align-items: center; border: 1.5px solid var(--linha); border-radius: 999px; flex-shrink: 0; }
.quantidade button { width: 40px; height: 44px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--marca); }
.quantidade button:disabled { color: var(--linha); cursor: default; }
.quantidade output { min-width: 22px; text-align: center; font-weight: 700; }
.quantidade--mini button { width: 32px; height: 32px; font-size: 18px; }

.btn-principal {
    flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 0; border-radius: 999px; padding: 13px 20px;
    background: var(--marca); color: var(--marca-texto);
    font-weight: 700; font-size: 16px;
}
.btn-principal:disabled { opacity: .45; cursor: not-allowed; }
.btn-principal--cheio { justify-content: center; }

/* Itens da sacola */
.itens-sacola { list-style: none; margin: 0; padding: 4px 16px; }
.item-sacola { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.item-sacola:last-child { border-bottom: 0; }
.item-sacola__foto { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--leite); position: relative; }
.item-sacola__foto img { width: 100%; height: 100%; object-fit: cover; }
.item-sacola__foto .foto-vazia svg { width: 60%; height: 60%; }
.item-sacola__nome { font-weight: 600; line-height: 1.3; }
.item-sacola__detalhes { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--cafe-suave); }
.item-sacola__mensagem { font-family: var(--fonte-mao); font-size: 19px; line-height: 1.15; color: var(--cafe); margin-top: 4px; }
.item-sacola__linha { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.item-sacola__preco { font-weight: 700; }
.link-remover { border: 0; background: none; color: var(--cafe-suave); font-size: 13px; text-decoration: underline; padding: 4px; }
.sacola-vazia { text-align: center; color: var(--cafe-suave); padding: 40px 24px; }

.resumo { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.resumo strong { font-size: 20px; }
.resumo__entrega { margin: 0; font-size: 13px; color: var(--cafe-suave); }
.erro-form { margin: 0; color: var(--erro); font-size: 14px; font-weight: 600; }

/* Formulário do pedido */
.form-pedido { padding: 4px 16px 12px; }
.form-pedido fieldset { border: 0; margin: 0; padding: 16px 0 6px; border-bottom: 1px solid var(--linha); }
.form-pedido fieldset:last-child { border-bottom: 0; }
.form-pedido legend { font-family: var(--fonte-titulo); font-size: 18px; padding: 0; margin-bottom: 10px; }
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.campo--erro input, .campo--erro select { border-color: var(--erro); }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checagem { display: flex; gap: 10px; align-items: center; font-size: 15px; margin: 4px 0 12px; }
.checagem input { accent-color: var(--marca); width: 20px; height: 20px; }
.nota { font-size: 13px; color: var(--cafe-suave); margin: 0 0 12px; }

/* CEP e taxa da região */
.campo-cep { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 12px; align-items: end; }
.campo-cep__status { margin: 0 0 22px; font-size: 13px; color: var(--cafe-suave); min-width: 0; }
.campo-cep__status a { color: var(--cafe); }
.campo-cep__status--buscando::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px;
    border: 2px solid var(--linha); border-top-color: var(--cafe-suave); border-radius: 50%; animation: girar .8s linear infinite; }
.campo-cep__status--ok { color: var(--ok); font-weight: 600; }
.campo-cep__status--ok::before { content: "✓ "; }
.campo-cep__status--erro { color: var(--erro); margin-bottom: 14px; }
@keyframes girar { to { transform: rotate(360deg); } }
.local-taxa { margin: -4px 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
    background: color-mix(in srgb, var(--ok) 10%, var(--papel)); color: var(--ok); }
.local-taxa--fora { background: var(--leite); color: var(--cafe-suave); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .campo-cep__status--buscando::before { animation: none; } }

.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.segmentado label {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    padding: 12px 8px; border: 1.5px solid var(--linha); border-radius: 12px; cursor: pointer;
    font-weight: 600;
}
.segmentado label small { font-weight: 400; color: var(--cafe-suave); font-size: 12px; }
.segmentado label, .opcoes-pagamento label { position: relative; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 7%, white); }
.segmentado label:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }

.opcoes-pagamento { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.opcoes-pagamento label {
    padding: 9px 14px; border: 1.5px solid var(--linha); border-radius: 999px; cursor: pointer; font-size: 15px;
}
.opcoes-pagamento input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes-pagamento label:has(input:checked) { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }
.opcoes-pagamento label:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }

.pix { background: var(--leite); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.pix p { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.pix .nota { font-weight: 400; margin: 8px 0 0; }
.pix__chave { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pix__chave code { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; background: var(--papel); border: 1px dashed var(--kraft-escuro); padding: 8px 10px; border-radius: 8px; }
.btn-copiar { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--cafe); color: var(--papel); font-weight: 600; font-size: 14px; }

/* Toast */
.toast {
    position: fixed; left: 50%; top: 16px; transform: translate(-50%, -140%);
    background: var(--cafe); color: var(--papel); padding: 11px 18px; border-radius: 999px;
    font-weight: 600; font-size: 15px; z-index: 100; transition: transform .25s ease, visibility .25s;
    visibility: hidden;
    max-width: calc(100% - 32px); text-align: center;
}
.toast.visivel { transform: translate(-50%, 0); visibility: visible; }

/* Confirmação do pedido */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enviado { text-align: center; padding: 36px 24px; }
.enviado p { color: var(--cafe-suave); margin: 0 0 18px; }
.enviado__numero { font-family: var(--fonte-mao); font-size: 30px; color: var(--marca) !important; margin: 0 0 4px !important; }
.enviado__titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 24px; margin: 0 0 10px; }
.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 340px; padding: 15px 20px; border-radius: 999px;
    background: #1f8f4e; color: #fff; font-weight: 700; font-size: 17px; text-decoration: none;
    margin-bottom: 18px;
}
.btn-whatsapp:hover { background: #18773f; }
.btn-whatsapp svg { width: 22px; height: 22px; }
.link-acompanhar { color: var(--cafe); font-weight: 600; }

/* ---------- Página de acompanhamento do pedido ---------- */
.pagina-pedido { padding-bottom: 40px; background: var(--leite); }
.pp-topo { background: var(--papel); border-bottom: 1px solid var(--linha); padding: 12px 16px; }
.pp-loja { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; color: var(--cafe); text-decoration: none; font-family: var(--fonte-titulo); font-size: 18px; }
.pp-loja__logo { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--leite); display: grid; place-items: center; color: var(--marca); flex-shrink: 0; }
.pp-loja__logo img { width: 100%; height: 100%; object-fit: cover; }

.pp { max-width: 560px; margin: 0 auto; padding: 24px 16px 0; }
.pp__numero { font-family: var(--fonte-mao); font-size: 26px; color: var(--marca); margin: 0; line-height: 1; }
.pp__status { font-family: var(--fonte-titulo); font-weight: 400; font-size: 32px; line-height: 1.15; margin: 4px 0 6px; }
.pp__quando { color: var(--cafe-suave); margin: 0 0 22px; }
.pp__cancelado { background: var(--papel); border-left: 4px solid var(--cafe-suave); padding: 12px 16px; border-radius: 8px; }

.linha-tempo { list-style: none; margin: 0 0 24px; padding: 18px 18px 4px; background: var(--papel); border-radius: var(--raio); border: 1px solid var(--linha); }
.linha-tempo__item { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.linha-tempo__item:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--linha); }
.linha-tempo__item--feito:not(:last-child)::before { background: var(--marca); }
.linha-tempo__ponto { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha); background: var(--papel); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; }
.linha-tempo__item--feito .linha-tempo__ponto { background: var(--marca); border-color: var(--marca); }
.linha-tempo__item--atual .linha-tempo__ponto { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 20%, transparent); background: var(--marca); }
.linha-tempo__item--futuro { color: var(--cafe-suave); }
.linha-tempo__item strong { font-weight: 600; }
.linha-tempo__hora { display: block; font-size: 13px; color: var(--cafe-suave); }
.linha-tempo__item p { margin: 4px 0 0; font-size: 14px; color: var(--cafe-suave); }

.pp__bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px; }
.pp__bloco h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 19px; margin: 0 0 10px; }
.pp__bloco p { margin: 0 0 8px; }
.pp__itens { list-style: none; margin: 0 0 12px; padding: 0; }
.pp__itens > li { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.pp__item-linha { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.pp__valores { margin: 0; }
.pp__valores div { display: flex; justify-content: space-between; padding: 3px 0; }
.pp__valores dt { color: var(--cafe-suave); }
.pp__valores dd { margin: 0; }
.pp__total { font-size: 18px; font-weight: 700; padding-top: 8px !important; }
.pp__total dt { color: var(--cafe) !important; }
.pp__pago { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #fff1d6; color: #7a5300; }
.pp__pago--sim { background: #dff3e6; color: #1d6b3d; }
.pp__acoes { text-align: center; margin-top: 22px; }

/* ---------- Apresentação (topo) ---------- */
.apresentacao {
    max-width: var(--largura); margin: 22px auto 0; padding: 18px 20px;
    width: calc(100% - 32px);
    background: var(--leite); border: 1px solid var(--linha); border-radius: var(--raio);
    text-align: center;
}
.apresentacao__titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.25; margin: 0 auto 12px; max-width: 30ch; }
.apresentacao__lista {
    list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; text-align: left;
    font-size: 14px; line-height: 1.35;
}
@media (min-width: 820px) { .apresentacao__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apresentacao__lista li { position: relative; padding-left: 24px; }
.apresentacao__lista li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.apresentacao__area { margin: 12px 0 0; font-size: 14px; color: var(--cafe-suave); }

/* ---------- Depoimentos ---------- */
.depoimentos {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: thin;
}
@media (min-width: 720px) { .depoimentos { grid-auto-columns: calc((100% - 28px) / 3); } }
.depoimento {
    margin: 0; scroll-snap-align: start; display: flex; flex-direction: column;
    background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.depoimento__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.depoimento__texto { margin: 0; padding: 16px 18px 8px; flex: 1; position: relative; }
.depoimento__texto::before { content: "“"; font-family: var(--fonte-titulo); font-size: 44px; line-height: .6; color: var(--marca); display: block; margin-bottom: 4px; }
.depoimento__autor { padding: 0 18px 16px; font-size: 14px; }
.depoimento__autor span { display: block; color: var(--cafe-suave); }

/* ---------- Dúvidas frequentes ---------- */
.duvidas { border-top: 1px solid var(--linha); max-width: 760px; }
.duvida { border-bottom: 1px solid var(--linha); }
.duvida summary {
    list-style: none; cursor: pointer; padding: 16px 36px 16px 0; font-weight: 600; position: relative;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--cafe-suave); border-bottom: 2px solid var(--cafe-suave); transform: rotate(45deg);
    transition: transform .2s ease;
}
.duvida[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.duvida__resposta { padding: 0 0 16px; color: var(--cafe-suave); max-width: 68ch; }
.duvidas__mais { margin: 16px 0 0; color: var(--cafe-suave); }
.duvidas__mais a { color: var(--cafe); font-weight: 600; }

/* ---------- Rodapé e avisos ---------- */
.rodape a { color: var(--cafe); }
.rodape__contato { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.nota a { color: var(--cafe); }

.aviso-cookies {
    position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(560px, calc(100% - 24px)); z-index: 40;
    display: flex; align-items: center; gap: 12px;
    background: var(--cafe); color: var(--papel); padding: 12px 14px 12px 18px; border-radius: 16px;
    font-size: 14px; box-shadow: 0 10px 30px rgba(11, 21, 52, .25);
}
.aviso-cookies p { margin: 0; flex: 1; }
.aviso-cookies a { color: var(--kraft); }
.aviso-cookies button { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--papel); color: var(--cafe); font-weight: 700; }
body.com-aviso .barra-sacola { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }

/* ---------- Política de privacidade ---------- */
.texto-legal h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 21px; margin: 28px 0 8px; }
.texto-legal p, .texto-legal li { color: var(--cafe); max-width: 68ch; }
.texto-legal ul { padding-left: 20px; }
.texto-legal li { margin-bottom: 6px; }

/* Chamada principal (frase de apresentação) e topo mais curto no celular */
.topo__chamada { margin: 0 auto 14px; max-width: 32ch; font-size: 18px; line-height: 1.35; font-weight: 500; }
@media (max-width: 719px) {
    .topo__capa { height: 118px; }
    .topo__logo { width: 88px; height: 88px; margin-top: -44px; margin-bottom: 10px; }
    .topo__logo span { font-size: 36px; }
    .topo__horario { font-size: 13px; margin-bottom: 12px; }
    .apresentacao { margin-top: 16px; padding: 14px 16px; }
    .apresentacao__lista { font-size: 13px; gap: 8px 12px; }
    .categorias { margin-top: 16px; }
}

/* ==========================================================
   Atalhos de venda: campanha, próxima entrega, filtros,
   combina com, pagamento e WhatsApp flutuante
   ========================================================== */
.campanha {
    display: block; margin: 0; padding: 10px 16px; text-align: center;
    background: var(--cafe); color: var(--papel); font-weight: 600; font-size: 14px; line-height: 1.35;
    text-decoration: none;
}
a.campanha:hover { background: #1b2a55; }
.campanha span { color: var(--manteiga); margin-left: 2px; }

.topo__entrega {
    margin: 0 auto 14px; max-width: 360px; padding: 9px 14px;
    border-radius: 12px; background: color-mix(in srgb, var(--kraft) 28%, white);
    border: 1px solid color-mix(in srgb, var(--kraft) 70%, white);
    font-size: 14px; line-height: 1.4;
}
.topo__entrega p { margin: 0; }
.topo__entrega strong { color: var(--cafe); }

.filtros { padding: 18px 0 2px; }
.filtros__linha { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.filtros__rotulo { font-size: 13px; font-weight: 700; color: var(--cafe-suave); width: 44px; flex-shrink: 0; }
.filtros__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.filtros__chips::-webkit-scrollbar { display: none; }
.chip-filtro {
    flex: 0 0 auto; border: 1.5px solid var(--linha); background: var(--papel); color: var(--cafe);
    border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip-filtro:hover { border-color: var(--kraft-escuro); }
.chip-filtro[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.filtros__resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; font-size: 14px; color: var(--cafe-suave); }
.filtros__limpar { border: 0; background: none; padding: 0; color: var(--cafe); font-weight: 600; text-decoration: underline; font-size: 14px; }

.mp-entrega { margin: -4px 0 16px; font-size: 14px; color: var(--cafe-suave); }

.combina__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.combina__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1.5px solid var(--linha); border-radius: 12px; }
.combina__foto { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--leite); flex-shrink: 0; position: relative; }
.combina__foto img { width: 100%; height: 100%; object-fit: cover; }
.combina__foto .foto-vazia svg { width: 60%; height: 60%; }
.combina__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.combina__nome { font-weight: 600; font-size: 15px; line-height: 1.25; }
.combina__preco { font-size: 14px; color: var(--cafe-suave); }
.combina__bt { border: 1.5px solid var(--marca); color: var(--marca); background: none; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.combina__bt:disabled { border-color: var(--linha); color: var(--cafe-suave); }

.resumo--taxa { font-size: 14px; color: var(--cafe-suave); }
.resumo--total strong { font-size: 22px; }

.campo select#campo-bairro-lista + input { margin-top: 8px; }

.opcoes-pagamento .pag-online { width: 100%; border-radius: 14px; display: flex; flex-direction: column; font-weight: 700; }
.opcoes-pagamento .pag-online small { font-weight: 400; font-size: 12px; opacity: .85; }
.opcoes-pagamento .pag-online--off { opacity: .5; cursor: not-allowed; }

.btn-pagar {
    display: flex; align-items: center; justify-content: center; width: 100%; max-width: 340px; margin: 0 auto 10px;
    padding: 15px 20px; border-radius: 999px; background: var(--marca); color: var(--marca-texto);
    font-weight: 700; font-size: 17px; text-decoration: none;
}
.btn-whatsapp--secundario { background: var(--papel); color: #1f8f4e; border: 2px solid #1f8f4e; }
.btn-whatsapp--secundario:hover { background: #eef8f1; }
.enviado__ou { font-size: 14px; margin: 14px 0 10px !important; }

.pix-pagar { background: var(--leite); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin: 0 auto 6px; max-width: 340px; }
.pix-pagar__valor { font-size: 24px; font-weight: 700; color: var(--cafe) !important; margin: 0 0 10px !important; }
.pix-pagar__qr { width: 210px; height: 210px; margin: 0 auto 12px; background: #fff; border-radius: 10px; padding: 6px; }
.pix-pagar__qr svg { width: 100%; height: 100%; display: block; }
.pix-pagar .nota { margin: 10px 0 0 !important; }

.whats-flutuante {
    position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 25;
    display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 14px; border-radius: 999px;
    background: #1f8f4e; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 24px rgba(31, 143, 78, .35);
    transition: bottom .2s ease;
}
.whats-flutuante svg { width: 22px; height: 22px; }
body.com-sacola .whats-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); }
body.com-aviso .whats-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); }
body.com-aviso.com-sacola .whats-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px); }
@media (max-width: 480px) {
    .whats-flutuante span { display: none; }
    .whats-flutuante { padding: 14px; }
}

.secao__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.secao__cabeca .secao__titulo { margin: 0; }
.link-avaliacoes { color: var(--cafe); font-weight: 600; font-size: 14px; }

/* ==========================================================
   Layout "Boutique" (out/2026): topo azul-marinho com arco de
   foto, vitrines que deslizam no celular, coleção em destaque,
   detalhes numerados, atalhos de ocasião e rodapé escuro.
   ========================================================== */
:root { --areia: var(--kraft); --texto-claro: #f8f4ee; --texto-claro-suave: #c9cedb; --linha-areia: #d9ccb8; }
body { background: var(--leite); }

/* Faixa de campanha (quando não vira coleção) */
.campanha { background: var(--areia); color: var(--cafe); }
.campanha span { color: var(--cafe); }

/* ---------- Topo ---------- */
.hero { background: var(--marca); color: var(--texto-claro); border-radius: 0 0 36px 36px; padding-bottom: 34px; }
.hero__barra { max-width: var(--largura); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.hero__icone {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--areia) 40%, transparent); background: transparent; color: var(--areia);
    display: grid; place-items: center; position: relative; padding: 0;
}
.hero__icone svg { width: 20px; height: 20px; }
.hero__icone:hover { background: color-mix(in srgb, var(--areia) 14%, transparent); }
.hero__icone--sacola { background: var(--areia); color: var(--cafe); border-color: var(--areia); }
.hero__icone--sacola:hover { background: color-mix(in srgb, var(--areia) 82%, white); }
.hero__qtd { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--texto-claro); color: var(--cafe); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.hero__marca { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--texto-claro); text-decoration: none; line-height: 1.08; min-width: 0; }
.hero__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.hero__nome { font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: .01em; }
.hero__sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--areia); margin-top: 4px; }

.hero__corpo { display: flex; flex-direction: column; padding: 18px 22px 0; text-align: center; }
.hero__texto { display: contents; }
.hero__olho { order: 1; margin: 0 0 12px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--areia); font-weight: 600; }
.hero__olho .status::before { width: 7px; height: 7px; }
.hero__olho .status--aberta::before { background: #7fd1a3; }
.hero__titulo { order: 2; margin: 0 auto; max-width: 15ch; font-family: var(--fonte-titulo); font-weight: 400; font-size: 38px; line-height: 1.06; letter-spacing: -.01em; color: var(--texto-claro); }
.hero__titulo--longo { font-size: 30px; max-width: 19ch; }
.hero__titulo em { font-style: italic; color: var(--areia); }
.hero__arco {
    order: 3; position: relative; margin: 26px auto 0; width: 100%; max-width: 420px; height: 330px;
    border-radius: 200px 200px 28px 28px; overflow: hidden; background: var(--leite);
}
.hero__arco img { width: 100%; height: 100%; object-fit: cover; }
.hero__acoes { order: 4; display: flex; gap: 10px; margin: 22px auto 0; width: 100%; max-width: 420px; }
.hero__nota { order: 5; margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--texto-claro-suave); }
.hero__nota strong { color: var(--texto-claro); font-weight: 600; }

.btn-areia, .btn-contorno, .btn-marinho {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.btn-areia { flex: 1; background: var(--areia); color: var(--cafe); }
.btn-areia:hover { background: color-mix(in srgb, var(--areia) 82%, white); color: var(--cafe); }
.btn-contorno { border: 1px solid color-mix(in srgb, var(--areia) 55%, transparent); color: var(--texto-claro); font-weight: 600; }
.btn-contorno:hover { background: color-mix(in srgb, var(--areia) 14%, transparent); color: var(--texto-claro); }
.btn-contorno svg { width: 18px; height: 18px; }
.btn-marinho { min-height: 46px; background: var(--cafe); color: var(--texto-claro); font-size: 14px; font-weight: 600; }
.btn-marinho:hover { background: #1b2650; color: var(--texto-claro); }

@media (min-width: 900px) {
    .hero { border-radius: 0 0 48px 48px; padding-bottom: 48px; }
    .hero__barra { padding: 18px 24px; }
    .hero__corpo { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 24px 24px 0; text-align: left; }
    .hero__texto { display: flex; flex-direction: column; align-items: flex-start; }
    .hero__titulo { margin: 0; font-size: 56px; max-width: 13ch; }
    .hero__titulo--longo { font-size: 42px; max-width: 17ch; }
    .hero__acoes { margin: 28px 0 0; max-width: none; width: auto; }
    .btn-areia { flex: none; padding: 0 30px; }
    .hero__arco { margin: 0; max-width: none; height: 480px; }
}

/* ---------- Categorias e busca ---------- */
.categorias { background: color-mix(in srgb, var(--leite) 94%, transparent); border-bottom: 0; margin-top: 18px; }
.categorias__trilho { gap: 8px; padding: 10px 16px; }
.busca { background: var(--papel); border-color: var(--linha-areia); min-height: 42px; }
.busca input { width: 92px; transition: width .2s ease; }
.busca input:focus { width: 150px; }
.categorias__link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--linha-areia); font-weight: 600; font-size: 14px; background: transparent; }
.categorias__link:hover { background: var(--papel); }
.categorias__link.ativo { background: var(--cafe); color: var(--texto-claro); border-color: var(--cafe); }

.chip-filtro { min-height: 40px; background: var(--papel); border-color: var(--linha-areia); }

/* ---------- Vitrines ---------- */
.secao { padding-top: 32px; }
.secao__titulo { font-size: 28px; }
.secao__cabeca { flex-wrap: nowrap; }
.secao__dica { font-size: 13px; color: var(--cafe-suave); white-space: nowrap; }
.secao__dica span { display: inline-block; margin-left: 2px; }

.grade, .destaques {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none;
}
.grade::-webkit-scrollbar, .destaques::-webkit-scrollbar { display: none; }
.grade .produto, .destaques .produto { scroll-snap-align: start; }
@media (min-width: 600px) { .grade, .destaques { grid-auto-columns: 42%; } }
@media (min-width: 900px) {
    .grade { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 32px 22px; }
    .destaques { grid-auto-columns: 30%; }
    .secao__dica { display: none; }
}
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } .destaques { grid-auto-columns: 23%; } }

.produto__foto { border-radius: 26px; background: #efe6d8; }
.produto__cta {
    position: absolute; right: 12px; bottom: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px;
    background: var(--cafe); color: var(--texto-claro); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; box-shadow: 0 6px 16px rgba(11, 21, 52, .22);
}
.produto__abrir:hover .produto__cta { background: #1b2650; }
.produto__info { padding: 12px 4px 0; }
.produto__nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: 19px; line-height: 1.2; }
.produto__desc { font-size: 13px; }
.produto__preco strong { color: var(--cafe); font-size: 16px; }
.selo { left: 12px; top: 12px; padding: 4px 11px; }

/* ---------- Coleção em destaque ---------- */
.colecao { margin: 36px 0 0; border-radius: 30px; overflow: hidden; background: var(--areia); display: flex; flex-direction: column; }
.colecao__foto { width: 100%; height: 250px; object-fit: cover; }
.colecao__texto { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.colecao__olho { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #3e3322; }
.colecao__titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 400; font-size: 32px; line-height: 1.05; }
.colecao__texto p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #2a2a36; max-width: 46ch; }
@media (min-width: 900px) {
    .colecao { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .colecao__foto { height: 400px; }
    .colecao__texto { padding: 40px; }
    .colecao__titulo { font-size: 42px; }
}

/* ---------- Detalhes numerados ---------- */
.detalhes { padding-top: 40px; }
.detalhes__titulo { margin: 0 0 16px; font-family: var(--fonte-titulo); font-weight: 400; font-size: 28px; text-align: center; }
.detalhes__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detalhes__lista li { background: var(--papel); border: 1px solid #ede3d3; border-radius: 22px; padding: 18px 16px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.detalhes__num { display: block; font-family: var(--fonte-titulo); font-size: 30px; line-height: 1; color: var(--kraft-escuro); margin-bottom: 10px; font-weight: 400; }
.detalhes__area { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--cafe-suave); }
@media (min-width: 900px) { .detalhes__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .detalhes__lista li { padding: 24px 22px; } }

/* ---------- Atalhos de ocasião ---------- */
.atalhos { padding-top: 40px; }
.atalhos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.atalho { position: relative; height: 170px; border: 0; padding: 0; border-radius: 22px; overflow: hidden; background: #efe6d8; text-align: left; }
.atalho img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.atalho:hover img { transform: scale(1.04); }
.atalho span { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(11, 21, 52, .86)); color: #fff; font-weight: 700; font-size: 15px; }
@media (min-width: 900px) { .atalhos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .atalho { height: 220px; } }

/* ---------- Depoimentos e dúvidas sobre o creme ---------- */
.depoimento { background: var(--papel); }

/* ---------- Rodapé escuro ---------- */
.rodape {
    max-width: none; margin: 56px 0 0; padding: 36px 22px 130px; border-top: 0;
    background: var(--marca); color: var(--texto-claro-suave); border-radius: 36px 36px 0 0;
}
.rodape > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.rodape a { color: var(--areia); }
.rodape a:hover { color: color-mix(in srgb, var(--areia) 70%, white); }
.rodape__assinatura { color: var(--areia); }

/* ---------- Sacola flutuante ---------- */
.barra-sacola {
    width: auto; min-width: min(340px, calc(100% - 32px)); max-width: calc(100% - 32px);
    justify-content: space-between; gap: 14px; padding: 8px 8px 8px 20px;
    background: var(--areia); color: var(--cafe); font-size: 15px; font-weight: 600;
    box-shadow: 0 14px 30px rgba(11, 21, 52, .30);
}
.barra-sacola__resumo { white-space: nowrap; }
.barra-sacola__qtd { min-width: 0; height: auto; padding: 0; background: none; color: inherit; display: inline; font-size: inherit; }
.barra-sacola__texto { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--cafe); color: var(--texto-claro); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; }
.grade, .destaques { scroll-padding-inline: 16px; }
@media (min-width: 900px) { .grade { scroll-padding-inline: 0; } }
.opcional { font-weight: 400; color: var(--cafe-suave); }
.nota-campo { display: block; font-size: 12px; color: var(--cafe-suave); margin-top: 4px; line-height: 1.35; }

/* Fotos da vitrine em retrato (valoriza a cesta) */
.vitrine .produto__foto { aspect-ratio: 4 / 5; }

/* Pedido express */
.hero__express { order: 6; display: inline-block; margin: 10px auto 0; font-size: 13px; color: var(--areia); text-decoration: none; }
.hero__express strong { text-decoration: underline; text-underline-offset: 3px; }
.hero__express:hover { color: color-mix(in srgb, var(--areia) 70%, white); }
@media (min-width: 900px) { .hero__express { margin: 8px 0 0; } }
.express { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--leite); border: 1px dashed var(--kraft-escuro); }
.express p { margin: 0 0 8px; font-size: 13px; color: var(--cafe-suave); line-height: 1.45; }
.express__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1f7a4d; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.express__link svg { width: 18px; height: 18px; }

/* Aviso de pedidos reais recentes */
.recente {
    position: fixed; left: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px); z-index: 25;
    display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100% - 32px));
    padding: 10px 34px 10px 10px; border-radius: 16px; background: var(--papel); color: var(--cafe);
    box-shadow: 0 10px 30px rgba(11, 21, 52, .18); border: 1px solid #ede3d3;
    opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;
}
.recente.visivel { opacity: 1; transform: none; }
.recente__foto { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--leite); }
.recente__foto img { width: 100%; height: 100%; object-fit: cover; }
.recente__texto { margin: 0; font-size: 13px; line-height: 1.35; }
.recente__texto small { display: block; color: var(--cafe-suave); font-size: 12px; margin-top: 2px; }
.recente__fechar { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; background: none; color: var(--cafe-suave); font-size: 20px; line-height: 1; }
body:not(.com-sacola) .recente { bottom: max(16px, env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .recente { bottom: 24px !important; } }
body.com-aviso .recente { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px); }

/* Lembrete de sacola ao voltar */
.lembrete-sacola {
    position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 40;
    width: min(420px, calc(100% - 32px)); padding: 16px 40px 16px 18px; border-radius: 20px;
    background: var(--papel); color: var(--cafe); box-shadow: 0 16px 40px rgba(11, 21, 52, .25); border: 1px solid #ede3d3;
}
.lembrete-sacola p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.lembrete-sacola__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.lembrete-sacola__whats { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha-areia); color: var(--cafe); font-weight: 600; font-size: 14px; text-decoration: none; }
.lembrete-sacola__whats svg { width: 18px; height: 18px; }

/* ==========================================================
   Layout "Presente guiado" (Painel > Site > Aparência)
   ========================================================== */
.produto__chega, .produto__cta-lista { display: none; }
.layout-presente { background: var(--papel); }
.hero-b { background: var(--areia); color: var(--cafe); border-radius: 0 0 32px 32px; padding-bottom: 28px; }
.hero-b__barra { max-width: var(--largura); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.hero-b__marca { display: flex; align-items: center; gap: 10px; color: var(--cafe); text-decoration: none; font-family: var(--fonte-titulo); font-size: 21px; min-width: 0; }
.hero-b__marca img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hero-b__icones { display: flex; gap: 6px; }
.hero-b__icone { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.55); color: var(--cafe); position: relative; padding: 0; }
.hero-b__icone svg { width: 20px; height: 20px; }
.hero-b__icone--sacola { background: var(--cafe); color: var(--texto-claro); }
.hero-b__corpo { max-width: var(--largura); margin: 0 auto; padding: 6px 16px 0; }
.hero-b__oi { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.hero-b__titulo { margin: 0 0 18px; font-family: var(--fonte-titulo); font-weight: 500; font-size: 34px; line-height: 1.08; letter-spacing: -.01em; max-width: 14ch; }
.hero-b__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ocasiao-b { position: relative; height: 112px; border-radius: 20px; overflow: hidden; border: 2px solid transparent; background: var(--leite); text-align: left; padding: 0; }
.ocasiao-b:hover, .ocasiao-b:focus-visible { border-color: var(--cafe); }
.ocasiao-b__nome { position: absolute; left: 14px; top: 14px; right: 64px; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cafe); z-index: 1; }
.ocasiao-b img { position: absolute; right: -14px; bottom: -14px; width: 100px; height: 100px; object-fit: cover; border-radius: 50%; }
.hero-b__todas { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--cafe); }
@media (min-width: 900px) {
    .hero-b__titulo { font-size: 46px; max-width: none; }
    .hero-b__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .ocasiao-b { height: 140px; }
    .ocasiao-b img { width: 130px; height: 130px; }
}

.layout-presente .categorias { background: rgba(255,255,255,.95); }
.layout-presente .filtros__linha--para { display: none; }
.layout-presente .filtros__linha { flex-direction: column; align-items: flex-start; gap: 8px; }
.layout-presente .filtros__rotulo { width: auto; font-size: 15px; color: var(--cafe); }
.layout-presente .chip-filtro { min-height: 44px; padding: 0 18px; font-weight: 600; }

.prazo-b { margin: 18px 0 0; border-radius: 20px; background: var(--cafe); color: var(--texto-claro); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.prazo-b__icone { width: 46px; height: 46px; border-radius: 14px; background: var(--areia); color: var(--cafe); display: grid; place-items: center; flex: 0 0 auto; }
.prazo-b__icone svg { width: 24px; height: 24px; }
.prazo-b strong { display: block; font-size: 16px; }
.prazo-b span { display: block; font-size: 14px; color: var(--texto-claro-suave); }
.prazo-b span strong { display: inline; color: var(--areia); font-size: inherit; }
.prazo-b strong:empty { display: none; }

/* Cestas em lista: foto à esquerda, informações à direita */
.layout-presente .grade, .layout-presente .destaques {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    overflow: visible; margin: 0; padding: 0; gap: 12px;
}
@media (min-width: 900px) { .layout-presente .grade, .layout-presente .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.layout-presente .secao__dica { display: none; }
.layout-presente .produto { border: 1px solid #ede3d3; border-radius: 22px; padding: 10px; background: var(--papel); box-shadow: 0 6px 18px rgba(11, 21, 52, .05); }
.layout-presente .produto__abrir { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
.layout-presente .produto__foto { aspect-ratio: 1 / 1; border-radius: 16px; }
.layout-presente .produto__cta { display: none; }
.layout-presente .produto__info { padding: 2px 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.layout-presente .produto__nome { font-family: var(--fonte-texto); font-weight: 700; font-size: 16px; }
.layout-presente .produto__desc { -webkit-line-clamp: 2; }
.layout-presente .produto__chega { display: inline-block; align-self: flex-start; order: -1; font-size: 11px; font-weight: 700; color: #1f6b45; background: #e3f2e9; padding: 3px 8px; border-radius: 999px; }
.layout-presente .produto__cta-lista { display: inline-flex; align-self: flex-end; align-items: center; margin-top: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--cafe); color: var(--texto-claro); font-size: 14px; font-weight: 600; }
.layout-presente .produto--esgotado .produto__cta-lista { display: none; }

.extras-b { padding-top: 32px; }
.extras-b__sub { margin: -8px 0 14px; color: var(--cafe-suave); font-size: 14px; }
.extras-b__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.extra-b { border: 0; border-radius: 18px; background: var(--leite); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--cafe); }
.extra-b__foto { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--papel); }
.extra-b__foto img { width: 100%; height: 100%; object-fit: cover; }
.extra-b strong { font-size: 13px; line-height: 1.2; }
.extra-b span:last-child { font-size: 12px; color: var(--cafe-suave); }
@media (min-width: 900px) { .extras-b__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.layout-presente .detalhes__lista { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid #ede3d3; border-radius: 24px; padding: 6px 18px; background: var(--papel); }
.layout-presente .detalhes__lista li { border: 0; border-radius: 0; padding: 12px 0 12px 38px; position: relative; background: none; }
.layout-presente .detalhes__lista li + li { border-top: 1px solid #f1e8da; }
.layout-presente .detalhes__num { position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: #f1e8da; font-size: 0; margin: 0; }
.layout-presente .detalhes__num::after { content: "✓"; font-family: var(--fonte-texto); font-size: 14px; color: var(--cafe); position: absolute; inset: 0; display: grid; place-items: center; }
.layout-presente .detalhes__titulo { text-align: left; }
@media (min-width: 900px) { .layout-presente .detalhes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .layout-presente .detalhes__lista li + li { border-top: 0; } }

.ajuda-b { margin-top: 32px; border-radius: 24px; background: var(--leite); padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ajuda-b strong { font-family: var(--fonte-titulo); font-weight: 500; font-size: 21px; }
.ajuda-b span { font-size: 14px; color: var(--cafe-suave); line-height: 1.45; }

.layout-presente .barra-sacola {
    left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; min-width: 0; border-radius: 0;
    background: var(--papel); color: var(--cafe); border-top: 1px solid #ede3d3; padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(11, 21, 52, .08);
}
.layout-presente .barra-sacola.pulsar { animation: none; }
.layout-presente .barra-sacola__texto { min-height: 50px; padding: 0 22px; }
.prazo-b__icone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prazo-b span.prazo-b__icone { display: grid; color: var(--cafe); }

/* Presente guiado com a capa do painel (ex.: toalha xadrez) ao fundo */
.hero-b--capa { background-color: var(--areia); background-image: var(--capa); background-size: cover; background-position: center; }
.hero-b--capa .hero-b__marca { background: rgba(248, 244, 238, .92); padding: 6px 14px; border-radius: 999px; }
.hero-b--capa .hero-b__icone:not(.hero-b__icone--sacola) { background: rgba(248, 244, 238, .92); }
.hero-b--capa .hero-b__texto { display: inline-block; background: rgba(248, 244, 238, .94); border-radius: 22px; padding: 14px 18px 4px; margin-bottom: 14px; }
.hero-b--capa .hero-b__titulo { margin-bottom: 10px; }
.hero-b--capa .ocasiao-b { box-shadow: 0 6px 18px rgba(11, 21, 52, .12); }
.hero-b--capa .hero-b__todas { background: rgba(248, 244, 238, .94); padding: 8px 14px; border-radius: 999px; text-decoration: none; }

/* Capa xadrez: faixas em azul-marinho (contraste com o xadrez e combina com a marca) */
.hero-b--capa .hero-b__marca { background: var(--cafe); color: var(--texto-claro); }
.hero-b--capa .hero-b__icone:not(.hero-b__icone--sacola) { background: var(--cafe); color: var(--texto-claro); }
.hero-b--capa .hero-b__texto { background: rgba(11, 21, 52, .94); color: var(--texto-claro); }
.hero-b--capa .hero-b__oi { color: var(--areia); }
.hero-b--capa .hero-b__titulo { color: var(--texto-claro); }
.hero-b--capa .hero-b__todas { background: var(--cafe); color: var(--texto-claro); }
.hero-b--capa .hero-b__todas:hover { color: var(--areia); }

/* Assinatura do rodapé: letra fina de assinatura (como no cartão da marca) */
.rodape__assinatura { font-family: "La Belle Aurore", var(--fonte-mao); font-size: 36px; line-height: 1.3; color: var(--areia); margin-top: 14px; letter-spacing: .01em; }
.rodape__assinatura--img { display: block; align-self: center; margin-left: auto !important; margin-right: auto !important; width: 200px; max-width: 60%; aspect-ratio: 720 / 113; margin: 18px auto 0; background: var(--areia); -webkit-mask: url("../img/assinatura.png") center / contain no-repeat; mask: url("../img/assinatura.png") center / contain no-repeat; }
.rodape .rodape__direitos { margin: 22px auto 0; font-size: 11px; line-height: 1.6; letter-spacing: .02em; opacity: .55; }
/* Rodapé centralizado também no computador */
.rodape > *, .rodape p { margin-left: auto; margin-right: auto; max-width: 640px; text-align: center; }

/* ---------- Corporativo sob orçamento ---------- */
.ocasiao-b--corp { background: var(--marca); }
.ocasiao-b--corp .ocasiao-b__nome { color: #fff; }
.ocasiao-b__nome small, .atalho--corp small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .75; }
.ocasiao-b--corp .ocasiao-b__nome small { color: var(--areia); opacity: 1; }
.ocasiao-b__corp-icone { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--areia) 22%, transparent); }
.ocasiao-b__corp-icone svg { width: 24px; height: 24px; fill: var(--areia); }
.ocasiao-b--corp:hover, .ocasiao-b--corp:focus-visible { border-color: var(--areia); }
.atalho--corp { background: var(--marca); }
.atalho--corp span { background: none; top: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.painel--corp .corp { padding: 4px 20px 16px; }
.corp__intro { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--texto-suave, #5b6275); }
.corp__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo > span small { font-weight: 400; opacity: .7; }
.corp__erro { margin: 0; color: #b42318; font-size: 14px; font-weight: 600; }
.btn-principal--whats { justify-content: center; gap: 10px; width: 100%; }
.btn-principal--whats svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- Calcular frete na cesta ---------- */
.calc-frete { margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; background: var(--leite, #f7f2ea); }
.calc-frete__rotulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--cafe); margin-bottom: 8px; }
.calc-frete__rotulo svg { width: 20px; height: 20px; fill: currentColor; }
.calc-frete__linha { display: flex; gap: 8px; }
.calc-frete__linha input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #d9cfc0; border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.calc-frete__linha input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.calc-frete__linha button { padding: 0 16px; border: 0; border-radius: 12px; background: var(--marca); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.calc-frete__resultado { margin: 10px 0 0; font-size: 14px; color: var(--cafe); }
.calc-frete__resultado--erro { color: #b42318; }
.calc-frete__resultado--fora a { color: var(--marca); font-weight: 700; }
.calc-frete__resultado strong { white-space: nowrap; }

/* ---------- Confira seu pedido ---------- */
.conferir { margin: 18px 0 14px; padding: 16px; border-radius: 18px; background: var(--leite, #f7f2ea); border: 1px solid color-mix(in srgb, var(--marca) 14%, transparent); }
.conferir__titulo { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 400; font-size: 21px; color: var(--marca); }
.conferir__itens { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px dashed #d9cfc0; }
.conferir__itens li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 8px; font-size: 15px; }
.conferir__itens li:last-child { margin-bottom: 0; }
.conferir__itens small { grid-column: 1 / -1; font-size: 13px; color: var(--cafe-suave); }
.conferir__cartao { font-style: italic; }
.conferir dl { margin: 0; }
.conferir__linha { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 6px 0; font-size: 14px; }
.conferir__linha dt { color: var(--cafe-suave); }
.conferir__linha dd { margin: 0; color: var(--cafe); }
.conferir__linha--falta dd { color: #b42318; font-style: italic; }
.conferir__total { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed #d9cfc0; font-size: 14px; }
.conferir__total strong { font-size: 18px; color: var(--marca); }
.conferir__dica { margin: 10px 0 0; font-size: 13px; color: var(--cafe-suave); }

/* ---------- Foto em tela cheia ---------- */
.galeria img { cursor: zoom-in; }
.galeria-caixa::after { content: ""; position: absolute; right: 12px; bottom: 30px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
    background: rgba(255,255,255,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b1534'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.8 4.8-1.3 1.3-4.8-4.8A7.5 7.5 0 1 1 10.5 3Zm0 1.8a5.7 5.7 0 1 0 0 11.4 5.7 5.7 0 0 0 0-11.4ZM9.6 7.4h1.8v2.2h2.2v1.8h-2.2v2.2H9.6v-2.2H7.4V9.6h2.2Z'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.foto-cheia { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0d12; color: #fff; }
.foto-cheia::backdrop { background: #0b0d12; }
.foto-cheia[open] { display: block; animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.foto-cheia__trilho { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.foto-cheia__trilho::-webkit-scrollbar { display: none; }
.foto-cheia__trilho.travado { overflow-x: hidden; }
.foto-cheia__slide { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y; }
.foto-cheia__slide.ampliada { overflow: auto; display: block; touch-action: pan-x pan-y; }
.foto-cheia__slide img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.foto-cheia__slide.ampliada img { max-width: none; cursor: zoom-out; }
.foto-cheia__fechar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.foto-cheia__fechar svg { width: 24px; height: 24px; fill: #fff; }
.foto-cheia__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; z-index: 2; }
.foto-cheia__seta--ant { left: 14px; } .foto-cheia__seta--prox { right: 14px; }
.foto-cheia__seta[hidden] { display: none; }
@media (hover: none) { .foto-cheia__seta { display: none; } }
.foto-cheia__info { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: rgba(255,255,255,.8); pointer-events: none; }
.foto-cheia__info span:first-child { font-weight: 700; color: #fff; }
.foto-cheia__fechar, .foto-cheia__seta { background: rgba(0,0,0,.45); }
.foto-cheia:has(.ampliada) .foto-cheia__dica { opacity: 0; }
.foto-cheia__info span { text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: opacity .2s; }

/* Datas especiais (depois do pedido) */
.datas-esp { margin: 22px 0 6px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--leite); text-align: left; }
.datas-esp summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 15px; line-height: 1.35; }
.datas-esp summary::-webkit-details-marker { display: none; }
.datas-esp summary small { color: var(--cafe-suave); font-size: 13px; }
.datas-esp summary::after { content: "+"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--kraft-escuro); }
.datas-esp[open] summary::after { content: "–"; }
.datas-esp__icone { font-size: 22px; line-height: 1; }
.datas-esp__corpo { padding: 0 16px 16px; }
.datas-esp__linha { display: grid; grid-template-columns: 90px 1fr; gap: 6px; margin-bottom: 12px; }
.datas-esp__linha input, .datas-esp__linha select, .datas-esp__email input {
    width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel); color: var(--cafe);
}
.datas-esp__linha .datas-esp__quem { grid-column: 1 / -1; }
@media (min-width: 560px) {
    .datas-esp__linha { grid-template-columns: 1fr 80px 130px; margin-bottom: 8px; }
    .datas-esp__linha .datas-esp__quem { grid-column: auto; }
}
.datas-esp__mais { background: none; border: 0; padding: 4px 0; color: var(--cafe); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; }
.datas-esp__email { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.datas-esp__email small { font-weight: 400; color: var(--cafe-suave); }
.datas-esp__email input { margin-top: 4px; }
.datas-esp__erro { color: var(--erro); font-size: 14px; margin: 6px 0; }
.datas-esp .btn-marinho { width: 100%; margin-top: 6px; }
.datas-esp--ok { padding: 14px 16px; font-size: 15px; }

/* Voucher de boas-vindas */
.voucher-faixa {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
    padding: 9px 16px; background: var(--leite); border-bottom: 1px solid var(--linha);
    color: var(--cafe); font-size: 14px; line-height: 1.35; text-align: center;
}
.voucher-faixa__selo {
    font-family: var(--fonte-mao); font-size: 20px; line-height: 1; color: var(--kraft-escuro);
}
.voucher-faixa__bt {
    border: 1.5px solid var(--cafe); background: var(--cafe); color: var(--papel); border-radius: 999px;
    padding: 5px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.voucher-faixa__bt:hover { background: #1b2a55; }
.voucher-faixa__ok { font-weight: 700; color: var(--ok); font-size: 13px; }
.voucher-faixa--ativo { background: color-mix(in srgb, var(--ok) 8%, white); }

.voucher-cartao {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45;
    width: min(420px, calc(100% - 32px)); padding: 20px 22px 18px; border-radius: 22px;
    background: var(--papel); color: var(--cafe); box-shadow: 0 18px 48px rgba(11, 21, 52, .28);
    border: 1px dashed var(--kraft-escuro); text-align: left;
}
.voucher-cartao[hidden] { display: none; }
.voucher-cartao__selo { margin: 0 0 2px; font-family: var(--fonte-mao); font-size: 22px; color: var(--kraft-escuro); }
.voucher-cartao h2 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 22px; line-height: 1.2; }
.voucher-cartao p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.voucher-cartao .btn-marinho { width: 100%; }
.voucher-cartao .recente__fechar { position: absolute; top: 10px; right: 12px; }

.resumo--desconto { color: var(--ok); font-weight: 600; }
.resumo__voucher { margin: 2px 0 6px; font-size: 13px; color: var(--cafe-suave); text-align: center; }
.resumo__voucher-bt { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 700; color: var(--cafe); text-decoration: underline; cursor: pointer; }
.resumo__voucher-campo { display: flex; gap: 6px; justify-content: center; }
.resumo__voucher-campo input {
    width: 180px; font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--linha); border-radius: 10px; text-transform: uppercase;
}
.resumo__voucher-erro { display: block; color: var(--erro); margin-top: 4px; }
.conferir__desconto { color: var(--ok); }

/* Pergunta gentil ao sair */
.saida {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(11, 21, 52, 0); transition: background .25s ease;
}
.saida.visivel { background: rgba(11, 21, 52, .35); }
.saida__caixa {
    position: relative; width: min(460px, 100%); max-height: 92vh; overflow: auto;
    margin: 0; padding: 26px 22px max(22px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
    background: var(--papel); color: var(--cafe); box-shadow: 0 -12px 40px rgba(11, 21, 52, .25);
    transform: translateY(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.saida.visivel .saida__caixa { transform: none; opacity: 1; }
@media (min-width: 640px) {
    .saida { align-items: center; }
    .saida__caixa { border-radius: 24px; padding: 30px 28px 26px; }
}
.saida__caixa .recente__fechar { position: absolute; top: 12px; right: 14px; }
.saida__selo { margin: 0; font-family: var(--fonte-mao); font-size: 22px; color: var(--kraft-escuro); }
.saida h2 { margin: 2px 0 8px; font-family: var(--fonte-titulo); font-size: 24px; line-height: 1.2; }
.saida p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--cafe-suave); }
.saida__opcoes { display: grid; gap: 8px; }
.saida__op {
    text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linha);
    background: var(--leite); color: var(--cafe); font: inherit; font-size: 15px; cursor: pointer;
}
.saida__op:hover { border-color: var(--kraft); }
.saida__op.ativo { border-color: var(--cafe); background: var(--papel); font-weight: 700; }
.saida__mais { margin-top: 12px; }
.saida__mais label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.saida__mais small { font-weight: 400; color: var(--cafe-suave); }
.saida__mais textarea {
    width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; resize: vertical; margin-bottom: 10px;
}
.saida .btn-marinho, .saida .btn-whatsapp { width: 100%; justify-content: center; }
.layout-presente .produto__chega--prazo { color: #8a5a12; background: #f8ecd6; }
/* Indique e ganhe (tela de pedido enviado) */
.indique { margin: 18px 0 6px; padding: 16px; border-radius: 16px; background: #faf3e6; border: 1px dashed #d8c3a5; text-align: left; }
.indique__selo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a6a3a; margin: 0 0 6px; }
.indique p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.indique__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.indique__acoes .btn-whatsapp { flex: 1 1 200px; margin: 0; }
.indique__acoes .btn-copiar { flex: 0 0 auto; }
.resumo__voucher small { color: #6b6458; }

/* ---------- Página /corporativo ---------- */
.corp-pag { background: #fff; }
.corp-largura { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.corp-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; max-width: var(--largura); margin: 0 auto; }
.corp-topo__link { color: var(--cafe); font-weight: 600; text-decoration: none; border: 1px solid var(--linha); border-radius: 999px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.corp-hero { background: var(--cafe); color: #f6f0e7; padding: 56px 0 60px; }
.corp-hero h1 { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(34px, 6vw, 58px); line-height: 1.08; margin: 10px 0 16px; max-width: 16ch; }
.corp-hero__sub { font-size: 18px; line-height: 1.55; max-width: 56ch; color: #d9d5cc; margin: 0 0 26px; }
.corp-hero__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.corp-selo { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kraft); border: 1px solid rgba(216,195,165,.5); border-radius: 999px; padding: 6px 12px; margin: 0; }
.corp-selo--escuro { color: var(--kraft-escuro); border-color: var(--kraft); }
.corp-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cafe); color: #fff; border: 0; border-radius: 999px; padding: 14px 24px; font: 700 16px var(--fonte-texto); text-decoration: none; cursor: pointer; }
.corp-bt--claro { background: #f6f0e7; color: var(--cafe); }
.corp-bt--contorno { background: transparent; color: #f6f0e7; border: 1.5px solid rgba(246,240,231,.6); }
.corp-bt--grande { width: 100%; padding: 17px; font-size: 17px; margin-top: 8px; }
.corp-bt:disabled { opacity: .6; }
.corp-natal { background: #f8ecd6; color: #6b4a14; padding: 14px 0; font-size: 15.5px; line-height: 1.45; }
.corp-secao { padding: 52px 0; }
.corp-secao--leite { background: var(--leite); }
.corp-secao h2 { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(28px, 4vw, 38px); margin: 0 0 22px; }
.corp-sub { color: var(--cafe-suave); margin: -12px 0 22px; line-height: 1.5; }
.corp-momentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.corp-momento { border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; background: #fff; }
.corp-momento span { font-size: 26px; display: block; margin-bottom: 8px; }
.corp-momento strong { display: block; font-size: 17px; margin-bottom: 4px; }
.corp-momento p { margin: 0; color: var(--cafe-suave); font-size: 15px; line-height: 1.45; }
.corp-duas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.corp-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.corp-lista li { position: relative; padding-left: 30px; line-height: 1.5; font-size: 16px; }
.corp-lista li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--cafe); color: #fff; font-size: 13px; display: grid; place-items: center; }
.corp-plano { background: #fff; border: 1px solid var(--kraft); border-radius: var(--raio-grande); padding: 24px; }
.corp-plano h3 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 28px; margin: 12px 0 10px; }
.corp-plano p { line-height: 1.55; margin: 0 0 12px; }
.corp-plano__nota { color: var(--kraft-escuro); font-weight: 600; }
.corp-passos { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.corp-passos li { counter-increment: p; border-top: 2px solid var(--cafe); padding-top: 14px; }
.corp-passos li::before { content: counter(p); font-family: var(--fonte-titulo); font-size: 30px; display: block; margin-bottom: 4px; }
.corp-passos strong { display: block; margin-bottom: 4px; }
.corp-passos span { color: var(--cafe-suave); font-size: 15px; line-height: 1.45; }
.corp-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.corp-fotos figure { margin: 0; }
.corp-fotos figure > img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--raio); background: #fff; display: block; max-height: none; }
.corp-fotos figcaption { font-size: 14px; color: var(--cafe-suave); margin-top: 6px; }
.corp-form-caixa { max-width: 760px; }
.corp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.corp-erro { color: var(--erro); font-weight: 600; margin: 6px 0 0; }
.corp-nota { font-size: 13px; color: var(--cafe-suave); text-align: center; margin: 10px 0 0; }
.corp-ok { border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 24px; background: var(--leite); }
.corp-ok h3 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 26px; margin: 0 0 8px; }
.corp-rodape { border-top: 1px solid var(--linha); padding: 22px 0 34px; font-size: 14px; color: var(--cafe-suave); line-height: 1.6; }
.corp-rodape a { color: var(--cafe); }
@media (max-width: 760px) {
    .corp-hero { padding: 40px 0 44px; }
    .corp-hero__sub { font-size: 16.5px; }
    .corp-hero__acoes .corp-bt { flex: 1 1 100%; }
    .corp-secao { padding: 40px 0; }
    .corp-momentos, .corp-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .corp-duas { grid-template-columns: 1fr; }
    .corp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .corp-campos { grid-template-columns: 1fr; }
}
.corp-topo .pp-loja { margin: 0; min-width: 0; } .corp-topo .pp-loja > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corp__mais { margin: 4px 0 0; font-size: 14px; } .corp__mais a { color: var(--marca); font-weight: 600; }
.corp-topo__link--texto { pointer-events: none; }
.corp-h3 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 22px; margin: 26px 0 12px; }
.corp-caminhos { gap: 14px; }
.corp-caminho { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.corp-caminho strong { display: block; margin-bottom: 6px; }
.corp-caminho p { margin: 0; color: #5f5a52; line-height: 1.5; }
/* Página para empresas: condições, antecedência, lista e dúvidas */
.corp-condicoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .corp-condicoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.corp-cond { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.corp-cond__num { display: block; font-family: var(--fonte-titulo); font-size: 30px; line-height: 1.1; color: var(--marca); margin-bottom: 4px; }
.corp-cond strong { display: block; font-size: 15px; }
.corp-cond p { margin: 6px 0 0; font-size: 14px; color: #5f5a52; line-height: 1.45; }
.corp-tabela { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: 15px; }
.corp-tabela th, .corp-tabela td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.corp-tabela th { background: var(--leite); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #6b6458; }
.corp-tabela tr:last-child td { border-bottom: 0; }
.corp-lista-baixar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 18px; border: 1px dashed #d8c3a5; border-radius: var(--raio); background: #faf3e6; }
.corp-lista-baixar > div { flex: 1 1 320px; }
.corp-lista-baixar .corp-h3 { margin-top: 0; }
.corp-lista-baixar p { margin: 0; color: #5f5a52; line-height: 1.5; }
.corp-faq details { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 10px; }
.corp-faq summary { cursor: pointer; font-weight: 600; }
.corp-faq p { margin: 10px 0 0; color: #5f5a52; line-height: 1.55; }
.corp-prazo { display: block; margin-top: 6px; color: #8a5a12; font-size: 13px; line-height: 1.4; }
.corp-erro a { color: inherit; font-weight: 700; }
.corp-tabela { border-collapse: separate; border-spacing: 0; margin-bottom: 14px; }
.corp-plano__passos { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.corp-plano__passos li { margin-bottom: 6px; }
.corp-plano__info { font-size: 14px; color: #6b6458; margin: 0 0 10px; line-height: 1.5; }
/* Faixas de investimento (página para empresas) */
.corp-faixas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 8px; }
@media (max-width: 860px) { .corp-faixas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .corp-faixas { grid-template-columns: 1fr; } }
.corp-faixa { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.corp-faixa:hover { border-color: var(--marca); transform: translateY(-2px); }
.corp-faixa__nome { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a6a3a; }
.corp-faixa__valor { font-family: var(--fonte-titulo); font-weight: 500; font-size: 24px; color: var(--marca); line-height: 1.15; }
.corp-faixa__txt { font-size: 14px; color: #5f5a52; line-height: 1.45; flex: 1; }
.corp-faixa__cta { font-size: 13px; font-weight: 600; color: var(--marca); }
.corp-sub--peq { font-size: 13px; }
.corp-pref { border: 0; padding: 0; margin: 4px 0 14px; }
.corp-pref legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.corp-pref__op { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 8px; background: #fff; cursor: pointer; }
.corp-pref__op:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.corp-resposta { text-align: center; font-size: 14px; margin: 10px 0 4px; }
.corp-sub--peq { margin-top: 12px; }
/* Corporativo: duas linhas, exemplos e formulário em etapas */
.corp-linhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 6px; }
.corp-linha__titulo { margin: 0 0 4px; font-size: 15px; color: var(--cafe-suave); }
.corp-linha__titulo strong { display: block; font-size: 18px; color: var(--cafe); }
.corp-faixas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.corp-faixa__obs { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--leite); color: #8a6a3a; }
.corp-exemplos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.corp-exemplo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.corp-exemplo strong { display: block; font-size: 16px; }
.corp-exemplo__valor { display: block; font-size: 13px; color: #8a6a3a; font-weight: 600; margin: 2px 0 8px; }
.corp-exemplo ul { margin: 0; padding-left: 18px; color: #5f5a52; font-size: 14px; line-height: 1.55; }
.corp-passos--lista { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.corp-plano__passos li { margin-bottom: 8px; }
.corp-etapa { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin: 22px 0 10px; }
.corp-etapa:first-child { margin-top: 4px; }
.corp-etapa span { width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: var(--marca-texto); display: grid; place-items: center; font-size: 14px; }
@media (max-width: 860px) { .corp-linhas { grid-template-columns: 1fr; } .corp-exemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .corp-faixas--2 { grid-template-columns: 1fr; } .corp-exemplos { grid-template-columns: 1fr; } .corp-passos--lista { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .corp-perfil { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; } .corp-perfil legend { grid-column: 1 / -1; } }
.corp-faixa__cta { margin-top: auto; }
/* ---------- Para empresas (flutuante) ---------- */
.emp-flutuante {
    position: fixed; right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); z-index: 25;
    display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 14px; border: 0; border-radius: 999px;
    background: #0B1534; color: #F6F0E7; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(11, 21, 52, .35); transition: bottom .2s ease, opacity .25s ease, transform .25s ease;
}
.emp-flutuante[hidden] { display: none; }
.emp-flutuante svg { width: 20px; height: 20px; fill: currentColor; }
.emp-flutuante.entrar { animation: emp-entrar .35s ease; }
@keyframes emp-entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.com-sacola .emp-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 132px); }
body.com-aviso .emp-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 146px); }
body.com-aviso.com-sacola .emp-flutuante { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 212px); }
.painel--emp { background: #0B1534; color: #F6F0E7; }
@media (min-width: 700px) { .painel--emp { max-width: 520px; margin: auto; border-radius: 24px; } }
.emp-apres { position: relative; padding: 30px 24px calc(24px + env(safe-area-inset-bottom)); }
.emp-apres__fechar { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #F6F0E7; font-size: 24px; line-height: 1; cursor: pointer; }
.emp-apres__selo { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border: 1px solid rgba(216,195,165,.6); border-radius: 999px; color: #D8C3A5; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.emp-apres h2 { font-family: var(--fonte-titulo); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0 0 12px; color: #F6F0E7; padding-right: 30px; }
.emp-apres__sub { margin: 0 0 16px; color: #C9CCD8; line-height: 1.5; }
.emp-apres__sub strong { color: #F6F0E7; }
.emp-apres__lista { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.emp-apres__lista li { position: relative; padding-left: 28px; line-height: 1.4; }
.emp-apres__lista li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #D8C3A5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 16.2-4-4 1.4-1.4 2.6 2.6 6.6-6.6 1.4 1.4z' fill='%230B1534'/%3E%3C/svg%3E") center / 14px no-repeat; }
.emp-apres__natal { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: rgba(216,195,165,.14); color: #F1E3CC; font-size: 14px; }
.emp-apres__bt { display: block; text-align: center; padding: 15px; border-radius: 999px; background: #F6F0E7; color: #0B1534; font-weight: 700; text-decoration: none; }
.emp-apres__link { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 0; background: none; color: #D8C3A5; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) { body.com-recente .emp-flutuante { opacity: 0; pointer-events: none; transform: translateY(10px); } }
/* Corporativo: vídeo explicativo no canto */
.corp-video { position: fixed; top: 16px; right: 16px; z-index: 30; width: 150px; border-radius: 18px; overflow: hidden; background: #F6F0E7; box-shadow: 0 14px 36px rgba(11,21,52,.35); }
.corp-video[hidden] { display: none; }
.corp-video.entrar { animation: emp-entrar .4s ease; }
.corp-video__abrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.corp-video__abrir video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.corp-video__rotulo { display: block; padding: 8px 6px; background: #0B1534; color: #F6F0E7; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.corp-video__fechar { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(11,21,52,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.corp-video-grande { border: 0; padding: 0; background: transparent; max-width: min(420px, 92vw); width: 100%; overflow: visible; }
.corp-video-grande::backdrop { background: rgba(11,21,52,.6); }
.corp-video-grande video { display: block; width: 100%; max-height: 78dvh; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 18px; background: #F6F0E7; }
.corp-video__fechar--grande { top: -14px; right: -10px; width: 38px; height: 38px; font-size: 22px; background: #F6F0E7; color: #0B1534; }
.corp-video-grande__cta { display: block; text-align: center; margin-top: 12px; }
@media (max-width: 600px) { .corp-video { width: 108px; top: 12px; right: 12px; border-radius: 14px; } .corp-video__rotulo { font-size: 11px; padding: 6px 4px; } }
.galeria .galeria-video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; background: #f3ede4; }