/* site.css - Cacimbah. Mobile primeiro, sem framework.
   Tokens do docs/DESIGN_SYSTEM.md do projeto, com a cor da marca tirada da logo (#8b5656). */

/* ---------- Fontes (self-hosted, latin) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fontes/Fraunces-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fontes/Fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fontes/InstrumentSans-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fontes/InstrumentSans-italic.woff2") format("woff2"); }
/* Fontes de reserva com métrica ajustada: o texto ocupa o mesmo espaço antes e depois da troca, sem deslocar a página (CLS). Valores calculados dos arquivos com fontTools. */
@font-face { font-family: "Instrument Sans Reserva"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.65%; ascent-override: 95.43%; descent-override: 24.59%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Reserva"; src: local("Georgia"), local("Liberation Serif"), local("Times New Roman"); size-adjust: 116.25%; ascent-override: 84.13%; descent-override: 21.94%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --cor-n0:   oklch(100% 0.004 70);
  --cor-n50:  oklch(98%  0.005 70);
  --cor-n100: oklch(96%  0.007 70);
  --cor-n200: oklch(92%  0.009 70);
  --cor-n300: oklch(85%  0.011 70);
  --cor-n600: oklch(48%  0.011 70);
  --cor-n700: oklch(38%  0.010 70);
  --cor-n900: oklch(20%  0.006 70);

  --cor-marca-100: oklch(94% 0.025 20);
  --cor-marca-300: oklch(80% 0.050 20);
  --cor-marca-600: oklch(51.3% 0.071 19.8);  /* #8b5656, a cor da logo */
  --cor-marca-700: oklch(43% 0.065 20);
  --cor-marca-900: oklch(26% 0.040 20);

  --cor-terra-100: oklch(94% 0.027 65.5);
  --cor-terra-600: oklch(52% 0.074 65.5);
  --cor-apoio-100: oklch(94% 0.027 152.7);
  --cor-apoio-600: oklch(52% 0.073 152.7);
  --cor-apoio-800: oklch(33% 0.049 152.7);
  --cor-zap: oklch(50% 0.16 150);     /* branco sobre este verde passa de 4.5:1 */
  --cor-zap-esc: oklch(42% 0.14 150);
  --cor-erro-100: oklch(95% 0.03 25);
  --cor-erro-700: oklch(45% 0.15 25);

  --fundo: var(--cor-n50);
  --fundo-elevado: var(--cor-n0);
  --fundo-sutil: var(--cor-n100);
  --texto: var(--cor-n900);
  --texto-suave: var(--cor-n600);
  --texto-inverso: var(--cor-n50);
  --borda: var(--cor-n200);
  --borda-forte: var(--cor-n300);
  --acento: var(--cor-marca-600);
  --acento-hover: var(--cor-marca-700);
  --foco-interno: var(--cor-n0);
  --foco-externo: var(--cor-n900);

  --fonte-titulo: "Fraunces", "Fraunces Reserva", Georgia, "Times New Roman", serif;
  --fonte-texto: "Instrument Sans", "Instrument Sans Reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --t-md:   clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --t-lg:   clamp(1.44rem, 1.30rem + 0.70vw, 1.95rem);
  --t-xl:   clamp(1.73rem, 1.50rem + 1.15vw, 2.75rem);
  --t-2xl:  clamp(2.07rem, 1.70rem + 1.85vw, 3.60rem);

  --e-3xs: .25rem; --e-2xs: .5rem; --e-xs: .75rem; --e-sm: 1rem; --e-md: 1.5rem; --e-lg: 2rem; --e-xl: 3rem; --e-2xl: 4rem; --e-3xl: 6rem;
  --secao: clamp(3rem, 2rem + 3vw, 5.5rem);
  --largura-conteudo: 46ch;
  --largura-total: 76rem;
  --margem: clamp(1rem, 4vw, 3rem);

  --raio-sm: .25rem; --raio-md: .5rem; --raio-lg: .75rem; --raio-total: 999px;
  --sombra-sm: 0 1px 2px oklch(26% 0.04 20 / .05), 0 1px 1px oklch(26% 0.04 20 / .04);
  --sombra-md: 0 2px 4px oklch(26% 0.04 20 / .04), 0 4px 8px oklch(26% 0.04 20 / .05), 0 8px 16px oklch(26% 0.04 20 / .04);
  --sombra-lg: 0 2px 4px oklch(26% 0.04 20 / .03), 0 8px 16px oklch(26% 0.04 20 / .05), 0 16px 32px oklch(26% 0.04 20 / .06), 0 32px 64px oklch(26% 0.04 20 / .05);

  --dur-rapida: 120ms; --dur-media: 240ms; --curva-saida: cubic-bezier(.16, 1, .3, 1);
  --cab-h: 4rem;
  --barra-h: 4.25rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--cab-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 var(--t-base)/1.6 var(--fonte-texto);
  padding-block-start: var(--cab-h);
  padding-block-end: calc(var(--barra-h) + env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}
img, picture, svg { max-inline-size: 100%; display: block; }
img { block-size: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--acento); }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.12; letter-spacing: -.015em; margin: 0; color: var(--texto); font-variation-settings: "opsz" 72, "SOFT" 30; }
h1 { font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); }
h3, .h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); font-family: var(--fonte-texto); font-weight: 600; letter-spacing: 0; }
p, ul, ol, dl, figure { margin: 0; }
ul[role="list"], .rod-lista { list-style: none; padding: 0; }
.flow > * + * { margin-block-start: var(--flow, var(--e-sm)); }
.prosa { max-inline-size: var(--largura-conteudo); }
.prosa p { font-size: var(--t-base); }
small { font-size: var(--t-xs); }
:focus-visible { outline: 2px solid var(--foco-externo); outline-offset: 2px; box-shadow: 0 0 0 2px var(--foco-interno); border-radius: var(--raio-sm); }
.pular { position: absolute; inset-inline-start: -999px; inset-block-start: .5rem; z-index: 200; background: var(--fundo-elevado); padding: .75rem 1rem; border-radius: var(--raio-md); box-shadow: var(--sombra-md); }
.pular:focus { inset-inline-start: .5rem; }
::selection { background: var(--cor-marca-300); color: var(--cor-marca-900); }

