/* JR Hotel. Um tema só, claro. Cores da marca (roxo #2a1160, índigo #49408f, azuis #7993c7 e #85b5dd).
   Hierarquia dos botões: amarelo só no "Reservar" do topo e na busca de datas; botão cheio (roxo, ou branco em fundo roxo) é reserva;
   contorno é o chat e as portas secundárias; texto com seta é navegação dentro do site; verde só no WhatsApp.
   Movimento e materiais seguem a skill apple-design: resposta no toque, curvas sem quique, topo translúcido,
   e tudo respeita "reduzir movimento", "reduzir transparência" e "mais contraste" do aparelho. */
:root {
  --tinta: #1d1840;
  --cinza: #5b5876;
  --azul: #49408f;
  --azul-escuro: #2a1160;
  --marca-medio: #7993c7;
  --marca-claro: #85b5dd;
  --azul-claro: #edf3fb;
  --sol: #ffc53d;
  --sol-forte: #f0ad00;
  --papel: #ffffff;
  --linha: #dde3f0;
  --borda-controle: #8f8aae; /* 3,3:1 sobre branco: limite de campo e de botão de contorno fino; a --linha fica nas divisórias e cartões */
  --zap: #0f7a40; /* verde do WhatsApp escurecido: texto branco com contraste 5,4:1 */
  --f-tit: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-txt: "Figtree", "Segoe UI", system-ui, sans-serif;
  /* Escala de tipo em rem (segue a letra que a pessoa escolheu). Quanto maior o passo, mais justos a entrelinha e o espaço entre letras. */
  --t-legenda: 0.8125rem;   /* 13 px */
  --t-pequeno: 0.9375rem;   /* 15 px */
  --t-corpo: 1.0625rem;     /* 17 px */
  --t-destaque: 1.1875rem;  /* 19 px */
  --t-titulo-p: 1.3125rem;  /* 21 px */
  --t-h2: clamp(1.5rem, 1rem + 2.1vw, 2.25rem);     /* 24 a 36 px */
  --t-h1: clamp(1.875rem, 1.2rem + 2.6vw, 2.8rem);  /* 30 a 44,8 px */
  --t-numero: clamp(2.6rem, 1.6rem + 3.6vw, 4rem);  /* 41,6 a 64 px: a nota 4,1 */
  --lh-corpo: 1.6; --lh-destaque: 1.5; --lh-titulo-p: 1.25; --lh-h2: 1.12; --lh-h1: 1.06; --lh-rotulo: 1.35;
  --ls-legenda: 0.02em; --ls-pequeno: 0.01em; --ls-destaque: -0.005em; --ls-titulo-p: -0.01em; --ls-h2: -0.02em; --ls-h1: -0.025em;
  /* Medida da linha em em: a letra média da Figtree mede 0,45em (1ch = 0,641em engana). */
  --medida: 32em;        /* uns 70 caracteres de texto corrido */
  --medida-centro: 26em; /* uns 58: texto centralizado pede linha mais curta */
  /* Raios: quatro papéis. Controle (botão, campo, atalho, menu), foto (e caixas pequenas), cartão (superfícies) e pílula. */
  --r-controle: 10px; --r-foto: 12px; --r-cartao: 16px; --r-pilula: 999px;
  --raio: var(--r-foto); /* nome antigo, usado por .foto-arred, .mapa, .cartao img e .fotos-cafe img */
  --sombra: 0 10px 30px rgba(42,17,96, 0.14);
  --topo-h: 68px;
  /* Curvas: "sai" imita uma mola criticamente amortecida (chega rápido, sem passar do ponto); "entra" é o espelho, para a volta. */
  --sai: cubic-bezier(0.22, 1, 0.36, 1);
  --entra: cubic-bezier(0.64, 0, 0.78, 0);
  --toque: 90ms;
  --painel: 260ms;
  --foco: var(--azul);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topo-h) + 16px); -webkit-text-size-adjust: 100%; }
