/* Páginas públicas (consumidor/lojista): tokens, fontes, barra, botões, chips, rodapé, toast. Ver DESIGN.md. */
/* Fredoka e Nunito (SIL OFL), latin, auto-hospedadas em public/fonts */
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('/fonts/fredoka/fredoka-600.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('/fonts/fredoka/fredoka-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('/fonts/nunito/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('/fonts/nunito/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('/fonts/nunito/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/fonts/nunito/nunito-800.woff2') format('woff2'); }

:root {
    --creme: #fff6e3;
    --creme-2: #ffeccb;
    --branco: #ffffff;
    --chocolate: #4a2c1a;
    --chocolate-2: #7a5a48;
    --ceu: #9bdcf7;
    --ceu-claro: #cdeefb;
    --sol: #ffc61a;
    --azul: #1d4fa3;
    --azul-escuro: #163d7f;
    --erro: #b3261e;
    --linha: rgba(74, 44, 26, .14);
    --chocolate-sobre-sol: #5a4200; /* texto de apoio sobre o amarelo */
    --rosa: #f6b8c4;  /* só nas linhas da parede de sabores (home) */
    --limao: #cde89a; /* idem */

    --display: 'Fredoka', 'Trebuchet MS', sans-serif;
    --corpo: 'Nunito', system-ui, sans-serif;

    --sombra: 0 8px 24px rgba(74, 44, 26, .12);
    --sombra-alta: 0 16px 40px rgba(74, 44, 26, .18);
    --raio: 20px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--chocolate) var(--creme);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--creme);
    color: var(--chocolate);
    font-family: var(--corpo);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--sol);
    color: var(--chocolate);
}

:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 3px;
}

[x-cloak] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

h1,
h2,
h3,
p {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    width: min(1200px, 100% - 32px);
    margin-inline: auto;
}

/* ---------- menu: pílula creme no fluxo da página (ocupa o próprio espaço, como a barra antiga) e sticky ao rolar ---------- */
.menu {
    position: sticky;
    top: 0; /* o padding de 16px já afasta a pílula do topo; top: 16 somava e ela ficava a 32px */
    z-index: 20;
    display: flex;
    justify-content: center;
    height: 72px; /* fixa: a pílula encolhe ao rolar sem a página dar um pulo */
    padding: 8px 16px 0; /* a pílula fica a 8px do topo */
    margin-bottom: -72px; /* o banner começa no topo, por trás da pílula (8 + 64); o sticky continua valendo */
    transition: top .3s ease;
}

.menu__pilula {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 64px;
    padding: 0 8px 0 10px;
    background: var(--branco); /* branca em todas as páginas; creme sumia no fundo creme do catálogo */
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(74, 44, 26, .10);
    transition: box-shadow .3s ease, height .3s ease, padding .3s ease, gap .3s ease;
}

/* grudada no topo: sombra mais forte para descolar do conteúdo que passa por baixo */
.menu--rolou .menu__pilula {
    box-shadow: 0 12px 36px rgba(74, 44, 26, .22);
}

/* logo empilhado: "Sorvetes" pequeno em cima, "Raio de Luz" em azul embaixo (spec do dono) */
.menu__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--chocolate);
    text-decoration: none;
}

.menu__logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.menu__logo-texto {
    display: flex;
    flex-direction: column;
    max-width: 140px;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    transition: opacity .2s, max-width .3s ease;
}

