/* ==========================================================================
   BOREAL TURISMO — sistema de design "O NORTE"

   A ideia vem da frase que a própria Boreal usa: "BOREAL tem como sinônimo a
   palavra NORTE. E é isso que buscamos, nortear – mostrar o caminho."
   Daí o vocabulário: carta náutica, rosa dos ventos, coordenada, curva de
   nível, linha de rota, marcação de trilha.

   Paleta de papel e tinta, de propósito: quem dá cor à página é a foto do
   destino. O site não compete com ela.

   Tudo o que define aparência mora nas variáveis de :root — no WordPress são
   as mesmas que o Customizer e os widgets de Elementor escrevem.
   ========================================================================== */

:root {
  /* ---- a marca ----------------------------------------------------------
     Cores tiradas do logotipo e da folha de estilo do proprio site da Boreal:
     a espiral vai do verde-limao ao ciano, e o tema deles usa #2c99a9 nos
     botoes e #23cadc nos titulos e caixas. */
  --b-teal:        #2c99a9;   /* cor de acao: botoes, links, realces */
  --b-teal-esc:    #1f7b8a;
  --b-teal-claro:  #dcedf1;
  --b-ciano:       #23cadc;   /* o ciano do logotipo */
  --b-ciano-claro: #7fd8e4;
  --b-esc:         #0d3b44;   /* secoes escuras */
  --b-esc-2:       #14545f;

  --b-verde:       #94a959;   /* o verde-oliva da espiral */
  --b-verde-2:     #eef2e2;
  --b-limao:       #bfef72;   /* a ponta clara da espiral */

  /* ---- papel e tinta ---------------------------------------------------- */
  --b-papel:     #f7f9fa;
  --b-papel-2:   #ffffff;
  --b-papel-3:   #eef3f4;

  --b-tinta:     #16262b;
  --b-tinta-2:   #4a5f65;
  --b-tinta-3:   #8299a0;
  --b-linha:     #dde6e8;

  --b-fundo:     var(--b-papel);
  --b-fundo-alt: var(--b-papel-2);

  /* ---- tipografia -------------------------------------------------------
     Pirulen e a fonte do logotipo e de todos os titulos do site atual —
     larga, quadrada, leve. Funciona em caixa alta e em textos curtos, entao
     fica nos titulos e rotulos. Open Sans, a fonte de texto deles, leva o
     resto. Nada de fonte inventada. */
  --b-fonte-titulo: "Pirulen", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --b-fonte-texto:  "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --b-fonte-dado:   "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --b-t-xs:   0.6875rem;
  --b-t-sm:   0.8125rem;
  --b-t-base: 0.9375rem;
  --b-t-lg:   1.0625rem;
  --b-t-xl:   1.25rem;
  --b-t-2xl:  1.625rem;
  --b-t-3xl:  2rem;
  --b-t-4xl:  2.5rem;
  --b-t-5xl:  3.25rem;

  /* Pirulen ja e larga; peso normal e tracking generoso, como no logotipo */
  --b-peso-titulo: 400;
  --b-altura-titulo: 1.25;
  --b-altura-texto: 1.7;
  --b-espaco-letra: 0.04em;
  --b-espaco-rotulo: 0.16em;

  /* ---- espacamento ------------------------------------------------------ */
  --b-e-1: 0.25rem;
  --b-e-2: 0.5rem;
  --b-e-3: 0.75rem;
  --b-e-4: 1rem;
  --b-e-5: 1.5rem;
  --b-e-6: 2rem;
  --b-e-7: 3rem;
  --b-e-8: 4rem;
  --b-e-9: 6rem;

  --b-secao-y: clamp(3.5rem, 6vw, 5.5rem);
  --b-largura: 1320px;
  --b-largura-texto: 64ch;
  --b-gutter:  clamp(1.25rem, 3.5vw, 2.5rem);
  --b-coluna-filtros: 264px;

  /* ---- forma ------------------------------------------------------------
     O site atual usa border-radius 10px nas caixas; mantemos o ar arredondado. */
  --b-raio-sm: 4px;
  --b-raio:    8px;
  --b-raio-lg: 12px;
  --b-raio-pill: 999px;

  --b-sombra-1: 0 1px 2px rgba(13, 59, 68, .05);
  --b-sombra-2: 0 2px 6px rgba(13, 59, 68, .07), 0 14px 32px rgba(13, 59, 68, .09);
  --b-sombra-3: 0 24px 60px rgba(13, 59, 68, .2);

  --b-transicao: 200ms cubic-bezier(.2, .7, .3, 1);
  --b-header-h: 76px;
}

/* A fonte do logotipo, servida do proprio pacote do tema.
   ATENCAO: Pirulen e da Typodermic Fonts e NAO e livre para uso comercial.
   O site atual da Boreal ja a usa; confirme com o cliente se ha licenca. */
@font-face {
  font-family: "Pirulen";
  src: url("../fontes/pirulen_rg-webfont.woff2") format("woff2"),
       url("../fontes/pirulen_rg-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--b-header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--b-fundo);
  color: var(--b-tinta);
  font-family: var(--b-fonte-texto);
  font-size: var(--b-t-base);
  line-height: var(--b-altura-texto);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--b-fonte-titulo);
  font-weight: var(--b-peso-titulo);
  line-height: var(--b-altura-titulo);
  letter-spacing: var(--b-espaco-letra);
  margin: 0 0 var(--b-e-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, var(--b-t-5xl)); }
h2 { font-size: clamp(1.6rem, 3vw, var(--b-t-3xl)); }
h3 { font-size: var(--b-t-xl); }
h4 { font-size: var(--b-t-lg); }

p { margin: 0 0 var(--b-e-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--b-esc-2); text-underline-offset: 3px; }
a:hover { color: var(--b-teal); }

:focus-visible { outline: 2px solid var(--b-teal); outline-offset: 3px; }

.b-container { width: 100%; max-width: var(--b-largura); margin-inline: auto; padding-inline: var(--b-gutter); }
.b-secao { padding-block: var(--b-secao-y); }
.b-secao--clara { background: var(--b-fundo-alt); }
.b-secao--escura { background: var(--b-esc); color: var(--b-papel-3); }
.b-secao--escura h2, .b-secao--escura h3 { color: #fff; }

.b-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ELEMENTOS DA IDENTIDADE
   ========================================================================== */

/* --- rótulo de instrumento: tudo que é etiqueta usa isto ------------------ */
.b-rotulo, .b-olho {
  display: block;
  font-family: var(--b-fonte-dado);
  font-size: var(--b-t-xs);
  font-weight: 500;
  letter-spacing: var(--b-espaco-rotulo);
  text-transform: uppercase;
  color: var(--b-tinta-3);
  margin: 0 0 var(--b-e-3);
}
.b-olho { color: var(--b-teal); }
.b-secao--escura .b-olho { color: var(--b-ciano-claro); }

/* --- coordenada ---------------------------------------------------------- */
.b-coord {
  font-family: var(--b-fonte-dado);
  font-size: var(--b-t-xs);
  letter-spacing: .06em;
  color: var(--b-tinta-3);
  white-space: nowrap;
}
.b-secao--escura .b-coord, .b-hero .b-coord, .b-destino-hero .b-coord {
  color: color-mix(in srgb, #fff 68%, transparent);
}

/* --- régua de 12 meses ---------------------------------------------------
   Substitui a lista de meses por vírgula. Além de virar identidade, resolve
   o desalinhamento: a régua tem SEMPRE a mesma largura e a mesma altura,
   quer o roteiro saia em 4 meses ou em 12. */
.b-meses { display: inline-flex; flex-direction: column; gap: 3px; }
.b-meses__grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.b-meses__c { width: 100%; height: 4px; border-radius: 1px; background: var(--b-linha); }
.b-meses__c.on { background: var(--b-verde); }
.b-meses__letras {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  font-family: var(--b-fonte-dado); font-size: 8px; line-height: 1;
  color: var(--b-tinta-3); text-align: center; letter-spacing: 0;
}
.b-meses--g .b-meses__c { height: 7px; }
.b-meses--g .b-meses__letras { font-size: 9px; }

.b-destino-hero .b-meses__c, .b-orcamento .b-meses__c { background: rgba(255,255,255,.22); }
.b-destino-hero .b-meses__c.on, .b-orcamento .b-meses__c.on { background: var(--b-ciano-claro); }
.b-destino-hero .b-meses__letras, .b-orcamento .b-meses__letras { color: rgba(255,255,255,.55); }

/* --- marcação de trilha: o ritmo em barras -------------------------------- */
.b-blaze { display: inline-flex; align-items: center; gap: 4px; }
.b-blaze__b { width: 3px; height: 11px; background: var(--b-linha); border-radius: 1px; }
.b-blaze__b.on { background: var(--b-teal); }
.b-blaze__t {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--b-tinta-2);
  margin-left: 4px;
}

/* --- linha de rota: os dias como pontos numa trilha ----------------------- */
.b-rota { display: flex; align-items: center; width: 100%; }
.b-rota__p {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--b-papel-2); border: 1.5px solid var(--b-ciano);
}
.b-rota__p:first-child, .b-rota__p:last-child { background: var(--b-ciano); }
.b-rota__l { flex: 1; height: 1.5px; background: var(--b-ciano); opacity: .45; }
.b-rota__n {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  color: var(--b-tinta-3); margin-left: var(--b-e-3); white-space: nowrap;
}

/* --- curvas de nível: textura de fundo dos blocos escuros ----------------- */
.b-curvas { position: relative; overflow: hidden; }
.b-curvas > * { position: relative; z-index: 1; }
.b-curvas::before {
  content: ""; position: absolute; inset: -10%; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 39%, currentColor 39% 39.35%, transparent 39.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 47%, currentColor 47% 47.35%, transparent 47.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 55%, currentColor 55% 55.35%, transparent 55.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 63%, currentColor 63% 63.35%, transparent 63.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 71%, currentColor 71% 71.35%, transparent 71.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 79%, currentColor 79% 79.35%, transparent 79.35%),
    radial-gradient(ellipse 62% 48% at 78% 42%, transparent 0 87%, currentColor 87% 87.35%, transparent 87.35%);
  color: var(--b-ciano-claro);
  pointer-events: none;
}
.b-curvas--papel::before { color: var(--b-linha); opacity: .75; }

/* --- grade de carta: papel milimetrado de fundo --------------------------- */
.b-grade-carta { position: relative; }
.b-grade-carta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, currentColor 0 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 0 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .06;
}
.b-grade-carta > * { position: relative; z-index: 1; }

