/*
 * Design system do site (docs/PROJETO.md, seções 37 a 40).
 * CSS puro, sem build. Mobile first: o estilo base é o do celular,
 * e @media (min-width) acrescenta o que muda em telas maiores.
 * Os contrastes dos pares de cor são conferidos por teste (ContrasteTest).
 */

/* ---------- Fontes (novo visual, 15/10/2026): Lora nos títulos e Poppins no texto, as dos destaques do Instagram.
   OFL, auto-hospedadas, só com as letras de português, espanhol e inglês (32 KB as três). ---------- */
@font-face { font-family: "Lora"; src: url("../fonts/lora-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    /* cores da logo e das fotos da Gamboa */
    --cor-mar: #0F4C5C;
    --cor-mar-escuro: #0B3A46;
    --cor-turquesa: #449FAD;
    --cor-coqueiro: #3F7A1F;
    --cor-folha: #4B920A;
    --cor-sol: #FBCB08;
    --cor-terra: #6D4412;
    --cor-areia: #F3E3C3;

    /* superfícies e texto */
    --cor-fundo: #FBF6EA; /* creme mais quente, como nos destaques */
    --cor-superficie: #FFFFFF;
    --cor-noite: #0E3A47; /* azul petróleo da logo (antes quase preto) */
    --cor-texto: #1E231E;
    --cor-texto-2: #4A5A5E;
    --cor-texto-claro: #EDE6DA;
    --cor-texto-claro-2: #A9B8BB;
    --cor-link-escuro: #7FB8C4;
    --cor-borda: #D9D2C5;
    --cor-borda-campo: #8C8272;

    /* estados */
    --cor-sucesso: #2E7D4F;
    --cor-erro: #B3261E;
    --cor-aviso: #8A5A00;
    --cor-info: #1F5F8B;

    /* conversão */
    --cor-whatsapp: #25D366;
    --cor-whatsapp-hover: #1FB859;
    --cor-instagram: #DD2A7B;
    --cor-instagram-roxo: #8134AF;
    --cor-instagram-escuro: #C13584;
    --cor-instagram-azul: #515BD4;
    --cor-instagram-laranja: #F58529;
    --cor-airbnb: #FF385C;
    --cor-waze: #33CCFF;
    --cor-google-vermelho: #EA4335;
    --cor-airbnb-hover: #E31C5F;
    --cor-airbnb-botao: #E31C5F; /* rosa escuro do Airbnb: letra branca com contraste 4,57 */
    --cor-airbnb-botao-hover: #D70466;
    --cor-estrela: #B7791F; /* estrelas das avaliações sobre fundo branco */
    --cor-destaque: #2A7C89; /* frase-chave dos títulos (turquesa mais escuro: contraste 4,5 no creme) */

    /* tipografia */
    --fonte-titulo: "Lora", Georgia, serif;
    --fonte-texto: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --texto-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --texto-p: 0.875rem;
    --titulo-1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --titulo-2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
    --titulo-3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);

    /* espaço (múltiplos de 4 px) */
    --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
    --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;

    /* forma */
    --raio: 12px;
    --raio-p: 8px;
    --pilula: 999px;
    --sombra: 0 1px 2px rgb(11 30 36 / 0.06), 0 4px 16px rgb(11 30 36 / 0.06);
    --largura-max: 80rem;
    --largura-texto: 70ch;
    --altura-topo: 64px;
    --alvo: 44px;
    --transicao: 150ms ease;
    --suave: cubic-bezier(.22, .8, .24, 1);
    --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60'%3E%3Cpath d='M0 30c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0' fill='none' stroke='%230F4C5C' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + var(--e-4)); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: var(--texto-base);
    line-height: 1.6;
    overflow-x: clip;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-synthesis: none;
    line-height: 1.2;
    color: var(--cor-mar);
    margin: 0 0 var(--e-4);
    text-wrap: balance;
}
h1 { font-size: var(--titulo-1); }
h2 { font-size: var(--titulo-2); }
h3 { font-size: var(--titulo-3); }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }

a { color: var(--cor-mar); text-underline-offset: 3px; }
a:hover { color: var(--cor-mar-escuro); }

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

:focus-visible { outline: 3px solid var(--cor-mar); outline-offset: 3px; border-radius: 2px; }
.sobre-escuro :focus-visible, .rodape :focus-visible { outline-color: var(--cor-sol); }

.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;
}

.pular {
    position: absolute; left: var(--e-4); top: -100px; z-index: 100;
    background: var(--cor-mar); color: #fff; padding: var(--e-3) var(--e-4); border-radius: var(--raio-p);
}
.pular:focus { top: var(--e-4); color: #fff; }

main { display: block; flex: 1 0 auto; width: 100%; }
main:focus { outline: none; }

/* ---------- Layout ---------- */
.conteiner { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--e-4); }
.texto-largo { max-width: var(--largura-texto); }
.secao { padding-block: var(--e-7); }
.secao--clara { background: var(--cor-superficie); }
.secao--areia { background: var(--cor-areia); }
.secao--escura { background: var(--cor-noite); color: var(--cor-texto-claro); }
.secao--escura h2, .secao--escura h3 { color: var(--cor-texto-claro); }
.secao--escura a:not(.botao) { color: var(--cor-link-escuro); }

.grade { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grade--2, .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 48rem) {
    .conteiner { padding-inline: var(--e-6); }
    .secao { padding-block: var(--e-8); }
}

/* ---------- Ícones ---------- */
.icone { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Topo ---------- */
.topo {
    position: sticky; top: 0; z-index: 50;
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
}
.topo__barra {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: var(--altura-topo); padding-block: var(--e-2);
}
.topo__marca { display: flex; align-items: center; margin-right: auto; }
.topo__marca img { width: 44px; height: 44px; }
.topo__marca .logo-completa { display: none; }

.topo__nav { display: none; }
.topo__acoes { display: flex; align-items: center; gap: var(--e-1); }

.botao-icone {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-width: var(--alvo); min-height: var(--alvo); padding: 0 var(--e-3);
    border: 1.5px solid var(--cor-borda); border-radius: var(--pilula);
    background: transparent; color: var(--cor-mar); font: inherit; font-weight: 600; font-size: 0.9375rem;
    text-decoration: none; cursor: pointer;
}
.botao-icone--whatsapp { background: var(--cor-whatsapp); border-color: var(--cor-whatsapp); color: var(--cor-noite); padding: 0; }
.botao-icone--whatsapp:hover { background: var(--cor-whatsapp-hover); color: var(--cor-noite); }
.botao-icone__texto { display: none; }
@media (min-width: 23.5rem) { .botao-menu .botao-icone__texto { display: inline; } }

/* seletor de idioma: bandeira redonda do idioma atual, abre a lista com os outros */
.bandeira { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(11 30 36 / 0.18); flex: none; }
.idiomas { position: relative; }
.idiomas__botao {
    display: inline-flex; align-items: center; gap: var(--e-1);
    min-height: var(--alvo); padding: 0 var(--e-2) 0 var(--e-3);
    border: 1.5px solid var(--cor-borda); border-radius: var(--pilula);
    color: var(--cor-mar); font-weight: 600; font-size: 0.875rem; cursor: pointer; list-style: none;
}
.idiomas__botao::-webkit-details-marker { display: none; }
.idiomas__botao:hover { border-color: var(--cor-mar); }
.idiomas__seta { width: 1rem; height: 1rem; transition: transform var(--transicao); }
.idiomas[open] .idiomas__seta { transform: rotate(180deg); }
.idiomas__lista {
    position: absolute; right: 0; top: calc(100% + var(--e-1)); z-index: 60;
    min-width: 11rem; margin: 0; padding: var(--e-1); list-style: none;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.idiomas__lista a {
    display: flex; align-items: center; gap: var(--e-3);
    min-height: var(--alvo); padding: 0 var(--e-3);
    color: var(--cor-texto); font-weight: 500; text-decoration: none; border-radius: var(--raio-p);
}
.idiomas__lista a:hover { background: var(--cor-fundo); color: var(--cor-mar); }
.idiomas__lista a[aria-current] { color: var(--cor-mar); font-weight: 700; }
.idiomas__confere { width: 1.125rem; height: 1.125rem; margin-left: auto; }

/* painel do menu no celular (sem JavaScript ele fica aberto no fluxo da página) */
.menu-painel { border-top: 1px solid var(--cor-borda); padding-block: var(--e-3) var(--e-5); }
.js .menu-painel { display: none; }
.js .menu-painel.aberto { display: block; }
.menu-painel ul { list-style: none; margin: 0; padding: 0; }
.menu-painel li a {
    display: flex; align-items: center; min-height: 48px; padding-inline: var(--e-2);
    font-size: 1.125rem; font-weight: 600; text-decoration: none; border-radius: var(--raio-p);
}
.menu-painel li a[aria-current="page"] { text-decoration: underline; }
.menu-painel__titulo { margin: var(--e-2) 0 0; padding-inline: var(--e-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-2); }
.menu-painel__grupo ul { padding-left: var(--e-3); border-left: 2px solid var(--cor-borda); margin-left: var(--e-2); }
.menu-painel__grupo li a { font-size: 1.0625rem; }

/* abas do Explorar: alterna entre Praias e lagoas, O que conhecer, Trilhas e Eventos */
.explorar-abas ul { display: flex; gap: var(--e-2); list-style: none; margin: 0 0 var(--e-4); padding: 0 0 var(--e-1); overflow-x: auto; scrollbar-width: thin; }
.explorar-abas a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--e-4); border: 1.5px solid var(--cor-borda); border-radius: var(--pilula); color: var(--cor-texto); font-weight: 600; text-decoration: none; white-space: nowrap; background: var(--cor-superficie); }
.explorar-abas a:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.explorar-abas a[aria-current="page"] { background: var(--cor-mar); border-color: var(--cor-mar); color: #fff; }

/* computador: logo completa (versão do topo, com o nome e "GAROPABA - SC" legíveis) */
@media (min-width: 60rem) {
    :root { --altura-topo: 96px; }
    .topo__marca .emblema-topo { display: none; }
    .topo__marca .logo-completa { display: block; width: auto; height: 72px; }
    .botao-icone--whatsapp { padding: 0 var(--e-4); }
    .botao-icone--whatsapp .botao-icone__texto { display: inline; }
}
/* telas largas: o menu aparece em linha no topo (72rem: os 6 itens, com o grupo Explorar, cabem sem quebrar linha) */
@media (min-width: 72rem) {
    .topo__nav { display: block; }
    .topo__nav ul { display: flex; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
    .topo__nav a {
        display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--e-3);
        color: var(--cor-texto); font-weight: 500; text-decoration: none; border-radius: var(--raio-p); white-space: nowrap;
    }
    .topo__nav a:hover, .topo__nav a[aria-current="page"] { color: var(--cor-mar); text-decoration: underline; text-underline-offset: 6px; }
    .topo__grupo { position: relative; }
    .topo__grupo-botao { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); padding: 0 var(--e-3); font-weight: 500; color: var(--cor-texto); border-radius: var(--raio-p); cursor: pointer; list-style: none; white-space: nowrap; }
    .topo__grupo-botao::-webkit-details-marker { display: none; }
    .topo__grupo-botao:hover, .topo__grupo-botao--atual { color: var(--cor-mar); }
    .topo__grupo-botao--atual { text-decoration: underline; text-underline-offset: 6px; }
    .topo__grupo-seta { width: 1rem; height: 1rem; transition: transform var(--transicao); }
    .topo__grupo [open] .topo__grupo-seta { transform: rotate(180deg); }
    .topo__nav .topo__sub { position: absolute; left: 0; top: calc(100% + var(--e-1)); z-index: 60; display: grid; gap: 0; min-width: 14rem; padding: var(--e-1); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); }
    .topo__sub a { display: flex; width: 100%; }
    .topo__sub a:hover { background: var(--cor-fundo); text-decoration: none; }
    .botao-menu, .menu-painel, .js .menu-painel.aberto { display: none; }
}

/* ---------- Botões ---------- */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: 48px; padding: var(--e-3) var(--e-5);
    border: 1.5px solid transparent; border-radius: var(--pilula);
    font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:active { transform: translateY(1px); }