/* Rolagem suave só depois que a página carregou: quem chega por um link com âncora cai direto na seção. */
@media (prefers-reduced-motion: no-preference) {
  html.suave { scroll-behavior: smooth; }
  /* Troca entre páginas do site (Chrome 126+, Safari 18.2+; nos outros, troca seca como hoje). Só opacidade, 200 ms, a mesma curva (--sai, escrita
     por extenso) na velha e na nova: as duas somam 1 o tempo todo, então o que não muda (topo, fundo, faixa roxa da capa) fica parado. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: var(--t-corpo)/var(--lh-corpo) var(--f-txt);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--marca-claro); color: var(--azul-escuro); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
a, button, summary, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Link de texto (sem classe) não tem estado de toque próprio: fica com o realce nativo do aparelho, na cor da marca. */
a:not([class]) { -webkit-tap-highlight-color: rgba(133,181,221,0.4); }
.menu a, .temas a { -webkit-tap-highlight-color: transparent; } /* esses já mudam de fundo no :active */
.faq summary:active, .menu a:active { transition-duration: var(--toque); }

/* Tipografia: quanto maior o texto, mais fechado o espaço entre letras e entre linhas. */
h1, h2, h3 { font-family: var(--f-tit); font-optical-sizing: auto; text-wrap: balance; margin: 0; font-weight: 700; }
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
/* Título pequeno: o h3 e os h2 que abrem um grupo dentro da página (busca, FAQ, páginas legais, "O que o pessoal mais pergunta"). */
h3, .busca h2, .faq-grupo h2, .legal h2, .titulo-p { font-size: var(--t-titulo-p); line-height: var(--lh-titulo-p); letter-spacing: var(--ls-titulo-p); }
p { margin: 0; text-wrap: pretty; }
/* Rótulos em negrito que quebram: linhas equilibradas, sem palavra sozinha na última. */
summary, .distancias strong, .atalho small, .fatos li, .depo footer { text-wrap: balance; }
li, blockquote, dd { text-wrap: pretty; }
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: 16px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Foco do teclado: azul no fundo claro, amarelo no escuro, roxo no amarelo. */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
/* Só quem não tem raio próprio ganha o canto de 4 px no anel; :where mantém (0,1,0), então .menu a e .temas a guardam o próprio raio. */
:where(a:not([class]), .link-seta, .marca):focus-visible { border-radius: 4px; }
.hero, .capa, .secao-escura, .rodape { --foco: var(--sol); }
.fecho, .btn-sol { --foco: var(--azul-escuro); }
.busca { --foco: var(--azul); }
/* Dentro de caixas com canto recortado, o anel vai para dentro para não ser cortado. */
.faq summary:focus-visible, .galeria:focus-visible { outline-offset: -3px; } /* na galeria, fica como reserva de quem não tem :has */
/* Galeria com foco: o anel vai para o cartão inteiro, sobre o fundo da seção, e não para cima da foto. */
@supports selector(:has(*)) {
  .galeria:focus-visible { outline: none; }
  .quarto:has(.galeria:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
}

/* Atalho do teclado para pular o menu */
.pular { position: fixed; left: 16px; top: -60px; z-index: 50; background: var(--azul-escuro); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: var(--r-controle); text-decoration: none; } /* fixed: quem volta a ele com Shift+Tab no meio da página não é jogado para o topo */
.pular:focus { top: 10px; }

/* Botões: a resposta vem no toque (pointer-down), não na soltura. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem/1.2 var(--f-txt); letter-spacing: 0.005em; text-decoration: none; text-align: center;
  padding: 14px 22px; min-height: 48px; border-radius: var(--r-controle); border: 2px solid transparent; cursor: pointer;
  transition: transform var(--painel) var(--sai), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:active { transform: scale(0.97); transition-duration: var(--toque); }
.btn-sol { background: var(--sol); color: var(--azul-escuro); }
.btn-zap { background: var(--zap); color: #fff; }
.btn-linha { background: transparent; color: var(--azul); border-color: var(--azul); }
.btn-linha-clara { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-branco { background: #fff; color: var(--azul-escuro); }
.btn-escuro { background: var(--azul-escuro); color: #fff; }
.btn-grande { padding: 17px 28px; font-size: var(--t-corpo); }
.btn-sol:active { background: var(--sol-forte); }
.btn-linha:active { background: var(--azul-claro); }
@media (hover: hover) and (pointer: fine) {
  .btn-sol:hover { background: var(--sol-forte); }
  .btn-zap:hover { background: #0b6534; }
  .btn-linha:hover { background: var(--azul-claro); }
  .btn-linha-clara:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
  .btn-branco:hover { background: var(--azul-claro); }
  .btn-escuro:hover { background: #3a1f80; }
}
/* Botão de chat: o balão diz, antes de ler, que abre uma conversa aqui mesmo. */
.btn[data-chat]::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[aria-busy="true"] { cursor: progress; opacity: 0.8; }
/* Link com seta: caminho dentro do site (ver detalhes, ver todas as dúvidas). Não parece botão e não disputa atenção com a reserva. */
.link-seta {
  display: inline-block; min-height: 44px; padding-block: 11px; /* alvo de toque de 44 px */
  font: 700 1rem/1.35 var(--f-txt); color: var(--azul);
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--marca-claro); text-underline-offset: 5px;
  transition: text-decoration-color 150ms ease;
}
/* A seta não herda o sublinhado e desliza no toque; o "/ ''" a esconde do leitor de tela. */
.link-seta::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 6px; transition: transform var(--painel) var(--sai); }
.link-seta:active::after { transform: translateX(3px); transition-duration: var(--toque); }
@media (hover: hover) and (pointer: fine) {
  .link-seta:hover { text-decoration-color: currentColor; }
  .link-seta:hover::after { transform: translateX(3px); }
}
.secao-escura .link-seta, .capa .link-seta { color: #fff; text-decoration-color: rgba(255,255,255,0.5); }
.fecho .link-seta { color: var(--azul-escuro); text-decoration-color: rgba(42,17,96,0.35); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.apoio { font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); color: var(--cinza); margin-top: 10px; }
.apoio-destaque { font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); }

