/* ============================================================
   Página pública de produto B2C — Cruzeiros (Bloco 3, Leva 2)
   Docs/spec-bloco3-leva2-pagina-publica.md, seção 8.2.

   Tradução do protótipo (Docs/Prototipo/prototipo-cruzeiros-b2c-v3.html) pro
   tema escuro do _LayoutTenant — ver seção 2.1/2.2 da spec pra cada
   substituição de variável. Prefixo .prod-*, tudo escopado sob
   .pagina-produto-cruzeiros (mesmo padrão de .pagina-cruzeiros/.pagina-hoteis
   em site.css — nunca reaproveitar .cruz-*, que já é da página B2B e
   colidiria).

   Nada de --teal/--teal-bright (cor fixa, não segue o tenant) nem cor
   literal fora de color-mix sobre white/black. Títulos em Fraunces (peso 500
   — só 500/600/700 estão carregados, não existe 400 pra esta família aqui).
   "Olhos"/metas via letter-spacing + font-feature-settings sobre a Inter,
   sem DM Mono (fonte que o protótipo usa e que não é carregada pelo site).
   ============================================================ */

.pagina-produto-cruzeiros {
  --prod-tint: color-mix(in srgb, var(--cor-destaque) 15%, var(--bg));
  /* Era 28% (mais dourado que --prod-tint, convenção comum de "hover
     realça") — com o texto do botão precisando ser --ink-muted (ver
     .prod-navio-ver abaixo, --ink puro não tem contraste nem contra o
     fundo normal), hover ficando MAIS dourado aproximava demais do tom
     do próprio texto: 3,19:1 no hover, abaixo do piso. Invertido pra
     escurecer no hover em vez de clarear — 8% dá 5,57:1, com folga. */
  --prod-tint-forte: color-mix(in srgb, var(--cor-destaque) 8%, var(--bg));
}

.pagina-produto-cruzeiros .reveal { opacity: 1; } /* sem animação de entrada nesta leva — evita duplicar o observer de site.css fora de escopo */

/* ---- coluna de leitura ---- */
.prod-coluna {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 20px;
}
@media (min-width: 900px) {
  .prod-coluna { padding-inline: 0; }
}
.prod-largo {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 20px;
}

/* ---- olho (eyebrow) e título de seção ---- */
.prod-olho {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  color: var(--cor-destaque);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prod-olho::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.prod-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.prod-sub-bloco {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Subtítulo estrutural (separa "A bordo" de "Em terra, em Orlando"
     dentro da Camada 4) — mesmo raciocínio já aplicado aos <h4> de seção
     da folha ("O QUE É" etc.): título é estrutural, não texto de apoio,
     usa --cor-destaque. */
  color: var(--cor-destaque);
  margin: 32px 0 4px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  display: inline-block;
}

/* ---- hero (Camada 1) ---- */
.prod-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 55vh, 520px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 70% 18%, color-mix(in srgb, var(--cor-destaque) 35%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
}
.prod-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 20px;
  text-align: left;
}
.prod-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 52px);
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.prod-hero .prod-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 560px;
  margin: 0 0 26px;
}

/* ---- cartões de classe (Camada 3a — SEMPRE cartão, independente do
   Formato gravado; ver Pages/ProdutoCruzeiros e spec seção 6.2) ---- */