.miolo { inline-size: min(100% - 2 * var(--margem), var(--largura-total)); margin-inline: auto; }
.miolo-estreito { max-inline-size: 44rem; }
.secao { padding-block: var(--secao); }
.secao:not(.secao-sutil) + .secao:not(.secao-sutil), .secao-sutil + .secao-sutil { padding-block-start: calc(var(--secao) * .35); }
.secao-compacta { padding-block: var(--e-xl); }
.secao-topo { padding-block: var(--e-lg) var(--e-xl); }
.secao-sutil { background: var(--fundo-sutil); }
.secao-cabeca { max-inline-size: 52ch; margin-inline: auto; text-align: center; }
.miolo > h2:first-child, .miolo-estreito > h2, .chamada .miolo { text-align: center; }
.secao-cabeca p, .heroi-apoio, .resultado-resumo, .unidade-meta, .nota, figcaption { color: var(--texto-suave); }
.secao-cabeca p { font-size: var(--t-base); }
.nota { font-size: var(--t-sm); }
.link-seta { font-weight: 600; text-decoration-color: var(--borda-forte); }
.link-seta:hover { text-decoration-color: currentColor; }

/* ---------- Botões: três variantes ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 2.75rem; padding: .625rem 1.25rem; border-radius: var(--raio-md); border: 1px solid transparent;
  font: 600 var(--t-sm)/1.2 var(--fonte-texto); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-rapida);
}
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--acento); color: var(--texto-inverso); }
.botao-primario:hover { background: var(--acento-hover); color: var(--texto-inverso); }
.botao-secundario { background: transparent; border-color: var(--borda-forte); color: var(--texto); }
.botao-secundario:hover { border-color: var(--texto); color: var(--texto); }
.botao-claro { background: var(--fundo-elevado); color: var(--cor-marca-700); }
.botao-claro:hover { background: var(--cor-marca-100); color: var(--cor-marca-900); }
.botao-zap { background: var(--cor-zap); color: #fff; }
.botao-zap:hover { background: var(--cor-zap-esc); color: #fff; }
.botao[aria-busy="true"] { opacity: .7; pointer-events: none; }
.botao[disabled] { opacity: .6; cursor: default; }

/* ---------- Cabeçalho ---------- */
.cab { position: fixed; inset: 0 0 auto 0; z-index: 50; block-size: var(--cab-h); background: oklch(98% 0.005 70 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-end: 1px solid var(--borda); }
.cab-in { block-size: 100%; inline-size: min(100% - 2 * var(--margem), var(--largura-total)); margin-inline: auto; display: flex; align-items: center; gap: var(--e-2xs); }
.marca { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--acento); margin-inline-end: auto; padding-block: .5rem; }
.marca:hover { color: var(--acento-hover); }
.marca-svg { block-size: 1.5rem; inline-size: auto; }
.botao-cab { min-block-size: 2.75rem; padding-inline: 1rem; }
.burger { inline-size: 2.75rem; block-size: 2.75rem; border: 0; background: none; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: var(--raio-md); color: var(--texto); }
.burger span { display: block; inline-size: 22px; block-size: 2px; background: currentColor; transition: transform var(--dur-media) var(--curva-saida), opacity var(--dur-rapida); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu { display: none; }
.menu.aberto { display: flex; flex-direction: column; position: absolute; inset-block-start: var(--cab-h); inset-inline: 0; background: var(--fundo-elevado); padding: .5rem var(--margem) 1rem; border-block-end: 1px solid var(--borda); box-shadow: var(--sombra-lg); }
.menu a { padding: .875rem .25rem; min-block-size: 2.75rem; text-decoration: none; font-weight: 500; border-block-end: 1px solid var(--borda); }
.menu a[aria-current="page"] { color: var(--acento); }
.menu .menu-zap { border: 0; color: var(--cor-apoio-800); }
.menu .menu-cadeado { display: inline-flex; align-items: center; gap: .5rem; border: 0; color: var(--texto-suave); font-size: var(--t-sm); }
.cab-cadeado { display: inline-grid; place-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--raio-md); color: var(--texto-suave); }
.cab-cadeado:hover { color: var(--acento); background: var(--fundo-sutil); }

