/* ==========================================================================
   Hotel Pousada Aquários — style.css

   Fase 1: base do projeto (tokens de identidade + reset + tipografia base).
   Fase 2: design system (tipografia, espaçamentos, botões, cards, mídia).
   Fase 3: header, navegação responsiva e botão flutuante de WhatsApp.
   Fase 4: hero, mosaico de fotos, avaliações e rodapé.
   Fase 5: cabeçalho de página, estado vazio e ficha de dados.
   Fase 6: galeria e área do mapa.
   Fase 8: ícones em SVG inline no lugar da fonte de ícones.

   Sumário
     1. Fontes
     2. Tokens da identidade
     3. Overrides do Bootstrap
     4. Base e reset
     5. Tipografia
     6. Layout
     7. Links
     8. Botões
     9. Cards
    10. Mídia e imagens
    11. Pills, divisores e detalhes
    12. Acessibilidade
    13. Utilitários
    14. Tela provisória de setup (remover a partir da Fase 3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes
   Figtree variável, self-hosted (nenhuma requisição a terceiros).
   Um único arquivo cobre os pesos 300–900, ~20 KB no subset latin.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('../fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens da identidade
   Cores extraídas da logo (img/logo.png): azul do globo, azul escuro para
   contraste e o dourado do lettering "Aquários".
   Todo contraste anotado foi verificado em WCAG 2.1.
   -------------------------------------------------------------------------- */
:root {
  /* --- Azuis: base da identidade --- */
  --aquarios-primary:        #1A5FC2;  /* 6.07:1 com branco — AA texto normal */
  --aquarios-primary-hover:  #164FA3;  /* hover de superfícies azuis */
  --aquarios-primary-dark:   #0A2F63;  /* 13.1:1 com branco — títulos, rodapé */
  --aquarios-primary-deep:   #071E3F;  /* 16.6:1 com branco — fundos profundos */
  --aquarios-primary-soft:   #E8F0FB;  /* tinte para seções alternadas */

  /* --- Dourado: secundária, uso pontual (nunca dominante) --- */
  --aquarios-gold:           #F0C419;  /* preenchimento; 9.75:1 com --aquarios-text */
  --aquarios-gold-hover:     #DBB110;
  /* Versão escura para texto e ícones. Era #C9880A (3.00:1), documentado
     como "só texto grande" — mas .aq-eyebrow é 13px bold, que não conta
     como texto grande em WCAG. O Lighthouse pegou. Este valor passa em AA
     para texto normal nos três fundos claros: branco 5.46:1, bg-alt 5.03:1,
     primary-soft 4.76:1. */
  --aquarios-gold-dark:      #8F6006;

  /* --- Superfícies e texto --- */
  --aquarios-bg:             #FFFFFF;
  --aquarios-bg-alt:         #F2F6FB;
  --aquarios-text:           #17212E;  /* 16.2:1 com branco */
  --aquarios-text-muted:     #5A6675;  /* 5.85:1 com branco — AA texto normal */
  --aquarios-text-invert:    #FFFFFF;
  --aquarios-border:         #DBE3EC;
  --aquarios-border-strong:  #B9C6D6;

  /* --- WhatsApp: canal principal de conversão ---
     O verde oficial #25D366 tem só 1.98:1 com branco e reprova em WCAG,
     tanto para texto quanto para componentes. Superfícies clicáveis usam a
     variação escura da própria paleta do WhatsApp; o verde claro fica
     reservado a preenchimento de ícone sobre fundo escuro. */
  --aquarios-whatsapp:       #0F7A6C;  /* 5.22:1 com branco — AA */
  --aquarios-whatsapp-hover: #0B6157;
  --aquarios-whatsapp-light: #25D366;  /* só sobre fundo escuro */

  /* --- Tipografia --- */
  --aquarios-font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI',
                        Roboto, 'Helvetica Neue', Arial, sans-serif;
  --aquarios-font-heading: var(--aquarios-font-base);

  /* Escala tipográfica fluida: mínimo em 320px, máximo em ~1400px */
  --aquarios-fs-h1:      clamp(2rem,     1.35rem + 3.2vw, 3.5rem);
  --aquarios-fs-h2:      clamp(1.625rem, 1.28rem + 1.7vw, 2.5rem);
  --aquarios-fs-h3:      clamp(1.25rem,  1.10rem + 0.7vw, 1.625rem);
  --aquarios-fs-h4:      clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --aquarios-fs-h5:      1.125rem;
  --aquarios-fs-h6:      1rem;
  --aquarios-fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --aquarios-fs-body:    1rem;
  --aquarios-fs-sm:      0.9375rem;
  --aquarios-fs-xs:      0.8125rem;

  --aquarios-lh-tight:   1.15;
  --aquarios-lh-snug:    1.35;
  --aquarios-lh-base:    1.65;

  /* --- Espaçamento --- */
  --aquarios-space-3xs: .25rem;
  --aquarios-space-2xs: .5rem;
  --aquarios-space-xs:  .75rem;
  --aquarios-space-sm:  1rem;
  --aquarios-space-md:  1.5rem;
  --aquarios-space-lg:  2.5rem;
  --aquarios-space-xl:  4rem;
  --aquarios-space-2xl: 6rem;

  /* Respiro vertical das seções, fluido entre mobile e desktop */
  --aquarios-section-y:    clamp(3rem, 2rem + 5vw, 6rem);
  --aquarios-section-y-sm: clamp(2rem, 1.5rem + 3vw, 3.5rem);

  /* --- Bordas --- */
  --aquarios-radius-sm: .375rem;
  --aquarios-radius:    .75rem;
  --aquarios-radius-lg: 1.25rem;
  --aquarios-radius-pill: 999px;

  /* --- Sombras: base azulada, para não cinzar a interface --- */
  --aquarios-shadow-sm: 0 1px 2px rgba(7, 30, 63, .06),
                        0 2px 8px rgba(7, 30, 63, .06);
  --aquarios-shadow:    0 4px 12px rgba(7, 30, 63, .08),
                        0 12px 32px rgba(7, 30, 63, .08);
  --aquarios-shadow-lg: 0 8px 24px rgba(7, 30, 63, .10),
                        0 24px 56px rgba(7, 30, 63, .12);

  /* --- Movimento --- */
  --aquarios-transition: 180ms cubic-bezier(.2, .6, .3, 1);

  /* --- Medidas --- */
  --aquarios-measure: 68ch;      /* largura de leitura confortável */
  --aquarios-container: 1200px;  /* largura máxima do container */
  --aquarios-tap: 2.75rem;       /* alvo mínimo de toque: 44px */
}