.prod-classe-cartao {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cor-destaque);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
}
.prod-classe-cartao h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 4px;
}
.prod-classe-navios {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

/* ---- trilho de navios (Camada 3b) ---- */
.prod-trilho {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 4px -20px 14px;
  padding: 4px 20px 16px;
}
/* Achado no teste da Leva 2: com a barra sempre escondida, quem usa mouse
   não tinha rolagem visível nem pista de que havia mais navio à direita
   (só Shift+roda, sem indicação nenhuma). Escondida só em ponteiro grosso
   (touch, onde o gesto de arrastar já é a pista); em ponteiro fino, barra
   fina com as cores do tema (nunca literal). */
@media (pointer: coarse) {
  .prod-trilho { scrollbar-width: none; }
  .prod-trilho::-webkit-scrollbar { display: none; }
}
@media (pointer: fine) {
  .prod-trilho { scrollbar-width: thin; scrollbar-color: var(--cor-destaque) var(--line); }
  .prod-trilho::-webkit-scrollbar { height: 8px; }
  .prod-trilho::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
  .prod-trilho::-webkit-scrollbar-thumb { background: var(--cor-destaque); border-radius: 4px; }
}
.prod-navio-card {
  flex: 0 0 270px;
  scroll-snap-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-navio-capa {
  height: 140px;
  background: linear-gradient(150deg, var(--prod-tint-forte), var(--bg));
  object-fit: cover;
  width: 100%;
  display: block;
}
.prod-navio-corpo {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prod-navio-corpo h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 3px;
}
.prod-navio-ficha-linha {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cor-destaque);
  margin-bottom: 10px;
}
.prod-navio-gancho {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.32;
  color: var(--ink-body);
  margin: 0 0 12px;
}
.prod-atributos {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 10px;
}
.prod-atributos > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}
.prod-atributos dt { color: var(--ink-muted); flex: 0 0 auto; margin: 0; }
.prod-atributos dd { margin: 0; font-family: 'Inter', sans-serif; font-size: 12px; text-align: right; }
.prod-navio-ver {
  margin-top: 12px;
  width: 100%;
  background: var(--prod-tint);
  /* --ink puro mede 2,14:1 contra --prod-tint — falha, e no relato "não
     parece clicável" batia com isso. --ink-muted (já corrigido pra
     >=4.5:1 contra o pior fundo do app) resolve aqui também: 4,67:1
     contra --prod-tint, 5,57:1 no hover (--prod-tint-forte, acima). */
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.prod-navio-ver:hover { background: var(--prod-tint-forte); }
.prod-dica-trilho {
  font-size: 12.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 20px;
}

/* A partir daqui há espaço de sobra pra grade — o trilho de rolagem
   (herdado do protótipo mobile-first) deixa de fazer sentido com mouse:
   vira grade que quebra linha, sem overflow/scroll-snap, e sem o
   sangramento de -20px (que aqui não tem o padding-inline:20px de
   .prod-coluna, ver linha ~33, pra cancelar — cortava o primeiro cartão
   na borda da janela). A dica "arraste" mente numa grade, então some. */
@media (min-width: 900px) {
  .prod-trilho {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    margin: 4px 0 14px;
    padding: 4px 0 16px;
  }
  .prod-dica-trilho { display: none; }
}

/* ---- ficha completa em folha (modal) ---- */
.prod-folha {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: none;
}
.prod-folha[data-aberta="true"] { display: flex; }
/* Abaixo de 900px a caixa preenche o overlay inteiro (visual fullscreen,
   igual antes desta correção) — flex-direction:column + min-height:0 é o
   que permite o filho flex:1 (.prod-folha-conteudo) encolher e rolar
   dentro dela em vez de estourar a altura da tela. */
.prod-folha-caixa {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.prod-folha-cabeca {
  background: var(--bg-card);
  border-bottom: 3px solid var(--cor-destaque);
  color: var(--ink);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
/* Mesmo padrão minimalista do "&larr; Navios" já usado nas telas de Admin
   (ex.: Admin/Cruzeiros/Navios/Editar.cshtml) — texto puro, sem borda/fundo,
   cor herdada do contexto, só cursor:pointer denunciando que é clicável.
   É <button>, não <a>: fecha a folha no cliente, não navega. */
.prod-folha-voltar {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.prod-folha-cabeca h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 4px;
  line-height: 1.1;
}
.prod-folha-cabeca .prod-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.prod-folha-fechar {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  /* Alvo de toque >= 44x44px (a área clicável, não o glifo) — o padding
     cobre a altura (line-height:1 + 28px de fonte), mas o glifo "×" é mais
     estreito que alto, então precisa de min-width além do padding pra
     também bater 44px de largura (achado no teste da Leva 2: antes era
     padding:0, alvo do tamanho do glifo, ~28x16). Margem negativa compensa
     o padding pra não deslocar o × do canto visual; display:flex centra o
     glifo na caixa mais larga que o min-width força. */
  padding: 8px;
  margin: -8px -8px 0 0;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-folha-conteudo {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  max-width: 72ch;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
}
/* Mesmo achado do trilho (Leva 2): barra escondida por padrão é armadilha
   pra quem usa mouse. Escondida só em ponteiro grosso (touch, onde
   arrastar já é a pista); em ponteiro fino, fina e com as cores do tema. */
@media (pointer: coarse) {
  .prod-folha-conteudo { scrollbar-width: none; }
  .prod-folha-conteudo::-webkit-scrollbar { display: none; }
}
@media (pointer: fine) {
  .prod-folha-conteudo { scrollbar-width: thin; scrollbar-color: var(--cor-destaque) var(--line); }
  .prod-folha-conteudo::-webkit-scrollbar { width: 8px; }
  .prod-folha-conteudo::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
  .prod-folha-conteudo::-webkit-scrollbar-thumb { background: var(--cor-destaque); border-radius: 4px; }
}
.prod-folha-conteudo h4 {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-destaque);
  margin: 24px 0 8px;
}
.prod-folha-conteudo h4:first-child { margin-top: 0; }
.prod-folha-rodape {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-card);
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-shrink: 0;
}

/* Acima de 900px sobra espaço de sobra pro fullscreen continuar fazendo
   sentido (achado no teste da Leva 2: virava "janela de celular esticada"
   num monitor, coluna estreita cercada de vazio). A folha vira diálogo
   centrado: .prod-folha passa a ser só o backdrop (fixed, tela toda,
   escurecido — cor do próprio tema via color-mix, nunca preto literal) e
   .prod-folha-caixa ganha o tamanho/cantos/sombra da caixa de verdade.
   Cabeçalho e rodapé não encolhem (flex-shrink:0, já setado acima); só
   .prod-folha-conteudo tem flex:1 + overflow-y:auto — é o único miolo que
   rola, min-height:0 na caixa é o que permite isso em vez de estourar. */
@media (min-width: 900px) {
  .prod-folha[data-aberta="true"] {
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 65%, black 35%);
  }
  .prod-folha-caixa {
    flex: 0 1 auto;
    width: 100%;
    max-width: 1000px;
    /* Nunca mais que 92vh — acima disso a caixa volta a parecer
       fullscreen, o diálogo precisa mostrar que há página atrás dele
       (achado do ajuste de proporção: 85vh já deixava isso claro, 92vh é
       o limite antes de perder esse efeito). min-height garante que a
       caixa não fique pequena demais em conteúdo curto. */
    max-height: 92vh;
    min-height: 600px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 80px -20px color-mix(in srgb, black 60%, transparent);
  }
  /* Cromo (cabeçalho+rodapé) enxuto — é onde o espaço vertical realmente
     está indo (~120px+75px de um total de 85-92vh). Ganho aqui é maior
     que os 7vh extras do max-height. */
  .prod-folha-cabeca {
    padding: 14px 24px;
  }
  .prod-folha-voltar {
    margin-bottom: 4px;
  }
  .prod-folha-rodape {
    padding: 10px 24px;
  }
  .prod-folha-conteudo {
    max-width: 68ch;
    margin: 0;
  }
}

/* Acima de 1000px a caixa tem largura de sobra pra meta caber ao lado do
   nome (em vez de embaixo, aproximando as linhas do cabeçalho) e pra
   galeria e texto ficarem lado a lado, em vez de foto ocupando a tela
   inteira e texto começando fora dela. Abaixo disso (900-999px) o
   cabeçalho continua empilhado e o conteúdo continua em coluna única —
   mudança separada da anterior de propósito, cada uma no seu limiar. */
@media (min-width: 1000px) {
  .prod-folha-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
  }
  .prod-folha-titulo .prod-folha-voltar {
    flex-basis: 100%;
  }
  .prod-folha-cabeca h3 { margin: 0; }

  /* Galeria (~36%) flutua à esquerda e o texto contorna — só quando a
     ficha tem foto (:has), senão nada muda (texto em largura toda,
     bloco seguinte). Grid/flex de coluna rígida foi tentado antes e
     descartado: com foto vertical, o texto ficava preso numa coluna
     estreita e sobrava uma faixa vazia à esquerda quando a foto acabava
     antes do texto. Float resolve isso — o texto volta à largura
     inteira sozinho assim que passa da altura da foto.

     max-width vai no CONTÊINER (~90ch), não em cada elemento de texto:
     com contorno, a largura da linha varia dentro do próprio texto (mais
     curta ao lado da foto, inteira depois) — isso é o comportamento
     certo, não um bug a esconder limitando cada elemento por igual.
     display:flow-root no contêiner substitui clearfix pra conter o
     float (a galeria não "vaza" pra fora do conteúdo, nem para o
     rodapé). */
  .prod-folha-conteudo:has(.prod-galeria) {
    display: flow-root;
    max-width: 90ch;
  }
  .prod-folha-conteudo:has(.prod-galeria) .prod-galeria {
    float: left;
    width: 36%;
    margin: 0 24px 20px 0;
    /* .prod-galeria por padrão é columns:2 (masonry pensado pra largura
       cheia) — dentro do float de 36% isso espremia 2 fotos em tiras
       estreitas lado a lado. Aqui elas empilham (1 coluna), o float fica
       mais alto e o contorno do texto acontece mais abaixo — item 3 da
       correção, testado de propósito com uma 2ª foto. */
    columns: 1;
  }
  /* Título de seção (O QUE É, PARA QUEM É...) começando colado na borda
     da foto ficava feio — padding-left pequeno dá respiro sem empurrar
     o título pra baixo da foto (clear:none explícito, pra nunca virar
     isso por engano se alguém copiar essa regra pra outro h4 no futuro). */
  .prod-folha-conteudo:has(.prod-galeria) h4 {
    clear: none;
    padding-left: 4px;
  }
}

