/* =================================================================
   Namoa Pousada — sections.css
   Uma faixa por seção, na ordem em que aparecem no index.html.
   ================================================================= */

/* ---------------- Header ---------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--transicao), box-shadow var(--transicao),
              backdrop-filter var(--transicao);
}
.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
.cabecalho.is-rolado {
  background: rgb(246 240 230 / 0.92);
  box-shadow: 0 1px 0 var(--borda), 0 8px 24px rgb(14 59 74 / 0.08);
  backdrop-filter: blur(12px);
}

.marca {
  display: grid;
  text-decoration: none;
  line-height: 1.1;
}

/* Logo oficial: a versão clara aparece sobre o hero, a escura depois da
   rolagem, quando o header ganha fundo claro. */
.marca__logo {
  height: clamp(1.9rem, 1.7rem + 0.7vw, 2.4rem);
  width: auto;
  object-fit: contain;
}
.marca__logo--escuro { display: none; }
.cabecalho.is-rolado .marca__logo--claro { display: none; }
.cabecalho.is-rolado .marca__logo--escuro { display: block; }
.menu-mobile__topo .marca__logo { height: 2.1rem; }
.rodape__marca .marca__logo { height: 2.6rem; margin-bottom: 0.25rem; }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}
.marca__linha {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.cabecalho.is-rolado .marca__nome { color: var(--azul-mar); }
.cabecalho.is-rolado .marca__linha { color: var(--tinta-suave); }

.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: clamp(0.75rem, 0.3rem + 1vw, 1.5rem); }
.nav__lista a {
  position: relative;
  padding: 0.35rem 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color var(--transicao);
}
.nav__lista a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--transicao);
}
.nav__lista a:hover::after,
.nav__lista a.is-ativo::after { scale: 1 1; }
.cabecalho.is-rolado .nav__lista a { color: var(--azul-mar); }
.cabecalho.is-rolado .nav__lista a:hover { color: var(--turquesa-link); }

.cabecalho__acoes { display: flex; align-items: center; gap: 0.6rem; }
.cabecalho__menu {
  display: grid;
  place-content: center;
  width: 2.875rem; height: 2.875rem;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  backdrop-filter: blur(6px);
}
.cabecalho__menu .icone { width: 1.35rem; height: 1.35rem; }
.cabecalho.is-rolado .cabecalho__menu {
  border-color: var(--borda-forte);
  background: transparent;
  color: var(--azul-mar);
}
/* O botão Reservar fica visível em toda largura de tela (regra de conversão) */
.btn--reservar { padding-inline: 1rem; }

@media (min-width: 64rem) {
  .nav { display: block; }
  .cabecalho__menu { display: none; }
  .btn--reservar { padding-inline: 1.4rem; }
}