/* ---------- Herói: texto e foto lado a lado, nunca um sobre o outro ---------- */
.heroi { display: grid; gap: var(--e-lg); inline-size: min(100% - 2 * var(--margem), var(--largura-total)); margin-inline: auto; padding-block: var(--e-lg) var(--e-xl); align-items: center; }
.heroi-texto { --flow: var(--e-md); max-inline-size: 36rem; }
.heroi-apoio { font-size: var(--t-md); line-height: 1.45; max-inline-size: 40ch; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: var(--e-xs); }
.heroi-acoes .botao, .chamada .botao, .onde .botao { white-space: normal; }
.heroi-foto { border-radius: var(--raio-lg); overflow: hidden; background: var(--fundo-sutil); }
.heroi-foto img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.heroi-foto figcaption { padding: .5rem .25rem 0; font-size: var(--t-xs); }
.heroi-unidade .heroi-foto img { aspect-ratio: 4 / 5; }
.pilulas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pilulas li { font-size: var(--t-sm); padding: .35rem .75rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-total); color: var(--cor-n700); }
.trilha { padding-block: var(--e-sm); font-size: var(--t-sm); color: var(--texto-suave); display: flex; gap: .5rem; flex-wrap: wrap; }
.trilha a { text-decoration: none; display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.trilha { align-items: center; padding-block: .25rem; }
.trilha span[aria-current] { color: var(--texto); }

/* ---------- Busca de datas ---------- */
.busca { inline-size: min(100% - 2 * var(--margem), var(--largura-total)); margin-inline: auto; padding-block: var(--e-sm) var(--e-md); }
.busca-cartao { background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--e-md); box-shadow: var(--sombra-md); }
.busca-topo { margin-block-end: var(--e-md); max-inline-size: 52ch; }
.busca-topo h2 { font-size: var(--t-lg); }
.busca-topo p { margin-block-start: .5rem; color: var(--texto-suave); font-size: var(--t-sm); }
.busca-form { display: grid; gap: var(--e-sm); }
.campo { display: grid; gap: .3rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--cor-n700); }
.campo input, .campo select {
  inline-size: 100%; min-block-size: 2.875rem; padding: .5rem .75rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  background: var(--fundo-elevado); color: var(--texto); font: 500 var(--t-base) var(--fonte-texto); appearance: none; -webkit-appearance: none;
}
.campo select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2346423d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-inline-end: 2.25rem; }
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--texto); }
.campo input[type="date"] { min-inline-size: 0; }
.botao-busca { min-block-size: 3rem; }
.erro { display: flex; gap: .5rem; align-items: flex-start; background: var(--cor-erro-100); color: var(--cor-erro-700); padding: .75rem 1rem; border-radius: var(--raio-md); margin-block-end: var(--e-sm); font-weight: 500; }
.erro::before { content: "!"; flex: none; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: currentColor; color: var(--cor-erro-100); display: grid; place-content: center; font-size: .8rem; font-weight: 700; margin-block-start: .15rem; }

