/* ============================================================================
   MODELO 3 - Perfil na lateral + duas colunas de cards
   ----------------------------------------------------------------------------
   Desenho aprovado em 17/09/2026 (canvas do Modelo 3). Diferente dos outros
   dois em três coisas que valem registrar:

   1. É CLARO por padrão. Os Modelos 1 e 2 são escuros, e o cliente que quer
      uma página clara não tinha opção. Aqui o fundo sai da Personalização como
      nos outros, mas os cards são superfícies brancas sobre esse fundo, então
      um fundo claro funciona de verdade em vez de virar texto branco no branco.

   2. O PERFIL fica na lateral, não no topo. Em tela larga isso deixa nome,
      bio, redes e o índice das seções sempre visíveis enquanto a pessoa lê os
      cards. No celular ele volta para o topo, porque lateral em 390px não é
      lateral, é um card estreito.

   3. Cada seção tem as suas DUAS colunas, e elas correm independentes: card
      alto numa coluna não obriga o vizinho a crescer.

   Tudo pintado pelas variáveis da Personalização, montadas no pre.php:
   --cor-principal (fundo), --cor-links, --cor-texto, --estilo-fonte,
   --estilo-arredondamento, --veu-card, --social-fundo.
   ========================================================================== */

:root {
    --m3-largura: 1320px;
    --m3-perfil: 340px;
    --m3-gap: 22px;
    --m3-gap-coluna: 26px;

    /* Superfície do card. Não é branco puro: sobre fundo claro o branco puro
       some, e sobre fundo escuro ele estoura. Um branco levemente quente
       assenta nos dois. */
    --m3-superficie: #ffffff;
    --m3-tinta: #22201e;
    --m3-tinta-fraca: #6b625b;
    --m3-borda: rgba(34, 32, 30, .1);
    --m3-sombra: 0 2px 16px rgba(34, 32, 30, .07);

    --m3-h-card: 168px;

    /* O CARD COMPRIDO. 452px é a medida do mockup aprovado, e não é detalhe:
       é ela que faz o destaque valer como destaque ao lado de cards de ~270px,
       e é ela que dá o ritmo desencontrado entre as duas colunas - o que a
       Stefanie chamou de "cards espalhados entre eles". Eu havia colocado
       300px, e a página saiu com tudo quase da mesma altura: sem ritmo, e o
       destaque deixava de se destacar. */
    --m3-h-card-alto: 452px;
    --m3-h-card-medio: 196px;
}

/* --------------------------------------------------------------------------
   A PÁGINA
   -------------------------------------------------------------------------- */
.modelo3-pagina {
    min-height: 100vh;
    padding: 46px 24px 30px;
    background: var(--cor-principal);
    font-family: var(--estilo-fonte);
    color: var(--m3-tinta);
}

/* A arte de fundo da Personalização entra fixa, com um véu por cima: sem o véu
   o texto do perfil competia com a foto. */
.modelo3-pagina[style*="--m3-fundo"] {
    background-image: linear-gradient(var(--veu-card, rgba(0, 0, 0, .35)), var(--veu-card, rgba(0, 0, 0, .35))), var(--m3-fundo);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.modelo3-conteudo {
    width: 100%;
    max-width: var(--m3-largura);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: var(--m3-gap-coluna);
}

/* --------------------------------------------------------------------------
   PERFIL (coluna da esquerda)
   -------------------------------------------------------------------------- */
.modelo3-perfil {
    width: var(--m3-perfil);
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 30px 26px;
    background: var(--m3-superficie);
    border-radius: var(--estilo-arredondamento, 20px);
    box-shadow: var(--m3-sombra);
    display: flex;
    flex-direction: column;
    gap: 18px;

    /* Acompanha a rolagem: a página é uma lista longa de cards, e perder o
       nome e as redes de vista logo no primeiro rolar é perder justamente o
       que identifica a pessoa. */
    position: sticky;
    top: 24px;
}

.modelo3-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(34, 32, 30, .06);
}

.modelo3-nome {
    margin: 0;
    font-family: var(--estilo-fonte);
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--m3-tinta);
    word-break: break-word;
}

.modelo3-arroba {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--m3-tinta-fraca);
}

.modelo3-bio {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--m3-tinta-fraca);
}

.modelo3-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.modelo3-rede {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--social-fundo, rgba(34, 32, 30, .07));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.modelo3-rede:hover {
    transform: translateY(-2px);
}

/* O ícone é um SVG monocromático pintado por mask, como no Modelo 2: assim
   ele acompanha a cor de links da Personalização em vez de vir chumbado. */
.modelo3-rede-icone {
    width: 21px;
    height: 21px;
    background: var(--cor-links, #22201e);
    -webkit-mask: var(--icone) no-repeat center / contain;
    mask: var(--icone) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   ÍNDICE DAS SEÇÕES (dentro do perfil)
   É o que o Modelo 3 tem e os outros dois não: em página com seções, um atalho
   para cada uma. Só aparece quando há mais de uma seção.
   -------------------------------------------------------------------------- */
.modelo3-indice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--m3-borda);
}

.modelo3-indice-rotulo {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--m3-tinta-fraca);
    padding-bottom: 2px;
}