/* --- rosa dos ventos ------------------------------------------------------ */
.b-rosa { color: var(--b-teal); }
.b-rosa--sombra {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(46%, 460px); height: auto; opacity: .07;
  pointer-events: none; z-index: 0;
}

/* ==========================================================================
   botões
   ========================================================================== */

.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-e-2);
  padding: 0.9rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--b-raio);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--b-transicao), color var(--b-transicao),
              border-color var(--b-transicao), box-shadow var(--b-transicao);
}

.b-btn--primario { background: var(--b-teal); color: #fff; }
.b-btn--primario:hover { background: var(--b-teal-esc); color: #fff; }

.b-btn--escuro { background: var(--b-esc); color: #fff; }
.b-btn--escuro:hover { background: var(--b-esc-2); color: #fff; }

.b-btn--contorno { border-color: var(--b-tinta); color: var(--b-tinta); background: transparent; }
.b-btn--contorno:hover { background: var(--b-tinta); color: var(--b-papel); }

.b-btn--claro { background: #fff; color: var(--b-esc); }
.b-btn--claro:hover { background: var(--b-papel-3); color: var(--b-esc); }

.b-btn--fantasma { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.b-btn--fantasma:hover { background: rgba(255,255,255,.12); color: #fff; }

.b-btn--bloco { width: 100%; }
.b-btn--g { padding: 1.05rem 1.9rem; font-size: var(--b-t-sm); }

/* seta que anda no hover — o "mostrar o caminho" em miniatura */
.b-btn__seta { transition: transform var(--b-transicao); }
.b-btn:hover .b-btn__seta { transform: translateX(3px); }

/* ==========================================================================
   selos
   ========================================================================== */

.b-selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--b-raio-sm);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  line-height: 1.4; letter-spacing: .06em;
  background: var(--b-papel-3); color: var(--b-tinta-2);
  white-space: nowrap;
}
.b-selo--acento { background: var(--b-teal-claro); color: var(--b-teal-esc); }
.b-selo--neutro { background: transparent; color: var(--b-tinta-3); border: 1px solid var(--b-linha); }
.b-selo--vidro {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
}

.b-dif--Leve        { background: var(--b-verde-2); color: var(--b-verde); }
.b-dif--Moderada    { background: #f6ead2; color: #8a5f14; }
.b-dif--Desafiadora { background: var(--b-teal-claro); color: var(--b-teal-esc); }

/* ==========================================================================
   cabeçalho
   ========================================================================== */

.b-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--b-papel) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background var(--b-transicao), border-color var(--b-transicao);
}
.b-header.is-rolado { background: var(--b-papel); border-bottom-color: var(--b-linha); }

.b-header__barra { display: flex; align-items: center; gap: var(--b-e-5); min-height: var(--b-header-h); }

.b-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.b-logo__marca { flex: none; width: 30px; height: 30px; color: var(--b-teal); }
.b-logo__texto { display: flex; flex-direction: column; line-height: 1; }
.b-logo__nome {
  font-family: var(--b-fonte-titulo); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .14em; color: var(--b-tinta);
}
.b-logo__sub {
  font-family: var(--b-fonte-dado); font-size: 0.58rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--b-tinta-3); margin-top: 5px;
}
.b-footer .b-logo__nome { color: #fff; }
.b-footer .b-logo__sub { color: var(--b-ciano-claro); }

.b-nav { margin-left: auto; }
.b-nav ul { display: flex; align-items: center; gap: var(--b-e-6); list-style: none; margin: 0; padding: 0; }
.b-nav a {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--b-tinta-2); text-decoration: none; padding: 6px 0; position: relative;
}
.b-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--b-teal); transition: right var(--b-transicao);
}
.b-nav a:hover { color: var(--b-tinta); }
.b-nav a:hover::after, .b-nav a[aria-current="page"]::after { right: 0; }

.b-header__acoes { display: flex; align-items: center; gap: var(--b-e-3); }

.b-menu-botao {
  display: none; width: 42px; height: 42px; padding: 0; margin-left: auto;
  border: 1px solid var(--b-linha); border-radius: var(--b-raio);
  background: transparent; cursor: pointer;
}
.b-menu-botao span, .b-menu-botao span::before, .b-menu-botao span::after {
  display: block; width: 17px; height: 1.5px; background: var(--b-tinta);
  margin-inline: auto; position: relative; transition: transform var(--b-transicao), opacity var(--b-transicao);
}
.b-menu-botao span::before { content: ""; position: absolute; top: -5px; }
.b-menu-botao span::after  { content: ""; position: absolute; top: 5px; }
.b-menu-botao[aria-expanded="true"] span { background: transparent; }
.b-menu-botao[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.b-menu-botao[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   hero da home
   ========================================================================== */

.b-hero { position: relative; min-height: min(92vh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.b-hero__fundo { position: absolute; inset: 0; }
.b-hero__fundo img { width: 100%; height: 100%; object-fit: cover; }
.b-hero__fundo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,43,52,.45) 0%, rgba(16,43,52,.10) 30%, rgba(16,43,52,.88) 100%),
    linear-gradient(90deg, rgba(16,43,52,.55) 0%, transparent 55%);
}
.b-hero__conteudo { position: relative; z-index: 2; padding-block: var(--b-e-9) var(--b-e-7); color: #fff; width: 100%; }
.b-hero__conteudo h1 { color: #fff; max-width: 14ch; margin-bottom: var(--b-e-5); }
.b-hero__linha {
  font-size: var(--b-t-lg); max-width: 48ch;
  color: color-mix(in srgb, #fff 85%, transparent); margin-bottom: var(--b-e-7);
}

/* barra de dados do hero: enche o vazio da direita com informação, não com ar */
.b-hero__dados {
  display: flex; flex-wrap: wrap; gap: var(--b-e-7);
  padding-top: var(--b-e-5); margin-bottom: var(--b-e-6);
  border-top: 1px solid rgba(255,255,255,.22);
}
.b-hero__dado { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.b-hero__dado dt {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 0;
}
.b-hero__dado dd {
  font-family: var(--b-fonte-titulo); font-size: var(--b-t-xl); font-weight: 700;
  color: #fff; margin: 0; letter-spacing: -.02em;
}

/* ==========================================================================
   buscador do hero
   ========================================================================== */

.b-buscador {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  background: var(--b-linha);
  border: 1px solid var(--b-linha);
  box-shadow: var(--b-sombra-3);
}
/* 12px/16px deixava o rótulo colado no valor e o valor colado na borda de
   baixo — a barra parecia apertada. Sobe para 20px/24px, e o rótulo ganha
   folga do valor. */
.b-buscador > div { background: var(--b-papel-2); padding: var(--b-e-4) var(--b-e-5); }
.b-buscador label {
  display: block; font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  color: var(--b-tinta-3); margin-bottom: var(--b-e-2);
}
.b-buscador select, .b-buscador input {
  width: 100%; padding: 0; border: 0; background: transparent; line-height: 1.5;
  color: var(--b-tinta); font-family: inherit; font-size: var(--b-t-base); font-weight: 500;
}
.b-buscador select:focus, .b-buscador input:focus { outline: none; }
.b-buscador select { cursor: pointer; appearance: none; }
.b-buscador .b-btn { border-radius: 0; height: 100%; padding-inline: var(--b-e-6); }

/* ==========================================================================
   CATÁLOGO — coluna de filtros à esquerda, resultados à direita
   ========================================================================== */

.b-catalogo { padding-block: var(--b-e-6) var(--b-e-9); }

.b-catalogo__grade {
  display: grid; gap: var(--b-e-7);
  grid-template-columns: var(--b-coluna-filtros) minmax(0, 1fr);
  align-items: start;
}

/* --- coluna dos filtros --- */
.b-painel {
  position: sticky; top: calc(var(--b-header-h) + var(--b-e-4));
  max-height: calc(100vh - var(--b-header-h) - var(--b-e-6));
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: var(--b-e-2);
  scrollbar-width: thin; scrollbar-color: var(--b-linha) transparent;
}
.b-painel::-webkit-scrollbar { width: 5px; }
.b-painel::-webkit-scrollbar-thumb { background: var(--b-linha); }

.b-painel__topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-e-3);
  padding-bottom: var(--b-e-3); margin-bottom: var(--b-e-4);
  border-bottom: 1.5px solid var(--b-tinta);
}
.b-painel__titulo {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase; color: var(--b-tinta);
}
.b-painel__fechar {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--b-linha); border-radius: var(--b-raio);
  background: none; cursor: pointer; color: var(--b-tinta); font-size: 16px; line-height: 1;
}
.b-limpar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .06em;
  color: var(--b-teal); text-decoration: underline; text-underline-offset: 3px;
}
.b-limpar[hidden] { display: none; }

/* busca */
.b-busca { position: relative; margin-bottom: var(--b-e-5); }
.b-busca input {
  width: 100%; padding: 0.7rem 2.2rem 0.7rem 2.1rem;
  border: 1px solid var(--b-linha); border-radius: var(--b-raio);
  background: var(--b-papel-2); font-family: inherit; font-size: var(--b-t-sm); color: var(--b-tinta);
}
.b-busca input:focus { outline: none; border-color: var(--b-tinta); }
.b-busca__lupa { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--b-tinta-3); pointer-events: none; }
.b-busca__limpar {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--b-papel-3); color: var(--b-tinta-2); cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}

/* grupos de faceta */
.b-grupo { border-bottom: 1px solid var(--b-linha); }
.b-grupo__botao {
  display: flex; align-items: center; gap: var(--b-e-2); width: 100%;
  padding: var(--b-e-4) 0; border: 0; background: none; cursor: pointer;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  color: var(--b-tinta); text-align: left;
}
.b-grupo__botao:hover { color: var(--b-teal); }
.b-grupo__n {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--b-teal); color: #fff; font-size: 9px; letter-spacing: 0;
}
.b-grupo__seta { flex: none; margin-left: auto; color: var(--b-tinta-3); transition: transform var(--b-transicao); }
.b-grupo__botao[aria-expanded="true"] .b-grupo__seta { transform: rotate(180deg); }
.b-grupo__corpo { padding-bottom: var(--b-e-4); }

