/* ==========================================================================
   Clube de Ofertas — Nacional Inn Hotéis
   Design system extraído do Figma "Ofertas Flexiveis" — nome do arquivo (frame 2:402 "LP Oferta")
   via Dev Mode MCP + DESIGN.md institucional.
   ========================================================================== */

:root {
  /* Verdes */
  --verde: #019b3c;           /* CTA / verde da LP (medido no Figma) */
  --verde-hover: #017f31;
  --verde-footer: #2fa736;    /* faixa do rodapé */
  --verde-ni: #009727;        /* institucional DESIGN.md */
  --verde-escuro: #016b2a;
  /* Design System Nacional Inn (07/10/2026). Branco sobre --verde (#019b3c) dá 3,65:1 e
     reprova AA em texto de 16px. --acao é o hover que a loja já usava (5,15:1) e --acao-h
     o --verde-escuro de sempre: nenhuma cor nova. Só onde o verde era TEXTO pequeno ou
     FUNDO de texto pequeno (botão, links, chips, etapas, dia de chegada, topo do
     voucher); ícone, borda, barra e número grande seguem no --verde.
     --borda-controle: o #dddddd dava 1,3:1 e o campo do checkout sumia; mínimo 3:1. */
  --acao: #017f31;
  --acao-h: #016b2a;
  --borda-controle: #949494;

  /* Acentos dos selos (medidos no Figma) */
  --amarelo: #fbda5b;         /* pill de diárias */
  --ciano: #a4ffff;           /* pill de ocupação */
  --verde-claro: #cbffc7;     /* badge de destino / política CHD */
  --creme: #fbf8dc;           /* tags de condição */

  /* Neutros */
  --tinta: #16181a;           /* títulos (near-black: DESIGN.md proíbe preto puro) */
  --corpo: #54565a;           /* texto corrido */
  --cinza-titulo: #6b6c6e;
  --linha: #dddddd;
  --fundo: #f7f7f7;
  --fundo-campo: #f1f1f1;
  --branco: #ffffff;

  /* Estados */
  --alerta: #b8860b;
  --erro: #c0392b;
  --info: #1f6feb;

  /* Forma */
  --r-pill: 999px;
  --r-btn: 8px;
  --r-img: 12px;
  --r-card: 16px;
  --sombra-card: 0 40px 30px rgba(0, 0, 0, 0.05);
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Medida */
  --container: 1262px;

  /* Tipografia */
  --display: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --texto: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }
input, select, textarea { font-family: inherit; font-size: 14px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Faixa superior + topo ---------- */

.faixa-topo {
  background: var(--tinta);
  color: var(--branco);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  gap: 8px;
}

.topo {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 60px; width: auto; }
@media (max-width: 720px) { .logo img { height: 44px; } }

.nav-topo { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.nav-topo a:hover { color: var(--acao); }

.btn-conta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  background: var(--branco);
  color: var(--tinta);
}
.btn-conta:hover { border-color: var(--acao); color: var(--acao); }

/* ---------- Hero: banner de campanha ---------- */

.hero { background: #1fae9d; line-height: 0; }
.hero img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

/* ---------- Barra de filtros ---------- */

.filtros-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: 18px 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.filtros {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cinza-titulo);
}
.campo select, .campo input {
  height: 44px;
  min-width: 190px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-btn);
  background: var(--branco);
  color: var(--tinta);
  font-size: 14px;
}
/* A seta nativa do select ficava colada na borda direita (Chrome e Safari no desktop).
   Seta própria, com o mesmo respiro da esquerda — pedido do André em 07/10/2026. */
.campo select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 35px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2354565a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
}
.campo select:focus, .campo input:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
  border-color: var(--verde);
}
.filtros .resultado {
  margin-left: auto;
  font-size: 13px;
  color: var(--corpo);
  padding-bottom: 12px;
}
.filtros .resultado b { color: var(--tinta); }

.btn-limpar {
  height: 44px;
  padding: 0 18px;
  background: var(--fundo-campo);
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 500;
  color: var(--corpo);
}
.btn-limpar:hover { background: #e6e6e6; }

/* ---------- Filtro do celular: barra, painel e etiquetas ----------
   O padrão de Airbnb, Booking e Hurb, aprovado pelo André em 02/10/2026. Só existe
   abaixo de 720 px e só quando o script marca `.filtro-mobile` — sem JS, o celular
   continua nos selects, que funcionam. No desktop nada disto aparece. */
.filtro-barra { display: none; }

.chip {
  flex: none;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  background: var(--branco);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--branco); }
.chip small { font-weight: 500; color: var(--cinza-titulo); margin-left: 3px; }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.85); }
/* Apagado, não escondido: o mês existe, só não combina com o resto da escolha. */
.chip:disabled { opacity: 0.38; cursor: not-allowed; }
.chip:focus-visible, .btn-filtro:focus-visible, .folha-opcao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.filtro-meses {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 2px;
  scroll-snap-type: x proximity;
  /* Sem isto o encaixe alinha o chip à borda da ÁREA DE ROLAGEM, que ignora o padding:
     a fileira nascia rolada 16 px e "Qualquer mês" ficava colado na borda da tela,
     desalinhado do "Filtros" logo abaixo. */
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.filtro-meses::-webkit-scrollbar { display: none; }
.filtro-meses .chip { scroll-snap-align: start; }

.filtro-acoes { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; }
.btn-filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: var(--r-pill);
  background: var(--branco);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
}
.btn-filtro.ligado { border-color: var(--verde); color: var(--verde-escuro); background: var(--verde-claro); }
.filtro-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--acao);
  color: var(--branco);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filtro-badge[hidden] { display: none; }
.filtro-conta { margin-left: auto; font-size: 13px; color: var(--corpo); white-space: nowrap; }
.filtro-conta b { color: var(--tinta); }

.filtro-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px 0; }
.filtro-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px 0 12px;
  border-radius: var(--r-pill);
  background: var(--verde-claro);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
}
.filtro-tag span { font-size: 17px; line-height: 1; color: var(--verde-escuro); }
.filtro-tag-limpar { font-size: 13px; font-weight: 600; color: var(--acao); text-decoration: underline; padding: 6px 4px; }

/* O painel: <dialog> nativo, que traz foco preso, Esc e fundo escurecido de graça.
   Fechado por padrão; só o celular o abre (ver o bloco de 720 px abaixo). */
.folha {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--branco);
  color: var(--tinta);
  flex-direction: column;
}
.folha::backdrop { background: rgba(10, 12, 12, 0.48); }
.folha-pega { width: 40px; height: 5px; border-radius: 3px; background: #d4d4d4; margin: 9px auto 0; }
.folha-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 14px;
  border-bottom: 1px solid #efefef;
}
.folha-cab h2 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0; }
.folha-fechar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fundo);
  font-size: 17px;
  color: var(--tinta);
}
.folha-corpo { flex: 1; overflow-y: auto; padding: 4px 20px 8px; overscroll-behavior: contain; }
.folha-grupo { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid #f0f0f0; min-width: 0; }
.folha-grupo:last-child { border-bottom: 0; }
.folha-grupo legend { font-family: var(--display); font-size: 15px; font-weight: 700; padding: 0; margin-bottom: 4px; }
.folha-grupo p { font-size: 12.5px; color: var(--cinza-titulo); margin: 0 0 12px; }
.folha-grupo legend + .chips { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Rodapé fixo do painel, com respiro para a barra de gestos do iPhone. */
.folha-pe {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  background: var(--branco);
}
.folha-limpar { font-size: 14px; font-weight: 600; color: var(--acao); text-decoration: underline; padding: 8px 0; }
.folha-ver { flex: 1; min-height: 52px; font-size: 16px; }
.folha-opcoes { display: flex; flex-direction: column; padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); }
.folha-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: var(--tinta);
  text-align: left;
}
.folha-opcao[aria-pressed="true"] { font-weight: 700; color: var(--verde-escuro); }
.folha-opcao[aria-pressed="true"]::after { content: "✓"; color: var(--verde); font-weight: 700; }

