/* ==========================================================================
   tanamao.news — folha do site

   Depende de `tema.css`, que carrega antes e traz os tokens, o reset e as
   primitivas (botão, campo, painel, etiqueta, aviso, seletor de tema). Aqui
   ficam só o layout e os componentes das páginas.

   Celular primeiro. A partir de 720px o conteúdo ganha grade; a partir de
   1024px o menu do topo aparece e a barra inferior desaparece, porque barra
   fixa embaixo é padrão de celular e no computador ocuparia espaço útil sem
   ganho nenhum.
   ========================================================================== */

body {
    /* A barra inferior é fixa no celular: sem esta reserva, o último elemento
       da página fica debaixo dela e não há como alcançá-lo. */
    padding-bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom, 0px));
}

/* O sprite de ícones fica no fim do HTML e não deve ocupar lugar no fluxo.
   Em CSS, e não num atributo `style=`: a CSP descarta atributo de estilo. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
}

/* ================================ topo =================================== */

.topo {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Translúcido com desfoque: o conteúdo que passa por baixo dá a sensação
       de profundidade sem precisar de sombra pesada. O `background` opaco vem
       primeiro como reserva para quem não tem `backdrop-filter`, senão o texto
       do topo se mistura ao da página. */
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}

@supports (backdrop-filter: blur(1px)) {
    .topo {
        background: color-mix(in srgb, var(--superficie) 82%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.topo__interno {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    min-height: var(--topo-altura);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.marca__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--raio-m);
    background: var(--gradiente);
    color: #FFFFFF;
    flex: none;
}

.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.marca__texto strong {
    font-size: var(--t-lg);
    letter-spacing: -0.02em;
}

.marca__texto small {
    color: var(--texto-2);
    font-size: var(--t-xs);
}

/* No celular o subtítulo da marca sai: o espaço do topo é disputado pelos
   botões de conta, que são acionáveis, e ele não é. */
@media (max-width: 480px) {
    .marca__texto small {
        display: none;
    }
}

.menu {
    display: none;
    gap: var(--e-1);
    margin-inline-start: var(--e-4);
}

.menu__item {
    padding: 8px 14px;
    border-radius: var(--raio-pilula);
    color: var(--texto-2);
    font-size: var(--t-md);
    font-weight: 600;
    transition: color var(--rapida), background-color var(--rapida);
}

.menu__item:hover {
    color: var(--texto-1);
    background: var(--superficie-2);
}

.menu__item.is-ativo {
    color: var(--primaria);
    background: var(--primaria-fraca);
}

.topo__acoes {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-inline-start: auto;
}

.conta-topo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.conta-topo__nome {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.conta-topo__sair {
    margin: 0;
}

/* Num celular estreito, "Entrar" e o nome saem e sobra o essencial: o seletor
   de tema e o botão principal. Esconder o nome não perde função — a pessoa sabe
   que está logada porque o botão diz "Sair". */
@media (max-width: 560px) {
    .topo__entrar,
    .conta-topo__nome {
        display: none;
    }
}

/* ============================== recado =================================== */

.recado-faixa {
    padding-top: var(--e-4);
}

/* ============================== seções =================================== */

.secao {
    padding-block: var(--e-7);
}

.secao--primeira {
    padding-block: var(--e-6) var(--e-5);
}

.secao--alternada {
    background: var(--superficie-2);
}

.secao__cabecalho {
    max-width: var(--largura-texto);
    margin-bottom: var(--e-6);
}

.secao__titulo {
    font-size: var(--t-2xl);
}

.secao__sub {
    margin-top: var(--e-3);
    color: var(--texto-2);
    font-size: var(--t-lg);
}

.pagina__cabecalho {
    max-width: var(--largura-texto);
}

.pagina__titulo {
    font-size: var(--t-3xl);
    letter-spacing: -0.03em;
}

.pagina__sub {
    margin-top: var(--e-3);
    color: var(--texto-2);
    font-size: var(--t-lg);
}

.pagina__cabecalho--guia {
    margin-bottom: var(--e-5);
}

/* ================================ vitrine ================================ */
/*
 * O herói da home. Substituiu uma versão que tinha três problemas, e os três
 * foram apontados pelo dono do produto:
 *
 *  - mostrava números crus ("Estabelecimentos 231 · Categorias 21 · Custo
 *    Grátis"). Número sem comparação não informa: 231 é muito ou pouco? E
 *    "Custo: Grátis" numa lista de contagens lê como se grátis fosse uma
 *    unidade de medida. Saiu em favor de três garantias em texto;
 *  - a arte era um PNG de 1024×1024 e 409 KB herdado do app, sem relação com o
 *    conteúdo. Agora a arte É o produto: uma maquete do aplicativo com os
 *    ícones de categoria de verdade ao redor;
 *  - era simples demais. O que mudou: tipografia maior e mais contrastada,
 *    malha de gradiente em duas camadas, cartões com vidro e profundidade, e
 *    movimento discreto.
 */

.vitrine {
    position: relative;
    padding-block: var(--e-8) var(--e-9);
    overflow: hidden;
}

/*
 * A malha de gradiente fica num pseudo-elemento, e não no `background` da
 * seção, por um motivo prático: assim ela pode ser maior que a seção e sangrar
 * para fora sem criar barra de rolagem horizontal, que é o que acontece quando
 * se usa um elemento de verdade posicionado para fora.
 */
.vitrine::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    background:
        radial-gradient(42rem 28rem at 12% 0%,
            color-mix(in srgb, var(--primaria) 20%, transparent), transparent 62%),
        radial-gradient(34rem 24rem at 88% 12%,
            color-mix(in srgb, var(--secundaria) 18%, transparent), transparent 60%),
        radial-gradient(28rem 20rem at 60% 96%,
            color-mix(in srgb, var(--acento) 10%, transparent), transparent 60%);
    pointer-events: none;
}

.vitrine__grade {
    position: relative;
    display: grid;
    gap: var(--e-7);
    align-items: center;
}

.selo-topo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 10px;
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--superficie) 80%, transparent);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-1);
    color: var(--texto-2);
    font-size: var(--t-sm);
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.selo-topo__ponto {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradiente);
    color: #FFFFFF;
    flex: none;
}