/* ---------------- Menu mobile ---------------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--azul-mar);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transicao);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.is-aberto { opacity: 1; }

.menu-mobile__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.menu-mobile__fechar {
  display: grid;
  place-content: center;
  width: 2.875rem; height: 2.875rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
}
.menu-mobile__fechar .icone { width: 1.35rem; height: 1.35rem; }

.menu-mobile__nav {
  display: grid;
  align-content: center;
  gap: 0.35rem;
}
.menu-mobile__nav a {
  padding: 0.6rem 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 1.4rem + 2.5vw, 2.5rem);
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.menu-mobile__nav a:hover { color: var(--turquesa-claro); }

.menu-mobile__pe { display: grid; gap: 1rem; padding-block: 1.5rem 2.5rem; }
.menu-mobile__insta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--turquesa-claro);
  text-decoration: none;
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 2rem + 6vw, 6rem);
  overflow: hidden;
  background: var(--azul-mar);
  color: #fff;
  isolation: isolate;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--turquesa) 70%, transparent) 0%, transparent 60%),
    linear-gradient(170deg, var(--azul-mar-claro) 0%, var(--azul-mar) 55%, #092B36 100%);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(9 33 41 / 0.88) 0%, rgb(9 33 41 / 0.5) 42%, rgb(9 33 41 / 0.25) 70%, rgb(9 33 41 / 0.45) 100%);
}

.hero__conteudo { display: grid; gap: 1.1rem; max-width: 46rem; }

.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero__selo .icone { width: 1em; height: 1em; color: var(--turquesa-claro); }

.hero__titulo {
  color: #fff;
  text-shadow: 0 2px 24px rgb(9 33 41 / 0.45);
}
.hero__subtitulo {
  font-size: var(--t-lg);
  color: rgb(255 255 255 / 0.92);
  max-width: 34rem;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hero__acoes .btn { flex: 1 1 15rem; }
@media (min-width: 40rem) {
  .hero__acoes .btn { flex: 0 0 auto; }
}

.hero__faixa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: var(--t-sm);
  color: rgb(255 255 255 / 0.92);
}
.hero__faixa li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__faixa .icone { width: 1.1rem; height: 1.1rem; color: var(--turquesa-claro); }
.hero__faixa-nota .icone { color: var(--ouro-claro); }
.hero__faixa-nota strong { font-size: var(--t-base); }

.hero__rolar {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  display: grid;
  place-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  color: #fff;
  animation: flutua 2.4s ease-in-out infinite;
}
.hero__rolar .icone { width: 1.25rem; height: 1.25rem; }
@keyframes flutua {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 8px; }
}
@media (max-width: 30rem) {
  .hero__rolar { display: none; }
}

/* ---------------- Diferenciais ---------------- */
.secao--diferenciais { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.diferenciais {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.diferencial {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.1rem, 1rem + 0.6vw, 1.6rem);
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}
.diferencial__icone {
  display: grid;
  place-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ouro) 16%, transparent);
  color: var(--ouro-link);
}
.diferencial__icone .icone { width: 1.4rem; height: 1.4rem; }
.diferencial__titulo { font-size: var(--t-lg); }
.diferencial p { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }

/* ---------------- Sobre ---------------- */
.sobre {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .sobre { grid-template-columns: 1fr 1fr; }
}
.sobre__texto { display: grid; gap: 1rem; }
.sobre__texto p { color: var(--tinta-suave); }
.sobre__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

.sobre__colagem {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.sobre__foto {
  margin: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}
.sobre__foto--1 { grid-column: 1 / 5; }
.sobre__foto--2 { grid-column: 5 / 7; align-self: center; }
.sobre__foto--3 { grid-column: 2 / 7; margin-top: -1.5rem; }

@media (min-width: 40rem) {
  .sobre__colagem { gap: 1rem; }
  .sobre__foto--3 { margin-top: -2.5rem; }
}

/* ---------------- Suítes ---------------- */
.suites {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.aviso-js { grid-column: 1 / -1; color: var(--tinta-suave); }

.suite { overflow: hidden; }
.suite .carrossel { border-bottom: 1px solid var(--borda); }
.suite__nome { font-size: var(--t-xl); }
.suite__resumo { color: var(--tinta-suave); font-size: var(--t-sm); margin: 0; }
.suite__preco {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro-link);
}
.suite__comodidades { margin-top: 0.25rem; }

/* Modal da suíte */
.modal-suite { display: grid; gap: 1.25rem; }
.modal-suite__galeria {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.modal-suite__galeria .media { border-radius: var(--r); }
.modal-suite__titulo { font-size: var(--t-2xl); }
.modal-suite__texto { color: var(--tinta-suave); }
.modal-suite__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.modal-suite__acoes .btn { flex: 1 1 14rem; }

/* ---------------- Restaurante ---------------- */
.restaurante {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
}
@media (min-width: 60rem) {
  .restaurante { grid-template-columns: 1.15fr 1fr; align-items: start; }
}
.restaurante__galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.restaurante__galeria .media { border-radius: var(--r-lg); margin: 0; }
.restaurante__galeria .media:first-child,
.restaurante__galeria .media:last-child { grid-column: span 2; }

.restaurante__info { display: grid; gap: 1.75rem; }
.horarios h3,
.cafe-bloco h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-lg);
  margin-bottom: 0.6rem;
}
.horarios h3 .icone,
.cafe-bloco h3 .icone { width: 1.2rem; height: 1.2rem; color: var(--ouro-claro); }

