/* Guia de Itacaré e Costa do Cacau — CSS único, mobile primeiro.
   Mesma identidade das molduras do Instagram: navy #0B2233 · oceano #0F3B4C · areia #F3E9DA · dourado #D4A64A.
   Fontes livres (OFL) servidas pelo próprio site: Playfair Display (títulos) e Inter (texto). */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-display-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); }

:root {
    --navy: #0B2233;
    --oceano: #0F3B4C;
    --areia: #F3E9DA;
    --areia-clara: #FAF6EF;
    --dourado: #D4A64A;
    --dourado-escuro: #8A6620;   /* dourado com contraste AA sobre branco/areia */
    --texto: #1B2A35;
    --texto-suave: #52616B;
    --linha: #E4DACB;
    --fundo: #FFFFFF;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --raio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--texto); background: var(--fundo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oceano); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4.2vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.envelope { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.envelope--texto { max-width: 720px; }
.envelope--largo { max-width: 1100px; }
@media (min-width: 700px) { .envelope { padding: 0 24px; } }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 8px; z-index: 50; background: #fff; padding: 8px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── topo ── */
.topo { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; }
.topo__barra { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.marca { font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: #fff; text-decoration: none; }
.topo__busca { color: #fff; display: inline-flex; padding: 10px; margin-right: -10px; }
.menu { border-top: 1px solid rgba(212,166,74,.35); }
.menu__trilho { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; height: 44px; align-items: center; }
.menu__trilho::-webkit-scrollbar { display: none; }
.menu a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; white-space: nowrap; padding: 10px 0; border-bottom: 2px solid transparent; }
.menu a.ativo, .menu a:hover { color: #fff; border-bottom-color: var(--dourado); }

/* ── elementos editoriais ── */
.sobretitulo { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dourado-escuro); margin: 0 0 .5rem; }
.selo-publi { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--navy); color: var(--areia); padding: 2px 7px; border-radius: 3px; }
.selo-publi--bloco { margin-bottom: .75rem; }
.trilha { font-size: .8rem; color: var(--texto-suave); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.trilha a { color: var(--texto-suave); }
.cabecalho-pagina { padding-top: 22px; padding-bottom: 8px; }
.cabecalho-pagina__texto { font-size: 1.12rem; color: var(--texto-suave); }
.atualizado, .cartao__meta { font-size: .82rem; color: var(--texto-suave); }
.nota-google { font-weight: 600; color: var(--oceano); }
.nota-google small { display: block; font-weight: 400; color: var(--texto-suave); font-size: .78rem; }
.aviso { padding: 24px; background: var(--areia-clara); border-radius: var(--raio); color: var(--texto-suave); }

/* abertura da home */
.abertura { padding-top: 34px; padding-bottom: 10px; }
.abertura__titulo { font-size: clamp(2.1rem, 8vw, 3.6rem); max-width: 14ch; }
.abertura__texto { font-size: 1.1rem; color: var(--texto-suave); max-width: 52ch; }

/* ── blocos e grades ── */
.bloco { padding-top: 28px; padding-bottom: 28px; }
.bloco--areia { background: var(--areia-clara); }
.bloco__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vermais { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.grade { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade { grid-template-columns: repeat(3, 1fr); } .grade--4 { grid-template-columns: repeat(4, 1fr); } .grade--2 { grid-template-columns: repeat(2, 1fr); } }

/* carrossel por rolagem nativa (sem JS) */
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.carrossel > * { scroll-snap-align: start; }
@media (min-width: 600px) { .carrossel { grid-auto-columns: 44%; } }
@media (min-width: 960px) { .carrossel { grid-auto-columns: calc(25% - 12px); } }

/* ── cartões ── */
.cartao__link { display: block; color: inherit; text-decoration: none; }
.cartao__foto { aspect-ratio: 4 / 3; }
.cartao--grande .cartao__foto { aspect-ratio: 16 / 9; }
.cartao__corpo { padding-top: 12px; }
.cartao__titulo { font-size: 1.15rem; margin-bottom: .3rem; }
.cartao--grande .cartao__titulo { font-size: clamp(1.5rem, 5vw, 2.2rem); }
.cartao__texto { color: var(--texto-suave); font-size: .95rem; margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao__link:hover .cartao__titulo { text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: 3px; }
@media (min-width: 960px) {
    .cartao--grande .cartao__link { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center; }
}

/* ── figuras ── */
.figura { margin: 0; }
.figura img, .figura__vazia { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); background: var(--areia); }
.cartao__foto img, .cartao__foto .figura__vazia { aspect-ratio: inherit; }
.figura__vazia { min-height: 160px; background: linear-gradient(135deg, var(--areia) 0%, #E9DCC6 100%); }
.figura figcaption { font-size: .76rem; color: var(--texto-suave); margin-top: 6px; }
.figura--capa { margin: 18px 0 8px; }
.figura--capa img { max-height: 72vh; }
@media (max-width: 699px) { .envelope--largo { padding: 0; } .figura--capa img { border-radius: 0; } .figura--capa figcaption { padding: 0 16px; } }

/* ── texto da matéria ── */
.texto-materia { font-size: 1.08rem; line-height: 1.75; padding-top: 12px; }
.texto-materia h2 { margin-top: 2rem; }
.texto-materia h3 { margin-top: 1.5rem; }
.texto-materia blockquote { margin: 1.5rem 0; padding-left: 18px; border-left: 3px solid var(--dourado); font-family: var(--serif); font-size: 1.2rem; color: var(--oceano); }
.texto-materia img { border-radius: var(--raio); margin: 1.5rem 0; }
.texto-materia ul, .texto-materia ol { padding-left: 1.2rem; }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0; }
.galeria .figura img { aspect-ratio: 1; }

.servico { margin: 28px 0; padding: 20px; background: var(--areia-clara); border-radius: var(--raio); border-left: 3px solid var(--dourado); }
.servico h2 { font-size: 1.3rem; }
.servico dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px 18px; }
.servico dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-escuro); margin-top: 10px; }
.servico dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) { .servico dl { grid-template-columns: 160px 1fr; } .servico dt { margin-top: 4px; } }

.faq { margin: 28px 0; }
.faq details { border-bottom: 1px solid var(--linha); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.faq details p { margin: 8px 0 0; color: var(--texto-suave); }

.fontes { font-size: .85rem; color: var(--texto-suave); border-top: 1px solid var(--linha); padding-top: 12px; margin-top: 24px; }
.cartao-lugar { margin: 24px 0; padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--raio); }

/* ── filtros, busca, paginação ── */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; }
.filtros a { white-space: nowrap; font-size: .85rem; text-decoration: none; color: var(--texto); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; }
.filtros a.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.busca { display: flex; gap: 8px; margin-top: 8px; }
.busca input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); }
.busca button { font: inherit; font-weight: 600; padding: 12px 18px; background: var(--navy); color: #fff; border: 0; border-radius: var(--raio); cursor: pointer; }
.paginacao { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-size: .9rem; }
.paginacao .desativado { color: #A6B0B6; }

/* ── rodapé ── */
.rodape { background: var(--navy); color: rgba(255,255,255,.82); margin-top: 40px; padding: 36px 0 20px; font-size: .92rem; }
.rodape a { color: rgba(255,255,255,.9); display: block; padding: 4px 0; }
.rodape__grade { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .rodape__grade { grid-template-columns: 2fr 1fr 1fr; } }
.marca--rodape { margin-bottom: 8px; }
.rodape__titulo { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dourado); margin-bottom: 6px; }
.rodape__legal { font-size: .76rem; color: rgba(255,255,255,.6); margin-top: 26px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }

/* ── página de lugar (modelo cabanacorais: capa, ações, serviço, comodidades, mapa) ── */
.capa-lugar { position: relative; min-height: 340px; display: flex; align-items: flex-end; background: var(--navy); color: #fff; overflow: hidden; }
@media (min-width: 900px) { .capa-lugar { min-height: 460px; } }
.capa-lugar__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-lugar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,18,28,.25) 0%, rgba(5,18,28,0) 35%, rgba(5,18,28,.82) 100%); }
.capa-lugar__texto { position: relative; padding-top: 80px; padding-bottom: 34px; }
.capa-lugar__texto h1 { color: #fff; margin: .2em 0 .25em; font-size: clamp(2rem, 7vw, 3.4rem); }
.capa-lugar__selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.capa-lugar__selos span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(212,166,74,.95); color: var(--navy); padding: 3px 9px; border-radius: 3px; }
.capa-lugar__selos .selo-publi { background: var(--navy); color: var(--areia); }
.capa-lugar__nota { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: rgba(255,255,255,.9); }
.capa-lugar__credito { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: .7rem; color: rgba(255,255,255,.75); }

