/* ==========================================================================
   VITRINE COM DESTAQUE COMUTÁVEL — prefixo vit-
   Um card largo de duas colunas (texto à esquerda, foto sangrada à direita com
   a legenda DENTRO dela) e, embaixo, a fileira de quatro escolhas que o troca.

   Compõe: efeitos/selo-circular. Nada aqui redesenha o selo — o .vit-selo é só
   o invólucro que o ancora no canto da foto. O CSS do selo entra por
   preview-css.txt (MANUAL §8), e no site consumidor pelo <link> dele.

   Tokens usados:
     --max --pad          só via .wrap do core; nada aqui mexe na coluna
     --sec-gap            respiro da dobra, via .sec-pad
     --display --sans     tipografia do número, do título e dos rótulos
     --ease               curva única do projeto
     --accent             categoria e título DENTRO da foto (fundo real = foto)
     --accent-ink         realce sobre o FUNDO DA SEÇÃO: unidade do número,
                          ícone de traço, número da aba acesa
     --light              título dentro da foto
     --dark-rgb           scrim da foto
     --bg --fg --fg-2 --fg-muted --rule --rule-2   escopo de tom da seção
     --radius-media       canto do card e das escolhas

   AS DUAS TINTAS DE REALCE, e a regra que decide (MANUAL §3): o que está sobre
   o FUNDO DA SEÇÃO lê --accent-ink; o que está sobre FOTO COM VÉU lê --accent
   puro. Não é preciosismo — numa .sec-paper com o sage da Liberta, o accent
   puro dá 1.36:1 como texto sobre o creme, e o --accent-ink de um escopo claro
   cairia para ~3.5:1 sobre o scrim escuro da foto. Trocar um pelo outro numa
   varredura "por consistência" piora metade desta peça em silêncio.

   O ÍCONE DE TRAÇO ENTRA NO PRIMEIRO GRUPO, e é a única decisão aqui que não
   é óbvia: ele é desenho, não texto, mas é um traço de 1,4px — a fronteira de
   3:1 de contraste não-textual não sobra para arriscar 1.36:1 numa dobra
   clara. Ele lê --accent-ink como o texto ao lado dele.
   ========================================================================== */

.vit{
  /* Vão entre as duas colunas do destaque. */
  --vit-gap:clamp(18px,2.1vw,32px);

  /* PISO do card de destaque, e é piso mesmo: a coluna de texto cresce além
     dele com a copy do padrão editorial (medido: 537px a 1440, contra um piso
     de 468). Ele serve para o caso contrário — copy curta, em que o card
     encolheria até virar uma faixa e a foto perderia o tamanho de dobra.
     Quem garante que a altura não DANÇA entre uma aba e outra é o
     visibility:hidden dos painéis, mais abaixo, e não este número. */
  --vit-alt:clamp(380px,34vw,468px);

  /* A fusão da foto na troca. Curta de propósito: o conteúdo troca seco, e o
     que atravessa é só a imagem. Acima de ~400ms a peça começa a parecer um
     carrossel, que é exatamente o que ela não é. O script lê este mesmo
     número (SAIDA em script.js) — mudar um pede mudar o outro. */
  --vit-fusao:.28s;

  /* Quanto o véu desfocado desce ABAIXO da legenda, em fração da altura DELA.
     Não é fração da foto, e a diferença é a mesma que o midia/grade-cases-foto
     mediu: a legenda é ancorada no alto e cresce PARA DENTRO da imagem, então
     véu medido em % da foto é ultrapassado por um título de três linhas em
     tela estreita e a última linha cai sobre a parte nítida. Medido em fração
     da legenda, o véu acompanha o texto que ele existe para servir. */
  --vit-veil:80%;

  --vit-pad:clamp(24px,2.6vw,40px);      /* respiro da coluna de texto */
  --vit-cap-pad:clamp(16px,1.8vw,26px);  /* respiro da legenda dentro da foto */
}

/* ---------------------------------------------------------------- o palco */
/* position:relative só por causa do selo, que é absoluto e mora aqui — fora
   dos painéis, porque ele é assinatura da dobra e não conteúdo de uma frente.
   Dentro de um painel ele sumiria na primeira troca. */