/* Topo: material translúcido, o conteúdo passa por baixo desfocado. A borda só aparece quando há conteúdo embaixo. */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--painel) ease, border-color var(--painel) ease;
}
.topo.rolou { border-bottom-color: rgba(42,17,96,0.08); box-shadow: 0 1px 14px rgba(42,17,96,0.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topo { background: rgba(255,255,255,0.97); } }
.topo .wrap { display: flex; align-items: center; gap: 18px; min-height: var(--topo-h); }
.marca { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--azul-escuro); font: 700 1.25rem/1 var(--f-tit); white-space: nowrap; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--tinta); font-weight: 600; padding: 8px 12px; border-radius: var(--r-controle); transition: background-color 150ms ease, color 150ms ease; }
.menu a[aria-current="page"] { background: var(--azul-claro); color: var(--azul-escuro); }
/* "Você está aqui": um traço de borda, que sobrevive a "mais contraste" e a cores forçadas (o fundo some, a borda fica). */
.menu a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; border-bottom: 2px solid var(--azul); }
@media (hover: hover) and (pointer: fine) { .menu a:not([aria-current]):hover { background: #f6f8fd; color: var(--azul); } }
/* O segundo seletor tem a mesma especificidade do hover e vem depois: a resposta ao toque/clique vence o hover. */
.menu a:active, .menu a:not([aria-current]):active { background: var(--azul-claro); color: var(--azul); }
.topo .btn { padding: 11px 18px; min-height: 44px; white-space: nowrap; }
.menu-botao { display: none; margin-left: auto; min-height: 44px; min-width: 5rem; justify-content: center; background: none; border: 1px solid var(--borda-controle); border-radius: var(--r-controle); padding: 9px 12px; font: 600 0.95rem var(--f-txt); color: var(--tinta); cursor: pointer; transition: transform var(--painel) var(--sai), background-color 150ms ease; } /* min-width: "Menu" e "Fechar" com a mesma largura */
.menu-botao:active { transform: scale(0.95); background: var(--azul-claro); transition-duration: var(--toque); }
@media (max-width: 880px) {
  .menu-botao { display: inline-flex; align-items: center; }
  /* O menu nasce do topo e volta para o topo: mesmo caminho na ida e na volta. */
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
    background: #fff; border-bottom: 1px solid var(--linha); padding: 8px 16px 16px; box-shadow: var(--sombra);
    opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
    transition: opacity 180ms var(--entra), transform 180ms var(--entra), visibility 0s linear 180ms;
  }
  .menu.aberto {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--painel) var(--sai), transform var(--painel) var(--sai), visibility 0s;
  }
  .menu a { padding: 12px; }
  .menu a[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; border-bottom: 0; border-left: 3px solid var(--azul); } /* no menu em coluna, o traço fica à esquerda */
  /* Menu aberto: barra e menu viram uma folha só, branca, e um véu escurece a página atrás.
     O véu segura o toque de fora, que só fecha o menu; continua tocável 300 ms depois de começar a sumir, para o clique desse toque não cair no conteúdo. */
  .topo { transition: box-shadow var(--painel) ease, border-color var(--painel) ease, background-color var(--painel) ease; }
  body.menu-aberto .topo { background: #fff; border-bottom-color: transparent; box-shadow: none; }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(29,24,64,0.28);
    opacity: 0; visibility: hidden; pointer-events: auto;
    transition: opacity 180ms var(--entra), visibility 0s linear 300ms;
  }
  body.menu-aberto::after { opacity: 1; visibility: visible; transition: opacity var(--painel) var(--sai), visibility 0s; }
  .topo .btn { padding: 10px 14px; font-size: 0.92rem; }
}
@media (max-width: 460px) {
  .topo .wrap { gap: 10px; }
  .topo .marca-nome { display: none; }
  .topo .btn { padding: 9px 12px; font-size: 0.86rem; }
  .menu-botao { padding: 8px 10px; }
}