.vitrine__titulo {
    margin-top: var(--e-5);
    /* `clamp` em vez de degraus por media query: o título é o maior elemento da
       página e o que mais sofre em larguras intermediárias — a interpolação
       contínua evita o salto feio entre dois degraus. */
    font-size: clamp(2.25rem, 6.4vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.vitrine__titulo em {
    display: block;
    font-style: normal;
    background: linear-gradient(104deg, var(--primaria) 8%, var(--secundaria) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vitrine__sub {
    max-width: 48ch;
    margin-top: var(--e-5);
    color: var(--texto-2);
    font-size: var(--t-lg);
    line-height: 1.6;
}

.vitrine__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

/* ---------------------------------------------------------- garantias --- */
/*
 * O que ficou no lugar dos números. São afirmações verificáveis sobre como o
 * guia funciona — não métricas. Três, porque é o que se lê de relance.
 */

.garantias {
    display: grid;
    gap: var(--e-4);
    margin-top: var(--e-7);
    padding-top: var(--e-6);
    border-top: 1px solid var(--borda);
}

.garantia {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: var(--e-3);
    align-items: start;
}

.garantia__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--raio-m);
    background: var(--primaria-fraca);
    color: var(--primaria);
}

.garantia strong {
    display: block;
    font-size: var(--t-md);
    letter-spacing: -0.01em;
}

.garantia span {
    color: var(--texto-2);
    font-size: var(--t-sm);
    line-height: 1.5;
}

/* ============================ arte do herói ============================== */
/*
 * Uma maquete do aplicativo, construída em HTML e CSS, com os ícones de
 * categoria reais flutuando em volta.
 *
 * Em HTML e não em imagem, por três razões: acompanha o tema claro e escuro
 * sozinha (uma captura de tela não acompanha); fica nítida em qualquer
 * densidade de pixel; e pesa alguns bytes contra os 409 KB do PNG que estava
 * aqui. Os ícones são os mesmos arquivos que o app usa, então o que o visitante
 * vê é o produto, e não uma ilustração genérica de banco de imagens.
 *
 * Tudo aqui é decorativo e marcado `aria-hidden` no HTML: quem usa leitor de
 * tela recebe o título e o texto, que é onde está a informação.
 */

.palco {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
}

/* Halo atrás do aparelho, que dá a sensação de luz vindo de trás. */
.palco::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gradiente);
    filter: blur(60px);
    opacity: 0.26;
}

.aparelho {
    position: relative;
    width: min(286px, 72vw);
    aspect-ratio: 9 / 17.5;
    padding: 9px;
    border-radius: 42px;
    background: linear-gradient(160deg, #2A3348 0%, #121829 60%);
    box-shadow:
        var(--sombra-3),
        inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.aparelho__tela {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 34px;
    background: var(--superficie);
    overflow: hidden;
}

/* O entalhe da câmera. Dois pixels de detalhe que fazem o desenho parecer um
   aparelho em vez de um retângulo. */
.aparelho__entalhe {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 5px;
    border-radius: var(--raio-pilula);
    background: rgb(255 255 255 / 22%);
}

.tela__topo {
    padding: 26px 16px 14px;
    background: var(--gradiente);
    color: #FFFFFF;
}

.tela__ola {
    font-size: 0.625rem;
    opacity: 0.85;
}

.tela__titulo {
    margin-top: 1px;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tela__busca {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: var(--raio-pilula);
    background: rgb(255 255 255 / 92%);
    color: #5A6782;
    font-size: 0.625rem;
}

.tela__corpo {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 12px 11px;
    background: var(--superficie-2);
}

.tela__secao {
    color: var(--texto-2);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Os cartõezinhos imitam a lista do guia: avatar com a inicial, nome, linha de
   categoria. A faixa colorida na esquerda é a mesma convenção do site. */
.tela__cartao {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 7px;
    align-items: center;
    padding: 7px;
    border-radius: 10px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--cor-falsa, var(--primaria));
}

.tela__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cor-falsa, var(--primaria)) 16%, transparent);
    color: var(--cor-falsa, var(--primaria));
    font-size: 0.625rem;
    font-weight: 800;
}

