/* ==========================================================================
   Doce Capricho — Componentes
   Tradução dos artboards do canvas de design para CSS.

   A regra que organiza tudo, vinda da loja física:
   parede clara dominando, UMA faixa forte por página, e toda foto de
   produto sobre branco — a mesa contra a parede.
   ========================================================================== */

/* --- Faixas de seção ----------------------------------------------------- */

.faixa {
    padding-block: var(--sp-8);
}

.faixa--parede   { background: var(--cor-parede); }
.faixa--creme    { background: var(--creme-200); }
.faixa--cacau    { background: var(--cacau-700); color: var(--creme-200); }
.faixa--rodape   { background: var(--cacau-800); color: var(--creme-200); }

/* Uma vez por página. O rosa forte não recebe texto pequeno em cima —
   os títulos aqui são grandes o bastante, e o corpo é cacau. */
.faixa--destaque { background: var(--cor-destaque); padding-top: var(--sp-6); }

.faixa--cacau h2,
.faixa--rodape h2 { color: var(--creme-200); }

.faixa--sem-topo { padding-top: 0; }

/* Guirlanda: o separador que vem da parede da loja. */
.guirlanda {
    display: block;
    width: 100%;
    height: 46px;
}

/* --- Cabeçalho ----------------------------------------------------------- */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cor-ambiente);
    border-bottom: 1px solid var(--cor-borda-suave);
}

.cabecalho__interno {
    min-height: 76px;
    /* Respiro nos dois lados: sem ele o "CONFEITARIA ARTESANAL" encostava
       na borda de baixo; só embaixo, o "doce" passava a encostar na de cima. */
    padding-block: var(--sp-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}

.cabecalho__logo { display: block; line-height: 0; }
.cabecalho__logo img { width: 168px; height: auto; }

.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.nav__links { display: flex; align-items: center; gap: var(--sp-5); }

.nav__link {
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    color: var(--cacau-700);
    text-decoration: none;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--cor-link); }

.nav__alternar { display: none; }

/* --- Abertura ------------------------------------------------------------ */

.abertura { background: var(--cor-parede); }

.abertura__grade {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-7);
    align-items: center;
    padding-block: var(--sp-6) var(--sp-8);
}

.abertura__texto { display: flex; flex-direction: column; gap: var(--sp-5); }

.abertura__selo { display: flex; align-items: center; gap: var(--sp-3); }

/* A frase da marca no topo da home é <p> (o h1 é a linha com as cidades),
   mas com a cara de título. :where() zera a especificidade: .capa__titulo e
   .abertura__titulo continuam decidindo cor e tamanho. */
:where(.titulo-marca) {
    font-family: var(--fonte-display);
    font-weight: var(--peso-regular);
    line-height: var(--altura-apertada);
    color: var(--cacau-800);
    text-wrap: balance;
    max-width: none;
}
.abertura__selo img { width: 46px; height: auto; }

.abertura__titulo {
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.125rem);
    line-height: 1.05;
}

.abertura__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* A "mesa" do salão: a foto sempre sobre branco, com a madeira embaixo. */
.mesa { display: flex; flex-direction: column; align-items: center; }

.mesa__tampo {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: var(--cor-mesa);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-xl);
    overflow: hidden;
}

.mesa__tampo img { width: 100%; height: 100%; object-fit: cover; }
.mesa__pe { width: 78%; height: 16px; border-radius: 0 0 14px 14px; background: var(--dc-madeira); }

/* --- Capa: foto em largura total -----------------------------------------
   A foto é o fundo; o texto vai por cima, sobre um véu cacau que escurece
   só o lado do texto. Branco sobre o véu passa em contraste com qualquer
   foto — testado com vitrine clara e cheia de detalhe, o pior caso.
   O véu é cacau, não preto: preto acinzenta o doce e esfria a paleta.   */

.capa {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 78vh, 760px);
    overflow: hidden;
    background: var(--cacau-800);
    color: var(--creme-50);
}

.capa__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.capa__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(58, 30, 10, .82) 0%,
        rgba(58, 30, 10, .62) 38%,
        rgba(58, 30, 10, .12) 72%,
        rgba(58, 30, 10, 0) 100%);
}

.capa__conteudo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-block: var(--sp-8);
}

.capa__conteudo > * { max-width: 34rem; }

.capa__sobretitulo { color: var(--rosa-200); }