/* Primeira tela */
.hero { position: relative; color: #fff; background: var(--azul-escuro); overflow: hidden; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(42,17,96,0.92) 0%, rgba(42,17,96,0.7) 45%, rgba(42,17,96,0.25) 100%); }
@media (max-width: 880px) { .hero::after { background: linear-gradient(180deg, rgba(42,17,96,0.85) 0%, rgba(42,17,96,0.78) 55%, rgba(42,17,96,0.92) 100%); } }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center; padding-block: 64px 72px; }
/* Computador: coluna do título mais larga, para o h1 caber em 3 linhas, um fato por linha. Abaixo de 1024 px, a busca mais estreita cortaria o ano no campo de data. */
@media (min-width: 1024px) { .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.hero h1 { color: #fff; }
.hero .sub { font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); margin-top: 18px; max-width: 24em; color: #e9e6f7; }
.selo {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 600; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); padding: 6px 12px; border-radius: var(--r-pilula);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.estrelas { color: var(--sol); letter-spacing: 1px; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 48px; gap: 28px; } }

/* Busca de datas */
.busca { background: #fff; color: var(--tinta); border-radius: var(--r-cartao); padding: 22px; box-shadow: 0 18px 44px rgba(20,8,60,0.32); }
.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.atalho {
  display: block; text-decoration: none; border: 2px solid var(--azul); border-radius: var(--r-controle); padding: 12px; color: var(--azul-escuro);
  font-weight: 700; text-align: center; line-height: 1.25;
  transition: transform var(--painel) var(--sai), background-color 150ms ease;
}
.atalho small { display: block; font-weight: 500; color: var(--cinza); font-size: var(--t-legenda); letter-spacing: var(--ls-legenda); margin-top: 2px; }
.atalho:active { background: var(--azul-claro); transform: scale(0.97); transition-duration: var(--toque); }
@media (hover: hover) and (pointer: fine) { .atalho:hover { background: var(--azul-claro); } }
.ou { display: flex; align-items: center; gap: 10px; color: var(--cinza); font-size: var(--t-legenda); letter-spacing: var(--ls-legenda); margin: 16px 0 10px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.datas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.datas label { position: relative; isolation: isolate; display: grid; gap: 4px; font-size: var(--t-legenda); font-weight: 600; color: var(--cinza); letter-spacing: var(--ls-legenda); }
.datas input { font: 600 1rem var(--f-txt); cursor: pointer; caret-color: transparent; color: var(--tinta); padding: 11px 10px; min-height: 46px; border: 1px solid var(--borda-controle); border-radius: var(--r-controle); width: 100%; min-width: 0; background: #fff; transition: border-color 150ms ease, box-shadow 150ms ease; }
/* Foco no campo de data: o mesmo anel sólido do resto do site (o halo de 18% quase não aparecia). */
.datas input:focus { border-color: var(--azul); outline: 3px solid var(--foco); outline-offset: 2px; box-shadow: none; }
/* Saída corrigida pelo site: o halo (o mesmo do destino de link, @keyframes halo) acende atrás do rótulo e do campo e apaga. Só opacidade. */
.datas label::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; pointer-events: none;
  border-radius: var(--r-foto); background: rgba(133,181,221,0.45); opacity: 0;
}
.datas label.ajustou::before { animation: halo 1.2s var(--sai); }
.busca .btn { width: 100%; margin-top: 12px; }
.busca .apoio { text-align: center; }
/* Celular: a busca sobe para a primeira tela. O subtítulo desce para depois dela só na tela; no HTML e no leitor de tela a ordem continua a mesma. */
@media (max-width: 560px) {
  .hero .wrap { padding-block: 24px 32px; gap: 16px; }
  .hero-texto { display: contents; }
  .selo { justify-self: start; margin: 0; padding: 4px 10px; gap: 6px; font-size: var(--t-legenda); letter-spacing: var(--ls-legenda); }
  .busca { order: 1; padding: 16px; }
  .hero .sub { order: 2; margin-top: 8px; font-size: var(--t-corpo); line-height: var(--lh-corpo); letter-spacing: normal; }
  .atalhos { margin-top: 12px; gap: 8px; }
  .ou { margin: 12px 0 8px; }
}
/* Se o selo ainda quebrar em 2 linhas (320 px), vira cartão de canto 12 px, não uma cápsula torta. */
@media (max-width: 460px) { .selo { border-radius: var(--r-foto); } }

/* Faixa de fatos */
.fatos { background: var(--azul-claro); border-bottom: 1px solid var(--linha); }
.fatos ul { list-style: none; margin: 0 auto; padding-block: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; justify-items: center; }
.fatos li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 8px; font-weight: 700; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); line-height: 1.25; } /* flex-start: o ícone fica na mesma altura quando o rótulo quebra em 2 linhas */
.fatos svg { width: 30px; height: 30px; flex: none; color: var(--azul); }
@media (max-width: 880px) { .fatos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fatos li:last-child { grid-column: 1 / -1; } }

/* Seções */
.secao { padding-block: 72px; }
.secao-clara { background: var(--azul-claro); }
.secao-escura { background: var(--azul-escuro); color: #fff; }
.secao-escura h2 { color: #fff; }
.secao-escura .apoio { color: #d6d2ee; }
.cabeca { max-width: 45rem; margin-bottom: 32px; }
.cabeca p { margin-top: 14px; font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); color: var(--cinza); }
.secao-escura .cabeca p { color: #ddd9f2; }
.chapeu { font: 700 var(--t-legenda)/1 var(--f-txt); text-transform: uppercase; letter-spacing: 0.1em; color: var(--azul); margin-bottom: 12px; display: block; }
.secao-escura .chapeu { color: var(--sol); }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 880px) { .secao { padding-block: 52px; } .duas { grid-template-columns: 1fr; gap: 28px; } }
.texto p + p { margin-top: 14px; }
/* Medida: uns 70 caracteres por linha no texto corrido (em em, então acompanha o tamanho de cada texto). */
.texto p, .cabeca p, .capa p, .apoio, .faq .resp > p, .legal > * { max-width: var(--medida); }
.foto-arred { border-radius: var(--raio); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Entrada ao rolar (DECISOES §16), o único jeito de revelar do site. O site.js marca com .espera só o bloco que começa abaixo da tela,
   na primeira abertura, e anima a chegada (sobe 16 px e acende em 460 ms, curva --sai, uma vez). O estado escondido só existe aqui:
   sem JS, impresso ou com "reduzir movimento", nada se esconde. */
@media screen and (prefers-reduced-motion: no-preference) {
  .espera { opacity: 0; }
  :target.espera, :target .espera { opacity: 1; } /* destino de link nunca fica invisível, nem por um quadro */
}

/* Quartos */
.quartos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .quartos { grid-template-columns: 1fr; } }
.quarto { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-cartao); overflow: hidden; display: flex; flex-direction: column; transition: border-color 400ms ease; }
/* Galeria: o dedo arrasta a foto 1:1 (rolagem nativa), um gesto passa uma foto, e o gesto lateral não vira "voltar página". */
.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria::-webkit-scrollbar { display: none; }
.galeria img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria-wrap { position: relative; }
.galeria-conta {
  position: absolute; right: 10px; bottom: 10px; color: #fff; font-size: var(--t-legenda); font-weight: 600; letter-spacing: var(--ls-legenda); font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: var(--r-pilula); background: rgba(42,17,96,0.62);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}
.galeria-seta {
  position: absolute; top: 50%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.78); color: var(--azul-escuro); cursor: pointer; display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 2px 10px rgba(20,8,60,0.22);
  transform: translateY(-50%); transition: transform var(--painel) var(--sai), opacity var(--painel) var(--sai), background-color 150ms ease;
}
.galeria-seta svg { width: 20px; height: 20px; }
.galeria-seta:active { transform: translateY(-50%) scale(0.9); background: #fff; transition-duration: var(--toque); }
.galeria-seta.ant { left: 10px; } .galeria-seta.prox { right: 10px; }
/* Na primeira e na última foto, a seta que não leva a lugar nenhum encolhe e some (160 ms, --entra) e volta crescendo pelo mesmo caminho
   (260 ms, --sai): o vidro chega, não só acende. A "anterior" já nasce escondida, sem esperar o script: na primeira foto ela não leva a lugar nenhum. */
.galeria-seta[aria-disabled="true"], .galeria-seta.ant:not([aria-disabled]) {
  opacity: 0; transform: translateY(-50%) scale(0.8); pointer-events: none;
  transition: transform 160ms var(--entra), opacity 160ms var(--entra), background-color 150ms ease;
}
.galeria-seta[aria-disabled="true"]:focus-visible, .galeria-seta.ant:not([aria-disabled]):focus-visible { opacity: 0.5; transform: translateY(-50%); } /* quem chegou pelo teclado não perde o foco de vista */
@media (hover: hover) and (pointer: fine) { .galeria-seta:hover { background: #fff; } }
.quarto-corpo { padding: 20px; display: grid; gap: 12px; flex: 1; align-content: start; }
.capacidade { font: 700 var(--t-legenda)/1 var(--f-txt); letter-spacing: 0.01em; color: var(--azul); background: var(--azul-claro); border-radius: var(--r-pilula); padding: 6px 10px; justify-self: start; }
.dados { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); color: var(--cinza); }

/* Lista de distâncias */
.distancias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.distancias li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); line-height: var(--lh-rotulo); }
.distancias strong { font-weight: 700; }
.distancias span { color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Guia "Qual escolher" (página Quartos): cada suíte é um alvo de 44 px. A margem negativa devolve a sobra ao padding de 12 px da linha, então a altura das linhas não muda. */
.guia li { align-items: center; }
.guia span { flex: none; display: flex; align-items: center; justify-content: flex-end; column-gap: 0.3em; }
.guia a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; margin-block: min(0px, calc(var(--lh-rotulo) * 0.5em - 22px));
  font-weight: 700; color: var(--azul);
  text-decoration-thickness: 2px; text-decoration-color: var(--marca-claro); text-underline-offset: 5px;
  transition: text-decoration-color 150ms ease;
}
.guia a:active { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .guia a:hover { text-decoration-color: currentColor; } }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--raio); background: var(--azul-claro) url("../img/vista.jpg") center / cover; }