.b-opcao {
  display: flex; align-items: center; gap: var(--b-e-3);
  padding: 5px 0; cursor: pointer;
  font-size: var(--b-t-sm); color: var(--b-tinta-2);
  transition: color var(--b-transicao);
}
.b-opcao:hover { color: var(--b-tinta); }
.b-opcao input { flex: none; width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--b-teal); }
.b-opcao__t { flex: 1; }
.b-opcao__n {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  color: var(--b-tinta-3); font-variant-numeric: tabular-nums;
}
.b-opcao.is-zero { opacity: .38; }
.b-opcao.is-zero input { cursor: not-allowed; }
.b-opcao.is-marcada { color: var(--b-tinta); font-weight: 600; }

.b-ver-mais {
  border: 0; background: none; padding: var(--b-e-2) 0 0; cursor: pointer;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .06em;
  color: var(--b-esc-2); text-decoration: underline; text-underline-offset: 3px;
}

/* --- coluna dos resultados --- */
.b-resultados__topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-e-4);
  padding-bottom: var(--b-e-4); margin-bottom: var(--b-e-5);
  border-bottom: 1.5px solid var(--b-tinta);
}
.b-contagem {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase; color: var(--b-tinta);
}
.b-contagem strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.b-select {
  margin-left: auto;
  padding: 0.5rem 1.9rem 0.5rem 0.7rem;
  border: 1px solid var(--b-linha); border-radius: var(--b-raio);
  background: var(--b-papel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23808d94' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .06em;
  color: var(--b-tinta); cursor: pointer; appearance: none;
}
.b-select:focus { outline: none; border-color: var(--b-tinta); }

.b-ativos { display: flex; flex-wrap: wrap; gap: var(--b-e-2); width: 100%; }
.b-ativo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 9px; border-radius: var(--b-raio-sm);
  background: var(--b-tinta); color: var(--b-papel);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .04em;
}
.b-ativo button {
  width: 16px; height: 16px; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 11px; line-height: 1; padding: 0;
}
.b-ativo button:hover { background: var(--b-teal); }

/* botão de filtros — só aparece no celular, e fica encostado à esquerda:
   o `margin-right:auto` empurra o <select> de ordenação para a outra ponta. */
.b-abrir-filtros { display: none; margin-right: auto; }

/* ==========================================================================
   grade e cartão
   ========================================================================== */

.b-grade { display: grid; gap: var(--b-e-5); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.b-grade--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.b-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--b-fundo-alt); border: 1px solid var(--b-linha);
  transition: border-color var(--b-transicao), box-shadow var(--b-transicao);
}
.b-card:hover { border-color: var(--b-tinta); box-shadow: var(--b-sombra-2); }

.b-card__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--b-papel-3); }
.b-card__foto img { width: 100%; height: 100%; object-fit: cover; }

.b-card__selos { position: absolute; top: var(--b-e-3); left: var(--b-e-3); display: flex; flex-wrap: wrap; gap: 5px; }
.b-card__coord {
  position: absolute; bottom: var(--b-e-3); left: var(--b-e-3);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  color: #fff; text-shadow: 0 1px 6px rgba(16,43,52,.9); letter-spacing: .04em;
}
.b-card__dias {
  position: absolute; bottom: var(--b-e-3); right: var(--b-e-3);
  padding: 4px 8px; border-radius: var(--b-raio-sm);
  background: var(--b-papel-2); color: var(--b-tinta);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
}

.b-card__corpo { display: flex; flex-direction: column; flex: 1; padding: var(--b-e-5); gap: var(--b-e-3); }
.b-card__local {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--b-tinta-3); margin: 0;
}
.b-card__titulo { font-size: var(--b-t-lg); margin: 0; letter-spacing: -.02em; }
.b-card__titulo a { color: inherit; text-decoration: none; }
.b-card__titulo a::after { content: ""; position: absolute; inset: 0; }
.b-card__resumo {
  color: var(--b-tinta-2); font-size: var(--b-t-sm); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* pé do cartão: régua de meses à esquerda, ritmo à direita.
   Ambos têm largura e altura fixas, então TODO cartão fecha igual. */
.b-card__pe {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--b-e-4);
  margin-top: auto; padding-top: var(--b-e-4); border-top: 1px solid var(--b-linha);
}
.b-card__pe .b-meses { width: 118px; }

/* ==========================================================================
   página de destino
   ========================================================================== */

.b-destino-hero { position: relative; min-height: min(78vh, 660px); display: flex; align-items: flex-end; overflow: hidden; }
.b-destino-hero__fundo { position: absolute; inset: 0; }
.b-destino-hero__fundo img { width: 100%; height: 100%; object-fit: cover; }
.b-destino-hero__fundo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,43,52,.55) 0%, rgba(16,43,52,.12) 34%, rgba(16,43,52,.9) 100%),
    linear-gradient(90deg, rgba(16,43,52,.6) 0%, transparent 60%);
}
.b-destino-hero__conteudo { position: relative; z-index: 2; color: #fff; padding-block: var(--b-e-8) var(--b-e-6); width: 100%; }
.b-destino-hero__conteudo h1 { color: #fff; max-width: 18ch; margin-bottom: var(--b-e-4); }

.b-migalhas {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .08em; color: rgba(255,255,255,.6); margin-bottom: var(--b-e-5);
}
.b-migalhas a { color: inherit; text-decoration: none; }
.b-migalhas a:hover { color: #fff; }

.b-destino-hero__linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-e-4); margin-bottom: var(--b-e-3); }
.b-destino-hero__selos { display: flex; flex-wrap: wrap; gap: var(--b-e-2); }

/* faixa de instrumentos abaixo do hero */
.b-ficha-faixa { background: var(--b-esc-2); color: #fff; }
.b-ficha {
  display: grid; gap: var(--b-e-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--b-e-5) 0;
}
.b-ficha__item { display: flex; flex-direction: column; gap: 6px; min-height: 52px; }
.b-ficha__rot {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.b-ficha__val {
  font-family: var(--b-fonte-titulo); font-size: var(--b-t-lg); font-weight: 600;
  color: #fff; letter-spacing: -.01em;
}
.b-ficha .b-meses__c { background: rgba(255,255,255,.2); }
.b-ficha .b-meses__c.on { background: var(--b-ciano-claro); }
.b-ficha .b-meses__letras { color: rgba(255,255,255,.5); }
.b-ficha .b-blaze__b { background: rgba(255,255,255,.24); }
.b-ficha .b-blaze__b.on { background: #fff; }
.b-ficha .b-blaze__t { color: #fff; }

.b-destino-corpo { display: grid; gap: var(--b-e-8); align-items: start; grid-template-columns: minmax(0, 1fr) 320px; }

/* --- abas --- */
.b-abas { display: flex; flex-wrap: wrap; gap: var(--b-e-5); border-bottom: 1.5px solid var(--b-tinta); margin-bottom: var(--b-e-6); }
.b-aba {
  padding: 0 0 var(--b-e-3); border: 0; background: none; cursor: pointer;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--b-tinta-3);
  border-bottom: 2px solid transparent; margin-bottom: -1.5px;
  transition: color var(--b-transicao), border-color var(--b-transicao);
}
.b-aba:hover { color: var(--b-tinta); }
.b-aba[aria-selected="true"] { color: var(--b-tinta); border-bottom-color: var(--b-teal); }

.b-painel-aba[hidden] { display: none; }

/* --- roteiro em blocos --- */
.b-roteiro__resumo {
  display: flex; align-items: center; gap: var(--b-e-4);
  padding: var(--b-e-4) var(--b-e-5); margin-bottom: var(--b-e-5);
  background: var(--b-papel-2); border: 1px solid var(--b-linha);
}

.b-dia { border-bottom: 1px solid var(--b-linha); }
.b-dia__botao {
  display: flex; align-items: baseline; gap: var(--b-e-4); width: 100%;
  padding: var(--b-e-4) 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.b-dia__botao:hover .b-dia__rot { color: var(--b-teal); }
.b-dia__n {
  flex: none; width: 40px;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: .1em; color: var(--b-tinta-3);
}
.b-dia__botao[aria-expanded="true"] .b-dia__n { color: var(--b-teal); }
.b-dia__rot {
  flex: 1; font-family: var(--b-fonte-titulo); font-size: var(--b-t-lg); font-weight: 600;
  color: var(--b-tinta); letter-spacing: -.015em; transition: color var(--b-transicao);
}
.b-dia__seta { flex: none; color: var(--b-tinta-3); transition: transform var(--b-transicao); align-self: center; }
.b-dia__botao[aria-expanded="true"] .b-dia__seta { transform: rotate(180deg); }
.b-dia__corpo { padding: 0 0 var(--b-e-5) calc(40px + var(--b-e-4)); color: var(--b-tinta-2); max-width: var(--b-largura-texto); }
.b-dia__corpo[hidden] { display: none; }

/* --- inclui / não inclui --- */
.b-duas { display: grid; gap: var(--b-e-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.b-lista-caixa h3 {
  display: flex; align-items: center; gap: var(--b-e-2);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  padding-bottom: var(--b-e-3); margin-bottom: var(--b-e-4);
  border-bottom: 1px solid var(--b-linha); color: var(--b-tinta);
}
.b-lista-caixa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-e-3); }
.b-lista-caixa li { position: relative; padding-left: 1.5rem; font-size: var(--b-t-sm); color: var(--b-tinta-2); }
.b-lista-caixa li::before { position: absolute; left: 0; top: 0; font-family: var(--b-fonte-dado); }
.b-lista-caixa--sim li::before { content: "+"; color: var(--b-verde); }
.b-lista-caixa--nao li::before { content: "\2212"; color: var(--b-teal); }

/* --- conteúdo vindo do site antigo --- */
.b-conteudo { color: var(--b-tinta-2); max-width: var(--b-largura-texto); }
.b-conteudo strong { color: var(--b-tinta); font-weight: 600; }
.b-conteudo ul, .b-conteudo ol { padding-left: 1.2rem; margin-bottom: var(--b-e-4); }
.b-conteudo li { margin-bottom: var(--b-e-2); }
.b-conteudo img { border: 1px solid var(--b-linha); margin-block: var(--b-e-4); }
.b-conteudo table { width: 100%; border-collapse: collapse; margin-bottom: var(--b-e-4); font-size: var(--b-t-sm); }
.b-conteudo th, .b-conteudo td { padding: var(--b-e-3); border: 1px solid var(--b-linha); text-align: left; }
.b-conteudo th { background: var(--b-papel-3); color: var(--b-tinta); font-weight: 600; }
.b-rolagem-x { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.b-destino-intro { font-size: var(--b-t-lg); color: var(--b-tinta-2); margin-bottom: var(--b-e-7); }
.b-destino-intro strong { font-weight: 400; color: inherit; }

/* --- caixa de orçamento --- */
.b-orcamento {
  position: sticky; top: calc(var(--b-header-h) + var(--b-e-5));
  padding: var(--b-e-6); background: var(--b-esc); color: var(--b-papel-3);
}
.b-orcamento h3 { color: #fff; font-size: var(--b-t-xl); }
.b-orcamento p { font-size: var(--b-t-sm); color: rgba(255,255,255,.68); }
.b-orcamento dl { margin: var(--b-e-5) 0 0; }
.b-orcamento__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-e-3);
  min-height: 44px; padding: var(--b-e-2) 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.b-orcamento__linha:last-of-type { border-bottom: 0; }
.b-orcamento__linha dt {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0;
}
.b-orcamento__linha dd {
  margin: 0; font-weight: 600; color: #fff; text-align: right;
  font-size: var(--b-t-sm); display: flex; align-items: center; justify-content: flex-end;
}
.b-orcamento .b-btn { margin-top: var(--b-e-5); }
.b-orcamento__zap { margin-top: var(--b-e-2); }

/* ==========================================================================
   blocos da home
   ========================================================================== */

.b-cabecalho-secao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--b-e-6);
  align-items: end; margin-bottom: var(--b-e-7);
  padding-bottom: var(--b-e-4); border-bottom: 1.5px solid var(--b-tinta);
}
.b-cabecalho-secao > div { max-width: var(--b-largura-texto); }
.b-cabecalho-secao h2 { margin-bottom: var(--b-e-3); }
.b-cabecalho-secao p { color: var(--b-tinta-2); margin: 0; }
.b-secao--escura .b-cabecalho-secao { border-bottom-color: rgba(255,255,255,.28); }
.b-secao--escura .b-cabecalho-secao p { color: rgba(255,255,255,.7); }

.b-tres { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--b-linha); }
.b-pilar { padding: var(--b-e-6) var(--b-e-5) var(--b-e-6) 0; border-bottom: 1px solid var(--b-linha); }
.b-pilar + .b-pilar { padding-left: var(--b-e-6); border-left: 1px solid var(--b-linha); }
.b-pilar__n {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .16em; color: var(--b-teal); margin-bottom: var(--b-e-4); display: block;
}
.b-pilar h3 { font-size: var(--b-t-xl); margin-bottom: var(--b-e-3); }
.b-pilar p { color: var(--b-tinta-2); font-size: var(--b-t-sm); margin: 0; }

/* mosaico por destino */
.b-mosaico { display: grid; gap: var(--b-e-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.b-tile {
  position: relative; display: flex; align-items: flex-end;
  min-height: 260px; padding: var(--b-e-5); overflow: hidden;
  text-decoration: none; color: #fff;
}
.b-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.3,1); }
.b-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,43,52,.08) 30%, rgba(16,43,52,.85) 100%);
}
.b-tile:hover img { transform: scale(1.06); }
.b-tile:hover { color: #fff; }
.b-tile__texto { position: relative; z-index: 2; width: 100%; }
.b-tile__nome { font-family: var(--b-fonte-titulo); font-size: var(--b-t-xl); font-weight: 700; display: block; letter-spacing: -.02em; }
.b-tile__n {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  display: flex; justify-content: space-between; gap: var(--b-e-3); margin-top: 4px;
}
.b-tile--largo { grid-column: span 2; }

/* faixa de números */
.b-numeros { display: grid; gap: var(--b-e-6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.b-numero { padding-top: var(--b-e-4); border-top: 1px solid rgba(255,255,255,.28); }
.b-numero__v {
  font-family: var(--b-fonte-titulo); font-size: var(--b-t-3xl); font-weight: 700;
  color: #fff; display: block; letter-spacing: -.03em; line-height: 1;
}
.b-numero__r {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: var(--b-e-2); display: block;
}

/* depoimento */
.b-citacao { display: grid; gap: var(--b-e-4); }
.b-citacao p {
  font-family: var(--b-fonte-titulo); font-size: var(--b-t-lg); font-weight: 400;
  color: var(--b-tinta); line-height: 1.5; margin: 0;
}
.b-citacao footer {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--b-tinta-3);
}
.b-citacao footer b { color: var(--b-tinta); font-weight: 500; }

/* chamada final */
.b-chamada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--b-e-8); align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem); background: var(--b-esc); color: #fff;
}
.b-chamada h2 { color: #fff; max-width: 16ch; }
.b-chamada p { color: rgba(255,255,255,.75); max-width: 46ch; }
.b-chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--b-e-3); margin-top: var(--b-e-6); }
.b-chamada__lado { position: relative; z-index: 1; }

