/* ==========================================================================
   Tons mais claros da mesma paleta terracota.
   Carregar depois de paleta-atual.css.
   O index usa data-paleta="medio": cabeçalho, hero e faixas no #6E3E2C.
   A opção "claro" fica só nas prévias locais (_terracota-claro.html).
   ========================================================================== */

body[data-paleta="medio"] {
  --terra-abertura: 110 62 44; /* #6E3E2C */
  --terra-faixa: 110 62 44;
  --terra-fio: rgba(243, 214, 156, 0.35);
}

body[data-paleta="claro"] {
  --terra-abertura: 244 232 223; /* #F4E8DF */
  --terra-faixa: 110 62 44;
  --terra-fio: rgba(110, 62, 44, 0.16);
}

body[data-paleta="medio"] header,
body[data-paleta="claro"] header,
body[data-paleta="medio"] #topo,
body[data-paleta="claro"] #topo {
  background-color: rgb(var(--terra-abertura));
  border-bottom-color: var(--terra-fio);
}

body[data-paleta="medio"] #topo,
body[data-paleta="claro"] #topo {
  border-bottom: 0;
}

/* --- Médio: texto claro sobre o terracota -------------------------------- */

body[data-paleta="medio"] header .font-serif,
body[data-paleta="medio"] #topo .text-ink-900,
body[data-paleta="medio"] #menu-toggle {
  color: rgb(var(--paper));
}

body[data-paleta="medio"] header .text-ink-500,
body[data-paleta="medio"] .nav-link,
body[data-paleta="medio"] #topo .text-lead,
body[data-paleta="medio"] #topo .text-ink-600,
body[data-paleta="medio"] #topo .text-ink-500,
body[data-paleta="medio"] #topo .ficha dd {
  color: rgb(var(--ink-100));
}

body[data-paleta="medio"] .nav-link:hover {
  color: rgb(var(--paper));
}

body[data-paleta="medio"] #topo .rotulo,
body[data-paleta="medio"] #topo .ficha dt {
  color: rgb(var(--ocre-300));
}

body[data-paleta="medio"] header .btn-escuro,
body[data-paleta="medio"] #topo .btn-escuro,
body[data-paleta="medio"] #menu-mobile a.btn-escuro {
  background-color: rgb(var(--paper));
  color: rgb(var(--ink-900));
  border-color: transparent;
}

body[data-paleta="medio"] header .btn-escuro:hover,
body[data-paleta="medio"] #topo .btn-escuro:hover {
  background-color: rgb(var(--ocre-100));
}

body[data-paleta="medio"] #topo .btn-linha {
  border-color: rgb(var(--ink-200));
  color: rgb(var(--paper));
}

body[data-paleta="medio"] #topo .btn-linha:hover {
  background-color: rgb(90 48 34);
  border-color: rgb(var(--ocre-300));
}

body[data-paleta="medio"] #menu-toggle {
  border-color: var(--terra-fio);
}

body[data-paleta="medio"] #menu-toggle:hover {
  background-color: rgb(90 48 34);
}

body[data-paleta="medio"] #menu-mobile {
  background-color: rgb(var(--terra-abertura));
  border-color: var(--terra-fio);
}

body[data-paleta="medio"] #menu-mobile a {
  color: rgb(var(--ink-100));
  border-color: var(--terra-fio);
}

body[data-paleta="medio"] #topo .ficha,
body[data-paleta="medio"] #topo .ficha > div,
body[data-paleta="medio"] #topo .ficha > div + div {
  border-color: var(--terra-fio);
}

/* --- Claro: texto escuro sobre o terracota pálido ------------------------ */

body[data-paleta="claro"] header .font-serif,
body[data-paleta="claro"] #topo .text-ink-900,
body[data-paleta="claro"] #menu-toggle {
  color: rgb(var(--ink-900));
}

body[data-paleta="claro"] header .text-ink-500,
body[data-paleta="claro"] .nav-link {
  color: rgb(var(--ink-700));
}

body[data-paleta="claro"] .nav-link:hover,
body[data-paleta="claro"] #topo .text-ink-900 {
  color: rgb(var(--ink-900));
}

body[data-paleta="claro"] #topo .text-lead,
body[data-paleta="claro"] #topo .text-ink-600,
body[data-paleta="claro"] #topo .ficha dd {
  color: rgb(var(--ink-700));
}