/* --------------------------------------------------------------------------
   3. Overrides do Bootstrap
   Faz os utilitários nativos (.btn-primary, .text-primary, .link-primary…)
   já saírem na identidade da pousada, sem CSS extra.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary:              #1A5FC2;
  --bs-primary-rgb:          26, 95, 194;
  --bs-body-color:           #17212E;
  --bs-body-color-rgb:       23, 33, 46;
  --bs-body-bg:              #FFFFFF;
  --bs-secondary-color:      #5A6675;
  --bs-border-color:         #DBE3EC;
  --bs-link-color:           #1A5FC2;
  --bs-link-color-rgb:       26, 95, 194;
  --bs-link-hover-color:     #0A2F63;
  --bs-link-hover-color-rgb: 10, 47, 99;
  --bs-body-font-family:     var(--aquarios-font-base);
  --bs-body-line-height:     var(--aquarios-lh-base);
  --bs-border-radius:        var(--aquarios-radius-sm);
  --bs-border-radius-lg:     var(--aquarios-radius);
  --bs-border-radius-xl:     var(--aquarios-radius-lg);
  --bs-focus-ring-color:     rgba(240, 196, 25, .55);
  --bs-code-color:           #0A2F63;  /* o rosa padrão do Bootstrap destoa da identidade */
}

/* --------------------------------------------------------------------------
   4. Base e reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa a altura do header sticky ao navegar por âncoras */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--aquarios-bg);
  color: var(--aquarios-text);
  font-family: var(--aquarios-font-base);
  font-size: var(--aquarios-fs-body);
  line-height: var(--aquarios-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nenhuma página do site deve rolar horizontalmente (Fase 7) */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   5. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: var(--aquarios-space-xs);
  font-family: var(--aquarios-font-heading);
  color: var(--aquarios-primary-dark);
  font-weight: 700;
  line-height: var(--aquarios-lh-tight);
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--aquarios-fs-h1); font-weight: 800; letter-spacing: -.02em; }
h2, .h2 { font-size: var(--aquarios-fs-h2); font-weight: 800; letter-spacing: -.016em; }
h3, .h3 { font-size: var(--aquarios-fs-h3); }
h4, .h4 { font-size: var(--aquarios-fs-h4); }
h5, .h5 { font-size: var(--aquarios-fs-h5); line-height: var(--aquarios-lh-snug); }
h6, .h6 { font-size: var(--aquarios-fs-h6); line-height: var(--aquarios-lh-snug); }