.resultado { margin-block-start: var(--e-md); padding-block-start: var(--e-md); border-block-start: 1px solid var(--borda); }
.resultado h3 { font-size: var(--t-lg); }
.resultado-resumo { margin-block: .25rem var(--e-md); font-size: var(--t-sm); }
.resultado-lista { display: grid; gap: var(--e-sm); }
.resultado-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-sm); padding: var(--e-sm); border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--fundo-elevado); align-items: start; }
.resultado-item.estado-ocupado, .resultado-item.estado-nao-cabe { background: var(--fundo-sutil); border-color: var(--borda-forte); }
.resultado-foto { border-radius: var(--raio-md); overflow: hidden; background: var(--cor-n200); }
.resultado-foto img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
.resultado-corpo { display: grid; gap: .35rem; }
.resultado-corpo h4 { font-size: var(--t-md); font-family: var(--fonte-titulo); font-weight: 400; }
.resultado-corpo h4 a { text-decoration: none; }
.resultado-meta { font-size: var(--t-sm); color: var(--texto-suave); }
.resultado-corpo .botao { justify-self: start; margin-block-start: .35rem; white-space: normal; text-align: center; max-inline-size: 100%; }
.estado { display: inline-block; justify-self: start; font-size: var(--t-xs); font-weight: 600; padding: .15rem .6rem; border-radius: var(--raio-total); background: var(--cor-apoio-100); color: var(--cor-apoio-800); }
.estado-ocupado .estado, .estado-nao-cabe .estado { background: var(--cor-n200); color: var(--cor-n700); }
.resultado-vazio { margin-block-start: var(--e-sm); padding: var(--e-sm); background: var(--fundo-sutil); border-radius: var(--raio-md); }

/* ---------- Cartões de unidade: faixa que desliza no celular, grade no desktop ---------- */
.unidades { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 20rem); gap: var(--e-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .25rem var(--e-sm); margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; -webkit-overflow-scrolling: touch; }
.unidade-cartao { scroll-snap-align: start; background: var(--fundo-elevado); border: 1px solid var(--borda); border-radius: var(--raio-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: box-shadow var(--dur-media); }
.unidade-cartao:hover { box-shadow: var(--sombra-md); }
.unidade-foto { display: block; background: var(--cor-n200); }
.unidade-foto img { aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; }
.unidade-corpo { --flow: .35rem; padding: var(--e-sm) var(--e-sm) var(--e-md); }
.unidade-corpo h3 a { text-decoration: none; }
.unidade-corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.unidade-cartao { position: relative; }
.unidade-corpo p { font-size: var(--t-sm); }
.unidade-meta { font-size: var(--t-xs); }
.dica-rolagem { font-size: var(--t-xs); color: var(--texto-suave); margin-block-start: 0; }

/* ---------- Mosaico "a casa por dentro" ---------- */
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-xs); }
.mosaico-item[data-grande] { grid-column: 1 / -1; }
.mosaico-link { display: block; block-size: 100%; border-radius: var(--raio-lg); }
.mosaico figure { position: relative; aspect-ratio: 1; border-radius: var(--raio-lg); overflow: hidden; background: var(--fundo-sutil); }
.mosaico-item[data-grande] figure { aspect-ratio: 16 / 10; }
.mosaico picture { position: absolute; inset: 0; }
.mosaico img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-media); }
.mosaico-mais { text-align: center; }
.mosaico-link:hover img, .mosaico-link:focus-visible img { transform: scale(1.04); }
.mosaico figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.75rem .75rem .6rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / 0)); }