@media (max-width: 720px) {
  /* A barra inteira é o que fica presa no topo — não mais o bloco de 460 px. */
  .faixa-topo { height: 36px; font-size: 12px; white-space: nowrap; gap: 6px; }
  .faixa-topo .faixa-marca { display: none; }
  .filtros-wrap.filtro-mobile { padding: 12px 0 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); }
  .filtros-wrap.filtro-mobile .filtros { display: none; }
  .filtros-wrap.filtro-mobile .filtro-barra { display: block; }
  .folha[open] { display: flex; }
  /* Painel aberto: a página atrás não rola junto com o dedo. */
  .folha-aberta { overflow: hidden; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .folha[open] { animation: folha-sobe 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .folha[open]::backdrop { animation: folha-veu 0.24s ease-out; }
}
@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes folha-veu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Seções ---------- */

.secao { padding: 72px 0 0; }
.secao-titulo {
  max-width: 746px;
  margin: 0 auto 48px;
  text-align: center;
}
.secao-titulo h1,
.secao-titulo h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.4;
  margin: 0;
  color: var(--tinta);
}
.secao-titulo h1 b,
.secao-titulo h2 b { font-weight: 700; }
.secao-titulo p {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  color: var(--acao);
}

/* ---------- Grid de ofertas ---------- */

.grid-ofertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  padding-bottom: 72px;
}

.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 40px rgba(0, 0, 0, 0.09);
}

.card-foto { position: relative; }
.card-foto img {
  width: 100%;
  aspect-ratio: 366 / 226;
  object-fit: cover;
  border-radius: var(--r-img);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-btn);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}
.pill-destino {
  position: absolute;
  top: 6px;
  left: 8px;
  background: var(--verde-claro);
  font-size: 12px;
}
.pill-linha {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}
.pill-desconto {
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--amarelo);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.preco .rotulo s { color: var(--cinza-titulo); }
.pill-diarias { background: var(--amarelo); }
.pill-ocupacao { background: var(--ciano); }
.pill-chd { background: var(--verde-claro); font-size: 12px; font-weight: 600; }
.tag { background: var(--creme); font-size: 12px; font-weight: 500; }

.card-corpo { display: flex; flex-direction: column; gap: 16px; }
.card-cabeca { display: flex; flex-direction: column; gap: 5px; }
.card-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  margin: 0;
  color: var(--tinta);
}
/* o hotel é a linha de apoio: o que distingue os cards é o nome do pacote */
.card-hotel {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--corpo);
  display: flex;
  align-items: center;
  gap: 7px;
}
.card-hotel::before {
  content: "";
  width: 13px; height: 13px; flex: none;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: inset 0 0 0 3px var(--verde);
}
.divisor { height: 1px; background: var(--linha); border: 0; margin: 0; }

.preco-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.preco .rotulo { font-size: 12px; line-height: 1.4; color: var(--tinta); }
.preco .valor {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
}
.preco .valor .moeda { font-size: 16px; }
.preco .valor .numero { font-size: 24px; letter-spacing: -0.5px; }
/* `margin-top` porque a linha nascia colada no número grande, que tem line-height
   apertado. E "(com juros)" NÃO é letra miúda escondendo informação ruim: é o oposto —
   sem ela, "em até 10x" ao lado de um preço grande é lido como sem juros, que foi o que
   o site prometeu errado até ontem. */
.preco-parcelamento {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cinza-titulo);
}
.juros { font-size: 10px; opacity: 0.85; }
.preco-total { text-align: right; font-size: 11px; line-height: 1.4; }
.preco-total b { display: block; font-size: 12px; }
.preco-divisor { width: 1px; height: 34px; background: var(--linha); }

/* A linha do Pix repete o verde da marca porque é a boa notícia do bloco de preço.
   Fica fora do .preco-linha para não disputar a linha de base com o total por pessoa. */