.tela__nome {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.tela__meta {
    display: block;
    color: var(--texto-3);
    font-size: 0.5rem;
}

.tela__nota {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--alerta);
    font-size: 0.5625rem;
    font-weight: 700;
}

/* As três cores dos cartões de exemplo. Em classe, e não em atributo `style`,
   porque a CSP descarta atributo de estilo. */
.tela__cartao--a { --cor-falsa: #F97316; }
.tela__cartao--b { --cor-falsa: #0EA5E9; }
.tela__cartao--c { --cor-falsa: #A855F7; }

/* ------------------------------------------------------------- bolhas --- */

.bolha {
    position: absolute;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 11px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--superficie) 86%, transparent);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-2);
    backdrop-filter: blur(10px);
    animation: flutuar 7s ease-in-out infinite;
}

.bolha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Posições e defasagens diferentes para que não subam e desçam em bloco, que é
   o que denuncia a animação como truque. */
.bolha--1 { top: 6%;  left: 2%;  animation-delay: 0s; }
.bolha--2 { top: 30%; left: -4%; animation-delay: 1.4s; width: 52px; height: 52px; }
.bolha--3 { top: 62%; left: 4%;  animation-delay: 2.8s; }
.bolha--4 { top: 10%; right: 2%; animation-delay: 0.7s; width: 52px; height: 52px; }
.bolha--5 { top: 42%; right: -4%; animation-delay: 2.1s; }
.bolha--6 { top: 74%; right: 4%; animation-delay: 3.5s; width: 52px; height: 52px; }

@keyframes flutuar {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-13px) rotate(2deg); }
}

/* Numa tela estreita as bolhas laterais atrapalham o aparelho; sobram as
   quatro que caem fora da silhueta. */
@media (max-width: 420px) {
    .bolha--2,
    .bolha--5 {
        display: none;
    }
}

/* ================================= bento ================================= */
/*
 * "O que você encontra", em grade assimétrica.
 *
 * Cinco cartões iguais em fila é o que havia antes, e era justamente o
 * "simples demais": nada na composição dizia o que importa mais. Aqui o
 * primeiro item ocupa duas colunas e carrega a arte, e os outros quatro ficam
 * em blocos menores — a hierarquia passa a ser visível antes da leitura.
 */

.bento {
    display: grid;
    gap: var(--e-3);
}

.bento__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--e-3);
    padding: var(--e-5);
    border-radius: var(--raio-g);
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-1);
    overflow: hidden;
    transition: transform var(--media), box-shadow var(--media), border-color var(--media);
}

.bento__item:hover {
    transform: translateY(-3px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
}

/* O item grande ganha um brilho de canto, que o separa dos outros sem precisar
   de cor de fundo diferente — fundo colorido derrubaria o contraste do texto
   num dos dois temas. */
.bento__item--destaque {
    background:
        radial-gradient(26rem 18rem at 100% 0%,
            color-mix(in srgb, var(--primaria) 12%, transparent), transparent 62%),
        var(--superficie);
}

.bento__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--raio-m);
    background: var(--primaria-fraca);
    color: var(--primaria);
}

.bento__titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex-wrap: wrap;
    font-size: var(--t-lg);
}

.bento__texto {
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: 1.6;
}

.bento__item--destaque .bento__titulo {
    font-size: var(--t-xl);
}

/* A tira de ícones de categoria dentro do item grande: ela mostra, e não
   descreve, a variedade do guia. */
.tira {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-2);
}

.tira img {
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 12px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    object-fit: contain;
}

/* =========================== recursos e passos =========================== */
/*
 * Estes dois componentes voltaram para cá depois de eu os apagar por descuido.
 *
 * A home deixou de usá-los — passou a usar `.bento` e `.trilha` —, e ao
 * reescrever o bloco da home eu removi as regras junto. Só que `/aplicativo`
 * ainda usa `.recurso` ("Por que instalar") e `/divulgue` ainda usa `.passo`
 * ("Como funciona"). As duas páginas foram ao ar com o conteúdo sem estilo.
 *
 * A lição, anotada onde vai ser lida: trocar o layout de UMA página não autoriza
 * apagar as regras que ela usava, porque classe não é propriedade de página.
 * `tests/site/paginas.php` passou a conferir que toda classe citada nas views
 * existe na folha de estilo.
 */

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

.recurso {
    padding: var(--e-5);
    transition: transform var(--media), box-shadow var(--media);
}

.recurso:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
}

.recurso__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--e-4);
    border-radius: var(--raio-m);
    background: var(--primaria-fraca);
    color: var(--primaria);
}

.recurso__titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex-wrap: wrap;
    font-size: var(--t-lg);
}

.recurso__texto {
    margin-top: var(--e-2);
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: 1.6;
}

.passos {
    display: grid;
    gap: var(--e-5);
}

.passo {
    position: relative;
    padding-left: 56px;
}

.passo__numero {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--raio-pilula);
    background: var(--primaria);
    color: var(--primaria-contraste);
    font-weight: 800;
}

.passo__titulo {
    font-size: var(--t-lg);
}