/* ---- galeria ---- */
.prod-galeria {
  columns: 2;
  column-gap: 10px;
  margin: 4px 0 20px;
}
.prod-galeria img {
  break-inside: avoid;
  margin: 0 0 10px;
  border-radius: var(--radius);
  width: 100%;
  display: block;
  background: var(--bg-card);
  aspect-ratio: 4 / 3; /* fallback quando LarguraPx/AlturaPx são null — proporção da única foto real do acervo */
}
@media (min-width: 900px) {
  .prod-galeria { columns: 3; }
}
/* Depois da media query de propósito: mesma especificidade de .prod-galeria,
   então precisa vir por último na cascata pra sempre vencer (foto única não
   deve virar 3 colunas em tela larga, mesmo sem diferença visual com 1 só
   imagem — evita a armadilha se um navio ganhar 2 fotos no futuro). */
.prod-galeria--unica { columns: 1; }

/* ---- comparador (Camada 3c) ---- */
.prod-comparador {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
/* table-layout:fixed + <colgroup> calculam a largura das colunas uma vez só
   pelo próprio layout de tabela — os seletores do <thead> (achado no teste
   da Leva 2: antes viviam num flex separado acima da tabela, sem bater com
   as colunas que controlam) ficam alinhados por construção, não por CSS de
   ajuste. Nome de navio longo não redistribui as colunas. */
table.prod-comp { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.prod-comp col:first-child { width: 24%; }
table.prod-comp col:nth-child(2),
table.prod-comp col:nth-child(3) { width: 38%; }
table.prod-comp th,
table.prod-comp td { padding: 10px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.prod-comp th { font-weight: 600; font-size: 11.5px; color: var(--ink-muted); }
/* Dado da comparação é corpo, não apoio — --ink puro media 2,15:1 contra
   --bg-card (o fundo real de .prod-comparador) e falhava; --ink-body é o
   nível calibrado pra isso (corpo editorial). */
table.prod-comp td { font-size: 13px; line-height: 1.45; color: var(--ink-body); }
/* Sobra largura acima de 900px (tabela de 3 colunas com folga, ver ajuste
   anterior) — corpo (célula de dado) cresce de 13 pra 15px, com mais
   respiro vertical. Só o corpo: o rótulo (th, 11.5px, mono-uppercase)
   é separador, não texto de leitura, fica como está. */
@media (min-width: 900px) {
  table.prod-comp th,
  table.prod-comp td { padding: 14px 6px; }
  table.prod-comp td { font-size: 15px; }
}
table.prod-comp thead select {
  width: 100%;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  /* 16px, não menos — abaixo disso o iOS Safari dá zoom automático ao
     focar o campo, pior que qualquer aperto visual de coluna estreita. */
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  /* --ink puro media 2,97:1 contra --bg (o próprio teto da cor crua) e
     falhava — --ink-body (corpo, mesmo nível do dado da tabela ao lado)
     resolve. */
  color: var(--ink-body);
}
/* Abaixo de ~560px as 3 colunas (rótulo 24% + 2 dados 38%) não cabem —
   achado no teste da Leva 2: "Para quem" quebrava em 6 linhas curtas e o
   nome do navio truncava dentro do <select>. Mesma tabela, mesmo HTML —
   só o layout de linha muda: cada <tr> vira grid de 2 colunas com o <th>
   de rótulo ocupando as duas (linha própria acima), e as duas células de
   dado lado a lado abaixo, 50% cada — de ~113px pra ~175px por coluna.
   O <thead> acompanha: a célula vazia de rótulo some, os 2 <select> ficam
   50%/50% alinhados com as colunas de dado. */
@media (max-width: 560px) {
  table.prod-comp,
  table.prod-comp thead,
  table.prod-comp tbody { display: block; }
  table.prod-comp thead tr { display: flex; gap: 8px; }
  table.prod-comp thead tr td:first-child { display: none; }
  table.prod-comp thead th {
    display: block;
    flex: 1 1 50%;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
  }
  table.prod-comp tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "rotulo rotulo" "a b";
    column-gap: 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  table.prod-comp tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  table.prod-comp tbody tr th {
    grid-area: rotulo;
    display: block;
    padding: 0 0 4px;
    border-bottom: 0;
    /* Rótulo de linha vira separador discreto, mesmo tratamento
       tipográfico do "olho" de seção (.prod-olho) — maiúsculas
       espaçadas, sem tomar a cor de destaque (que é pra eyebrow de
       seção, não pra separador de linha dentro da tabela). */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
  }
  table.prod-comp tbody tr td {
    padding: 0;
    border-bottom: 0;
  }
  table.prod-comp tbody tr td:nth-of-type(1) { grid-area: a; }
  table.prod-comp tbody tr td:nth-of-type(2) { grid-area: b; }
}
.prod-fora-comparador {
  background: var(--bg-card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 14px;
}
.prod-fora-comparador h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
}
.prod-fora-comparador p { font-size: 14px; margin: 0 0 10px; color: var(--ink-body); }
.prod-fora-comparador p:last-child { margin: 0; }

/* ---- os três formatos de bloco ---- */

/* Sanfona: <details>/<summary> nativo (spec 2.4 — zero JS, acessibilidade
   de graça). Marcador customizado via ::after girando ao abrir, em vez do
   button + classe .aberto do protótipo. */
.prod-sanfona { border-top: 1px solid var(--line); }
.prod-item { border-bottom: 1px solid var(--line); }
.prod-item > summary {
  list-style: none;
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.prod-item > summary::-webkit-details-marker { display: none; }
.prod-item > summary .prod-pergunta {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.prod-item > summary .prod-sinal {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--cor-destaque);
  font-size: 15px;
  margin-top: 1px;
  transition: transform 0.15s ease;
}
.prod-item[open] > summary .prod-sinal {
  background: var(--cor-destaque);
  color: var(--bg);
  border-color: var(--cor-destaque);
  transform: rotate(45deg);
}
/* .prod-item-corpo (aqui), .prod-destaque p/li e .prod-prosa p (abaixo)
   são corpo de texto editorial — antes usavam --ink-muted, a mesma
   variável de rótulo/meta (apoio). Confirmado em getComputedStyle() que
   isso fazia corpo e apoio renderizarem a cor exatamente idêntica, sem 3º
   nível visual. --ink-body é o nível novo dedicado a corpo. */
.prod-item-corpo { padding: 0 0 20px; color: var(--ink-body); }
.prod-item-corpo p:last-child { margin-bottom: 0; }

/* Destaque: callout de largura inteira, sempre expandido. No escuro,
   destaca SUBINDO (--glow-servico já é derivado de --cor-destaque em
   site.css, uso direto — ver spec seção 2.2). */
.prod-destaque {
  background: var(--bg-card);
  border-left: 3px solid var(--cor-destaque);
  border-radius: var(--radius);
  padding: 22px;
  margin: 0 0 16px;
  box-shadow: var(--glow-servico);
}
.prod-destaque h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 10px;
}
.prod-destaque p, .prod-destaque li { color: var(--ink-body); }

/* Prosa: título + corpo corridos, sem caixa nem interação. */
.prod-prosa h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
}
.prod-prosa p { color: var(--ink-body); }
.prod-prosa + .prod-prosa { margin-top: 20px; }

/* ---- saídas (Camada 5) ---- */
.prod-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -20px 18px;
  padding: 0 20px 4px;
  scrollbar-width: none;
}
.prod-chips::-webkit-scrollbar { display: none; }
.prod-chip {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}
.prod-chip[aria-pressed="true"] { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--bg); }
.prod-mes { border-bottom: 1px solid var(--line); }
.prod-mes > summary {
  list-style: none;
  padding: 16px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prod-mes > summary::-webkit-details-marker { display: none; }
.prod-mes .prod-mes-nome { font-size: 16px; font-weight: 600; text-transform: capitalize; color: var(--ink); }
.prod-mes .prod-mes-qtd { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink-muted); }
.prod-saida {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.prod-saida-data { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; flex: 0 0 56px; line-height: 1.15; color: var(--ink); }
.prod-saida-data small { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.prod-saida-info { flex: 1; min-width: 0; }
.prod-saida-info b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.prod-saida-info span { font-size: 12.5px; color: var(--ink-muted); }

/* A barra fixa desta página virou componente compartilhado na Leva C: o CSS
   está em wwwroot/css/site.css sob .barra-cta, e o markup/comportamento em
   Pages/Shared/_BarraCta.cshtml e _ScriptBarraCta.cshtml. Ver
   Docs/spec-leva-c-barra-cta.md. */

@media (max-width: 640px) {
  .prod-trilho { margin: 4px -16px 14px; padding: 4px 16px 16px; }
  .prod-chips { margin: 0 -16px 18px; padding: 0 16px 4px; }
}