p {
  margin-top: 0;
  margin-bottom: var(--aquarios-space-sm);
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

/* Linha de apoio logo abaixo de um título de seção */
.aq-lead {
  font-size: var(--aquarios-fs-lead);
  line-height: 1.55;
  color: var(--aquarios-text-muted);
}

/* Rótulo curto acima do título ("Acomodações", "Estrutura"…) */
.aq-eyebrow {
  display: block;
  margin-bottom: var(--aquarios-space-2xs);
  color: var(--aquarios-gold-dark);
  font-size: var(--aquarios-fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.aq-text-sm { font-size: var(--aquarios-fs-sm); }
.aq-text-xs { font-size: var(--aquarios-fs-xs); }

/* Cabeçalho padrão de seção: eyebrow + título + lead */
.aq-section-head { margin-bottom: var(--aquarios-space-lg); }
.aq-section-head .aq-lead { max-width: var(--aquarios-measure); }
.aq-section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 46rem;
}
.aq-section-head--center .aq-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */
.container,
.container-lg,
.container-xl,
.container-xxl { max-width: var(--aquarios-container); }

.aq-section    { padding-block: var(--aquarios-section-y); }
.aq-section--sm{ padding-block: var(--aquarios-section-y-sm); }

.aq-bg-alt   { background-color: var(--aquarios-bg-alt); }
.aq-bg-soft  { background-color: var(--aquarios-primary-soft); }

/* Seções escuras: inverte texto e títulos sem precisar de classe por elemento */
.aq-bg-dark {
  background-color: var(--aquarios-primary-deep);
  color: rgba(255, 255, 255, .86);
}
.aq-bg-dark h1, .aq-bg-dark h2, .aq-bg-dark h3,
.aq-bg-dark h4, .aq-bg-dark h5, .aq-bg-dark h6 { color: #fff; }
.aq-bg-dark .aq-lead      { color: rgba(255, 255, 255, .82); }
.aq-bg-dark .aq-eyebrow   { color: var(--aquarios-gold); }
.aq-bg-dark .aq-text-muted{ color: rgba(255, 255, 255, .74); }
.aq-bg-dark code          { color: var(--aquarios-gold); }

.aq-measure    { max-width: var(--aquarios-measure); }
.aq-text-muted { color: var(--aquarios-text-muted); }
.aq-gold       { color: var(--aquarios-gold-dark); }

/* --------------------------------------------------------------------------
   7. Links
   -------------------------------------------------------------------------- */
a {
  color: var(--aquarios-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--aquarios-transition);
}
a:hover { color: var(--aquarios-primary-dark); }

/* Link discreto que só sublinha no hover */
.aq-link {
  font-weight: 600;
  text-decoration: none;
}
.aq-link:hover { text-decoration: underline; }

/* Link com seta, para "ver mais" */
.aq-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  /* Usado sozinho como chamada, então vale como alvo de toque: 44px de
     altura mínima, o mesmo dos botões (roadmap, seção 19). */
  min-height: var(--aquarios-tap);
  font-weight: 600;
  text-decoration: none;
}
.aq-link-arrow::after {
  content: '→';
  transition: transform var(--aquarios-transition);
}
.aq-link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   8. Botões
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--aquarios-radius-sm);
  font-weight: 600;
  transition: background-color var(--aquarios-transition),
              border-color var(--aquarios-transition),
              color var(--aquarios-transition),
              box-shadow var(--aquarios-transition),
              transform var(--aquarios-transition);
}

/* Base dos botões da identidade */
.btn-aq,
.btn-aq-outline,
.btn-aq-gold,
.btn-aq-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--aquarios-tap);
  padding: .625rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--aquarios-radius-sm);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

/* Primário: ação principal da página */
.btn-aq {
  background-color: var(--aquarios-primary);
  border-color: var(--aquarios-primary);
  color: var(--aquarios-text-invert);
  box-shadow: var(--aquarios-shadow-sm);
}
.btn-aq:hover {
  background-color: var(--aquarios-primary-hover);
  border-color: var(--aquarios-primary-hover);
  color: var(--aquarios-text-invert);
  box-shadow: var(--aquarios-shadow);
}
.btn-aq:active { transform: translateY(1px); box-shadow: var(--aquarios-shadow-sm); }

/* Secundário: ação de apoio */
.btn-aq-outline {
  background-color: transparent;
  border-color: var(--aquarios-border-strong);
  color: var(--aquarios-primary-dark);
}
.btn-aq-outline:hover {
  background-color: var(--aquarios-primary-soft);
  border-color: var(--aquarios-primary);
  color: var(--aquarios-primary-dark);
}
.btn-aq-outline:active { transform: translateY(1px); }