/* vazio */
.b-vazio {
  grid-column: 1 / -1; padding: var(--b-e-9) var(--b-e-5);
  border: 1px dashed var(--b-linha); color: var(--b-tinta-2); text-align: center;
}
.b-vazio h3 { color: var(--b-tinta); }

/* ==========================================================================
   formulário
   ========================================================================== */

.b-form { padding: var(--b-e-6); background: var(--b-papel-2); border: 1px solid var(--b-linha); }
.b-campos { display: grid; gap: var(--b-e-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--b-e-6); }
.b-campo--largo { grid-column: 1 / -1; }
.b-campo label {
  display: block; margin-bottom: 5px;
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase; color: var(--b-tinta-3);
}
.b-campo input, .b-campo select, .b-campo textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--b-linha); border-radius: var(--b-raio);
  background: var(--b-papel); color: var(--b-tinta);
  font-family: inherit; font-size: var(--b-t-base);
}
.b-campo textarea { resize: vertical; min-height: 110px; }
.b-campo input:focus, .b-campo select:focus, .b-campo textarea:focus {
  outline: none; border-color: var(--b-tinta); background: #fff;
}
.b-form__nota { margin-top: var(--b-e-4); font-size: var(--b-t-xs); color: var(--b-tinta-3); }
.b-form__ok { margin-top: var(--b-e-4); padding: var(--b-e-4); background: var(--b-verde-2); color: var(--b-verde); font-size: var(--b-t-sm); }

/* ==========================================================================
   rodapé
   ========================================================================== */

.b-footer {
  background: var(--b-esc); color: rgba(255,255,255,.66);
  padding-block: var(--b-e-8) var(--b-e-5); font-size: var(--b-t-sm);
}
.b-footer a { color: inherit; text-decoration: none; }
.b-footer a:hover { color: #fff; }
.b-footer__grade { display: grid; gap: var(--b-e-6); grid-template-columns: 1.5fr repeat(3, 1fr); margin-bottom: var(--b-e-7); }
.b-footer h4 {
  color: #fff; font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); font-weight: 500;
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase; margin-bottom: var(--b-e-4);
}
.b-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-e-2); }
.b-footer__base {
  display: flex; flex-wrap: wrap; gap: var(--b-e-3); justify-content: space-between;
  padding-top: var(--b-e-5); border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .06em;
}

/* whatsapp flutuante */
.b-zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--b-esc); color: #fff; box-shadow: var(--b-sombra-2);
  transition: background var(--b-transicao);
}
.b-zap:hover { background: var(--b-teal); color: #fff; }

/* ==========================================================================
   responsivo
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --b-coluna-filtros: 230px; }
  .b-destino-corpo { grid-template-columns: minmax(0, 1fr) 280px; }
  .b-footer__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .b-destino-corpo { grid-template-columns: 1fr; }
  .b-orcamento { position: static; }
  .b-chamada { grid-template-columns: 1fr; }
  .b-buscador { grid-template-columns: 1fr 1fr; }
  .b-buscador .b-btn { grid-column: 1 / -1; padding-block: 1rem; }

  /* filtros viram gaveta */
  .b-catalogo__grade { grid-template-columns: 1fr; gap: var(--b-e-5); }
  .b-abrir-filtros { display: inline-flex; }
  .b-painel {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 80;
    max-height: none; height: 100%; padding: var(--b-e-5);
    background: var(--b-papel); border-left: 1px solid var(--b-linha);
    box-shadow: var(--b-sombra-3); transform: translateX(100%);
    transition: transform var(--b-transicao); overflow-y: auto;
  }
  .b-painel.is-aberto { transform: none; }
  .b-painel__fechar { display: inline-flex; }
  .b-veu {
    position: fixed; inset: 0; z-index: 79; background: rgba(16,43,52,.5);
    opacity: 0; pointer-events: none; transition: opacity var(--b-transicao);
  }
  .b-veu.is-aberto { opacity: 1; pointer-events: auto; }
}

@media (min-width: 981px) {
  .b-veu { display: none; }
}

@media (max-width: 860px) {
  :root { --b-header-h: 62px; }
  .b-menu-botao { display: block; }
  .b-nav {
    position: fixed; inset: var(--b-header-h) 0 auto 0;
    background: var(--b-papel); border-bottom: 1px solid var(--b-linha);
    box-shadow: var(--b-sombra-2); padding: var(--b-e-4) var(--b-gutter); display: none;
  }
  .b-nav.is-aberto { display: block; }
  .b-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .b-nav li + li { border-top: 1px solid var(--b-linha); }
  .b-nav a { display: block; padding: var(--b-e-4) 0; font-size: var(--b-t-sm); }
  .b-header__acoes { display: none; }
  .b-tile--largo { grid-column: span 1; }
  .b-cabecalho-secao { grid-template-columns: 1fr; align-items: start; }
  .b-pilar + .b-pilar { padding-left: 0; border-left: 0; }
  .b-hero__dados { gap: var(--b-e-5); }
}