.capa__titulo {
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
    line-height: 1.02;
    color: var(--dc-branco);
    text-shadow: 0 2px 24px rgba(58, 30, 10, .35);
}

.capa__texto { font-size: var(--txt-lg); color: var(--creme-100); }

/* Botão para fundo escuro: contorno creme, sem preenchimento. */
.btn--claro {
    background-color: transparent;
    border-color: rgba(255, 242, 228, .75);
    color: var(--creme-50);
}

.btn--claro:hover {
    background-color: rgba(255, 253, 251, .14);
    border-color: var(--dc-branco);
    color: var(--dc-branco);
}

/* Botão sólido na camada "mesa" (branco): a segunda ação da capa, ao lado da
   principal em rosa. Chama o clique sobre a foto escura sem disputar com o
   rosa, que é a ação principal (docs/design.md). */
.btn--mesa {
    background-color: var(--cor-mesa);
    border-color: var(--cor-mesa);
    color: var(--cor-texto);
}

.btn--mesa:hover {
    background-color: var(--rosa-100);
    border-color: var(--rosa-100);
    color: var(--cor-texto);
}

/* --- Cabeçalho de seção -------------------------------------------------- */

.secao__cabeca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    text-align: center;
}

.secao__cabeca--lado {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
}

.ornamento { display: block; }

/* --- Cartões ------------------------------------------------------------- */

.cartao {
    background: var(--cor-mesa);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-lg);
    overflow: hidden;
}

.faixa--destaque .cartao { border-color: transparent; }

/* --- Universos ----------------------------------------------------------- */

.universos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.universo {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.universo:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-md);
    color: inherit;
}

.universo__capa {
    aspect-ratio: 16 / 9;
    overflow: hidden;   /* sem isso, foto de outra proporção estica a caixa */
    display: grid;
    place-items: center;
    background: var(--rosa-100);
}

.universo__capa img { width: 100%; height: 100%; object-fit: cover; }

.universo__corpo { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.universo__nome  { font-family: var(--fonte-display); font-size: var(--txt-xl); color: var(--cacau-800); }
.universo__desc  { max-width: none; font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* --- Produtos ------------------------------------------------------------ */

.vitrine {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

.produto { display: flex; flex-direction: column; }

.produto__foto {
    aspect-ratio: 4 / 3;
    overflow: hidden;   /* idem: foto em pé não pode esticar o cartão */
    display: grid;
    place-items: center;
    background: var(--rosa-100);
}

.produto__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Quem chega pela home em /vitrine#produto-x: o cartão não pode parar
   escondido sob o cabeçalho fixo (76px), e precisa se destacar dos vizinhos
   — senão a pessoa não sabe qual dos doze era o que clicou. */
.produto { scroll-margin-top: 104px; }
.produto:target { box-shadow: 0 0 0 3px var(--cor-acao), var(--sombra-lg); }

.produto__link { color: inherit; text-decoration: none; }
.produto__link:hover { color: var(--cor-link); }
a.produto__foto { display: grid; }

.produto__corpo {
    flex-grow: 1;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.produto__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }

.produto__nome {
    font-family: var(--fonte-display);
    font-size: var(--txt-xl);
    font-weight: var(--peso-regular);
    line-height: 1.15;
    color: var(--cacau-800);
}

.produto__desc {
    flex-grow: 1;
    max-width: none;
    font-size: var(--txt-sm);
    line-height: 1.55;
    color: var(--cor-texto-suave);
}

.produto__acao {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    text-decoration: none;
}

.etiqueta {
    flex-shrink: 0;
    margin-top: 4px;
    padding: 4px 12px;
    border: 1px solid var(--dc-madeira);
    border-radius: var(--raio-pill);
    background: var(--creme-200);
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    color: var(--cacau-700);
    white-space: nowrap;
}

/* Produto em evidência: foto e texto lado a lado. */
.produto--evidencia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.produto--evidencia .produto__foto { aspect-ratio: auto; min-height: 380px; }

.produto--evidencia .produto__corpo {
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-7);
}

.produto--evidencia .produto__nome { font-size: var(--txt-3xl); }
.produto--evidencia .produto__desc { font-size: var(--txt-base); color: var(--cacau-700); }

/* --- Unidades ------------------------------------------------------------ */

.unidades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
}

.unidade { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.unidade__nome { font-size: var(--txt-2xl); }
.unidade__nome a { color: inherit; text-decoration: none; }
.unidade__nome a:hover { color: var(--cor-link); text-decoration: underline; }
.unidade__dados { display: flex; flex-direction: column; gap: var(--sp-3); }

.unidade__linha {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--txt-base);
    line-height: 1.5;
}

.unidade__linha svg { flex-shrink: 0; margin-top: 2px; color: var(--cor-acao); }
.unidade__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Rodapé -------------------------------------------------------------- */

.rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sp-8);
    align-items: start;
}