.vit-palco{
  position:relative;
  margin-top:clamp(32px,4vw,56px);
}

/* COM SCRIPT os quatro painéis ocupam a MESMA célula de grade e só um aparece
   por vez; SEM SCRIPT o palco é bloco comum e eles se empilham, todos
   legíveis. A classe .is-live é escrita pelo script — é ela, e não o CSS, que
   decide qual dos dois desenhos vale. O contrário (CSS empilhando e script
   revelando) deixaria três quartos da peça invisíveis para quem está sem
   JavaScript. */
.vit.is-live .vit-palco{display:grid}
.vit.is-live .vit-painel{grid-area:1/1;z-index:1}

/* O PAINEL QUE NÃO ESTÁ ESCOLHIDO SAI POR visibility, E NÃO POR [hidden].
   Parece o caminho errado e é o certo, por uma razão medida: com
   `display:none` a célula da grade tem a altura do painel VISÍVEL, e os
   quatro não têm a mesma altura natural — medido a 1440, 537px nos painéis
   1, 3 e 4 e 517px no 2, porque a ressalva dele fecha em duas linhas em vez
   de três. Vinte pixels não são nada até serem: a fileira de escolhas está
   logo abaixo, e ela subia e descia debaixo do cursor de quem acabou de
   clicar. A 1024 a diferença medida era de 22px, e pela outra ponta (a frase
   de dois painéis ganha uma linha antes dos outros dois).

   Com visibility os quatro continuam ocupando a célula, a altura do palco é
   sempre a do MAIOR, e a fileira não se move em troca nenhuma. O segundo
   ganho aparece na própria fusão: o painel que entra já está com layout
   pronto e imagem rasterizada, então a travessia é pintura e nada mais.

   NÃO É opacity, e a diferença é toda: `visibility:hidden` tira o painel da
   árvore de acessibilidade E da ordem de foco, enquanto `opacity:0` deixa um
   bloco invisível e tabulável — a armadilha que o conversao/planos-honorarios
   já registrava. */
.vit-painel.is-fora{visibility:hidden}

/* O painel que SAI fica pintado por --vit-fusao e depois some. z-index 0 e
   não "sem z-index": a troca pode ir do painel 3 para o 1, e aí o que sai
   vem DEPOIS no documento e pintaria por cima do que entra. */
.vit.is-live .vit-painel.is-saindo{z-index:0}

/* Sem script os painéis se empilham, e precisam de vão entre si. Preso ao
   :not(.is-live) porque, empilhados na mesma célula, um margin-top deslocaria
   o painel inteiro para fora do lugar. */
.vit:not(.is-live) .vit-painel + .vit-painel{margin-top:var(--vit-gap)}

/* ------------------------------------------------------------- o destaque */
/* Texto à esquerda, foto à direita — e é essa ordem no DOM, sem inversão por
   CSS: quem lê a página na ordem do documento recebe o número e a frase antes
   da fotografia, que é a ordem certa de quem ouve. Em telas estreitas a foto
   sobe para o topo (ver o fim do arquivo), e aí a inversão é declarada em
   grid-row, não em `order` — grid-row move a CAIXA sem mexer na ordem de
   leitura nem na ordem de foco. */
.vit-painel{
  display:grid;
  /* minmax(0,…) nas duas colunas: o mínimo automático de uma célula de grade
     é o conteúdo dela, e sem isto uma frase longa empurraria a coluna de
     texto e estreitaria a foto de um painel só — os quatro destaques
     deixariam de ter a mesma geometria. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  min-height:var(--vit-alt);
  overflow:hidden;
  /* Contexto de empilhamento próprio: o desfoque do véu da legenda não vaza
     para o painel que está por baixo durante a fusão. */
  isolation:isolate;
  border:1px solid var(--rule);
  border-radius:var(--radius-media);
  /* Superfície tênue: um VÉU DE LUZ sobre o fundo da seção, e não uma
     sombra. A diferença foi medida e não é de gosto — a primeira versão
     misturava --fg (a tinta do escopo), o que escurece o card numa dobra
     clara e derruba o contraste do que está escrito nele: a tinta de realce
     do escopo claro caía a 4,25:1 sobre este fundo, contra os 4,59:1 que ela
     tem sobre o creme puro, e 4,5 é o mínimo para texto normal. Com --light
     o card CLAREIA nos dois escopos — vira rgb(22,22,22) sobre o escuro da
     casa e sobe a 4,63:1 no claro. */
  background:color-mix(in srgb,var(--light) 5%,transparent);
}

