/* ==========================================================================
   Tabelas praticas — /tabelas-praticas

   Uma folha para a pagina inteira. Nada aqui conhece um numero: tudo vem
   de config/tabelas.php.

   Composicao, de cima para baixo:
     .tp-hero     topo curto: texto a esquerda, painel de indices a direita
     .tp-panel    o painel escuro com os seis numeros do ano
     (.pagenav e .page-* sao componentes, em components.css)
     .tp-group    um cartao por grupo de tabelas (01 a 07)
     .tp-basis    vigencia, base legal e fonte oficial do grupo
     .seg         controle segmentado (os anexos do Simples)
     .tp-table    a tabela em si: cabecalho, grade, nota
     .tp-facts    valores de referencia, ao lado das tabelas
     .sim         simulador de folha (08)

   Principio herdado das outras paginas: fio fino, numero tabular, um unico
   bloco escuro por tela e o vermelho so como assinatura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.tp-hero {
  position: relative;
  /* Contexto proprio para o fundo vivo (.backdrop) ficar atras do cartao. */
  isolation: isolate;
  /* Um degrau abaixo do topo das paginas de servico: aqui o texto divide a
     janela com um painel de dados, e a promessa e curta. */
  --fs-display: clamp(1.75rem, min(0.7rem + 5.4vw, 8.6vh), 5.5rem);
  --tp-pad: var(--page-hero-pad);
  --tp-gap: clamp(0.5rem, min(2.2vw, 1.9vh), 1.375rem);

  padding: var(--hero-top) var(--shell-pad) var(--shell-pad);
}

.tp-hero__card {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* O mesmo halo quente das outras paginas, recortado pelo raio do cartao. */
.tp-hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.tp-hero__glow::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -10%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
}

.tp-hero__main {
  position: relative;
  display: grid;
  gap: calc(var(--tp-gap) * 1.8);
  padding: var(--tp-pad);
}

.tp-hero__content {
  display: grid;
  align-content: end;
  gap: var(--tp-gap);
  min-width: 0;
  container-type: inline-size;
}

.tp-hero__headline {
  display: grid;
  gap: 0.06em;
  margin-left: -0.04em; /* alinhamento optico da haste */
}

/* O sobretitulo carrega a palavra-chave ("Tabelas praticas 2026") dentro do
   H1; as linhas grandes ficam livres para falar com o leitor. */
.tp-hero__kicker {
  display: block;
  padding-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.tp-hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
}

.tp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* Coluna estreita: os dois botoes dividem a linha em vez de empilhar, como
   no topo das paginas de servico. */
@container (max-width: 26rem) {
  .tp-hero__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
  }

  .tp-hero__actions .btn__icon {
    display: none;
  }
}

.tp-hero__visual {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Painel de indices — o unico bloco escuro do topo, na mesma linguagem da
   ficha da area. As linhas entram uma por vez, de cima para baixo, no
   ritmo do painel do hero da home (--row-stagger / --dur-row).
   -------------------------------------------------------------------------- */
.tp-panel {
  position: relative;
  display: grid;
  gap: clamp(0.75rem, min(1.6vw, 1.6vh), 1.125rem);
  padding: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  animation: panel-in var(--dur-reveal) var(--ease-out) 420ms forwards;
}

.tp-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.tp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* O chip de status foi desenhado para fundo claro; aqui so muda a tinta. */
.tp-panel .status-chip {
  color: var(--on-ink);
}

.tp-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, min(0.9rem + 1.1vw, 2.4vh), 1.4375rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.tp-panel__list {
  display: grid;
}

.tp-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.4375rem, 1.1vh, 0.625rem);
  border-top: 1px solid var(--line-on-ink);
  opacity: 0;
  animation: rise-in var(--dur-row) var(--ease-out) forwards;
  animation-delay: calc(760ms + var(--i, 0) * var(--row-stagger));
}

.tp-panel__k {
  font-size: var(--fs-micro);
  color: var(--on-ink-muted);
}