.menu__logo-texto small {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.menu__logo-texto strong {
    font-family: var(--display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.5px;
    color: var(--azul);
}

.menu__links {
    display: none;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    color: var(--chocolate);
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

.menu__links a:hover {
    color: var(--azul);
}

.menu__links a[aria-current="page"] {
    background: var(--ceu);
    color: var(--chocolate);
}

/* atalho do painel, só para quem está logado (no lugar do compartilhar) */
.menu__painel-btn {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid var(--linha);
    border-radius: 999px;
    color: var(--chocolate);
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.menu__painel-btn:hover {
    border-color: var(--azul);
    color: var(--azul);
}

.menu__painel-btn svg {
    width: 18px;
    height: 18px;
}

.fim__restrito {
    opacity: .7;
}

.menu__share {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chocolate);
    align-items: center;
    justify-content: center;
    transition: background .12s;
}

.menu__share:hover {
    background: var(--creme-2);
}

.menu__share svg {
    width: 20px;
    height: 20px;
}

.menu__cta {
    display: none;
    align-items: center;
    padding: 0 24px;
    min-height: 48px;
    border-radius: 999px;
    background: var(--azul);
    color: var(--branco);
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
}

.menu__cta:hover,
.menu__cta[aria-current="page"] {
    background: var(--chocolate);
}

/* celular: só o logo e o botão do menu */
.menu__abrir {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--azul);
    color: var(--branco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu__abrir svg {
    width: 22px;
    height: 22px;
}

/* painel do celular: tela cheia em chocolate, links grandes, CTA amarelo no pé (spec do dono) */
.menu__painel {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--chocolate);
    color: var(--creme);
}

.menu__painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 8px 0 10px;
}

.menu__painel-topo .menu__logo {
    color: var(--creme);
}

.menu__painel-topo .menu__logo-texto strong {
    color: var(--sol);
}

.menu__fechar {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--creme);
    color: var(--chocolate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu__fechar svg {
    width: 22px;
    height: 22px;
}

.menu__painel-links {
    list-style: none;
    margin: auto 0;
    padding: 0 10px;
    display: grid;
    gap: 6px;
}

.menu__painel-links a {
    display: block;
    padding: 6px 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--creme);
    text-decoration: none;
}

.menu__painel-links a[aria-current="page"] {
    color: var(--sol);
}

.menu__painel-pe {
    display: grid;
    gap: 14px;
    padding: 0 10px 8px;
}

.menu__painel-pe .btn--sol {
    background: var(--sol);
    border-color: var(--sol);
    color: var(--chocolate);
}

.menu__painel-pe .btn--sol:hover {
    background: var(--creme);
    border-color: var(--creme);
}

.menu__painel-share {
    justify-self: center;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--creme);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.sem-scroll {
    overflow: hidden;
}

@media (min-width: 900px) {
    .menu {
        padding-top: 8px;
    }

    .menu__pilula {
        width: auto;
        height: 64px;
        gap: 28px;
        padding: 0 8px 0 14px;
    }

    .menu__logo {
        margin-right: 12px;
    }

    .menu__logo img {
        width: 48px;
        height: 48px;
    }

    .menu__logo-texto strong {
        font-size: 22px;
    }

    .menu__links,
    .menu__share,
    .menu__painel-btn,
    .menu__cta {
        display: inline-flex;
    }

    .menu__abrir {
        display: none;
    }

    .menu__logo img,
    .menu__links a,
    .menu__cta {
        transition: color .12s, background .12s, width .3s ease, height .3s ease, font-size .3s ease, padding .3s ease, min-height .3s ease;
    }

    /* rolou: a pílula encolhe para 52px e fica só com o mascote, os links e o CTA (spec 11c) */
    .menu--rolou {
        top: 4px; /* rolada, a pílula fica a 12px do topo */
    }

    .menu--rolou .menu__pilula {
        height: 52px;
        gap: 20px;
        padding: 0 6px 0 8px;
    }

    .menu--rolou .menu__logo {
        margin-right: 0;
    }

    .menu--rolou .menu__logo img {
        width: 42px;
        height: 42px;
    }

    .menu--rolou .menu__logo-texto {
        max-width: 0;
        opacity: 0;
        pointer-events: none;
    }

    .menu--rolou .menu__links a {
        min-height: 36px;
        font-size: 16px;
    }

    .menu--rolou .menu__cta {
        min-height: 40px;
        padding: 0 18px;
        font-size: 16px;
    }
}


/* entre 900 e 1100px a pílula não cabe com "Nossa história": fica só o mascote e o espaço aperta */
@media (min-width: 900px) and (max-width: 1099px) {
    .menu__pilula {
        gap: 14px;
    }

    .menu__logo {
        margin-right: 0;
    }

    .menu__logo-texto {
        display: none;
    }

    .menu__links {
        gap: 0;
    }

    .menu__links a {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu,
    .menu__pilula,
    .menu__logo img,
    .menu__logo-texto,
    .menu__links a,
    .menu__cta,
    .menu__share {
        transition: none;
    }
}

/* ---------- botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--chocolate);
    border-radius: 999px;
    background: var(--branco);
    color: var(--chocolate);
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s, transform .12s, box-shadow .12s;
}

.btn:hover {
    background: var(--creme-2);
}

.btn:active {
    transform: translateY(1px);
}

.btn--pri {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--branco);
    box-shadow: 0 6px 16px rgba(29, 79, 163, .3);
}

.btn--pri:hover {
    background: var(--azul-escuro);
    border-color: var(--azul-escuro);
}

.btn--pri:disabled {
    opacity: .7;
    cursor: progress;
}

.btn--grande {
    min-height: 54px;
    padding: 0 26px;
    font-size: 19px;
}

.btn--icone {
    width: 44px;
    padding: 0;
}

.btn--texto {
    border-color: transparent;
    background: transparent;
    padding: 0 10px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.btn--texto.btn--icone {
    text-decoration: none;
}

.btn--texto:hover {
    background: var(--creme-2);
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .02em;
    background: var(--sol);
    color: var(--chocolate);
    border: 2px solid var(--sol);
}

.chip--fechada {
    background: transparent;
    border-color: var(--linha);
    color: var(--chocolate-2);
}

/* ---------- rodapé e toast ---------- */
/* a faixa amarela pinta o fundo num ::before em z-index -2, abaixo da marca d'água do .fim (-1):
   assim o mascote em traço invade a faixa e o texto dela continua por cima */
.pe {
    position: relative;
    color: var(--chocolate);
}

.pe::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0;
    background: var(--sol);
}

.pe__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    font-weight: 700;
    font-size: 14px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--chocolate);
    color: var(--branco);
    border-radius: 999px;
    box-shadow: var(--sombra-alta);
    font-weight: 700;
}