.modelo3-indice a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    color: var(--m3-tinta-fraca);
    transition: background .2s ease, color .2s ease;
}

.modelo3-indice a:hover {
    background: rgba(34, 32, 30, .05);
    color: var(--m3-tinta);
}

.modelo3-indice-conta {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(34, 32, 30, .08);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--m3-tinta-fraca);
}

/* O BOTAO "TUDO" e o filtro em que a secao escolhida fica marcada (02/10/2026).
   ----------------------------------------------------------------------------
   O indice existia e so rolava; agora ele filtra. O desenho de cada item nao
   mudou - o que entrou foi o "Tudo", que precisa parecer irmao dos outros, e
   o estado de ESCOLHIDO, que antes nao existia porque nao havia escolha.

   O "Tudo" e um <button> e os outros sao <a>: sem herdar nada ele sairia com a
   fonte e a borda do sistema no meio de uma lista de links. Daí a repeticao
   das propriedades aqui. */
.modelo3-indice-tudo {
    display: flex;
    align-items: center;
    /* `space-between` como nos <a> irmaos: a contagem do "Tudo" precisa cair
       na mesma coluna da direita que as outras, senao ela flutua no meio. */
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    color: var(--m3-tinta-fraca);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.modelo3-indice-tudo:hover { background: rgba(34, 32, 30, .05); color: var(--m3-tinta); }

/* ESCOLHIDO NAO E SO COR. Um fundo um pouco mais escuro, no modelo claro, é a
   diferenca que some na tela de celular no sol - a barra a esquerda e o peso
   da letra dizem a mesma coisa sem depender de enxergar o fundo. */
.modelo3-indice [aria-current="true"] {
    position: relative;
    background: rgba(34, 32, 30, .07);
    color: var(--m3-tinta);
}

.modelo3-indice [aria-current="true"]::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--m3-tinta);
}

.modelo3-indice [aria-current="true"] .modelo3-indice-conta {
    background: rgba(34, 32, 30, .14);
    color: var(--m3-tinta);
}

/* --------------------------------------------------------------------------
   ÁREA DOS CARDS
   -------------------------------------------------------------------------- */
.modelo3-corpo {
    flex-grow: 1;
    min-width: 0;   /* sem isto o flex nao deixa o conteudo encolher e estoura */
    display: flex;
    flex-direction: column;
}

/* Cabeçalho de seção */
.modelo3-secao {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 42px 0 20px;
}

.modelo3-secao:first-child {
    margin-top: 0;
}

.modelo3-secao-titulo {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--estilo-fonte);
    font-size: clamp(20px, 1.9vw, 27px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--cor-texto);
}

.modelo3-secao-linha {
    flex-grow: 1;
    height: 1px;
    background: var(--cor-texto);
    opacity: .22;
}

.modelo3-secao-conta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--cor-texto);
    opacity: .6;
}

/* Duas colunas que correm independentes: card alto de um lado nao obriga o
   vizinho a crescer, que e o que da o ritmo irregular do desenho. */
.modelo3-grid {
    display: flex;
    align-items: flex-start;
    gap: var(--m3-gap);
}

.modelo3-coluna {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--m3-gap);
}

/* --------------------------------------------------------------------------
   OS CARDS
   -------------------------------------------------------------------------- */
.modelo3-card {
    position: relative;
    display: block;
    box-sizing: border-box;
    background: var(--m3-superficie);
    border-radius: var(--estilo-arredondamento, 20px);
    box-shadow: var(--m3-sombra);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

/* O levantar do hover mora na propriedade `translate`, e o quanto ele sobe
   vem daqui. O porque esta explicado no estilo.css, em "O CARD TEM DE RESPONDER
   AO MOUSE": `transform` nesta altura perde para o AOS, em peso e em tempo. */
.modelo3-card {
    --erguer-hover: -3px;
}

.modelo3-card:hover,
.modelo3-card:focus-visible {
    box-shadow: 0 10px 26px rgba(34, 32, 30, .16);
}

/* ---- Card SÓ TEXTO: sem capa enviada.
   No Modelo 1 isso virava uma faixa cinza vazia. Aqui é um card legítimo, e o
   contraste é invertido de propósito - ele precisa se distinguir dos cards com
   arte sem depender de imagem nenhuma.

   A BORDA clara não é enfeite. O desenho foi aprovado sobre um fundo creme,
   onde o card escuro salta. Duas das três contas que existem hoje têm fundo
   escuro, e ali o card escuro sobre fundo escuro quase desaparecia - visto no
   navegador na conta de teste. A linha de 1px o recorta do fundo sem mudar o
   desenho aprovado: sobre creme ela é discreta, sobre escuro é o que define a
   silhueta do card. */
.modelo3-card-texto {
    /* O recuo de 62px à direita é o lugar da seta redonda. Sem ele o subtítulo
       corria por baixo dela e a última palavra ficava ilegível - visto no
       navegador com "Entrego em Londrina e região". */
    padding: 26px 62px 26px 24px;

    /* Altura pelo CONTEÚDO, não fixa. Era `min-height: 168px` e deixava todo
       card de texto do mesmo tamanho - o oposto do encaixe que o mockup tem,
       onde o card curto é curto e o comprido é comprido. O mínimo baixo evita
       só que um card de título curto vire uma tarja. */
    min-height: 120px;

    /* TINGIDO com a cor do tema, sobre a mesma superfície dos outros cards.
       Era um marrom escuro chumbado no CSS (#22201e), e o resultado era "uma
       cor estranha, diferente da cor do tema" - ele não tinha relação nenhuma
       com a Personalização, ao contrário do botão de WhatsApp.

       Duas camadas: o tinte da cor de links por cima do branco do card. Assim
       ele se distingue dos cards com arte sem virar um bloco escuro, e
       acompanha qualquer paleta que o cliente escolher. */
    background-color: var(--m3-superficie);
    background-image: linear-gradient(var(--cor-links-media, rgba(34, 32, 30, .1)),
                                      var(--cor-links-media, rgba(34, 32, 30, .1)));
    border: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .1));
    display: flex;
    flex-direction: column;
    gap: 11px;
    justify-content: center;
}