.passo__texto {
    margin-top: var(--e-1);
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: 1.6;
}

.passos--compacto .passo {
    padding-left: 44px;
}

.passos--compacto .passo__numero {
    width: 30px;
    height: 30px;
    font-size: var(--t-sm);
}

/* ============================ categorias ================================= */

.categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--e-3);
}

.categoria {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: var(--e-5) var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    text-align: center;
    overflow: hidden;
    transition: transform var(--rapida), box-shadow var(--rapida), border-color var(--rapida);
}

/*
 * A cor da categoria entra como um brilho suave no topo, em vez de uma borda
 * sólida de 3px. A borda sólida, repetida 21 vezes numa grade, lia como um
 * código de cores que ninguém decifra; o brilho dá identidade sem virar ruído.
 */
.categoria::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--cor-categoria, var(--primaria)) 16%, transparent),
        transparent
    );
    pointer-events: none;
}

.categoria:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cor-categoria, var(--primaria)) 45%, var(--borda));
    box-shadow: var(--sombra-2);
}

.categoria__arte {
    position: relative;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.categoria__icone {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: 1.5rem;
}

.categoria__nome {
    position: relative;
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.25;
}

/* =============================== trilha ================================== */
/*
 * "Como usar", em três passos ligados por uma linha.
 *
 * A linha não é enfeite: ela diz que a ordem importa, o que uma grade de três
 * cartões soltos não diz. Ela é desenhada num pseudo-elemento do primeiro
 * passo e só aparece quando os passos estão em fila — numa coluna, ligar
 * verticalmente exigiria outra linha e o ganho é nenhum.
 */

.trilha {
    display: grid;
    gap: var(--e-5);
    counter-reset: passo;
}

.trilha__passo {
    position: relative;
    display: grid;
    gap: var(--e-3);
    align-content: start;
}

.trilha__numero {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-1);
    color: var(--primaria);
    font-size: var(--t-lg);
    font-weight: 800;
    /* Acima da linha, para a linha não atravessar o número. */
    position: relative;
    z-index: 1;
}

.trilha__titulo {
    font-size: var(--t-lg);
}

.trilha__texto {
    color: var(--texto-2);
    font-size: var(--t-md);
    line-height: 1.6;
}

/* =============================== faixa =================================== */
/*
 * A chamada para quem tem negócio. Faixa de largura inteira com gradiente, para
 * ser o ponto mais forte da página depois do título — é a conversão que
 * sustenta o guia.
 */

.faixa {
    position: relative;
    margin-top: var(--e-8);
    padding-block: var(--e-8);
    background: linear-gradient(135deg, #4F46E5 0%, #0E7490 100%);
    color: #FFFFFF;
    overflow: hidden;
}

/* Textura de pontos, bem discreta: dá matéria ao gradiente sem competir com o
   texto. Em `radial-gradient` repetido, não em imagem. */
.faixa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / 16%) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}

.faixa__interno {
    position: relative;
    display: grid;
    gap: var(--e-5);
    align-items: center;
}

.faixa__titulo {
    font-size: var(--t-2xl);
    letter-spacing: -0.03em;
}

.faixa__sub {
    max-width: 56ch;
    margin-top: var(--e-3);
    color: rgb(255 255 255 / 86%);
    font-size: var(--t-lg);
}

/* O botão sobre a faixa é branco com texto da marca: contraste máximo, e a
   única coisa branca e sólida da seção, logo a primeira que o olho acha. */
.faixa .botao {
    --botao-fundo: #FFFFFF;
    --botao-texto: #3730A3;
    --botao-borda: transparent;
    box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
}

.faixa__nota {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    margin-top: var(--e-4);
    color: rgb(255 255 255 / 80%);
    font-size: var(--t-sm);
}

.faixa__nota span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========================= revelação ao rolar ============================ */
/*
 * Os blocos sobem de baixo quando entram na tela. O estado inicial é aplicado
 * pelo JS (`data-revelar`), e NÃO pelo CSS: sem JavaScript, um `opacity: 0` no
 * CSS deixaria a página inteira invisível para sempre. Com a marcação vindo do
 * script, quem não tem JS vê tudo normalmente, só sem o movimento.
 */

[data-revelar] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-revelar="pronto"] {
    opacity: 1;
    transform: none;
}

/* Os degraus de atraso da cascata. Em atributo de dados, e não em
   `element.style`, porque `style-src-attr 'none'` desta CSP trata atributo de
   estilo como coisa a bloquear — e mexer no `.style` de um elemento escreve
   exatamente isso. */