.botao--primario { background: var(--cor-mar); color: #fff; }
.botao--primario:hover { background: var(--cor-mar-escuro); color: #fff; }
.botao--secundario { background: transparent; color: var(--cor-mar); border-color: var(--cor-mar); }
.botao--secundario:hover { background: var(--cor-mar); color: #fff; }
.botao--whatsapp { background: var(--cor-whatsapp); color: var(--cor-noite); }
.botao--whatsapp:hover { background: var(--cor-whatsapp-hover); color: var(--cor-noite); }
.botao--airbnb { background: var(--cor-airbnb-botao); color: #fff; }
.botao--airbnb:hover { background: var(--cor-airbnb-botao-hover); color: #fff; }
.botao--claro { background: transparent; color: var(--cor-texto-claro); border-color: var(--cor-texto-claro); }
.botao--claro:hover { background: var(--cor-texto-claro); color: var(--cor-noite); }
.botao--largo { width: 100%; }
@media (min-width: 40rem) { .botao--largo { width: auto; } }

/* opções de reserva: WhatsApp e Airbnb lado a lado */
/* Perto do Residencial: o mais perto de cada categoria do Guia útil, com link (15/10/2026) */
.perto { margin-block: var(--e-5); padding: var(--e-4) var(--e-5); border: 1.5px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
.perto__titulo { margin: 0 0 var(--e-3); font-size: 1.15rem; }
.perto__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--e-2) var(--e-4); margin: 0; padding: 0; list-style: none; }
.perto__lista a { display: flex; align-items: center; gap: var(--e-3); min-height: var(--alvo); color: var(--cor-texto); text-decoration: none; }
.perto__lista a:hover strong { text-decoration: underline; }
.perto__lista .icone { flex: none; width: 1.4rem; height: 1.4rem; color: var(--cor-mar); }
.perto__lista strong { display: block; color: var(--cor-mar); }
.perto__lista span { line-height: 1.3; font-size: var(--texto-p); color: var(--cor-texto-2); }
.perto__nota { margin: var(--e-3) 0 0; font-size: var(--texto-p); color: var(--cor-texto-2); }
.opcoes-reserva { display: grid; gap: var(--e-3); }
.opcoes-reserva__texto { color: var(--cor-texto-2); margin: 0; }
.opcoes-reserva__botoes { display: flex; flex-direction: column; gap: var(--e-3); }
@media (min-width: 40rem) { .opcoes-reserva__botoes { flex-direction: row; flex-wrap: wrap; } }
/* dados da estadia, opcionais, antes do botão do WhatsApp (pedido do Roan, 15/10/2026) */
.estadia { display: grid; gap: var(--e-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.estadia legend { margin-bottom: var(--e-3); padding: 0; font-weight: 700; }
.estadia legend small { font-size: var(--texto-p); font-weight: 400; }
.estadia__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.estadia__campo { display: grid; min-width: 0; gap: var(--e-1); font-size: var(--texto-p); font-weight: 700; color: var(--cor-texto-2); }
.estadia__campo--largo { grid-column: 1 / -1; }
.estadia__campo :is(input, select) {
    width: 100%; min-width: 0; min-height: var(--alvo); padding: 0 var(--e-3); border: 1.5px solid var(--cor-borda-campo); border-radius: var(--raio-p);
    background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 400; font-size: 1rem;
}
.estadia__campo input[type="date"] { padding-inline: var(--e-2); }
.estadia__campo ::placeholder { color: var(--cor-texto-2); opacity: 0.75; }
.estadia__erro { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--raio-p); background: #fff; color: var(--cor-erro); font-weight: 700; }

/* barra fixa no celular (página do apartamento) */
.barra-reserva {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; gap: var(--e-2); padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom));
    background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); box-shadow: 0 -4px 16px rgb(11 30 36 / 0.08);
}
.barra-reserva .botao { flex: 1; padding-inline: var(--e-3); min-height: var(--alvo); font-size: 0.9375rem; }
@media (min-width: 60rem) { .barra-reserva { display: none; } }

/* ---------- Imagens e figuras ---------- */
.imagem { width: 100%; height: auto; background: var(--cor-areia); border-radius: var(--raio); object-fit: cover; }
/* parte da foto que aparece no recorte (escolhida no painel, menu Fotos) */
.imagem--foco-topo { object-position: 50% 0%; }
.imagem--foco-acima { object-position: 50% 30%; }
.imagem--foco-abaixo { object-position: 50% 68%; }
.imagem--foco-base { object-position: 50% 100%; }
.figura { margin: 0; }
.figura figcaption { margin-top: var(--e-2); font-size: var(--texto-p); color: var(--cor-texto-2); }
.figura__credito { display: block; font-size: 0.8125rem; }
.reservado {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--e-4);
    background: var(--cor-areia); color: var(--cor-terra); border-radius: var(--raio);
    font-family: var(--fonte-titulo); font-size: 1.25rem; text-align: center;
}

/* ---------- Carrossel (scroll-snap nativo + botões) ---------- */
.carrossel { position: relative; min-width: 0; } /* dentro de grade, não cresce até a largura de todos os slides */
.carrossel__trilho {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: var(--raio); scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__slide { position: relative; scroll-snap-align: start; margin: 0; } /* textos só para leitor de tela ficam presos ao slide, sem esticar a página */
.carrossel__slide img { aspect-ratio: 4 / 3; border-radius: 0; }
.carrossel__controles { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-2); }
.carrossel__posicao { font-size: var(--texto-p); color: var(--cor-texto-2); }
.carrossel__botoes { display: flex; gap: var(--e-2); }
.carrossel__botao {
    display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo);
    border: 1.5px solid var(--cor-borda-campo); border-radius: var(--pilula); background: var(--cor-superficie);
    color: var(--cor-mar); cursor: pointer;
}
.carrossel__botao:hover { border-color: var(--cor-mar); }
.carrossel__botao[disabled] { opacity: 0.4; cursor: default; }
.carrossel__trilho:focus-visible { outline-offset: -3px; }

/* ---------- Galeria + visualizador (dialog nativo) ---------- */
.galeria { display: grid; gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galeria__botao { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--raio); }
.galeria__botao img { aspect-ratio: 3 / 2; transition: transform var(--transicao); }
@media (hover: hover) { .galeria__botao:hover img { transform: scale(1.02); } }

/* visualizador: fundo escuro desfocado, foto grande, setas nas laterais, miniaturas embaixo */
.visualizador {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
    background: rgb(8 20 24 / 0.94); color: var(--cor-texto-claro);
}
.visualizador[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visualizador::backdrop { background: rgb(8 20 24 / 0.6); backdrop-filter: blur(6px); }
html:has(.visualizador[open]) { overflow: hidden; }

.visualizador__topo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.visualizador__titulo {
    flex: 1; min-width: 0; margin: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: 1.2;
    color: var(--cor-texto-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visualizador__posicao { font-size: var(--texto-p); color: var(--cor-texto-claro-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.visualizador__botao {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; border: 0; border-radius: var(--pilula);
    background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer;
    transition: background-color var(--transicao), transform var(--transicao);
}
.visualizador__botao:hover { background: rgb(255 255 255 / 0.26); }
.visualizador__botao:active { transform: scale(0.94); }
.visualizador__botao .icone { width: 1.5rem; height: 1.5rem; }

.visualizador__palco {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 0; padding: 0 var(--e-2); touch-action: pan-y;
}
.visualizador__figura { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3); height: 100%; max-width: 100%; margin: 0; min-width: 0; }
.visualizador__figura img {
    flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; border-radius: var(--raio-p); background: none;
    box-shadow: 0 12px 48px rgb(0 0 0 / 0.45); transition: opacity 200ms ease;
}
.visualizador__figura img.carregando { opacity: 0; }
.visualizador__figura figcaption { flex: none; max-width: 60ch; text-align: center; font-size: var(--texto-p); color: var(--cor-texto-claro); }

/* setas sobre a foto, nas laterais */
.visualizador__seta { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; background: rgb(8 20 24 / 0.55); }
.visualizador__seta:hover { background: rgb(8 20 24 / 0.8); }
.visualizador__seta--anterior { left: var(--e-2); }
.visualizador__seta--proximo { right: var(--e-2); }
@media (min-width: 48rem) {
    .visualizador__palco { padding: 0 calc(48px + var(--e-6)); }
    .visualizador__seta { background: rgb(255 255 255 / 0.14); }
    .visualizador__seta:hover { background: rgb(255 255 255 / 0.26); }
    .visualizador__seta--anterior { left: var(--e-4); }
    .visualizador__seta--proximo { right: var(--e-4); }
}

.visualizador__miniaturas {
    display: flex; gap: var(--e-2); justify-content: safe center; overflow-x: auto;
    margin: 0; padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); list-style: none; scrollbar-width: thin;
}
.visualizador__miniatura {
    display: block; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: var(--raio-p);
    background: none; overflow: hidden; cursor: pointer; opacity: 0.55; transition: opacity var(--transicao), border-color var(--transicao);
}
.visualizador__miniatura img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: var(--cor-noite); }
.visualizador__miniatura:hover { opacity: 0.85; }
.visualizador__miniatura[aria-current] { opacity: 1; border-color: var(--cor-sol); }

/* uma foto só: sem setas e sem faixa */
.visualizador--uma .visualizador__seta, .visualizador--uma .visualizador__miniaturas { display: none; }

/* ---------- Cards ---------- */
.card {
    position: relative; display: flex; flex-direction: column;
    background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
    container-type: inline-size;
}
.card__midia img, .card__midia .reservado { border-radius: 0; aspect-ratio: 4 / 3; }
.card__corpo { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); flex: 1; }
.card__titulo { margin: 0; font-size: var(--titulo-3); }
.card__titulo a { text-decoration: none; color: inherit; }
.card__titulo a:hover { text-decoration: underline; }
.card__acoes { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-2); }
.card .carrossel__controles { padding-inline: var(--e-3); }
@container (min-width: 26rem) { .card__acoes { flex-direction: row; flex-wrap: wrap; } }

/* lista de fatos (capacidade, quartos, distância...) */
.fatos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); list-style: none; margin: 0; padding: 0; font-size: var(--texto-p); color: var(--cor-texto-2); }
.fatos li { display: inline-flex; align-items: center; gap: var(--e-1); }
.fatos .icone { color: var(--cor-mar); }

.selos { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.selo { display: inline-flex; padding: 2px var(--e-3); border-radius: var(--pilula); background: var(--cor-sol); color: var(--cor-texto); font-size: 0.8125rem; font-weight: 700; }
.selo--natureza { background: var(--cor-coqueiro); color: #fff; }

/* ---------- Trilha de navegação (breadcrumb) ---------- */
/* trilha: casinha no Início, setinhas entre os níveis, links com área de toque confortável */
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-1); list-style: none; margin: 0 0 var(--e-4); padding: 0; font-size: var(--texto-p); }
.migalhas li { display: inline-flex; align-items: center; gap: var(--e-1); }
.migalhas li + li::before {
    content: ""; width: 0.4em; height: 0.4em; margin: 0 var(--e-2) 0 var(--e-1);
    border-top: 1.5px solid var(--cor-borda-campo); border-right: 1.5px solid var(--cor-borda-campo); transform: rotate(45deg);
}
.migalhas a {
    display: inline-flex; align-items: center; gap: var(--e-1); min-height: 32px; padding: 0 var(--e-2); margin-inline: calc(var(--e-2) * -1);
    color: var(--cor-mar); font-weight: 600; text-decoration: none; border-radius: var(--pilula);
}
.migalhas a:hover { background: rgb(15 76 92 / 0.08); text-decoration: underline; }
.migalhas a .icone { width: 1.1em; height: 1.1em; }
.migalhas [aria-current="page"] { color: var(--cor-texto-2); }

/* ---------- Nota de fonte (dados de terceiros) ---------- */
.nota-fonte { font-size: 0.8125rem; color: var(--cor-texto-2); border-left: 3px solid var(--cor-borda); padding-left: var(--e-3); }