.toast svg {
    width: 18px;
    height: 18px;
    color: var(--sol);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn {
        transition: none;
    }
}

/* ---------- hero do céu: título em escala de cartaz, quarto de sol e um packshot cortado pela moldura (lojas, seja-parceiro) ---------- */
.ceu {
    position: relative;
    background: var(--ceu);
    border-radius: 0 0 36px 36px;
    overflow: hidden;
}

.ceu__inner {
    position: relative;
    z-index: 2;
    min-height: 440px;
    padding: 112px 0 40px; /* começa 40px abaixo da pílula (8 + 64 + 40) */
}

.ceu__texto {
    max-width: 82%;
}

.ceu h1,
.ceu .ceu__titulo {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(44px, 8.4vw, 118px);
    line-height: .94;
    letter-spacing: -.015em;
}

.ceu h1 em,
.ceu .ceu__titulo em {
    font-style: normal;
    color: var(--azul);
}

.ceu__sub {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--chocolate);
    max-width: 26ch;
}

.ceu__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.ceu__status {
    font-weight: 700;
    font-size: 15px;
}

.erro {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--branco);
    color: var(--erro);
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--sombra);
}

/* arte: um quarto de sol amarelo no canto e um produto só, cortado pela moldura */
.ceu__arte {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.disco {
    position: absolute;
    right: -24vw;
    bottom: -30vw;
    width: 82vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sol);
}

.produto {
    position: absolute;
    right: -16vw;
    bottom: -14vw;
    height: 70%;
    width: auto;
    transform: rotate(-16deg);
    filter: drop-shadow(0 14px 22px rgba(74, 44, 26, .3));
}

@media (min-width: 900px) {
    .ceu__inner {
        min-height: 640px;
        display: flex;
        align-items: center;
        padding: 112px 0 64px; /* começa 40px abaixo da pílula (8 + 64 + 40) */
    }

    /* o texto atravessa a coluna do produto: é a sobreposição que faz a composição */
    .ceu__texto {
        max-width: 68%;
    }

    .ceu__sub {
        font-size: 19px;
    }

    .disco {
        right: -160px;
        bottom: -360px;
        width: 860px;
    }

    .produto {
        right: 3%;
        bottom: -15%;
        height: 114%;
    }
}