/* §6.5 — quem dá display a algo que às vezes é [hidden] desliga à mão. O
   `display:grid` acima é regra de autor e venceria o [hidden] do navegador.
   A COMUTAÇÃO desta peça não usa o atributo (ver visibility, mais abaixo),
   mas quem derruba uma frente inteira no site consumidor usa — e sem esta
   linha o painel marcado continuaria na tela. Derrubar uma frente é apagar
   (ou esconder) a aba E o painel: uma aba sem painel vira botão morto. */
.vit-painel[hidden]{display:none}

/* ------------------------------------------------------- coluna de texto */
.vit-info{
  display:flex;flex-direction:column;
  min-width:0;
  padding:var(--vit-pad);
}

/* O número grande veste a primitiva .display-xl do core. Os dois parafusos
   dela entram AQUI, no ancestral, e não no próprio elemento: é a forma que o
   core documenta (eles são fallback dentro do var(), e escritos no mesmo nó
   venceriam o valor do ancestral). */
.vit-cifra{
  --display-xl:clamp(46px,5.2vw,78px);
  --display-xl-lh:1;
}

/* align-items:baseline é o que alinha a unidade pela base do algarismo, e não
   pelo meio dele. O gap em `em` acompanha o corpo do número. */
.vit-num{
  display:flex;align-items:baseline;gap:.32em;
  /* A .display-xl já pinta --fg; a linha fica fora daqui de propósito. */
  flex-wrap:wrap;
}

/* A unidade é texto de leitura, não peça gráfica: família de texto, corpo
   pequeno e a tinta de realce do escopo. Sem o letter-spacing normal ela
   herdaria os .05em do body, que em caixa alta de 14px separa demais. */
.vit-num-un{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(13px,1.05vw,15.5px);
  line-height:1.2;letter-spacing:.02em;
  color:var(--accent-ink,var(--accent));
}

/* O RÓTULO DIZ O QUE O NÚMERO MEDE, e é ele que impede o algarismo de ser
   lido como desempenho. Não é decoração: sem esta linha, "90" sozinho ao lado
   de uma foto de escritório vira qualquer coisa que o leitor quiser. */
.vit-num-rot{
  display:block;margin-top:12px;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.5;
  color:var(--fg-2);
  max-width:36ch;
}

/* A RESSALVA. Veste a primitiva .nota do core, que traz só a tipografia; a
   margem, o filete e a medida são locais, como a primitiva manda. O filete em
   cima é a ligação visual com o número — junto com a ordem de leitura, é o
   que amarra a ressalva ao algarismo. */
.vit-nota{
  --nota-max:46ch;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--rule);
}

.vit-frase{
  margin-top:clamp(18px,1.8vw,26px);
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.55;
  color:var(--fg-2);
  max-width:48ch;
}

/* margin-top:auto prende os três atributos no pé da coluna, qualquer que seja
   o tamanho da frase — é o que faz os quatro destaques terem a mesma linha de
   base embaixo. */
.vit-attrs{
  margin-top:auto;
  padding-top:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:12px;
}

.vit-attr{
  display:flex;align-items:center;gap:11px;
  font-size:clamp(13.5px,1.05vw,14.5px);line-height:1.35;
  letter-spacing:normal;
  color:var(--fg-2);
}

/* flex:0 0 auto porque um ícone que encolhe para caber o texto deixa de ser
   ícone. A tinta é a de realce do escopo — ver o cabeçalho do arquivo. */
.vit-ico{
  flex:0 0 auto;
  width:20px;height:20px;
  color:var(--accent-ink,var(--accent));
}

/* -------------------------------------------------------------- a foto */
.vit-media{
  position:relative;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
}

/* A foto é absoluta e a caixa é que manda na geometria: assim a mesma célula
   serve a um arquivo 16:9 e a um 3:2 sem recorte novo, e o enquadramento se
   ajusta por --vit-pos no style de cada painel.

   SEM width/height no <img>, e isso é armadilha medida (MANUAL §6): atributo
   de dimensão no elemento vence aspect-ratio e o card sai com a altura do
   arquivo. */