/* Dourado: destaque pontual sobre fundo escuro ou foto */
.btn-aq-gold {
  background-color: var(--aquarios-gold);
  border-color: var(--aquarios-gold);
  color: var(--aquarios-text);
  box-shadow: var(--aquarios-shadow-sm);
}
.btn-aq-gold:hover {
  background-color: var(--aquarios-gold-hover);
  border-color: var(--aquarios-gold-hover);
  color: var(--aquarios-text);
  box-shadow: var(--aquarios-shadow);
}
.btn-aq-gold:active { transform: translateY(1px); box-shadow: var(--aquarios-shadow-sm); }

/* WhatsApp: conversão. Verde escuro da paleta do WhatsApp, que passa em AA */
.btn-aq-whatsapp {
  background-color: var(--aquarios-whatsapp);
  border-color: var(--aquarios-whatsapp);
  color: var(--aquarios-text-invert);
  box-shadow: var(--aquarios-shadow-sm);
}
.btn-aq-whatsapp:hover {
  background-color: var(--aquarios-whatsapp-hover);
  border-color: var(--aquarios-whatsapp-hover);
  color: var(--aquarios-text-invert);
  box-shadow: var(--aquarios-shadow);
}
.btn-aq-whatsapp:active { transform: translateY(1px); box-shadow: var(--aquarios-shadow-sm); }

/* Variantes de tamanho */
.btn-aq-lg { padding: .875rem 1.75rem; font-size: 1.0625rem; min-height: 3.25rem; }
.btn-aq-sm { padding: .5rem 1rem; font-size: var(--aquarios-fs-sm); }
.btn-aq-block { width: 100%; }

/* Em telas pequenas os botões ocupam a largura toda por padrão (Fase 7) */
@media (max-width: 575.98px) {
  .btn-aq-block-sm { width: 100%; }
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.aq-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--aquarios-bg);
  border: 1px solid var(--aquarios-border);
  border-radius: var(--aquarios-radius);
  box-shadow: var(--aquarios-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--aquarios-transition),
              transform var(--aquarios-transition),
              border-color var(--aquarios-transition);
}
.aq-card__body { padding: var(--aquarios-space-md); flex: 1 1 auto; }
.aq-card__title { margin-bottom: var(--aquarios-space-2xs); font-size: var(--aquarios-fs-h4); }
.aq-card__text { color: var(--aquarios-text-muted); }
.aq-card__footer {
  padding: var(--aquarios-space-sm) var(--aquarios-space-md);
  border-top: 1px solid var(--aquarios-border);
}

/* Elevação só onde existe hover real — evita "grudar" o efeito no toque */
@media (hover: hover) {
  .aq-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--aquarios-shadow);
    border-color: var(--aquarios-border-strong);
  }
  .aq-card--hover:hover .aq-media--zoom img { transform: scale(1.05); }
}

/* Card com ícone, para comodidades */
.aq-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--aquarios-space-xs);
  border-radius: var(--aquarios-radius-sm);
  background-color: var(--aquarios-primary-soft);
  color: var(--aquarios-primary);
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   10. Mídia e imagens
   As fotos atuais são provisórias: o padrão abaixo fixa a proporção para que
   a troca das imagens não quebre o layout (roadmap, seção 25).
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.aq-media {
  position: relative;
  overflow: hidden;
  background-color: var(--aquarios-primary-soft);
  border-radius: var(--aquarios-radius);
}
.aq-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}
.aq-media--16x9 { aspect-ratio: 16 / 9; }
.aq-media--4x3  { aspect-ratio: 4 / 3; }
.aq-media--3x2  { aspect-ratio: 3 / 2; }
.aq-media--1x1  { aspect-ratio: 1 / 1; }
.aq-media--3x4  { aspect-ratio: 3 / 4; }
.aq-media--flush { border-radius: 0; }

/* Véu escuro para texto sobre foto (hero, chamadas) */
.aq-media--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(7, 30, 63, .15) 0%,
              rgba(7, 30, 63, .55) 60%,
              rgba(7, 30, 63, .78) 100%);
}

/* --------------------------------------------------------------------------
   11. Pills, divisores e detalhes
   -------------------------------------------------------------------------- */
.aq-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  border-radius: var(--aquarios-radius-pill);
  background-color: var(--aquarios-primary-soft);
  color: var(--aquarios-primary-dark);
  font-size: var(--aquarios-fs-xs);
  font-weight: 600;
}
.aq-pill--gold {
  background-color: rgba(240, 196, 25, .18);
  color: #6B4A00;
}
.aq-pill--dark {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}