.preco-pix {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--verde-claro);
  font-size: 12px;
  line-height: 1.4;
  color: var(--tinta);
}
.preco-pix b { font-weight: 700; }
.preco-pix span { color: var(--cinza-titulo); }
.icone-pix { flex: none; color: var(--verde); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 43px;
  padding: 0 16px;
  border-radius: var(--r-btn);
  background: var(--acao);
  color: var(--branco);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.16px;
}
.btn:hover { background: var(--acao-h); }
.btn:disabled { background: #c3c8c4; cursor: not-allowed; }
.btn-bloco { width: 100%; }
.btn-secundario {
  background: var(--branco);
  color: var(--acao);
  border: 1.5px solid var(--acao);
}
.btn-secundario:hover { background: #f0faf3; }
/* R19: os dois caminhos da recusa, empilhados — o principal em cima. */
.retentativa-acoes { display: grid; gap: 12px; }
/* C15: os hóspedes na reserva confirmada do voucher. */
.voucher-hospedes { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--corpo); }
/* Para quem não achou o e-mail do voucher: guardar no próprio WhatsApp. */
.guardar-voucher { margin: 16px 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.guardar-voucher p { margin: 0; font-size: 14px; color: var(--corpo); }
.guardar-voucher .btn { gap: 8px; }
.btn-neutro { background: var(--fundo-campo); color: var(--corpo); }
.btn-neutro:hover { background: #e6e6e6; }
.btn-pequeno { height: 36px; font-size: 14px; padding: 0 14px; }

.card-rodape { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.card-nota { font-size: 11px; line-height: 1.4; text-align: center; color: var(--corpo); }
.link-detalhes {
  font-size: 13px;
  font-weight: 600;
  color: var(--acao);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
}

.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--corpo);
  border: 1px dashed var(--linha);
  border-radius: var(--r-card);
}
.vazio b { display: block; font-family: var(--display); font-size: 20px; color: var(--tinta); margin-bottom: 8px; }

/* ---------- Estoque ---------- */

.estoque { font-size: 11px; color: var(--corpo); display: flex; align-items: center; gap: 6px; }
.estoque .barra { flex: 1; height: 4px; background: var(--fundo-campo); border-radius: 2px; overflow: hidden; }
.estoque .barra i { display: block; height: 100%; background: var(--verde); }
.estoque.baixo .barra i { background: #e07b39; }
.estoque.baixo { color: #b3561a; font-weight: 600; }

/* ---------- Modal ---------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-fundo.aberto { display: flex; }
.modal {
  background: var(--branco);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 940px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.modal-topo { position: relative; }
.modal-topo img { width: 100%; height: 260px; object-fit: cover; }
.modal-fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  font-size: 20px;
  line-height: 1;
  color: var(--tinta);
}
.modal-corpo { padding: 28px 32px 32px; }
.modal-corpo h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.modal-local { font-size: 14px; color: var(--corpo); margin-bottom: 20px; }

.ficha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 24px;
}
.ficha div {
  background: var(--fundo);
  border-radius: var(--r-btn);
  padding: 12px 14px;
}
.ficha dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cinza-titulo); margin-bottom: 4px; }
.ficha dd { margin: 0; font-size: 14px; font-weight: 600; }

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff8e1;
  border: 1px solid #f2e2a8;
  border-radius: var(--r-btn);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b5518;
  margin-bottom: 24px;
}
.aviso strong { display: block; margin-bottom: 2px; color: #4d3d10; }

.acordeao { border-top: 1px solid var(--linha); }
.acordeao details { border-bottom: 1px solid var(--linha); }
.acordeao summary {
  cursor: pointer;
  padding: 16px 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; font-size: 20px; color: var(--verde); font-weight: 400; }
.acordeao details[open] summary::after { content: "–"; }
.acordeao .conteudo {
  padding: 0 4px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--corpo);
}

.modal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  flex-wrap: wrap;
}

/* ---------- Checkout ---------- */

.checkout-topo {
  border-bottom: 1px solid var(--linha);
  padding: 18px 0;
}
.checkout-topo .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.passos { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #9a9c9e; }
.passos .passo { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.passos .passo .bolha {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fundo-campo); color: #9a9c9e;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.passos .passo.ativo { color: var(--acao); font-weight: 600; }
.passos .passo.ativo .bolha { background: var(--acao); color: var(--branco); }
.passos .passo.feito { color: var(--acao); }
.passos .passo.feito .bolha { background: var(--verde-claro); color: var(--verde-escuro); }
.passos .seta { color: #cfd2d4; }

.selo-seguro {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--corpo);
  border: 1px solid var(--linha); border-radius: var(--r-btn);
  padding: 6px 12px;
}
.selo-seguro b { color: var(--acao); }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  padding: 40px 0 80px;
  align-items: start;
}

.painel {
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  padding: 32px;
  background: var(--branco);
}
.painel h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 6px;
}
.painel .subtitulo { color: var(--corpo); font-size: 14px; margin: 0 0 28px; }

/* minmax(0,1fr) + width:100% impedem que a largura intrínseca do input estufe a coluna */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .largo { grid-column: 1 / -1; }
.form-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-campo label { font-size: 13px; font-weight: 500; color: var(--corpo); }
.form-campo input, .form-campo select, .form-campo textarea {
  width: 100%;
  max-width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--borda-controle);
  border-radius: var(--r-btn);
  background: var(--branco);
}
.form-campo textarea { height: auto; padding: 12px 14px; }
.form-campo input:focus, .form-campo select:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
}
.form-campo .erro-msg { font-size: 12px; color: var(--erro); display: none; }
.form-campo.invalido input, .form-campo.invalido select { border-color: var(--erro); }
.form-campo.invalido .erro-msg { display: block; }
.form-campo .dica { font-size: 11.5px; color: var(--cinza-titulo); }

.metodos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.metodo {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-btn);
  padding: 16px 18px;
  cursor: pointer;
}
.metodo:hover { border-color: var(--verde); }
.metodo.ativo { border-color: var(--verde); background: #f4fbf6; box-shadow: inset 0 0 0 1px var(--verde); }
.metodo input { accent-color: var(--verde); width: 18px; height: 18px; }
.metodo .nome { font-weight: 600; font-size: 15px; }
.metodo .desc { font-size: 12px; color: var(--corpo); }
.metodo .icone {
  width: 40px; height: 28px; border-radius: 4px;
  background: var(--fundo-campo);
  display: grid; place-items: center; font-size: 15px;
}

.brick {
  border: 1px dashed #c9cdd0;
  border-radius: var(--r-btn);
  padding: 20px;
  background: #fbfcfc;
  margin-bottom: 22px;
  /* Altura mínima acrescentada à definição aprovada, em vez de redefinida no fim do
     arquivo: o Brick monta num iframe, e sem reservar espaço a página pula quando ele
     carrega — é o CLS, uma das três Core Web Vitals. */
  min-height: 300px;
}
.brick-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cinza-titulo);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brick-rotulo b { color: var(--info); }

.aceites { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 26px; }
.aceite {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--corpo);
}
.aceite input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--verde); flex: none; }
.aceite a { color: var(--acao); text-decoration: underline; }
.aceite.pendente { color: var(--erro); }