/* ---------- Localização (texto + rota; o mapa interativo chega na Fase 7) ---------- */
.local { display: grid; gap: var(--e-3); padding: var(--e-5); background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
.local__resposta { font-family: var(--fonte-titulo); font-size: var(--titulo-3); color: var(--cor-mar); margin: 0; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--cor-noite); color: var(--cor-texto-claro); padding-block: var(--e-7) var(--e-6); }
.rodape a:not(.botao) { color: var(--cor-link-escuro); }
.rodape a:not(.botao):hover { color: #fff; }
.rodape__grade { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* contato e endereço com a largura do próprio conteúdo (endereço em uma linha quando cabe); o logo fica com o resto */
@media (min-width: 64rem) { .rodape__grade { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--e-8); } }
.rodape__logo img { width: 300px; max-width: 100%; }
.rodape h2 { font-size: 1rem; font-family: var(--fonte-texto); font-weight: 700; color: var(--cor-texto-claro); margin-bottom: var(--e-3); }
.rodape address { font-style: normal; margin-bottom: var(--e-4); }
.rodape__endereco span { white-space: nowrap; }
/* só ícones redondos; telefone e endereço em texto discreto (NAP) */
.rodape .redes a { width: 48px; height: 48px; padding: 0; }
.rodape .redes .icone { width: 1.4rem; height: 1.4rem; }
.rodape__texto, .rodape__endereco { font-size: var(--texto-p); color: var(--cor-texto-claro-2); }
.rodape .redes .atalho-maps { background: #fff; border-color: #fff; color: var(--cor-texto); font-weight: 700; }
.rodape .redes .atalho-maps .icone { color: var(--cor-google-vermelho); }
.rodape .redes .atalho-maps:hover { background: var(--cor-texto-claro); color: var(--cor-texto); }
.rodape .redes .atalho-waze { background: var(--cor-waze); border-color: var(--cor-waze); color: var(--cor-noite); font-weight: 700; }
.rodape .redes .atalho-waze:hover { filter: brightness(0.93); color: var(--cor-noite); }
.rodape .redes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.rodape .redes a {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-width: var(--alvo); min-height: var(--alvo); border-radius: var(--pilula);
    border: 1.5px solid rgb(237 230 218 / 0.35); color: var(--cor-texto-claro); text-decoration: none;
}
.rodape .redes .redes__whatsapp { background: var(--cor-whatsapp); border-color: var(--cor-whatsapp); color: var(--cor-noite); font-weight: 700; }
.rodape .redes .redes__whatsapp:hover { background: var(--cor-whatsapp-hover); color: var(--cor-noite); }
.rodape .redes .redes__instagram {
    background: radial-gradient(circle at 20% 110%, var(--cor-instagram-laranja) 0%, var(--cor-instagram) 45%, var(--cor-instagram-roxo) 75%, var(--cor-instagram-azul) 100%);
    background-origin: border-box; border: 0; color: #fff;
}
.rodape .redes .redes__instagram:hover { filter: brightness(0.9); color: #fff; }
.rodape .redes .redes__airbnb { background: var(--cor-airbnb); border-color: var(--cor-airbnb); color: #fff; }
.rodape .redes .redes__airbnb:hover { background: var(--cor-airbnb-hover); border-color: var(--cor-airbnb-hover); color: #fff; }
.redes .icone { width: 1.375rem; height: 1.375rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.rodape__direitos { margin: var(--e-6) 0 0; padding-top: var(--e-4); border-top: 1px solid rgb(237 230 218 / 0.15); color: var(--cor-texto-claro-2); font-size: 0.8125rem; }

/* ---------- Página de amostra dos componentes (só no ambiente local) ---------- */
.amostra-cores { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.amostra-cores li { border-radius: var(--raio-p); overflow: hidden; background: var(--cor-superficie); box-shadow: var(--sombra); font-size: 0.8125rem; }
.amostra-cores span { display: block; height: 56px; }
.amostra-cores p { margin: 0; padding: var(--e-2) var(--e-3); }
.amostra-fundo-mar { background: var(--cor-mar); } .amostra-fundo-turquesa { background: var(--cor-turquesa); }
.amostra-fundo-coqueiro { background: var(--cor-coqueiro); } .amostra-fundo-folha { background: var(--cor-folha); }
.amostra-fundo-sol { background: var(--cor-sol); } .amostra-fundo-terra { background: var(--cor-terra); }
.amostra-fundo-areia { background: var(--cor-areia); } .amostra-fundo-fundo { background: var(--cor-fundo); }
.amostra-fundo-noite { background: var(--cor-noite); } .amostra-fundo-texto { background: var(--cor-texto); }
.amostra-fundo-whatsapp { background: var(--cor-whatsapp); }
.amostra-t1, .amostra-t2, .amostra-t3 { font-family: var(--fonte-titulo); line-height: 1.2; color: var(--cor-mar); }
.amostra-t1 { font-size: var(--titulo-1); } .amostra-t2 { font-size: var(--titulo-2); } .amostra-t3 { font-size: var(--titulo-3); }
.pilha { display: grid; gap: var(--e-5); }
.lugares-praia { display: grid; gap: var(--e-3); padding-left: 1.2em; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* ---------- Apartamentos ---------- */
.secao--compacta { padding-block: var(--e-6) var(--e-5); }
.lista-cards { list-style: none; margin: 0; padding: 0; }
.lista-cards > li { display: flex; }
.lista-cards > li > .card { flex: 1; }

.apartamento__resumo { font-size: 1.125rem; color: var(--cor-texto-2); }
.apartamento__sem-foto { aspect-ratio: 16 / 9; max-height: 24rem; width: 100%; }

/* primeira foto grande, as outras em miniatura ao lado. A grade muda conforme o número de fotos
   (galeria--n1 a n5, onde n5 = cinco ou mais), e a foto grande é recortada para caber na grade:
   foto em pé não estica as linhas nem deixa buracos. */
.galeria--destaque > li:first-child { grid-column: span 2; }
.galeria--n1 > li:first-child img { aspect-ratio: 16 / 9; max-height: 34rem; width: 100%; object-fit: cover; }
.galeria--n2 > li:first-child { grid-column: auto; }
@media (min-width: 48rem) {
    .galeria--n1 { grid-template-columns: minmax(0, 1fr); }
    .galeria--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .galeria--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .galeria--n4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .galeria--n4 > li:first-child { grid-column: 1 / -1; }
    .galeria--n4 > li:first-child img { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; }
    .galeria--n3 > li:first-child,
    .galeria--n5 > li:first-child { grid-row: span 2; position: relative; min-height: 14rem; }
    .galeria--n3 > li:first-child img,
    .galeria--n5 > li:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

.apartamento__todas-fotos { margin: var(--e-3) 0 0; }

/* fotos por cômodo: atalhos em pílula + um bloco por cômodo */

.atalhos--centro { justify-content: center; }

.lista-icones { display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.lista-icones li { display: flex; align-items: center; gap: var(--e-3); }
.lista-icones .icone { color: var(--cor-mar); width: 1.5em; height: 1.5em; }
@media (min-width: 30rem) { .lista-icones--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.outros-apartamentos { display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .outros-apartamentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.outros-apartamentos a {
    display: grid; min-height: var(--alvo); overflow: hidden;
    border: 1.5px solid var(--cor-borda); border-radius: var(--raio); text-decoration: none; background: var(--cor-fundo);
}
.outros-apartamentos__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cor-areia); }
.outros-apartamentos__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outros-apartamentos__texto { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5); }
.outros-apartamentos a:hover { border-color: var(--cor-mar); }
.outros-apartamentos__nome { font-family: var(--fonte-titulo); font-size: var(--titulo-3); line-height: 1.2; }
.outros-apartamentos__fato { font-size: var(--texto-p); color: var(--cor-texto-2); }

/* ---------- Página inicial ---------- */
.destaque-inicio { padding-block: var(--e-6) var(--e-7); background: linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-areia) 100%); }
.destaque-inicio__grade { display: grid; gap: var(--e-6); align-items: center; }
.destaque-inicio__nome { margin: 0 0 var(--e-2); font-weight: 700; font-size: var(--texto-p); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-terra); }
.destaque-inicio h1 { margin-bottom: var(--e-4); }
.destaque-inicio__sub { font-size: 1.125rem; color: var(--cor-texto-2); max-width: 44ch; }
@media (min-width: 60rem) { .destaque-inicio { padding-block: var(--e-8); } }

/* com foto: a foto cobre todo o topo, texto branco sobre degradê escuro */
.destaque-inicio--foto {
    position: relative; isolation: isolate; display: flex; align-items: flex-end;
    min-height: clamp(30rem, 78vh, 44rem); padding-block: var(--e-8) var(--e-7); background: var(--cor-noite); color: #fff;
}
.destaque-inicio__fundo { position: absolute; inset: 0; z-index: -1; }
.destaque-inicio__fundo picture, .destaque-inicio__fundo img { width: 100%; height: 100%; }
.destaque-inicio__fundo img { object-fit: cover; border-radius: 0; }
.destaque-inicio__fundo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgb(8 20 24 / 0.92) 0%, rgb(8 20 24 / 0.7) 45%, rgb(8 20 24 / 0.15) 80%);
}
@media (min-width: 60rem) {
    .destaque-inicio--foto { align-items: center; }
    .destaque-inicio__fundo::after { background: linear-gradient(90deg, rgb(8 20 24 / 0.9) 0%, rgb(8 20 24 / 0.72) 40%, rgb(8 20 24 / 0.1) 75%); }
    .destaque-inicio--foto .destaque-inicio__texto { max-width: 36rem; }
}
.destaque-inicio--foto h1 { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.35); }
.destaque-inicio--foto .destaque-inicio__nome { color: var(--cor-sol); }
.destaque-inicio--foto .destaque-inicio__sub { color: var(--cor-texto-claro); }
.destaque-inicio--foto .botao--secundario { color: #fff; border-color: #fff; }
.destaque-inicio--foto .botao--secundario:hover { background: #fff; color: var(--cor-mar); }
.destaque-inicio--foto :focus-visible { outline-color: var(--cor-sol); }

/* apartamentos na página inicial: foto principal + nome, o bloco inteiro é o link */
.mosaico-apartamentos { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .mosaico-apartamentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mosaico-apartamentos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); } }
.mosaico-apartamentos__item {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio);
    background: var(--cor-areia); color: #fff; text-decoration: none; box-shadow: var(--sombra);
}
.mosaico-apartamentos__item picture, .mosaico-apartamentos__item img { width: 100%; height: 100%; }
.mosaico-apartamentos__item img { object-fit: cover; border-radius: 0; transition: transform 300ms ease; }
@media (hover: hover) { .mosaico-apartamentos__item:hover img { transform: scale(1.04); } }
.mosaico-apartamentos__sem-foto {
    position: absolute; inset: 0 0 35% 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--fonte-titulo); font-size: 1.125rem; color: var(--cor-terra);
}
.mosaico-apartamentos__nome {
    position: absolute; inset: auto 0 0 0; display: grid; padding: var(--e-6) var(--e-3) var(--e-3);
    background: linear-gradient(0deg, rgb(8 20 24 / 0.85) 0%, rgb(8 20 24 / 0) 100%);
    font-family: var(--fonte-titulo); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2;
}
.mosaico-apartamentos__nome small { font-family: var(--fonte-texto); font-size: 0.8125rem; color: var(--cor-texto-claro); }
.mosaico-apartamentos__item:focus-visible { outline-offset: 3px; }
/* Ao passar o mouse, links com texto branco sobre foto ou cor forte não podem herdar o azul-escuro dos links
   (some no fundo; pedido do Roan, 15/10/2026): o texto fica branco e o nome ganha o amarelo do sol da marca. */
@media (hover: hover) {
    .mosaico-apartamentos__item:hover, .video__capa:hover,
    .canais__item--telefone:hover, .canais__item--instagram:hover, .canais__item--airbnb:hover { color: #fff; }
    .mosaico-apartamentos__item:hover .mosaico-apartamentos__nome { color: var(--cor-sol); }
}

/* ---------- Áreas compartilhadas ---------- */
/* cartões centralizados, com largura fixa: poucos itens não ficam encostados à esquerda */

.area-card {
    display: grid; height: 100%; overflow: hidden; text-decoration: none; color: var(--cor-texto); text-align: center;
    background: var(--cor-fundo); border: 1.5px solid var(--cor-borda); border-radius: var(--raio);
}
.area-card:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.area-card img { aspect-ratio: 3 / 2; border-radius: 0; }
.area-card__nome { display: flex; align-items: center; justify-content: center; gap: var(--e-3); padding: var(--e-4); font-weight: 700; font-size: 1.0625rem; }
.area-card__nome .icone { width: 1.5em; height: 1.5em; color: var(--cor-mar); }

.area { display: grid; gap: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--cor-borda); scroll-margin-top: calc(var(--altura-topo) + var(--e-4)); }
.area__titulo { display: flex; align-items: center; gap: var(--e-3); margin: 0; }
.area__titulo .icone { width: 1em; height: 1em; color: var(--cor-mar); }
.area__corpo { display: grid; gap: var(--e-5); }
.area h4 { font-family: var(--fonte-texto); font-weight: 700; font-size: 1rem; color: var(--cor-texto); margin: var(--e-4) 0 var(--e-2); }

/* ---------- Avaliações ---------- */
.avaliacao { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
.avaliacao__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.avaliacao__origem { padding: 2px var(--e-3); border-radius: var(--pilula); font-size: 0.8125rem; font-weight: 700; background: var(--cor-areia); color: var(--cor-texto); }
.avaliacao__origem--airbnb { background: var(--cor-airbnb-botao); color: #fff; }
.avaliacao__nota { display: inline-flex; gap: 2px; }
.avaliacao__nota .icone { width: 1.1em; height: 1.1em; }
.avaliacao__nota .cheia { color: var(--cor-estrela); }
.avaliacao__nota .vazia { color: var(--cor-borda); }
.avaliacao__texto { margin: 0; flex: 1; font-size: 1.0625rem; }
.avaliacao__texto p { margin: 0; }
.avaliacao__texto p::before { content: "\201C"; } .avaliacao__texto p::after { content: "\201D"; }
.avaliacao__rodape { font-size: var(--texto-p); color: var(--cor-texto-2); }
.avaliacao__rodape p { margin: 0 0 var(--e-1); }
.avaliacao__autor { font-weight: 700; color: var(--cor-texto); }
.avaliacao__rodape a { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); }

/* carrossel de avaliações (página inicial): uma por vez, centralizada */
.avaliacoes-carrossel__topo { text-align: center; }
.avaliacoes-carrossel__topo h2 { margin-bottom: var(--e-2); }
.avaliacoes-carrossel__topo p { margin: 0 auto; max-width: 44ch; color: var(--cor-texto-2); }
.carrossel--avaliacoes { max-width: 46rem; width: 100%; margin-inline: auto; }
.carrossel--avaliacoes .carrossel__trilho { border-radius: 0; }
.carrossel--avaliacoes .carrossel__slide { display: flex; padding: var(--e-2); }
.carrossel--avaliacoes .avaliacao { flex: 1; padding: var(--e-6) var(--e-5); background: var(--cor-fundo); box-shadow: none; border: 1px solid var(--cor-borda); }
.carrossel--avaliacoes .avaliacao__texto { font-size: 1.1875rem; line-height: 1.55; }
.carrossel--avaliacoes .carrossel__controles { justify-content: center; gap: var(--e-4); }
.avaliacoes-carrossel__mais { margin: 0; text-align: center; }

/* ---------- Localização (mapa) ---------- */
/* espaço com altura reservada: a prévia (imagem do mapa real) e depois o mapa interativo ocupam o mesmo lugar */
.mapa-local { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: calc(var(--raio) * 1.5); overflow: hidden; box-shadow: var(--sombra); background: var(--cor-superficie); }
.mapa-local__palco { position: relative; }
.mapa-local__area { position: relative; min-height: 18rem; aspect-ratio: 4 / 3; background: #F4EBD6; overflow: hidden; }
.mapa-local__previa, .mapa-local__previa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-local__previa img { object-fit: cover; border-radius: 0; background: none; }
.mapa-local__desenho { position: absolute; inset: 0; background: linear-gradient(110deg, #F4EBD6 0 58%, #7FC6D1 58%); }
.mapa-local--ativo .mapa-local__previa, .mapa-local--ativo .mapa-local__desenho, .mapa-local--ativo .mapa-local__traco { display: none; }
/* caminho e destino desenhados sobre a prévia; um desenho por formato, igual à imagem que aparece */
.mapa-local__traco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-local__traco--larga { display: none; }
@media (min-width: 48rem) { .mapa-local__traco--larga { display: block; } .mapa-local__traco--celular { display: none; } }
.mapa-local__traco-nome { font: 700 13px var(--fonte-texto); fill: var(--cor-mar); }
.mapa-local__abrir {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: 52px; padding: 0 var(--e-6);
    border: 0; border-radius: var(--pilula); background: var(--cor-mar); color: #fff; font: inherit; font-weight: 700; font-size: 1.0625rem;
    box-shadow: 0 8px 28px rgb(11 30 36 / 0.35); cursor: pointer; transition: transform var(--transicao), background-color var(--transicao);
}
.mapa-local__abrir:hover { background: var(--cor-mar-escuro); transform: scale(1.03); }
.mapa-local__abrir:disabled { opacity: 0.75; cursor: progress; }
.mapa-local__abrir[hidden] { display: none; }
.botao[hidden] { display: none; }
.mapa-local__status {
    position: absolute; left: 50%; top: calc(50% + 44px); translate: -50% 0; z-index: 2; margin: 0;
    padding: var(--e-1) var(--e-3); border-radius: var(--pilula); background: rgb(255 255 255 / 0.92); font-size: var(--texto-p); text-align: center;
}
.mapa-local__cartao { display: grid; gap: var(--e-2); padding: var(--e-5); min-width: 0; } /* nomes longos não esticam o cartão */
.mapa-local__cartao p { margin: 0; }
.mapa-local__nome { font-weight: 700; color: var(--cor-texto-2); font-size: var(--texto-p); }
.mapa-local__resposta { font-family: var(--fonte-titulo); font-size: var(--titulo-3); color: var(--cor-mar); line-height: 1.2; }
.mapa-local__resposta span { display: block; font-family: var(--fonte-texto); font-size: 1rem; color: var(--cor-texto); }
.mapa-local .linha-botoes { margin-top: var(--e-2); }
@media (min-width: 48rem) {
    .mapa-local__area { aspect-ratio: 21 / 9; }
    .mapa-local__cartao {
        position: absolute; left: var(--e-5); top: var(--e-5); z-index: 2; width: 21rem;
        max-height: calc(100% - var(--e-5) * 2); overflow-y: auto; overscroll-behavior: contain;
        background: rgb(255 255 255 / 0.96); border-radius: var(--raio); box-shadow: var(--sombra);
    }
    .mapa-local__abrir { left: auto; right: var(--e-6); top: auto; bottom: var(--e-6); translate: none; }
    .mapa-local__status { left: auto; right: var(--e-6); top: auto; bottom: calc(var(--e-6) + 60px); translate: none; }
}

/* marcadores do mapa (botões de verdade) */
.mapa-marcador { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.mapa-marcador--residencial { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgb(11 30 36 / 0.35); }
.mapa-marcador--residencial img { width: 48px; height: 48px; border-radius: 50%; }
.mapa-marcador__pulso { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--cor-sol); animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.mapa-marcador--praia, .mapa-marcador--lugar { display: grid; justify-items: center; }
.mapa-marcador--lugar .mapa-marcador__pino { background: var(--cor-mar); }
.mapa-marcador__pino {
    width: 30px; height: 30px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cor-turquesa);
    border: 3px solid #fff; box-shadow: 0 4px 10px rgb(11 30 36 / 0.3); transition: transform var(--transicao);
}
.mapa-marcador__nome {
    order: -1; margin-bottom: 4px; padding: 2px 8px; border-radius: var(--pilula); background: rgb(255 255 255 / 0.95);
    color: var(--cor-mar); font-size: 0.75rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgb(11 30 36 / 0.15);
}
.mapa-marcador--praia:hover .mapa-marcador__pino, .mapa-marcador--praia:focus-visible .mapa-marcador__pino { transform: scale(1.15); }

.mapa-marcador[hidden] { display: none; }

/* cartão rápido ao passar o mouse */
.mapa-local .mapa-popup-dica .maplibregl-popup-content { padding: var(--e-2) var(--e-4); pointer-events: none; }
.mapa-dica strong { display: block; color: var(--cor-mar); }
.mapa-dica p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--cor-texto-2); }

/* cartão do ponto (popup do mapa) */
.mapa-local .maplibregl-popup-content { padding: var(--e-4) var(--e-5) var(--e-3); border-radius: var(--raio); box-shadow: var(--sombra); font: inherit; }
.mapa-local .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 1.25rem; color: var(--cor-texto-2); }
.mapa-cartao strong { display: block; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 400; color: var(--cor-mar); padding-right: var(--e-5); }
.mapa-cartao p { margin: var(--e-1) 0 0; font-size: var(--texto-p); color: var(--cor-texto-2); }
.mapa-cartao__acoes { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); }
.mapa-cartao__acoes a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; }
.mapa-local .maplibregl-ctrl-group { border-radius: var(--raio-p); box-shadow: var(--sombra); }
.mapa-local .maplibregl-ctrl-group button { width: 36px; height: 36px; }

/* filtro por tipo acima do seletor de destino: um seletor único */
.mapa-tipos { display: flex; align-items: center; gap: var(--e-2); font-size: var(--texto-p); font-weight: 600; color: var(--cor-texto-2); }
.mapa-tipos[hidden], [data-mapa-grupo][hidden] { display: none; }
.mapa-tipos select {
    flex: 1; min-width: 0; min-height: 36px; padding: 0 var(--e-2); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-p);
    background: #fff; color: var(--cor-texto); font: inherit; font-weight: 600;
}

/* seletor de destino no cartão do mapa: "Do Residencial até: Praia da Gamboa ▾" */
.mapa-destinos { position: relative; min-width: 0; }
.mapa-destinos__atual > span:first-child, .mapa-destinos__nome { min-width: 0; overflow-wrap: anywhere; }
.mapa-destinos__atual {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-3);
    border: 1.5px solid var(--cor-mar); border-radius: var(--raio-p); background: #fff; color: var(--cor-mar);
    font-weight: 700; cursor: pointer; list-style: none;
}
.mapa-destinos__atual::-webkit-details-marker { display: none; }
.mapa-destinos__seta { flex: none; transition: transform var(--transicao); }
.mapa-destinos[open] .mapa-destinos__seta { transform: rotate(180deg); }
.mapa-destinos__lista {
    margin-top: var(--e-1); max-height: 13rem; overflow-y: auto; padding: var(--e-1);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-p); background: #fff; box-shadow: var(--sombra);
}
.mapa-destinos__grupo { margin: var(--e-2) var(--e-2) var(--e-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-2); }
.mapa-destinos__lista ul { list-style: none; margin: 0; padding: 0; }
.mapa-destinos__lista a {
    display: grid; min-height: var(--alvo); padding: var(--e-1) var(--e-2); border-radius: var(--raio-p);
    color: var(--cor-texto); text-decoration: none; align-content: center;
}
.mapa-destinos__lista a:hover { background: var(--cor-fundo); }
.mapa-destinos__lista a[aria-current="true"] { background: rgb(15 76 92 / 0.08); color: var(--cor-mar); }
.mapa-destinos__nome { font-weight: 600; }
.mapa-destinos__dist { font-size: 0.8125rem; color: var(--cor-texto-2); }
.mapa-local__nota { margin: 0; font-size: 0.75rem; color: var(--cor-texto-2); }
@media (prefers-reduced-motion: reduce) { .mapa-marcador__pulso { animation: none; } }

/* página que gera a imagem de prévia do mapa (só desenvolvimento) */
.mapa-previa-pagina { margin: 0; overflow: hidden; }
.mapa-local--previa { position: fixed; inset: 0; border-radius: 0; box-shadow: none; }
.mapa-local--previa .mapa-local__area { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; }
.mapa-local--previa .mapa-marcador__pulso { animation: none; transform: scale(1.15); opacity: 0.8; }

/* praia em destaque (página inicial e Praias) */
.praia-destaque { display: grid; gap: var(--e-6); align-items: center; }
.praia-destaque__foto img, .praia-destaque__foto .reservado { aspect-ratio: 4 / 3; box-shadow: var(--sombra); }
.praia-destaque__texto h2 { margin-bottom: var(--e-3); }
.praia-destaque__selo { display: inline-flex; margin: 0 0 var(--e-2); padding: 2px var(--e-3); border-radius: var(--pilula); background: var(--cor-sol); font-size: 0.8125rem; font-weight: 700; }
.praia-destaque__dist, .praia__resposta { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; color: var(--cor-mar); }
@media (min-width: 60rem) { .praia-destaque { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-8); } }

/* página Contato */

