/* ==========================================================================
   MODELO 2 - Hub de links (perfil no topo + grid de cards)
   Depende das variaveis definidas em pre.php:
     --cor-principal  (fundo)      --cor-links   (cards)
     --cor-texto      (textos)     --estilo-fonte
     --estilo-arredondamento
   ========================================================================== */

:root {
    --m2-gap: 22px;
    --m2-raio: var(--estilo-arredondamento, 20px);
    /* Altura dos cards: comuns e destaque sao independentes entre si */
    /* Altura do card comum. Era 118px e ficava bem mais baixo que o card do
       Modelo 1 (12em, ~192px) - lado a lado a diferenca saltava aos olhos.
       Como a capa e `background-size: cover`, card mais alto so mostra mais
       da arte, sem esticar nada. */
    --m2-h-card: 180px;
    /* Piso do destaque. A altura dele, hoje, sao duas fileiras da grade
       (180 + 22 + 180 = 382px); este valor so entra quando nao ha duas
       fileiras para ocupar, como no celular sem a proporcao da arte.

       Saiu daqui o `--m2-h-destaque-sozinho: 520px`, que era o teto do
       destaque quando ele era o unico card da coluna central. Sem coluna
       central, a altura dele e duas fileiras e ja tem teto por construcao. */
    --m2-h-destaque: 260px;
    /* Largura da area de cards. O mapa NAO acompanha - ver .modelo2-mapa. */
    --m2-largura: 1444px;
    --m2-largura-mapa: 1180px;
}

/* O Modelo 2 nao usa header/footer do site: garante a base limpa */
body:has(.modelo2) {
    background: var(--cor-principal, #7b1fa2);
}

.modelo2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px 16px 72px;
    background: var(--cor-principal, #7b1fa2);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    font-family: var(--estilo-fonte, 'Asap Condensed', Arial, sans-serif);
    color: var(--cor-texto, #ffffff);
    overflow: hidden;
}

/* Veu de contraste - so aparece quando ha imagem de fundo */
.modelo2[style*="background-image"] > .modelo2-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .45) 100%);
    pointer-events: none;
    z-index: 1;
}

.modelo2-conteudo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--m2-largura, 1444px);
    margin: 0 auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   PERFIL
   -------------------------------------------------------------------------- */
.modelo2-perfil {
    text-align: center;
    /* Era 44px, e somado aos 64px de margem da primeira seção davam 108px entre
       o botão de WhatsApp e o primeiro título - um vão que fazia o contato
       parecer de outra página. As seções seguintes continuam com os 64px, que
       é onde aquele respiro faz sentido: ali ele separa dois blocos de cards.
       Aqui embaixo não há bloco nenhum acima, só o perfil, que já pertence ao
       mesmo conjunto. */
    margin-bottom: 18px;
}