/* Resumo lateral */
.resumo {
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  overflow: hidden;
  position: sticky;
  top: 24px;
}
.resumo-topo { background: #fdf0e6; padding: 18px 20px; }
.resumo-topo .rot { font-size: 13px; color: var(--corpo); }
.resumo-topo .nome { font-family: var(--display); font-weight: 600; font-size: 17px; color: #d97a2b; }
.resumo-faixa {
  background: var(--acao);
  color: var(--branco);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.resumo-faixa a { text-decoration: underline; font-size: 13px; }
.resumo-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.resumo-item .chave { color: var(--corpo); font-size: 13px; }
.resumo-item .valor { font-weight: 600; text-align: right; }
.resumo-total { padding: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.resumo-total .rot { font-family: var(--display); font-weight: 600; font-size: 17px; }
.resumo-total .num { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--verde); }
.resumo-desconto { margin: -12px 0 0; padding: 0 20px 16px; font-size: 12px; color: var(--acao); line-height: 1.5; }
.resumo-nota { padding: 0 20px 20px; font-size: 11.5px; color: var(--corpo); line-height: 1.5; }

/* ---------- Confirmação ---------- */

.sucesso { text-align: center; padding: 12px 0 8px; }
.sucesso .marca-ok {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-escuro);
  display: grid; place-items: center; margin: 0 auto 20px;
  font-size: 34px;
}
.sucesso h2 { font-size: 28px; margin-bottom: 10px; }

.voucher {
  border: 2px dashed var(--verde);
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
  background: var(--branco);
}
.voucher-topo {
  background: var(--acao);
  color: var(--branco);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.voucher-topo .cod {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* Depois da grade de três colunas, o corpo guarda só o que é longo — regulamento e
   aceites —, e a linha o separa do que se lê de relance. */
.voucher-corpo { padding: 24px; border-top: 1px solid var(--linha); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-emitido { background: #fff4d6; color: #8a6410; }
.status-analise { background: #e2eefc; color: #17518f; }
.status-recusado { background: #fde8e6; color: #a33227; }
.status-conciliacao { background: #f0e8fb; color: #5b3a94; }
.status-agendando { background: #e2eefc; color: #17518f; }
.status-reservado { background: var(--verde-claro); color: var(--verde-escuro); }
.status-utilizado { background: var(--fundo-campo); color: var(--corpo); }
.status-cancelado { background: #fde8e6; color: #a33227; }

/* ---------- Área do cliente / back-office (layout com menu) ---------- */

/* minmax(0,1fr) impede que tabela larga ou input estufe a coluna e crie rolagem horizontal na página */
.app-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0 80px;
  align-items: start;
}
.conteudo-app { min-width: 0; }

.menu-lateral {
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  overflow: hidden;
  position: sticky;
  top: 24px;
}
.menu-perfil {
  padding: 24px 20px;
  text-align: center;
  border-bottom: 1px solid var(--linha);
}
.menu-perfil .avatar {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-escuro);
  display: grid; place-items: center; margin: 0 auto 12px;
  font-family: var(--display); font-weight: 700; font-size: 26px;
}
.menu-perfil .nome { font-family: var(--display); font-weight: 600; font-size: 17px; }
.menu-perfil .desde { font-size: 12px; color: var(--corpo); margin-top: 3px; }

.menu-lateral nav { display: flex; flex-direction: column; padding: 8px 0; }
.menu-lateral nav button {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  background: none;
  font-size: 14.5px;
  color: var(--tinta);
  text-align: left;
  border-left: 3px solid transparent;
}
.menu-lateral nav button:hover { background: var(--fundo); }
.menu-lateral nav button.ativo {
  background: #f4fbf6;
  color: var(--acao);
  font-weight: 600;
  border-left-color: var(--acao);
}

.conteudo-app > header { margin-bottom: 24px; }
.conteudo-app > header .sup { font-size: 13px; color: var(--corpo); }
.conteudo-app > header h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  margin: 4px 0 0;
}

.aba { display: none; }
.aba.ativa { display: block; }

/* ---------- Tabelas ---------- */

.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-card); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  background: var(--acao);
  color: var(--branco);
  text-align: left;
  padding: 13px 14px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
tbody td { padding: 13px 14px; border-bottom: 1px solid #eee; vertical-align: middle; white-space: nowrap; }
tbody td.livre { white-space: normal; min-width: 190px; max-width: 260px; }
tbody tr:nth-child(even) { background: #fafbfa; }
tbody tr:hover { background: #f4fbf6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cod-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* ---------- Estatísticas ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi {
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  padding: 20px;
  background: var(--branco);
}
.kpi .rot { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cinza-titulo); }
.kpi .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  color: var(--verde);
  margin: 6px 0 2px;
  line-height: 1;
}
.kpi .sub { font-size: 12px; color: var(--corpo); }

/* ---------- Login admin ---------- */

.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-ni) 55%, #007a20 100%);
  padding: 24px;
}
.login-caixa {
  background: var(--branco);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}
.login-caixa h1 { font-family: var(--display); font-size: 24px; margin: 0 0 6px; }
.login-caixa p.sub { color: var(--corpo); font-size: 14px; margin: 0 0 26px; }
.perfil-opcao {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--linha); border-radius: var(--r-btn);
  padding: 16px; cursor: pointer; margin-bottom: 12px;
}
.perfil-opcao:hover { border-color: var(--verde); }
.perfil-opcao.ativo { border-color: var(--verde); background: #f4fbf6; box-shadow: inset 0 0 0 1px var(--verde); }
.perfil-opcao input { margin-top: 3px; accent-color: var(--verde); flex: none; }
.perfil-opcao > span { display: block; }
.perfil-opcao .nome { display: block; font-weight: 600; font-size: 15px; }
.perfil-opcao .desc { display: block; font-size: 12.5px; color: var(--corpo); line-height: 1.5; margin-top: 3px; }

/* ---------- Páginas legais ---------- */

/* Coluna estreita de propósito: são páginas para LER, e linha de 100 caracteres é o que
   faz alguém desistir de ler contrato. ~68ch é a medida confortável. */
.legal { max-width: 68ch; margin: 0 auto; padding: 44px 0 72px; }
/* Título à esquerda, alinhado com a prosa e com a data da revisão. O .secao-titulo da
   vitrine é centralizado — correto para uma seção de vitrine, errado para um documento
   que se lê de cima a baixo em coluna estreita. */
.legal h1 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  margin: 0 0 10px;
}
.legal h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  margin: 38px 0 12px;
}
.legal p { margin: 0 0 14px; line-height: 1.7; }
.legal ul { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--acao); }
.legal-data {
  font-size: 13px;
  color: var(--corpo);
  opacity: 0.8;
  margin: 0 0 8px;
}
.legal-ver-tambem {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
}

/* ---------- Como funciona: as quatro etapas ---------- */

.etapas {
  list-style: none;
  margin: 0;
  padding: 0 0 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: etapa;
}
.etapa {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
/* Icone grande, que e o que se ve antes de ler. O numero fica pequeno ao lado dele:
   quem entende pelo desenho nao precisa contar, e quem precisa da ordem a tem. */
.etapa-icone {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  display: grid;
  place-items: center;
}
.etapa-icone svg { width: 46px; height: 46px; display: block; }
.etapa-numero {
  position: absolute;
  top: 28px;
  right: 24px;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--linha);
}
.etapa h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 4px 0 0;
  color: var(--tinta);
}
.etapa p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--corpo); }

/* ---------- Bandeiras de cartão ---------- */

/* Placa branca com o logo oficial da bandeira, servido por nós.
   Os arquivos vêm do próprio Mercado Pago (/v1/payment_methods devolve o logo de cada
   bandeira habilitada na conta), e não de um redesenho à mão: bandeira redesenhada fica
   ruim de perto e é uso indevido de marca de terceiro. */
.bandeira-img {
  background: var(--branco);
  border-radius: 5px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 32px;
}
.bandeira-img img { height: 18px; width: auto; display: block; }

/* Tabela dentro de página de texto (guia de testes). Só aqui: a vitrine não tem tabela,
   e um estilo global de <table> pegaria as do back-office, que já têm o seu. */
.legal table { border-collapse: collapse; width: 100%; min-width: 420px; }
.legal th, .legal td {
  padding: 11px 14px; text-align: left; font-size: 14.5px; vertical-align: top;
  border-bottom: 1px solid var(--linha);
}
.legal thead th {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza-titulo);
  background: var(--fundo);
}
.legal tbody tr:last-child td { border-bottom: none; }
.legal .tabela-wrap { margin: 18px 0 20px; }
.legal .aviso { margin: 0 0 12px; }
.legal ol, .legal ul { margin: 0 0 18px; padding-left: 22px; line-height: 1.7; }
.legal ol li, .legal ul li { margin-bottom: 10px; }

.selo-teste {
  display: inline-block; font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px;
  border-radius: var(--r-btn); background: var(--verde-claro); color: var(--verde-escuro);
  white-space: nowrap;
}
.selo-teste-nao { background: transparent; color: var(--erro); border: 1px solid currentColor; }

/* ---------- Rodapé ---------- */


.rodape { background: var(--verde-footer); color: var(--branco); padding: 56px 0 0; margin-top: 40px; }
.newsletter {
  background: var(--branco);
  border-radius: var(--r-btn);
  padding: 16px;
  display: flex;
  gap: 12px;
  max-width: 676px;
  margin: 0 auto 44px;
}
.newsletter input {
  flex: 1; height: 40px; padding: 0 14px;
  background: var(--fundo-campo); border: 0; border-radius: 6px;
}
.newsletter button { height: 40px; padding: 0 20px; background: var(--acao); color: var(--branco); border-radius: 6px; font-weight: 600; }
.rodape h2 {
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.35;
  margin: 0 0 28px;
}
.rodape-colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* padding-top/bottom, e NUNCA o atalho `padding: 36px 0`.
     Este elemento também carrega a classe .container, que dá o recuo lateral de 24px.
     O atalho zerava esse recuo, e os títulos das colunas encostavam na borda enquanto o
     logo, num container sem atalho, ficava recuado — desalinhamento visível no celular. */
  padding-top: 36px;
  padding-bottom: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.rodape-colunas h3 { font-size: 14px; margin: 0 0 16px; font-weight: 700; }