.aq-divider {
  height: 1px;
  border: 0;
  margin: var(--aquarios-space-lg) 0;
  background-color: var(--aquarios-border);
  opacity: 1;
}

/* Filete dourado curto, usado como detalhe sob títulos */
.aq-rule {
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background-color: var(--aquarios-gold);
  margin-bottom: var(--aquarios-space-sm);
}
.aq-section-head--center .aq-rule { margin-inline: auto; }

/* Lista com marcador de ícone, para comodidades */
.aq-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.aq-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--aquarios-space-2xs);
}
.aq-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--aquarios-gold);
}

/* --------------------------------------------------------------------------
   12. Acessibilidade
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--aquarios-gold);
  outline-offset: 2px;
  border-radius: var(--aquarios-radius-sm);
}
/* Sobre fundo escuro o dourado some; o anel vira branco */
.aq-bg-dark :focus-visible { outline-color: #fff; }

/* Link "pular para o conteúdo" — visível apenas ao receber foco */
.skip-link {
  position: absolute;
  left: var(--aquarios-space-sm);
  top: -100%;
  z-index: 1080;
  padding: .625rem 1rem;
  background: var(--aquarios-primary-dark);
  color: #fff;
  border-radius: var(--aquarios-radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--aquarios-space-sm); }

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

/* --------------------------------------------------------------------------
   13. Utilitários
   -------------------------------------------------------------------------- */
.aq-stack > * + * { margin-top: var(--aquarios-space-sm); }
.aq-stack-md > * + * { margin-top: var(--aquarios-space-md); }
.aq-shadow-sm { box-shadow: var(--aquarios-shadow-sm); }
.aq-shadow    { box-shadow: var(--aquarios-shadow); }
.aq-shadow-lg { box-shadow: var(--aquarios-shadow-lg); }
.aq-radius    { border-radius: var(--aquarios-radius); }
.aq-radius-lg { border-radius: var(--aquarios-radius-lg); }


/* --------------------------------------------------------------------------
   14. Header e navegação
   Sticky em todas as telas: o botão de reserva é o caminho principal de
   conversão e precisa estar sempre a um toque de distância.
   -------------------------------------------------------------------------- */
.aq-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, .94);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--aquarios-transition),
              border-color var(--aquarios-transition),
              background-color var(--aquarios-transition);
}
/* Sem backdrop-filter aqui de propósito: ele cria bloco de contenção para
   descendentes position:fixed, e o offcanvas do menu passaria a medir a
   altura do header em vez da viewport. */

/* Só ganha peso depois que a página rola — no topo fica leve sobre o hero */
.aq-header--scrolled {
  background-color: var(--aquarios-bg);
  border-bottom-color: var(--aquarios-border);
  box-shadow: var(--aquarios-shadow-sm);
}

.aq-header .navbar { padding: 0; }

/* --- Logo --- */
.aq-brand { display: inline-flex; align-items: center; padding: 0; }
.aq-brand img {
  height: 2.75rem;
  width: auto;
  transition: height var(--aquarios-transition);
}
.aq-header__inner { min-height: 4.25rem; }

@media (min-width: 992px) {
  .aq-brand img { height: 4rem; }
  .aq-header__inner { min-height: 5.5rem; }
}

/* --- Botão do menu mobile --- */
.aq-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aquarios-tap);
  height: var(--aquarios-tap);
  padding: 0;
  border: 1px solid var(--aquarios-border);
  border-radius: var(--aquarios-radius-sm);
  background-color: transparent;
  color: var(--aquarios-primary-dark);
  font-size: 1.375rem;
  line-height: 1;
  transition: background-color var(--aquarios-transition),
              border-color var(--aquarios-transition);
}
.aq-toggler:hover {
  background-color: var(--aquarios-primary-soft);
  border-color: var(--aquarios-border-strong);
}

/* --- Links do menu --- */
.aq-nav { gap: .25rem; }
.aq-nav .nav-link {
  position: relative;
  padding: .625rem .875rem;
  color: var(--aquarios-text);
  font-weight: 600;
  border-radius: var(--aquarios-radius-sm);
  transition: color var(--aquarios-transition),
              background-color var(--aquarios-transition);
}
.aq-nav .nav-link:hover,
.aq-nav .nav-link:focus-visible { color: var(--aquarios-primary); }

/* Página atual: filete dourado, o mesmo detalhe usado sob os títulos */
.aq-nav .nav-link[aria-current="page"] { color: var(--aquarios-primary-dark); }
.aq-nav .nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: .875rem;
  right: .875rem;
  bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--aquarios-gold);
}