@media (max-width: 560px) {
  .b-buscador { grid-template-columns: 1fr; }
  .b-footer__grade { grid-template-columns: 1fr; }
  .b-grade { grid-template-columns: 1fr; }
  .b-dia__corpo { padding-left: 0; }
  .b-abas { gap: var(--b-e-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- tira dos 12 meses no painel de filtros -------------------------------
   Mesma linguagem da régua que aparece nos cartões: o ano inteiro à vista,
   um clique escolhe o mês. Ocupa uma linha, não doze. */
.b-mes-tira { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.b-mes {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0 5px; border: 1px solid transparent; border-radius: var(--b-raio-sm);
  background: var(--b-papel-3); color: var(--b-tinta-2); cursor: pointer;
  font-family: var(--b-fonte-dado); font-size: 10px; line-height: 1;
  transition: background var(--b-transicao), color var(--b-transicao);
}
.b-mes:hover:not(:disabled) { background: var(--b-linha); color: var(--b-tinta); }
.b-mes[aria-pressed="true"] { background: var(--b-teal); color: #fff; }
.b-mes:disabled { opacity: .3; cursor: not-allowed; }
.b-mes__n { font-size: 8px; opacity: .7; min-height: 8px; }
.b-mes[aria-pressed="true"] .b-mes__n { opacity: .85; }

/* Selo sobre foto: o vidro sozinho some em foto clara. Um véu escuro por baixo
   garante contraste em qualquer imagem. */
.b-selo--vidro {
  background: rgba(16, 43, 52, .55);
  border-color: rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px) saturate(1.2);
  text-shadow: 0 1px 4px rgba(16, 43, 52, .5);
}

/* A régua de meses no pé do cartão fica junto de um rótulo, para se explicar */
.b-card__pe .b-meses__letras { letter-spacing: .04em; }

/* Sobre foto, o vermelho da agulha some. Ali o rótulo vira claro. */
.b-hero .b-olho, .b-destino-hero .b-olho { color: rgba(255, 255, 255, .82); }
.b-hero .b-olho, .b-destino-hero .b-olho,
.b-hero__linha, .b-hero__dado dt, .b-migalhas { text-shadow: 0 1px 10px rgba(16, 43, 52, .55); }
.b-hero__conteudo h1, .b-destino-hero__conteudo h1 { text-shadow: 0 2px 30px rgba(16, 43, 52, .35); }

/* barras de ritmo dentro de caixa escura */
.b-orcamento .b-blaze__b { background: rgba(255,255,255,.24); }
.b-orcamento .b-blaze__b.on { background: var(--b-teal); }
.b-orcamento .b-blaze__t { color: #fff; }

/* A coordenada e a duração ficam sobre a foto — e a foto pode ser um céu claro.
   Um degradê na base garante leitura em qualquer imagem, sem escurecer o topo. */
.b-card__foto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(16, 43, 52, .55));
  pointer-events: none;
}
.b-card__coord, .b-card__dias { z-index: 1; }

/* ==========================================================================
   MARCA DO CLIENTE — logotipo, ícones e ajuste da Pirulen
   ========================================================================== */

/* --- logotipo ------------------------------------------------------------
   É o arquivo do próprio cliente (assets/marca/logo.png). Não há marca
   desenhada por nós em lugar nenhum. */
.b-logo { display: inline-flex; align-items: center; gap: 0; text-decoration: none; }
.b-logo img { height: 44px; width: auto; display: block; }
.b-footer .b-logo img { height: 48px; filter: brightness(0) invert(1) opacity(.92); }
.b-logo__texto, .b-logo__nome, .b-logo__sub { display: none; }

@media (max-width: 480px) { .b-logo img { height: 34px; } }

/* --- ícones --------------------------------------------------------------
   Um traço só, 1.6px, pontas redondas — a leveza do logotipo. */
.b-icone { width: 18px; height: 18px; flex: none; }

.b-grupo__i { width: 15px; height: 15px; flex: none; color: var(--b-teal); }
.b-grupo__botao { gap: var(--b-e-3); }
.b-grupo__seta { width: 14px; height: 14px; }
.b-ficha__i { width: 14px; height: 14px; flex: none; opacity: .8; }
.b-ficha__rot { display: flex; align-items: center; gap: 6px; }
.b-orcamento__i { width: 14px; height: 14px; flex: none; opacity: .65; }
.b-orcamento__linha dt { display: flex; align-items: center; gap: 6px; }
.b-busca__lupa { width: 16px; height: 16px; }
.b-dia__seta { width: 16px; height: 16px; }
.b-roteiro__i { width: 20px; height: 20px; flex: none; color: var(--b-teal); }
.b-btn .b-icone { width: 15px; height: 15px; }

/* ícone dos pilares — entrou no lugar do "01 / 02 / 03" */
.b-pilar__icone {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: var(--b-e-4);
  border-radius: 50%;
  background: var(--b-teal-claro); color: var(--b-teal);
}
.b-pilar__icone .b-icone { width: 22px; height: 22px; }
.b-secao--escura .b-pilar__icone { background: rgba(255,255,255,.1); color: var(--b-ciano-claro); }

/* --- Pirulen -------------------------------------------------------------
   É uma fonte de display: larga, quadrada, sem contraste. Aguenta títulos
   curtos e rótulos, não aguenta parágrafo. Por isso ela fica em H1/H2 e nos
   rótulos, e o Open Sans leva H3 para baixo e todo o texto corrido. */
h1, h2 { font-family: var(--b-fonte-titulo); font-weight: 400; letter-spacing: .03em; }
h3, h4 { font-family: var(--b-fonte-texto); font-weight: 700; letter-spacing: -.01em; }

.b-rotulo, .b-olho, .b-btn, .b-aba, .b-nav a, .b-contagem, .b-painel__titulo,
.b-grupo__botao, .b-footer h4 {
  font-family: var(--b-fonte-titulo);
  font-weight: 400;
}

/* Pirulen não tem itálico nem pesos; o negrito falso estraga o desenho */
h1 b, h1 strong, h2 b, h2 strong { font-weight: 400; }

.b-card__titulo { font-family: var(--b-fonte-texto); font-weight: 700; letter-spacing: -.01em; }
.b-ficha__val   { font-family: var(--b-fonte-texto); font-weight: 600; letter-spacing: 0; }
.b-dia__rot     { font-family: var(--b-fonte-texto); font-weight: 600; }
.b-numero__v    { letter-spacing: .01em; }
.b-hero__dado dd { font-family: var(--b-fonte-texto); font-weight: 700; letter-spacing: -.01em; }
.b-tile__nome   { font-family: var(--b-fonte-texto); font-weight: 700; letter-spacing: -.01em; }
.b-citacao p    { font-family: var(--b-fonte-texto); font-weight: 400; }

/* --- cor: o teal manda, o ciano acende ----------------------------------- */
.b-olho { color: var(--b-teal); }
.b-secao--escura .b-olho, .b-hero .b-olho, .b-destino-hero .b-olho { color: var(--b-ciano-claro); }
.b-meses__c.on { background: var(--b-teal); }
.b-blaze__b.on { background: var(--b-teal); }
.b-rota__p, .b-rota__l { border-color: var(--b-teal); background-color: var(--b-teal); }
.b-rota__p { background: var(--b-papel-2); }
.b-rota__p:first-child, .b-rota__p:last-child { background: var(--b-teal); }
.b-lista-caixa--sim li::before { content: "+"; color: var(--b-verde); }
.b-lista-caixa--nao li::before { content: "\2212"; color: var(--b-teal); }
.b-mes[aria-pressed="true"] { background: var(--b-teal); }
.b-ativo button:hover { background: var(--b-ciano); color: var(--b-esc); }
.b-zap:hover { background: var(--b-teal); }

/* a espiral do logotipo é um degradê verde→ciano: ele volta como fio de acento */
.b-cabecalho-secao, .b-resultados__topo, .b-painel__topo, .b-abas {
  border-bottom: 0;
  position: relative;
}
.b-cabecalho-secao::after, .b-resultados__topo::after,
.b-painel__topo::after, .b-abas::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--b-verde) 0%, var(--b-ciano) 45%, var(--b-teal) 100%);
  opacity: .9;
}
.b-secao--escura .b-cabecalho-secao::after { opacity: .7; }

/* --- escala da Pirulen ---------------------------------------------------
   Pirulen é larga e quadrada: cresce mal. O site atual da Boreal usa-a a
   25–30px, e é essa a escala em que ela lê bem. Títulos grandes ficam
   menores do que ficariam numa grotesca, com mais entreletra — a proporção
   do próprio logotipo. */
:root {
  --b-t-5xl: 2.6rem;
  --b-t-4xl: 2.15rem;
  --b-t-3xl: 1.75rem;
}
h1 { font-size: clamp(1.7rem, 3.4vw, var(--b-t-5xl)); letter-spacing: .05em; line-height: 1.2; }
h2 { font-size: clamp(1.35rem, 2.4vw, var(--b-t-3xl)); letter-spacing: .045em; line-height: 1.3; }

.b-hero__conteudo h1 { max-width: 15ch; }
.b-hero__linha { font-size: var(--b-t-lg); max-width: 46ch; }
.b-destino-hero__conteudo h1 { max-width: 20ch; }

/* Em caixa alta a Pirulen respira melhor; é como o logotipo se apresenta. */
.b-hero__conteudo h1, .b-destino-hero__conteudo h1 { text-transform: uppercase; }

/* Título em Pirulen não deve passar de duas linhas: a fonte é de display.
   O limite força a concisão em vez de deixar o título esparramar. */
.b-cabecalho-secao h2 { max-width: 20ch; }
.b-chamada h2 { max-width: 14ch; }


/* ==========================================================================
   blocos novos: formulário gravado no painel, contactos e avisos
   ========================================================================== */

/* A isca some da tela mas continua no HTML — é isso que a faz funcionar.
   `display:none` seria pior: robô que lê o CSS aprende a ignorá-la. */