/* estrelas por máscara de gradiente: --nota de 0 a 5 */
.estrelas { --tam: 1.05rem; display: inline-block; width: calc(var(--tam) * 5); height: var(--tam); vertical-align: -2px;
  background: linear-gradient(90deg, var(--dourado) calc(var(--nota) / 5 * 100%), rgba(255,255,255,.35) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.4 21.7l1.8-7.3L1.5 9.5 9 8.9z'/%3E%3C/svg%3E") repeat-x left / var(--tam);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.6-5.7 4.9 1.8 7.3L12 17.8 5.4 21.7l1.8-7.3L1.5 9.5 9 8.9z'/%3E%3C/svg%3E") repeat-x left / var(--tam); }

.lugar-grade { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 18px; }
@media (min-width: 960px) {
  .lugar-grade { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
  .lugar-acoes { grid-column: 2; grid-row: 1; position: sticky; top: 120px; align-self: start; }
  .lugar-corpo { grid-column: 1; grid-row: 1; }
}
.lugar-corpo { max-width: 720px; }
.lugar-acoes { display: flex; flex-direction: column; gap: 10px; }
.botao { display: block; text-align: center; font-weight: 600; text-decoration: none; padding: 13px 16px; border-radius: var(--raio); background: var(--navy); color: #fff; }
.botao--wa { background: #1E7D46; }
.botao--claro { background: #fff; color: var(--navy); border: 1px solid var(--linha); }
.botao:hover { filter: brightness(1.08); }
.lugar-acoes__fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 0; }
.lugar-acoes__fatos div { background: var(--areia-clara); border-radius: var(--raio); padding: 10px 12px; }
.lugar-acoes__fatos dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-escuro); }
.lugar-acoes__fatos dd { margin: 2px 0 0; font-weight: 600; }
.nota-cartao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.nota-cartao strong { font-family: var(--serif); font-size: 2rem; color: var(--navy); grid-row: span 2; }
.nota-cartao .estrelas { background: linear-gradient(90deg, var(--dourado) calc(var(--nota) / 5 * 100%), #DDD3C2 0); }
.nota-cartao small { color: var(--texto-suave); font-size: .75rem; }

.bloco-lugar { margin: 28px 0; }
.comodidades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
@media (min-width: 600px) { .comodidades { grid-template-columns: repeat(3, 1fr); } }
.comodidades li { position: relative; padding-left: 22px; }
.comodidades li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--dourado-escuro); border-bottom: 2px solid var(--dourado-escuro); transform: rotate(-45deg); }

.horario { list-style: none; padding: 0; margin: 0; }
.horario li { padding: 2px 0; }
.horario li span { display: inline-block; min-width: 9.5em; color: var(--texto-suave); }
.horario li.hoje { font-weight: 700; color: var(--navy); }
.horario li.hoje span { color: var(--navy); }
.horario em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; background: var(--dourado); color: var(--navy); padding: 1px 6px; border-radius: 3px; margin-left: 4px; }

.mapa { aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: linear-gradient(135deg, #E9DCC6, var(--areia)); }
@media (min-width: 700px) { .mapa { aspect-ratio: 16 / 9; } }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa__abrir { width: 100%; height: 100%; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--navy); font: inherit; }
.mapa__abrir span { font-weight: 700; font-size: 1.05rem; }
.mapa__abrir small { color: var(--texto-suave); max-width: 32ch; text-align: center; }
.mapa__rodape { font-size: .85rem; margin-top: 8px; }

/* ── pedido de disponibilidade pelo WhatsApp (hospedagens) ── */
.reserva { border: 1px solid var(--linha); border-radius: 14px; padding: 18px; box-shadow: 0 6px 24px rgba(11,34,51,.08); background: #fff; display: grid; gap: 12px; }
.reserva__titulo { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); margin: 0; }
.reserva__datas, .reserva__hospedes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid #B9C0C4; border-radius: 10px; overflow: hidden; }
.reserva__datas label, .reserva__hospedes label { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.reserva__datas label + label, .reserva__hospedes label + label { border-left: 1px solid #B9C0C4; }
.reserva input, .reserva select { font: inherit; font-size: .88rem; font-weight: 400; letter-spacing: 0; text-transform: none; border: 0; padding: 2px 0; background: transparent; color: var(--texto); width: 100%; min-width: 0; }
.reserva__erro { margin: 0; color: #B3261E; font-size: .85rem; }
.reserva__nota { margin: 0; font-size: .74rem; color: var(--texto-suave); text-align: center; }
.reserva .botao { border: 0; font: inherit; font-weight: 700; cursor: pointer; width: 100%; }

/* ── "É o responsável?" ── */
.link-responsavel { font-size: .82rem; color: var(--texto-suave); margin: 18px 0 0; }
.aviso--ok { background: #E3F2E6; color: #1B5E20; }
.aviso--erro { background: #FDECEA; color: #B3261E; }
.aviso--erro p { margin: 0; }
.responsavel-opcoes { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 600px) { .responsavel-opcoes { grid-template-columns: 1fr 1fr; } }
.responsavel-opcao { display: block; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; text-decoration: none; color: var(--texto); }
.responsavel-opcao strong { display: block; color: var(--navy); }
.responsavel-opcao span { font-size: .88rem; color: var(--texto-suave); }
.responsavel-opcao:hover { border-color: var(--dourado); }
.form-guia { display: grid; gap: 14px; margin-top: 10px; }
.form-guia label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.form-guia input:not([type=radio]):not([type=checkbox]), .form-guia textarea { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid var(--linha); border-radius: var(--raio); }
.form-guia fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.form-guia legend { font-weight: 700; margin-bottom: 4px; }
.form-guia .opcao { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.form-guia__correcoes { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 14px; display: grid; gap: 10px; }
.form-guia__correcoes summary { cursor: pointer; font-weight: 600; }
.form-guia__correcoes label { margin-top: 10px; }
.form-guia__nota { font-size: .78rem; color: var(--texto-suave); margin: 0; }
.form-guia .botao { border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* ── espaço reservado sem foto (identidade do site, nada de foto sem crédito) ── */
.figura__vazia { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, #154A60 0%, rgba(21,74,96,0) 60%),
    linear-gradient(160deg, var(--oceano) 0%, var(--navy) 70%); }
.figura__vazia::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 38%; height: 40px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10 T90 10 T120 10' fill='none' stroke='%23D4A64A' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 120px 20px; }
.figura__vazia-rotulo { position: relative; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.figura__vazia-sub { position: relative; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado); }
.cartao__nota { margin: 0 0 .3rem; font-weight: 600; color: var(--navy); font-size: .9rem; }
.cartao__nota small { font-weight: 400; color: var(--texto-suave); }
.estrelas--claro { --tam: .85rem; background: linear-gradient(90deg, var(--dourado) calc(var(--nota) / 5 * 100%), #DDD3C2 0); }

/* ── cabeçalho e galeria do lugar (estilo Booking/Airbnb) ── */
.cabeca-lugar { padding-top: 14px; padding-bottom: 12px; }
.cabeca-lugar h1 { margin: .25em 0 .2em; font-size: clamp(1.8rem, 6vw, 2.8rem); }
.cabeca-lugar__selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cabeca-lugar__selos span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--areia); color: var(--dourado-escuro); padding: 3px 9px; border-radius: 3px; }
.cabeca-lugar__selos .selo-publi { background: var(--navy); color: var(--areia); }
.cabeca-lugar__linha { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--texto-suave); font-size: .95rem; }
.cabeca-lugar__linha strong { color: var(--navy); }
.cabeca-lugar__endereco:not(:first-child)::before { content: '·'; margin-right: 8px; }

.galeria-lugar { position: relative; margin-bottom: 8px; }
.galeria-lugar__item { position: relative; display: block; padding: 0; border: 0; background: var(--areia); cursor: zoom-in; overflow: hidden; }
.galeria-lugar__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
.galeria-lugar__item:hover img { transform: scale(1.03); filter: brightness(1.04); }
.galeria-lugar__item.falhou { background: linear-gradient(160deg, var(--oceano), var(--navy)); }
.galeria-lugar__item.falhou img { visibility: hidden; }
.galeria-lugar__credito { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: .66rem; color: #fff; background: rgba(5,18,28,.55);
  padding: 2px 7px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeria-lugar__mais { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,18,28,.55); color: #fff; font-weight: 700; font-size: 1.05rem; }
.galeria-lugar__todas { position: absolute; right: 12px; bottom: 12px; font: inherit; font-size: .85rem; font-weight: 600; background: #fff; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 8px; padding: 7px 12px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.galeria-lugar__contador { display: none; }

/* celular: carrossel de largura total, arrastar com o dedo */
@media (max-width: 759px) {
  .galeria-lugar { margin-left: -16px; margin-right: -16px; }
  .galeria-lugar__mosaico { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .galeria-lugar__mosaico::-webkit-scrollbar { display: none; }
  .galeria-lugar__item { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .galeria-lugar__mais { display: none; }
  .galeria-lugar__todas { display: none; }
  .galeria-lugar__contador { display: block; position: absolute; right: 12px; bottom: 10px; font-size: .75rem; font-weight: 600; color: #fff;
    background: rgba(5,18,28,.6); padding: 3px 9px; border-radius: 999px; pointer-events: none; }
  .galeria-lugar__credito { bottom: 10px; max-width: 65%; }
}
/* computador: mosaico 1 grande + 4 menores */
@media (min-width: 760px) {
  .galeria-lugar__mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: min(460px, 52vw); border-radius: 14px; overflow: hidden; }
  .galeria-lugar__item:first-child { grid-row: 1 / 3; }
  .galeria-lugar__mosaico--poucas { grid-template-columns: 2fr 1fr; }
  .galeria-lugar__mosaico--poucas .galeria-lugar__item:nth-child(n+4) { display: none; }
  .galeria-lugar__mosaico--uma { grid-template-columns: 1fr; grid-template-rows: 1fr; }
}

/* visualizador em tela cheia */
.visualizador { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5,12,18,.96); color: #fff; }
.visualizador[open] { display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 54px 1fr; }
.visualizador::backdrop { background: rgba(0,0,0,.8); }
.visualizador__topo { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.visualizador__contador { font-size: .9rem; opacity: .85; }
.visualizador__fechar, .visualizador__seta { background: none; border: 0; color: #fff; cursor: pointer; font: inherit; }
.visualizador__fechar { font-size: 1.4rem; padding: 8px; }
.visualizador__seta { font-size: 2.6rem; line-height: 1; opacity: .8; }
.visualizador__seta:hover { opacity: 1; }
.visualizador__figura { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding-bottom: 16px; }
.visualizador__figura img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; }
.visualizador__figura figcaption { font-size: .8rem; margin-top: 8px; opacity: .85; }
.visualizador__figura figcaption a { color: #fff; }
@media (max-width: 759px) { .visualizador[open] { grid-template-columns: 0 1fr 0; } .visualizador__seta { display: none; } }

/* crédito: linha discreta sob a galeria; ao ampliar, dentro da foto, no canto */
.galeria-lugar__fonte { font-size: .74rem; color: var(--texto-suave); margin: 2px 0 6px; text-align: right; }
.visualizador__quadro { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.visualizador__quadro img { display: block; max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; }
.visualizador__quadro figcaption { position: absolute; right: 10px; bottom: 10px; margin: 0; line-height: 1.3; font-size: .78rem;
  background: rgba(5,12,18,.62); color: #fff; padding: 4px 9px; border-radius: 4px; max-width: calc(100% - 20px); }
.visualizador__quadro figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* posts do Instagram do lugar (incorporados) */
.instagram-lugar__grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .instagram-lugar__grade { grid-template-columns: 1fr 1fr; } }
.instagram-lugar .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
@media (min-width: 760px) {
  /* 2 fotos: lado a lado, sem buraco */
  .galeria-lugar__mosaico--duas { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr; }
  .galeria-lugar__mosaico--duas .galeria-lugar__item:first-child { grid-row: auto; }
}

/* ── "Útil na viagem" (saúde e serviços) ── */
.util { background: var(--areia-clara); border-radius: var(--raio); padding: 18px 20px; }
.util h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.util h3 a { color: var(--navy); text-decoration: none; }
.util ul { list-style: none; padding: 0; margin: 0 0 10px; }
.util li { padding: 5px 0; border-bottom: 1px solid var(--linha); }
.util li a { text-decoration: none; color: var(--texto); font-weight: 600; }
.util li small { color: var(--texto-suave); margin-left: 6px; }