/* ---------- Fatos conferidos ---------- */
.fatos { display: grid; gap: var(--e-sm); }
.fato { padding: var(--e-sm) 0; border-block-start: 1px solid var(--borda); display: grid; gap: .25rem; }
.fato dt { font-size: var(--t-sm); color: var(--texto-suave); }
.fato dd { margin: 0; display: grid; gap: .25rem; }
.fato strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: var(--t-lg); letter-spacing: -.01em; }
.fato span { font-size: var(--t-sm); }
.fato small { color: var(--texto-suave); }

/* ---------- Guia ---------- */
.guia { display: grid; gap: var(--e-sm); }
.guia figure { border-radius: var(--raio-md); overflow: hidden; background: var(--fundo-elevado); }
.guia img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guia figcaption { padding: .75rem var(--e-sm) var(--e-sm); font-size: var(--t-sm); }
.guia figcaption strong { display: block; color: var(--texto); font-family: var(--fonte-titulo); font-weight: 400; font-size: var(--t-md); }

/* ---------- Lista de comodidades, pílulas, links ---------- */
.lista-check { display: grid; gap: .5rem; }
.lista-check li { padding-inline-start: 1.5rem; position: relative; }
.lista-check li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: .6rem; block-size: .35rem; border-inline-start: 2px solid var(--acento); border-block-end: 2px solid var(--acento); transform: rotate(-45deg); }
.lista-links li { padding-block: .35rem; }
.duas-colunas { display: grid; gap: var(--e-xl); }

/* ---------- Grade de fotos com legenda ---------- */
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--e-xs); }
.grade-fotos figure { background: var(--fundo-elevado); border-radius: var(--raio-md); overflow: hidden; border: 1px solid var(--borda); }
.abrir-foto { display: block; inline-size: 100%; padding: 0; border: 0; background: var(--cor-n200); cursor: zoom-in; }
.abrir-foto img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.grade-fotos figcaption { padding: .6rem .75rem .75rem; font-size: var(--t-sm); }
.salto { display: flex; flex-wrap: wrap; gap: .5rem; }
.salto a { text-decoration: none; font-size: var(--t-sm); padding: .4rem .9rem; min-block-size: 2.75rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-total); display: inline-flex; align-items: center; gap: .35rem; }
.salto a:hover { border-color: var(--texto); }
.salto small { color: var(--texto-suave); }