/* Estrutura */
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grade { grid-template-columns: 1fr; } }
.cartao { display: grid; gap: 10px; align-content: start; }
.cartao img { border-radius: var(--raio); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cartao p { color: var(--cinza); font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); }
/* Botão dentro do cartão (WhatsApp da sala): largura do texto, não do cartão. */
.cartao .btn { justify-self: start; margin-top: 4px; }

/* Passeios em vídeo: a capa é do próprio site; o YouTube só carrega no play (site.js troca a capa pelo player, ali mesmo). */
.video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-foto); overflow: hidden; background: var(--azul-escuro); }
.cartao .video img { aspect-ratio: 16 / 9; height: 100%; border-radius: 0; transition: transform var(--painel) var(--sai); }
.video::before { /* o botão de play, no mesmo vidro das setas da galeria */
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%; z-index: 1;
  background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 2px 12px rgba(20,8,60,0.28);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  transform: translate(-50%, -50%); transition: transform var(--painel) var(--sai), background-color 150ms ease;
}
.video::after { /* o triângulo, um pouco à direita do centro, como o olho vê */
  content: ""; position: absolute; left: calc(50% + 3px); top: 50%; z-index: 2; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--azul-escuro);
}
.video:active::before { transform: translate(-50%, -50%) scale(0.9); background: #fff; transition-duration: var(--toque); }
@media (hover: hover) and (pointer: fine) {
  .video:hover::before { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
  .video:hover img { transform: scale(1.03); }
}
.video-tempo {
  position: absolute; right: 8px; bottom: 8px; z-index: 1; color: #fff; font-size: var(--t-legenda); font-weight: 600; letter-spacing: var(--ls-legenda); font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: var(--r-pilula); background: rgba(42,17,96,0.62);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}
.video-dist { font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); font-weight: 700; color: var(--azul); line-height: var(--lh-rotulo); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 320ms var(--sai); }
.video.tocando img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } /* a capa apagada segura o lugar enquanto o player carrega */
.video.pronto iframe { opacity: 1; }
.video.tocando::before, .video.tocando::after, .video.tocando .video-tempo { display: none; }
/* Localização: o que não tem vídeo fica numa lista curta, embaixo dos vídeos. */
.extras { max-width: 32rem; margin-top: 64px; }
@media (max-width: 880px) { .extras { margin-top: 48px; } }

/* Café */
.fotos-cafe { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.fotos-cafe img { border-radius: var(--raio); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.fotos-cafe img:first-child { grid-row: 1 / 3; aspect-ratio: auto; }
.horario { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-top: 20px; }
.horario dt { font-weight: 700; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Avaliações: "4,1 de 5 no Google..." numa linha só, quebrando como frase */
.nota-grande { display: block; }
.nota-grande b, .nota-grande h2 { display: inline; }
.nota-grande b { font: 700 var(--t-numero)/1 var(--f-tit); letter-spacing: -0.03em; color: var(--sol); margin-right: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .nota-grande b { margin-right: 6px; }
  .nota-grande h2 { font-size: var(--t-titulo-p); }
}
.depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
@media (max-width: 880px) { .depoimentos { grid-template-columns: 1fr; } }
/* margin: 0: o <figure> traz do navegador a margem de 1em 40px, que recuava os cartões em relação ao título. */
.depo { margin: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-cartao); padding: 22px; display: grid; gap: 14px; }
.depo blockquote { margin: 0; }
.depo footer { font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); color: #d6d2ee; }

/* Dúvidas */
.faq { display: grid; gap: 10px; max-width: 44rem; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-foto); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 52px 16px 18px; font-weight: 700; line-height: var(--lh-rotulo); position: relative;
  transition: background-color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
/* Seta de abrir: aponta para baixo fechada e gira para cima aberta, o sinal que todo mundo já conhece. */
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--painel) var(--sai);
}
.faq details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.faq summary:active { background: var(--azul-claro); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { background: #f6f8fd; } }
.faq .resp { padding: 0 18px 18px; color: var(--cinza); }
.faq .resp p + p { margin-top: 10px; }
.faq .resp .btn { margin-top: 12px; }
.faq .resp .link-seta { margin-top: 4px; }
/* Chrome: a resposta abre deslizando, com altura automática animada. */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; } /* era :root; só o FAQ precisa */
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--painel) var(--sai), content-visibility var(--painel) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
/* Safari e Firefox: a resposta nasce do título, desce 6 px e acende em 220 ms. */
@supports not (interpolate-size: allow-keywords) {
  .faq details[open] > .resp { animation: resposta 220ms var(--sai); }
}
@keyframes resposta { from { opacity: 0; transform: translateY(-6px); } }
.faq-grupo { margin-top: 36px; }
.faq-grupo h2 { margin-bottom: 14px; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.temas a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-weight: 600; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); border: 1px solid var(--linha); background: #fff;
  padding: 9px 14px; border-radius: var(--r-pilula); color: var(--azul); transition: transform var(--painel) var(--sai), background-color 150ms ease;
}
.temas a:active { transform: scale(0.96); background: var(--azul-claro); transition-duration: var(--toque); }
@media (hover: hover) and (pointer: fine) { .temas a:hover { background: var(--azul-claro); } }
/* Chegou por um link (guia "Qual escolher", temas do FAQ, #pedir e #sala da página Empresas): o destino acende durante a rolagem e apaga devagar. Só cor, nada se mexe. */
@keyframes chegou { 0%, 35% { box-shadow: 0 0 0 3px var(--marca-medio); } 100% { box-shadow: 0 0 0 3px rgba(121,147,199,0); } }
/* Halo: o sinal único de "você chegou aqui" (título de destino) e de "o site mudou isto" (Saída corrigida). Uma camada atrás do texto
   que só muda de opacidade: sobe em ~0,1 s (sem salto de brilho), segura e apaga. */