body[data-paleta="claro"] #topo .text-ink-500 {
  color: rgb(var(--ink-600));
}

body[data-paleta="claro"] #topo .rotulo,
body[data-paleta="claro"] #topo .ficha dt {
  color: rgb(var(--ocre-700));
}

body[data-paleta="claro"] header .btn-escuro,
body[data-paleta="claro"] #topo .btn-escuro {
  background-color: rgb(var(--ink-900));
  color: rgb(var(--paper));
}

body[data-paleta="claro"] header .btn-escuro:hover,
body[data-paleta="claro"] #topo .btn-escuro:hover {
  background-color: rgb(var(--ink-800));
}

body[data-paleta="claro"] #topo .btn-linha {
  border-color: rgb(var(--ink-700));
  color: rgb(var(--ink-900));
}

body[data-paleta="claro"] #topo .btn-linha:hover {
  background-color: rgb(var(--ink-900));
  color: rgb(var(--paper));
}

body[data-paleta="claro"] #menu-toggle {
  border-color: var(--terra-fio);
}

body[data-paleta="claro"] #menu-mobile {
  background-color: rgb(var(--terra-abertura));
  border-color: var(--terra-fio);
}

body[data-paleta="claro"] #menu-mobile a {
  color: rgb(var(--ink-800));
  border-color: var(--terra-fio);
}

body[data-paleta="claro"] #menu-mobile a.btn-escuro {
  background-color: rgb(var(--ink-900));
  color: rgb(var(--paper));
  border-color: transparent;
}

body[data-paleta="claro"] #topo .ficha,
body[data-paleta="claro"] #topo .ficha > div,
body[data-paleta="claro"] #topo .ficha > div + div {
  border-color: var(--terra-fio);
}

/* --- Faixas escuras do miolo, nos dois: terracota médio, texto claro ----- */

body[data-paleta="medio"] #autoridade,
body[data-paleta="claro"] #autoridade,
body[data-paleta="medio"] [aria-labelledby="titulo-agendar"],
body[data-paleta="claro"] [aria-labelledby="titulo-agendar"],
body[data-paleta="medio"] footer,
body[data-paleta="claro"] footer {
  background-color: rgb(var(--terra-faixa));
}

body[data-paleta="medio"] #autoridade .text-ink-300,
body[data-paleta="claro"] #autoridade .text-ink-300,
body[data-paleta="medio"] #autoridade .text-ink-200,
body[data-paleta="claro"] #autoridade .text-ink-200,
body[data-paleta="medio"] [aria-labelledby="titulo-agendar"] .text-ink-200,
body[data-paleta="claro"] [aria-labelledby="titulo-agendar"] .text-ink-200,
body[data-paleta="medio"] [aria-labelledby="titulo-agendar"] .text-ink-400,
body[data-paleta="claro"] [aria-labelledby="titulo-agendar"] .text-ink-400,
body[data-paleta="medio"] footer .text-ink-300,
body[data-paleta="claro"] footer .text-ink-300,
body[data-paleta="medio"] footer .text-ink-400,
body[data-paleta="claro"] footer .text-ink-400 {
  color: rgb(var(--ink-100));
}

body[data-paleta="medio"] #autoridade .rotulo-claro,
body[data-paleta="claro"] #autoridade .rotulo-claro,
body[data-paleta="medio"] footer .text-ocre-300,
body[data-paleta="claro"] footer .text-ocre-300 {
  color: rgb(var(--ocre-200));
}

/* --- Barra só destas prévias --------------------------------------------- */

.barra-comparar {
  position: fixed;
  left: 1rem;
  bottom: 1.25rem;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: min(28rem, calc(100vw - 6.5rem));
  padding: 0.35rem 0.5rem;
  border: 1px solid rgb(var(--fio));
  border-radius: 9999px;
  background-color: rgb(var(--paper) / 0.94);
  font-size: 0.75rem;
}

.barra-comparar__titulo {
  padding: 0 0.35rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.625rem;
  color: rgb(var(--ink-500));
}

.barra-comparar a {
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  color: rgb(var(--ink-700));
  text-decoration: none;
  white-space: nowrap;
}

.barra-comparar a[aria-current="page"] {
  background-color: rgb(110 62 44);
  color: rgb(var(--paper));
}