.tp-panel__v {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: calc(-0.02em * var(--track-display));
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tp-panel__seal {
  padding: clamp(0.625rem, 1.4vh, 0.875rem);
  border-radius: var(--radius-sm);
  background: var(--surface-ink-soft);
  border: 1px solid var(--line-on-ink);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   Ficha da norma — vigencia, base legal e fonte, sob o texto do grupo
   -------------------------------------------------------------------------- */
.tp-basis {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--line);
}

.tp-basis__row {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--line);
}

.tp-basis__k {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-30);
}

.tp-basis__v {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-70);
  text-wrap: pretty;
}

.tp-basis .page-link {
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Grade do grupo — tabelas a esquerda, valores de referencia a direita
   -------------------------------------------------------------------------- */
.tp-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}

.tp-tables {
  display: grid;
  /* Coluna declarada, e nao a implicita `auto`: no Safari e no Firefox a
     coluna auto crescia ate a largura do seletor de tabelas (.seg) e a
     pagina ganhava rolagem lateral no celular. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Controle segmentado — um botao por anexo, com o "polegar" branco que
   desliza por baixo do ativo (posicao alimentada pelo JS em --x / --w).
   Sem JavaScript nao existe troca, entao ele nem aparece.
   -------------------------------------------------------------------------- */
.seg {
  position: relative;
  display: flex;
  gap: 0.125rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}

.seg::-webkit-scrollbar {
  display: none;
}

.seg__btn {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--ink-50);
  transition: color var(--dur-fast) var(--ease-out);
}

.seg__btn:hover {
  color: var(--ink);
}

.seg__btn.is-active {
  color: var(--ink);
}

.seg__btn:focus-visible {
  outline-offset: -2px;
}

.seg__thumb {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: var(--w, 0px);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(var(--x, 0px));
  transition:
    transform var(--dur-base) var(--ease-out),
    width var(--dur-base) var(--ease-out);
  opacity: 0;
}

.seg.is-ready .seg__thumb {
  opacity: 1;
}

/* Um painel visivel por vez, so quando ha JavaScript para trocar. Sem ele,
   os anexos ficam um abaixo do outro e o controle nem aparece. */
.js [data-tab-panel]:not(.is-active) {
  display: none;
}

.no-js .seg {
  display: none;
}

/* --------------------------------------------------------------------------
   Tabela — a grade em si. Fio fino entre linhas, numero tabular, sem zebra:
   a leitura vem do alinhamento, nao da cor.
   -------------------------------------------------------------------------- */
.tp-table {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.tp-table__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tp-table__title {
  display: grid;
  gap: 0.125rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: calc(-0.028em * var(--track-display));
  color: var(--ink);
  text-wrap: pretty;
}

.tp-table__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-50);
}

.tp-table__count {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

/* Rede de seguranca: se uma tabela nao couber, rola no eixo horizontal em
   vez de estourar o cartao. Nas tres colunas desenhadas isso nao acontece. */
.tp-table__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.tp-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tp-table__th {
  padding: 0 0 0.625rem;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: start;
  color: var(--ink-30);
  border-bottom: 1px solid var(--line-strong);
}

.tp-table__th + .tp-table__th,
.tp-table__td + .tp-table__td {
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
}

.tp-table__th.is-end,
.tp-table__td.is-end {
  text-align: end;
}

.tp-table__td {
  padding-block: clamp(0.625rem, 0.5rem + 0.6vw, 0.875rem);
  font-size: var(--fs-sm);
  line-height: 1.4;
  vertical-align: top;
  color: var(--ink-50);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* A primeira coluna e o rotulo da linha: peso medio, tinta cheia. */
.tp-table__td--label {
  padding-right: 0.5rem;
  font-weight: 500;
  text-align: start;
  color: var(--ink);
  text-wrap: pretty;
}

/* A segunda coluna carrega o dado que se procura (a aliquota, o valor). Os
   valores nao quebram porque brl() ja usa espaco fixo; texto corrido pode. */
.tp-table__td--key {
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* Linha sob o ponteiro: tinta de fundo, sem fio vermelho (o fio vermelho e
   da razao; a tabela ganha o mesmo contraste com menos ruido). */
@media (hover: hover) {
  .tp-table__row:hover .tp-table__td {
    background: var(--surface-sunken);
  }

  .tp-table__row:hover .tp-table__td--key {
    color: var(--brand-strong);
  }
}

/* Linhas de tabela nao aceitam bem transformacao em todo navegador: a
   revelacao aqui e so de opacidade, no mesmo ritmo das outras listas. */
.tp-table__grid .reveal-item {
  transform: none;
}

.tp-table__note {
  max-width: 62ch;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-50);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Valores de referencia — os numeros de relance, num cartao afundado
   -------------------------------------------------------------------------- */
.tp-facts {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  min-width: 0;
}

.tp-facts__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-30);
}

.tp-facts__list {
  display: grid;
}

.tp-facts__row {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.625rem;
  border-top: 1px solid var(--line);
}

.tp-facts__row:last-child {
  padding-bottom: 0;
}

.tp-facts__k {
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--ink-50);
}