.vit-foto{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--vit-pos,50% 50%);
  transition:opacity var(--vit-fusao) var(--ease);
}

/* A FUSÃO. O painel que entra começa com a foto em zero e sem transição;
   removida a classe (depois de um reflow), a opacidade viaja até 1 por cima
   da foto que ainda está lá — cross-dissolve de verdade, e não um fade contra
   o fundo do card. A foto que sai NÃO desbota: fosse ela também transitando,
   o meio da travessia teria as duas em 50% e a dobra piscaria mais clara. */
.vit-painel.is-entrando .vit-foto{opacity:0;transition:none}

/* O texto do painel que sai some NA HORA, e só a foto atravessa: é isso que o
   desenho pede ("instantâneo no conteúdo, fusão curta na imagem"), e é
   também o que impede dois títulos e dois números de aparecerem sobrepostos
   durante os 280ms. */
.vit-painel.is-saindo .vit-info,
.vit-painel.is-saindo .vit-cap{display:none}

/* Scrim em degradê: escuro em cima, onde mora a legenda, e um retorno suave
   embaixo, que é onde o selo gira. O miolo fica limpo — é a parte da foto que
   se quer ver. Sem o retorno de baixo, o selo cairia sobre a parte clara de
   uma foto de céu aberto e o texto curvo dele sumiria. */
.vit-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--dark-rgb),.92) 0%,
    rgba(var(--dark-rgb),.70) 18%,
    rgba(var(--dark-rgb),.28) 44%,
    rgba(var(--dark-rgb),.20) 70%,
    rgba(var(--dark-rgb),.54) 100%);
}

/* ---- a legenda, DENTRO da foto e ancorada EM CIMA ---- */
/* O contrato §6 manda a legenda para dentro da imagem; a ancoragem no alto é
   decisão desta peça e está explicada no markup — as duas colunas começam na
   mesma linha, e a metade de baixo da foto fica para o selo e para a descida
   do olho até a fileira. */
.vit-cap{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:var(--vit-cap-pad);
}

/* O véu desfocado é um ::before DA LEGENDA, e não um irmão com altura própria.
   Duas razões, e as duas foram medidas em outro componente da casa:
     1. `bottom` negativo em porcentagem resolve contra a altura do .vit-cap,
        então o véu é sempre 1,8x o texto que ele serve — cresce com um título
        de três linhas e encolhe com um de uma;
     2. sendo pseudo-elemento IRMÃO do texto na ordem de pintura, e não
        ancestral dele, a máscara não toca o título. Máscara aplica-se aos
        descendentes: o texto dentro do elemento mascarado apareceria
        esmaecido na ponta.
   backdrop-filter SEMPRE com máscara em gradiente (contrato §6) — caixa reta
   produz borda dura contra a parte nítida da foto e lê "tarja". Aqui o
   gradiente da máscara vai do topo PARA BAIXO, o contrário da receita padrão,
   porque a legenda também está do outro lado. */
.vit-cap::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  bottom:calc(-1 * var(--vit-veil));
  z-index:-1;pointer-events:none;
  backdrop-filter:blur(8px) saturate(1.12);
  -webkit-backdrop-filter:blur(8px) saturate(1.12);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
}

/* --accent PURO: esta linha está sobre o scrim escuro DENTRO da foto, não
   sobre o fundo da seção. Ver o cabeçalho do arquivo. */
.vit-cat{
  display:block;
  font-family:var(--sans);font-weight:400;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}

/* --light e nunca --fg: o título vive dentro de uma ilha escura (foto sob
   scrim), e continua claro mesmo numa dobra .sec-paper. Mesma decisão do
   midia/grade-cases-foto e do conteudo/pilares-texto-na-foto. */
.vit-titulo{
  margin-top:9px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2vw,29px);line-height:1.12;letter-spacing:-.02em;
  color:var(--light);
  max-width:19ch;
}

/* ---------------------------------------------------------------- o selo */
/* Só o invólucro. O disco, o texto curvo e a volta são do efeitos/selo-circular
   e não se repetem aqui. pointer-events:none porque ele cobre o canto da foto
   e não tem o que receber — clique nele não pode virar um buraco morto. */