.rodape-colunas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.rodape-colunas li { display: flex; gap: 10px; align-items: center; }
.rodape-colunas li::before { content: ""; width: 8px; height: 8px; background: var(--branco); flex: none; }
.rodape-colunas a { color: var(--branco); text-decoration: none; }
.rodape-colunas a:hover { text-decoration: underline; }

/* Topo do rodapé: identidade da rede à esquerda, selos à direita.
   Os selos ganham fundo translúcido porque são brancos sobre verde — sem a placa
   eles se misturam à faixa e deixam de parecer selo. */
.rodape-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 34px;
}
.rodape-identidade { max-width: 42ch; }
.rodape-identidade p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
.rodape-selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.rodape-selos li {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r-btn);
  padding: 12px 20px;
  display: flex;
  align-items: center;
}
.rodape-selos img { height: 46px; width: auto; display: block; }

.rodape-contato { font-weight: 600; }
.rodape-horario { margin: 12px 0 0; font-size: 13px; opacity: 0.9; }
.rodape-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.55; opacity: 0.9; }

/* Pagamento e segurança: o que todo e-commerce mostra antes do rodapé legal. */
.rodape-pagamento {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  /* padding-top/bottom pelo mesmo motivo de .rodape-colunas: o atalho zeraria o recuo
     lateral que vem da classe .container neste mesmo elemento. */
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.rodape-pagamento h3 { font-size: 14px; margin: 0 0 16px; font-weight: 700; }
.rodape-bandeiras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }

/* Placa de bandeira em texto, e não logo.
   É deliberado enquanto não houver os SVG oficiais: bandeira redesenhada à mão fica
   ruim de perto e é uso indevido de marca de terceiro. A troca por <img> depois é
   mecânica — o item da lista já é a placa. */
.bandeira {
  background: var(--branco);
  color: var(--corpo);
  border-radius: 5px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--display);
  line-height: 1;
}
.bandeira-pix { background: var(--verde-claro); color: var(--verde-escuro); }

/* Faixa das marcas: sangra na largura toda, com o container por dentro. */
.rodape-faixa-marcas {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.07);
  padding: 30px 0 34px;
}
.rodape-faixa-marcas h3 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 22px;
  text-align: center;
  opacity: 0.85;
}
/* Flex, e não grid: são 14 marcas, e o número de colunas do grid quase nunca divide 14.
   A fileira incompleta ficava encostada à esquerda com dois buracos à direita. No flex
   com justify-content:center, toda fileira — inclusive a última — fica centrada. */
.rodape-marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 26px;
}
.rodape-marcas li { flex: 0 0 126px; display: flex; justify-content: center; }
.rodape-marcas img { width: 100%; height: auto; display: block; opacity: 0.92; }

.rodape-legal { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.rodape-assinatura {
  display: flex;
  justify-content: center;
  padding: 8px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.rodape-assinatura img { height: 42px; width: auto; opacity: 0.95; padding-top: 26px; }

.rodape-base {
  background: var(--branco);
  color: var(--corpo);
  font-size: 13px;
  padding: 16px 0;
}
.rodape-base .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

/* ---------- Voucher: foto, regras e aceites ---------- */

/* Três colunas: o que você comprou · dados do voucher · como usar.

   A foto deixou de ocupar a largura inteira (~1210 × 750 px no desktop, a tela toda antes
   de qualquer informação) e passou a morar na primeira coluna. Lá ela é um cartão dentro
   de uma área com respiro, e por isso ganhou canto arredondado próprio — antes ficava
   colada na faixa verde e quem arredondava era o .voucher.

   3:2 e não o 366/226 do card da vitrine: numa coluna estreita a foto mais alta
   reconhece melhor o hotel, e é o recorte que as variantes do pipeline já produzem. */
/* `minmax(0, 1fr)` e não `1fr`, em TODAS as larguras. `1fr` é `minmax(auto, 1fr)`: a
   coluna não encolhe abaixo do conteúdo mais largo dela. No celular isso fazia a grade
   ter 347 px dentro de um voucher de 275 úteis, e o `overflow: hidden` do .voucher
   cortava o texto à direita. O headless do Chrome não mostrava: ele impõe 500 px de
   largura mínima. Só apareceu medindo em 375 px de verdade. */
.voucher-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
}
@media (min-width: 720px) {
  .voucher-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Duas colunas: o próximo passo ocupa a linha inteira embaixo, em vez de espremer
     botões de canal numa terceira coluna de 240 px. */
  .voucher-grade .voucher-uso { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .voucher-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 32px; }
  .voucher-grade .voucher-uso { grid-column: auto; }
}

.voucher-produto { display: flex; flex-direction: column; gap: 10px; }
.voucher-produto .card-titulo { margin-top: 6px; }
.voucher-produto .oferta-condicoes { margin: 4px 0 0; }

.voucher-foto { line-height: 0; }
.voucher-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-img);
}

/* A ficha numa coluna estreita: o rótulo cede espaço ao valor, que é o que se lê.
   `table-layout: fixed` faz a tabela obedecer à coluna; no modo automático é o conteúdo
   que manda, e uma célula larga arrasta a tabela inteira para fora. */
.voucher-dados .ficha-dados { margin-top: 0; font-size: 14px; table-layout: fixed; }
.voucher-dados .ficha-dados th { width: 46%; padding-right: 12px; }
/* O id do pedido tem 36 caracteres sem espaço, e `.cod-mono` é `nowrap` no resto da
   loja — certo para código curto, que não deve partir. Aqui o `nowrap` herdado anulava
   qualquer `overflow-wrap`, e a célula ficava com 271 px: a largura exata do id. */
.voucher-id { white-space: normal; word-break: break-all; font-size: 12.5px; }

/* O próximo passo é a única área de AÇÃO do voucher, e o fundo diferente é o que a separa
   das duas colunas de leitura. */
.voucher-uso {
  background: var(--fundo);
  border-radius: var(--r-img);
  padding: 20px;
  align-self: start;
}
.voucher-uso p { margin: 0 0 10px; color: var(--corpo); line-height: 1.6; font-size: 14.5px; }
/* A .card-nota é centralizada no resto da loja; aqui ela continua a instrução do
   parágrafo de cima, e centralizada parecia uma nota solta. */
.voucher-uso .card-nota { text-align: left; }
/* O código é ditado por telefone: quebrado em "CO-" / "2026-TESTE1" ele vira duas
   coisas para a pessoa ler em voz alta. */
.voucher-uso .cod-mono { white-space: nowrap; }
.voucher-uso .canais-central { margin-top: 16px; }

.voucher-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.voucher-datas dt { font-size: 12px; font-weight: 600; color: var(--cinza-titulo); text-transform: uppercase; letter-spacing: 0.5px; }
.voucher-datas dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; color: var(--tinta); font-size: 15px; }

.voucher-regras, .voucher-aceites { margin-top: 24px; }
.voucher-corpo > :first-child { margin-top: 0; }
.voucher-dados h3, .voucher-uso h3, .voucher-regras h3, .voucher-aceites h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 10px;
}