.canais__item--telefone { background: var(--cor-mar); color: #fff; }
.canais__item--telefone:hover { background: var(--cor-mar-escuro); color: #fff; }

/* canais de contato (página Contato) */
.canais { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.canais__item {
    display: flex; align-items: center; gap: var(--e-4); min-height: 72px; padding: var(--e-4) var(--e-5);
    border-radius: var(--raio); text-decoration: none; font-weight: 700; box-shadow: var(--sombra);
}
.canais__item .icone { width: 1.75rem; height: 1.75rem; }
.canais__item span { display: grid; }
.canais__item small { font-weight: 400; font-size: var(--texto-p); }
.canais__item--whatsapp { background: var(--cor-whatsapp); color: var(--cor-noite); }
.canais__item--whatsapp:hover { background: var(--cor-whatsapp-hover); color: var(--cor-noite); }
.canais__item--instagram { background: linear-gradient(45deg, var(--cor-instagram-escuro), var(--cor-instagram-roxo)); color: #fff; } /* tons escuros da marca: letra branca com contraste 5,1 ou mais */
.canais__item--instagram:hover { filter: brightness(0.92); color: #fff; }
.canais__item--airbnb { background: var(--cor-airbnb-botao); color: #fff; }
.canais__item--airbnb:hover { background: var(--cor-airbnb-botao-hover); color: #fff; }

/* créditos das fotos de licença livre, abaixo da galeria */
.galeria__creditos { margin: var(--e-2) 0 0; font-size: 0.75rem; color: var(--cor-texto-2); }
.galeria__creditos a { color: inherit; }

/* ---------- Vídeos (D26): capa própria; o player só entra ao tocar ---------- */
.videos { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.videos:has(> li:only-child) { max-width: 56rem; }
.video { margin: 0; }
.video__quadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--raio); background: var(--cor-noite); box-shadow: var(--sombra); }
.video__quadro iframe, .video__quadro video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video__capa { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-decoration: none;
    background: linear-gradient(160deg, var(--cor-turquesa), var(--cor-mar-escuro)); }
.video__capa picture, .video__capa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__capa img { object-fit: cover; border-radius: 0; filter: brightness(0.72); transition: transform 400ms ease, filter 200ms ease; }
@media (hover: hover) { .video__capa:hover img { transform: scale(1.03); filter: brightness(0.6); } }
.video__play {
    position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
    background: rgb(255 255 255 / 0.92); color: var(--cor-mar); box-shadow: 0 8px 28px rgb(0 0 0 / 0.35); transition: transform var(--transicao);
}
.video__play .icone { width: 34px; height: 34px; margin-left: 4px; }
.video__capa:hover .video__play, .video__capa:focus-visible .video__play { transform: scale(1.08); }
.video__aviso { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); font-size: 0.75rem; text-align: center; color: var(--cor-texto-claro); text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.video figcaption { display: grid; gap: 2px; margin-top: var(--e-2); }
.video__titulo { font-weight: 700; }
.video__credito { font-size: 0.8125rem; color: var(--cor-texto-2); }

/* ---------- O que conhecer e Trilhas (Fase 8) ---------- */
.secao__cabeca h2 { margin-bottom: var(--e-2); }
.secao__cabeca p { margin: 0; max-width: 52ch; color: var(--cor-texto-2); }

/* cartão com foto: o bloco inteiro é o link; sem foto, a ilustração da categoria em degradê */
.passeios { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.passeios > li { display: flex; }
/* faixa: no celular, rola para o lado (um cartão e meio à vista); no computador, grade */
.passeios--faixa { grid-auto-flow: column; grid-auto-columns: minmax(15rem, 72%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-2); overscroll-behavior-x: contain; }
.passeios--faixa > li { scroll-snap-align: start; }
@media (min-width: 48rem) {
    .passeios--faixa { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); overflow: visible; }
}
.passeio {
    --passeio-de: var(--cor-mar); --passeio-ate: var(--cor-turquesa);
    position: relative; display: block; flex: 1; aspect-ratio: 4 / 5; min-height: 17rem; overflow: hidden; border-radius: var(--raio);
    background: linear-gradient(160deg, var(--passeio-ate), var(--passeio-de)); color: #fff; text-decoration: none; box-shadow: var(--sombra);
}
@media (min-width: 48rem) { .passeio { aspect-ratio: 1; } }
.passeio--dunas { --passeio-de: var(--cor-terra); --passeio-ate: #C9963A; }
.passeio--cachoeira { --passeio-de: var(--cor-mar-escuro); --passeio-ate: var(--cor-turquesa); }
.passeio--mirante { --passeio-de: var(--cor-mar); --passeio-ate: #5B8FA0; }
.passeio--historia, .passeio--arqueologia { --passeio-de: #4A2E0C; --passeio-ate: var(--cor-terra); }
.passeio--comunidade { --passeio-de: #5A3A1E; --passeio-ate: #B07A3C; }
.passeio--natureza, .passeio--trilha-facil { --passeio-de: #2C5716; --passeio-ate: var(--cor-coqueiro); }
.passeio--trilha-moderada { --passeio-de: #3D4A1A; --passeio-ate: #7A7A26; }
.passeio--praia { --passeio-de: var(--cor-mar-escuro); --passeio-ate: var(--cor-mar); }
.passeio--lagoa { --passeio-de: #1F4E5A; --passeio-ate: #4C8E8A; }
.passeio--evento { --passeio-de: #5A1E3A; --passeio-ate: #B5486B; }
.passeio--temporada { --passeio-de: var(--cor-mar-escuro); --passeio-ate: #2F7F8E; }
.passeio--trilha-dificil { --passeio-de: #4A2E0C; --passeio-ate: #8A4B2A; }
.passeio__fundo { position: absolute; inset: 0; }
.passeio__fundo picture, .passeio__fundo img { width: 100%; height: 100%; }
.passeio__fundo img { object-fit: cover; border-radius: 0; transition: transform 400ms ease; }
@media (hover: hover) { .passeio:hover .passeio__fundo img { transform: scale(1.05); } }
.passeio__ilustracao { position: absolute; right: -12%; top: 4%; width: 78%; height: auto; aspect-ratio: 1; color: rgb(255 255 255 / 0.22); stroke-width: 1.2; }
.passeio__texto {
    position: absolute; inset: auto 0 0 0; display: grid; gap: var(--e-1); padding: var(--e-7) var(--e-4) var(--e-4);
    background: linear-gradient(0deg, rgb(8 20 24 / 0.88) 0%, rgb(8 20 24 / 0.55) 60%, rgb(8 20 24 / 0) 100%);
}
.passeio__selo {
    justify-self: start; display: inline-flex; align-items: center; gap: var(--e-1); padding: 2px var(--e-2);
    border-radius: var(--pilula); background: rgb(255 255 255 / 0.92); color: var(--cor-mar); font-size: 0.75rem; font-weight: 700;
}
.passeio__selo .icone { width: 1.1em; height: 1.1em; }
.passeio__nome { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1.2; color: #fff; }
.passeio__info { display: grid; gap: 2px; font-size: 0.8125rem; color: var(--cor-texto-claro); }
.passeio__info span { display: inline-flex; align-items: center; gap: var(--e-1); }
.passeio__info .icone { width: 1.1em; height: 1.1em; color: var(--cor-sol); }
.passeio:focus-visible { outline-offset: 3px; }

/* selo da categoria ou da dificuldade, no topo da página */
.passeio-selo { display: inline-flex; align-items: center; gap: var(--e-1); margin: 0 0 var(--e-2); padding: 2px var(--e-3); border-radius: var(--pilula); background: var(--cor-areia); color: var(--cor-terra); font-size: 0.8125rem; font-weight: 700; }
.passeio-selo .icone { width: 1.1em; height: 1.1em; }

/* ficha técnica da trilha */
.ficha { width: 100%; margin: var(--e-4) 0; border-collapse: collapse; background: var(--cor-superficie); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.ficha th, .ficha td { padding: var(--e-3) var(--e-4); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 0; }
.ficha th { width: 45%; font-weight: 600; color: var(--cor-texto-2); }
.ficha td { font-weight: 700; color: var(--cor-texto); }

/* filtros das trilhas (formulário comum, sem JavaScript) */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); }
.filtros__campo { display: grid; gap: var(--e-1); font-size: var(--texto-p); font-weight: 700; color: var(--cor-texto-2); }
.filtros__campo select {
    min-height: var(--alvo); min-width: 11rem; padding: 0 var(--e-3); border: 1.5px solid var(--cor-borda-campo); border-radius: var(--raio-p);
    background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 400; font-size: 1rem;
}
.filtros a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.filtros__resultado { margin: 0; font-size: var(--texto-p); color: var(--cor-texto-2); }

/* marcadores de pontos turísticos e trilhas: nome aparece ao passar o mouse, no foco ou quando escolhido (menos poluição) */
.mapa-marcador--ponto, .mapa-marcador--trilha { display: grid; justify-items: center; }
.mapa-marcador--ponto .mapa-marcador__pino { width: 24px; height: 24px; background: var(--cor-coqueiro); }
.mapa-marcador--trilha .mapa-marcador__pino { width: 24px; height: 24px; background: var(--cor-terra); }
.mapa-marcador--ponto .mapa-marcador__nome, .mapa-marcador--trilha .mapa-marcador__nome { visibility: hidden; }
.mapa-marcador--ponto:is(:hover, :focus-visible, .mapa-marcador--ativo) .mapa-marcador__nome,
.mapa-marcador--trilha:is(:hover, :focus-visible, .mapa-marcador--ativo) .mapa-marcador__nome { visibility: visible; }
.mapa-marcador:is(.mapa-marcador--ponto, .mapa-marcador--trilha):is(:hover, :focus-visible) .mapa-marcador__pino { transform: scale(1.15); }

/* ---------- Guia útil (Fase 9) ---------- */
.abas { display: grid; gap: var(--e-3); }

.abas__grupo { display: grid; gap: var(--e-1); }
@media (min-width: 48rem) { .abas__grupo { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; } }
.abas__area { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-2); }
.abas ul { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.aviso-emergencia {
    display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-3) var(--e-4);
    border-radius: var(--raio-p); background: rgb(179 38 30 / 0.07); color: var(--cor-erro); font-weight: 600;
}
.aviso-emergencia .icone { flex: none; }
.abas a {
    display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); padding: 0 var(--e-4);
    border: 1.5px solid var(--cor-borda); border-radius: var(--pilula); background: var(--cor-fundo);
    color: var(--cor-texto); font-weight: 600; text-decoration: none;
}
.abas a .icone { width: 1.15em; height: 1.15em; color: var(--cor-mar); }
.abas a:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.abas a[aria-current="page"] { background: var(--cor-mar); border-color: var(--cor-mar); color: #fff; }
.abas a[aria-current="page"] .icone { color: #fff; }
/* Guia útil sem filtro: todas as categorias ativas (contorno e fundo claros); clicar numa deixa só ela marcada (09/10/2026) */

.lugares { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.lugares > li { display: flex; }
.lugar {
    position: relative; flex: 1; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e-3); align-items: start;
    padding: var(--e-3); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio);
}
.lugar:hover { border-color: var(--cor-mar); }
.lugar__midia { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio-p); background: var(--cor-areia); color: var(--cor-terra); }
.lugar__midia picture, .lugar__midia img { width: 100%; height: 100%; }
.lugar__midia img { object-fit: cover; border-radius: 0; }
.lugar__midia > .icone { width: 2rem; height: 2rem; }
.lugar__midia--logo { background: #fff; border: 1px solid var(--cor-borda); }
.lugar__midia--logo img { object-fit: contain; }
.lugar-cabeca { display: flex; align-items: center; gap: var(--e-4); }
.lugar-cabeca__logo { flex: none; width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: var(--raio-p); background: #fff; border: 1px solid var(--cor-borda); }
@media (min-width: 48rem) { .lugar-cabeca__logo { width: 5rem; height: 5rem; } }
.lugar__corpo { display: grid; gap: 2px; min-width: 0; }
.lugar__nome { margin: 0; font-family: var(--fonte-texto); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.lugar__nome a { color: var(--cor-texto); text-decoration: none; }
.lugar__nome a::after { content: ""; position: absolute; inset: 0; } /* o cartão inteiro leva à página */
.lugar__nome a:focus-visible { outline: none; }
.lugar:has(a:focus-visible) { outline: 3px solid var(--cor-mar); outline-offset: 2px; }
.lugar__categoria { margin: 0; font-size: 0.8125rem; color: var(--cor-texto-2); }
.lugar__fatos { display: grid; gap: 2px; list-style: none; margin: var(--e-1) 0 0; padding: 0; font-size: var(--texto-p); }
.lugar__fatos li { display: flex; align-items: center; gap: var(--e-1); }
.lugar__fatos .icone { width: 1.05em; height: 1.05em; color: var(--cor-mar); flex: none; }
.lugar__hoje { font-weight: 600; color: var(--cor-sucesso); }
.lugar__hoje--fechado { color: var(--cor-erro); }
.lugar__sem-horario { color: var(--cor-texto-2); }
.lugar__aviso { font-weight: 400; color: var(--cor-texto-2); }
.lugar__verificado { margin: var(--e-1) 0 0; font-size: 0.75rem; color: var(--cor-texto-2); }
.lugar__endereco { display: flex; align-items: center; gap: var(--e-2); color: var(--cor-texto-2); }
.lugar__endereco .icone { flex: none; color: var(--cor-mar); }

.contatos-lugar { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.contatos-lugar__item {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-4);
    border-radius: var(--pilula); border: 1.5px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font-weight: 600; text-decoration: none;
}
.contatos-lugar__item:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.contatos-lugar__item .icone { width: 1.2em; height: 1.2em; color: var(--cor-mar); }

.horario-bloco { margin-top: var(--e-5); }
.horario-bloco h2 { font-size: var(--titulo-3); }
.horario tr.horario__hoje th, .horario tr.horario__hoje td { background: rgb(15 76 92 / 0.07); color: var(--cor-mar); }
.horario__marca { margin-left: var(--e-1); padding: 0 var(--e-2); border-radius: var(--pilula); background: var(--cor-mar); color: #fff; font-size: 0.75rem; }
.horario__aviso { font-size: var(--texto-p); color: var(--cor-aviso); }

/* quadro de horários de ônibus (Guia útil, transporte) */
.onibus { margin-top: var(--e-5); display: grid; gap: var(--e-4); }
.onibus h2 { font-size: var(--titulo-3); }
.onibus__explica { color: var(--cor-texto-2); }
.onibus__escolha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-1); padding: var(--e-1); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
@media (min-width: 40rem) { .onibus__escolha { justify-self: start; grid-auto-columns: auto; } }
.onibus__escolha button { border: 0; border-radius: var(--raio-p); padding: var(--e-2) var(--e-4); background: none; color: var(--cor-texto); font: inherit; font-weight: 600; cursor: pointer; min-height: 2.75rem; }
.onibus__escolha button[aria-pressed="true"] { background: var(--cor-mar); color: #fff; }
.onibus__escolha[hidden] { display: none; }
.onibus__escolha button:focus-visible { outline: 3px solid var(--cor-turquesa); outline-offset: 2px; }
.onibus__dia { display: grid; gap: var(--e-3); }
.onibus__dia[hidden] { display: none; }
.onibus__dia-titulo { font-size: 1.125rem; }
.onibus--abas .onibus__dia-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onibus__sentidos { display: grid; gap: var(--e-4); }
@media (min-width: 48rem) { .onibus__sentidos { grid-template-columns: 1fr 1fr; } }
.onibus__cartao { border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.onibus__sentido { font-family: var(--fonte-texto); font-size: 1rem; font-weight: 700; color: var(--cor-mar); }
.onibus__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.onibus__lista li { display: flex; align-items: baseline; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--cor-borda); }
.onibus__lista li:first-child { border-top: 0; }
.onibus__hora { font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.onibus__lista .onibus__hora { font-size: 1.25rem; color: var(--cor-mar); }
.onibus__caminho { font-size: var(--texto-p); color: var(--cor-texto-2); }
.onibus__nenhuma { color: var(--cor-texto-2); }

/* marcadores de lugares no mapa */
.mapa-marcador--estabelecimento { display: grid; justify-items: center; }
.mapa-marcador--estabelecimento .mapa-marcador__pino { width: 22px; height: 22px; background: var(--cor-sol); border-color: #fff; }
.mapa-marcador--estabelecimento .mapa-marcador__nome { visibility: hidden; }
.mapa-marcador--estabelecimento:is(:hover, :focus-visible, .mapa-marcador--ativo) .mapa-marcador__nome { visibility: visible; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* eventos: calendário dos próximos meses (sem JavaScript) e "quando / onde" */
.calendario { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.calendario__mes { border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); padding: var(--e-3) var(--e-4); }
.calendario__mes--atual { border-color: var(--cor-mar); box-shadow: inset 0 0 0 1px var(--cor-mar); }
.calendario__titulo { font-family: var(--fonte-texto); font-size: 1rem; font-weight: 700; color: var(--cor-mar); margin-bottom: var(--e-2); }
.calendario__titulo span { font-weight: 500; color: var(--cor-texto-2); }
.calendario__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.calendario__item { display: flex; gap: var(--e-2); align-items: baseline; font-size: var(--texto-p); }
.calendario__item a { font-weight: 600; }
.calendario__dia { flex: none; min-width: 2.25rem; padding: 0 var(--e-2); border-radius: var(--pilula); background: rgb(181 72 107 / 0.12); color: #7A2748; font-size: 0.8125rem; font-weight: 700; text-align: center; }
.calendario__item--temporada { padding-left: var(--e-2); border-left: 3px solid var(--cor-turquesa); }

.evento-quando { display: grid; gap: var(--e-2); margin: var(--e-3) 0; }
.evento-quando div { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.evento-quando dt { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: 700; color: var(--cor-mar); }
.evento-quando dt .icone { width: 1.1em; height: 1.1em; }
.evento-quando dd { margin: 0; }

/* Informações da estadia (09/10/2026): cada assunto num cartão (página /informacoes) */
.estadia__bloco { padding: var(--e-4) var(--e-5); border: 1.5px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-fundo); }
.estadia__bloco h3 { font-size: var(--titulo-3); margin: 0 0 var(--e-2); }
.estadia__bloco ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--e-1); }
.estadia__bloco p { margin: var(--e-2) 0 0; }

/* Alternador (09/10/2026): botões que abrem um painel por vez (fotos por cômodo, áreas compartilhadas) */
.alternador { display: grid; gap: var(--e-4); scroll-margin-top: calc(var(--altura-topo) + var(--e-4)); }
.alternador h2 { margin: 0; }
.alternador__botoes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); list-style: none; margin: 0; padding: 0; }
.alternador__botao {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-4);
    border: 1.5px solid var(--cor-borda); border-radius: var(--pilula); background: var(--cor-superficie);
    color: var(--cor-texto); font-weight: 600; text-decoration: none;
}
.alternador__botao .icone { width: 1.25em; height: 1.25em; color: var(--cor-mar); flex: none; }
.alternador__botao:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.alternador__botao[aria-expanded="true"] { border-color: var(--cor-mar); background: var(--cor-mar); color: #fff; }
.alternador__botao[aria-expanded="true"] .icone { color: #fff; }
.alternador__qtd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 var(--e-1);
    margin-left: var(--e-1); border-radius: var(--pilula); background: var(--cor-areia); color: var(--cor-terra); font-size: 0.8125rem;
}
.alternador__painel { display: grid; gap: var(--e-4); padding-top: var(--e-3); scroll-margin-top: calc(var(--altura-topo) + var(--e-4)); }
.alternador__painel[hidden] { display: none; }
.alternador__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.alternador__cabecalho h3 { margin: 0; }
.alternador__info { color: var(--cor-texto-2); font-size: var(--texto-p); }
.alternador__texto { margin: 0; max-width: 65ch; }
.alternador .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .alternador .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Atalho e página das informações da estadia (09/10/2026) */
.atalho-estadia { display: grid; gap: var(--e-3); }
.atalho-estadia h2, .atalho-estadia p { margin: 0; }
.alternador--filtro .estadia__bloco h2 { font-size: var(--titulo-2); margin: 0 0 var(--e-2); }
.informacoes__contato { margin-top: var(--e-6); }

.estadia__parte + .estadia__parte { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--cor-borda); }
.estadia__parte h3 { font-size: var(--titulo-3); margin: 0 0 var(--e-2); }

/* Filtro dos apartamentos (09/10/2026): marcações (térreo, vista, sacada) lado a lado */
.filtros__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); border: 0; margin: 0; padding: 0; }
.filtros__marcas label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); cursor: pointer; }
.filtros__marcas input { width: 1.15rem; height: 1.15rem; accent-color: var(--cor-mar); }

/* Revisão de design (14/10/2026) */
/* card do apartamento: Airbnb como link discreto, abaixo dos botões */
.card__airbnb { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); color: var(--cor-texto); font-size: 0.9375rem; }
.card__airbnb .icone { width: 1.1em; height: 1.1em; color: var(--cor-airbnb-botao); }
.selo--terreo { background: var(--cor-mar); color: #fff; }
/* chamada final: fatos que tranquilizam */
.galeria__todas { margin: var(--e-3) 0 0; }
/* bloco "Explore" da página inicial: Praia da Gamboa em destaque e 4 atalhos (revisão de 14/10/2026) */
.explore .praia-destaque { margin-bottom: var(--e-4); }

.avaliacoes-carrossel__mais { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5); }
/* avaliações longas: no máximo 7 linhas, com reticências (RN15 permite cortar sem mudar o sentido); o link leva à original */
.carrossel--avaliacoes .carrossel__trilho { align-items: start; }
.carrossel--avaliacoes .avaliacao__texto p { display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }

/* topo no celular: botões com 8 px entre si (antes 4 px: tocava no WhatsApp querendo o Menu) e "Menu" escrito no iPhone de 375 px (revisão de 14/10/2026) */
.topo__acoes { gap: var(--e-2); }
@media (min-width: 23rem) { .botao-menu .botao-icone__texto { display: inline; } }
/* Airbnb discreto (Roan, 14/10/2026): link abaixo do WhatsApp e, na barra fixa, botão contornado e estreito */
.opcoes-reserva__airbnb { margin: 0; }
.opcoes-reserva__airbnb a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); color: var(--cor-texto); }
.opcoes-reserva__airbnb .icone { width: 1.1em; height: 1.1em; color: var(--cor-airbnb-botao); }
.botao--airbnb-discreto { background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-borda); }
.botao--airbnb-discreto .icone { color: var(--cor-airbnb-botao); }
.barra-reserva .botao--whatsapp { flex: 2; }
.barra-reserva .botao--airbnb-discreto { flex: 1; }
.estadia__bloco + .estadia__bloco { border-top: 1px solid var(--cor-borda); padding-top: var(--e-5); }
/* cartões de lugar no celular: dois por linha (antes um por linha, ~430 px cada) */
@media (max-width: 47.99rem) {
    .passeios:not(.passeios--faixa) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .passeios:not(.passeios--faixa) .passeio { min-height: 13rem; aspect-ratio: 3 / 4; }
    .passeios:not(.passeios--faixa) .passeio__texto { padding: var(--e-6) var(--e-3) var(--e-3); }
    .passeios:not(.passeios--faixa) .passeio__nome { font-size: 1.125rem; }
}
/* áreas compartilhadas no início: o mesmo mosaico dos apartamentos; 4 áreas em 2 colunas, 4 no computador */
@media (min-width: 40rem) and (max-width: 63.99rem) { .mosaico-apartamentos--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mosaico-apartamentos__icone { display: inline-flex; align-items: center; gap: var(--e-2); }
.mosaico-apartamentos__icone .icone { width: 1.1em; height: 1.1em; flex: none; }
/* cor de cada grupo no mapa, pedido do Roan de 15/10/2026: antes os lugares do guia eram todos amarelos (sem legenda, a pedido dele) */
[data-grupo="praias"] { --cor-grupo: var(--cor-turquesa); }
[data-grupo="lagoas"] { --cor-grupo: #2E7FA0; }
[data-grupo="pontos"] { --cor-grupo: var(--cor-coqueiro); }
[data-grupo="trilhas"] { --cor-grupo: var(--cor-terra); }
[data-grupo="comer"] { --cor-grupo: #E39A0B; }
[data-grupo="comprar"] { --cor-grupo: #8A5CC7; }
[data-grupo="saude"] { --cor-grupo: #D23F36; }
[data-grupo="transporte"] { --cor-grupo: #1F5FA8; }
[data-grupo="passeios"] { --cor-grupo: #C2477D; }
[data-grupo="cidade"] { --cor-grupo: var(--cor-mar); }
.mapa-marcador[data-grupo]:not([data-grupo=""]) .mapa-marcador__pino { background: var(--cor-grupo); }
.area[hidden] { display: none; } /* Residencial: uma área por vez (alternador) */
.js [data-alternador] > .area { border-top: 0; padding-top: 0; } /* sem a linha em cima da área aberta (pedido do Roan, 15/10/2026) */
/* avaliações (pedido do Roan, 15/10/2026: "muito sem sal"): as duas notas em destaque e, com foto, a praia ao fundo */
.avaliacoes-notas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin: var(--e-3) 0 var(--e-4); padding: 0; list-style: none; }
.avaliacoes-notas li { display: grid; justify-items: center; gap: 2px; min-width: 9.5rem; padding: var(--e-3) var(--e-5); border-radius: var(--raio); background: var(--cor-superficie); box-shadow: var(--sombra); }
.avaliacoes-notas__nota { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fonte-titulo); font-size: 2.5rem; line-height: 1; color: var(--cor-mar); }
.avaliacoes-notas__nota .icone { width: 0.6em; height: 0.6em; color: var(--cor-sol); }
.avaliacoes-notas__origem { font-weight: 700; color: var(--cor-texto); }
.avaliacoes-notas__origem small { margin-left: 6px; padding: 1px 8px; border-radius: var(--pilula); background: var(--cor-airbnb-botao); color: #fff; font-size: 0.75rem; vertical-align: 1px; }
.avaliacoes-notas__total { font-size: 0.875rem; color: var(--cor-texto-2); }
.avaliacoes-carrossel--foto { position: relative; isolation: isolate; overflow: hidden; background: var(--cor-noite); }
.avaliacoes-carrossel__fundo { position: absolute; inset: 0; z-index: -1; }
.avaliacoes-carrossel__fundo picture, .avaliacoes-carrossel__fundo img { width: 100%; height: 100%; }
.avaliacoes-carrossel__fundo img { object-fit: cover; border-radius: 0; }
.avaliacoes-carrossel__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 32 40 / 0.62) 0%, rgb(8 32 40 / 0.35) 50%, rgb(8 32 40 / 0.6) 100%); }
.avaliacoes-carrossel--foto h2 { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.4); }
.avaliacoes-carrossel--foto .avaliacoes-carrossel__topo p { color: rgb(255 255 255 / 0.85); }
.avaliacoes-carrossel--foto .carrossel--avaliacoes .avaliacao { background: var(--cor-superficie); border: 0; box-shadow: 0 18px 40px rgb(0 0 0 / 0.3); }
.avaliacoes-carrossel--foto .carrossel__posicao { color: rgb(255 255 255 / 0.85); }
.avaliacoes-carrossel--foto .avaliacoes-carrossel__mais a { color: #fff; }
/* crédito da foto de fundo (fotos de terceiros), discreto no canto */
.fundo-credito { position: absolute; right: var(--e-3); bottom: var(--e-2); z-index: 1; margin: 0; font-size: 0.6875rem; color: rgb(255 255 255 / 0.75); }
/* ---------- Artigos (Fase 11) ---------- */
.cartao-artigo__categoria { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-turquesa); }
.cartao-artigo__data { margin: auto 0 0; font-size: var(--texto-p); color: var(--cor-texto-2); }
@media (min-width: 48rem) {
    .cartao-artigo--destaque { flex-direction: row; }
    .cartao-artigo--destaque .card__midia { flex: 1.4; }
    .cartao-artigo--destaque .card__midia img, .cartao-artigo--destaque .card__midia .reservado { height: 100%; aspect-ratio: auto; object-fit: cover; }
    .cartao-artigo--destaque .card__corpo { flex: 1; justify-content: center; padding: var(--e-6); }
    .cartao-artigo--destaque .card__titulo { font-size: var(--titulo-2); }
}
.artigo__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; color: var(--cor-texto-2); font-size: var(--texto-p); }
.artigo__capa img { width: 100%; height: auto; }
.artigo__corpo { font-size: 1.0625rem; line-height: 1.7; }
.artigo__corpo > * + * { margin-top: var(--e-4); }
.artigo__corpo h2, .artigo__corpo h3, .artigo__corpo h4 { margin-top: var(--e-6); }
.artigo__corpo blockquote { margin-inline: 0; padding: var(--e-2) var(--e-5); border-left: 4px solid var(--cor-turquesa); color: var(--cor-texto-2); font-style: italic; }
.artigo__corpo ul, .artigo__corpo ol { padding-left: 1.4em; }
.artigo__corpo .link-externo::after { content: " \2197"; font-size: 0.85em; }
.artigo__foto img { width: 100%; height: auto; }
.artigo__tags ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.artigo__tags li { padding: 2px var(--e-3); border-radius: var(--pilula); background: var(--cor-areia); color: var(--cor-terra); font-size: 0.875rem; }
.artigo__autor { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5); border-radius: var(--raio); background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
.artigo__autor p { margin: 0 0 var(--e-2); }
.artigo__autor-foto { flex: none; width: 5.5rem; }
.artigo__autor-foto img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; }
.artigo__autor-rotulo { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-2); }
.artigo__autor-nome { margin: 0 0 var(--e-1); font-size: var(--titulo-3); }
.artigo__autor-papel { color: var(--cor-texto-2); }
.artigo__autor--pagina { margin-top: var(--e-4); background: transparent; border: 0; padding: 0; }
.artigo__autor--pagina .artigo__autor-foto, .artigo__autor--pagina .artigo__autor-foto img { width: 7rem; height: 7rem; }
.artigo__autor--pagina h1 { margin: 0 0 var(--e-1); }
/* ---------- Performance (Fase 13, seção 30.2) ---------- */
/* troca de página com transição suave (navegadores que suportam); sem movimento para quem pediu menos */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* rodapé: o navegador só desenha quando ele chega perto da tela */
.rodape { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
/* Gravuras de canto (pedido do Roan, 15/10/2026, inspirado em sites de hospedagem de praia): ilustrações antigas de
   domínio público, clareadas no azul do site. Coqueiro: Köhler, Medizinal-Pflanzen, 1887; folhagem: Exotic Flora, 1823;
   hibisco: Botanical Magazine, 1792; concha: Popular Science Monthly, 1896; estrela-do-mar: Haeckel, 1904; baleia-franca:
   Beddard, A Book of Whales, 1900; rosa dos ventos: Bowen, 1748; tainha: Goode, 1887; salsa-da-praia: Blanco, Flora de
   Filipinas, 1880; capivara: Cambridge Natural History, 1895; mapa: Tomás López, Isla de Santa Catalina, 1777;
   escolhidas pelo Roan (15/10/2026): concha (Rijksmuseum, c. 1650), maria-farinha (Popular Science Monthly, 1910),
   pinguim-de-magalhães (Joseph Smit, 1881), leão-marinho (Cambridge Natural History, 1902), tartaruga-verde (1907),
   camarão-branco (Yale Peabody Museum, CC0), ermitão (1903), lobo-marinho (1883) e pinturas rupestres de Backa,
   Suécia (foto CC0, só as figuras).
   Sempre inteiras (nada cortado na borda), atrás do conteúdo, só em telas largas (o celular nem baixa). */
.decorada { position: relative; overflow: hidden; isolation: isolate; }
.decorada > .conteiner { position: relative; z-index: 1; }
.decorada::before, .decorada::after { position: absolute; z-index: 0; pointer-events: none; opacity: 0.3; background: no-repeat center / contain;
    max-height: calc(100% - var(--e-5) * 2); }
.deco-coqueiro::after { background-image: url("../img/decoracao/coqueiro.webp"); aspect-ratio: 398 / 640; mask-image: linear-gradient(#000 88%, transparent); }
.deco-folhagem::after { background-image: url("../img/decoracao/folhagem.webp"); aspect-ratio: 523 / 640; }
.deco-baleia::after { background-image: url("../img/decoracao/baleia.webp"); aspect-ratio: 640 / 140; }
.deco-hibisco::after { background-image: url("../img/decoracao/hibisco.webp"); aspect-ratio: 387 / 640; }
.deco-praia::after { background-image: url("../img/decoracao/praia.webp"); aspect-ratio: 640 / 575; }
.deco-salsa::after { background-image: url("../img/decoracao/salsa.webp"); aspect-ratio: 402 / 640; }
.deco-rosa::after { background-image: url("../img/decoracao/rosa-dos-ventos.webp"); aspect-ratio: 1; }
.deco-tainha::after { background-image: url("../img/decoracao/tainha.webp"); aspect-ratio: 640 / 247; }
.deco-capivara::after { background-image: url("../img/decoracao/capivara.webp"); aspect-ratio: 640 / 369; }
.deco-concha::after { background-image: url("../img/decoracao/concha.webp"); aspect-ratio: 640 / 345; }
.deco-caranguejo::after { background-image: url("../img/decoracao/caranguejo.webp"); aspect-ratio: 640 / 298; }

.deco-tartaruga::after { background-image: url("../img/decoracao/tartaruga.webp"); aspect-ratio: 640 / 412; }
.deco-camarao::after { background-image: url("../img/decoracao/camarao.webp"); aspect-ratio: 459 / 251; }

.deco-rupestre::after { background-image: url("../img/decoracao/rupestre.webp"); aspect-ratio: 532 / 640; }
/* o mapa é um retângulo: as bordas somem aos poucos */
.deco-mapa::after { background-image: url("../img/decoracao/mapa.webp"); aspect-ratio: 800 / 322;
    mask-image: radial-gradient(closest-side, #000 55%, transparent); }
/* Segunda gravura da seção, em outro canto (pedidos do Roan, 15/10/2026): deco2-<figura> + deco2--esq ou deco2--dir;
   embaixo por padrão, deco2--topo sobe. Ex.: rosa dos ventos na Localização do início, coqueiro nos Apartamentos. */

.deco2-tainha::before { background-image: url("../img/decoracao/tainha.webp"); aspect-ratio: 640 / 247; }
.deco2-coqueiro::before { background-image: url("../img/decoracao/coqueiro.webp"); aspect-ratio: 398 / 640; mask-image: linear-gradient(#000 88%, transparent); }
.deco2-concha::before { background-image: url("../img/decoracao/concha.webp"); aspect-ratio: 640 / 345; }
.deco2-ermitao::before { background-image: url("../img/decoracao/ermitao.webp"); aspect-ratio: 302 / 334; }
/* figuras em dupla em todas as páginas (Roan, 15/10/2026): qualquer figura pode ser a segunda, no canto de baixo */
.deco2-baleia::before { background-image: url("../img/decoracao/baleia.webp"); aspect-ratio: 640 / 140; }
.deco2-folhagem::before { background-image: url("../img/decoracao/folhagem.webp"); aspect-ratio: 523 / 640; }
.deco2-salsa::before { background-image: url("../img/decoracao/salsa.webp"); aspect-ratio: 402 / 640; }
.deco2-leao-marinho::before { background-image: url("../img/decoracao/leao-marinho.webp"); aspect-ratio: 617 / 272; }

/* Lado da figura (pedido do Roan, 15/10/2026: nunca o mesmo lado duas vezes seguidas): conta os blocos da página
   (seções e o artigo); ímpares à direita, pares à esquerda. Assim os lados alternam sozinhos, mesmo quando uma seção
   não aparece. No blog o corpo do artigo é branco, então a contagem começa invertida. deco--esq/deco--dir forçam (classe repetida
   de propósito, para vencer a contagem do blog). */
main > :nth-child(odd of :is(.secao, article)), main:has(> .artigo) > :nth-child(even of :is(.secao, article)) {
    --deco-esq: auto; --deco-dir: 1rem; --deco-x: right; --deco-espelho: -1 1; }
main > :nth-child(even of :is(.secao, article)), main:has(> .artigo) > :nth-child(odd of :is(.secao, article)) {
    --deco-esq: 1rem; --deco-dir: auto; --deco-x: left; --deco-espelho: 1 1; }
main .decorada.deco--dir.deco--dir { --deco-esq: auto; --deco-dir: 1rem; --deco-x: right; --deco-espelho: -1 1; }
main .decorada.deco--esq.deco--esq { --deco-esq: 1rem; --deco-dir: auto; --deco-x: left; --deco-espelho: 1 1; }

/* Fundos alternados do mesmo jeito (pedido do Roan, 15/10/2026: sem duas seções seguidas com o mesmo fundo).
   Seções com foto ou cor própria (areia, noite) ficam como estão, mas contam. */
main > .secao:not(.secao--areia, .secao--escura, .avaliacoes-carrossel--foto):nth-child(odd of :is(.secao, article)),
main:has(> .artigo) > .secao:not(.secao--areia, .secao--escura, .avaliacoes-carrossel--foto):nth-child(even of :is(.secao, article)) {
    background: var(--cor-fundo); }
main > .secao:not(.secao--areia, .secao--escura, .avaliacoes-carrossel--foto):nth-child(even of :is(.secao, article)),
main:has(> .artigo) > .secao:not(.secao--areia, .secao--escura, .avaliacoes-carrossel--foto):nth-child(odd of :is(.secao, article)) {
    background: var(--cor-superficie); }

/* ao lado de um texto centralizado de 70ch (cabeçalhos) */
@media (min-width: 75rem) {
    .deco--texto::after { content: ""; top: 50%; translate: 0 -50%; left: calc(50% + var(--largura-texto) / 2 + 1rem);
        width: min(28rem, calc(50% - var(--largura-texto) / 2 - 1rem)); }
    /* o coqueiro inteiro é alto: cabe na altura da seção, sem cortar as folhas */
    .deco-coqueiro.deco--texto::after { top: var(--e-4); bottom: var(--e-4); translate: none; aspect-ratio: auto; }
}
/* na margem da seção, inteira, encostada na borda do lado da vez e passando por trás do conteúdo */
@media (min-width: 90rem) {
    .decorada:not(.deco--texto)::after { content: ""; top: var(--e-5); left: var(--deco-esq); right: var(--deco-dir);
        background-position: var(--deco-x) center; width: min(26rem, calc((100vw - var(--largura-max)) / 2 + 8rem)); }
    .decorada.deco--base::after { top: auto; bottom: var(--e-5); }
    .deco-baleia:not(.deco--texto)::after { width: min(30rem, calc((100vw - var(--largura-max)) / 2 + 4rem)); }
    .deco-tainha:not(.deco--texto)::after { width: min(20rem, calc((100vw - var(--largura-max)) / 2 - 1.5rem)); }
    :is( .deco-camarao, .deco-caranguejo, .deco-tartaruga, .deco-concha):not(.deco--texto)::after {
        width: min(22rem, calc((100vw - var(--largura-max)) / 2)); }
    
    
    .deco-capivara:not(.deco--texto)::after { width: min(22rem, calc((100vw - var(--largura-max)) / 2)); }
    .deco-rosa:not(.deco--texto)::after { width: min(16rem, calc((100vw - var(--largura-max)) / 2 + 2rem)); }
    .deco-mapa:not(.deco--texto)::after { width: min(30rem, calc((100vw - var(--largura-max)) / 2 + 8rem)); }
    :is(.deco-hibisco, .deco-salsa):not(.deco--texto)::after { width: min(18rem, calc((100vw - var(--largura-max)) / 2 + 6rem)); }
    /* o caule do hibisco sai da parede: colado na borda, e espelhado quando fica à direita */
    .deco-hibisco:not(.deco--texto)::after { margin-inline: -1rem; background-position: left center; scale: var(--deco-espelho); }
    :is(.deco2--esq, .deco2--dir)::before { content: ""; bottom: var(--e-6); width: min(18rem, calc((100vw - var(--largura-max)) / 2 + 2rem)); }
    .deco2--esq::before { left: 1rem; }
    .deco2--dir::before { right: 1rem; }
    .deco2--topo::before { top: var(--e-5); bottom: auto; }
    
    :is(.deco2-tainha, .deco2-concha)::before { width: min(20rem, calc((100vw - var(--largura-max)) / 2 - 1.5rem)); }
    .deco2-coqueiro::before { width: min(22rem, calc((100vw - var(--largura-max)) / 2 + 4rem)); }
    .deco2-ermitao::before { width: min(13rem, calc((100vw - var(--largura-max)) / 2 - 1.5rem)); }
}

/* ==========================================================================
   Novo visual (prévia aprovada pelo Roan em 15/10/2026): a cara dos destaques do Instagram.
   Títulos em Lora com a frase-chave em destaque e um tracinho amarelo; ondas entre as seções; cartões que respondem
   ao mouse e aparecem aos poucos, presos à rolagem (nunca começam invisíveis);
   ========================================================================== */
:is(a, button, summary, select, label, [role="tab"], input[type="checkbox"], input[type="date"]) { cursor: pointer; }
h1 { line-height: 1.08; letter-spacing: -0.01em; }
.titulo-destaque em { font-style: normal; color: var(--cor-destaque); }
.secao--escura .titulo-destaque em { color: var(--cor-sol); }
.titulo-destaque::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: var(--e-4); border-radius: 6px; background: var(--cor-sol); }
.secao__intro { margin: 0 0 var(--e-5); max-width: 60ch; color: var(--cor-texto-2); }

/* ondas atrás das seções, quase invisíveis, e as ondas que o site.js desenha na troca de fundo */
main > .secao { position: relative; isolation: isolate; background-image: var(--onda); background-size: 240px 60px; }
main > .secao--escura { background-blend-mode: soft-light; }
.onda { position: absolute; left: 0; width: 100%; height: clamp(18px, 3vw, 42px); z-index: 3; pointer-events: none; display: block; }
.onda--topo { top: -1px; }
.onda--base { bottom: -1px; transform: scaleY(-1); }

/* menu do início: transparente sobre o vídeo, ganha fundo ao rolar */
.topo--camuflado { position: fixed; left: 0; right: 0; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.topo__marca .logo-completa--clara, .topo--camuflado:not(.topo--solido) .topo__marca .logo-completa:not(.logo-completa--clara) { display: none; }
@media (min-width: 60rem) { .topo--camuflado:not(.topo--solido) .topo__marca .logo-completa--clara { display: block; } }
.topo--camuflado:not(.topo--solido) { background: transparent; border-color: transparent; }
.topo--camuflado:not(.topo--solido)::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(8 20 24 / .55), transparent); }
.topo--camuflado:not(.topo--solido) :is(.topo__nav > ul > li > a, .topo__grupo-botao) { color: #fff; }
.topo--camuflado:not(.topo--solido) :is(.botao-icone:not(.botao-icone--whatsapp), .idiomas__botao) { color: #fff; border-color: rgb(255 255 255 / .55); }
.topo--solido { box-shadow: 0 6px 24px rgb(11 30 36 / .08); }
.topo--camuflado ~ main .destaque-inicio--foto { padding-top: calc(var(--altura-topo) + var(--e-7)); }

/* topo do início com o vídeo cobrindo tudo e as duas notas em destaque */
.destaque-inicio--foto { min-height: max(34rem, 100vh); min-height: max(34rem, 100svh); flex-direction: column; justify-content: flex-end; align-items: stretch; overflow: hidden; }
.topo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.prova { list-style: none; position: relative; display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-6) auto 0; padding-block: 0; }
.prova li { display: flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: var(--pilula); background: rgb(255 255 255 / .94); color: var(--cor-noite); box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.prova__nota { display: inline-flex; align-items: center; gap: .25rem; font: 700 1.9rem/1 var(--fonte-titulo); color: var(--cor-mar); }
.prova__nota .icone { width: 1.1rem; height: 1.1rem; color: var(--cor-estrela); }
.prova__texto { display: grid; font-weight: 600; font-size: .9rem; line-height: 1.25; }
.prova__texto small { font-weight: 400; font-size: .8rem; color: var(--cor-texto-2); }
@media (min-width: 60rem) {
    .destaque-inicio--foto { justify-content: center; }
    .prova { position: absolute; left: 0; right: 0; bottom: var(--e-7); justify-content: flex-end; }
}

/* números grandes */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--e-6) 0; border-top: 1px solid var(--cor-borda); }
.numeros div { padding: var(--e-4) var(--e-3) var(--e-4) 0; border-bottom: 1px solid var(--cor-borda); }
.numeros div:nth-child(odd) { border-right: 1px solid var(--cor-borda); }
.numeros div:nth-child(even) { padding-left: var(--e-5); }
.numeros dt { font: 700 clamp(2rem, 1.6rem + 2vw, 2.8rem)/1 var(--fonte-titulo); color: var(--cor-mar); }
.numeros dd { margin: .35rem 0 0; font-size: .85rem; color: var(--cor-texto-2); }
@media (min-width: 60rem) {
    .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .numeros div:nth-child(odd) { border-right: 0; }
    .numeros div:not(:last-child) { border-right: 1px solid var(--cor-borda); }
    .numeros div:not(:first-child) { padding-left: var(--e-5); }
}

/* cartões que respondem ao mouse */
:is(.ap-card a, .area-card--novo, .bom-saber__lista li, .mosaico-apartamentos__item, .card) { transition: transform .3s var(--suave), box-shadow .3s var(--suave); }
:is(.ap-card a, .area-card--novo, .bom-saber__lista li, .mosaico-apartamentos__item, .card):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(11 52 66 / .14); }
:is(.ap-card__foto, .area-card__foto, .praia-destaque__foto, .mosaico-apartamentos__item) img { transition: transform .6s var(--suave); }
:is(.ap-card a, .area-card--novo, .praia-destaque__foto, .mosaico-apartamentos__item):hover img { transform: scale(1.05); }
.praia-destaque__foto { display: block; overflow: hidden; border-radius: var(--raio); }
.botao { transition: transform .2s var(--suave), background-color .2s, color .2s; }
.botao:hover { transform: translateY(-2px); }

/* apartamentos: filtro e cartões */
.filtro-aps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); padding: var(--e-4) 0; margin-bottom: var(--e-5); border-top: 1px solid var(--cor-borda); }
.filtro-aps__rotulo { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-2); }
.filtro-aps__opcoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro-aps__opcoes button { min-width: var(--alvo); min-height: var(--alvo); padding: 0 .9rem; border: 1.5px solid var(--cor-mar); border-radius: 10px; background: #fff; color: var(--cor-mar); font: 600 .9rem var(--fonte-texto); }
.filtro-aps__opcoes button[aria-pressed="true"] { background: var(--cor-mar); color: #fff; }
.filtro-aps__vista { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--alvo); font-weight: 600; }
.filtro-aps__vista input { width: 1.3rem; height: 1.3rem; accent-color: var(--cor-mar); }
.filtro-aps__conta { margin: 0 0 0 auto; font-size: .85rem; color: var(--cor-texto-2); }
.ap-cards, .explore__cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.ap-card[hidden] { display: none; }
:is(.ap-card a, .area-card--novo) { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--cor-borda); border-radius: 16px; overflow: hidden; color: var(--cor-texto); text-decoration: none; }
:is(.ap-card__foto, .area-card__foto) { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cor-areia); }
:is(.ap-card__foto, .area-card__foto) :is(picture, img) { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.carimbo-pref { position: absolute; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem .35rem .55rem; border-radius: var(--pilula); background: #fff; color: var(--cor-noite); font-size: .75rem; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.carimbo-pref .icone { width: 1rem; height: 1rem; color: var(--cor-estrela); }
.ap-card__topo { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: var(--e-4) var(--e-4) .2rem; }
.ap-card__nome { font: 700 1.4rem/1.1 var(--fonte-titulo); color: var(--cor-mar); }
.ap-card__cap { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--cor-texto-2); white-space: nowrap; }
.ap-card__camas, .area-card__resumo { display: block; padding: .2rem var(--e-4) .7rem; font-size: .9rem; color: var(--cor-texto-2); }
:is(.ap-card__tags, .area-card__tags) { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 var(--e-4) var(--e-4); }
:is(.ap-card__tags, .area-card__tags) span { padding: .2rem .55rem; border-radius: 6px; background: #E1F0F2; color: var(--cor-mar); font-size: .75rem; font-weight: 600; }
:is(.ap-card__rodape, .area-card__rodape) { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem var(--e-4); border-top: 1px dashed var(--cor-borda); font-size: .85rem; color: var(--cor-texto-2); }
.ap-card__nota { display: inline-flex; align-items: center; gap: .3rem; }
.ap-card__nota .icone { color: var(--cor-estrela); }
:is(.ap-card__ver, .area-card__ver) { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--cor-mar); }
:is(.ap-card__ver, .area-card__ver) .icone { transition: transform .2s var(--suave); }
:is(.ap-card a, .area-card--novo):hover :is(.ap-card__ver, .area-card__ver) .icone { transform: translateX(3px); }
.area-card--novo .area-card__nome { display: flex; align-items: center; gap: .45rem; padding: var(--e-4) var(--e-4) 0; font: 700 1.45rem/1.15 var(--fonte-titulo); color: var(--cor-mar); }
.area-card--novo .area-card__nome .icone { color: var(--cor-turquesa); }

/* bom saber */
.bom-saber__lista { list-style: none; padding: 0; margin: var(--e-5) 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.bom-saber__lista li { padding: var(--e-4); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgb(15 76 92 / .08); text-align: center; overflow-wrap: anywhere; }
.bom-saber__lista strong { display: block; font: 700 clamp(1.35rem, 1rem + 1.6vw, 2rem)/1.1 var(--fonte-titulo); color: var(--cor-mar); }
.bom-saber__lista span { font-size: .85rem; color: var(--cor-texto-2); }
@media (max-width: 30rem) { .bom-saber__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bom-saber__mais { margin: 0 0 var(--e-5); }
.bom-saber__mais a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.duvida { display: grid; gap: var(--e-4); align-items: center; padding: var(--e-5); border-radius: 16px; background: var(--cor-noite); color: #fff; }
.duvida h3 { color: #fff; margin: 0 0 .3rem; }
.duvida p { margin: 0; color: var(--cor-texto-claro); }
@media (min-width: 48rem) { .duvida { grid-template-columns: 1fr auto; } }

/* temporada das baleias e o sol de hoje */
.baleias-temporada__grade { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 64rem) { .baleias-temporada__grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
:is(.cal-baleias, .hoje) { position: relative; padding: var(--e-5); border-radius: 18px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); }
.cal-baleias { margin-top: var(--e-6); padding-top: var(--e-6); }
.meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.meses span { display: grid; place-items: center; aspect-ratio: 1 / .85; border-radius: 8px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .75); font-weight: 600; font-size: clamp(.6rem, .45rem + .5vw, .82rem); letter-spacing: .04em; }
.meses span:hover, .meses .passando { animation: balanca .6s var(--suave); }
@keyframes balanca { 25% { transform: translateY(-5px) rotate(-6deg); } 55% { transform: translateY(-3px) rotate(5deg); } 80% { transform: translateY(-1px) rotate(-2deg); } }
.meses .m1, .meses__legenda .m1 { background: #CFE6EA; color: var(--cor-mar-escuro); }
.meses .m2, .meses__legenda .m2 { background: #4BA3B4; color: #fff; }
.meses .m3, .meses__legenda .m3 { background: #0A2A33; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .28); }
.meses .atual { outline: 3px solid var(--cor-sol); outline-offset: 2px; }
@media (max-width: 40rem) { .meses { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 2rem; } .meses span { font-size: .8rem; } }
.cal-baleias__marcador { position: absolute; top: 0; left: 0; color: var(--cor-sol); transition: translate .2s linear; }
.meses__legenda { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: flex; flex-wrap: wrap; gap: .5rem var(--e-5); font-size: .9rem; color: var(--cor-texto-claro); }
.meses__legenda li { display: flex; align-items: center; gap: .6rem; }
.meses__legenda i { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 4px; }
.hoje__titulo { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-sol); }
.hoje__mes { margin: .5rem 0 var(--e-4); font: 700 1.25rem/1.3 var(--fonte-titulo); color: #fff; }
.hoje__arco { width: 100%; max-width: 18rem; display: block; margin: 0 auto; color: rgb(255 255 255 / .5); overflow: visible; }
.hoje__arco circle { fill: var(--cor-sol); filter: drop-shadow(0 0 8px rgb(251 203 8 / .7)); transition: opacity .6s; }
.hoje__arco.noite circle { opacity: .35; filter: none; }
.hoje__agora { margin: var(--e-2) 0 0; text-align: center; font-size: .85rem; color: var(--cor-sol); }
.hoje__sol { display: flex; justify-content: space-between; margin: var(--e-3) 0 0; }
.hoje__sol dt { font-size: .8rem; color: var(--cor-texto-claro-2); }
.hoje__sol dd { margin: 0; font: 700 1.6rem/1.1 var(--fonte-titulo); color: #fff; }
.hoje__sol div:last-child { text-align: right; }
.hoje__dica { margin: var(--e-4) 0 0; font-size: .85rem; color: var(--cor-texto-claro); }

/* título à esquerda, texto de apoio à direita */
.cabeca-dupla { display: grid; gap: var(--e-3) var(--e-7); align-items: end; margin-bottom: var(--e-6); }
.cabeca-dupla h2 { margin: 0; }
.cabeca-dupla p { margin: 0; max-width: 40ch; color: var(--cor-texto-2); }
.secao--escura .cabeca-dupla p { color: var(--cor-texto-claro); }
@media (min-width: 60rem) { .cabeca-dupla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* avaliações em grade, com aspas amarelas */
.citacoes { list-style: none; margin: 0 0 var(--e-5); padding: 0; columns: 3 18rem; column-gap: var(--e-5); }
.citacao { position: relative; break-inside: avoid; margin: 0 0 var(--e-5); }
.citacao .avaliacao { padding-top: var(--e-6); border: 1px solid var(--cor-borda); border-radius: 16px; background: #fff; box-shadow: none; }
.citacao__aspas { position: absolute; z-index: 1; top: -.35rem; left: var(--e-4); font: 700 4rem/1 var(--fonte-titulo); color: var(--cor-sol); }

/* consulte datas e valores: dados da estadia à esquerda, a mensagem que vai à direita */
.pedido__painel { display: grid; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .25); }
@media (min-width: 60rem) { .pedido__painel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pedido__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); padding: var(--e-5); background: var(--cor-fundo); color: var(--cor-texto); }
.pedido__campos[hidden] { display: none; }
.pedido__campo { display: grid; gap: .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-2); }
.pedido__campo--largo, .pedido__erro { grid-column: 1 / -1; }
.pedido__campo :is(input, select) { min-height: 3rem; width: 100%; min-width: 0; padding: 0 .8rem; border: 1.5px solid var(--cor-borda-campo); border-radius: 10px; background: #fff; font: 400 1rem var(--fonte-texto); letter-spacing: 0; text-transform: none; color: var(--cor-texto); }
.passo { display: grid; grid-template-columns: 3rem 1fr 3rem; min-height: 3rem; border: 1.5px solid var(--cor-borda-campo); border-radius: 10px; background: #fff; overflow: hidden; }
.passo button { border: 0; background: transparent; font-size: 1.4rem; color: var(--cor-mar); }
.passo button:hover { background: #E1F0F2; }
.pedido__campo .passo input { min-height: 0; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.15rem; -moz-appearance: textfield; }
.passo input::-webkit-inner-spin-button, .passo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pedido__erro { margin: 0; color: var(--cor-erro); font-weight: 600; }
.pedido__previa { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5); background: var(--cor-areia); color: var(--cor-texto); }
.pedido__rotulo { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-2); }
.pedido__balao { margin: 0; padding: var(--e-4); border-radius: 4px 16px 16px 16px; background: #DCF8C6; white-space: pre-line; font-size: .92rem; line-height: 1.5; box-shadow: 0 2px 6px rgb(0 0 0 / .08); }
.pedido__enviar { margin-top: auto; }
.pedido__previa .opcoes-reserva__airbnb { margin: 0; font-size: .9rem; }
.pedido__previa .opcoes-reserva__airbnb a, .pedido__nota a { color: var(--cor-mar); }
.pedido__nota { margin: 0; font-size: .85rem; color: var(--cor-texto-2); }
.pedido input[type="date"] { cursor: pointer; }
@media (max-width: 30rem) { .pedido__campos { grid-template-columns: 1fr; } }

/* localização: texto e o arco à esquerda; o mapa do Google e o das distâncias à direita, em abas */
.local-grade { display: grid; gap: var(--e-6) var(--e-7); align-items: start; }
.local-endereco { margin-bottom: var(--e-5); font-style: normal; font-size: 1.15rem; line-height: 1.55; }
.local-texto .linha-botoes { margin: 0 0 var(--e-5); }
.local-distancias { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cor-borda); }
.local-distancias li { display: flex; justify-content: space-between; gap: var(--e-3); padding: .8rem 0; border-bottom: 1px solid var(--cor-borda); }
.local-distancias strong { color: var(--cor-mar); }
.local-distancias span { color: var(--cor-texto-2); text-align: right; }
.local-arco { position: relative; margin: var(--e-6) 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--cor-areia); }
.local-arco :is(picture, img) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 0; }
.local-arco figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--e-5) var(--e-4) var(--e-3); background: linear-gradient(0deg, rgb(8 20 24 / .7), transparent); color: #fff; font-size: .88rem; }
.mapa-abas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.mapa-abas button { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--alvo); padding: 0 var(--e-4); border: 1.5px solid var(--cor-borda); border-radius: var(--pilula); background: var(--cor-fundo); color: var(--cor-texto); font: 600 1rem var(--fonte-texto); }
.mapa-abas button:hover { border-color: var(--cor-mar); color: var(--cor-mar); }
.mapa-abas button[aria-selected="true"] { background: var(--cor-mar); border-color: var(--cor-mar); color: #fff; }
.mapa-paineis { position: relative; display: grid; gap: var(--e-5); }
.mapa-painel[aria-hidden="true"] { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.mapa-painel iframe { display: block; width: 100%; height: clamp(20rem, 45vh, 28rem); border: 0; border-radius: 16px; box-shadow: var(--sombra); }
@media (max-width: 47.99rem) {
    .mapa-local__abrir { top: auto; bottom: var(--e-4); translate: -50% 0; min-height: 46px; padding: 0 var(--e-5); font-size: 1rem; white-space: nowrap; }
    .mapa-local__status { top: auto; bottom: calc(var(--e-4) + 54px); }
}
@media (min-width: 64rem) {
    .local-grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
    .local-mapas { display: flex; flex-direction: column; }
    .mapa-paineis { flex: 1; display: block; }
    .mapa-painel { height: 100%; }
    .mapa-painel iframe { height: 100%; min-height: 28rem; }
    .mapa-painel :is(.mapa-local, .mapa-local__palco) { height: 100%; }
    .mapa-painel .mapa-local { grid-template-rows: minmax(0, 1fr) auto; }
    .mapa-painel .mapa-local__palco { height: auto; min-height: 0; }
    .mapa-painel .mapa-local__area { height: 100%; aspect-ratio: auto; min-height: 20rem; }
    .mapa-painel .mapa-local__cartao { position: static; width: auto; max-height: none; overflow: visible; background: var(--cor-superficie); border-radius: 0; box-shadow: none; border-top: 1px solid var(--cor-borda); }
}

/* a cauda da baleia acompanha a rolagem; no celular, barrinha na borda de baixo do menu */
.rastro { position: fixed; right: 18px; top: 22vh; height: 56vh; width: 26px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .4s; color: var(--cor-mar); }
.rastro.on { opacity: 1; }
.rastro.sobre-escuro { color: var(--cor-sol); }
.rastro__linha { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed currentColor; opacity: .5; }
/* a cauda vira conforme o sentido da rolagem (pedido do Roan, 15/10/2026): descendo, o corpo vai na frente; subindo, gira e inverte */
.rastro__cauda { position: absolute; left: 0; top: 0; width: 26px; height: 26px; translate: 0 calc(var(--p, 0) * (56vh - 26px)); rotate: 0deg; transition: rotate .35s var(--suave); }
.rastro.subindo .rastro__cauda { rotate: 180deg; }
@media (max-width: 47.99rem) {
    .rastro, .rastro.sobre-escuro { top: calc(var(--altura-topo) - 2px); left: 0; right: 0; width: auto; height: 3px; z-index: 55; color: var(--cor-mar); background: linear-gradient(90deg, currentColor calc(var(--p, 0) * 100%), rgb(15 76 92 / .12) 0); }
    .rastro__linha { display: none; }
    .rastro__cauda { top: -7px; width: 16px; height: 16px; translate: calc(var(--p, 0) * (100vw - 16px)) 0; rotate: -90deg; }
    .rastro.subindo .rastro__cauda { rotate: 90deg; }
}

/* aparecer aos poucos, preso à rolagem (só CSS): rolar rápido nunca deixa buraco, nada começa invisível */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        :is(.ap-card, .area-card--novo, .citacao, .bom-saber__lista li, .numeros div, .cal-baleias, .hoje, .pedido__painel, .duvida) {
            animation: surge linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
        }
        @keyframes surge { from { opacity: .25; translate: 0 32px; scale: .97; } }
    }
}
@media (prefers-reduced-motion: reduce) {
    .meses span:hover, .meses .passando { animation: none; }
    :is(.ap-card a, .area-card--novo, .bom-saber__lista li, .mosaico-apartamentos__item, .card, .botao):hover, :is(.ap-card a, .area-card--novo, .praia-destaque__foto, .mosaico-apartamentos__item):hover img { transform: none; }
}
.ap-cards__todos { margin: var(--e-6) 0 0; }
.avaliacoes-grade__data { margin: calc(var(--e-3) * -1) 0 var(--e-5); font-size: .85rem; color: var(--cor-texto-2); }
/* links "Ver as avaliações" do início: botões lado a lado, com o ícone na mesma linha */
.avaliacoes-grade .avaliacoes-carrossel__mais { justify-content: flex-start; gap: var(--e-3); }
.avaliacoes-grade .avaliacoes-carrossel__mais a { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--alvo); padding: 0 var(--e-4);
    border: 1.5px solid var(--cor-mar); border-radius: var(--pilula); color: var(--cor-mar); font-weight: 600; text-decoration: none; white-space: nowrap; }
.avaliacoes-grade .avaliacoes-carrossel__mais a:hover { background: var(--cor-mar); color: #fff; }
.avaliacoes-grade .avaliacoes-carrossel__mais .icone { width: 1em; height: 1em; flex: none; }

/* ===== Páginas internas no novo visual (15/10/2026) ===== */
/* o título da página e os das seções com o tracinho amarelo, como no início */
main > .secao:first-child h1::after,
main .secao > .conteiner > h2:not(.titulo-destaque)::after,
main .secao > .conteiner > div > h1::after,
.secao__cabeca > h2:not(.titulo-destaque)::after,
.avaliacoes-carrossel__topo h2::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: var(--e-4); border-radius: 6px; background: var(--cor-sol); }
.avaliacoes-carrossel__topo h2::after { margin-inline: auto; }
/* cartões: branco, borda fina, cantos de 16 px; sobem e a foto aproxima ao passar o mouse */
.card { border: 1px solid var(--cor-borda); border-radius: 16px; box-shadow: none; background: #fff; }
.card__midia { position: relative; overflow: hidden; }
.card__titulo { color: var(--cor-mar); }
.card__midia img { transition: transform .6s var(--suave); }
.card:hover .card__midia img { transform: scale(1.04); }
.passeio { border-radius: 16px; transition: transform .3s var(--suave), box-shadow .3s var(--suave); }
.passeio:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(11 52 66 / .18); }
/* filtros dos apartamentos no estilo do início */
.filtros { padding: var(--e-4); border-radius: 16px; background: #fff; border: 1px solid var(--cor-borda); }
.filtros__campo select { border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .card:hover .card__midia img, .passeio:hover { transform: none; } }
/* cabeçalho das páginas internas em azul petróleo, como as seções escuras do início (Roan, 15/10/2026) */
.cabeca-pagina h1 { color: #fff; }
.cabeca-pagina :is(p, li) { color: var(--cor-texto-claro); }
.cabeca-pagina .migalhas :is(a, li, span) { color: rgb(255 255 255 / .85); }
.cabeca-pagina .migalhas a:hover { background: rgb(255 255 255 / .1); }
.cabeca-pagina .migalhas li + li::before { opacity: .6; }
.cabeca-pagina :is(.explorar-abas, .abas) a { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #fff; }
.cabeca-pagina :is(.explorar-abas, .abas) a .icone { color: inherit; }
.cabeca-pagina :is(.explorar-abas, .abas) a:hover { border-color: var(--cor-sol); color: var(--cor-sol); }
.cabeca-pagina :is(.explorar-abas, .abas) a[aria-current="page"] { background: var(--cor-sol); border-color: var(--cor-sol); color: var(--cor-noite); }
.cabeca-pagina :focus-visible { outline-color: var(--cor-sol); }
/* página do apartamento (Roan, 15/10/2026): cada bloco num painel; características em ladrilhos; informações da estadia em azul */
.apartamento .cabeca-pagina .fatos { color: var(--cor-texto-claro); font-size: 1rem; }
.apartamento .cabeca-pagina .fatos .icone { color: var(--cor-sol); }
.apartamento__selos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: calc(var(--e-2) * -1) 0 var(--e-4); }
.apartamento__selos .carimbo-pref { position: static; }
.apartamento__nota { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #fff; }
.apartamento__nota .icone { color: var(--cor-sol); }
.apartamento .faixa .pilha > section > h2::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: var(--e-3); border-radius: 6px; background: var(--cor-sol); }
.apartamento [aria-labelledby="t-caracteristicas"] .lista-icones { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: var(--e-2); }
.apartamento [aria-labelledby="t-caracteristicas"] .lista-icones li { padding: .65rem .8rem; border-radius: 12px; background: #fff; font-weight: 500; box-shadow: 0 6px 18px rgb(15 76 92 / .06); }
.apartamento [aria-labelledby="t-caracteristicas"] .lista-icones .icone { flex: none; width: 2.1rem; height: 2.1rem; padding: .4rem; border-radius: 50%; background: var(--cor-mar); color: #fff; }
.apartamento .atalho-estadia { color: var(--cor-texto-claro); }
.apartamento .atalho-estadia h2 { color: #fff; }
.apartamento .atalho-estadia h2::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: var(--e-3); border-radius: 6px; background: var(--cor-sol); }
.apartamento .atalho-estadia .alternador__botao { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #fff; }
.apartamento .atalho-estadia .alternador__botao:hover { border-color: var(--cor-sol); color: var(--cor-sol); }

/* apartamento: cabeçalho azul com respiro, galeria em faixa creme e o conteúdo em branco, com ondas entre eles */
.apartamento > .secao { position: relative; isolation: isolate; background-image: var(--onda); background-size: 240px 60px; }

.apartamento > .faixa.apartamento__galeria { padding-block: calc(var(--e-6) + 1rem) var(--e-6); }
/* depois do conteúdo branco do apartamento, o mapa em creme e os outros apartamentos em branco (sempre com onda entre eles) */
/* faixas da página do apartamento, contadas do fim: a última é branca, então o mapa (creme) e os outros apartamentos
   (branco) depois dela sempre alternam (Roan, 15/10/2026) */
.apartamento > .faixa { padding-block: calc(var(--e-7) + 1rem) var(--e-7); }
.apartamento > .apartamento__estadia { padding-block: calc(var(--e-7) + 1rem) var(--e-7); }
/* apartamento: a galeria emendada no cabeçalho azul e respiro entre os botões e a linha das pessoas e quartos */
.apartamento > .cabeca-pagina:not(.apartamento__galeria) { padding-bottom: var(--e-5); }
.apartamento > .apartamento__galeria { padding-block: var(--e-2) calc(var(--e-7) + 1rem); }
.apartamento__acoes { margin: var(--e-5) 0 0; }
.apartamento__galeria .botao--secundario { color: #fff; border-color: rgb(255 255 255 / .7); }
.apartamento__galeria .botao--secundario:hover { background: #fff; color: var(--cor-mar); }
@media (max-width: 59.99rem) { .apartamento__acoes { display: none; } } /* no celular a barra fixa embaixo já tem os dois botões */
/* cores das faixas do apartamento escolhidas pelo Roan (16/10/2026): branco, azul, areia, azul (fotos), areia; depois os
   outros apartamentos em branco sem onda, o "Consulte" em azul e a localização em areia */
.apartamento > .faixa--branca { background-color: #fff; }
.apartamento > .faixa--areia { background-color: var(--cor-fundo); }
main > article.apartamento ~ section.apartamento__outros.secao.secao { background-color: #fff; }
main > article.apartamento ~ section.secao.secao[aria-labelledby="t-local"] { background-color: var(--cor-fundo); }
.faixa--fotos h2, .faixa--fotos h3 { color: #fff; }
.faixa--fotos h2::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: var(--e-3); border-radius: 6px; background: var(--cor-sol); }
.faixa--fotos :is(.alternador__info, p) { color: var(--cor-texto-claro); }
.faixa--fotos .alternador__botao { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #fff; }
.faixa--fotos .alternador__botao:hover { border-color: var(--cor-sol); color: var(--cor-sol); }
.faixa--fotos .alternador__botao[aria-expanded="true"] { background: var(--cor-sol); border-color: var(--cor-sol); color: var(--cor-noite); }
.faixa--fotos .alternador__qtd { background: rgb(255 255 255 / .15); color: #fff; }
/* página do apartamento sem a textura de ondinhas e sem figuras; só as ondas entre as faixas (Roan, 16/10/2026) */
.apartamento > .secao, main:has(> .apartamento) > .secao { background-image: none; }
.onda--dupla { height: clamp(34px, 5vw, 72px); }
.apartamento > .faixa--areia:first-of-type, .apartamento > .apartamento__galeria + .faixa { padding-top: calc(var(--e-7) + 2.5rem); }
/* fundo escolhido para a seção, acima da alternância automática (Roan, 16/10/2026: Praias e Lagoas) */
main > section.secao.fundo-creme.fundo-creme.fundo-creme { background-color: var(--cor-fundo); }
main > section.secao.fundo-branco.fundo-branco.fundo-branco { background-color: #fff; }
/* Guia útil: o camarão e a tainha olhando para a direita, nos resultados (Roan, 16/10/2026) */

.cabeca-pagina .guia-menu { margin-top: var(--e-5); }
.cabeca-pagina .abas__area { color: var(--cor-sol); }
/* Figuras em dupla se encaram (Roan, 16/10/2026): a de cima, à esquerda, olha para a direita; a de baixo, à direita,
   olha para a esquerda (> <). Nunca as duas para o mesmo lado, nunca de costas. Espelha só quem nasceu virado do lado errado:
   camarão, capivara, tainha e tartaruga olham para a esquerda; baleia, ermitão, foca, leão-marinho e pinguim, para a direita. */
.decorada.deco--esq.deco2--dir:is(.deco-camarao, .deco-capivara, .deco-tainha, .deco-tartaruga)::after { scale: -1 1; }
.decorada.deco2--dir:is(.deco2-baleia, .deco2-ermitao, .deco2-leao-marinho)::before { scale: -1 1; }
/* páginas de praia, ponto, trilha e evento: cabeçalho azul com a galeria emendada (Roan, 16/10/2026) */
main > article > .cabeca-pagina:has(+ .galeria-topo) { padding-bottom: var(--e-4); }
main > article > .galeria-topo { padding-block: var(--e-2) calc(var(--e-7) + 1rem); }
.cabeca-pagina .botao--secundario, .galeria-topo .botao--secundario { color: #fff; border-color: rgb(255 255 255 / .7); }
.cabeca-pagina .botao--secundario:hover, .galeria-topo .botao--secundario:hover { background: #fff; color: var(--cor-mar); }
.cabeca-pagina .praia__resposta { color: #fff; }
.cabeca-pagina .praia__resposta .icone { color: var(--cor-sol); }
.galeria-topo :is(p, small, figcaption) { color: var(--cor-texto-claro); }
main > article > .galeria-topo + .secao:not(.secao--escura), main > article > .cabeca-pagina + .secao:not(.secao--escura) { padding-top: calc(var(--e-7) + 2.5rem); }
main > article > .galeria-topo + .secao:not(.secao--escura), main > article > .cabeca-pagina + .secao:not(.secao--escura) { background-color: var(--cor-fundo); }
/* selo da categoria, endereço e contatos legíveis no cabeçalho azul (Roan, 16/10/2026) */
.cabeca-pagina .passeio-selo { padding: .3rem .8rem; background: var(--cor-sol); color: var(--cor-noite); font-size: .85rem; }
.cabeca-pagina .lugar__endereco { color: var(--cor-texto-claro); }
.cabeca-pagina .lugar__endereco .icone { color: var(--cor-sol); }
.cabeca-pagina .contatos-lugar__item { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #fff; }
.cabeca-pagina .contatos-lugar__item .icone { color: var(--cor-sol); }
/* bloco azul do lugar: descrição e fonte legíveis; a figura da seção de baixo desce para não encostar na onda (Roan, 16/10/2026) */
.secao--escura :is(.mapa-local__nota, .nota-fonte, .nota-fonte *) { color: var(--cor-texto-claro-2); }
.secao--escura .nota-fonte { border-color: rgb(255 255 255 / .25); }
main > article > .lugar-detalhes { padding-top: var(--e-2); }
@media (min-width: 90rem) { .decorada:not(.deco--texto):not(.deco--base)::after, .decorada.deco2--topo::before { top: calc(var(--e-5) + 2.75rem); } }
/* quadro dos ônibus (Roan, 16/10/2026): o lugar por onde passa (Gamboa, Siriú...), todas as saídas em ordem, as do lugar em destaque */
.onibus__filtros { display: grid; justify-items: start; gap: 1.1rem; }
.onibus__lugares { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.onibus__lugares[hidden] { display: none; }
.onibus__lugares > span { margin-right: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-2); }
.onibus__lugares button { min-height: 2.75rem; padding: .45rem .95rem; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie); color: var(--cor-texto); font: 600 .9rem/1 var(--fonte-texto); cursor: pointer; }
.onibus__lugares button[aria-pressed="true"] { border-color: var(--cor-sol); background: var(--cor-sol); color: var(--cor-noite); }
.onibus__lugares button:focus-visible { outline: 3px solid var(--cor-turquesa); outline-offset: 2px; }
/* o fundo de cima é azul como a faixa: sem o fio branco na curva do canto (Roan, 16/10/2026) */
.onibus__cartao { padding: 0; gap: 0; border: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(var(--cor-mar) 50%, var(--cor-superficie) 50%); box-shadow: 0 14px 34px rgb(0 0 0 / .16); }
.onibus__sentido { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; margin: 0; padding: .9rem 1.1rem; background: var(--cor-mar); color: #fff; }
.onibus__sentido .icone { grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 50%; background: var(--cor-sol); color: var(--cor-noite); }
.onibus__para { font: 700 1.3rem/1.15 var(--fonte-titulo); }
.onibus__de { font: 400 .8rem/1.35 var(--fonte-texto); color: var(--cor-texto-claro-2); }
.onibus__cartao > .onibus__lista { margin: 0; padding: .3rem 0 .6rem; background: var(--cor-superficie); }
.onibus__lista li.onibus__saida { display: grid; grid-template-columns: 4.1rem 1fr; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-top: 1px solid #EFE9DD; color: var(--cor-texto-2); }
.onibus__lista li.onibus__saida:first-child { border-top: 0; }
.onibus__saida .onibus__hora { min-width: 0; font: 600 1rem/1 var(--fonte-texto); color: var(--cor-texto-2); }
.onibus__caminho { display: flex; flex-wrap: wrap; gap: .3rem; }
.onibus__lista .onibus__parada { padding: .18rem .5rem; border-radius: 6px; background: #F2EEE6; color: var(--cor-texto-2); font-size: .75rem; font-weight: 600; line-height: 1.3; }
.onibus__parada--sem-legenda { font-style: italic; }
.onibus__lista li.onibus__saida--passa { padding-block: .7rem; background: #F2F9FA; box-shadow: inset 4px 0 0 var(--cor-turquesa); }
.onibus__saida--passa .onibus__hora { font: 700 1.4rem/1 var(--fonte-titulo); color: var(--cor-mar); }
.onibus__saida--passa .onibus__parada { background: #DDEEF1; color: var(--cor-mar); }
.onibus__lista .onibus__parada--escolhida, .onibus__saida--passa .onibus__parada--escolhida { background: var(--cor-mar); color: #fff; }
.onibus__proximo { margin-left: auto; padding: .25rem .55rem; border-radius: 999px; background: var(--cor-sol); color: var(--cor-noite); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.onibus__cartao > .onibus__nenhuma { margin: 0 1.1rem 1.1rem; padding: .7rem .9rem; border-radius: 10px; background: #FFF6D6; color: var(--cor-noite); font-size: var(--texto-p); }
.onibus__nenhuma[hidden] { display: none; }
.cabeca-pagina .onibus__escolha { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .22); }
.cabeca-pagina .onibus__escolha button { color: #fff; }
.cabeca-pagina .onibus__escolha button[aria-pressed="true"] { background: var(--cor-sol); color: var(--cor-noite); }
.cabeca-pagina .onibus__lugares > span { color: var(--cor-texto-claro-2); }
.cabeca-pagina .onibus__lugares button { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .06); color: #fff; }
.cabeca-pagina .onibus__lugares button[aria-pressed="true"] { border-color: var(--cor-sol); background: var(--cor-sol); color: var(--cor-noite); }
.cabeca-pagina .onibus__explica, .cabeca-pagina .horario__aviso { color: var(--cor-texto-claro); }
.cabeca-pagina .onibus__explica strong { color: var(--cor-sol); }
/* Street View na página do ponto (Roan, 16/10/2026): a rua do lugar sem foto liberada, como o Google permite incorporar */
.street-view { margin: 0; display: grid; gap: .5rem; }
.street-view iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 16px; background: rgb(255 255 255 / .06); box-shadow: 0 14px 34px rgb(0 0 0 / .2); }
@media (min-width: 48rem) { .street-view iframe { aspect-ratio: 16 / 7; } }
.street-view figcaption { font-size: var(--texto-p); color: var(--cor-texto-claro-2); }
/* "Próximo" embaixo do horário, sem empurrar os lugares para outra linha; a saída vira amarela (Roan, 16/10/2026) */
.onibus__lista li.onibus__saida { grid-template-columns: 4.6rem 1fr; row-gap: .3rem; }
.onibus__saida .onibus__caminho { grid-row: 1 / span 2; grid-column: 2; }
.onibus__proximo { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; padding: .16rem .42rem; font-size: .6rem; letter-spacing: .05em; }
.onibus__lista li.onibus__saida:has(.onibus__proximo) { background: #FFF8DC; box-shadow: inset 4px 0 0 var(--cor-sol); }
/* Perto do Residencial (Roan, 16/10/2026): cada item vira um bloco tocável, com o ícone num círculo */
.perto { padding: var(--e-4) var(--e-4) var(--e-3); border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgb(15 76 92 / .09); }
@media (min-width: 40rem) { .perto { padding: var(--e-5) var(--e-5) var(--e-4); } }
.perto__titulo { margin-bottom: var(--e-4); font-size: 1.3rem; }
.perto__lista { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .65rem; }
.perto__lista a { gap: .85rem; padding: .6rem .8rem .6rem .6rem; border-radius: 14px; background: var(--cor-fundo); transition: background-color .2s, transform .2s; }
.perto__lista a:hover { background: #F3E6C9; transform: translateY(-2px); }
.perto__lista a:hover strong { text-decoration: none; }
.perto__lista a:focus-visible { outline: 3px solid var(--cor-turquesa); outline-offset: 2px; }
.perto__lista .icone { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; background: var(--cor-mar); color: var(--cor-sol); }
.perto__lista strong { font-size: .95rem; line-height: 1.25; }
.perto__lista .perto__dist { display: block; margin-top: .1rem; font-size: .82rem; }
.perto__nota { margin-top: var(--e-4); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .perto__lista a { transition: none; } .perto__lista a:hover { transform: none; } }
/* "Quando", "Costuma ser" e "Onde" do evento no bloco azul: estavam em azul sobre azul (Roan, 16/10/2026) */
.cabeca-pagina .evento-quando dt { color: #fff; }
.cabeca-pagina .evento-quando dt .icone { color: var(--cor-sol); }
.cabeca-pagina .evento-quando dd { color: var(--cor-texto-claro); }
/* link da nota de pagamento no quadro areia do "Consulte": estava no azul-claro do bloco escuro (varredura de contraste, 16/10/2026) */
.secao--escura .pedido__previa a:not(.botao) { color: var(--cor-mar); }
/* listas de seleção e campos (Roan, 16/10/2026): seta própria, cantos arredondados, foco visível. No Chrome novo
   (appearance: base-select) a lista aberta também ganha o visual do site; nos outros, a lista aberta continua a do sistema.
   O :not(#_) só vence as regras antigas de cada formulário, que trocam o fundo inteiro. */
main select:not(#_) {
    -webkit-appearance: none; appearance: none; padding-right: 2.6rem; border-radius: 12px; border-color: #CBBFAA;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 1.1rem;
    box-shadow: 0 1px 2px rgb(15 76 92 / .06); transition: border-color .2s, box-shadow .2s;
}
main :is(select, input[type="text"], input[type="date"], input[type="email"], input[type="search"], textarea):not(#_) { border-color: #CBBFAA; border-radius: 12px; }
main :is(select, input[type="text"], input[type="date"], textarea):not(#_):hover { border-color: var(--cor-turquesa); }
main :is(select, input, textarea):not(#_):focus-visible { outline: none; border-color: var(--cor-mar); box-shadow: 0 0 0 4px rgb(68 159 173 / .28); }
main .passo input:not(#_):focus-visible { box-shadow: none; background: #E1F0F2; }
main .passo:focus-within { border-color: var(--cor-mar); box-shadow: 0 0 0 4px rgb(68 159 173 / .28); }
@supports (appearance: base-select) {
    main select:not(#_), main ::picker(select) { appearance: base-select; }
    main select:not(#_) { display: flex; align-items: center; }
    main select::picker-icon { display: none; }
    main ::picker(select) {
        margin-top: .4rem; padding: .35rem; border: 1.5px solid var(--cor-borda); border-radius: 14px; background: #fff;
        box-shadow: 0 18px 40px rgb(14 58 71 / .2); max-height: 22rem;
    }
    main option { min-height: 2.6rem; padding: .55rem .8rem; border-radius: 9px; font: 400 1rem/1.3 var(--fonte-texto); color: var(--cor-texto); }
    main option::checkmark { display: none; }
    main option:hover, main option:focus-visible { outline: none; background: #E1F0F2; color: var(--cor-mar); }
    main option:checked { background: var(--cor-mar); color: #fff; font-weight: 600; }
}
/* mapa do Google como segunda aba nos mapas das distâncias (Roan, 16/10/2026) */
.mapa-opcoes__paineis { position: relative; }
.mapa-opcao[aria-hidden="true"] { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.mapa-opcao__google iframe { display: block; width: 100%; height: clamp(22rem, 62vh, 34rem); border: 0; border-radius: var(--raio); box-shadow: var(--sombra); background: #E8E4DA; }
.secao--escura .mapa-abas button { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #fff; }
.secao--escura .mapa-abas button[aria-selected="true"] { background: var(--cor-sol); border-color: var(--cor-sol); color: var(--cor-noite); }
/* abas do Explorar e do Guia útil no celular (Roan, 16/10/2026): blocos com ícone, todos à vista; no Guia útil,
   a categoria escolhida num botão que abre a lista inteira, com as categorias quebrando linha em vez de deslizar */
.explorar-abas a .icone { width: 1.1em; height: 1.1em; margin-right: .4rem; }
.explorar-abas ul { flex-wrap: wrap; overflow: visible; } /* com os ícones, quebram linha em vez de mostrar barra de rolagem */
.explorar-abas a { padding-inline: .75rem; }
.guia-escolha { display: none; }
@media (max-width: 47.99rem) {
    .explorar-abas ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; overflow: visible; }
    .explorar-abas li { grid-column: span 2; }
    .explorar-abas li:nth-child(4):nth-last-child(2), .explorar-abas li:nth-child(5):nth-last-child(1),
    .explorar-abas li:first-child:nth-last-child(2), .explorar-abas li:first-child:nth-last-child(2) ~ li { grid-column: span 3; }
    .explorar-abas a { flex-direction: column; justify-content: center; gap: .3rem; width: 100%; min-height: 4rem; padding: .45rem .3rem; border-radius: 14px; font-size: .8rem; line-height: 1.15; white-space: normal; text-align: center; }
    .explorar-abas a .icone { width: 1.4rem; height: 1.4rem; margin: 0; }
    .abas a { min-height: 2.5rem; padding: 0 .8rem; font-size: .85rem; }
    .guia-escolha:not([hidden]) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; width: 100%; min-height: 3.6rem; padding: .55rem 1rem;
        border: 1.5px solid rgb(255 255 255 / .3); border-radius: 14px; background: rgb(255 255 255 / .08); color: #fff; font: inherit; text-align: left; cursor: pointer;
    }
    .guia-escolha__rotulo { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-sol); }
    .guia-escolha__atual { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; }
    .guia-escolha__atual .icone { width: 1.2rem; height: 1.2rem; color: var(--cor-sol); }
    .guia-escolha__seta { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.4rem; height: 1.4rem; transition: rotate .2s; }
    .guia-menu--aberto .guia-escolha__seta { rotate: 180deg; }
    .guia-menu--recolhe:not(.guia-menu--aberto) .abas { display: none; }
    .guia-menu--recolhe .abas { margin-top: .75rem; padding: 1rem; border: 1px solid rgb(255 255 255 / .15); border-radius: 16px; background: rgb(255 255 255 / .05); }
}
/* menu do celular no início: o topo é fixo, então a lista rola dentro dela mesma quando não cabe na tela */
.topo--camuflado .menu-painel.aberto { max-height: calc(100svh - var(--altura-topo)); overflow-y: auto; overscroll-behavior: contain; background: var(--cor-superficie); }
/* convite para os apartamentos no fim do post (Roan, 16/10/2026) */
.artigo__convite { display: grid; gap: .9rem; margin-top: var(--e-5); padding: 1.25rem 1.4rem; border-radius: 16px; background: var(--cor-areia); }
.artigo__convite p { margin: 0; }
.artigo__convite .artigo__convite-titulo { margin-bottom: .3rem; font: 700 1.25rem/1.3 var(--fonte-titulo); color: var(--cor-mar); }
.artigo__convite .botao { justify-self: start; }
@media (min-width: 48rem) { .artigo__convite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; } }