/* --- Painel do menu no mobile --- */
.aq-offcanvas { border-left: 0; }
.aq-offcanvas .offcanvas-header { padding: var(--aquarios-space-sm); }
.aq-offcanvas .offcanvas-body {
  display: flex;
  padding: var(--aquarios-space-sm);
}

@media (max-width: 991.98px) {
  /* Especificidade de dois nomes de classe: o Bootstrap fixa 400px
     em .navbar-expand-lg .offcanvas e ganharia de .aq-offcanvas sozinho. */
  .aq-header .aq-offcanvas { width: min(20rem, 85vw); }
  /* Alvos de toque generosos: o menu é o principal caminho no celular */
  .aq-nav .nav-link {
    padding: .875rem .75rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--aquarios-border);
    border-radius: 0;
  }
  .aq-nav .nav-item:last-child .nav-link { border-bottom: 0; }
  .aq-nav .nav-link[aria-current="page"] {
    background-color: var(--aquarios-primary-soft);
    border-bottom-color: transparent;
    border-radius: var(--aquarios-radius-sm);
  }
  .aq-nav .nav-link[aria-current="page"]::after { display: none; }

  /* Empilha links e CTA no painel lateral */
  .aq-offcanvas .offcanvas-body { flex-direction: column; }
  .aq-header__cta { margin-top: var(--aquarios-space-md); }
}

@media (min-width: 992px) {
  /* No desktop o painel volta a ser uma linha alinhada à direita */
  .aq-header .offcanvas-body {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
  }
  .aq-header__cta {
    flex: 0 0 auto;
    margin-left: var(--aquarios-space-sm);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   15. Botão flutuante de WhatsApp
   Fica oculto por padrão: só aparece quando o número oficial for confirmado
   e preenchido em js/main.js (roadmap, seção 26).
   -------------------------------------------------------------------------- */
.aq-fab {
  position: fixed;
  right: var(--aquarios-space-sm);
  bottom: var(--aquarios-space-sm);
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--aquarios-whatsapp);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--aquarios-shadow);
  transition: background-color var(--aquarios-transition),
              transform var(--aquarios-transition),
              box-shadow var(--aquarios-transition);
}
.aq-fab:hover {
  background-color: var(--aquarios-whatsapp-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--aquarios-shadow-lg);
}
.aq-fab[hidden] { display: none; }

/* Com o botão flutuante ativo, o rodapé reserva a faixa que ele ocupa, para
   não cobrir texto quando a página estiver rolada até o fim. A classe é
   colocada em <body> por initWhatsApp(), junto com a exibição do botão. */
.aq-com-fab .aq-footer { padding-bottom: 6rem; }

@media (min-width: 992px) {
  .aq-fab {
    right: var(--aquarios-space-md);
    bottom: var(--aquarios-space-md);
    width: 3.75rem;
    height: 3.75rem;
  }
}

/* --------------------------------------------------------------------------
   16. Placeholder de página (provisório)
   Usado nas páginas cujo conteúdo entra nas próximas fases. REMOVER conforme
   cada página for construída.
   -------------------------------------------------------------------------- */
.aq-placeholder { padding-block: clamp(3rem, 2rem + 6vw, 7rem); }

/* --------------------------------------------------------------------------
   17. Hero
   O CTA principal precisa aparecer já na primeira tela, inclusive no celular
   (roadmap, seção 16). Por isso a altura é limitada por vh, não por conteúdo.
   -------------------------------------------------------------------------- */