/* <details> nativo em vez de acordeão em JS: a página do voucher precisa funcionar em
   qualquer navegador e em e-mail salvo como PDF, e o conteúdo tem de estar no HTML mesmo
   fechado — é o regulamento que o hóspede aceitou. */
.regra-bloco {
  border: 1px solid var(--linha);
  border-radius: var(--r-btn);
  margin-bottom: 8px;
  background: var(--branco);
}
.regra-bloco summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  list-style: none;
}
.regra-bloco summary::-webkit-details-marker { display: none; }
.regra-bloco summary::after { content: "+"; float: right; color: var(--verde); font-weight: 700; }
.regra-bloco[open] summary::after { content: "–"; }
.regra-bloco summary:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.regra-bloco ul { margin: 0; padding: 0 16px 14px 32px; }
.regra-bloco li { font-size: 13.5px; line-height: 1.6; color: var(--corpo); margin-bottom: 6px; }

.voucher-aceites ul { margin: 0 0 10px; padding-left: 20px; }
.voucher-aceites li { font-size: 13.5px; line-height: 1.6; color: var(--corpo); margin-bottom: 6px; }
.voucher-aceites li::marker { color: var(--verde); }

/* ---------- Toast ---------- */


.toast-area {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--tinta);
  color: var(--branco);
  padding: 14px 18px;
  border-radius: var(--r-btn);
  font-size: 13.5px;
  box-shadow: var(--sombra-flutuante);
  max-width: 380px;
  animation: sobe 0.22s ease;
}
.toast.ok { background: var(--acao); }
.toast.erro { background: var(--erro); }
@keyframes sobe { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Faixa de protótipo ---------- */

.faixa-proto {
  background: #2b2f33;
  color: #fff;
  font-size: 12px;
  padding: 8px 0;
  text-align: center;
}
.faixa-proto b { color: var(--amarelo); }
.faixa-proto a { text-decoration: underline; }

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .grid-ofertas { grid-template-columns: repeat(2, 1fr); }
  /* `minmax(0, 1fr)`, não `1fr` — a mesma armadilha do voucher. `1fr` não encolhe abaixo
     do conteúdo, e no celular o formulário e o resumo ficavam com 370 px numa área de
     327: o navegador alargava a página inteira em 19 px e cortava a borda direita do
     painel de pagamento. Medido em 375 px no dia 02/10/2026. */
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .app-grid { grid-template-columns: 1fr; }
  .menu-lateral { position: static; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .ficha { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* 72 px de respiro por seção são ritmo de desktop. No celular eles se somavam aos 88 px
     do cabeçalho e abriam ~190 px vazios antes do primeiro conteúdo — no voucher, entre o
     logo e o "Voucher emitido". Apontado pelo André em 02/10/2026. */
  .secao { padding-top: 32px; }
  .secao-titulo { margin-bottom: 28px; }
  .grid-ofertas { grid-template-columns: 1fr; }
  /* 22 px, não 28: a 28 o "Garanta o melhor preço hoje e decida quando viajar" quebrava
     em quatro linhas e o bloco somava 259 px entre a barra de filtro e o primeiro
     pacote. É a faixa dos buscadores de viagem no celular para título de lista. */
  .secao-titulo h1,
  .secao-titulo h2 { font-size: 22px; line-height: 1.35; }
  .secao-titulo p { font-size: 16px; margin-top: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .nav-topo { display: none; }
  .rodape-colunas { grid-template-columns: 1fr; }
  .rodape-pagamento { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: 1fr; }
  .rodape-marcas li { flex-basis: 104px; }
  .kpis { grid-template-columns: 1fr; }
  .painel { padding: 22px; }
}

/* =============================================================================
   PÁGINA DA OFERTA
   -----------------------------------------------------------------------------
   O protótipo mostrava o detalhe num MODAL, então o CSS dele não tem layout de
   página. Reaproveitar as classes do card aqui foi tentado e ficou errado: a
   `.pill-destino` é posicionada em absoluto dentro de `.card-foto` e vazava para
   cima do banner.

   Esta seção usa os mesmos tokens do :root — nenhuma cor ou raio novo entra aqui.
   ============================================================================= */

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--cinza-titulo);
}
.migalhas li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--linha);
}
.migalhas a { color: var(--corpo); text-decoration: none; }
.migalhas a:hover { color: var(--acao); text-decoration: underline; }
.migalhas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* minmax(0, 1fr) e não 1fr: sem isso a largura intrínseca da foto estufa a coluna
   e empurra o texto para fora — o mesmo defeito que apareceu no back-office. */
.oferta-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin: 8px 0 48px;
}
@media (max-width: 900px) {
  .oferta-pagina { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.oferta-foto {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  display: block;
}

.oferta-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.oferta-info > * + * { margin-top: 14px; }
.oferta-local {
  display: inline-block;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
}
.oferta-info h1 { font-size: 32px; line-height: 1.2; margin: 0; color: var(--tinta); }
.oferta-hotel { font-size: 17px; color: var(--corpo); margin: 0; }
.oferta-texto { color: var(--corpo); line-height: 1.6; }

.oferta-condicoes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }

.oferta-valores {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  padding: 20px;
}
.oferta-de { color: var(--cinza-titulo); font-size: 14px; }
.oferta-de s { color: var(--cinza-titulo); }
.oferta-total { font-size: 34px; font-weight: 700; color: var(--tinta); display: block; line-height: 1.1; }
.oferta-parcela { color: var(--corpo); font-size: 15px; }

.oferta-aviso {
  background: var(--creme);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  color: var(--corpo);
  line-height: 1.55;
  font-size: 15px;
}
.oferta-esgotado {
  background: #fdecea;
  border-left: 4px solid var(--erro);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  color: var(--erro);
  font-weight: 600;
}

/* Regulamento em acordeão. É o contrato: legível, não escondido. */
.regulamento-bloco {
  border: 1px solid var(--linha);
  border-radius: var(--r-btn);
  margin-bottom: 10px;
  background: var(--branco);
}
.regulamento-bloco > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--tinta);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.regulamento-bloco > summary::-webkit-details-marker { display: none; }
.regulamento-bloco > summary::after { content: "+"; color: var(--verde); font-size: 20px; }
.regulamento-bloco[open] > summary::after { content: "−"; }
.regulamento-bloco ul { margin: 0; padding: 0 18px 16px 36px; color: var(--corpo); line-height: 1.6; }
.regulamento-bloco li + li { margin-top: 6px; }

.canais-central { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 14px 0 0; }
.canais-central a {
  display: inline-block;
  border: 1px solid var(--acao);
  color: var(--acao);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  text-decoration: none;
  font-weight: 600;
}
.canais-central a:hover { background: var(--acao); color: var(--branco); }

.pagina-erro { text-align: center; padding: 80px 20px; }
.pagina-erro h1 { color: var(--tinta); }
.pagina-erro p { color: var(--corpo); margin-bottom: 24px; }

/* =============================================================================
   CHECKOUT — só o que NÃO existe na parte aprovada
   -----------------------------------------------------------------------------
   Cinco classes que eu havia redefinido aqui foram removidas: .painel, .aceite,
   .aceites, .brick e .selo-seguro já existem acima, na parte aprovada. Redefinir
   no fim do arquivo sobrescreve em silêncio, porque a última regra vence — e quem
   lê a definição de cima acredita que ela vale.

   Descoberto em 11/08/2026: o André viu a coluna invertida, e a trava
   `infra/scripts/verifica-css.sh`, escrita para a causa-raiz, achou as outras
   quatro que ninguém tinha notado.
   ============================================================================= */