.rodape__marca { width: 190px; height: auto; }

.rodape__assinatura {
    margin-top: var(--sp-4);
    font-family: var(--fonte-display);
    font-style: italic;
    font-size: var(--txt-lg);
    color: var(--creme-100);
}

.rodape__colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.rodape__coluna  { display: flex; flex-direction: column; gap: var(--sp-3); }
.rodape__titulo  { font-size: var(--txt-xs); font-weight: var(--peso-semi); letter-spacing: var(--tracking-largo); text-transform: uppercase; color: var(--rosa-200); }
.rodape__link    { font-size: var(--txt-sm); color: var(--creme-200); text-decoration: none; }
.rodape__link:hover { color: var(--dc-branco); }
.rodape__texto   { max-width: none; font-size: var(--txt-sm); line-height: 1.5; color: var(--creme-200); }

.rodape__base {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--cacau-600);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
    font-size: var(--txt-sm);
    color: var(--cacau-300);
}

.rodape__credito { color: var(--creme-200); font-weight: var(--peso-semi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cacau-500); }
.rodape__credito:hover { color: var(--dc-branco); text-decoration-color: currentColor; }

/* --- Chamada final ------------------------------------------------------- */

.chamada {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-7);
}

.chamada__texto { flex: 1 1 24rem; display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- Avisos do topo -------------------------------------------------------
   Faixa fina, acima do cabeçalho. "Novidade" fica na cor da parede, para não
   disputar com a faixa forte da página; "atenção" vai para o cacau, que é o
   que se destaca sem gritar.                                              */

.avisos { font-size: var(--txt-sm); line-height: 1.4; text-align: center; }

.avisos__item { max-width: none; padding: var(--sp-2) var(--gutter); background: var(--cor-parede); color: var(--cacau-800); }
.avisos__item + .avisos__item { border-top: 1px solid var(--rosa-200); }
.avisos__item--atencao { background: var(--cacau-800); color: var(--creme-100); }
.avisos__item--atencao + .avisos__item { border-top-color: var(--cacau-600); }
.avisos__loja { font-weight: var(--peso-bold); }

/* --- Homologação: prévia das encomendas e "Site em testes" (Encomendas\Previa) ---
   A faixa da prévia é só para a equipe logada; fica presa no alto junto com o
   cabeçalho (o .topo-previa segura os dois). A "Site em testes" é discreta,
   como um aviso, e rola com a página. */
.topo-previa { position: sticky; top: 0; z-index: 30; }
.topo-previa .cabecalho { position: static; }
.faixa-previa {
    max-width: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--sp-3);
    padding: var(--sp-2) var(--gutter);
    background: var(--cacau-800);
    color: var(--creme-100);
    font-size: var(--txt-sm);
    line-height: 1.35;
    text-align: center;
}
.faixa-previa a { color: var(--dc-branco); text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.faixa-previa__mais { color: var(--creme-200, var(--creme-100)); }
.faixa-testes {
    max-width: none;
    margin: 0;
    padding: var(--sp-2) var(--gutter);
    background: var(--creme-100);
    border-bottom: 1px solid var(--cor-borda-suave);
    color: var(--cacau-800);
    font-size: var(--txt-sm);
    line-height: 1.4;
    text-align: center;
}
.faixa-testes a { color: var(--cor-link); font-weight: var(--peso-semi); }
@media (max-width: 40rem) { .faixa-previa__mais { display: none; } }

/* --- Banner sazonal ------------------------------------------------------ */

.faixa--banner { padding-bottom: 0; }

.banner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    overflow: hidden;
}

.banner--sem-foto { grid-template-columns: minmax(0, 1fr); }

.banner__foto { min-height: 280px; background: var(--cor-mesa); }
.banner__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.banner__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-7);
}

.banner__titulo { font-size: var(--txt-3xl); }

/* --- Instagram ----------------------------------------------------------- */

.instagram {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-3);
}