.horarios__lista { display: grid; gap: 0.4rem; font-size: var(--t-sm); }
.horarios__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgb(255 255 255 / 0.18);
  color: var(--tinta-clara-suave);
}
.horarios__lista strong { color: #fff; }
.horarios__nota,
.cafe-bloco p { font-size: var(--t-sm); color: var(--tinta-clara-suave); }
.cafe-bloco__horario strong { color: #fff; }

.restaurante__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.restaurante__acoes .btn { flex: 1 1 12rem; }

/* ---------------- Estrutura / mosaico ---------------- */
.mosaico {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .mosaico { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.mosaico__item { display: grid; gap: 0.5rem; }
.mosaico__item .media { border-radius: var(--r-lg); margin: 0; }
.mosaico__item--grande { grid-column: span 2; }
@media (min-width: 48rem) {
  .mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
  /* A foto grande preenche a célula pelo próprio grid. Com aspect-ratio
     somado a height:100% a largura estourava a coluna. */
  .mosaico__item--grande .media {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    min-height: 16rem;
  }
}
.mosaico__legenda {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--tinta-suave);
}

.estrutura__comodidades {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
}
.estrutura__comodidades h3 { font-size: var(--t-lg); margin-bottom: 1rem; }
.comodidades--largas { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ---------------- Galeria ---------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 48rem) {
  .galeria { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
}
.galeria__item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.galeria__item .media { border-radius: var(--r); }
.galeria__item--retrato  .media { aspect-ratio: 3 / 4; }
.galeria__item--paisagem .media { aspect-ratio: 4 / 3; }
.galeria__item--quadrado .media { aspect-ratio: 1 / 1; }
.galeria__item img { transition: scale 400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.galeria__item:hover img { scale: 1.05; }
.galeria__item figcaption { position: absolute; }
.galeria__play {
  position: absolute;
  inset: auto 0.5rem 0.5rem auto;
  display: grid;
  place-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgb(14 59 74 / 0.7);
  color: #fff;
  pointer-events: none;
}
.galeria__play .icone { width: 1rem; height: 1rem; }
.galeria__insta { margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); text-align: center; }

/* ---------------- Experiências ---------------- */
.experiencias {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.experiencia .media { border-radius: 0; }
.experiencia__distancia {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro-link);
}
.experiencia__distancia .icone { width: 1em; height: 1em; }
.experiencias__nota {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-size: var(--t-sm);
  color: var(--tinta-suave);
}
.experiencias__nota .icone { width: 1.2rem; height: 1.2rem; color: var(--ouro-link); }

/* ---------------- Avaliações ---------------- */
.notas {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}
.notas__item {
  padding: 1.25rem 1rem;
  background: var(--areia);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
}
.notas__valor {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--azul-mar);
}
.notas__valor span { font-size: 0.45em; color: var(--tinta-suave); }
.notas__estrelas { display: inline-flex; gap: 0.15rem; color: var(--ouro); }
.notas__estrelas .icone { width: 1.5rem; height: 1.5rem; }
.notas__fonte {
  margin: 0.35rem 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.notas__fonte span { display: block; letter-spacing: 0; text-transform: none; color: var(--cta); }

.depoimentos { max-width: 48rem; margin-inline: auto; }
.depoimentos .carrossel__trilha { border-radius: var(--r-lg); }
.depoimento {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  padding-bottom: clamp(2.75rem, 2.5rem + 2vw, 3.5rem);
  margin: 0;
  background: var(--areia);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  text-align: center;
}
.depoimento__texto {
  margin: 0 auto;
  font-family: var(--fonte-titulo);
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--azul-mar);
}
.depoimento__texto::before { content: "“"; }
.depoimento__texto::after  { content: "”"; }
.depoimento__pe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
.depoimento__nome { font-weight: 700; color: var(--tinta); }
.depoimento__fonte {
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--turquesa) 14%, transparent);
  color: var(--azul-mar);
  font-weight: 600;
}
.avaliacoes__acao { margin-top: 1.5rem; text-align: center; }

/* ---------------- Faixa de ocasião especial / CTA final ---------------- */
.faixa-ocasiao,
.cta-final {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(22rem, 18rem + 18vw, 32rem);
  padding-block: clamp(3rem, 2.5rem + 4vw, 6rem);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.faixa-ocasiao__media,
.cta-final__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.faixa-ocasiao__media img,
.cta-final__media img { width: 100%; height: 100%; object-fit: cover; }
.faixa-ocasiao__veu,
.cta-final__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgb(9 33 41 / 0.86) 0%, rgb(9 33 41 / 0.6) 55%, rgb(9 33 41 / 0.35) 100%);
}
.cta-final__veu { background: linear-gradient(to top, rgb(9 33 41 / 0.85) 0%, rgb(9 33 41 / 0.45) 100%); }

