/* Destinei Viagens · Componentes
   Requer tokens/tokens.css e css/base.css. */

/* ============ Logo ============ */
.logo { display: inline-block; padding: calc(var(--logo-h-min) / 2); }
.logo img { width: var(--logo-w-header); }
.logo--negativo img { filter: brightness(0) invert(1); }  /* protótipo; use o arquivo negativo em produção */

/* ============ Botões ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 700 .9375rem/1 var(--font-display);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--ease);
}
.btn:disabled {
  background: var(--color-bg-alt); color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
  box-shadow: none; transform: none; cursor: not-allowed;
}

.btn-primary {
  background: var(--grad-action); color: #fff; border: none;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover  { box-shadow: var(--shadow-cta-hover); transform: var(--lift); }
.btn-primary:active {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, #006CBE 100%);
  transform: translateY(0); box-shadow: 0 4px 10px rgb(0 100 180 / .30);
}

.btn-secondary {
  background: var(--color-bg); color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
}
.btn-secondary:hover {
  background: var(--color-secondary-soft);
  box-shadow: 0 6px 16px rgb(0 100 180 / .15);
  transform: var(--lift);
}

.link-arrow {
  font: 700 .9375rem/1 var(--font-display);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--color-primary-hover); border-color: var(--color-primary); text-decoration: none; }

/* ============ Chips de filtro ============ */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 700 var(--text-xs)/1 var(--font-display);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  cursor: pointer; transition: var(--ease);
}
.chip:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.chip[aria-pressed='true'] {
  background: var(--grad-action); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgb(0 100 180 / .25);
}

/* ============ Card de destino ============ */
.card-destino {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: var(--ease);
}
.card-destino:hover { box-shadow: var(--shadow-3); transform: var(--lift-card); }
.card-destino figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.card-destino img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-destino:hover img { transform: scale(1.04); }
.card-destino__body { padding: var(--space-6); }
.card-destino__titulo {
  font: 700 1.25rem/1.25 var(--font-display);
  margin: 0 0 var(--space-2) 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-destino__meta { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0 0 var(--space-5, 20px) 0; }
.card-destino__footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--color-border); padding-top: var(--space-4);
}
.card-destino__preco { font: 800 1.375rem/1 var(--font-display); color: var(--color-primary); }
.card-destino__ancora { font-size: var(--text-xs); color: var(--color-ink-soft); }
/* Variante neomórfica — só quando o card está sobre Névoa */
.card-destino--neo { background: var(--color-bg-alt); box-shadow: var(--shadow-neo); }

.etiqueta {  /* categoria sobre a foto */
  position: absolute; top: var(--space-4); left: var(--space-4);
  font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-ink);
  background: rgb(255 255 255 / .75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); padding: 6px 14px;
}

/* ============ Barra de busca ============ */
.busca {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo-panel);
  padding: var(--space-5, 20px);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
}
.busca__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.busca__campo--destino   { flex: 2 1 220px; }
.busca__campo--datas     { flex: 1.4 1 160px; }
.busca__campo--viajantes { flex: 1 1 130px; }
.busca__campo > label {
  font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-ink-soft);
}
.busca input, .busca select {
  font: 400 .9375rem/1.4 var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-neo-inset);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  outline: none;
  transition: var(--ease);
}
.busca input:focus, .busca select:focus {
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(0 160 240 / .20);
}
.busca .btn-primary { flex: 1 0 auto; }
@media (max-width: 640px) {
  .busca { flex-direction: column; align-items: stretch; }
  .busca .btn-primary { width: 100%; justify-content: center; }
}

/* Campo em erro */
.campo--erro input, .campo--erro select { border-color: var(--color-error); box-shadow: none; }
.campo__erro {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--color-error); margin-top: 6px;
}

/* ============ Header flutuante (seção 10 · Navegação) ============
   Vidro fosco sobre o hero; barra branca sólida ao rolar.
   Markup canônico:
   <header class="header">
     <a class="header__logo">…</a>
     <nav class="header__nav" id="nav-primaria">…<a class="header__cta">…</a></nav>
     <button class="header__burger" aria-controls="nav-primaria" aria-expanded="false">…</button>
   </header>
   ================================================================ */