/* A foto no resumo é acréscimo aprovado pelo André — classe própria, sem tocar em .resumo. */
.resumo-foto { width: 100%; height: auto; display: block; }

/* Quando o Brick termina de montar, a altura mínima deixa de ser necessária. */
.brick-pronto { min-height: 0; }

.form-campo small { color: var(--cinza-titulo); font-size: 13px; }

/* O botão vinha colado nos campos de CPF e telefone — o André viu na tela. O grid do
   formulário tem gap entre os campos, mas o botão é irmão dele, fora do grid. */
#irParaPagamento { margin-top: 26px; }

/* Cabeçalho compacto do checkout.
 *
 * O `.secao` do site reserva 72px acima e o `.secao-titulo` 48px abaixo — 120px que
 * empurravam o resumo do pacote para fora da primeira dobra. Numa tela de pagamento, o
 * que precisa estar visível é o que se está comprando. */
.passos-checkout {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--corpo);
}
.passos-checkout .seta { color: var(--linha); }
@media (max-width: 600px) {
  /* No celular o indicador some: ele custa altura e o hóspede já sabe onde está. */
  .passos-checkout { display: none; }
}

@media (max-width: 960px) {
  /* No celular o resumo desce: o hóspede já sabe o que está comprando, e o formulário é
     o que ele precisa alcançar sem rolar. */
  .resumo { position: static; }
}

/* Página do pedido */
.ficha-dados { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ficha-dados th,
.ficha-dados td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.ficha-dados th { color: var(--cinza-titulo); font-weight: 600; width: 140px; }
.ficha-dados td { color: var(--tinta); }

/* Ícones em SVG, no lugar dos emojis que vinham do protótipo.
   Decisão do André em 18/08/2026, para o projeto todo: emoji em interface de produto tem
   aparência de protótipo — e no protótipo eles eram exatamente marcação temporária.
   SVG inline, e não arquivo nem fonte de ícones, por dois motivos: a CSP do checkout não
   permitiria origem externa, e `currentColor` faz o ícone acompanhar o estado do controle
   sem uma regra de cor para cada caso. */
.metodo .icone svg { color: var(--verde); }
.icone-selo { vertical-align: -2px; margin-right: 2px; }

/* Tela de Pix pendente. O QR ocupa o centro porque é o que a pessoa vai usar: ela abre o
   app do banco e aponta a câmera. O código copia-e-cola vem abaixo, para quem está no
   celular e não tem uma segunda tela para escanear. */
.pix-pagamento { text-align: center; }
.pix-qr {
  display: block; margin: 0 auto 22px;
  border: 1px solid var(--linha); border-radius: 8px; padding: 10px; background: #fff;
  max-width: 100%; height: auto;
}
.pix-copia { text-align: left; margin-bottom: 14px; }
.pix-copia textarea {
  width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5;
  word-break: break-all; resize: none;
  border: 1px solid var(--linha); border-radius: 6px; padding: 10px;
  background: var(--fundo-campo); color: var(--corpo);
}

/* ── calendário de datas da oferta ──────────────────────────────────────────────
   Grade de 7 colunas por mês, servida pronta pelo servidor: o hóspede sem JS vê o
   mesmo calendário, porque aqui não há nada a calcular no navegador. */
/* Coluna com teto, e não `1fr`: com `1fr` a oferta de data única — que tem um mês só —
   esticava o mês pela largura inteira da página, com quadrados de 110px. Mês de
   calendário tem tamanho natural; passar disso vira outra coisa. */
.calendario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  justify-content: start;
  gap: 20px 28px;
  margin-top: 18px;
}
.calendario .mes h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--tinta);
}
/* Só a primeira letra: `text-transform: capitalize` escrevia "Novembro De 2026",
   maiusculando a preposição. */
.calendario .mes h3::first-letter { text-transform: uppercase; }
.semana-rotulos,
.calendario .dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.semana-rotulos span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--cinza-titulo);
  padding-bottom: 4px;
}
/* Altura fixa, e não `aspect-ratio: 1`: dentro de uma grade de colunas `1fr` o
   aspect-ratio vira dependência circular — a altura de janeiro chegou a 1323px, com os
   dias empurrados para fora da tela. */
.calendario .dia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--cinza-titulo);
}
/* `fora-do-mes`, e NÃO `vazio`: `.vazio` já existe desde a vitrine sem ofertas, com
   `grid-column: 1 / -1` e 64px de padding. Herdando aquilo, cada quadrado em branco do
   calendário virava uma faixa de 130px ocupando a linha inteira, e janeiro tinha dez
   linhas em vez de seis.

   O gate de CSS não pega isto: ele confere classe de topo redefinida, e esta é
   descendente. A lição é a mesma do gate — nome genérico em folha de estilo única
   colide, e o efeito aparece longe de onde se escreveu. */
.calendario .dia.fora-do-mes { visibility: hidden; }
.calendario .dia.ocupado {
  background: var(--verde-claro);
  color: var(--tinta);
  font-weight: 600;
}
/* A chegada é o dia que o hóspede escolhe na central — por isso é a única que ganha
   peso de cor cheia. O resto da estadia é consequência dela. */
.calendario .dia.chegada {
  background: var(--acao);
  color: #fff;
  font-weight: 700;
}
.legenda-calendario {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--corpo);
}
.legenda-calendario li { display: flex; align-items: center; gap: 6px; }
.legenda-calendario .amostra { width: 14px; height: 14px; border-radius: 4px; }
.legenda-calendario .amostra.chegada { background: var(--acao); }
.legenda-calendario .amostra.estadia { background: var(--verde-claro); }

/* ── página do pacote no celular: um mês por vez e barra de compra fixa ─────────
   Aprovado pelo André em 02/10/2026 a partir de protótipo sobre a página real — o
   padrão de Airbnb, Booking e Hurb. Tudo nasce escondido e só o script do celular
   revela: no desktop e sem JS a página continua como era. */
.cal-meses { display: none; }
.compra-fixa { display: none; }