/* O texto do card tingido é escuro, como nos outros cards - é superfície
   clara, não mais um bloco escuro. */
.modelo3-card-texto .modelo3-card-titulo {
    color: var(--m3-tinta);
}

.modelo3-card-texto .modelo3-card-legenda {
    color: var(--m3-tinta-fraca);
}

/* O corpo NÃO repete o padding do card.
   Os dois tinham padding próprio, então o texto ficava a 48px da borda
   enquanto a etiqueta de cupom ficava a 13px - medido. Quem espaça o card de
   texto é o card. */
.modelo3-card-texto .modelo3-card-corpo {
    padding: 0;
}

/* A seta sobre o card tingido: a sombra fica mais leve, porque aqui não há
   arte por baixo competindo com ela. As regras de cor de texto que existiam
   neste ponto (branco, para o card escuro) saíram junto com o fundo escuro. */
.modelo3-card-texto .modelo3-card-seta {
    box-shadow: 0 2px 8px rgba(34, 32, 30, .14);
}

/* ---- Card COM CAPA: arte à ESQUERDA, texto à direita.
   É o que o desenho aprovado pede. A primeira versão punha a arte em cima e o
   texto embaixo, e isso trouxe dois problemas: não era o desenho, e a altura
   do card passava a depender de quantas linhas o subtítulo ocupava - dois
   cards lado a lado saíam de tamanhos diferentes.

   Lado a lado, a altura é fixa, e o texto se acomoda dentro dela. */
.modelo3-card-capa {
    display: flex;
    align-items: stretch;
    /* Mínimo, e não altura travada: o card cresce se o texto pedir. É só o
       mínimo que impede a arte de virar uma tira fina. */
    min-height: 150px;
}

.modelo3-card-capa .modelo3-card-arte {
    width: 38%;
    max-width: 190px;
    flex-shrink: 0;
    object-fit: cover;
    background: rgba(34, 32, 30, .06);
}