.modelo2-avatar {
    width: 132px;
    height: 132px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    /* Fundo na cor do site: mantem logos brancos/transparentes visiveis.
       Como e a mesma cor do fundo da pagina, ele nao aparece como disco. */
    background: var(--cor-principal, #7b1fa2);
    transition: transform .3s ease;
}

/* Sem borda e sem sombra de proposito.
   O anel branco emoldurava a logo, e com PNG de fundo transparente o resultado
   era uma moldura em volta de nada. A sombra tinha o mesmo efeito: desenhava um
   disco em volta de uma imagem que nao tem disco. Sem os dois, a arte do
   cliente aparece sozinha - que e como a maioria das logos foi desenhada. */

.modelo2-avatar:hover {
    transform: translateY(-3px) scale(1.04);
}

.modelo2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modelo2-nome {
    margin: 0 0 12px;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cor-texto, #ffffff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.modelo2-bio {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.6;
    color: var(--cor-texto, #ffffff);
    opacity: .95;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------------------
   REDES SOCIAIS
   -------------------------------------------------------------------------- */
.modelo2-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.modelo2-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Vem da cor do TEXTO: tema escuro da circulo claro, tema claro da circulo
       escuro. Era branco fixo, e em tema claro o icone claro sumia dentro. */
    background: var(--social-fundo, rgba(255, 255, 255, .92));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.modelo2-social-btn:hover,
.modelo2-social-btn:focus-visible {
    /* Sem trocar para branco: em tema claro o circulo clareava e o icone sumia.
       O destaque do hover fica no movimento e na sombra. */
    filter: brightness(1.12);
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}

/* `.icone-cor` MUDOU-SE PARA O estilo.css (02/10/2026).
   O comentario dela dizia "exclusivo do Modelo 2: no Modelo 1 os icones
   seguem brancos, como sempre" - e "como sempre" era o problema: la o rodape
   desenhava o arquivo da marca cru, cada um com a silhueta dele. Agora os
   tres modelos usam a mesma peca, e ela mora no arquivo compartilhado. */

.modelo2-social-icone {
    width: 22px;
    height: 22px;
}

/* --------------------------------------------------------------------------
   GRID DE LINKS
   -------------------------------------------------------------------------- */
/* UMA GRADE SO, E A ORDEM MANDA (07/10/2026).
   --------------------------------------------------------------------------
   Aqui havia TRES COLUNAS de verdade: tres `<div>` em flex, a do meio para os
   destaques e as duas laterais com os comuns repartidos ao meio. Isso tirava o
   destaque da fila: a Stefanie poe o card do Instagram em PRIMEIRO na lista e
   ele aparecia no centro da pagina. Nas palavras dela, "a ordem aqui tem que
   fazer jus... ele tem que estar destacado na esquerda, nao ao meio; agora se
   eu colocar no meio, ai sim destacado no meio".

   Agora os cards sao filhos DIRETOS de uma grade, na ordem em que estao na
   lista, e o que distingue o destaque e o TAMANHO: ele ocupa duas fileiras
   (`grid-row: span 2`), no lugar onde a pessoa o deixou.

       [ DESTAQUE ] [ card ] [ card ]
       [    ^     ] [ card ] [ card ]
       [  card    ] [ card ]

   Em 23/09 eu ja tinha tentado tirar o destaque do centro, mas o fiz virar uma
   FAIXA de 900 por 190 ocupando a linha inteira - e isso cortou a arte em pe de
   uma pagina de cliente que ja estava no ar. O erro de la nao foi respeitar a
   ordem; foi mudar a FORMA do card junto. Uma celula de uma coluna por duas
   fileiras fica quase quadrada, que e a forma que as artes de link tem.

   -----------------------------------------------------------------------------
   E A LEITURA CORRE EM COLUNAS, NAO EM FILEIRAS (escolha dela, 07/10/2026).

   A primeira versao desta grade corria em fileiras, como um texto: 1, 2, 3 na
   primeira linha, 4, 5, 6 na segunda. A ordem era respeitada, medi e conferi -
   mas nao era a ordem que ela esperava ver. Perguntei, com os dois desenhos
   lado a lado, e ela escolheu COLUNAS: a lista desce a coluna da esquerda, e
   so entao passa para a do meio. E como era o Modelo 2 ate 23/09 e como o
   Modelo 3 continua sendo.

   QUEM FAZ ISSO E O `column-count`, e nao um grid nem colunas montadas no PHP.

   Colunas montadas no PHP precisariam saber QUANTAS colunas cabem na tela de
   quem olha, e o PHP nao sabe: sao tres no desktop, duas no tablet e uma no
   celular. Seriam tres repartimentos diferentes para o mesmo conteudo.

   O `column-count` reparte sozinho, em cada largura, e equilibra as alturas. E
   quando sobra uma coluna so, no celular, as colunas empilham na ordem - o que
   devolve exatamente a ordem da lista, sem regra nenhuma a mais.

   O `break-inside: avoid` no card e o que impede um card de ser cortado ao
   meio e continuar na coluna seguinte, que e o comportamento padrao de texto
   em colunas e seria absurdo num card. */
.modelo2-grid {
    column-gap: var(--m2-gap);
    width: 100%;
}

/* O `width: 100%` NAO E REDUNDANTE, e custou uma medicao para eu entender.

   O destaque tem `aspect-ratio` e um piso de altura. Com a largura em `auto`,
   a proporcao vale nos DOIS sentidos: quando o piso de altura entrava em
   acao, o navegador recalculava a LARGURA a partir dela. Medido: coluna de
   467, card de 520 - ele vazava para cima da coluna vizinha. Fixando a
   largura, sobra uma conta so: a altura sai da largura, limitada pelo piso. */
.modelo2-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--m2-gap);
    width: 100%;
}

/* A ARTE DECIDE A ALTURA DO DESTAQUE, E NADA E CORTADO.

   Medido na pagina da cliente: a arte e quadrada, a coluna tem 467, o card sai
   467 por 465. Antes disto ele era esticado a uma altura fixa e o `cover`
   comia 17% - justamente a palavra "INSTAGRAM", escrita no pe da arte.

   O `min-height: 0` e deliberado e tem um custo: arte muito deitada (2:1) numa
   coluna estreita vira um card quase da altura de um comum, e ai o destaque
   quase nao se destaca. Eu cheguei a deixar o piso de `--m2-h-destaque` por
   baixo e medi o resultado no tablet: 27% da arte cortada. Entre um destaque
   discreto e uma arte cortada, escolho o discreto - "nada e cortado" e o que o
   painel promete a quem envia a capa, e promessa quebrada na tela e pior do
   que card pequeno.

   Quem manda arte QUADRADA (o que a dica da capa recomenda) ganha os dois: o
   card fica alto e inteiro. Sem proporcao conhecida - arte antiga, arquivo
   ilegivel - o piso de `--m2-h-destaque` continua valendo, porque ai nao ha
   forma a respeitar. */
.modelo2-card-destaque[style*="--m2-capa-proporcao"] {
    aspect-ratio: var(--m2-capa-proporcao);
    min-height: 0;
}

.modelo2-grid-2 {
    column-count: 2;
    max-width: 900px;
    margin: 0 auto;
}

/* TRES COLUNAS IGUAIS. A do meio era 1.15fr, mais larga que as outras, porque
   era a coluna DO DESTAQUE. Sem coluna de destaque, uma coluna mais gorda no
   meio nao representa mais nada - representaria o lugar onde o destaque
   costumava ficar. */
.modelo2-grid-3 {
    column-count: 3;
}

/* AQUI FICAVAM AS COLUNAS (`.modelo2-coluna`) e as duas regras que faziam o
   destaque esticar ate preencher a coluna central, com teto de 520px para ele
   nao virar paredao. As tres sairam junto com a coluna central: na grade, a
   altura do destaque sao duas fileiras, e isso ja tem teto por construcao. */

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.modelo2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--m2-h-card, 118px);
    padding: 22px 20px;
    border-radius: var(--m2-raio);
    /* A SUPERFICIE DO CARD SEGUE O TEMA (02/10/2026).
       -------------------------------------------------------------------
       Era `#ffffff` chumbado. Os cards COM arte nao pareciam brancos porque
       a capa cobre tudo; o do Spotify nao tem capa, e virou um cartao branco
       no meio de uma pagina marrom escuro. A Stefanie: "a cor do card de
       musica nao segue com a paleta do tema, ela so usa branco".

       Nao era problema do card de musica: era de TODOS. Ela escolheu trocar
       o modelo inteiro, e e a escolha coerente - um branco que ignora a
       paleta ia reaparecer em todo card sem arte.

       A MESMA RECEITA DO MODELO 1: a cor da pagina como base, tingida com a
       cor de links. O card se destaca do fundo sem sair da paleta, e em tema
       claro ele continua claro, porque a base e o proprio fundo da pagina. */
    background-color: var(--cor-principal-plana, #ffffff);
    background-image: linear-gradient(var(--cor-links-fraca, rgba(34, 32, 30, .06)),
                                      var(--cor-links-fraca, rgba(34, 32, 30, .06)));
    /* A sombra quase nao aparece em fundo escuro, entao a borda e que passa a
       dizer onde o card termina. Em fundo claro as duas convivem. */
    border: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .1));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    text-align: center;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s ease;
}