.b-isca {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.b-form-caixa { max-width: 100%; }
.b-form-caixa > h2 { margin-bottom: var(--b-e-2); }
.b-form-caixa__texto { margin-bottom: var(--b-e-5); color: var(--b-tinta-2); max-width: 60ch; }

.b-form__erro {
  margin-bottom: var(--b-e-5); padding: var(--b-e-4);
  background: #fdecec; color: #8a1f1f; font-size: var(--b-t-sm);
  border-radius: var(--b-raio);
}
.b-form__ok {
  margin-bottom: var(--b-e-5); padding: var(--b-e-4);
  background: var(--b-verde-2); color: #4c5a25; font-size: var(--b-t-sm);
  border-radius: var(--b-raio);
}
.b-form__acoes { display: flex; flex-wrap: wrap; gap: var(--b-e-3); align-items: center; }

.b-redes {
  display: flex; flex-wrap: wrap; gap: var(--b-e-3);
  margin-top: var(--b-e-4); font-size: var(--b-t-sm);
}
.b-redes a { text-decoration: underline; text-underline-offset: 3px; }
.b-orcamento__endereco { margin-top: var(--b-e-5); font-size: var(--b-t-xs); line-height: 1.7; }

/* Dentro do Elementor o bloco de contactos é filho de um contêiner que já dá
   o respiro — a caixa não pode trazer margem própria ou desalinha da coluna. */
.elementor-widget-boreal-contatos .b-orcamento,
.elementor-widget-boreal-formulario .b-form-caixa { margin: 0; }


/* Depoimento sobre fundo escuro: a citação em branco, a assinatura em limão.
   O bloco é um texto do Elementor com esta classe — assim o cliente edita o
   depoimento como edita qualquer texto, e a aparência continua sendo do tema. */
.b-citacao--claro p { color: #fff; font-size: var(--b-t-lg); line-height: 1.55; margin: 0 0 var(--b-e-4); }
.b-citacao--claro p:last-child {
  margin: 0; font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.b-citacao--claro p:last-child strong { color: var(--b-limao); font-weight: 500; }

/* Links das redes dentro da caixa escura de contactos. */
.b-orcamento .b-redes a { color: rgba(255,255,255,.82); }
.b-orcamento .b-redes a:hover { color: var(--b-limao); }
.b-orcamento__endereco { color: rgba(255,255,255,.6); }


/* ==========================================================================
   números do catálogo — o bloco nasceu dentro do hero escuro, mas também é
   usado em faixa clara (Quem somos). A cor branca fazia o número sumir.
   ========================================================================== */

.b-hero__dados { border-top-color: var(--b-linha); }
.b-hero__dado dt { color: var(--b-tinta-3); }
.b-hero__dado dd { color: var(--b-tinta); }

.b-hero .b-hero__dados,
.b-destino-hero .b-hero__dados,
.b-hero__dados--sobre-escuro { border-top-color: rgba(255,255,255,.22); }

.b-hero .b-hero__dado dt,
.b-destino-hero .b-hero__dado dt,
.b-hero__dados--sobre-escuro .b-hero__dado dt { color: rgba(255,255,255,.55); }

.b-hero .b-hero__dado dd,
.b-destino-hero .b-hero__dado dd,
.b-hero__dados--sobre-escuro .b-hero__dado dd { color: #fff; }

/* foto da equipa (por ora, a imagem de exemplo do Elementor) */
.b-foto-equipa img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--b-raio-lg); background: var(--b-papel-3);
}

/* ==========================================================================
   popup do pedido de orçamento
   ========================================================================== */

/* O `!important` é de propósito: uma regra de classe vence o atributo hidden,
   e sem isto o popup ficaria à vista no carregamento da página. */
.b-popup[hidden] { display: none !important; }

.b-popup {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--b-e-5);
}
.b-popup__fundo {
  position: absolute; inset: 0;
  background: rgba(13, 59, 68, .62);
  backdrop-filter: blur(2px);
  animation: b-aparece .18s ease-out;
}
.b-popup__caixa {
  position: relative; z-index: 1;
  width: min(680px, 100%); max-height: min(88vh, 900px); overflow-y: auto;
  background: var(--b-papel-2); border-radius: var(--b-raio-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(13, 59, 68, .28);
  animation: b-sobe .22s ease-out;
}
.b-popup__caixa .b-form { padding: 0; border: 0; background: none; }
.b-popup__caixa .b-form-caixa__texto { margin-bottom: var(--b-e-5); }
.b-popup__caixa > .b-olho { margin-bottom: var(--b-e-2); color: var(--b-teal); }

.b-popup__fechar {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  width: 40px; height: 40px; line-height: 1;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--b-tinta-3); font-size: 30px; cursor: pointer;
}
.b-popup__fechar:hover { background: var(--b-papel-3); color: var(--b-tinta); }

@keyframes b-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes b-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .b-popup__fundo, .b-popup__caixa { animation: none; }
}

/* Com o popup aberto, a página de trás não rola junto. */
body.b-travado { overflow: hidden; }

@media (max-width: 640px) {
  .b-popup { padding: 0; align-items: flex-end; }
  .b-popup__caixa { max-height: 92vh; border-radius: var(--b-raio-lg) var(--b-raio-lg) 0 0; width: 100%; }
}

/* ==========================================================================
   PÁGINA DO ROTEIRO — segunda passagem de desenho

   O que estava errado, medido na página no ar:

   1. A faixa de instrumentos (duração, sede, coordenada, ritmo, quando sai)
      nasceu escura, mas o template pintava-a de branco por `style` inline.
      Texto branco sobre branco: 105px de nada por baixo do herói, nas 33
      páginas. Agora o inline saiu e a faixa virou um cartão escuro montado
      sobre a foto — o dado do roteiro é a primeira coisa que se lê.
   2. A caixa de orçamento é `position:sticky`, mas a grade estava em
      `align-items:start`: o `aside` não esticava, a caixa não tinha por onde
      grudar e sobravam ~1.800px de coluna branca no dia a dia.
   3. Medida de leitura de 64ch dentro de uma coluna de 856px — metade da
      largura da página era branco. O corpo fechou para 1080px.
   4. O dia a dia era uma lista de acordeões com um fio cinza. Virou trilho:
      a linha vertical e a marcação do dia dizem "roteiro" sem precisar de
      texto a explicar.
   5. Uma foto na página inteira. A do roteiro volta na faixa de convite,
      antes do rodapé — é a única que existe, e é onde ela ainda vale.
   ========================================================================== */

/* --- 1. faixa de instrumentos: cartão escuro montado sobre a foto -------- */
.b-destino-hero__conteudo { padding-bottom: var(--b-e-8); }
.b-ficha-faixa { background: transparent; }
.b-ficha {
  position: relative; z-index: 3;
  max-width: 1080px; margin: var(--b-e-7) auto 0;
  background: var(--b-esc); color: #fff;
  border-radius: var(--b-raio-lg); box-shadow: var(--b-sombra-2);
  padding: var(--b-e-5) var(--b-e-6); gap: 0; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
/* o fio da espiral do logotipo, como no resto do site */
.b-ficha::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--b-verde) 0%, var(--b-ciano) 45%, var(--b-teal) 100%);
}
.b-ficha__item { padding: var(--b-e-2) var(--b-e-5); border-left: 1px solid rgba(255,255,255,.12); }
.b-ficha__item:first-child { border-left: 0; padding-left: 0; }
.b-ficha-faixa + .b-secao { padding-top: var(--b-e-8); }

/* --- 2. corpo: medida fechada e caixa lateral que gruda de verdade ------- */
.b-destino-corpo {
  align-items: stretch;
  max-width: 1080px; margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) 320px; gap: var(--b-e-7);
}

/* --- 3. abertura do texto ----------------------------------------------- */
.b-destino-intro {
  position: relative; padding-left: var(--b-e-5);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.7;
  color: var(--b-tinta); max-width: 58ch;
}
.b-destino-intro::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 3px;
  border-radius: 2px; background: linear-gradient(180deg, var(--b-verde), var(--b-ciano));
}

/* --- 4. roteiro dia a dia: trilho vertical com as marcações -------------- */
.b-roteiro__resumo { border-radius: var(--b-raio); }
.b-dia { position: relative; padding-left: 72px; border-bottom: 0; }
.b-dia::before {
  content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px;
  background: var(--b-linha);
}
.b-dia:first-child::before { top: 26px; }
.b-dia:last-child::before  { bottom: auto; height: 26px; }
.b-dia + .b-dia .b-dia__botao { border-top: 1px solid var(--b-linha); }
.b-dia__botao { padding: var(--b-e-4) 0; gap: var(--b-e-3); align-items: center; }
.b-dia__n {
  position: absolute; left: 0; top: 14px; z-index: 2;
  width: 52px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--b-raio-pill); background: var(--b-papel-2);
  border: 1.5px solid var(--b-linha); color: var(--b-tinta-3);
  font-size: 10px; letter-spacing: .08em;
  transition: background var(--b-transicao), border-color var(--b-transicao), color var(--b-transicao);
}
.b-dia__botao:hover .b-dia__n { border-color: var(--b-teal); color: var(--b-teal); }
.b-dia__botao[aria-expanded="true"] .b-dia__n {
  background: var(--b-esc); border-color: var(--b-esc); color: #fff;
}
.b-dia__corpo { padding-left: 0; padding-bottom: var(--b-e-6); }

/* --- 5. inclui / não inclui: dois cartões -------------------------------- */
.b-duas { gap: var(--b-e-5); }
.b-lista-caixa {
  background: var(--b-papel-2); border: 1px solid var(--b-linha);
  border-radius: var(--b-raio); padding: var(--b-e-5);
}
.b-lista-caixa li { padding-left: 1.9rem; }
.b-lista-caixa li::before {
  width: 18px; height: 18px; top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.b-lista-caixa--sim li::before { content: "\2713"; background: var(--b-verde-2); color: #5f7327; }
.b-lista-caixa--nao li::before { content: "\2715"; background: var(--b-papel-3); color: var(--b-tinta-3); }

/* --- 6. faixa de convite: a foto do roteiro volta antes do rodapé -------- */
.b-convite { position: relative; overflow: hidden; background: var(--b-esc); }
.b-convite__fundo { position: absolute; inset: 0; }
.b-convite__fundo img { width: 100%; height: 100%; object-fit: cover; }
.b-convite__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,59,68,.94) 0%, rgba(13,59,68,.72) 55%, rgba(13,59,68,.35) 100%);
}
.b-convite__conteudo {
  position: relative; z-index: 2; color: #fff; padding-block: var(--b-e-8);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--b-e-6); align-items: center;
}
.b-convite h2 { color: #fff; max-width: 14ch; margin-bottom: var(--b-e-3); }
.b-convite p { color: rgba(255,255,255,.78); max-width: 42ch; margin: 0; }
.b-convite__acoes { display: flex; flex-wrap: wrap; gap: var(--b-e-3); }

/* As regras acima vêm depois das @media originais do ficheiro e ganhariam
   delas por ordem — por isso a grade do corpo é repetida aqui em cada ponto
   de quebra. Sem isto o `aside` de 320px estoura a tela a 390px. */
@media (max-width: 1024px) {
  .b-ficha { max-width: none; }
  .b-destino-corpo { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--b-e-6); }
}
@media (max-width: 900px) {
  .b-destino-corpo { grid-template-columns: 1fr; max-width: none; }
  .b-destino-hero__conteudo { padding-bottom: var(--b-e-6); }
  .b-ficha { margin-top: var(--b-e-6); border-radius: var(--b-raio); padding: var(--b-e-5); }
  .b-ficha__item { border-left: 0; padding-inline: 0; }
  .b-convite__conteudo { grid-template-columns: 1fr; padding-block: var(--b-e-7); }
  .b-convite h2, .b-convite p { max-width: none; }
}
@media (max-width: 640px) {
  .b-dia { padding-left: 0; }
  .b-dia::before { display: none; }
  .b-dia__botao { flex-wrap: wrap; }
  .b-dia__n { position: static; margin-bottom: var(--b-e-2); }
}