@media (max-width: 720px) {
  .cal-meses.ativo {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 14px;
    margin-top: 14px;
    scrollbar-width: none;
  }
  .cal-meses.ativo::-webkit-scrollbar { display: none; }
  .cal-meses .chip { min-height: 52px; line-height: 1.2; text-align: center; }
  .cal-meses .chip small { display: block; margin: 2px 0 0; font-size: 11px; }
  /* Com um mês por vez, o nome dele está no botão marcado: o título repetia. */
  .calendario.cal-uma .mes h3 { display: none; }

  .compra-fixa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--branco);
    border-top: 1px solid var(--linha);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
    /* Escondida fora da tela E fora do foco do teclado: só o transform deixaria o
       "Comprar" tabulável sem estar à vista. */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .compra-fixa.visivel { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .compra-fixa-preco strong { display: block; font-family: var(--display); font-size: 19px; line-height: 1.15; color: var(--tinta); }
  .compra-fixa-pix { display: block; font-size: 12px; font-weight: 600; color: var(--verde-escuro); margin-top: 2px; }
  .compra-fixa-resta { display: block; font-size: 11.5px; font-weight: 700; color: #b8460b; margin-top: 2px; }
  .compra-fixa .btn { flex: none; min-width: 150px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
  /* Espaço no pé para a barra não cobrir o rodapé nem os canais da central. */
  .com-compra-fixa { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .compra-fixa, .compra-fixa.visivel { transition: none; }
}

/* ── escassez de data no card ────────────────────────────────────────────────── */
.escassez-data {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--corpo);
}
.escassez-data.unica { color: var(--acao); font-weight: 700; }

/* ── banner de consentimento ────────────────────────────────────────────────────
   Barra no rodapé, não modal de tela cheia: a pessoa continua vendo a oferta que a
   trouxe. Modal que bloqueia a página para pedir cookie é o padrão que faz todo mundo
   clicar em "aceitar" só para sair dali — e consentimento obtido por obstrução não
   vale como consentimento. */
.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
}
.consentimento-corpo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.consentimento-texto { flex: 1 1 340px; }
.consentimento-texto h2 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tinta);
}
.consentimento-texto p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--corpo); }
.consentimento-acoes { flex: 0 1 auto; display: flex; flex-direction: column; gap: 10px; }

/* Os dois botões principais com o MESMO tamanho e peso, lado a lado. Recusar não pode
   custar mais esforço que aceitar — ver o comentário no template. */
.consentimento-botoes { display: flex; gap: 10px; }
.consentimento-botoes .btn { flex: 1 1 0; min-width: 170px; font-size: 14px; padding: 11px 18px; }

.consentimento-opcoes { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.consentimento-opcoes legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-titulo);
  padding: 0 0 6px;
}
.consentimento-opcao { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consentimento-opcao input { margin-top: 3px; flex: none; }
.consentimento-opcao b { display: block; font-size: 13px; color: var(--tinta); }
.consentimento-opcao small { display: block; font-size: 12px; line-height: 1.45; color: var(--corpo); }
.consentimento-opcao input:disabled + span b { color: var(--cinza-titulo); }

/* O terceiro caminho é LINK, não botão de bloco: ele é a saída de quem quer decidir
   com calma, e empilhar três blocos num celular empurrava o último para fora da tela. */
.link-consentimento {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  color: var(--acao);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}

@media (max-width: 720px) {
  .consentimento { max-height: 80vh; overflow-y: auto; }
  .consentimento-corpo { padding: 14px 16px; gap: 12px; }
  .consentimento-texto h2 { font-size: 15px; }
  .consentimento-texto p { font-size: 12.5px; }
  /* Lado a lado também aqui: dois botões de ~160px cabem em 375px, e empilhados eles
     custavam 100px de altura numa tela que já estava apertada. */
  .consentimento-acoes { flex: 1 1 100%; gap: 8px; }
  .consentimento-botoes .btn { min-width: 0; font-size: 13px; padding: 10px 8px; }
}

/* `display` declarado em classe vence o `display: none` que o navegador aplica ao
   atributo `hidden` — então um elemento com `hidden` e `display: flex` fica VISÍVEL.
   Apareceu no banner de consentimento: as opções detalhadas nasciam abertas, e o
   "Salvar a minha escolha" aparecia antes de haver o que salvar.
   O `!important` é legítimo aqui: `hidden` é uma afirmação do HTML sobre o documento,
   não uma sugestão de estilo. */
[hidden] { display: none !important; }

/* ── pacote esgotado ────────────────────────────────────────────────────────────
   O card continua na vitrine, no fim da lista. A foto perde cor e ganha uma fita
   diagonal zebrada — listra de obra, não de oferta: a mensagem é de interdição, e a
   listra é lida antes da palavra. */
.card.esgotado .card-foto img { filter: grayscale(0.9) brightness(0.72); }

/* A moldura é o que CORTA a fita, e cobre exatamente a foto — `inset: 0` sobre o
   `.card-foto`, com o mesmo raio da imagem.

   O corte já morou no card, e era 16px largo demais: a fita passava por cima do branco
   do respiro e ficava pendurada fora da imagem. O caminho óbvio — `overflow: hidden` no
   próprio `.card-foto` — tem efeito colateral conhecido: desloca a pastilha do destino
   em 50px, e "Poços de Caldas" vira "ços de Caldas". Uma camada só para o recorte evita
   os dois problemas. */
.fita-moldura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-img);
  z-index: 3;
  pointer-events: none;
}

/* Canto superior DIREITO: o esquerdo já tem a pastilha do destino, e as duas juntas
   viravam um amontoado em que nenhuma das duas se lia.

   Geometria: a fita é perpendicular à diagonal do canto, e para isso o giro é de 45° —
   nem um grau a mais. Com 38° ela cruzava o canto torta, sobrava de um lado e faltava
   do outro, e era metade do "mau encaixado". O centro cai a 58px do canto (`right` e
   `top` são derivados disso), e os 240px de largura garantem que as duas pontas saiam
   da imagem e sejam cortadas pela moldura em vez de terminarem à vista. */
.fita-esgotado {
  position: absolute;
  top: 40px;
  right: -62px;
  width: 240px;
  padding: 9px 0;
  transform: rotate(45deg);
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;

  /* Preto sobre amarelo puro, que é a fita de obra de verdade e o par de maior contraste
     que existe — por isso sinalização viária inteira é feita dele.
     A versão anterior era amarelo-pastel da paleta sob um véu preto de 55%: a listra
     virava oliva, o branco sobre ela ficava cinzento, e a palavra sumia justamente num
     card que já está dessaturado. Contraste baixo dentro de uma foto cinza é invisível.
     A listra fica nas BORDAS, não atrás do texto: continua lendo-se como fita, e o miolo
     limpo é o que deixa a palavra legível. */
  color: #111;
  background-color: var(--fita-fundo, #ffd100);
  background-image:
    repeating-linear-gradient(90deg, var(--fita-listra, #111) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(90deg, var(--fita-listra, #111) 0 9px, transparent 9px 18px);
  background-size: 100% 7px, 100% 7px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.btn-inativo {
  background: var(--linha);
  color: var(--cinza-titulo);
  cursor: not-allowed;
  border-color: var(--linha);
  text-align: center;
}

/* O banner é link, mas não deve parecer um: sem sublinhado, sem cor de link, e sem o
   `display: inline` que deixaria uma fresta embaixo da imagem. */
.banner-link { display: block; line-height: 0; }

/* Card da vitrine (proposta 07/10/2026): o caminho para o pacote vira botão secundário
   que diz o que a pessoa vai encontrar, e o título passa a ser link — o sublinhado com
   "regulamento" lia como termos e condições. */
.btn-detalhes { gap: 8px; }
.card-titulo-link { color: inherit; text-decoration: none; }
.card-titulo-link:hover { color: var(--acao); text-decoration: underline; text-underline-offset: 3px; }

/* R22: "Encontrar meu voucher". Mesmo miolo das páginas legais, com o formulário do
   checkout; o aviso de sucesso é o .aviso em verde. */
.meu-voucher-form { margin: 8px 0 28px; }
.aviso-ok { background: #e6f4ea; border-color: #b7dfc2; color: #0b5a23; }
.aviso-ok strong { color: #0b5a23; }