.header {
  position: sticky; top: var(--space-4); z-index: var(--z-header);
  margin-inline: var(--space-4);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2);
  transition: var(--ease);
}
.header--rolado { background: rgb(255 255 255 / .92); box-shadow: var(--shadow-1); }
@supports not (backdrop-filter: blur(1px)) {
  .header { background: rgb(255 255 255 / .92); }
}
.header__logo { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.header__logo img { width: var(--logo-w-header); height: auto; }

.header__nav,
.header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font: 500 var(--text-sm)/1 var(--font-display); }
.header__nav a,
.header nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;                       /* alvo de toque — regra 4 do DS */
  color: var(--color-ink); border-bottom: 2px solid transparent;
}
.header__nav a:hover,
.header nav a:hover { color: var(--color-primary); text-decoration: none; }
.header__nav a[aria-current='page'],
.header nav a[aria-current='page'] { color: var(--color-primary); border-bottom-color: var(--color-secondary); }

/* CTA — um único primário por bloco */
.header__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 700 var(--text-sm)/1 var(--font-display);
  color: var(--color-on-primary, #fff) !important;
  background: var(--grad-action); border: none; border-radius: var(--radius-sm);
  padding: 0 22px; min-height: 44px;
  box-shadow: var(--shadow-cta); transition: var(--ease); cursor: pointer;
}
.header__cta:hover { transform: var(--lift); box-shadow: var(--shadow-cta-hover); text-decoration: none; border-bottom-color: transparent; }
.header__cta[aria-current='page'] { border-bottom-color: transparent; }

/* Hambúrguer — só no mobile */
.header__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--glass-border-ink, rgb(0 100 180 / .15));
  border-radius: var(--radius-sm); color: var(--color-ink); cursor: pointer;
  transition: var(--ease);
}
.header__burger:hover { background: var(--color-bg-alt); }

/* Instagram no header */
.header__insta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex-shrink: 0;
  color: var(--color-ink); border-bottom: none; transition: var(--ease);
}
.header__insta:hover { color: var(--color-primary); }
.header__insta svg { width: 22px; height: 22px; }
.header__insta--bar { display: none; }   /* aparece só no mobile */

/* Grupo de ações à direita (ícone IG + hambúrguer) — só no mobile */
.header__actions { display: none; }

/* ---- Mobile: dropdown que abre para baixo, links empilhados ---- */
@media (max-width: 900px) {
  .header { flex-wrap: nowrap; gap: var(--space-3); }
  .header__logo img { width: 120px; }   /* mais folga p/ os ícones da barra */
  .header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
  .header__burger { display: inline-flex; }
  .header__fechar { display: none; }   /* o próprio hambúrguer abre e fecha */
  .header__insta--nav { display: none; }        /* some do dropdown */
  .header__insta--bar { display: inline-flex; } /* aparece na barra, antes do hambúrguer */
  .header__nav {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
    z-index: var(--z-modal);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .header__nav[data-aberto='true'] { opacity: 1; visibility: visible; transform: none; }
  .header__nav a {
    min-height: 52px; display: flex; align-items: center;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .header__nav a[aria-current='page'] { border-bottom-color: var(--color-secondary); }
  .header__nav .header__cta {
    justify-content: center; margin-top: var(--space-3);
    min-height: 48px; border-radius: var(--radius-sm);
    border-bottom: none;
  }
}
@media (min-width: 901px) { .header__fechar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .header__nav { transition: none; }
}

/* ============ Footer ============ */
.footer { background: var(--color-ink); color: #fff; padding: var(--space-14, 56px) var(--space-8) var(--space-8); }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-12);
  padding-bottom: var(--space-12); border-bottom: 1px solid rgb(255 255 255 / .15);
}
.footer h2, .footer .label { color: var(--color-secondary); }
.footer a { color: rgb(255 255 255 / .85); }
.footer a:hover { color: #fff; }
.footer__base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-6); font-size: 13px; color: rgb(255 255 255 / .55);
}
@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ============ Fotografia com texto ============ */
.foto-texto { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.foto-texto::after {
  content: ''; position: absolute; inset: 0; background: var(--overlay-base);
}
.foto-texto--veu::after { background: var(--overlay-veil); }
.foto-texto > .conteudo {
  position: absolute; inset-inline: var(--space-6); bottom: var(--space-5, 20px); z-index: 1; color: #fff;
}
.foto-texto--veu > .conteudo {
  inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-6);
}

/* ============ Vidro fosco genérico ============ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
@supports not (backdrop-filter: blur(1px)) { .glass { background: rgb(255 255 255 / .92); } }

/* ============ Feedback ============ */
.alerta {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-radius: var(--radius-md); padding: var(--space-4);
  font-size: var(--text-sm);
  border-left: 4px solid currentColor;
  background: var(--color-bg-alt);
}
.alerta--sucesso { color: var(--color-success); }
.alerta--aviso   { color: var(--color-warning); }
.alerta--erro    { color: var(--color-error); }
.alerta--info    { color: var(--color-primary); }
.alerta p { color: var(--color-ink); margin: 0; }