/*
  Tabua de Mare - GPG-TABUA-MARE-REDESIGN-001. Implementacao fiel do
  artefato aprovado pelo MASTER no Claude Design ("Tabua de Mare.dc.html"),
  traduzida de estilos inline + templating (sc-if/sc-for) do canvas para
  HTML/CSS/JS estaticos deste projeto. Fonte Newsreader + paleta
  --ink/--sand/--ocean/--coral/--gold - a MESMA fonte e os MESMOS valores
  hexadecimais ja usados por home.css na Home real em producao (nao um
  sistema novo isolado - ver retorno da sprint). Nao usa design-system.css
  (essa pagina tem seu proprio nav/header/rodape, fora do escopo do
  .gali-header compartilhado com Catalogo/Planejar, que continuam
  intocados).

  Dados: 100% de /api/mare?mes=&ano= (tabua.js) - nenhum valor de mare
  fixo neste arquivo ou no HTML.
*/

:root {
  --ink: #1f2b26;
  --sand: #f7f0e3;
  --sand-deep: #eadfc7;
  --paper: #fffaf1;
  --ocean: #0f6357;
  --ocean-light: #3f8f7e;
  --coral: #e2703f;
  --coral-deep: #c85f34;
  --gold: #b9872f;
  /* Cor das estrelas - independente da paleta acima (nao muda com a
     classificacao/tint da linha), mesmo tom historico de --cor-ouro em
     design-system.css (#d6a25c), preservado aqui como valor literal. */
  --tabua-estrela: #d6a25c;

  --tabua-cor-excepcional: #138a3d;
  --tabua-cor-excepcional-fraca: color-mix(in srgb, #138a3d 30%, white);
  --tabua-cor-excelente: #45be00;
  --tabua-cor-excelente-fraca: color-mix(in srgb, #45be00 30%, white);
  --tabua-cor-boa: #79be00;
  --tabua-cor-boa-fraca: color-mix(in srgb, #79be00 32%, white);
  --tabua-cor-intermediaria: #d4b400;
  --tabua-cor-intermediaria-fraca: color-mix(in srgb, #d4b400 32%, white);
  --tabua-cor-desfavoravel: #be0500;
  --tabua-cor-desfavoravel-fraca: color-mix(in srgb, #be0500 28%, white);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

*:focus-visible {
  outline: 2px solid #c9713f;
  outline-offset: 2px;
}

img {
  max-width: 100%;
}

/* ---------- Nav ---------- */
/* GPG-CABECALHO-PADRAO-001: o nav proprio da Tabua foi substituido pelo
   cabecalho institucional padrao (public/header.css, classe
   .gali-nav-padrao), compartilhado com Catalogo e Planejar - ver
   tabua.html. Nada de nav-specifico fica mais aqui. */

/* ---------- Cabecalho / hero ---------- */

.tabua-header {
  padding: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 64px) clamp(20px, 3vw, 28px);
}

.tabua-header__card {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 32px;
  padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
  box-shadow: 0 8px 22px rgba(30, 25, 15, 0.06);
}

.tabua-header__gali {
  position: relative;
  width: 104px;
  height: 132px;
  flex: none;
  overflow: visible;
}

.tabua-header__gali::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 56px 56px 14px 14px;
  background: var(--sand-deep);
  box-shadow: 0 10px 22px rgba(30, 25, 15, 0.14);
  z-index: 1;
}

.tabua-header__gali img {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  height: 150%;
  width: auto;
  max-width: none;
  display: block;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 97%);
  mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 97%);
}

.tabua-header__texto {
  flex: 1;
  min-width: 240px;
}

.tabua-kicker {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 6px;
}

.tabua-titulo {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.tabua-subtitulo {
  font-size: 15px;
  line-height: 1.55;
  opacity: .8;
  max-width: 460px;
  margin: 0;
}

/* ---------- Conteudo / tabela ---------- */

.tabua-conteudo {
  padding: 0 clamp(20px, 5vw, 64px) 28px;
  max-width: 1180px;
  margin: 0 auto;
}

.tabua-controles {
  margin-bottom: 22px;
}

.tabua-periodo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--paper);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(30, 25, 15, 0.08);
}

.tabua-periodo__botao {
  border: none;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  white-space: nowrap;
}

.tabua-periodo__botao.is-ativo {
  background: var(--ocean);
  color: var(--paper);
}

.tabua-periodo__botao:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.tabua-mes-ano {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 10px;
}

:root {
  --tabua-col-dia: 38px;
  --tabua-col-gap: 10px;
}

.tabua-grade {
  display: grid;
  grid-template-columns: var(--tabua-col-dia) 1fr 1fr 66px;
  align-items: center;
  column-gap: var(--tabua-col-gap);
}

.tabua-col-dia,
.tabua-col-horario,
.tabua-col-altura {
  text-align: center;
}

.tabua-col-avaliacao {
  text-align: right;
}

.tabua-cabecalho-colunas {
  padding: 0 16px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .5;
}

.tabua-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tabua-status {
  opacity: .65;
  text-align: center;
  padding: 32px 0;
}

.tabua-linha {
  display: grid;
  grid-template-columns: var(--tabua-col-dia) 1fr 1fr 66px;
  align-items: center;
  column-gap: var(--tabua-col-gap);
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--tabua-linha-fraca, color-mix(in srgb, var(--ink) 6%, var(--paper)));
  border-left: 6px solid var(--tabua-linha-forte, var(--ink));
}