/* Faixa de acento na cor escolhida na Personalizacao */
.modelo2-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--cor-links, var(--cor-principal, #7b1fa2));
    opacity: .85;
    z-index: 3;
}


/* Sobe mais que o Modelo 3 porque o card aqui e maior e tem sombra mais forte;
   3px sumiriam embaixo dela. O mecanismo esta no estilo.css, em "O CARD TEM DE
   RESPONDER AO MOUSE". */
.modelo2-card {
    --erguer-hover: -5px;
}

.modelo2-card:hover,
.modelo2-card:focus-visible {
    box-shadow: 0 18px 34px rgba(0, 0, 0, .24);
}

.modelo2-card:hover::before {
    opacity: 1;
}

/* --- CARD COM CAPA ---------------------------------------------------------
   A arte entra como background-image do card: preenche todo o container,
   qualquer que seja a altura da linha do grid. O titulo e a legenda ficam
   por cima, sobre um veu que garante a leitura. */
.modelo2-card-com-capa {
    background-image: var(--m2-capa);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Cor PLANA: `background-color` nao aceita gradiente, e --cor-links pode
       ser um. Com gradiente a declaracao era descartada e o card ficava
       transparente enquanto a arte nao chegava. Ver pre.php. */
    background-color: var(--cor-links-plana, var(--cor-principal, #7b1fa2));

    /* A FAIXA LARANJA EM VOLTA DA ARTE (02/10/2026).
       -----------------------------------------------------------------------
       A Stefanie: "ta ficando uma faixa ali em volta da img, ta laranja ali
       com borda, se tem img nao era para ter borda ali".

       Eu procurei no lugar errado duas vezes. Achei que fosse a faixa de
       acento do `::before` e escrevi uma regra para escondê-la - e ela JA
       estava escondida aqui embaixo desde sempre; minha regra era copia. Medi
       de novo e o laranja era o `background-color` desta regra, o fundo de
       reserva que existe para o card nao ficar transparente enquanto a arte
       carrega.

       Ele aparecia por causa da borda de 1px que entrou hoje com a superficie
       tematica. `background-origin` vale `padding-box` por padrao: a ARTE e
       dimensionada so ate a borda, e a cor de reserva atravessa por baixo
       dela. Resultado: um fio laranja de 1px em volta da imagem, que no topo
       do card se le como faixa.

       `border-box` manda a arte cobrir tambem a faixa da borda. O card
       continua com o mesmo tamanho do vizinho sem arte - que e por isso que a
       borda ficou `transparent` em vez de sumir. */
    background-origin: border-box;
    border-color: transparent;
}

/* Sem faixa de acento: a propria arte ja da a cor do card */
.modelo2-card-com-capa::before {
    display: none;
}

/* "Somente imagem": nada por cima da arte, so o padding sai do caminho */
.modelo2-card-so-imagem {
    padding: 0;
}

/* Texto que existe so para leitores de tela e para o SEO (fica invisivel) */
.modelo2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Veu sobre a arte - so existe quando ha capa */
.modelo2-card-com-capa .modelo2-card-veu {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Puxa a cor do tema (--veu-card, montada no pre.php) em vez de um roxo
       fixo: assim a faixa combina com o fundo que o cliente escolheu. */
    background: linear-gradient(180deg, var(--veu-card, rgba(18, 5, 30, .48)) 0%, var(--veu-card-forte, rgba(18, 5, 30, .68)) 100%);
    transition: background .3s ease;
}

.modelo2-card-com-capa:hover .modelo2-card-veu {
    background: linear-gradient(180deg, var(--veu-card, rgba(18, 5, 30, .36)) 0%, var(--veu-card-forte, rgba(18, 5, 30, .58)) 100%);
    opacity: .82;
}

.modelo2-card-texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.modelo2-card-titulo {
    font-size: clamp(14px, 1.35vw, 17px);
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.3;
    text-transform: uppercase;
    /* A TINTA ACOMPANHA A SUPERFICIE. Com o card branco, `#1e272e` se lia; com
       o card na cor da pagina, um quase-preto fixo sumiria em toda paleta
       escura. `--cor-texto` e a tinta que o tema ja garante legivel sobre o
       fundo da pagina, e a base do card e esse mesmo fundo. */
    color: var(--cor-texto, #1e272e);
    word-break: break-word;
}

/* A legenda e a MESMA tinta com menos forca, e nao um cinza proprio: cinza
   fixo some em fundo escuro e vira o titulo em fundo claro. */
.modelo2-card-legenda {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cor-texto, #5a6673);
    opacity: .72;
    text-transform: none;
    letter-spacing: 0;
}

/* Sobre a arte o texto vira branco, com sombra para nao sumir */
.modelo2-card-com-capa .modelo2-card-titulo {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.modelo2-card-com-capa .modelo2-card-legenda {
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* Card em destaque: mais alto que os comuns, com texto proporcionalmente maior */
.modelo2-card-destaque {
    min-height: var(--m2-h-destaque, 180px);
    padding: 30px 26px;
}

.modelo2-card-destaque .modelo2-card-titulo {
    font-size: clamp(17px, 1.7vw, 22px);
    letter-spacing: 1.6px;
}

.modelo2-card-destaque .modelo2-card-legenda {
    font-size: 14px;
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   MAPA E RODAPE
   -------------------------------------------------------------------------- */
/* O mapa fica de fora do alargamento: a area de cards foi para 1444px, mas
   mapa esticado so mostra mais rua em volta, sem ajudar ninguem a achar o
   endereco. Continua na largura de antes, centralizado. */
.modelo2-mapa {
    margin: 46px auto 0;
    width: 100%;
    max-width: var(--m2-largura-mapa, 1180px);
    border-radius: var(--m2-raio);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    line-height: 0;
}

.modelo2-mapa iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
}

.modelo2-rodape {
    margin-top: auto;
    padding-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: var(--cor-texto, #ffffff);
    opacity: .9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.modelo2-rodape a {
    color: inherit !important;
    font-weight: 700;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   Abaixo de 991px o posicionamento fixo em 3 colunas e desfeito: os cards
   voltam ao fluxo automatico do grid (o destaque assume a linha inteira).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .modelo2-grid-2,
    .modelo2-grid-3 {
        column-count: 2;
        max-width: 780px;
        margin: 0 auto;
    }

    /* AQUI A COLUNA DE DESTAQUES IA PARA O TOPO, na largura toda
       (`grid-column: 1 / -1; order: -1`). Era o que havia de mais contrario a
       ordem escolhida: no tablet, um card posto em sexto lugar aparecia em
       primeiro. Em duas colunas o destaque continua sendo uma celula de uma
       coluna por duas fileiras, no lugar dele.

       A REGRA DO `aspect-ratio` (o destaque tomando a forma da propria arte)
       desceu para o bloco de 640px, de onde ela tinha subido em 02/10. Ela
       subiu porque naquele desenho o destaque virava FAIXA larga ja no tablet,
       e faixa com altura fixa corta arte quadrada pelas beiradas. Hoje a
       celula do tablet mede cerca de 380 por 384: nao e faixa, e quase um
       quadrado, e o `cover` nao tem o que cortar. Com uma coluna so, em 640px,
       a faixa volta a existir - e a regra volta a fazer falta la. */
}

@media (max-width: 640px) {
    .modelo2 {
        padding: 34px 14px 56px;
        background-attachment: scroll;
    }

    /* Uma coluna so: display:contents dissolve os agrupamentos e todos os cards
       passam a ser filhos diretos do grid, um embaixo do outro. */
    .modelo2-grid-2,
    .modelo2-grid-3 {
        column-count: 1;
        max-width: 460px;
    }

    /* AQUI O CELULAR SOLTAVA O PISO DE ALTURA DO DESTAQUE. A regra geral passou
       a fazer isso em toda largura (ver `min-height: 0` la em cima), entao esta
       virou repeticao e saiu. */

    .modelo2-avatar {
        width: 108px;
        height: 108px;
    }

    .modelo2-card {
        padding: 20px 16px;
    }

    .modelo2-card-destaque {
        padding: 24px 18px;
    }

    .modelo2-mapa iframe {
        height: 260px;
    }
}

/* Respeita usuarios que preferem menos animacao */
@media (prefers-reduced-motion: reduce) {
    .modelo2-card,
    .modelo2-avatar,
    .modelo2-social-btn {
        transition: none;
    }

    .modelo2-card:hover,
    .modelo2-avatar:hover,
    .modelo2-social-btn:hover {
        transform: none;
    }
}

/* O card de cupom nao tem regras aqui: a etiqueta e o aviso de "copiado"
   aparecem nos dois modelos, e este arquivo so carrega no Modelo 2. As regras
   moraram aqui por um tempo, e por isso a etiqueta saia sem formatacao no
   Modelo 1. Agora vivem em library/css/estilo.css. */

/* --------------------------------------------------------------------------
   CABEÇALHO DE SEÇÃO (categorias)

   O Modelo 2 pinta a seção com mais peso que o Modelo 1: aqui o título da
   seção é o único texto grande entre os cards, então ele estrutura a página
   em vez de só rotular um bloco.

   A `--m2-largura-estreita` acompanha o `.modelo2-grid-2`: seção sem destaque
   usa o grid de 2 colunas, que é centralizado e mais estreito, e o cabeçalho
   tem de ter a mesma largura dos cards que anuncia.
   -------------------------------------------------------------------------- */
/* O respiro ACIMA é o que separa uma seção dos cards da seção anterior, e por
   isso é bem maior que o de baixo: embaixo ele só solta o título dos próprios
   cards, que já pertencem a ele.

   Aqui havia uma regra `.modelo2-grid + .modelo2-secao { margin-top: 0 }`, que
   eu pus para evitar espaço dobrado e que fazia o oposto: zerava a margem de
   TODA seção que vem depois de um grid, ou seja de todas menos a primeira. O
   resultado era o título da seção encostado nos cards de cima. */
.modelo2-secao {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 64px auto 22px;
}

/* A PRIMEIRA seção da página, e só ela.
   O "~" pega todas as seções depois do perfil; o "+ .modelo2-grid" amarra em
   "a que vem logo antes de um grid" - o que ainda pega todas. Quem escolhe só
   a primeira é a ordem: esta regra vem depois, e o seletor abaixo devolve os
   64px a qualquer seção que tenha um grid ANTES dela. Sem ":has()", sem
   classe nova no template, e sem depender de os horários aparecerem ou não. */
.modelo2-perfil ~ .modelo2-secao {
    margin-top: 26px;
}

.modelo2-grid ~ .modelo2-secao {
    margin-top: 64px;
}

.modelo2-secao-estreita {
    max-width: 900px;
}

/* A FILEIRA DE FILTRO segue a mesma faixa do cabecalho de secao (02/10/2026).
   A aparencia das pastilhas esta no estilo.css, que e compartilhado com o
   Modelo 1; aqui fica so a medida, porque so aqui ela e esta. Sem isto a
   fileira comecava na borda da janela e os cards 210px adiante - medido. */
.modelo2-indice {
    max-width: 900px;
    /* `auto` nas laterais para centrar na faixa de 900px; o 34px de cima e o
       mesmo do estilo.css, repetido aqui porque a abreviada `margin` o
       sobrescreveria por inteiro. */
    margin: 34px auto 22px;
}

.modelo2-secao-titulo {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--estilo-fonte);
    font-size: clamp(17px, 1.6vw, 22px);
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--cor-texto);
}

/* A linha come o espaço que sobra: o título fica à esquerda e a contagem à
   direita, sem nenhum dos dois precisar saber a largura do outro. */
.modelo2-secao-linha {
    flex-grow: 1;
    height: 1px;
    background: var(--cor-texto);
    opacity: .26;
}

/* Sem fundo, de propósito. A primeira versão era uma pílula pintada com
   --social-fundo e --cor-links, e quando o cliente escolhe as duas claras -
   como está na conta principal - saía branco no branco: uma bolinha vazia no
   canto. Texto na cor do conteúdo não tem como desaparecer, porque é a mesma
   cor que o resto da página já usa. */
.modelo2-secao-conta {
    flex-shrink: 0;
    font-family: var(--estilo-fonte);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--cor-texto);
    opacity: .6;
}

@media (max-width: 767px) {
    .modelo2-secao {
        gap: 12px;
        margin: 42px auto 16px;
    }
    .modelo2-secao-titulo {
        font-size: 15px;
        letter-spacing: 1.6px;
    }
    .modelo2-secao-conta {
        font-size: 11px;
        letter-spacing: .8px;
    }
}

/* ===========================================================================
   BLOCO DE HORÁRIOS - pele do Modelo 2
   ---------------------------------------------------------------------------
   Estrutura em templates/partes/horarios.php, base em library/css/estilo.css.

   Modelo 2 é card branco com sombra, texto centrado, num grid de 900px. O
   quadro segue: mesma superfície branca, mesma sombra, mesmo raio, e a mesma
   largura máxima do .modelo2-grid-2 - para a borda dele bater com a dos cards
   de cima e de baixo em vez de sobrar para os lados.
   =========================================================================== */
.bloco-horarios-m2 {
    width: 100%;
    max-width: 900px;
    margin: 44px auto 0;
    padding: 26px 28px;
    border-radius: var(--m2-raio);
    /* A MESMA SUPERFICIE DOS CARDS (02/10/2026).
       Quando os cards passaram a seguir o tema, este bloco virou a unica
       coisa branca da pagina - mais gritante do que antes, quando todos eram
       brancos juntos. Mudar um e ter de mudar o vizinho. */
    background-color: var(--cor-principal-plana, #ffffff);
    background-image: linear-gradient(var(--cor-links-fraca, rgba(34, 32, 30, .06)),
                                      var(--cor-links-fraca, rgba(34, 32, 30, .06)));
    border: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .1));
    color: var(--cor-texto, #22201e);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.bloco-horarios-m2 .bloco-horarios-cabeca {
    justify-content: center;
    padding-bottom: 16px;
    margin-bottom: 2px;
    border-bottom: 1.5px solid var(--cor-links-fraca, rgba(34, 32, 30, .14));
    color: var(--cor-links-plana, #22201e);
}

.bloco-horarios-m2 .bloco-horarios-titulo {
    font-size: 19px;
    color: var(--cor-texto, #22201e);
}

.bloco-horarios-m2 .bloco-horarios-local {
    padding: 18px 0 4px;
    font-size: 11.5px;
    text-align: center;
    color: var(--cor-links-plana, #6b625b);
}

.bloco-horarios-m2 .bloco-horarios-linha {
    border-bottom: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .10));
}

.bloco-horarios-m2 .bloco-horarios-dia {
    font-size: 15px;
    color: var(--cor-texto, #22201e);
}

/* A hora e a observacao sao a MESMA tinta com menos forca, e nao cinzas
   proprios: cinza fixo some em fundo escuro. */
.bloco-horarios-m2 .bloco-horarios-horas {
    font-size: 15px;
    color: var(--cor-texto, #4a433d);
    opacity: .78;
}

.bloco-horarios-m2 .bloco-horarios-obs {
    color: var(--cor-texto, #6b625b);
    opacity: .68;
}


/* ---------------------------------------------------------------------------
   CARD INFORMATIVO - pele do Modelo 2
   ---------------------------------------------------------------------------
   Herda o .modelo2-card, então já vem com superfície, sombra e raio. O que
   muda: o conteúdo deixa de ser centrado em coluna e passa a ser foto à
   esquerda com texto à direita, porque é um card de pessoa e não de link.
   --------------------------------------------------------------------------- */
.modelo2-card.card-info {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* O .modelo2-card tem um ::before que desenha o realce de clique. Num card que
   não clica ele não faz sentido e some. */
.modelo2-card.card-info::before {
    display: none;
}

.modelo2-card.card-info .card-info-titulo {
    /* Mesma razao do `.modelo2-card-titulo`: a superficie passou a ser a cor
       da pagina, entao a tinta tem de ser a do tema. */
    color: var(--cor-texto, #22201e);
}

.modelo2-card.card-info .card-info-legenda {
    color: var(--cor-links-plana, #6b625b);
    opacity: 1;
}

/* ---- ENDEREÇO E MAPA: pele do Modelo 2 ----
   Mesma superfície e sombra dos cards, e a largura do grid de 2 colunas, para
   a borda bater com a dos cards de cima. */
.bloco-mapa-m2.bloco-mapa-cartao,
.bloco-mapa-m2.bloco-mapa-soEndereco {
    width: 100%;
    max-width: 900px;
    margin: 34px auto 0;
    border-radius: var(--m2-raio);
    /* Mesma superficie dos cards e do bloco de horarios. */
    background-color: var(--cor-principal-plana, #ffffff);
    background-image: linear-gradient(var(--cor-links-fraca, rgba(34, 32, 30, .06)),
                                      var(--cor-links-fraca, rgba(34, 32, 30, .06)));
    border: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .1));
    color: var(--cor-texto, #22201e);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.bloco-mapa-m2 .bloco-mapa-rotulo,
.bloco-mapa-m2 .bloco-mapa-link {
    color: var(--cor-links-plana, #6b625b);
}

.bloco-mapa-m2 .bloco-mapa-resto {
    color: #4a433d;
}

/* O mapa largo, quando escolhido, acompanha a largura do conteúdo em vez de
   sangrar até a borda da tela. */
.bloco-mapa-m2.bloco-mapa-largo {
    width: 100%;
    max-width: 900px;
    margin: 34px auto 0;
    border-radius: var(--m2-raio);
    overflow: hidden;
    line-height: 0;
}

.bloco-mapa-m2.bloco-mapa-largo iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}