[data-atraso="1"] { transition-delay: 55ms; }
[data-atraso="2"] { transition-delay: 110ms; }
[data-atraso="3"] { transition-delay: 165ms; }
[data-atraso="4"] { transition-delay: 220ms; }
[data-atraso="5"] { transition-delay: 275ms; }
[data-atraso="6"] { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
    [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bolha {
        animation: none;
    }
}


/* ============================= aplicativo ================================ */

.baixar {
    display: grid;
    gap: var(--e-6);
}

.lojas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

.loja {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    padding: 12px 20px;
    border-radius: var(--raio-m);
    background: var(--superficie-inversa);
    color: var(--texto-inverso);
    transition: transform var(--rapida), filter var(--rapida);
}

.loja:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

.loja--inativa {
    background: var(--superficie-2);
    color: var(--texto-3);
    border: 1px dashed var(--borda-forte);
    cursor: not-allowed;
}

.loja--inativa:hover {
    transform: none;
    filter: none;
}

/* Caixa de tamanho fixo para o símbolo da loja: sem ela, os dois botões ficam
   com larguras diferentes porque os dois desenhos têm proporções diferentes. */
.loja__icone {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
}

.loja__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.loja__texto small {
    font-size: var(--t-xs);
    opacity: 0.8;
}

.loja__texto strong {
    font-size: var(--t-lg);
}

.baixar__arte {
    display: grid;
    place-items: center;
}

/* Moldura de celular desenhada em CSS: é decorativa, e uma imagem de 300 KB
   para desenhar um retângulo arredondado não se justifica. */
.moldura-celular {
    width: 240px;
    aspect-ratio: 9 / 18;
    padding: 10px;
    border-radius: 36px;
    background: var(--superficie-inversa);
    box-shadow: var(--sombra-3);
}

.moldura-celular__tela {
    display: grid;
    place-items: center;
    height: 100%;
    border-radius: 28px;
    background: var(--gradiente);
    color: #FFFFFF;
}

.moldura-celular__marca {
    display: grid;
    justify-items: center;
    gap: var(--e-3);
    font-size: var(--t-lg);
    font-weight: 800;
}

/* =============================== conta =================================== */

.cartao-conta-area {
    display: grid;
    gap: var(--e-6);
    align-items: start;
}

.cartao-conta {
    padding: var(--e-6);
}

.cartao-conta-area--sozinho {
    max-width: 520px;
}

.cartao-conta__topo {
    margin-bottom: var(--e-5);
}

.cartao-conta__titulo {
    font-size: var(--t-xl);
}

.cartao-conta__sub {
    margin-top: var(--e-2);
    color: var(--texto-2);
    font-size: var(--t-md);
}

.cartao-conta__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--e-4);
    border-radius: var(--raio-pilula);
    background: var(--primaria-fraca);
    color: var(--primaria);
}

/* Sinal de sucesso. Sempre acompanhado de texto: cor sozinha não informa quem
   não distingue verde de vermelho. */
.cartao-conta__icone--ok {
    background: var(--sucesso-fraca);
    color: var(--sucesso);
}

.cartao-conta__rodape {
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    color: var(--texto-2);
    font-size: var(--t-md);
    text-align: center;
}

.cartao-conta__rodape a,
.conta-lateral a,
.bloco__texto a,
.aviso a {
    color: var(--primaria);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cartao-conta__acoes {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

.conta-lateral {
    padding: var(--e-5);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
}

.conta-lateral__titulo {
    font-size: var(--t-lg);
}

.conta-lateral__texto {
    margin-top: var(--e-3);
    color: var(--texto-2);
    font-size: var(--t-md);
}

.conta-lateral__lista {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-4);
}

.conta-lateral__lista li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--e-2);
    align-items: start;
    color: var(--texto-2);
    font-size: var(--t-md);
}

.conta-lateral__lista svg {
    margin-top: 4px;
    color: var(--sucesso);
}

/* ============================ formulários ================================ */

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

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

.campo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
}

.campo__link {
    color: var(--primaria);
    font-size: var(--t-sm);
    font-weight: 600;
}

.campo__link:hover {
    text-decoration: underline;
}

.campo__opcional {
    color: var(--texto-3);
    font-weight: 400;
    font-size: var(--t-sm);
}

.grupo {
    display: grid;
    gap: var(--e-4);
    margin: 0;
    padding: 0;
    border: 0;
}