.instagram__post {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--raio-md);
    background: var(--cor-mesa);
}

.instagram__post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transicao);
}

.instagram__post:hover img { transform: scale(1.04); }

.instagram__video {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--raio-pill);
    background: rgba(58, 30, 10, .55);
    color: var(--dc-branco);
    font-size: 11px;
}

/* --- Links ----------------------------------------------------------------
   A página do link da bio (/links). Uma coluna, para o polegar.

   A faixa forte da página é o topo em rosa da marca — é a primeira coisa que
   o cliente vê ao sair do Instagram e confirma "é a Doce Capricho". Por cima
   dela só vai o que suporta o rosa: logotipo e selo em cacau e a tagline em
   cacau a 24px ou mais (4,38:1 — aprovado só em texto grande, ver tokens.css).
   O selo do artboard ficou de fora: somado ao logotipo, a faixa passava de
   um terço da tela e o primeiro botão de pedir caía abaixo da dobra.
   Todo o resto fica na parede clara, com os cartões em branco.

   A coluna para em 30rem mesmo no computador: a página é a mesma lista do
   celular, e esticar botão de 1200px só afasta o olho do texto.          */

.pagina-links { background: var(--cor-ambiente); }

.links__topo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--gutter) var(--sp-8);
    background: var(--cor-marca);
    text-align: center;
}

.links__marca   { line-height: 0; }
.links__marca img { width: 196px; height: auto; }

.links__tagline {
    max-width: 18em;
    font-family: var(--fonte-display);
    font-size: 1.5rem;              /* 24px: o mínimo para cacau sobre o rosa */
    font-style: italic;
    font-weight: var(--peso-medio);
    line-height: 1.25;
    color: var(--cacau-800);
    text-wrap: balance;
}

/* A folha clara sobe sobre o rosa, como no artboard — a curva é o que
   separa a marca do conteúdo sem precisar de uma terceira cor.          */
.links__folha {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    width: 100%;
    max-width: 30rem;
    margin: calc(-1 * var(--sp-6)) auto 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
    background: var(--cor-ambiente);
    border-radius: var(--raio-xl) var(--raio-xl) 0 0;
}

.links__lista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Linha inteira tocável: ícone, rótulo, seta. 60px de altura — é o botão
   que o polegar procura primeiro, maior que o mínimo de 44px.          */
.links__botao {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 60px;
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--cacau-200);
    border-radius: var(--raio-lg);
    background: var(--cor-mesa);
    color: var(--cacau-800);
    font-weight: var(--peso-semi);
    text-decoration: none;
    transition: border-color var(--transicao), background-color var(--transicao);
}

.links__botao:hover { border-color: var(--cacau-400); color: var(--cacau-800); }
.links__botao > svg { flex-shrink: 0; color: var(--cor-acao); }
.links__botao > svg:last-child { margin-left: auto; color: var(--cacau-400); }

.links__botao--primario,
.links__botao--primario:hover { border-color: transparent; background: var(--cor-acao); color: var(--cor-acao-texto); }
.links__botao--primario:hover { background: var(--cor-acao-hover); }
.links__botao--primario > svg,
.links__botao--primario > svg:last-child { color: inherit; }

.links__rotulo { display: flex; flex-direction: column; font-size: var(--txt-base); line-height: 1.3; }
.links__sub    { font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }

/* Banner da temporada, compacto: miniatura ao lado do texto. */
.links__banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3);
    color: var(--cor-texto);
    text-decoration: none;
}

a.links__banner:hover { border-color: var(--cor-borda); color: var(--cor-texto); }
.links__banner--sem-foto { padding: var(--sp-4) var(--sp-5); }

.links__banner-foto {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--raio-md);
}

.links__banner-texto  { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.links__banner-titulo { font-family: var(--fonte-display); font-size: var(--txt-xl); line-height: 1.15; color: var(--cacau-800); }
.links__banner-desc   { font-size: var(--txt-sm); line-height: 1.4; color: var(--cor-texto-suave); }
.links__banner-acao   { font-size: var(--txt-sm); font-weight: var(--peso-bold); color: var(--cor-link); }

/* Uma loja por cartão, na ordem do painel. */
/* Respiro lateral menor que o de cima: a 360px é o que deixa Encomendas e
   Como chegar lado a lado em vez de empilhados. */
.links__loja      { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
.links__loja-nome { font-size: var(--txt-2xl); }
.links__loja-dados { display: flex; flex-direction: column; gap: var(--sp-2); }
.links__loja .unidade__linha { font-size: var(--txt-sm); }
.links__suave     { color: var(--cor-texto-suave); }

/* Pedir ocupa a linha toda; Encomendas e Como chegar dividem a de baixo.
   Os botões ganham 48px de altura: a margem entre dois alvos lado a lado
   é onde o dedo erra.                                                   */
.links__acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--sp-2);
}