/* ---------- Ampliação (lightbox): controles fora da foto, nunca sobre ela ---------- */
dialog.lb { border: 0; padding: 0; background: transparent; max-inline-size: 100vw; max-block-size: 100vh; inline-size: 100vw; block-size: 100vh; }
dialog.lb::backdrop { background: oklch(15% 0.02 20 / .96); }
.lb-in { inline-size: 100%; block-size: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 3.75rem var(--e-sm) var(--e-sm); gap: var(--e-sm); }
.lb-in picture { display: contents; }
.lb-in img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; border-radius: var(--raio-sm); }
.lb-controles { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-sm); inline-size: min(100%, 48rem); }
.lb-controles figcaption { color: var(--cor-n200); font-size: var(--t-sm); text-align: center; }
.lb button { inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: oklch(100% 0 0 / .14); color: #fff; font-size: 1.5rem; cursor: pointer; display: grid; place-content: center; }
.lb button:hover { background: oklch(100% 0 0 / .28); }
.lb-fechar { position: fixed; inset-block-start: .75rem; inset-inline-end: .75rem; }


/* ---------- Slideshow do herói: foto limpa, controles e legenda embaixo ---------- */
.slides { background: transparent; border-radius: 0; overflow: visible; }
.slides-quadro { position: relative; border-radius: var(--raio-lg); overflow: hidden; background: var(--fundo-sutil); }
.slides .slide { margin: 0; }
.slides .slide img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slides .slide figcaption { padding: .5rem .25rem 0; font-size: var(--t-xs); line-height: 1.3; min-block-size: calc(3 * 1.3em + .5rem); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slides .slide.ativo img { animation: slide-entra var(--dur-lenta, 400ms) var(--curva-saida); }
@keyframes slide-entra { from { opacity: 0; } to { opacity: 1; } }
.slides-controles { display: flex; align-items: center; gap: .5rem; margin-block-start: .5rem; }
.slides-controles button { inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--borda-forte); border-radius: 50%; background: var(--fundo-elevado); color: var(--texto); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-content: center; flex: none; }
.slides-controles button:hover { border-color: var(--texto); }
.slides-pontos { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; flex: 1; flex-wrap: wrap; justify-content: center; }
.slides-pontos button { inline-size: 1.75rem; block-size: 2.75rem; border: 0; background: transparent; padding: 0; display: grid; place-content: center; }
.slides-pontos button::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--borda-forte); transition: background var(--dur-rapida), transform var(--dur-rapida); }
.slides-pontos button[aria-selected="true"]::before { background: var(--acento); transform: scale(1.4); }
.slides-conta { font-size: var(--t-xs); color: var(--texto-suave); white-space: nowrap; }
.slides-espaco { flex: 1; }
@media (max-width: 39.99rem) { .slides-pontos { display: none; } .slides-conta { flex: 1; text-align: center; } }
.heroi-unidade .slides .slide img { aspect-ratio: 4 / 5; }
@media (min-width: 40rem) { .heroi-unidade .slides .slide img { aspect-ratio: 4 / 3; } }

/* ---------- FAQ ---------- */
.faq { border-block-start: 1px solid var(--borda); }
.faq details { border-block-end: 1px solid var(--borda); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; font: 400 var(--t-md)/1.3 var(--fonte-titulo); position: relative; min-block-size: 2.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset-inline-end: .5rem; inset-block-start: 50%; inline-size: .6rem; block-size: .6rem; border-inline-end: 1.5px solid var(--texto-suave); border-block-end: 1.5px solid var(--texto-suave); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-media) var(--curva-saida); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding-block-end: 1.25rem; color: var(--cor-n700); max-inline-size: var(--largura-conteudo); }

/* ---------- Onde fica, mapa sob demanda ---------- */
.onde { display: grid; gap: var(--e-lg); align-items: center; }
.mapa { aspect-ratio: 4 / 3; border-radius: var(--raio-lg); overflow: hidden; background: var(--fundo-sutil); border: 1px solid var(--borda); position: relative; }
.mapa iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.mapa-abrir { position: absolute; inset: 0; inline-size: 100%; border: 0; background: none; display: grid; place-content: center; gap: .35rem; text-align: center; cursor: pointer; color: var(--texto); font-family: var(--fonte-texto); }
.mapa-abrir span { font: 400 var(--t-md) var(--fonte-titulo); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--borda-forte); }
.mapa-abrir small { color: var(--texto-suave); }

/* ---------- Chamada ---------- */
.chamada { background: var(--cor-marca-600); color: var(--texto-inverso); padding-block: var(--secao); }
.chamada h2, .chamada p { color: inherit; }
.chamada p { color: var(--cor-marca-100); }