.grupo__titulo {
    padding: 0;
    color: var(--texto-1);
    font-size: var(--t-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/*
 * Isca para robô.
 *
 * Escondida por posicionamento, e NÃO por `display: none` nem
 * `visibility: hidden`: robô minimamente cuidadoso ignora campo oculto por
 * essas duas propriedades, que são o jeito óbvio. Tirar do fluxo e empurrar
 * para fora da tela deixa o campo "visível" para quem só lê o HTML.
 *
 * Quem usa teclado ou leitor de tela não o alcança: o HTML põe
 * `tabindex="-1"` e `aria-hidden="true"` no bloco.
 */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================== divulgar ================================= */
/*
 * O cartão do formulário e os blocos da lateral.
 *
 * O `padding` destes dois estava **só** dentro da media query de 720px, o que
 * deixava o formulário encostado na borda do cartão em qualquer celular — ou
 * seja, exatamente onde ele é mais usado. Regra base aqui, e a de 720px só
 * aumenta o respiro.
 */

.divulgar-area {
    display: grid;
    gap: var(--e-5);
}

.divulgar__cartao {
    padding: var(--e-5) var(--e-4);
}

.divulgar__bloco {
    padding: var(--e-4);
}

.divulgar__bloco-titulo {
    margin-bottom: var(--e-3);
    font-size: var(--t-md);
}

/* =============================== busca =================================== */

.busca {
    max-width: 620px;
}

.busca__caixa {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 8px 8px 8px 14px;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-1);
    transition: border-color var(--rapida), box-shadow var(--rapida);
}

.busca__caixa:focus-within {
    border-color: var(--primaria);
    box-shadow: var(--sombra-foco);
}

.busca__icone {
    display: grid;
    place-items: center;
    color: var(--texto-3);
    flex: none;
}

.busca__campo {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: none;
    font-size: var(--t-md);
}

.busca__campo:focus {
    outline: none;
}

.busca__campo::placeholder {
    color: var(--texto-3);
}

/* ============================== filtros ================================== */

.filtros {
    display: flex;
    gap: var(--e-2);
    margin-top: var(--e-4);
    /* Rola na horizontal em vez de quebrar em cinco linhas: com 22 categorias,
       a quebra empurraria a lista de resultados para fora da primeira tela. */
    overflow-x: auto;
    padding-bottom: var(--e-2);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    color: var(--texto-2);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color var(--rapida), background-color var(--rapida), border-color var(--rapida);
}

.filtro:hover {
    color: var(--texto-1);
    border-color: var(--borda-forte);
}

.filtro.is-ativo {
    background: var(--primaria);
    border-color: var(--primaria);
    color: var(--primaria-contraste);
}

.filtro__total {
    padding: 1px 7px;
    border-radius: var(--raio-pilula);
    background: var(--superficie-2);
    color: var(--texto-3);
    font-size: var(--t-xs);
}

.filtro.is-ativo .filtro__total {
    background: color-mix(in srgb, #000000 18%, transparent);
    color: var(--primaria-contraste);
}

/* =============================== lista =================================== */

.lista {
    display: grid;
    gap: var(--e-3);
}

.cartao {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--e-3);
    height: 100%;
    padding: var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--cor-categoria, var(--primaria));
    border-radius: var(--raio-m);
    box-shadow: var(--sombra-1);
    transition: transform var(--rapida), box-shadow var(--rapida), border-color var(--rapida);
}

.cartao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-2);
}

.cartao__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--raio-m);
    background: var(--superficie-2);
    color: var(--texto-2);
    font-weight: 800;
    font-size: var(--t-lg);
    overflow: hidden;
    flex: none;
}

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

.cartao__corpo {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cartao__nome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: var(--t-md);
    /* Nome longo corta com reticências em vez de empurrar a nota para fora do
       cartão. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartao__categoria,
.cartao__local {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--texto-2);
    font-size: var(--t-sm);
}

.cartao__local {
    color: var(--texto-3);
    font-size: var(--t-xs);
}

.ponto-categoria {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-categoria, var(--primaria));
    flex: none;
}

.cartao__nota {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: var(--raio-pilula);
    background: var(--alerta-fraca);
    color: var(--alerta);
    font-size: var(--t-sm);
    font-weight: 700;
    flex: none;
}

.selo {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--info);
    color: #FFFFFF;
    flex: none;
}

.selo--g {
    width: 24px;
    height: 24px;
}

/* ============================ paginação ================================== */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

.paginacao__posicao {
    color: var(--texto-2);
    font-size: var(--t-sm);
    text-align: center;
}

/* ================================ vazio ================================== */

.vazio {
    display: grid;
    justify-items: center;
    gap: var(--e-3);
    padding: var(--e-8) var(--e-5);
    text-align: center;
}

.vazio__icone {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: var(--raio-pilula);
    background: var(--superficie-2);
    color: var(--texto-3);
}

.vazio__titulo {
    font-size: var(--t-xl);
}

.vazio__texto {
    max-width: 46ch;
    color: var(--texto-2);
}

.vazio__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-2);
}

/* ================================ ficha ================================== */

.ficha__capa {
    position: relative;
    padding-top: var(--e-8);
    background: var(--gradiente-suave);
    overflow: hidden;
}

.ficha__capa-imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Escurecida e desfocada: a capa é fundo, e o nome do estabelecimento
       precisa ser legível por cima dela em qualquer foto. */
    filter: brightness(0.45) saturate(1.1) blur(2px);
}

.ficha__capa--vazia {
    padding-top: var(--e-7);
}

.ficha__cabecalho {
    position: relative;
    display: grid;
    gap: var(--e-4);
    padding-bottom: var(--e-5);
}

.ficha__capa:not(.ficha__capa--vazia) .ficha__nome,
.ficha__capa:not(.ficha__capa--vazia) .ficha__meta {
    /* Sobre foto escurecida o texto é branco com sombra: branco puro sobre uma
       foto clara em algum ponto ainda perderia contraste sem a sombra. */
    color: #FFFFFF;
    text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
}

.ficha__identidade {
    display: flex;
    align-items: center;
    gap: var(--e-4);
}

.ficha__logo {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: var(--raio-g);
    background: var(--superficie);
    border: 3px solid var(--superficie);
    box-shadow: var(--sombra-2);
    color: var(--texto-2);
    font-size: var(--t-2xl);
    font-weight: 800;
    overflow: hidden;
    flex: none;
}

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

.ficha__nome {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex-wrap: wrap;
    font-size: var(--t-2xl);
}