.links__acoes .btn   { min-height: 48px; padding-inline: var(--sp-3); font-size: var(--txt-sm); }
.links__acoes .btn svg { flex-shrink: 0; }
.links__acao--larga  { grid-column: 1 / -1; font-size: var(--txt-base) !important; }

.links__rodape { max-width: none; text-align: center; font-size: var(--txt-sm); }
.links__rodape--legal { margin-top: calc(-1 * var(--sp-3)); font-size: var(--txt-xs); }
.links__rodape--legal a { font-weight: var(--peso-regular); color: var(--cor-texto-suave); }

.links__rodape a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--sp-3);
    font-weight: var(--peso-semi);
}

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 62rem) {
    .abertura__grade { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .universos,
    .vitrine         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .produto--evidencia { grid-template-columns: minmax(0, 1fr); }
    .produto--evidencia .produto__foto { aspect-ratio: 16 / 9; min-height: 0; }
    .rodape__grade   { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .banner          { grid-template-columns: minmax(0, 1fr); }
    .banner__foto    { min-height: 0; aspect-ratio: 16 / 9; }
    /* Tablet: 3 fileiras de 3 (as 9 mais recentes). O que fica escondido
       não baixa a foto: loading="lazy" não busca imagem fora da tela. */
    .instagram       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .instagram > li:nth-child(n + 10) { display: none; }
}

@media (max-width: 48rem) {
    .faixa { padding-block: var(--sp-7); }
    /* Celular: "Pedir agora" fica sempre à mão, compacto; os links moram
       num painel que desce do cabeçalho quando o ☰ é tocado. Antes o botão
       ☰ aparecia sem fazer nada e o menu inteiro sumia no celular. */
    .nav             { gap: var(--sp-2); }
    .nav__pedir      { min-height: 40px; padding-inline: var(--sp-4); font-size: var(--txt-sm); }
    .nav__alternar   { display: grid; place-items: center; width: 44px; height: 44px; border: none; background: transparent; color: var(--cacau-800); cursor: pointer; }
    .nav__links      { display: none; }
    .nav--aberta .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-2) var(--sp-4) var(--sp-4);
        background: var(--cor-ambiente);
        border-bottom: 1px solid var(--cor-borda-suave);
        box-shadow: 0 16px 32px rgba(58, 30, 10, .12);
    }
    .nav--aberta .nav__link { padding: var(--sp-3) var(--sp-2); font-size: var(--txt-lg); border-bottom: 1px solid var(--cor-borda-suave); }
    .nav--aberta .nav__link:last-child { border-bottom: none; }
    .universos,
    .vitrine,
    .unidades        { grid-template-columns: minmax(0, 1fr); }
    .rodape__colunas { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .secao__cabeca--lado { flex-direction: column; align-items: flex-start; text-align: left; }
    .produto--evidencia .produto__corpo { padding: var(--sp-5); }
    .chamada { padding: var(--sp-5); }
    .banner__texto { padding: var(--sp-5); }
    /* Celular: 3 × 3, como a grade do perfil no app — mais baixa que as
       antigas 3 fileiras de 2, e o "Encomendar" logo abaixo fica mais perto. */
    .instagram     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .instagram__post { border-radius: var(--raio-sm); }
    .instagram__video { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 9px; }

    /* Celular: a foto em cima, inteira e sem nada por cima; o texto embaixo,
       no cacau da marca (issue #3, 27/09/2026). Com o texto sobre a foto em
       pé, o recorte do centro mostrava teto e janela e, conforme a foto, o
       texto caía na parte clara e perdia a leitura. Assim vale para qualquer foto. */
    .capa          { display: block; min-height: 0; }
    .capa__foto    { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
    .capa__veu     { display: none; }
    .capa__conteudo { padding-block: var(--sp-6) var(--sp-7); gap: var(--sp-4); }
    .capa__titulo  { text-shadow: none; }
    .capa__texto   { font-size: var(--txt-base); }
}

/* --- Escolha de loja (janela) --------------------------------------------
   <dialog> nativo. No computador, uma caixa no centro; no celular, um painel
   que sobe da base, perto do polegar. O dialog não tem padding: o espaço
   fica na .escolha__caixa, para que um toque no fundo escurecido (o próprio
   dialog) seja distinguível de um toque dentro da caixa.                 */

.escolha {
    width: min(34rem, calc(100% - 2 * var(--sp-4)));
    max-height: calc(100dvh - 2 * var(--sp-5));
    margin: auto;           /* o reset de base.css zera a margem que centraliza o dialog */
    padding: 0;
    border: none;
    border-radius: var(--raio-xl);
    background: var(--cor-mesa);
    color: var(--cor-texto);
    box-shadow: 0 24px 64px rgba(58, 30, 10, .28);
}

.escolha::backdrop { background: rgba(58, 30, 10, .55); }

html:has(.escolha[open]) { overflow: hidden; }

.escolha__caixa { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6); }

.escolha__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.escolha__titulo { font-size: var(--txt-2xl); line-height: 1.15; }
.escolha__titulo:focus { outline: none; }  /* recebe o foco ao abrir só para o leitor de tela começar por ele */
.escolha__produto { margin-top: var(--sp-2); font-size: var(--txt-sm); color: var(--cor-texto-suave); }

.escolha__fechar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cacau-700);
    cursor: pointer;
}