.tabua-linha[data-classe="excepcional"] { --tabua-linha-forte: var(--tabua-cor-excepcional); --tabua-linha-fraca: var(--tabua-cor-excepcional-fraca); }
.tabua-linha[data-classe="excelente"] { --tabua-linha-forte: var(--tabua-cor-excelente); --tabua-linha-fraca: var(--tabua-cor-excelente-fraca); }
.tabua-linha[data-classe="boa"] { --tabua-linha-forte: var(--tabua-cor-boa); --tabua-linha-fraca: var(--tabua-cor-boa-fraca); }
.tabua-linha[data-classe="intermediaria"] { --tabua-linha-forte: var(--tabua-cor-intermediaria); --tabua-linha-fraca: var(--tabua-cor-intermediaria-fraca); }
.tabua-linha[data-classe="desfavoravel"] { --tabua-linha-forte: var(--tabua-cor-desfavoravel); --tabua-linha-fraca: var(--tabua-cor-desfavoravel-fraca); }

.tabua-linha--indisponivel {
  grid-template-columns: var(--tabua-col-dia) 1fr;
  color: var(--ink);
  opacity: .6;
  font-size: .85rem;
  border-left-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

.tabua-linha__dia {
  text-align: center;
}

.tabua-linha__dia-numero {
  display: block;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
}

.tabua-linha__dia-semana {
  display: block;
  font-size: 10px;
  letter-spacing: .05em;
  opacity: .6;
  text-transform: uppercase;
}

.tabua-linha__horario,
.tabua-linha__altura {
  position: relative;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.tabua-linha__altura {
  font-variant-numeric: tabular-nums;
}

.tabua-linha__aviso {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-size: 10px;
  opacity: .65;
  white-space: nowrap;
}

.tabua-linha__avaliacao {
  text-align: right;
}

.tabua-linha__estrelas {
  display: inline-block;
  color: var(--tabua-estrela);
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.tabua-fonte-dados {
  font-size: 12px;
  opacity: .55;
  margin: 20px 0 0;
  max-width: 640px;
}

/* ---------- Legenda / observacao ---------- */

.tabua-legenda-bloco {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(24px, 4vw, 32px);
}

.tabua-legenda-toggle {
  background: none;
  border: none;
  color: var(--ocean);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.tabua-legenda[hidden] {
  /* [hidden] do UA stylesheet tem a mesma especificidade da classe
     abaixo (0,1,0) - sem esta regra, "display:grid" da classe vence por
     ordem de cascata e o hidden nativo deixa de esconder o elemento. */
  display: none;
}

.tabua-legenda {
  margin-top: 18px;
  background: var(--sand-deep);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.tabua-legenda__secao + .tabua-legenda__secao {
  margin-top: 0;
}

.tabua-legenda__titulo {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin: 0 0 12px;
}

.tabua-legenda__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.tabua-legenda__lista li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.tabua-legenda__secao:first-child .tabua-legenda__estrelas {
  color: var(--gold);
  width: 80px;
  flex: none;
}

.tabua-legenda__secao:last-child li {
  align-items: center;
}

.tabua-legenda__amostra {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.tabua-legenda__amostra[data-classe="excepcional"] { background: var(--tabua-cor-excepcional); }
.tabua-legenda__amostra[data-classe="excelente"] { background: var(--tabua-cor-excelente); }
.tabua-legenda__amostra[data-classe="boa"] { background: var(--tabua-cor-boa); }
.tabua-legenda__amostra[data-classe="intermediaria"] { background: var(--tabua-cor-intermediaria); }
.tabua-legenda__amostra[data-classe="desfavoravel"] { background: var(--tabua-cor-desfavoravel); }

.tabua-legenda__texto {
  font-size: 12px;
  opacity: .6;
  margin: 12px 0 0;
}

.tabua-observacao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
  opacity: .7;
  max-width: 720px;
}

.tabua-observacao__icone {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
}

/* ---------- CTA final ---------- */

.tabua-cta-final {
  background: var(--ocean);
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

/* GPG-CABECALHO-PADRAO-001-REV (bloco final, revisado por decisao do
   MASTER - GPG-HOME-TABUA-FINAL-001): uma unica <img> da Gali; a
   "moldura" pilula por tras dela e um pseudo-elemento CSS, sem segunda
   copia da imagem nem background-image. Texto e botão à esquerda, Gali
   à direita no desktop (ordem no HTML, sem CSS order - funciona igual
   empilhada no mobile: texto/botão primeiro, Gali abaixo). */
.tabua-cta-final__gali-coluna {
  display: flex;
  justify-content: center;
}

.tabua-cta-final__gali {
  position: relative;
  width: 180px;
  height: 230px;
  flex: none;
}

.tabua-cta-final__gali::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px 100px 16px 16px;
  background: var(--paper);
  box-shadow: 0 16px 32px rgba(10, 20, 15, 0.3);
  z-index: 1;
}

/* GPG-TABUA-CTA-BREAKOUT-001: sem overflow:hidden no container (removido
   acima) para permitir o breakout real da crista/mao por cima da moldura -
   a pilula ::before (z-index:1) fica atras da <img> (z-index:2). Imagem
   ~5% menor que antes (216x276 -> 205.2x262.2) e ainda centralizada na
   horizontal ((205.2-180)/2 = 12.6px de cada lado). O recorte da base e
   feito so por clip-path (nunca mask-image/gradiente/opacity), calculado
   para terminar exatamente na base da moldura: base da moldura em
   coordenadas da propria imagem = 230 - (-20.9) = 250.9px; logo
   inset inferior = 262.2 - 250.9 = 11.3px. Topo e laterais nunca
   recortados - e ali que o breakout aprovado precisa aparecer. */
.tabua-cta-final__gali-img {
  position: absolute;
  top: -20.9px;
  left: -12.6px;
  width: 205.2px;
  max-width: none;
  height: 262.2px;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 2;
  clip-path: inset(0 0 11.3px 0);
}

.tabua-cta-final__titulo {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  color: var(--paper);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 16px;
}

.tabua-cta-final__paragrafo {
  color: var(--paper);
  opacity: .88;
  font-size: 16px;
  line-height: 1.65;
  max-width: 440px;
  margin: 0 0 26px;
}

/* Decisao do MASTER (GPG-HOME-TABUA-FINAL-001): CTA centralizado sob a
   coluna textual no desktop, titulo/paragrafo seguem a esquerda -
   .texto vira coluna flex so para permitir align-self no botao. */
.tabua-cta-final__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* GPG-GALI-HOME-PRECONVERSA-001: mesmo padrao de estados dos CTAs coral
   da Home (Home v2.dc.html, .cta-coral) - regra base do fundo fora dos
   estados de interacao, hover restrito a ponteiros finos, active mais
   claro que hover, foco visivel. */
.tabua-cta-final__botao {
  display: inline-flex;
  align-self: center;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.tabua-cta-final__botao:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .tabua-cta-final__botao:hover {
    background: color-mix(in srgb, var(--coral) 88%, white 12%);
  }
}

.tabua-cta-final__botao:active {
  background: color-mix(in srgb, var(--coral) 76%, white 24%);
}

/* ---------- Rodape ---------- */

/* Bloco de apresentacao (marca + descricao) sobre fundo claro (sand) -
   so aparece no mobile, antes do rodape principal (que vira ocean la).
   No desktop o rodape inteiro fica sobre sand (fundo da pagina), entao
   este bloco fica oculto e a apresentacao normal (primeira coluna do
   grid) e suficiente - ver Tabua de Mare.dc.html, data-footer-intro. */
.tabua-rodape-intro {
  display: none;
}

.tabua-rodape__legal {
  display: none;
  margin-top: 18px;
}

.tabua-rodape__legal-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.tabua-rodape__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 13px;
  font-size: 12px;
}

.tabua-rodape__legal-links a {
  color: inherit;
  text-decoration: none;
  padding: 7px 0;
  white-space: nowrap;
}

.tabua-rodape {
  padding: clamp(40px, 6vw, 56px) clamp(20px, 5vw, 64px) 30px;
}

.tabua-rodape__grade {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}

.tabua-rodape__marca {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 10px;
}

.tabua-rodape__desc {
  font-size: 13px;
  opacity: .65;
  max-width: 240px;
  margin: 0;
}

.tabua-rodape__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 12px;
}

.tabua-rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}

.tabua-rodape__lista a {
  color: inherit;
  text-decoration: none;
  opacity: .8;
}

.tabua-rodape__copy {
  max-width: 1180px;
  margin: 32px auto 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top: 18px;
}

.tabua-rodape__copy p {
  margin: 0;
  font-size: 12px;
  opacity: .55;
}

/* ---------- Responsividade: >=1200px mostra todos os meses lado a lado ---------- */
/* Mesmo breakpoint ja usado pela implementacao anterior e pelo proprio
   Component do artefato (isDesktopMeasured: window.innerWidth >= 1200). */

.tabua-grade-meses {
  display: none;
}

@media (min-width: 1200px) {
  /* GPG-TABUA-MARE-NAV-DESKTOP-RESTORE-001: .tabua-controles (a barra de
     meses clicaveis) NAO entra nesta lista - o artefato aprovado tem uma
     barra equivalente tambem no bloco isDesktop (botoes com onClick
     scrollTo), so que ela nunca tinha sido construida aqui; a barra
     mobile ficava oculta em vez de reaproveitada. Corrigido: a mesma
     barra fica visivel em qualquer largura, com o clique trocando de
     comportamento em tabua.js (troca de mes no mobile, rolagem ate o
     bloco correspondente no grid multimeses). #mes-ano/#tabua-mes-unico
     continuam ocultos aqui - esse e o conteudo de "um mes por vez" que o
     grid substitui no desktop. */
  #mes-ano,
  #tabua-mes-unico {
    display: none;
  }

  .tabua-grade-meses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
  }

  .tabua-mes-bloco--centralizado {
    grid-column: 2;
  }

  .tabua-mes-bloco__titulo {
    font-family: 'Newsreader', serif;
    font-weight: 500;
    font-size: 19px;
    margin: 0 0 14px;
    text-transform: capitalize;
    text-align: center;
  }

  .tabua-mes-bloco .tabua-grade {
    grid-template-columns: 34px 1fr 1fr 62px;
    padding: 0 14px 8px;
  }

  .tabua-mes-bloco .tabua-cabecalho-colunas {
    margin-bottom: 8px;
  }

  .tabua-mes-bloco .tabua-lista {
    gap: 8px;
  }

  .tabua-mes-bloco .tabua-linha {
    grid-template-columns: 34px 1fr 1fr 62px;
    padding: 11px 14px;
  }

  .tabua-mes-bloco .tabua-linha__dia-numero {
    font-size: 17px;
  }

  .tabua-mes-bloco .tabua-linha__horario,
  .tabua-mes-bloco .tabua-linha__altura {
    font-size: 15px;
  }
}