@keyframes halo { 0% { opacity: 0; } 6%, 35% { opacity: 1; } 100% { opacity: 0; } }
/* A carta escolhida guarda a borda azul depois que o brilho apaga: a pessoa sabe em qual das quatro caiu. */
.quarto:target { border-color: var(--azul); animation: chegou 1.8s var(--sai) both; }
@media (forced-colors: active) { .quarto:target { outline: 3px solid Highlight; } }
.faq-grupo:target > h2, #pedir:target h2, #sala:target h3 { position: relative; isolation: isolate; width: fit-content; } /* do tamanho do texto; quando o título quebra, a largura e a quebra não mudam */
.faq-grupo:target > h2::before, #pedir:target h2::before, #sala:target h3::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none;
  border-radius: var(--r-foto); background: rgba(133,181,221,0.45); opacity: 0;
  animation: halo 1.8s var(--sai) both;
}
@media (forced-colors: active) { .faq-grupo:target > h2, #pedir:target h2, #sala:target h3 { outline: 3px solid Highlight; outline-offset: 4px; } }

/* Fechamento */
.fecho { background: var(--sol); color: var(--azul-escuro); text-align: center; padding-block: 56px; }
.fecho h2 { color: var(--azul-escuro); }
.fecho p { margin-top: 10px; margin-inline: auto; max-width: var(--medida-centro); font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); }
.fecho .acoes { justify-content: center; }
.fecho .btn-linha { border-color: var(--azul-escuro); color: var(--azul-escuro); }
.fecho .btn-linha:active { background: rgba(42,17,96,0.08); }
@media (hover: hover) and (pointer: fine) { .fecho .btn-linha:hover { background: rgba(42,17,96,0.08); } }