.ficha__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-2);
}

.ficha__nota {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    background: var(--alerta-fraca);
    color: var(--alerta);
    font-size: var(--t-sm);
    text-shadow: none;
}

.ficha__nota small {
    color: var(--texto-2);
    font-weight: 500;
}

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

.ficha__corpo {
    display: grid;
    gap: var(--e-5);
    padding-block: var(--e-6);
}

.ficha__principal,
.ficha__lateral {
    display: grid;
    gap: var(--e-4);
    align-content: start;
}

.bloco {
    padding: var(--e-5);
}

.bloco__titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
    font-size: var(--t-lg);
}

.bloco__titulo svg {
    color: var(--primaria);
}

.bloco__texto {
    color: var(--texto-2);
}

/* ============================== serviços ================================= */

.servicos {
    display: grid;
    gap: var(--e-2);
}

.servico {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3);
    border-radius: var(--raio-m);
    background: var(--superficie-2);
}

.servico--destaque {
    background: var(--primaria-fraca);
    border: 1px solid color-mix(in srgb, var(--primaria) 24%, transparent);
}

.servico__texto {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.servico__texto span {
    color: var(--texto-2);
    font-size: var(--t-sm);
}

.servico__preco {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    border: 1px solid var(--borda);
    color: var(--primaria);
    font-size: var(--t-sm);
    font-weight: 700;
    white-space: nowrap;
}

/* ============================== galeria ================================== */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--e-2);
}

.galeria img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raio-m);
    background: var(--superficie-2);
}

/* ============================== horários ================================= */

.horarios {
    display: grid;
    gap: 2px;
    margin: 0;
}

.horario {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    padding: 7px 0;
    border-bottom: 1px dashed var(--borda);
    font-size: var(--t-md);
}

.horario:last-child {
    border-bottom: 0;
}

.horario dt {
    color: var(--texto-2);
    font-weight: 600;
}

.horario dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.horario__fechado {
    color: var(--texto-3);
}

/* ================================ redes ================================== */

.redes {
    display: grid;
    gap: var(--e-2);
}

.redes a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--e-3);
    border-radius: var(--raio-m);
    background: var(--superficie-2);
    font-size: var(--t-md);
    font-weight: 600;
    transition: background-color var(--rapida);
}

.redes a:hover {
    background: var(--primaria-fraca);
    color: var(--primaria);
}

/* ============================== rodapé =================================== */

.rodape {
    margin-top: var(--e-8);
    padding-top: var(--e-7);
    background: var(--superficie);
    border-top: 1px solid var(--borda);
}

/* A faixa de chamada termina a página com um bloco de cor cheia; somar a
   margem do rodapé abriria um vão entre as duas. */
.faixa + .rodape {
    margin-top: 0;
}

.rodape__interno {
    display: grid;
    gap: var(--e-6);
    padding-bottom: var(--e-6);
}

.rodape__texto {
    max-width: 44ch;
    margin-top: var(--e-3);
    color: var(--texto-2);
    font-size: var(--t-md);
}

.rodape__coluna {
    display: grid;
    gap: var(--e-2);
    align-content: start;
}

.rodape__titulo {
    margin-bottom: var(--e-1);
    color: var(--texto-1);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.rodape__coluna a {
    color: var(--texto-2);
    font-size: var(--t-md);
}

.rodape__coluna a:hover {
    color: var(--primaria);
}

.rodape__breve {
    color: var(--texto-3);
    font-size: var(--t-md);
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-3);
    padding-block: var(--e-4);
    border-top: 1px solid var(--borda);
    color: var(--texto-3);
    font-size: var(--t-sm);
}

/* ========================= navegação inferior ============================ */

.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--nav-altura) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--superficie);
    border-top: 1px solid var(--borda);
}

@supports (backdrop-filter: blur(1px)) {
    .nav-inferior {
        background: color-mix(in srgb, var(--superficie) 88%, transparent);
        backdrop-filter: blur(14px);
    }
}

.nav-inferior__item {
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--texto-3);
    font-size: 0.6875rem;
    font-weight: 600;
    transition: color var(--rapida);
}

.nav-inferior__item.is-ativo {
    color: var(--primaria);
}

/* ============================ erro (avulso) ============================== */
/* Usado por errors/404.php e errors/500.php, que são documentos completos
   porque o Kernel os renderiza fora de qualquer controller. */

.erro {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e-3);
    min-height: 70vh;
    text-align: center;
}

.erro__codigo {
    font-size: var(--t-4xl);
    font-weight: 800;
    color: var(--primaria);
    line-height: 1;
}

.erro__titulo {
    font-size: var(--t-xl);
}

.erro__texto,
.erro__ref {
    color: var(--texto-2);
}

/* ====================== páginas de link de e-mail ======================== */
/*
 * Confirmação de e-mail e troca de senha. São alcançadas por link de mensagem,
 * muitas vezes no computador e não no celular, e o cartão é centrado sem
 * depender da navegação do site.
 */

.conta {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: var(--e-5) var(--e-4);
}

.conta__cartao {
    width: 100%;
    max-width: 440px;
    padding: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-2);
    text-align: center;
}