/* ---------- fim de página: marca | navegue | contato, sobre o creme, antes da faixa amarela ---------- */
.fim {
    position: relative;
    border-top: 1px solid var(--linha);
    padding: 36px 0 40px;
}

/* marca d'água: o mascote em traço (logo_traços.png) em chocolate quase apagado, por trás de tudo (z-index negativo).
   A caixa do pseudo fica dentro do bloco embaixo e à direita (não estica a página); só o topo vaza para a seção
   anterior. A imagem é deslocada para fora da caixa com background-position, e é isso que a corta embaixo e à direita. */
.fim::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -56px; /* desce até o fim da faixa amarela do rodapé (18 + 20 + 18) */
    width: 360px;
    height: 420px;
    background: url('/images/mascote-tracos.webp') right -70px bottom -90px / auto 420px no-repeat;
    opacity: .1;
    pointer-events: none;
}

.fim__inner {
    position: relative;
    display: grid;
    gap: 28px;
}


/* no celular o contato vem primeiro, depois o delivery: é o que se procura no fim da página */
.fim__contato {
    order: -2;
}

.fim__delivery {
    order: -1;
}




.fim__col {
    display: grid;
    justify-items: start;
    gap: 2px;
}

.fim__col h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 6px;
}

.fim__col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px; /* alvo de toque no celular */
    font-weight: 600;
    text-decoration: none;
}

.fim__col a:hover {
    text-decoration: underline;
}

.fim__col svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--azul);
}

.fim__fabrica {
    margin-top: 6px;
    font-weight: 600;
    color: var(--chocolate-2);
    line-height: 1.5;
}

.fim__fabrica b {
    color: var(--chocolate);
}

.fim__fabrica a {
    display: inline;
    color: var(--chocolate);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fim__delivery p {
    font-weight: 600;
    color: var(--chocolate-2);
}

.fim__apps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.fim__apps img {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 10px;
}

.fim__apps a {
    display: block;
    border-radius: 10px;
    transition: transform .12s;
}

.fim__apps a:hover {
    transform: translateY(-2px);
}

@media (min-width: 900px) {
    .fim {
        padding: 48px 0 56px;
    }

    .fim::before {
        width: 580px;
        height: 620px;
        background-position: right -60px bottom -140px;
        background-size: auto 620px;
    }

    .fim__inner {
        grid-template-columns: .9fr 1.3fr .9fr; /* o bloco da marca saiu a pedido do dono */
        gap: 36px;
        align-items: start;
    }

    .fim__contato,
    .fim__delivery {
        order: 0;
    }
}

/* cartão inteiro como link (home) */
a.porta {
    color: inherit;
    text-decoration: none;
}

/* ---------- hero de foto: a foto de borda a borda com um degradê preto leve do lado do texto e só o título com os botões por cima (parceiro; slide da home) ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 760px;
    border-radius: 0 0 36px 36px;
    overflow: hidden;
    color: var(--creme);
}

/* celular: a foto em 1672px nativos, no menor zoom que ainda cobre o hero inteiro (100% da altura), sem bloco escuro */
.hero__foto {
    position: absolute;
    inset: 0;
    background: #1c1916 url('/images/hero-parceiro-full.webp') 44% 100% / auto 100% no-repeat; /* 44%: o freezer um pouco à direita, mostrando mais da parede do mercado */
}

/* degradê preto leve só onde o texto está: de cima no celular, da direita no desktop */
.hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 38%, rgba(0, 0, 0, 0) 58%);
}

/* celular: título no topo, o botão no pé do hero (pedido do dono), com a foto no meio */
.hero__texto {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 112px 16px 52px; /* começa 40px abaixo da pílula (8 + 64 + 40); embaixo, folga para os pontos do carrossel */
}

.hero h1,
.hero .hero__titulo {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(38px, 7.5vw, 76px);
    line-height: .98;
    letter-spacing: -.015em;
    max-width: 11ch;
    text-wrap: balance;
    color: var(--creme);
}