/* Cabeça das páginas internas */
.capa { background: var(--azul-escuro); color: #fff; padding-block: 56px 48px; }
.capa h1 { color: #fff; max-width: 22ch; }
.capa p { margin-top: 14px; font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); color: #e2def4; }

/* Passos (empresas) */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: p; }
@media (max-width: 880px) { .passos { grid-template-columns: 1fr; } }
.passos li { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: 22px; counter-increment: p; display: grid; gap: 8px; }
.passos li::before { content: counter(p); font: 700 1.6rem/1 var(--f-tit); color: var(--azul); } /* #49408f no branco: 8,7:1 (o amarelo dava 1,97:1) */
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { padding-left: 30px; position: relative; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--zap); font-weight: 700; }
.endereco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); }
.copiar {
  font: 600 0.85rem var(--f-txt); border: 1px solid var(--borda-controle); background: #fff; border-radius: var(--r-controle); padding: 10px 14px; min-height: 44px;
  cursor: pointer; color: var(--azul); transition: transform var(--painel) var(--sai), background-color 150ms ease;
}
.copiar:active { transform: scale(0.95); background: var(--azul-claro); transition-duration: var(--toque); }

/* Rodapé */
.rodape { background: #1c0b44; color: #cfcbe6; padding-block: 48px 96px; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); }
.rodape .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .rodape .wrap { grid-template-columns: 1fr; } }
/* Títulos do rodapé são h2: o rodapé é uma seção própria, não parte do último bloco da página. */
.rodape h2 { color: #fff; font-size: var(--t-corpo); line-height: var(--lh-titulo-p); letter-spacing: 0; margin-bottom: 10px; }
.rodape a { color: #fff; text-underline-offset: 3px; }
/* Rodapé: cada linha é um alvo de 44 px, sem sobrepor a vizinha (24 px de linha + 20 px de folga). */
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rodape li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; min-height: 44px; }
.rodape li a { display: inline-block; padding-block: 10px; }
.rodape a[aria-current="page"] { text-decoration: none; font-weight: 700; }
.direitos { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; font-size: var(--t-legenda); letter-spacing: var(--ls-legenda); }

/* Página de erro */
.erro { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 64px; }
.erro p { margin-top: 12px; margin-inline: auto; max-width: var(--medida-centro); font-size: var(--t-destaque); line-height: var(--lh-destaque); letter-spacing: var(--ls-destaque); color: var(--cinza); }
.erro .acoes { justify-content: center; }

/* Logo */
.marca-img { height: 40px; width: auto; }
.marca-nome { height: 19px; width: auto; }
/* Logo do rodapé: versão com o nome em branco, direto sobre o roxo (sem placa branca). */
.logo-placa { display: inline-block; margin-bottom: 18px; border-radius: var(--r-controle); }
.logo-placa img { height: 96px; width: auto; }
/* A logo (topo e rodapé) responde ao toque como os botões: encolhe a partir da borda esquerda, para não sair do alinhamento, e volta pela mesma curva.
   A entrada dela (logo abaixo) acontece só na primeira página da visita: em toda página repetiria a cada clique no menu. */
.marca, .logo-placa { transform-origin: left center; transition: transform var(--painel) var(--sai), opacity 150ms ease; }
.marca:active, .logo-placa:active { transform: scale(0.96); transition-duration: var(--toque); }
/* Entrada da logo (Daniel, 22/10/2026): só na primeira página da visita (classe .chegada, posta pelo inicio.js antes da pintura).
   O símbolo sobe 8 px e cresce até o lugar; o nome se escreve da esquerda para a direita, 140 ms depois. Uma vez, curva --sai, sem quique. */
@media screen and (prefers-reduced-motion: no-preference) {
  .chegada .topo .marca-img { animation: logo-simbolo 620ms var(--sai) both; transform-origin: center bottom; }
  .chegada .topo .marca-nome { animation: logo-nome 560ms var(--sai) 140ms both; }
}
@keyframes logo-simbolo { from { opacity: 0; transform: translateY(8px) scale(0.86); } }
@keyframes logo-nome { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
/* Celular: páginas em 2 colunas e logo menor, para os alvos de 44 px não alongarem o fim de toda página. */
@media (max-width: 760px) {
  .rodape-paginas ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .logo-placa img { height: 76px; }
}

/* Aviso de cookies: sobe de baixo e desce de volta para baixo ao fechar. */
.cookies {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: 580px; margin-inline: auto; background: #fff; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); box-shadow: 0 16px 40px rgba(20,8,60,0.22);
  padding: 16px 18px; display: grid; gap: 12px; font-size: var(--t-pequeno); letter-spacing: var(--ls-pequeno); line-height: 1.45;
  animation: sobe 320ms var(--sai) both;
}
.cookies.saindo { opacity: 0; transform: translateY(18px); transition: opacity 200ms var(--entra), transform 200ms var(--entra); }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
/* Até 1100 px o balão do chat (e a dica dele) fica no mesmo canto: o aviso sobe para não ser coberto. */
@media (max-width: 1100px) { .cookies { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); } }
.cookies a { color: var(--azul); }
.cookies .botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies .btn { padding: 10px 18px; min-height: 44px; font-size: 0.92rem; }
@media (max-width: 560px) {
  .cookies { padding: 12px 14px; gap: 10px; font-size: var(--t-legenda); grid-template-columns: 1fr; }
  .cookies .botoes { flex-wrap: nowrap; }
  .cookies .btn { padding: 9px 14px; font-size: 0.88rem; flex: 1; }
}

/* Páginas de texto longo (regulamento, privacidade) */
.legal h2 { margin: 36px 0 12px; } /* tamanho: título pequeno; medida: .legal > * */
.legal p, .legal li { color: var(--tinta); }
.legal p + p { margin-top: 10px; }
.legal ul, .legal ol { padding-left: 1.2em; display: grid; gap: 6px; margin: 8px 0; }

/* Acessibilidade do aparelho */
/* Reduzir movimento: nada desliza nem encolhe; troca só de opacidade e cor. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .atalho:active, .temas a:active, .copiar:active, .menu-botao:active, .marca:active, .logo-placa:active { transform: none; }
  .marca:active, .logo-placa:active { opacity: 0.7; } /* a logo não encolhe: desbota no toque */
  .galeria-seta:active, .galeria-seta[aria-disabled="true"], .galeria-seta.ant:not([aria-disabled]) { transform: translateY(-50%); } /* a seta que some só desbota */
  /* A entrada ao rolar (.espera) e a troca entre páginas só existem em no-preference: aqui nada se esconde e a troca é seca. */
  .menu, .menu.aberto { transform: none; }
  .cookies { animation-name: aparece; }
  .cookies.saindo { transform: none; }
  .faq summary::after { transition: none; }
  .link-seta::after { transition: none; }
  .link-seta:active::after, .link-seta:hover::after { transform: none; }
  @supports (interpolate-size: allow-keywords) { .faq details::details-content { transition: none; } }
  @supports not (interpolate-size: allow-keywords) { .faq details[open] > .resp { animation-name: aparece; } } /* só opacidade */
}
@keyframes aparece { from { opacity: 0; } }
/* Reduzir transparência: os materiais viram superfícies sólidas. */
@media (prefers-reduced-transparency: reduce) {
  .topo { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .galeria-seta { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .galeria-conta { background: var(--azul-escuro); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .selo { background: rgba(42,17,96,0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Mais contraste: fundos sólidos, bordas definidas e cinzas mais escuros. */
@media (prefers-contrast: more) {
  :root { --cinza: #3b3857; --linha: #8f8aae; --borda-controle: var(--tinta); }
  /* .topo.rolou junto: senão a regra da rolagem, mais específica, devolve a borda de 8% */
  .topo, .topo.rolou { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--tinta); }
  .hero::after { background: rgba(42,17,96,0.94); }
  .selo { background: var(--azul-escuro); border-color: rgba(255,255,255,0.8); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .depo { border-color: rgba(255,255,255,0.75); }
  .direitos { border-top-color: rgba(255,255,255,0.6); }
  .hero .sub, .capa p, .secao-escura .cabeca p, .secao-escura .apoio, .depo footer, .rodape { color: #fff; }
  .galeria-seta { background: #fff; border-color: var(--tinta); }
  .galeria-conta { background: var(--azul-escuro); }
  .btn-linha-clara { border-color: #fff; }
  .link-seta, .secao-escura .link-seta, .capa .link-seta, .fecho .link-seta, .guia a { text-decoration-color: currentColor; }
  .menu a[aria-current="page"]::after { border-color: var(--tinta); }
  .quarto:target { --marca-medio: var(--azul); }
}