/* ---------- Rodapé ---------- */
.rod { background: var(--cor-marca-900); color: var(--cor-marca-100); padding-block: var(--e-2xl) var(--e-md); font-size: var(--t-sm); }
.rod a { text-decoration: none; }
.rod a:hover { color: #fff; text-decoration: underline; }
.rod h2 { color: #fff; font-size: var(--t-md); }
.rod-grade { display: grid; gap: var(--e-xl); }
.rod-marca img { inline-size: min(100%, 18rem); }
.rod-simbolo { margin-block-start: var(--e-md); opacity: .9; }
.rod-lista li { padding-block: .2rem; }
.rod-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-block-start: var(--e-xl); padding-block-start: var(--e-sm); border-block-start: 1px solid oklch(100% 0 0 / .15); font-size: var(--t-xs); }

.rod-cadeado { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.75rem; padding-inline: .25rem; color: #fff; }
.rod-cadeado svg { flex: none; }

/* ---------- Barra fixa do celular ---------- */
.barra-fixa { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .625rem var(--margem) calc(.625rem + env(safe-area-inset-bottom)); background: oklch(98% 0.005 70 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-start: 1px solid var(--borda); }
.barra-fixa .botao { min-block-size: 2.875rem; }

/* ---------- Tablet (≥ 40rem = 640px) ---------- */
@media (min-width: 40rem) {
  .busca-form { grid-template-columns: 1.2fr 1fr 1fr .9fr; align-items: end; }
  .busca-form .botao-busca { grid-column: 1 / -1; justify-self: start; min-inline-size: 16rem; }
  .resultado-item { grid-template-columns: 7rem 1fr; }
  .grade-fotos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-sm); }
  .grade-fotos > li { flex: 0 0 18rem; max-inline-size: 100%; display: flex; }
  .grade-fotos figure { flex: 1; display: flex; flex-direction: column; }
  .fatos { grid-template-columns: repeat(2, 1fr); gap: 0 var(--e-xl); }
  .guia { grid-template-columns: repeat(2, 1fr); }
  .onde { grid-template-columns: 1fr 1fr; }
  .duas-colunas { grid-template-columns: 1.4fr 1fr; gap: var(--e-2xl); }
  .heroi-foto img { aspect-ratio: 16 / 10; }
  .heroi-unidade .heroi-foto img { aspect-ratio: 4 / 3; }
}

/* ---------- Desktop (≥ 60rem = 960px) ---------- */
@media (min-width: 60rem) {
  body { padding-block-end: 0; }
  .barra-fixa { display: none; }
  .burger { display: none; }
  .marca { margin-inline-end: 0; }
  .marca-svg { block-size: 1.75rem; }
  .menu { display: flex; gap: var(--e-md); align-items: center; margin-inline-start: auto; margin-inline-end: var(--e-sm); }
  .menu .menu-cadeado { display: none; }
  .menu a { padding: .5rem 0; border: 0; font-size: var(--t-sm); min-block-size: 2.75rem; display: inline-flex; align-items: center; }
  .menu a:hover { color: var(--acento); }
  .heroi { grid-template-columns: 1fr 1.15fr; gap: var(--e-2xl); min-block-size: min(68svh, 38rem); padding-block: var(--e-lg) var(--e-xl); }
  .heroi-foto img { aspect-ratio: 4 / 3; }
  .heroi-unidade { grid-template-columns: 1fr 1fr; min-block-size: 0; }
  .busca { margin-block-start: calc(-1 * var(--e-xl)); }
  .secao-sutil + .busca { margin-block-start: 0; }
  .busca-cartao { padding: var(--e-lg); }
  .busca-form { grid-template-columns: 1.2fr 1fr 1fr .9fr auto; }
  .busca-form .botao-busca { grid-column: auto; min-inline-size: 0; }
  .unidades { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .dica-rolagem { display: none; }
  .mosaico { grid-template-columns: repeat(4, 1fr); }
  .mosaico-item[data-grande] { grid-column: span 2; grid-row: span 2; }
  .mosaico-item[data-grande] figure { aspect-ratio: auto; block-size: 100%; }
  .fatos { grid-template-columns: repeat(2, 1fr); }
  .guia { grid-template-columns: repeat(2, minmax(0, 28rem)); justify-content: center; }
  .rod-grade { grid-template-columns: 1.4fr 1fr 1fr; }
  .resultado-lista { grid-template-columns: repeat(2, 1fr); }
  .heroi-apoio { font-size: var(--t-md); }
}

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