/* ==========================================================================
   MOBILE (<=640px) — GPG-HOME-TABUA-FINAL-001
   Fonte de verdade: Tabua de Mare.dc.html.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Cabecalho fixo (GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002) ---- */
  /* Fiel a Tabua de Mare.dc.html: fixed (nao sticky) durante toda a
     rolagem, com compensacao exata via --header-h-mobile (medida em
     tempo real por tabua.js). Sobrescreve so aqui (tabua.css, carregado
     depois de header.css) - nao altera header.css nem Catalogo/Planejar,
     que tambem o consomem. */
  body {
    padding-top: var(--header-h-mobile, 60px) !important;
  }
  .gali-nav-padrao {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box !important;
  }
  [data-mobile-panel] {
    max-height: calc(100vh - var(--header-h-mobile, 60px));
    overflow-y: auto !important;
  }

  /* ---- Card superior (Gali + titulo) ---- */
  .tabua-header__card {
    flex-wrap: nowrap;
    align-items: center;
    padding: 16px 14px;
    gap: 12px;
  }
  .tabua-header__gali {
    width: 36%;
    max-width: 118px;
    height: auto;
    aspect-ratio: 104 / 132;
    flex: none;
  }
  .tabua-header__gali img {
    height: 115%;
    left: 50%;
    bottom: 0;
    transform: translate(calc(-50% + 3px), 5px);
  }
  .tabua-header__texto {
    min-width: 0;
    flex: 1 1 auto;
  }
  .tabua-titulo {
    font-size: 1.28rem;
    margin: 0 0 6px;
  }
  .tabua-kicker {
    font-size: 9.5px;
    margin: 0 0 4px;
  }
  .tabua-subtitulo {
    font-size: 12.5px;
    line-height: 1.42;
  }

  /* ---- Seletor de mes compacto ---- */
  .tabua-periodo {
    justify-content: center;
    row-gap: 3px;
    column-gap: 6px;
    padding: 6px 8px;
    max-width: 272px;
    margin: 0 auto 22px;
  }
  .tabua-periodo__botao {
    min-height: 28px;
    padding: 6px 10px;
  }

  /* GPG-TABUA-MOBILE-REFINO-001 (item 1): quando existem exatamente 4
     meses (caso real atual - Setembro a Dezembro), o 4o fica sozinho na
     segunda linha. Em vez de deixar o flex centralizar esse orfao sozinho
     (o que o joga para o meio da linha), so nesse caso especifico troca
     para grid de 3 colunas com largura max-content por coluna - cada
     botao mantem seu proprio tamanho (sem esticar), e o 4o item cai
     automaticamente na coluna 1, exatamente sob o 1o (mesma largura de
     coluna = mesmo centro). Com qualquer outra quantidade de meses
     (1, 2, 3, 5, 6...) nada muda: continua flex-wrap com justify-content:
     center, preservando o comportamento ja aprovado (ex.: par centralizado
     quando sobram 2 meses na ultima linha). */
  .tabua-periodo:has(.tabua-periodo__botao:nth-child(4):last-child) {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    justify-items: center;
  }

  /* GPG-TABUA-MOBILE-REFINO-001 (item 2): Tabua de Mare.dc.html nao tem
     valor transparente explicito para a capsula ativa (usa var(--ocean)
     solido, igual a producao) - por isso a primeira aproximacao pedida
     pelo MASTER. So o background-color leva a transparencia; a cor do
     texto (var(--paper), herdada da regra base) e a opacidade do botao
     inteiro nao sao tocadas. */
  .tabua-periodo__botao.is-ativo {
    background-color: rgba(15, 99, 87, 0.88);
  }

  /* ---- Bloco verde final: titulo -> texto -> Gali -> CTA ---- */
  .tabua-cta-final {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tabua-cta-final__texto {
    display: contents;
  }
  .tabua-cta-final__copy {
    width: 100%;
  }
  .tabua-cta-final__gali-coluna {
    order: 2;
  }
  .tabua-cta-final__botao {
    order: 3;
  }

  /* ---- Rodape: intro clara (sand) + rodape principal em ocean ---- */
  /* GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002: padrao definitivo, fiel a
     Tabua de Mare.dc.html (bloco FOOTER MOBILE) - grupo Explorar
     removido (so Guia permanece, horizontal e em destaque), Legal
     horizontal/discreto, copyright compacto. Intro (sand) e rodape
     (ocean) continuam adjacentes, sem faixa vazia entre as duas areas. */
  .tabua-rodape-intro {
    display: block;
    background: var(--sand);
    padding: 28px 24px 18px;
  }
  .tabua-rodape-intro__conteudo {
    max-width: 1180px;
    margin: 0 auto;
  }
  .tabua-rodape {
    background: var(--ocean);
    color: var(--paper);
    padding: 26px 24px 18px;
  }
  .tabua-rodape__grade {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tabua-rodape__grade > div:first-child,
  .tabua-rodape__grade > div:nth-child(2) {
    display: none;
  }
  .tabua-rodape__grade > div:nth-child(3) {
    margin-top: 4px;
  }
  .tabua-rodape__grade > div:nth-child(3) > .tabua-rodape__label {
    margin: 0 0 8px;
    opacity: .6;
  }
  .tabua-rodape p {
    opacity: .68;
  }
  .tabua-rodape a {
    color: var(--paper);
    opacity: .9;
  }
  .tabua-rodape__lista {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .tabua-rodape__legal {
    display: block;
    margin-top: 22px;
  }
  .tabua-rodape__legal-label {
    margin: 0 0 6px;
    font-size: 9.5px;
    opacity: .42;
  }
  .tabua-rodape__legal-links {
    flex-direction: row;
    gap: 5px 13px;
  }
  .tabua-rodape__legal-links a {
    padding: 4px 0;
    font-size: 11px;
    opacity: .58;
  }
  .tabua-rodape__copy {
    margin-top: 12px;
    padding-top: 9px;
    border-top-color: color-mix(in srgb, var(--paper) 22%, transparent);
  }
  .tabua-rodape__copy p {
    opacity: .5;
  }
}