.vit-selo{
  position:absolute;z-index:3;
  inset-block-end:clamp(14px,1.7vw,24px);
  inset-inline-end:clamp(14px,1.7vw,24px);
  pointer-events:none;
}

/* ------------------------------------------------------------- a fileira */
.vit-fileira{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);
  margin-top:clamp(12px,1.4vw,20px);
}

/* Cada escolha é um <a> de verdade — é ele que faz a rota sem JavaScript
   funcionar. O anel de foco é o :focus-visible do core, e cai em volta da
   caixa inteira porque a caixa É o link: este arquivo não escreve uma linha
   de CSS de foco, e escrever `outline:none` aqui apagaria o único sinal de
   onde o teclado está. */
.vit-esc{
  display:flex;flex-direction:column;gap:7px;
  padding:clamp(15px,1.5vw,21px) clamp(13px,1.3vw,19px);
  border:1px solid var(--rule);
  /* O filete de topo é o que acende na escolha acesa. Fica em 2px desde o
     repouso para a troca não mover o texto 1px para baixo. */
  border-top:2px solid var(--rule-2);
  border-radius:var(--radius-media);
  color:inherit;text-decoration:none;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}

/* O estado aceso sai do aria-selected, e não de uma classe paralela. Uma
   fonte só: não existe como o desenho discordar do que o leitor de tela
   anuncia, porque os dois leem o mesmo atributo. Sem script, o markup já
   nasce com o primeiro aceso. */
.vit-esc[aria-selected="true"]{
  border-top-color:var(--accent);
  background:color-mix(in srgb,var(--light) 7%,transparent);
}
.vit-esc:hover{border-color:var(--rule-2)}

.vit-esc-n{
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;line-height:1;
  color:var(--fg-muted);
}
.vit-esc[aria-selected="true"] .vit-esc-n{color:var(--accent-ink,var(--accent))}

.vit-esc-cat{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  color:var(--fg-muted);
}

.vit-esc-nome{
  font-family:var(--display);font-weight:700;
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.2;letter-spacing:-.015em;
  color:var(--fg);
}

/* A frase curta some quando a escolha está acesa? Não — ela fica. O painel
   aberto já diz mais, mas apagar a frase encolheria a caixa da aba acesa e a
   fileira dançaria a cada troca. */
.vit-esc-frase{
  font-size:12.5px;line-height:1.45;letter-spacing:normal;
  color:var(--fg-muted);
}

/* --------------------------------------------------------- movimento reduzido */
/* Colado nas regras que animam (contrato §6.6). A troca CONTINUA acontecendo
   — a pessoa pediu por ela —, só que sem a fusão: a foto aparece inteira de
   uma vez. O script lê a mesma preferência e pula a fase de saída, para não
   deixar um painel pintado por 280ms sem nada acontecendo na tela. */
@media (prefers-reduced-motion:reduce){
  .vit-foto{transition:none}
  .vit-esc{transition:none}
}

/* ---------------------------------------------------------------- mobile */
/* DUAS QUEDAS, e a primeira é a que importa: em coluna única a foto sobe para
   o topo do card, porque uma coluna de texto de 320px seguida da foto lá
   embaixo perde a legenda — que é o que nomeia a frente.

   A troca é por grid-row, e não por `order`: as duas movem a caixa, mas
   `order` também move o foco em alguns contextos de flex, e aqui a ordem de
   leitura e a de foco têm de continuar sendo a do documento. */
@media (max-width:980px){
  .vit-painel{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }
  .vit-media{grid-row:1;aspect-ratio:16/10}
  .vit-info{grid-row:2}
  /* A fileira cai para 2x2. Não há passo de três: quatro escolhas em três
     colunas deixam uma célula vazia. */
  .vit-fileira{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* O selo sai. Ele é assinatura, e num card de 390px de largura o disco de
     132px come um terço da foto e cai por cima da legenda quando o título vai
     a três linhas. */
  .vit-selo{display:none}
}

@media (max-width:560px){
  .vit-media{aspect-ratio:3/2}
  .vit-esc{gap:5px}
  .vit-esc-frase{font-size:12px}
}