.escolha__fechar:hover { background: var(--cor-parede); }

.escolha__lojas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.escolha__loja {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-lg);
}

.escolha__loja--lembrada { border-color: var(--cor-borda); background: var(--cor-ambiente); }

.escolha__dados { display: flex; flex-direction: column; gap: var(--sp-1); }
.escolha__lembrada { font-size: var(--txt-xs); font-weight: var(--peso-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-link); }
.escolha__nome { font-family: var(--fonte-display); font-size: var(--txt-xl); font-weight: var(--peso-medio); line-height: 1.2; }
.escolha__endereco { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

.escolha__situacao { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.escolha__situacao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cacau-300); }
.escolha__situacao--aberta { color: var(--cor-sucesso); font-weight: var(--peso-semi); }
.escolha__situacao--aberta::before { background: var(--cor-sucesso); }

.escolha__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.escolha__whatsapp { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--txt-sm); font-weight: var(--peso-semi); color: var(--cor-link); }

.escolha__ajuda { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* O caminho da encomenda: separado das lojas por uma linha, com cara de
   atalho — não é uma terceira loja. */
.escolha__encomenda {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--raio-lg);
    background: var(--cor-parede);
    color: var(--cor-texto);
    font-size: var(--txt-sm);
    text-decoration: none;
}
.escolha__encomenda strong { display: block; font-size: var(--txt-base); color: var(--cacau-800); }
.escolha__encomenda > svg:first-child { color: var(--rosa-700); }
.escolha__encomenda:hover { background: var(--rosa-200); }

@media (max-width: 48rem) {
    /* Painel que sobe da base. */
    .escolha {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: var(--raio-xl) var(--raio-xl) 0 0;
        max-height: 92dvh;
    }
    .escolha__caixa { padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); gap: var(--sp-4); }
    .escolha__titulo { font-size: var(--txt-xl); }
    .escolha__loja { padding: var(--sp-4); }
    .escolha__acoes .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
    .escolha[open] { animation: escolha-entra .18s ease-out; }
    @media (max-width: 48rem) {
        .escolha[open] { animation-name: escolha-sobe; animation-duration: .22s; }
    }
}

@keyframes escolha-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes escolha-sobe  { from { transform: translateY(100%); } }

/* "Pedir agora" do cabeçalho numa linha só, mesmo no celular de 360 px. */
.nav__pedir { white-space: nowrap; }
@media (max-width: 23rem) { .nav__pedir { padding-inline: var(--sp-4); } }

/* O Docinho, mascote (partials/mascote.php). Apoio, nunca no lugar do logo
   (docs/design.md, regra 9). Balança devagar — sobe e desce 7 px e inclina
   1,2°, em 2,4 s — por CSS, sem carregar o player de Lottie do kit. */
.mascote { display: block; height: auto; max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
    .mascote { animation: mascote-flutua 2.4s ease-in-out infinite; }
}

@keyframes mascote-flutua {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-7px) rotate(1.2deg); }
}