.conta__marca {
    margin-bottom: var(--e-5);
    font-weight: 800;
    font-size: var(--t-lg);
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Acompanhado sempre de texto: cor sozinha não informa quem não distingue
   verde de vermelho. */
.conta__sinal {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--e-4);
    border-radius: 50%;
    font-size: var(--t-xl);
    font-weight: 800;
    color: #FFFFFF;
}

.conta__sinal--ok { background: var(--sucesso); }
.conta__sinal--erro { background: var(--erro); }

.conta__titulo {
    margin-bottom: var(--e-3);
    font-size: var(--t-xl);
}

.conta__texto {
    margin-bottom: var(--e-5);
    color: var(--texto-2);
}

.conta__erro {
    margin-bottom: var(--e-4);
    padding: var(--e-3);
    border-radius: var(--raio-p);
    background: var(--erro-fraca);
    color: var(--erro);
    font-size: var(--t-md);
    text-align: left;
}

.conta__form {
    text-align: left;
}

.conta__campo {
    display: block;
    margin-bottom: var(--e-4);
}

.conta__campo span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-md);
    font-weight: 600;
}

.conta__campo input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-m);
    background: var(--superficie);
    font-size: var(--corpo);
}

.conta__campo input:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: var(--sombra-foco);
}

.conta__dica {
    margin-bottom: var(--e-5);
    color: var(--texto-3);
    font-size: var(--t-sm);
}

.conta__botao {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--raio-m);
    background: var(--gradiente);
    color: #FFFFFF;
    font-size: var(--corpo);
    font-weight: 700;
    text-align: center;
}

/* Quando a página oferece dois caminhos — abrir o app e ir para o site — só um
   pode ser o principal. Dois botões com o mesmo peso não são uma escolha, são
   uma hesitação. */
.conta__botao--secundario {
    margin-top: var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    color: var(--texto-1);
}

.conta__botao + .conta__dica {
    margin-top: var(--e-3);
    margin-bottom: 0;
}

/* ========================================================================== */
/*                               responsivo                                   */
/* ========================================================================== */

@media (min-width: 560px) {
    .formulario__par {
        grid-template-columns: 1fr 1fr;
    }

    .recursos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .chamada {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

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

    .passos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Os três passos em fila, ligados por uma linha. A linha nasce no centro do
       primeiro número e atravessa até o terceiro; `z-index` menor que o do
       número para passar por trás dele. */
    .trilha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--e-6);
    }

    .trilha__passo:first-child::before {
        content: "";
        position: absolute;
        top: 23px;
        left: 23px;
        width: calc(200% + (var(--e-6) * 2) - 46px);
        height: 2px;
        background: linear-gradient(
            to right,
            var(--borda-forte),
            var(--borda-forte) 70%,
            transparent
        );
    }

    .faixa__interno {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rodape__interno {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }

    .cartao-conta-area {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    }

    .cartao-conta-area--sozinho {
        grid-template-columns: 1fr;
    }

    .divulgar-area {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        display: grid;
        gap: var(--e-5);
        align-items: start;
    }

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

    .divulgar__bloco {
        padding: var(--e-5);
    }

    .divulgar__cartao {
        padding: var(--e-6);
    }

    .divulgar__bloco-titulo {
        margin-bottom: var(--e-4);
        font-size: var(--t-lg);
    }

    .ficha__corpo {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    }

    .baixar {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
    }
}

/* O menu do topo entra, e a barra inferior sai. 1024px é onde cabem os quatro
   itens do menu ao lado da marca e dos botões de conta sem aperto. */
@media (min-width: 1024px) {
    .menu {
        display: flex;
    }

    .nav-inferior {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    .vitrine__grade {
        /* O texto ganha mais espaço que a arte: o título é o que converte, e a
           maquete é apoio. 1.08/0.92 em vez de meio a meio. */
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: var(--e-8);
    }

    .vitrine {
        padding-block: var(--e-9) calc(var(--e-9) + var(--e-5));
    }

    .palco {
        min-height: 560px;
    }

    /* O primeiro bloco do bento ocupa as duas colunas da primeira linha. */
    .bento {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bento__item--destaque {
        grid-column: span 2;
        grid-row: span 2;
    }

    .recursos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .recursos--quatro {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ficha__cabecalho {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

@media (min-width: 1440px) {
    .lista {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================== TV (1600px+) ============================= */
/* Numa TV o usuário está a dois ou três metros da tela, e o corpo de 16px fica
   ilegível. O container cresce e as fontes sobem um degrau. */

@media (min-width: 1600px) {
    :root {
        --corpo: 1.0625rem;
        --largura-max: 1480px;
    }

    .cartao__avatar {
        width: 60px;
        height: 60px;
    }
}

/* ============================== impressão ================================ */

@media print {
    .topo,
    .nav-inferior,
    .rodape,
    .busca,
    .filtros,
    .paginacao,
    .ficha__acoes,
    .tema {
        display: none;
    }

    .ficha__capa-imagem {
        display: none;
    }

    .painel,
    .cartao {
        box-shadow: none;
        border: 1px solid #CCCCCC;
    }
}