.aq-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--aquarios-primary-deep);
}
.aq-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.aq-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Véu escuro: garante contraste do texto branco sobre qualquer trecho da foto */
.aq-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Escurece onde o texto fica (esquerda/baixo) e preserva o dourado do
     amanhecer à direita. Contraste do texto branco medido sobre os pixels
     compostos, não estimado. */
  /* Escurece por altura, não por largura: o texto fica na metade de baixo e
     o céu do amanhecer, no topo, continua visível. O leve gradiente lateral
     só reforça o lado do texto. */
  background:
    linear-gradient(100deg,
      rgba(7, 30, 63, .48) 0%,
      rgba(7, 30, 63, .28) 45%,
      rgba(7, 30, 63, 0) 75%),
    linear-gradient(180deg,
      rgba(7, 30, 63, 0) 0%,
      rgba(7, 30, 63, .06) 18%,
      rgba(7, 30, 63, .55) 42%,
      rgba(7, 30, 63, .90) 100%);
}
.aq-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: min(38rem, 82vh);
  padding-block: var(--aquarios-space-xl) var(--aquarios-space-lg);
}
.aq-hero__content { max-width: 40rem; }
.aq-hero h1 { color: #fff; margin-bottom: var(--aquarios-space-sm); }
/* Eyebrow em branco, não em dourado: medido sobre a foto composta, o
   dourado fica em 3.5:1 no mobile — abaixo de AA para 13px bold. E o hero
   vai trocar de foto, então o texto precisa de contraste que não dependa
   da imagem. O dourado segue como destaque no botão. */
.aq-hero .aq-eyebrow { color: #fff; }
.aq-hero .aq-lead { color: rgba(255, 255, 255, .90); }
.aq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aquarios-space-xs);
  margin-top: var(--aquarios-space-md);
}
.aq-hero :focus-visible { outline-color: #fff; }

/* Botão de contorno sobre foto ou fundo escuro */
.btn-aq-outline--invert {
  border-color: rgba(255, 255, 255, .65);
  color: #fff;
  background-color: rgba(255, 255, 255, .06);
}
.btn-aq-outline--invert:hover {
  background-color: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
}

/* Tela baixa — celular deitado, ou desktop com zoom de 200%. O CTA precisa
   continuar na primeira tela (roadmap, seção 16), então o hero enxuga o
   respiro vertical e o tamanho do título em vez de empurrar o botão para
   fora da dobra. */
@media (max-height: 520px) {
  .aq-hero__inner {
    min-height: 0;
    padding-block: var(--aquarios-space-md);
  }
  .aq-hero h1 {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
    margin-bottom: var(--aquarios-space-2xs);
  }
  .aq-hero .aq-lead { font-size: 1rem; }
  .aq-hero__actions { margin-top: var(--aquarios-space-sm); }

  /* Com o hero baixo o texto sobe para a faixa clara do céu, e as paradas
     do gradiente são relativas à altura. Véu quase uniforme aqui. */
  .aq-hero__media::after {
    background: linear-gradient(180deg,
      rgba(7, 30, 63, .62) 0%,
      rgba(7, 30, 63, .70) 40%,
      rgba(7, 30, 63, .88) 100%);
  }
}

@media (max-width: 575.98px) {
  .aq-hero__actions .btn-aq-gold,
  .aq-hero__actions .btn-aq-outline { width: 100%; }

  /* Em telas estreitas o hero encurta e o texto sobe para a faixa clara do
     céu. As paradas do gradiente são relativas à altura, então aqui ele
     precisa começar a escurecer mais cedo. Medido a partir de 320px. */
  .aq-hero__media::after {
    background: linear-gradient(180deg,
      rgba(7, 30, 63, .62) 0%,
      rgba(7, 30, 63, .68) 35%,
      rgba(7, 30, 63, .90) 100%);
  }
}

/* --------------------------------------------------------------------------
   18. Mosaico de fotos
   -------------------------------------------------------------------------- */
.aq-mosaic {
  display: grid;
  gap: var(--aquarios-space-xs);
  grid-template-columns: repeat(2, 1fr);
}
.aq-mosaic .aq-media { height: 100%; }

@media (min-width: 768px) {
  .aq-mosaic { grid-template-columns: repeat(4, 1fr); }
  .aq-mosaic__item--lead { grid-column: span 2; grid-row: span 2; }
}

/* Legenda sobre a foto */
.aq-mosaic figure { position: relative; margin: 0; height: 100%; }
.aq-mosaic figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--aquarios-space-md) var(--aquarios-space-sm) var(--aquarios-space-xs);
  background: linear-gradient(180deg, rgba(7, 30, 63, 0), rgba(7, 30, 63, .80));
  color: #fff;
  font-size: var(--aquarios-fs-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   19. Avaliações
   -------------------------------------------------------------------------- */
.aq-rating {
  display: flex;
  align-items: center;
  gap: var(--aquarios-space-md);
  flex-wrap: wrap;
}
.aq-rating__score {
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--aquarios-primary-dark);
  letter-spacing: -.03em;
}
/* Ícone precisaria só de 3:1, mas usa o mesmo dourado do texto por consistência */
.aq-stars {
  display: inline-flex;
  gap: .15em;
  color: var(--aquarios-gold-dark);
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   20. Rodapé
   A logo tem lettering preto e sumiria no azul profundo: no rodapé a marca
   aparece como texto.
   -------------------------------------------------------------------------- */
.aq-footer {
  background-color: var(--aquarios-primary-deep);
  color: rgba(255, 255, 255, .78);
  padding-block: var(--aquarios-space-xl) var(--aquarios-space-md);
}
.aq-footer h2, .aq-footer h3 { color: #fff; }
.aq-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.aq-footer a:hover { color: #fff; text-decoration: underline; }
.aq-footer :focus-visible { outline-color: #fff; }

.aq-footer__brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.aq-footer__list { list-style: none; padding: 0; margin: 0; }
.aq-footer__list li + li { margin-top: var(--aquarios-space-2xs); }
.aq-footer__bottom {
  margin-top: var(--aquarios-space-lg);
  padding-top: var(--aquarios-space-sm);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--aquarios-fs-sm);
  color: rgba(255, 255, 255, .68);
}

/* --------------------------------------------------------------------------
   21. Marcador de dado a confirmar
   [data-confirmar] marca todo conteúdo que ainda depende de confirmação com
   o proprietário (roadmap, seção 26). Não aparece por padrão; para revisar,
   basta adicionar a classe .aq-revisao ao <body> e todos ficam destacados.
   -------------------------------------------------------------------------- */
.aq-revisao [data-confirmar] {
  outline: 2px dashed var(--aquarios-gold-dark);
  outline-offset: 3px;
  background-color: rgba(240, 196, 25, .10);
}

/* --------------------------------------------------------------------------
   22. Cabeçalho de página interna
   Faixa sólida em vez de foto: o hero fotográfico é assinatura da home, e
   aqui o texto não fica refém do brilho da imagem.
   -------------------------------------------------------------------------- */
.aq-pagehead {
  background-color: var(--aquarios-primary-deep);
  color: rgba(255, 255, 255, .86);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}
.aq-pagehead h1 { color: #fff; }
.aq-pagehead .aq-eyebrow { color: var(--aquarios-gold); }
.aq-pagehead .aq-lead { color: rgba(255, 255, 255, .84); }
.aq-pagehead :focus-visible { outline-color: #fff; }

/* Trilha de navegação */
.aq-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--aquarios-space-sm);
  font-size: var(--aquarios-fs-sm);
}
.aq-breadcrumb li + li::before {
  content: '/';
  margin-right: .5rem;
  color: rgba(255, 255, 255, .45);
}
.aq-breadcrumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.aq-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.aq-breadcrumb [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   23. Estado vazio
   Para blocos que já existem na estrutura mas ainda dependem de dados
   confirmados. Comunica o que vai entrar ali, em vez de simular conteúdo.
   -------------------------------------------------------------------------- */
.aq-empty {
  border: 2px dashed var(--aquarios-border-strong);
  border-radius: var(--aquarios-radius);
  background-color: var(--aquarios-bg-alt);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  text-align: center;
}
.aq-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--aquarios-space-xs);
  border-radius: 50%;
  background-color: var(--aquarios-primary-soft);
  color: var(--aquarios-primary);
  font-size: 1.75rem;
}
.aq-empty p { max-width: 42rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   24. Ficha de dados
   Lista de definição para políticas e características, com o valor pendente
   ainda visível como "a confirmar".
   -------------------------------------------------------------------------- */
.aq-specs { margin: 0; }
.aq-specs__row {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem var(--aquarios-space-sm);
  justify-content: space-between;
  padding-block: var(--aquarios-space-xs);
  border-bottom: 1px solid var(--aquarios-border);
}
.aq-specs__row:last-child { border-bottom: 0; }
.aq-specs dt { font-weight: 600; color: var(--aquarios-primary-dark); }
.aq-specs dd { margin: 0; color: var(--aquarios-text-muted); text-align: right; }

/* Valor ainda não confirmado */
.aq-pending {
  font-style: italic;
  color: var(--aquarios-text-muted);
}

/* --------------------------------------------------------------------------
   25. Galeria
   Grade simples, sem lightbox: abrir a foto em camada exigiria JavaScript
   que não melhora a decisão de quem está escolhendo onde dormir.
   -------------------------------------------------------------------------- */
.aq-gallery {
  display: grid;
  gap: var(--aquarios-space-xs);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .aq-gallery { grid-template-columns: repeat(3, 1fr); }
}
.aq-gallery figure { margin: 0; }
.aq-gallery figcaption {
  margin-top: var(--aquarios-space-2xs);
  font-size: var(--aquarios-fs-sm);
  color: var(--aquarios-text-muted);
}

/* --------------------------------------------------------------------------
   26. Área do mapa
   O mapa só entra depois do endereço confirmado. Até lá o espaço fica
   reservado com a mesma altura, para o layout não mudar na troca.
   -------------------------------------------------------------------------- */
.aq-map {
  position: relative;
  min-height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.aq-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   27. Ícones
   SVG inline, dimensionado em em para acompanhar o texto ao redor — o mesmo
   comportamento de uma fonte de ícones, sem os 221 KB dela.
   -------------------------------------------------------------------------- */
.aq-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
}