.hero__sub {
    max-width: 30ch;
    margin-top: 14px;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.45;
    color: var(--creme);
}

.hero__acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
}

/* o botão de contorno sobre a foto é creme */
.hero .btn:not(.btn--pri) {
    background: transparent;
    border-color: var(--creme);
    color: var(--creme);
}

.hero .btn:not(.btn--pri):hover {
    background: rgba(255, 246, 227, .16);
}

@media (min-width: 900px) {
    /* desktop: a altura segue a proporção da foto (até 80% da tela); texto à direita, centrado na vertical */
    .hero {
        align-items: center;
        justify-content: flex-end;
        min-height: 520px;
        height: min(56.3vw, 80vh);
    }

    .hero__foto {
        background: var(--chocolate) url('/images/hero-parceiro-full.webp') center / cover no-repeat;
    }

    .hero__foto::after {
        background: linear-gradient(270deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .45) 28%, rgba(0, 0, 0, 0) 58%);
    }

    /* o bloco ocupa a faixa do degradê (42% da direita) e o texto fica centrado dentro dela */
    .hero__texto {
        align-self: center; /* no desktop o bloco volta ao meio da faixa do degradê */
        width: 42%;
        max-width: none;
        padding: 0 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero__sub {
        text-align: center;
        font-size: 19px;
    }

    .hero__acoes {
        align-items: center;
        margin-top: 28px;
    }

}

/* ---------- formulários: cartão .ficha e campos .campo (seja-parceiro, promoções) ---------- */
/* ---------- o cartão do cadastro ---------- */
.ficha {
    margin-top: 14px;
    padding: 20px 18px 22px;
    border-radius: var(--raio);
    background: var(--branco);
    box-shadow: var(--sombra);
    scroll-margin-top: 96px;
}

.ficha h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    margin: 0 0 12px;
}

.ficha__bloco + .ficha__bloco {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
}

.campos {
    display: grid;
    gap: 12px;
}

.campo label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
}

.campo label small {
    font-size: 13px;
    font-weight: 600;
    color: var(--chocolate-2);
}

.campo input,
.campo select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 2px solid var(--linha);
    border-radius: 12px;
    background: var(--branco);
    color: var(--chocolate);
    font: inherit;
    font-weight: 600;
    transition: border-color .12s, box-shadow .12s;
}

.campo input::placeholder {
    color: var(--chocolate-2);
    opacity: .7;
    font-weight: 400;
}

.campo input:focus,
.campo select:focus {
    outline: 0;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(29, 79, 163, .18);
}

.campo input:disabled {
    background: var(--creme);
    color: var(--chocolate-2);
    cursor: not-allowed;
}

.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a2c1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 44px;
}

.campo__ajuda {
    margin-top: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--chocolate-2);
}

.campo__erro {
    margin-top: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--erro);
}

.campo--erro input,
.campo--erro select {
    border-color: var(--erro);
}

.mel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ficha__envio {
    margin-top: 22px;
}

.ficha__envio .btn {
    width: 100%;
}

.ficha__nota {
    margin-top: 10px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--chocolate-2);
}

/* sucesso: o cartão fica amarelo, como a loja mais perto no localizador */
.ficha--ok {
    background: var(--sol);
    box-shadow: var(--sombra-alta);
}

.ficha--ok h3 {
    font-size: 30px;
}

.ficha--ok p {
    margin-top: 8px;
    font-weight: 600;
    color: var(--chocolate-sobre-sol);
}

.ficha--ok p b {
    color: var(--chocolate);
}

.ficha--ok .btn {
    margin-top: 16px;
}

@media (min-width: 900px) {
    .campos--2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* campos obrigatórios nos formulários públicos (cadastro de parceiro, notinha do sorteio) */
.obrigatorio {
    color: var(--erro);
    font-weight: 800;
}

.ficha__legenda {
    margin: -6px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--chocolate-2);
}

/* rodapé: no celular a razão social encurta para caber numa linha */
@media (max-width: 599px) {
    .pe__longo {
        display: none;
    }
}