/* ==========================================================================
   04/09 — ajustes pedidos depois do redesenho
   ========================================================================== */

/* --- herói de foto pequena -----------------------------------------------
   20 das 33 fotos têm menos de 1920px de largura e 16 têm menos de 1200 (a
   pior tem 395px). Espalhadas por 78vh de herói viram borrão. Não há CSS que
   invente pixel: o que dá para fazer é pedir menos aumento à foto, e é o que
   esta classe faz — o `single-destino.php` põe-na quando o ficheiro de origem
   é estreito. O conserto de verdade é o cliente mandar as fotos boas (lista em
   FOTOS-QUE-PRECISAM-DE-SUBSTITUICAO.txt). */
.b-destino-hero--curto { min-height: min(52vh, 430px); }
.b-destino-hero--curto .b-destino-hero__conteudo { padding-block: var(--b-e-7) var(--b-e-6); }

/* --- os três pilares da home ---------------------------------------------
   Ecoturismo / Trekking / Boreal em Movimento estavam soltos, sem nada a
   separá-los. O tema já tinha o desenho certo em `.b-pilar` (fio de 1px entre
   irmãos, que some no celular); estes três nasceram no Elementor e não o
   herdaram. Os ids vêm do `paginas/home.json` — foram escritos por nós, não
   sorteados pelo Elementor. */
.elementor-element-1a2b43,
.elementor-element-1a2b44 { border-left: 1px solid var(--b-linha); padding-left: var(--b-e-6); }
.elementor-element-1a2b42,
.elementor-element-1a2b43 { padding-right: var(--b-e-6); }

@media (max-width: 860px) {
  .elementor-element-1a2b43,
  .elementor-element-1a2b44 {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--b-linha); padding-top: var(--b-e-5);
  }
  .elementor-element-1a2b42,
  .elementor-element-1a2b43 { padding-right: 0; }
}

/* --- menu do celular em barra lateral -------------------------------------
   Era um painel que descia por baixo do cabeçalho e só tinha os 4 links. Vira
   gaveta pela direita — o mesmo gesto dos filtros do catálogo — e leva junto
   o que a pessoa procura no telemóvel: os dois botões e os contactos. */
.b-nav__extra { display: none; }
.b-nav__acoes { display: grid; gap: var(--b-e-2); }
.b-nav__acoes .b-btn { width: 100%; }
.b-nav__dados { margin: var(--b-e-5) 0 0; }
.b-nav__dados > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-e-3);
  padding: var(--b-e-3) 0; border-top: 1px solid var(--b-linha);
}
.b-nav__dados dt {
  margin: 0; font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase; color: var(--b-tinta-3);
}
.b-nav__dados dd {
  margin: 0; font-size: var(--b-t-sm); font-weight: 600; color: var(--b-tinta); text-align: right;
}
.b-nav__redes { display: flex; gap: var(--b-e-4); margin: var(--b-e-5) 0 0; }
.b-nav-veu {
  display: none; position: fixed; inset: 0; z-index: 94; background: rgba(16,43,52,.5);
  opacity: 0; pointer-events: none; transition: opacity var(--b-transicao);
}
.b-nav-veu.is-aberto { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  /* A gaveta e o véu nascem dentro do cabeçalho, logo dentro do contexto de
     empilhamento dele: por isso o cabeçalho sobe a 95 (fica acima da página)
     e o logótipo e o botão sobem a 96 (ficam acima da própria gaveta — senão
     a gaveta tapa o botão que a fecha).

     Os lados vão em `top/right/bottom/left` e não em `inset`: a regra antiga
     desta mesma media query usa `inset` e as duas a disputarem a mesma
     propriedade-atalho é receita para o meio-termo que ninguém quer. O
     selector leva `.b-header` à frente só para não haver dúvida de quem ganha. */
  /* O `backdrop-filter` do cabeçalho fazia dele o bloco que contém os
     `position:fixed` de dentro: a gaveta ficava presa aos 63px do cabeçalho
     em vez de ocupar a tela — abria com 134px de altura e o menu cortado.
     No telemóvel o desfoque sai e o fundo passa a ser opaco. */
  .b-header {
    z-index: 95;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--b-papel);
  }
  .b-logo, .b-menu-botao { position: relative; z-index: 96; }

  .b-header .b-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(340px, 86vw); max-width: 340px;
    z-index: 90; display: block; margin-left: 0;
    background: var(--b-papel); border-left: 1px solid var(--b-linha); border-bottom: 0;
    box-shadow: var(--b-sombra-3);
    padding: calc(var(--b-header-h) + var(--b-e-5)) var(--b-e-5) var(--b-e-7);
    overflow-y: auto; overscroll-behavior: contain;
    /* `display:none` não anima; a gaveta sai de cena por transform, e a
       `visibility` só desaparece no fim para não ficar tabulável fechada */
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--b-transicao), visibility 0s linear 200ms;
  }
  .b-header .b-nav.is-aberto {
    display: block; transform: translateX(0); visibility: visible; transition-delay: 0s;
  }
  .b-nav a { font-size: var(--b-t-base); }
  .b-nav__extra { display: block; margin-top: var(--b-e-6); }
  .b-nav__redes a { display: inline; padding: 0; font-size: var(--b-t-sm); }
  .b-nav-veu { display: block; }
}

/* --- crédito de quem fez -------------------------------------------------- */
.b-feito-por {
  display: inline-flex; align-items: center; gap: var(--b-e-2);
  text-decoration: none; opacity: .8; transition: opacity var(--b-transicao);
}
.b-feito-por:hover { opacity: 1; }
.b-feito-por span { font-family: var(--b-fonte-dado); font-size: var(--b-t-xs); letter-spacing: .06em; }
.b-feito-por img { width: auto; height: 24px; display: block; }


/* --- home: o bloco "O que fazemos" ao centro no telemóvel ----------------
   Os três pilares por baixo já são centrados; o cabeçalho ficava alinhado à
   esquerda e a secção parecia partida ao meio. O id é o do
   `paginas/home.json`. */
@media (max-width: 860px) {
  /* O texto mora em contentores aninhados que o Elementor alinha por conta
     própria — centrar só o de fora não desce. Daí o `!important` e a lista de
     descendentes: é regra de telemóvel a discutir com CSS gerado, não há
     selector "limpo" que ganhe. */
  .elementor-element-1a2b3e,
  .elementor-element-1a2b3e .e-con,
  .elementor-element-1a2b3e .elementor-widget-container,
  .elementor-element-1a2b3e .elementor-heading-title,
  .elementor-element-1a2b3e p { text-align: center !important; }
  .elementor-element-1a2b3e,
  .elementor-element-1a2b3e .e-con { align-items: center; }
}


/* ==========================================================================
   1.5.0 — herói em carrossel, câmbio, blog, documentos no rodapé
   ========================================================================== */

/* --- herói em carrossel ----------------------------------------------------
   Os slides são contentores do Elementor com a classe `b-slide-heroi`. Antes
   de o JS os juntar (ou sem JS), só o primeiro aparece. No editor, todos. */
body:not(.elementor-editor-active) .b-slide-heroi + .b-slide-heroi:not(.b-slide-heroi--viva) { display: none; }

.b-heroi-carrossel { position: relative; display: grid; overflow: hidden; }
/* Todos na mesma célula: a moldura fica com a altura do slide mais alto e
   nada pula quando um troca pelo outro. */
.b-heroi-carrossel > .b-slide-heroi {
  grid-area: 1 / 1; width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.b-heroi-carrossel > .b-slide-heroi.is-ativo {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity 900ms ease, visibility 0s;
}

.b-heroi-carrossel__ctrl {
  position: absolute; z-index: 3; left: 50%; bottom: var(--b-e-5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--b-e-2);
  padding: 4px; border-radius: var(--b-raio-pill);
  background: rgba(13, 59, 68, .55); border: 1px solid rgba(255, 255, 255, .18);
}
.b-heroi-carrossel__pontos { display: flex; gap: 2px; }
.b-heroi-carrossel__ponto,
.b-heroi-carrossel__seta {
  appearance: none; border: 0; background: none; cursor: pointer; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
}
.b-heroi-carrossel__seta:hover { background: rgba(255, 255, 255, .14); }
.b-heroi-carrossel__ponto::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transition: background var(--b-transicao), width var(--b-transicao);
}
.b-heroi-carrossel__ponto[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--b-limao); }
.b-heroi-carrossel__ponto:focus-visible,
.b-heroi-carrossel__seta:focus-visible { outline: 2px solid var(--b-limao); outline-offset: 1px; }

/* O controlo mora no rodapé do herói; o slide 1 tem a busca por cima dele. */
.b-heroi-carrossel > .b-slide-heroi { padding-bottom: max(var(--padding-bottom, 80px), 88px) !important; }

@media (max-width: 640px) {
  .b-heroi-carrossel__ctrl { bottom: var(--b-e-4); }
  .b-heroi-carrossel__seta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-heroi-carrossel > .b-slide-heroi,
  .b-heroi-carrossel > .b-slide-heroi.is-ativo { transition: none; }
}