.faixa-ocasiao__conteudo,
.cta-final__conteudo { display: grid; gap: 1rem; max-width: 38rem; }
.cta-final__conteudo { justify-items: center; text-align: center; max-width: 42rem; margin-inline: auto; }
.faixa-ocasiao h2,
.cta-final h2 { color: #fff; }
.faixa-ocasiao p,
.cta-final p { color: rgb(255 255 255 / 0.92); }
.faixa-ocasiao .btn,
.cta-final .btn { justify-self: start; }
.cta-final .btn { justify-self: center; }

/* ---------------- Pré-reserva ---------------- */
.reserva {
  display: grid;
  gap: clamp(1.75rem, 1.5rem + 2vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .reserva { grid-template-columns: 1fr 1.05fr; }
}
.reserva__lado { display: grid; gap: 1rem; }
.reserva__resumo {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  font-size: var(--t-sm);
}
.reserva__resumo li { display: flex; align-items: center; gap: 0.55rem; color: var(--tinta-suave); }
.reserva__resumo .icone { width: 1.1rem; height: 1.1rem; flex: none; color: var(--ouro-link); }

.reserva__contatos { display: grid; gap: 0.5rem; }
.reserva__contato {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.55rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azul-mar);
  text-decoration: none;
}
.reserva__contato:hover { color: var(--turquesa-link); }
.reserva__contato .icone { width: 1.1rem; height: 1.1rem; color: var(--turquesa-link); }

.marca-confirmar {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--cta);
}

/* ---------------- Localização ---------------- */
.localizacao {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
}
@media (min-width: 60rem) {
  .localizacao { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.localizacao__mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--areia-escura);
}
.localizacao__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.localizacao__mapa-espera {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--tinta-suave);
}
.localizacao__info { display: grid; gap: 1rem; }
.localizacao__endereco { font-style: normal; color: var(--tinta-suave); }
.localizacao__endereco strong { color: var(--azul-mar); }
.localizacao__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.localizacao__acoes .btn { flex: 1 1 12rem; }
.localizacao__subtitulo { font-size: var(--t-lg); margin-top: 0.5rem; }
.distancias { display: grid; gap: 0.5rem; font-size: var(--t-sm); }
.distancias li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--borda-forte);
  color: var(--tinta-suave);
}
.distancias strong { color: var(--azul-mar); white-space: nowrap; }

/* ---------------- Rodapé ---------------- */
.rodape {
  background: var(--azul-mar);
  color: var(--tinta-clara-suave);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
}
.rodape__grade {
  display: grid;
  gap: clamp(1.75rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 48rem) {
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}
.rodape .marca__nome { color: #fff; }
.rodape__marca p { font-size: var(--t-sm); margin-top: 0.5rem; max-width: 28rem; }
.rodape__insta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--turquesa-claro);
  text-decoration: none;
}
.rodape h2 {
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.85rem;
}
.rodape ul { display: grid; font-size: var(--t-sm); }
/* Alvos de toque de 44px também nos links do rodapé. */
.rodape ul a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape address { font-style: normal; font-size: var(--t-sm); margin-bottom: 0.85rem; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--t-xs);
}
.rodape__base p { margin: 0; }
.rodape__credito { color: rgb(255 255 255 / 0.65); }

/* ---------------- Página simples (privacidade / 404) ---------------- */
.pagina-simples {
  padding-block: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 4rem)) var(--secao-y);
}
.pagina-simples h1 { margin-bottom: 1.5rem; }
.pagina-simples h2 { font-size: var(--t-xl); margin-top: 2rem; margin-bottom: 0.5rem; }
.pagina-simples p,
.pagina-simples li { color: var(--tinta-suave); }
.pagina-simples ul { display: grid; gap: 0.4rem; padding-left: 1.25rem; list-style: disc; }
.pagina-simples__voltar { margin-top: 2.5rem; }

.erro-404 {
  display: grid;
  place-content: center;
  min-height: 70svh;
  text-align: center;
  gap: 1rem;
  justify-items: center;
}