.modelo3-card-capa .modelo3-card-corpo {
    flex-grow: 1;
    min-width: 0;
    padding: 20px 56px 20px 22px;   /* espaço à direita para a seta */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.modelo3-card-corpo {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ---- Card de FAIXA: arte 2:1 na largura inteira, texto embaixo.
   É o mesmo card do lado a lado, com a arte em outra posição. A escolha é
   feita pelo template, medindo a imagem: arte quase quadrada cabe no espaço
   estreito do lado a lado; faixa larga não cabe, e com `cover` perderia as
   pontas - era o nome do link sendo cortado no meio.

   A altura é fixa nas duas formas, então dois cards do mesmo tipo saem sempre
   do mesmo tamanho. */
.modelo3-card-faixa .modelo3-card-capa {
    display: block;
    min-height: 0;
}

.modelo3-card-faixa .modelo3-card-arte {
    display: block;
    width: 100%;
    max-width: none;
    height: 168px;
}

/* Altura FIXA, e não `min-height`. O subtítulo pode ter uma ou duas linhas, e
   com min-height o card de duas linhas ficava 18px mais alto que o vizinho -
   era a "diferença de tamanho" que sobrava depois de clampar o texto. Com
   altura fixa, o de uma linha centraliza dentro do mesmo espaço. */
.modelo3-card-faixa .modelo3-card-corpo {
    display: flex;
    justify-content: center;
    padding: 16px 56px 18px 22px;
}

/* Subtítulo em no máximo DUAS linhas.
   Sem isto, uma legenda longa empurrava a altura do card e o vizinho ficava
   visivelmente mais curto - foi o que apareceu na conta principal, onde um
   subtítulo tem 11 palavras e o outro tem 4. O texto inteiro continua no
   title do card e para leitores de tela. */
.modelo3-card-legenda {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modelo3-card-titulo {
    display: block;
    font-family: var(--estilo-fonte);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.22;
    color: var(--m3-tinta);
    word-break: break-word;
}

.modelo3-card-legenda {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--m3-tinta-fraca);
}

/* ---- Card DESTAQUE ("Capa com título" no desenho): a arte ocupa o card e o
   texto entra por cima, com véu. É o único que usa texto sobre arte, porque é
   o que lhe dá o peso visual de destaque. */
.modelo3-card-destaque {
    position: relative;
}

.modelo3-card-destaque .modelo3-card-capa {
    display: block;
    min-height: 0;
}

.modelo3-card-destaque .modelo3-card-arte {
    display: block;
    width: 100%;
    max-width: none;
    height: var(--m3-h-card-alto);
}

.modelo3-card-destaque .modelo3-card-corpo {
    position: absolute;
    inset: auto 0 0 0;
    /* O recuo de 84px à direita é o lugar da seta redonda, que no mockup fica
       no canto de BAIXO deste card. Sem ele o título passava por baixo dela. */
    padding: 24px 84px 24px 24px;
    background: linear-gradient(180deg, transparent 38%, rgba(34, 32, 30, .78) 100%);
}

/* Título maior, como no mockup: neste card ele é o texto grande da página. */
.modelo3-card-destaque .modelo3-card-titulo {
    font-size: clamp(22px, 2.2vw, 30px);
}

/* A seta do card comprido fica embaixo, à direita, e um pouco maior - é a do
   mockup. No card comum ela é 42px; aqui, 48px. */
.modelo3-card-destaque .modelo3-card-seta {
    top: auto;
    bottom: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
}

/* No destaque o subtítulo pode respirar: o card é alto e o texto está sobre a
   arte, não competindo por uma faixa estreita. */
.modelo3-card-destaque .modelo3-card-legenda {
    -webkit-line-clamp: 3;
}

.modelo3-card-destaque .modelo3-card-titulo {
    font-size: clamp(21px, 2vw, 26px);
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.modelo3-card-destaque .modelo3-card-legenda {
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ---- Card SÓ IMAGEM: o interruptor do painel. A arte já traz o nome escrito,
   então nada entra por cima e o texto fica só para leitor de tela.
   Aqui a arte ocupa o card inteiro - dividir com uma faixa de texto vazia não
   faria sentido. */
.modelo3-card-so-imagem .modelo3-card-capa {
    display: block;
    min-height: 0;
}

.modelo3-card-so-imagem .modelo3-card-arte {
    display: block;
    width: 100%;
    max-width: none;
    height: var(--m3-h-card-medio);   /* 196px, a medida do mockup */
}

/* Card que é destaque E "só imagem" ao mesmo tempo: manda o DESTAQUE.
   As duas regras têm a mesma especificidade, então quem ganhava era a que vem
   depois - e o card marcado como destaque saía com 220px, a altura do card
   comum. Quem pediu destaque quer o card grande; "só imagem" diz apenas que
   não há texto por cima. */
.modelo3-card-destaque.modelo3-card-so-imagem .modelo3-card-arte {
    height: var(--m3-h-card-alto);
}

/* ---- Seta redonda: avisa que o card abre um link, sem precisar de texto.
   Não aparece no card de copiar, que tem a própria etiqueta. */
/* A SETA ENDIREITA NO HOVER, e volta sozinha ao sair.

   O desenho e um ↗, a 45 graus. Girando 45 graus no sentido do relogio ele
   vira →, e e isso o que a animacao diz: "o clique vai te levar daqui para
   ali". Nao ha desenho novo nem troca de icone - e o mesmo SVG girando.

   O GIRO E NO SVG, E NAO NO CIRCULO. Girar o circulo inteiro tambem giraria a
   sombra e o proprio circulo, que e redondo e nao daria para perceber - so o
   desenho de dentro precisa se mexer.

   `cubic-bezier` e nao `ease`: a curva sai rapido e chega devagar, que e como
   um objeto real para. Com `ease` os 45 graus parecem um pulo.

   NO CARD INTEIRO, e nao so na seta: o ponteiro fica sobre o card, e nao sobre
   um circulo de 42px no canto. Esperar que a pessoa acerte a seta para ver a
   seta reagir seria um efeito que quase ninguem veria. */
.modelo3-card-seta svg {
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.modelo3-card:hover .modelo3-card-seta svg,
.modelo3-card:focus-visible .modelo3-card-seta svg {
    transform: rotate(45deg);
}

.modelo3-card-seta {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--m3-superficie);
    box-shadow: 0 3px 12px rgba(34, 32, 30, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m3-tinta);
}

/* ---- Card de COPIAR (cupom, PIX, código de indicação).
   A borda tracejada é o aviso de que o clique não leva a outro lugar. A
   etiqueta com o código em si vem do estilo.css, que os três modelos usam. */
/* A borda usa --cor-links-PLANA, e não --cor-links.
   A Personalização aceita gradiente, e `border-color: linear-gradient(...)` é
   inválido: o navegador descartava a declaração inteira e a borda tracejada
   simplesmente não aparecia nas contas com gradiente - era o caso da conta
   principal. A variável plana é a mesma cor, sempre sólida (ver pre.php). */
.modelo3-card-cupom {
    border: 1.5px dashed var(--cor-links-plana, var(--m3-tinta));
    /* Lugar da etiqueta, que fica no rodapé do card.
       Eram 38px, medidos com a etiqueta de CUPOM - que tem 28px de altura e
       encostava no subtítulo. Com 52px sobram 12px de respiro entre o texto e
       a etiqueta, que é o mesmo respiro que o título tem do subtítulo. */
    padding-bottom: 52px;
}

/* A etiqueta alinha com o TEXTO do card.
   O estilo.css a posiciona em `left: 12px`, que serve ao Modelo 1 e ao 2, onde
   ela fica sobre a arte. Aqui ela fica sob o texto, e a 12px saía recuada em
   relação ao título - dois começos de linha diferentes no mesmo card. */
.modelo3-card-cupom .cupom-etiqueta {
    left: 24px;
    bottom: 16px;
}

/* No card de faixa e no lado a lado o texto tem o padding do corpo, não o do
   card; a etiqueta acompanha esse. */
.modelo3-card-faixa .cupom-etiqueta,
.modelo3-card-capa .cupom-etiqueta {
    left: 22px;
}

/* O card de copiar sem arte é o card tingido com a borda tracejada. Não
   precisa de cor de borda própria: a do tema já separa dele, porque o tinte é
   a 18% e a borda é a cor cheia. Havia aqui um `border-color: branco 50%`, de
   quando este card tinha fundo escuro. */

/* --------------------------------------------------------------------------
   CHAMADA LARGA (WhatsApp) E MAPA
   -------------------------------------------------------------------------- */
/* O seletor é `a.modelo3-chamada`, com o `a` na frente, e não só a classe.
   O estilo.css tem `a:visited, a:link { color: black }`, que vale 0,1,1 de
   especificidade - mais que uma classe sozinha (0,1,0). Com só a classe, o
   texto do botão saía PRETO sobre o laranja da Personalização; foi o que
   apareceu ao testar o modelo com paleta clara. Classe + elemento empata em
   0,1,1 e o modelo3.css carrega depois, então ganha. */
a.modelo3-chamada {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 74px;
    margin-top: 32px;
    padding: 16px 24px;
    border-radius: var(--estilo-arredondamento, 20px);
    /* A COR PLANA, E NAO O GRADIENTE, e e por causa da leitura.

       Medindo as dezoito paletas prontas: sobre o gradiente inteiro, sete
       delas nao tem tinta nenhuma - nem branco nem preto - que passe de 4,5:1
       nas duas pontas; a melhor das sete fica em 4,04:1. Sobre a cor plana, a
       pior das dezoito da 5,50:1.

       O botao perde o degrade. Nenhuma pagina perde a leitura, e no plano
       gratis a paleta e a unica escolha: nao ha de onde escapar. */
    background: var(--cor-links-plana, var(--cor-links, #22201e));

    /* ERA `#ffffff` FIXO, e sumia nas paletas claras: medido em "Areia clara",
       o card e #fffdf8 e o texto branco em cima dele e invisivel. A variavel
       vem do pre.php, calculada sobre a MESMA cor plana da linha acima. */
    color: var(--texto-sobre-links, #ffffff);

    font-family: var(--estilo-fonte);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    transition: transform .2s ease, filter .2s ease;
}

a.modelo3-chamada:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #ffffff;
}

.modelo3-chamada-icone {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: #ffffff;
    -webkit-mask: var(--icone) no-repeat center / contain;
    mask: var(--icone) no-repeat center / contain;
}

.modelo3-mapa {
    margin-top: 28px;
    border-radius: var(--estilo-arredondamento, 20px);
    overflow: hidden;
    box-shadow: var(--m3-sombra);
}

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

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.modelo3-rodape {
    max-width: var(--m3-largura);
    margin: 44px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.modelo3-rodape span {
    font-size: 12.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cor-texto);
    opacity: .75;
}

.modelo3-rodape-assinatura {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.modelo3-rodape-assinatura a {
    color: var(--cor-texto);
    font-weight: 700;
}

/* Texto que existe só para leitor de tela e para o Google */
.modelo3-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   TELAS MENORES
   -------------------------------------------------------------------------- */

/* Perfil e cards empilham antes de o perfil ficar estreito demais para o nome.
   1024px e onde 340px de perfil passam a comer metade da tela. */
@media (max-width: 1024px) {
    .modelo3-conteudo {
        flex-direction: column;
    }

    .modelo3-perfil {
        width: 100%;
        position: static;   /* sticky num bloco de largura total cobriria os cards */
        align-items: center;
        text-align: center;
    }

    .modelo3-perfil .modelo3-nome,
    .modelo3-perfil .modelo3-bio {
        text-align: center;
    }

    .modelo3-indice {
        width: 100%;
    }

    /* E O CORPO DOS CARDS TAMBÉM, que faltava aqui (02/10/2026).
       ---------------------------------------------------------------------
       `.modelo3-conteudo` é flex com `align-items: flex-start`. Em linha isso
       não faz diferença de largura; virando COLUNA, aqui em cima, passa a
       fazer: o eixo cruzado vira o horizontal, e `flex-start` manda cada
       filho encolher até o próprio conteúdo em vez de ocupar a linha.

       O perfil e o índice já tinham o `width: 100%` por causa disso. O corpo
       não, e ninguém notou porque o defeito não deixa buraco à esquerda: os
       cards ficam colados na borda esquerda, certinhos, e o vazio sai todo do
       lado direito. A Stefanie viu num print de celular.

       Medido em 1024px, antes: o conteúdo tem 981px e a grade 676px, com
       305px de nada à direita. Em 425px: 396px contra 343px, 53px de nada. E
       em 360px os dois batiam em 331px por acaso, porque ali o conteúdo já é
       estreito o bastante para a grade encher sozinha - que é como um defeito
       destes passa despercebido em quem testa só no celular pequeno. */
    .modelo3-corpo {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .modelo3-pagina {
        padding: 30px 16px 24px;
    }

    /* Uma coluna: duas colunas em 390px dao cards de 170px, onde nem o titulo
       cabe em uma linha. */
    .modelo3-grid {
        flex-direction: column;
        gap: var(--m3-gap);
    }

    /* O `width: 100%` NAO e redundante. Em container `flex-direction: column`,
       o `flex: 1 1 0` da coluna passa a valer para a ALTURA, e a largura volta
       para `auto` - ou seja, encolhe ao conteudo. O resultado medido no
       celular eram cards de 233px, 201px e 210px lado a lado com outros de
       361px, cada um do tamanho do proprio titulo. */
    .modelo3-coluna {
        width: 100%;
        flex: 0 0 auto;
    }

    .modelo3-secao {
        margin: 30px 0 14px;
    }

    .modelo3-secao-titulo {
        font-size: 19px;
    }

    /* As alturas do celular miram a ARTE (.modelo3-card-arte), e não a moldura
       (.modelo3-card-capa). Quando a marcação virou "arte e texto lado a lado",
       a moldura passou a ser o container flex dos dois, e estas regras
       continuavam medindo ela: no celular a arte ficava com 270px dentro de um
       card de 216px e transbordava. */
    /* Só a ALTURA aqui. Eu havia repetido `width: 38%` neste bloco, e como ela
       tem a mesma especificidade da regra do destaque mas vem depois, ganhava
       dela: no celular a arte do card de destaque saía com 137px de largura em
       vez da largura inteira. A largura base já está definida lá acima. */
    /* O card comprido segue sendo o mais alto no celular, mas nao os 452px
       do desktop: numa tela de 390px isso ocuparia mais de meia rolagem so com
       um link. A combinação destaque+so-imagem entra explicitamente porque la
       acima ela tem 3 classes de especificidade e passaria por cima deste
       bloco. */
    .modelo3-card-destaque .modelo3-card-arte,
    .modelo3-card-destaque.modelo3-card-so-imagem .modelo3-card-arte {
        height: 300px;
    }

    .modelo3-card-so-imagem .modelo3-card-arte {
        height: 180px;
    }

    .modelo3-chamada {
        font-size: 15px;
        letter-spacing: 1px;
        min-height: 62px;
    }

    .modelo3-mapa iframe {
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modelo3-card,
    .modelo3-rede,
    .modelo3-chamada,
    .modelo3-card-seta svg {
        transition: none;
    }

    .modelo3-card:hover,
    .modelo3-rede:hover,
    .modelo3-chamada:hover {
        transform: none;
    }

    /* A SETA AINDA ENDIREITA, so que sem animacao.

       `prefers-reduced-motion` pede menos MOVIMENTO, e nao menos resposta: o
       hover continua tendo de dizer que aquilo abre um link. Tirar a transicao
       tira o giro; tirar o `transform` tiraria o recado junto. */
    .modelo3-card:hover .modelo3-card-seta svg,
    .modelo3-card:focus-visible .modelo3-card-seta svg {
        transform: rotate(45deg);
    }
}

/* No celular a faixa fica um pouco mais baixa, e o corpo ganha folga: o
   titulo quebra mais em 361px de largura do que em 466px. */
@media (max-width: 767px) {
    .modelo3-card-faixa .modelo3-card-arte {
        height: 150px;
    }

    .modelo3-card-faixa .modelo3-card-corpo {
        height: 112px;
    }
}

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

   É o desenho aprovado no esboço: superfície do card com borda na cor de
   acento, cabeçalho com relógio e as linhas em duas colunas. A borda usa
   --cor-links-plana, e não --cor-links: a Personalização aceita gradiente, e
   gradiente em `border-color` invalida a declaração inteira em silêncio - foi
   exatamente assim que a borda tracejada do card de cupom sumiu.

   Ele atravessa as duas colunas do canvas (`grid-column: 1 / -1`): é uma
   tabela, e partido no meio ele perderia o alinhamento entre dia e hora, que
   é a razão de ser do formato.
   =========================================================================== */
.bloco-horarios-m3 {
    grid-column: 1 / -1;
    width: 100%;
    /* O quadro e um flex item do .modelo3-corpo, que e coluna SEM gap: sem
       margem ele encostava - e chegou a sobrepor por 8px - no botao de
       WhatsApp logo acima.

       42px e o mesmo respiro que .modelo3-secao usa para anunciar "comeca
       coisa nova aqui": o quadro e exatamente isso. Com os 22px do gap entre
       cards o vao media 9px, apertado ao lado de um botao de 64px de altura. */
    margin-top: 42px;
    padding: 24px 26px;
    /* O arredondamento vem do TEMA, e nao chumbado: numa conta com canto reto
       o quadro saia arredondado do lado de cards retos. */
    border-radius: var(--estilo-arredondamento);
    background: var(--m3-superficie);
    background-image: linear-gradient(var(--cor-links-fraca, rgba(34, 32, 30, .06)),
                                      var(--cor-links-fraca, rgba(34, 32, 30, .06)));
    color: var(--m3-tinta);
    border: 1.5px solid var(--cor-links-plana, var(--m3-borda));
    box-shadow: var(--m3-sombra);
}

.bloco-horarios-m3 .bloco-horarios-cabeca {
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1.5px solid var(--cor-links-fraca, rgba(34, 32, 30, .16));
    color: var(--cor-links-plana, var(--m3-tinta-fraca));
}

.bloco-horarios-m3 .bloco-horarios-titulo {
    font-size: 19px;
    color: var(--m3-tinta);
}

.bloco-horarios-m3 .bloco-horarios-local {
    padding: 17px 0 5px;
    font-size: 12px;
    color: var(--cor-links-plana, var(--m3-tinta-fraca));
}

/* A partir do segundo local entra um fio em cima, para os grupos não
   encostarem um no outro.

   O seletor mudou com o agrupamento: antes o título vinha DEPOIS de uma grade
   (`.bloco-horarios-grade + .bloco-horarios-local`), porque título e linhas
   eram irmãos soltos. Agora cada local é um `.bloco-horarios-grupo`, e o fio
   pertence ao grupo - não ao título.

   `:not(:first-child)` e não `+`: em multi-coluna, o primeiro grupo de CADA
   coluna deve começar limpo, e o irmão anterior pode estar na coluna do lado.
   Com o fio no grupo, o topo da segunda coluna ganharia um risco solto. */
.bloco-horarios-m3 .bloco-horarios-grupo + .bloco-horarios-grupo {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .14));
}

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

.bloco-horarios-m3 .bloco-horarios-dia {
    font-size: 15px;
    color: var(--m3-tinta);
}

.bloco-horarios-m3 .bloco-horarios-horas {
    font-size: 15px;
    color: var(--m3-tinta-fraca);
}

.bloco-horarios-m3 .bloco-horarios-obs {
    color: var(--cor-links-plana, var(--m3-tinta-fraca));
}


/* ---------------------------------------------------------------------------
   CARD INFORMATIVO - pele do Modelo 3
   ---------------------------------------------------------------------------
   Altura menor que a do card de link: é uma linha de nome e um cargo, e a
   altura de 168px do card comum deixaria metade do card vazia. Seis pessoas
   lado a lado em cards curtos também dão o encaixe desencontrado que o canvas
   precisa - o mesmo efeito que o card comprido faz do outro lado.
   --------------------------------------------------------------------------- */
.modelo3-card.card-info {
    min-height: 0;
    height: 96px;
    padding: 0 20px;
    align-items: center;
}

.modelo3-card.card-info .card-info-titulo {
    color: var(--m3-tinta);
}

.modelo3-card.card-info .card-info-legenda {
    color: var(--cor-links-plana, var(--m3-tinta-fraca));
    opacity: 1;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .modelo3-card.card-info {
        height: auto;
        min-height: 96px;
        padding: 16px 20px;
    }
}

/* ---- ENDEREÇO E MAPA: pele do Modelo 3 ----
   Atravessa as duas colunas do canvas, como o bloco de horários: é um card de
   largura cheia, e partido no meio o mapa ficaria estreito demais para se
   reconhecer. */
.bloco-mapa-m3.bloco-mapa-cartao,
.bloco-mapa-m3.bloco-mapa-soEndereco,
.bloco-mapa-m3.bloco-mapa-largo {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--m3-gap);
    border-radius: var(--estilo-arredondamento);
    overflow: hidden;
    background: var(--m3-superficie);
    color: var(--m3-tinta);
    box-shadow: var(--m3-sombra);
}

.bloco-mapa-m3.bloco-mapa-largo {
    line-height: 0;
}

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

.bloco-mapa-m3 .bloco-mapa-rotulo,
.bloco-mapa-m3 .bloco-mapa-link {
    color: var(--cor-links-plana, var(--m3-tinta-fraca));
}

.bloco-mapa-m3 .bloco-mapa-resto {
    color: var(--m3-tinta-fraca);
}

/* ---------------------------------------------------------------------------
   O BLOCO LARGO NÃO TEM ALTURA FIXA

   `.modelo3-card.card-info` trava a altura em 96px, e isso é certo para o card
   de PESSOA: foto redonda, nome e cargo cabem, e a altura igual em todos é o
   que faz a coluna ficar arrumada.

   Para contagem e vídeo é errado, e foi medido: a contagem precisa de 104px e
   o vídeo de 189px. Presos em 86px, os dois saíam com o conteúdo cortado - o
   título da contagem sumia debaixo do relógio e o vídeo aparecia pela metade.

   Aqui a altura volta a ser do conteúdo. A distribuição entre as duas colunas
   continua funcionando porque `m3_prepara()` informa a altura de cada tipo -
   e aqueles números são medidos, não estimados.
   --------------------------------------------------------------------------- */
.modelo3-card.card-info.card-info-largo {
    height: auto;
    min-height: 0;
    padding: 18px 20px;
}

/* A MESMA SUPERFÍCIE DOS OUTROS CARDS DA SEÇÃO.
   O card informativo herda o branco puro de --m3-superficie, e isso é certo
   para o clero: ali a seção inteira é de cards informativos, todos brancos, e
   o conjunto se lê. Contagem e vídeo vivem misturados com cards de link, que
   são tingidos - e aí o mesmo branco virava um card de cor diferente no meio
   da fileira, sem que a diferença quisesse dizer nada. Foi o que se viu no
   vídeo: "ele muda a cor do card comparado aos outros".

   Cor não pode ser sotaque involuntário. O tinte aqui é o mesmo do
   .modelo3-card-texto, na mesma proporção, para o bloco largo entrar na
   fileira em vez de se anunciar. O card de pessoa não é tocado. */
.modelo3-card.card-tipo-depoimento,
.modelo3-card.card-info.card-info-largo {
    background-color: var(--m3-superficie);
    background-image: linear-gradient(var(--cor-links-media, rgba(34, 32, 30, .1)),
                                      var(--cor-links-media, rgba(34, 32, 30, .1)));
    border: 1px solid var(--cor-links-fraca, rgba(34, 32, 30, .1));
}

/* O subtítulo dos tipos novos, no peso certo.
   A regra genérica no estilo.css perdia para `.modelo3-card.card-info
   .card-info-legenda` (0-3-0 contra 0-2-0) e a fala do depoimento continuava
   saindo em MAIÚSCULA DOURADA, lendo como etiqueta em vez de citação.
   Mesma disputa de peso do hover contra o AOS - aqui resolvida onde ela
   acontece, e não com um seletor inflado do outro lado. */
.modelo3-card.card-tipo-depoimento .card-info-legenda,
.modelo3-card.card-info-largo .card-info-legenda {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--m3-tinta-fraca);
}

.modelo3-card.card-tipo-depoimento .card-info-legenda {
    font-style: italic;
}

/* ---- Card TEXTO SOBRE A FOTO ----

   A arte ocupa o card e o texto vem por cima, numa sombra que sobe do pé. É o
   que o card de destaque sempre fez aqui, e é o que os Modelos 1 e 2 fazem em
   TODO card com capa - só o Modelo 3 não oferecia essa forma, e não havia
   motivo para isso.

   Mesma altura do "só a foto": nos dois a arte toma o card inteiro, e o que
   muda é haver ou não texto em cima dela. */
.modelo3-card-sobre .modelo3-card-capa {
    display: block;
    min-height: 0;
}

.modelo3-card-sobre .modelo3-card-arte {
    display: block;
    width: 100%;
    max-width: none;
    height: var(--m3-h-card-medio);
}

/* O recuo de 56px à direita é o lugar da seta redonda, como na faixa. Sem ele
   o título passaria por baixo dela. */
.modelo3-card-sobre .modelo3-card-corpo {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 56px 18px 22px;
    background: linear-gradient(180deg, transparent 28%, rgba(34, 32, 30, .82) 100%);
}

/* Contorno de sombra no texto, e não uma faixa sólida atrás: a arte continua
   inteira à vista, e o nome do card se lê sobre qualquer foto - inclusive
   sobre um trecho claro dela. */
.modelo3-card-sobre .modelo3-card-titulo {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.modelo3-card-sobre .modelo3-card-legenda {
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ============================================================================
   O CARD SEM SETA (06/10/2026)
   ----------------------------------------------------------------------------
   Os recuos de 62px e 84px a direita existem para a seta redonda nao encostar
   no texto. Nos cards que nao a tem - arquivo, WhatsApp, cupom -, esse recuo
   vira um buraco: o titulo para no meio e sobra um vazio do lado direito.

   Quem decide quem tem seta e `cardMostraSeta()`, em functions.Card.php. O
   porque esta la.
   ========================================================================== */
/* CADA VARIANTE TEM O SEU DONO DO RECUO, e e por isso que sao tres regras
   e nao uma. A primeira tentativa foi `.modelo3-card-sem-seta
   .modelo3-card-corpo { padding-right: 24px }`, generica, e ela PIOROU o
   card de texto: ali o corpo tem `padding: 0` (regra da linha 420) e o
   recuo mora no proprio card, entao a regra generica ACRESCENTOU 24px em
   cima dos 24 que ja havia. Medido: 21px de folga a esquerda contra 44 a
   direita, que e exatamente o buraco que ela viu no print.

   texto      o recuo e do CARD (26px 62px 26px 24px)
   com capa   o recuo e do CORPO (18px 22px 20px)
   destaque   o recuo e do CORPO, maior (24px 84px 24px 24px) */
.modelo3-card-sem-seta.modelo3-card-texto { padding-right: 24px; }
.modelo3-card-sem-seta:not(.modelo3-card-texto):not(.modelo3-card-destaque) .modelo3-card-corpo { padding-right: 22px; }
.modelo3-card-sem-seta.modelo3-card-destaque .modelo3-card-corpo { padding-right: 24px; }