/* --- câmbio ---------------------------------------------------------------- */
.b-cambio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b-e-2) var(--b-e-5);
  font-family: var(--b-fonte-dado); font-size: var(--b-t-sm); color: var(--b-tinta-2);
}
.b-cambio__tit {
  font-size: var(--b-t-xs); letter-spacing: var(--b-espaco-rotulo); text-transform: uppercase;
  color: var(--b-tinta-3);
}
.b-cambio__moeda { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.b-cambio__val { color: var(--b-tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-cambio__var { font-size: var(--b-t-xs); font-variant-numeric: tabular-nums; }
.b-cambio__var--sobe  { color: #b0452f; }   /* real perde: viagem fica mais cara */
.b-cambio__var--desce { color: #3d7f4e; }
.b-cambio__var--igual { color: var(--b-tinta-3); }
.b-cambio__hora { color: var(--b-tinta-3); font-size: var(--b-t-xs); }

/* A faixa acima do cabeçalho: escura, fina, não gruda ao rolar. */
.b-cambio-faixa { background: var(--b-esc); }
.b-cambio-faixa .b-cambio { min-height: 34px; align-items: center; justify-content: flex-end; color: rgba(255, 255, 255, .7); }
.b-cambio-faixa .b-cambio__tit,
.b-cambio-faixa .b-cambio__hora { color: rgba(255, 255, 255, .5); }
.b-cambio-faixa .b-cambio__val { color: #fff; }
.b-cambio-faixa .b-cambio__var--sobe  { color: #f3a08c; }
.b-cambio-faixa .b-cambio__var--desce { color: var(--b-limao); }
.b-cambio-faixa .b-cambio__var--igual { color: rgba(255, 255, 255, .5); }

/* O bloco (shortcode / widget). */
.b-cambio--cartao {
  padding: var(--b-e-5); gap: var(--b-e-4) var(--b-e-6);
  background: var(--b-papel-2); border: 1px solid var(--b-linha); border-radius: var(--b-raio-lg);
}
.b-cambio--cartao .b-cambio__tit { flex-basis: 100%; }
.b-cambio--cartao .b-cambio__moeda { flex-direction: column; gap: 2px; }
.b-cambio--cartao .b-cambio__val { font-size: var(--b-t-xl); }

/* No telemóvel a faixa fica só com o essencial numa linha. */
@media (max-width: 640px) {
  .b-cambio-faixa .b-cambio { justify-content: center; gap: var(--b-e-4); min-height: 30px; font-size: var(--b-t-xs); }
  .b-cambio-faixa .b-cambio__tit,
  .b-cambio-faixa .b-cambio__var,
  .b-cambio-faixa .b-cambio__hora { display: none; }
}

/* --- documentos no rodapé ---------------------------------------------------- */
.b-footer__legais a { color: inherit; }

/* --- tabela de preços dos roteiros (Guatemala e os que vierem em texto) ---- */
.b-tabela-precos { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--b-e-4); }
.b-tabela-precos table { min-width: 560px; margin-bottom: 0; }
.b-tabela-precos td:nth-child(n+4), .b-tabela-precos th:nth-child(n+4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-tabela-precos td[rowspan] { vertical-align: middle; font-weight: 600; color: var(--b-tinta); }

/* --- blog: o artigo ---------------------------------------------------------- */
.b-artigo__topo { background: var(--b-esc); color: #fff; padding-block: var(--b-e-8) var(--b-e-7); }
.b-artigo__topo h1 { color: #fff; max-width: 22ch; margin-bottom: var(--b-e-4); }
.b-artigo__topo .b-olho { color: var(--b-ciano-claro); }
.b-artigo__topo .b-migalhas { margin-bottom: var(--b-e-5); }
.b-artigo__meta { color: rgba(255, 255, 255, .7); font-size: var(--b-t-sm); display: flex; gap: var(--b-e-2); flex-wrap: wrap; margin: 0; }
.b-artigo__capa { margin: calc(var(--b-e-6) * -1) auto 0; max-width: 1080px; }
.b-artigo__capa img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--b-raio-lg); box-shadow: var(--b-sombra-2); }
.b-artigo__corpo .b-conteudo { margin-inline: auto; font-size: var(--b-t-lg); }
.b-artigo__corpo .b-conteudo h2 { margin-top: var(--b-e-7); }
.b-artigo__corpo .b-conteudo h3 { margin-top: var(--b-e-6); }
.b-artigo__corpo .b-conteudo img { height: auto; border-radius: var(--b-raio); }
.b-artigo__convite {
  max-width: var(--b-largura-texto); margin: var(--b-e-7) auto 0; padding: var(--b-e-6);
  background: var(--b-teal-claro); border-radius: var(--b-raio-lg);
}
.b-artigo__convite p { margin-bottom: var(--b-e-4); }
.b-artigo__convite p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: var(--b-e-3); }
.b-artigo__outros { background: var(--b-papel-3); }

/* Os slides 2 e 3 trazem fotos mais claras que a do slide 1 (Lençóis é
   areia branca e céu): a mesma camada do slide 1 (41% → 17%) deixava o texto
   branco a boiar. Nestes a camada sobe para ~61% → 26%, e o texto dos três
   ganha a mesma sombra que o herói dos roteiros já usa. */
.b-heroi-carrossel > .b-slide-heroi:not(:first-child)::before { opacity: .75 !important; }
.b-heroi-carrossel .elementor-heading-title,
.b-heroi-carrossel .elementor-widget-text-editor { text-shadow: 0 2px 24px rgba(16, 43, 52, .45); }

/* --- 1.5.5: fotos que devem preencher a caixa -------------------------------
   O frontend do Elementor traz `.elementor img { height:auto; max-width:100% }`
   e carrega depois do tema: com a mesma especificidade, ganhava do
   `height:100%` e a foto ficava com a altura natural. No mosaico «Para onde a
   Boreal leva» um cartão de 251×260 recebia uma foto de 251×188 e sobrava uma
   faixa vazia em baixo. O `.elementor` à frente deixa a regra do tema mais
   forte só onde há conflito. */
.elementor .b-tile img,
.elementor .b-card__foto img,
.elementor .b-hero__fundo img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* --- 1.5.5: o mosaico de países fecha a grade ------------------------------
   As colunas vêm do PHP (--b-mosaico-cols), escolhidas para a última linha
   ficar cheia. */
@media (min-width: 861px) {
  .b-mosaico { grid-template-columns: repeat(var(--b-mosaico-cols, 4), minmax(0, 1fr)); }
  .b-tile--fecha { grid-column: span var(--b-tile-span, 1); }
}
@media (min-width: 541px) and (max-width: 860px) {
  .b-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-tile--ultimo-impar { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .b-mosaico { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Depoimentos e Fotos (1.6.0) — painéis «Depoimentos» e «Fotos»
   ========================================================================== */

/* Home e faixas escuras: três colunas de citação, como o desenho já tinha. */
.b-deps--claro {
  display: grid; gap: var(--b-e-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.b-dep { margin: 0; }
.b-dep--claro { display: grid; gap: var(--b-e-4); align-content: start; }
.b-dep--claro .b-dep__foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--b-limao);
}
.b-dep--claro .b-dep__texto, .b-dep--claro .b-dep__texto p {
  color: #fff; font-size: var(--b-t-lg); line-height: 1.55; margin: 0;
}
.b-dep--claro .b-dep__texto p + p { margin-top: var(--b-e-3); }
.b-dep__quem {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--b-tinta-3);
}
.b-dep__quem strong { color: var(--b-tinta); font-weight: 500; }
.b-dep__quem a { color: inherit; }
.b-dep--claro .b-dep__quem { color: rgba(255,255,255,.6); }
.b-dep--claro .b-dep__quem strong { color: var(--b-limao); }
.b-deps__mais { margin: var(--b-e-6) 0 0; }
.b-deps__mais a { font-weight: 600; }
.b-secao--escura .b-deps__mais a, .e-con .b-deps--claro + .b-deps__mais a { color: var(--b-limao); }

/* Página /depoimentos/ e página do roteiro: foto ao lado do texto. */
.b-deps--cartao { display: grid; gap: var(--b-e-6); max-width: 920px; }
.b-dep--cartao {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--b-e-6);
  padding: var(--b-e-6); background: var(--b-papel-2);
  border: 1px solid var(--b-linha); border-radius: var(--b-raio-lg);
  scroll-margin-top: calc(var(--b-header-h) + var(--b-e-5));
}
.b-dep--cartao:not(:has(.b-dep__midia)) { grid-template-columns: minmax(0, 1fr); }
.b-dep--cartao .b-dep__foto {
  width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: var(--b-raio);
}
.b-dep--cartao .b-dep__texto { color: var(--b-tinta-2); max-width: var(--b-largura-texto); }
.b-dep--cartao .b-dep__texto p { margin: 0 0 var(--b-e-3); }
.b-dep--cartao .b-dep__texto::before {
  content: "“"; display: block; font-family: var(--b-fonte-titulo);
  font-size: 3.2rem; line-height: .6; color: var(--b-teal); margin-bottom: var(--b-e-2);
}
.b-dep--cartao .b-dep__quem { margin-top: var(--b-e-3); }
@media (max-width: 640px) {
  .b-dep--cartao { grid-template-columns: 1fr; padding: var(--b-e-5); }
  .b-dep--cartao .b-dep__foto { width: 96px; }
}

/* /fotos/ — grade de galerias. */
.b-gal-grade {
  display: grid; gap: var(--b-e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.b-gal-cartao { display: grid; gap: var(--b-e-1); color: var(--b-tinta); text-decoration: none; }
.b-gal-cartao__foto {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--b-raio); background: var(--b-papel-3);
}
.elementor .b-gal-cartao__foto img,
.b-gal-cartao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--b-transicao); }
.b-gal-cartao:hover .b-gal-cartao__foto img { opacity: .86; }
.b-gal-cartao__titulo { font-weight: 600; margin-top: var(--b-e-2); line-height: 1.3; }
.b-gal-cartao:hover .b-gal-cartao__titulo { color: var(--b-teal); }
.b-gal-cartao__qtd {
  font-family: var(--b-fonte-dado); font-size: var(--b-t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--b-tinta-3);
}

/* Uma galeria — miniaturas quadradas. */
.b-fotos {
  display: grid; gap: var(--b-e-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.b-fotos__item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--b-raio-sm); background: var(--b-papel-3); }
.elementor .b-fotos__item img,
.b-fotos__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--b-transicao); }
.b-fotos__item:hover img { transform: scale(1.03); }
@media (max-width: 480px) { .b-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Visualizador. */
html.b-visor-aberto { overflow: hidden; }
.b-visor {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center;
  background: rgba(6, 22, 26, .94);
}
.b-visor[hidden] { display: none; }
.b-visor__quadro { margin: 0; display: grid; justify-items: center; gap: var(--b-e-3); }
.b-visor__quadro img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--b-raio-sm); }
.b-visor__quadro figcaption {
  color: rgba(255,255,255,.75); font-family: var(--b-fonte-dado);
  font-size: var(--b-t-xs); letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.b-visor button {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-size: 2.6rem; line-height: 1; width: 56px; height: 56px; border-radius: 50%;
}
.b-visor button:hover, .b-visor button:focus-visible { background: rgba(255,255,255,.12); }
.b-visor__fechar { position: absolute; top: 12px; right: 12px; font-size: 2rem !important; }
@media (max-width: 640px) {
  .b-visor { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .b-visor__seta { position: absolute; bottom: 16px; }
  .b-visor__seta--ant { left: 16px; }
  .b-visor__seta--prox { right: 16px; }
  .b-visor__quadro img { max-height: calc(100vh - 160px); }
}