.tp-facts__v {
  display: grid;
  gap: 0.0625rem;
}

.tp-facts__v strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: calc(-0.024em * var(--track-display));
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tp-facts__note {
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   08 · Simulador — entrada a esquerda, resultado no bloco escuro a direita
   -------------------------------------------------------------------------- */
.sim {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}

.sim__inputs {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  min-width: 0;
}

.field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.field__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* Campo de valor: so o fio de baixo, numero grande na fonte de titulo. O
   fio vira vermelho crescendo da esquerda quando o campo ganha foco. */
.field__control {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line-strong);
}

.field__control::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.field__control:focus-within::after {
  transform: scaleX(1);
}

.field__prefix {
  flex: none;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-30);
}

.field__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0.375rem 0 0.625rem;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.field__input::placeholder {
  color: var(--ink-15);
}

.field__input:focus-visible {
  outline: none;
}

/* Dependentes: menos, numero, mais. */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}

.stepper__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.stepper__btn:hover {
  background: var(--ink);
  color: #fff;
}

.stepper__btn:active {
  transform: scale(0.94);
}

.stepper__input {
  width: 3rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.stepper__input:focus-visible {
  outline: none;
  color: var(--brand-strong);
}

.sim__note {
  max-width: 48ch;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-50);
  text-wrap: pretty;
}

/* O resultado: a mesma ficha escura das paginas de servico. */
.sim__result {
  position: relative;
  display: grid;
  gap: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
  padding: clamp(1rem, 0.8rem + 1.4vw, 1.75rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-width: 0;
}

.sim__result::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.sim__list {
  display: grid;
}

.sim__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-on-ink);
}

.sim__k {
  font-size: var(--fs-micro);
  color: var(--on-ink-muted);
}

.sim__v {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}

/* A reducao e um alivio: sai em vermelho, a cor da marca, quando existe. */
.sim__row--soft .sim__v.is-on {
  color: var(--brand);
}

.sim__total {
  display: grid;
  gap: 0.125rem;
  padding-top: 0.25rem;
}

.sim__total-k {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.sim__total-v {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  font-weight: var(--fw-display-strong);
  line-height: 1.05;
  letter-spacing: calc(-0.04em * var(--track-display));
  font-variant-numeric: tabular-nums;
}

.sim__total-note {
  font-size: var(--fs-micro);
  color: var(--on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.sim__cta {
  justify-self: start;
}

/* --------------------------------------------------------------------------
   Fechamento — o cartao existe so para dar a mesma calha das outras secoes
   -------------------------------------------------------------------------- */
.tp-closing__card {
  padding: clamp(0.625rem, 0.4rem + 1vw, 1rem);
}

/* --------------------------------------------------------------------------
   Celular. O painel de indices vira uma faixa que rola no eixo horizontal:
   cada numero e um cartao, o topo continua curto e nada empilha seis linhas.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .tp-panel__list {
    display: flex;
    gap: 0.5rem;
    margin-inline: calc(-1 * clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem));
    padding-inline: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tp-panel__list::-webkit-scrollbar {
    display: none;
  }

  .tp-panel__row {
    flex: none;
    display: grid;
    gap: 0.25rem;
    width: 9.5rem;
    padding: 0.75rem 0.875rem;
    border-top: 0;
    border-radius: 0.75rem;
    background: var(--surface-ink-soft);
    border: 1px solid var(--line-on-ink);
    scroll-snap-align: start;
  }

  .tp-panel__v {
    text-align: start;
  }

  .tp-panel__seal {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .tp-basis__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
  }

  .tp-facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .sim {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Desktop — a composicao da referencia: texto a esquerda, objeto a direita
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .tp-hero__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 4rem);
  }

  .tp-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .tp-panel {
    width: 100%;
    max-width: 25rem;
  }

  .tp-grid {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    gap: clamp(2rem, 3.4vw, 4rem);
  }

  /* Os valores de referencia acompanham a leitura das tabelas do grupo. */
  .tp-facts {
    position: sticky;
    top: calc(var(--header-h) + 6rem);
  }

  .tp-facts__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 3.4vw, 4rem);
  }
}

/* Celular estreito: a linha de apoio desce um degrau para o topo caber, e a
   tabela de tres colunas vira lista: o rotulo em cima, os dois valores
   embaixo com o nome da coluna em miniatura. Nada rola de lado. */
@media (max-width: 30rem) {
  .tp-table__grid--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tp-table__grid--stack,
  .tp-table__grid--stack tbody {
    display: block;
  }

  .tp-table__grid--stack .tp-table__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.375rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
  }

  .tp-table__grid--stack .tp-table__td {
    display: block;
    padding: 0;
    border: 0;
  }

  .tp-table__grid--stack .tp-table__td--label {
    grid-column: 1 / -1;
  }

  .tp-table__grid--stack .tp-table__td.is-end {
    text-align: start;
  }

  .tp-table__grid--stack .tp-table__td[data-k]::before {
    content: attr(data-k);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-30);
  }

  .tp-hero {
    --tp-pad: var(--card-pad);
  }

  .tp-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
}

/* Celular pequeno em retrato (320x568): sai o que e apoio (o titulo do
   painel, que o chip de vigencia ja diz) e a folga entre texto e painel
   encolhe. O topo continua inteiro na janela. */
@media (max-width: 30rem) and (max-height: 37rem) {
  .tp-hero__main {
    gap: var(--tp-gap);
  }

  .tp-panel__title {
    display: none;
  }

  .tp-panel {
    gap: 0.5rem;
  }
}

/* Janela baixa (celular deitado): duas colunas cedo, tipografia um degrau
   abaixo e descarte do que e acessorio, como no topo das paginas de servico. */
@media (min-width: 40rem) and (max-height: 34rem) {
  .tp-hero {
    --fs-display: clamp(1.5rem, min(0.9rem + 5vw, 7.4vh), 3.25rem);
    --tp-pad: clamp(0.75rem, 3.1vh, 1.5rem);
  }

  .tp-hero__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 1.5rem;
  }

  .tp-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .tp-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  /* Quatro indices ja dizem do que se trata; os outros dois estao logo
     abaixo, nas tabelas. */
  .tp-panel__title,
  .tp-panel__seal,
  .tp-panel__row:nth-child(n + 5) {
    display: none;
  }

  .tp-panel {
    width: min(100%, 22rem);
    gap: 0.5rem;
  }

  /* Deitado o painel volta a ser lista vertical, mais compacta. */
  .tp-panel__list {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .tp-panel__row {
    display: flex;
    width: auto;
    padding: 0.3125rem 0;
    border: 0;
    border-top: 1px solid var(--line-on-ink);
    border-radius: 0;
    background: transparent;
  }

  .tp-panel__v {
    text-align: right;
  }

  .tp-hero__actions {
    flex-wrap: nowrap;
  }
}

@media (max-height: 30rem) {
  .tp-hero__lead {
    display: none;
  }
}

/* Celular pequeno deitado (568x320): nao ha altura para o painel ao lado
   nem embaixo do texto. Fica a mensagem e a acao, como no topo das paginas
   de servico; o conteudo do painel esta logo abaixo, na propria pagina. */
@media (max-width: 39.99rem) and (max-height: 34rem) {
  .tp-hero__visual {
    display: none;
  }
}