/* =====================================================================
   Chalés da Pedra da Boca — ajustes próprios
   Carregado DEPOIS do CSS portado do Elementor. Aqui só entra o que o
   layout original não resolve sozinho: fontes auto-hospedadas (a CSP não
   permite buscar do Google) e utilitários do sistema novo.
   NÃO recriar estilo de layout aqui — o layout vem do CSS portado.
   ===================================================================== */

/* ACHADO 2026-08-10 (usuário relatou campos sobrepostos/tamanhos
   inconsistentes em `/minha-conta/dados`): `layouts/conta.php` (painel do
   cliente — "Meus dados", "Minhas reservas" etc.) carrega SÓ este
   arquivo, sem o `reset.css` portado do tema que o resto do site usa.
   TODA regra deste arquivo — `.campo__input{width:100%}` + padding +
   borda, `.reserva__linha` de duas/três colunas etc. — foi escrita
   assumindo `box-sizing:border-box` (que normalmente vem do reset
   portado). Sem ele, cada campo fica maior que sua coluna em
   padding+borda, e em `.reserva__linha` (duas colunas lado a lado) isso
   é overflow de verdade — os campos se sobrepõem. Medido, não teoria:
   um `<fieldset>` de mesma linha ficava 30px mais estreito que os campos
   vizinhos só por causa disso.
   Corrige aqui, não em `layouts/conta.php`, porque adicionar o
   `reset.css` inteiro (tipografia de tema WordPress, cores de link,
   estilo de tabela e botão) arriscaria mudar coisas que o painel do
   cliente nunca teve — só o box-sizing é o que falta de verdade. */
*, *::before, *::after { box-sizing: border-box; }

/* O CSS do Elementor pede "Contrallto" (dois L) e as fontes do Google.
   Como a CSP só permite font-src 'self', registramos os mesmos nomes
   apontando para os arquivos locais. */
@font-face {
    font-family: "Contrallto";
    src: url("../fonts/contralto.woff") format("woff"),
         url("../fonts/contralto.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Contralto";
    src: url("../fonts/contralto.woff") format("woff"),
         url("../fonts/contralto.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Gantari";
    src: url("../fonts/gantari.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* ------------------------------------------------- slideshow de fundo */
/* A marcação é montada por app.js; o Elementor faria o mesmo em runtime.
   Ficam atrás do conteúdo e por baixo do overlay ::before da seção. */

.elementor-background-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.elementor-background-slideshow__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.elementor-background-slideshow__slide.is-ativo { opacity: 1; }

/* O slideshow precisa ficar atrás do conteúdo.
   CUIDADO: NÃO aplicar `position` em `.e-con > .elementor-element`. O CSS do
   Elementor posiciona vários elementos com `position: absolute` (o brasão
   centralizado da seção "Sobre", por exemplo, via `.imagem-centralizada`), e
   uma regra genérica aqui sobrescreve e quebra o layout. Escopo mínimo: só a
   seção que tem slideshow e o wrapper interno, que nunca é absoluto. */
.e-con[data-settings*="slideshow"] { position: relative; }
.e-con[data-settings*="slideshow"] > .e-con-inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------- botões */
/* Componentes NOVOS do sistema (reserva, checkout, calendário). Precisam
   existir aqui porque o CSS portado do WooCommerce estiliza <button> com
   a paleta dele — sem estas regras os botões saíam rosa.
   A classe é dobrada (.btn.btn) só para vencer aquelas regras sem !important. */

.btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    /* `line-height: 1.2` e não `1`: a caixa alta abaixo alargou os rótulos em
       ~12%, e o mais longo do sistema ("Escolher outra forma de pagamento",
       305px em maiúsculas) passou a não caber nos 253px úteis de um botão de
       bloco no celular — quebra em duas linhas, e com `line-height: 1` as duas
       linhas se encostavam. 1.2 dá 18px de linha: 18 + 24 de padding + 2 de
       borda = 44px, exatamente o `min-height` já existente, então botão de uma
       linha só NÃO muda de altura nem um pixel. */
    font: 400 .9375rem/1.2 "Gantari", "Inter", system-ui, sans-serif;
    /* CAIXA ALTA (2026-08-13, print do usuário com o botão "RESERVAR UM CHALÉ").
       Medi o botão de referência ao vivo antes de mexer: família, tamanho, peso
       e letter-spacing dos nossos botões JÁ eram idênticos aos dele
       (Gantari 15px/400, spacing normal) — a única diferença visível era a
       caixa. No botão portado ela nem vem de CSS: o texto foi digitado em
       maiúsculas dentro do Elementor, com `text-transform: none`. Aqui vem por
       CSS de propósito, pra que o rótulo continue legível em português no PHP
       ("Confirmar", não "CONFIRMAR") e a forma seja decisão de estilo, não de
       conteúdo. `letter-spacing` fica em `normal` porque é o que o botão de
       referência usa — não inventar espaçamento que o padrão não tem. */
    text-transform: uppercase;
    /* `<a class="btn">` e `<button class="btn">` tinham comportamentos
       DIFERENTES: o link herdava `white-space: normal` e quebrava em duas
       linhas, o botão herdava `nowrap` de alguma regra portada e o texto
       vazava para fora da borda. Medido em 2026-08-13 com o rótulo mais
       longo do sistema. O defeito é anterior à caixa alta — ela só o tornou
       alcançável, ao alargar os rótulos. Normalizar aqui é obrigação da
       nossa classe de componente: quem escreve `class="btn"` não deve
       precisar saber se a tag é <a> ou <button>. */
    white-space: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn.btn--primario { background: #41442F; color: #fff; }
.btn.btn--primario:hover { background: #333524; color: #fff; }

.btn.btn--realce { background: #DE9232; color: #23150A; }
.btn.btn--realce:hover { background: #c87e24; color: #23150A; }

.btn.btn--contorno { background: transparent; border-color: #0E1117; color: #0E1117; }
.btn.btn--contorno:hover { background: #0E1117; color: #fff; }

.btn.btn--bloco { width: 100%; }

.btn.btn--fantasma { background: none; border-color: transparent; color: #41442F; }
.btn.btn--fantasma:hover { background: #F1EEE7; border-color: transparent; }

.btn.btn--ico { padding: .5rem; min-width: 2.75rem; }

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-10) — fonte de botão nos elementos
   PORTADOS do Elementor/JetEngine ("Reservar este Chalé", "Minhas
   Reservas", "Falar com o Chalé" etc.).

   Regra geral do projeto: nunca escrever CSS genérico sobre classe
   portada — quebra o layout silenciosamente. Esta é uma exceção pontual,
   pedida explicitamente pelo usuário depois de constatar (comprovado por
   `getComputedStyle` real) que cada botão do site usava fonte e tamanho
   diferentes — Contrallto 16px maiúsculo, Inter 15px, Gantari 14px,
   variando até dentro da MESMA classe `.elementor-button` em botões
   vizinhos da mesma página.

   Escopo deliberadamente estreito: só font-family/size/weight, pro mesmo
   padrão do resto do site (`.btn.btn`, Gantari .9375rem). Cor, fundo,
   borda e padding continuam os do port — não é redesenho, só destrava a
   tipografia. `!important` é necessário porque o CSS gerado por página
   (`post-N.css`) usa seletor bem mais específico por widget (ex.
   `.elementor-100 .elementor-element.elementor-element-X
   .elementor-button`) — nada aqui vence sem isso.

   AMPLIADA EM 2026-08-13 — caixa alta. O usuário mandou o print do botão
   "RESERVAR UM CHALÉ" dizendo que é esse o padrão dos botões. Medindo,
   a fonte já batia (esta regra aqui, de 2026-08-10, tinha resolvido isso);
   o que sobrava era a CAIXA, que aquela leva deixou de fora de propósito.
   E ela nunca foi uniforme no port: dos 7 rótulos portados do site, só
   2 estavam em maiúsculas ("RESERVAR UM CHALÉ", "CONHEÇA A ADEGA DA
   GLÓRIA") — e por acaso, porque alguém digitou assim no Elementor, não
   por CSS (`text-transform: none` em todos). Os outros 5 ("Minhas
   Reservas", "Pegar rota", "Reservar este Chalé", "Falar com o Chalé",
   "Planejar meu evento no Chalé") ficavam em caixa mista.

   `text-transform` é seguro num jeito que `position`/`display` não são:
   não tira elemento do fluxo nem muda contexto de empilhamento — o pior
   que faz é alargar o texto ~12%. Conferido botão a botão depois:
   nenhum transbordou nem quebrou linha. */
.elementor-button,
.jet-button__label {
    font-family: "Gantari", "Inter", system-ui, sans-serif !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — menu do hambúrguer (mobile/tablet)
   PORTADO do Elementor: largura cheia + ícone por item.

   Pedido do usuário: o menu que abre pelo ☰ ficava do tamanho do próprio
   botão de hambúrguer (27px de largura!) — o container que o Elementor
   usa como âncora de posicionamento (`.elementor-element-f40a4e6`,
   `position:relative`) só é largo o bastante pro ícone, nunca foi
   pensado pra hospedar um painel de largura cheia. `position:fixed` (em
   vez do `position:absolute` original) escapa desse container estreito,
   ancorado na VIEWPORT — o `top` exato é calculado no clique, em
   `app.js` (o cabeçalho não é sticky, então a posição muda com a
   rolagem; não dava pra cravar um valor fixo aqui).

   Ícone por item: `Layout::menu()` os gera agora (`{{MENU_DROPDOWN}}`,
   marcador PRÓPRIO, separado do `{{MENU}}` do menu horizontal de
   desktop — ver `menu_dropdown_com_icones.php`) — não existiam na
   marcação original nenhum. O menu de desktop (`.elementor-nav-menu--main`)
   não é tocado por nada disto. */
@media (max-width: 64em) {
    /* `!important` necessário: existe uma regra portada ainda mais
       específica — `.elementor-nav-menu--stretch .elementor-nav-menu__container
       .elementor-nav-menu--dropdown` (3 classes) — que fixa
       `position:absolute` e vence a de baixo por especificidade, mesmo
       carregando antes. Confirmado com `document.styleSheets` no
       navegador real antes de aplicar isto, não chute. */
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin-top: 0;
        max-height: calc(100vh - 4rem);
        border-top: 1px solid rgba(65, 68, 47, .15);
        box-shadow: 0 12px 28px rgba(14, 17, 23, .16);
        z-index: 9997;
    }
}

.elementor-nav-menu--dropdown .elementor-item {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.menu-dropdown-icone { width: 1.125rem; height: 1.125rem; flex: none; color: #A6A190; }
.elementor-nav-menu--dropdown a.current .menu-dropdown-icone,
.elementor-nav-menu--dropdown .elementor-item:hover .menu-dropdown-icone {
    color: inherit;
}

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — cabeçalho PORTADO do Elementor
   fixo no topo ao rolar.

   Pedido do usuário: cabeçalho fixo em toda página, todo tamanho de
   tela. `position: sticky` (não `fixed`) de propósito — reserva o
   próprio espaço no fluxo normal, então não precisa somar um
   `padding-top` no `<body>`/`#conteudo` pra compensar (o que `fixed`
   exigiria, e arriscaria descolar de outro ajuste do port). `top: 0`
   simples porque não há nada acima dele fixo pra empurrar.

   `z-index: 40` fica bem abaixo do dropdown do hambúrguer (9997, ver
   exceção acima) — o dropdown segue abrindo por cima do cabeçalho sem
   conflito de empilhamento. `.elementor-location-header` é a âncora
   ÚNICA do `<header>` inteiro (não é a classe genérica `.elementor-element`
   nem `.e-con`/`.elementor-widget` que a regra do projeto proíbe tocar) —
   escopo é só posição/z-index, fundo e conteúdo continuam os do port.

   `border-bottom` acrescentada em 2026-08-15 a pedido do usuário: "ele hoje
   se mistura com o conteúdo, temos que ter uma leve diferença". Cabeçalho e
   corpo da página são os dois brancos, e sem nenhum traço entre eles a
   faixa fixa não tinha onde terminar visualmente — ao rolar, o conteúdo
   parecia começar dentro do menu.

   `#E4E1D6` é a MESMA cor de borda neutra já usada nos cartões do site
   (`.canal`, `.contato-mapa__moldura`), então a linha entra como parte do
   sistema, não como um traço avulso. 1px só: o pedido foi "leve".

   ⚠️ Não confundir com a linha VERMELHA que aparecia no print do usuário —
   ela nunca existiu no site (varredura de `getComputedStyle` em todos os
   elementos da página, 2026-08-15: zero bordas avermelhadas). Era marcação
   feita por ele em cima da imagem pra indicar ONDE queria a borda. Já tinha
   aparecido antes, num print da tela de reserva do painel, e também não foi
   achada no CSS na época. */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid #E4E1D6;
}

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — largura do container do widget de
   reserva na página do chalé.

   Achado do usuário comparando prints: a seção "Inclusos na
   hospedagem"/"Inclusos no local" respira 10px dos dois lados, mas o
   cartão do formulário de reserva ("Reserve sua estadia") respirava bem
   mais (29px) — dava pra ver o desalinhamento entre as duas caixas na
   mesma tela. Causa, achada com `getComputedStyle` ao vivo: o container
   ÚNICO deste widget (`.elementor-element-f0b3379`, hash específico deste
   elemento, não uma classe genérica) tem `--width: 90%` embutido no CSS
   portado — um ajuste do design original que citava só ESTE widget, não
   o resto da página. Com 90% e `justify-content:center` no pai, sobrava
   ~19px de cada lado ALÉM do padding de 10px que ele já tinha por dentro.

   `--width: 100%` faz o container ocupar a largura cheia como as outras
   seções — sobra só o padding de 10px que já era dele, igualando com o
   resto da página. Escopo é uma classe-hash ÚNICA (não `.e-con`/
   `.elementor-element` genérico), então não vaza pra nenhuma outra seção
   do site. Testado ao vivo antes de aplicar: `left`/`right` foram de 29px
   pra 0 (a caixa passa a ocupar os 375px inteiros, sobrando só os 10px de
   padding próprio — bateu exatamente com a seção de comodidades).

   CORREÇÃO (2026-08-11, mesmo dia): a regra acima não tinha media query e
   também mudava a largura no DESKTOP — usuário reclamou ("VC ALTEROU O
   DESKTOP... PODE DEIXAR COMO ESTAVA"). No desktop os 90% originais nunca
   incomodaram ninguém, só no mobile empilhado é que o desalinhamento
   aparecia. Escopada agora para `max-width: 1024px`, o MESMO breakpoint
   que o Elementor já usa neste container (`.elementor-element-066ee3f`,
   pai deste widget) pra trocar de `flex-direction: row` (desktop, 2
   colunas) para `column` (mobile, empilhado) — confirmado ao vivo via
   `cssRules`: a regra portada tem `@media (max-width: 1024px) { ...
   --flex-direction: column... }`. Acima de 1024px o `--width: 90%`
   original volta a valer, sem override nenhum. */
@media (max-width: 1024px) {
    .elementor-element-f0b3379 { --width: 100% !important; }
}

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — respiro entre a galeria de fotos e o
   título do chalé.

   Pedido do usuário: "diminuir gap desktop e mobile" no espaço entre o
   mosaico de fotos e "Nome do Chalé". Metade do respiro vinha de
   `.chale-galeria-topo` (nosso, já reduzido acima); a outra metade vinha
   do `--padding-top: 40px` portado deste container ÚNICO
   (`.elementor-element-066ee3f`, hash específico — o mesmo elemento já
   tratado na exceção da largura, acima), que empurra a seção inteira
   (título + comodidades + cartão de reserva) pra baixo. Reduzido pela
   metade (40px → 20px); `--padding-bottom` (60px, respiro debaixo da
   seção) não foi tocado — não fazia parte do pedido. Sem media query:
   o valor original também não tinha, então isso já vale igual em
   desktop e mobile. */
.elementor-element-066ee3f { --padding-top: 20px !important; }

.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.ico--p { width: 1rem; height: 1rem; }

/* --------------------------------------------------------- acessibilidade */

.pular-para {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: #41442F; color: #fff; padding: .75rem 1.25rem;
    font: 400 .9375rem/1 "Gantari", system-ui, sans-serif;
}
.pular-para:focus { left: 0; }

/* --------------------------------------------------------------- alertas */

.alerta {
    padding: .875rem 1.25rem;
    font: 400 .9375rem/1.5 "Inter", system-ui, sans-serif;
    text-align: center;
}
.alerta--sucesso { background: #e8f5ec; color: #14532d; }
.alerta--erro    { background: #fdecec; color: #7f1d1d; }

/* Tira "site em teste" (2026-08-11) — liga/desliga em Aparência
   (`Configuracao::get('aviso_teste_ativo')`). Rola com a página de
   propósito: só o cabeçalho é sticky (ver EXCEÇÃO AUTORIZADA mais abaixo);
   os dois juntos fixos comeriam espaço demais no celular. */
.aviso-teste {
    padding: .625rem 1.25rem;
    font: 600 .875rem/1.4 "Inter", system-ui, sans-serif;
    text-align: center;
    color: #fff;
    background: #7f1d1d;
    animation: aviso-teste-piscar 1.6s ease-in-out infinite;
}
/* Pisca entre o vermelho normal e um tom mais claro — nunca desaparece de
   verdade (ficaria ilegível pra quem navega por teclado/leitor de tela
   bem no instante do "apagado"). `prefers-reduced-motion` já é respeitado
   globalmente (ver bloco no fim do arquivo: zera a duração de qualquer
   animação), então quem pediu menos movimento não vê o pisca-pisca. */
@keyframes aviso-teste-piscar {
    0%, 100% { background: #7f1d1d; }
    50%      { background: #b83232; }
}

/* ------------------------------------------------- cards de chalé (sistema) */
/* Usado pelas seções dinâmicas do sistema novo, que não existem no
   layout original (listagem de chalés vinda do banco). */

.chales {
    display: grid; gap: 1.5rem;
    list-style: none; margin: 0; padding: 0;
}

.chale-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    overflow: hidden;
}

.chale-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.chale-card__corpo { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.chale-card__desc { font-size: .9375rem; color: #5C6058; flex: 1; }

.chale-card__preco {
    margin: .875rem 0 1rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.375rem;
    color: #41442F;
}
.chale-card__preco small { font-family: "Inter", sans-serif; font-size: .8125rem; color: #5C6058; }

@media (min-width: 48em)      { .chales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64.0625em) { .chales { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------- páginas criadas no painel */
/* As páginas portadas do Elementor trazem o próprio layout. Uma página NOVA,
   criada pelo usuário no painel, usa as seções do sistema (`texto`, `cta`…) —
   e estas classes são só nossas, então não tocam em nada do layout portado.
   Tipografia e larguras seguem o kit do site: container de 1300 px com miolo
   de 1100 px, títulos em Contrallto, corpo em Inter. */

.secao { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.secao--clara { background: #fff; color: #0E1117; }
.secao--creme { background: #FBECCF; color: #0E1117; }
.secao--escura { background: #41442F; color: #fff; }
.secao--escura a { color: #FBECCF; }

.container {
    width: min(100% - 2.5rem, 1300px);
    margin-inline: auto;
}

.prosa { max-width: 1100px; margin-inline: auto; }

.prosa h2 {
    margin: 0 0 1rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: clamp(1.75rem, 3.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.15;
}

.prosa h3 {
    margin: 2rem 0 .75rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.375rem;
    font-weight: 400;
}

.prosa p {
    margin: 0 0 1rem;
    font: 400 1rem/1.7 "Inter", system-ui, sans-serif;
}
.prosa p:last-child { margin-bottom: 0; }

.prosa a { color: inherit; text-decoration: underline; }

/* ul/ol/li e strong/em: até aqui só `.prosa h2/h3/p/a` tinham regra própria
   — nada as usava em produção, porque nenhum bloco publicado tinha essas
   tags até o editor de texto rico existir (2026-08-10). */
.prosa strong, .prosa b { font-weight: 600; }
.prosa em, .prosa i { font-style: italic; }

.prosa ul, .prosa ol {
    margin: 0 0 1rem;
    padding-left: 1.375rem;
    font: 400 1rem/1.7 "Inter", system-ui, sans-serif;
}
.prosa li + li { margin-top: .25rem; }
.prosa ul:last-child, .prosa ol:last-child { margin-bottom: 0; }

.sobrescrito {
    margin: 0 0 .5rem;
    font: 400 .8125rem/1.4 "Gantari", "Inter", system-ui, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #DE9232;
}

/* ---------------------------------------------------------- ícones */

.icone {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    color: currentColor;
}

/* -------------------------------------------------------- trilha (breadcrumb) */

.trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font: 400 .875rem/1.4 "Inter", system-ui, sans-serif;
}
.trilha__link { color: inherit; text-decoration: none; opacity: .85; }
.trilha__link:hover { opacity: 1; text-decoration: underline; }
.trilha__sep { opacity: .45; }
.trilha__atual { color: #DE9232; }

/* ------------------------------------------------------------- galeria */
/* Mosaico: uma foto grande à esquerda e até quatro à direita. */

/* Mosaico: no celular, destaque em cima e duas colunas abaixo; no desktop,
   a foto principal ocupa a coluna esquerda inteira e quatro ficam à direita
   em 2x2. As demais aparecem no visualizador. */

/* A largura vem das classes `e-con e-con-boxed` do Elementor, aplicadas no
   port — nada de max-width chumbado aqui, senão desalinha ao redimensionar. */
.chale-galeria-topo {
    /* `.e-con` usa `display: var(--display)`, e o Elementor define essa
       variável no CSS por-elemento — que este container, criado por nós,
       não tem. Sem isto o display cai para `inline` e nada se alinha. */
    --display: flex;
    /* Metade do respiro de baixo (2026-08-11, pedido do usuário: "diminuir
       gap desktop e mobile" entre a galeria e o título do chalé). A outra
       metade do gap vinha do `--padding-top` portado da seção seguinte —
       ver EXCEÇÃO AUTORIZADA em `.elementor-element-066ee3f` mais abaixo. */
    margin-block: 1.5rem 1rem;
}

/* O `--content-width` já vem do kit (min(100%,1300px)); só falta centralizar,
   que nas seções do Elementor vem do container pai. */
.chale-galeria-topo > .e-con-inner {
    width: 100%;
    margin-inline: auto;
}

/* No celular: destaque + UMA linha de quatro miniaturas. Duas linhas
   empurravam o nome do chalé para fora da tela. */
.galeria {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .375rem;
}

.galeria__item {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

/* No celular a altura também é fixa, pelo mesmo motivo. */
.galeria__item--principal {
    grid-column: 1 / -1;

    /**
     * `width` e `aspect-ratio` NÃO são enfeite (corrigido em 2026-08-09).
     *
     * `.galeria__item` define `aspect-ratio: 1 / 1` para as miniaturas. Como
     * a foto principal tem `height` definida, o navegador usava a proporção
     * para calcular a LARGURA a partir dela, em vez de esticar na linha: num
     * celular de 375px a grade tinha 355px e a foto saía com 260px, deixando
     * um vazio de quase um terço da tela à direita (print do usuário).
     *
     * `aspect-ratio: auto` desliga a herança e `width: 100%` manda ocupar a
     * linha inteira, que é o que `grid-column: 1 / -1` já pedia.
     */
    width: 100%;
    aspect-ratio: auto;
    height: clamp(180px, 32vh, 280px);
    border-radius: 12px;
}

.galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.galeria__item:hover img { transform: scale(1.04); }

.galeria__todas {
    position: absolute;
    right: .875rem;
    bottom: .875rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    background: #fff;
    border: 1px solid rgba(14, 17, 23, .2);
    border-radius: 8px;
    font: 500 .875rem/1 "Gantari", "Inter", system-ui, sans-serif;
    color: #0E1117;
    cursor: pointer;
}
.galeria__todas:hover { background: #f5f2ec; }
.galeria__todas .icone { width: 1.125rem; height: 1.125rem; }

/* Galeria SIMPLES de página (`secoes/galeria.php`, sem lightbox/mosaico —
   isso é `.galeria`/`.galeria__item`, da galeria do CHALÉ). Classe própria
   de propósito: `.galeria-fotos` já tentou reaproveitar `.galeria` e herdou
   sem querer a media query do mosaico do chalé (`min-width:48em`, grid
   2fr/1fr/1fr fixo em altura) — colunas desiguais e grade cortada numa
   galeria de 63 fotos (achado em produção, 2026-08-11, na recuperação da
   galeria de `/fotos`). `min-width:0` no item evita que a largura
   intrínseca do `<img width="720" height="540">` empurre o `1fr`. */
.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .375rem;
}
@media (min-width: 36em) {
    .galeria-fotos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 56em) {
    .galeria-fotos { grid-template-columns: repeat(4, 1fr); }
}
.galeria-fotos > li { min-width: 0; list-style: none; }
.galeria-fotos > li img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* Visualizador em tela cheia */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 17, 23, .94);
    padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; }

.lightbox__fechar, .lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.lightbox__fechar { top: 1rem; right: 1rem; }
.lightbox__nav--anterior { left: 1rem; }
.lightbox__nav--proximo  { right: 1rem; }
.lightbox__fechar:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); }

.lightbox__contador {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .8);
    font: 400 .875rem "Inter", system-ui, sans-serif;
}

/* ------------------------------------------------------- caixa de preço */
/* O valor muda conforme as datas: 1 noite é diária cheia, 2+ cai a tarifa.
   Quem calcula é o servidor (/api/preco) — aqui só exibimos. */

.preco-caixa {
    padding: .75rem 1rem;
    background: #E8F1E8;
    border-radius: 12px;
    font-family: "Inter", system-ui, sans-serif;
}

.preco-caixa__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
}

.preco-caixa__riscado {
    font-size: 1rem;
    color: #8A8F84;
    text-decoration: line-through;
}

.preco-caixa__valor {
    font-family: "Contrallto", Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 400;
    line-height: 1;
    color: #41442F;
}

.preco-caixa__unidade { font-size: .9375rem; color: #5C6058; }

.preco-caixa__nota {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: #2F5D33;
}

.preco-caixa__resumo {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px solid rgba(65, 68, 47, .2);
}
.preco-caixa__resumo p { margin: 0; }

.preco-caixa__resumo-linha { font-size: .875rem; color: #5C6058; }

.preco-caixa__detalhe summary {
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #41442F;
    cursor: pointer;
}
.preco-caixa__detalhe summary::marker { color: #DE9232; }
.preco-caixa__detalhe[open] summary { margin-bottom: .625rem; }
.preco-caixa__detalhe .preco-caixa__resumo-linha { padding-left: .25rem; }

.preco-caixa__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .375rem !important;
    font-size: .9375rem;
    color: #5C6058;
}
.preco-caixa__total strong {
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.375rem;
    font-weight: 400;
    color: #41442F;
}

.preco-caixa__parcelas {
    margin-top: .25rem !important;
    font-size: .8125rem;
    color: #5C6058;
    text-align: right;
}

.preco-caixa__economia {
    margin-top: .375rem !important;
    font-size: .8125rem;
    font-weight: 600;
    color: #14532d;
}

.preco-caixa.is-indisponivel { background: #fdecec; }
.preco-caixa.is-indisponivel .preco-caixa__valor { color: #7f1d1d; }

/* --------------------------------------------- cronômetro do checkout */
/* A reserva já está travada (etapa 1); isto só avisa por quanto tempo. Cor
   de aviso só entra perto do fim — o resto do tempo é informativo, não alarme. */

.reserva-timer {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: .625rem .875rem;
    background: #EEF1E8;
    border-radius: 10px;
    font-size: .8125rem;
    color: #41442F;
}
.reserva-timer__icone { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; }
.reserva-timer__texto { margin: 0; }
.reserva-timer--aviso { background: #FBECCF; color: #6b4a12; }
.reserva-timer--expirado { background: #fdecec; color: #7f1d1d; }

/* ---------------------------------------------------- prova social */

.prova {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    font: 400 .875rem/1.3 "Inter", system-ui, sans-serif;
}

.prova__selo {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    background: #FBECCF;
    border-radius: 999px;
    font-weight: 600;
    color: #6b4a12;
}
.prova__selo .icone { width: 1.125rem; height: 1.125rem; }
.prova__avaliacoes { color: #5C6058; }
.prova__avaliacoes strong { color: #0E1117; }

/* -------------------------------------------- inclusos na hospedagem */

.comodidades {
    display: grid;
    gap: .875rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: "Inter", system-ui, sans-serif;
}

/* `align-items: start` mantém o ícone no topo quando o texto quebra em
   duas linhas — com `center` a lista ficava desalinhada. */
.comodidades__item {
    display: flex;
    align-items: start;
    gap: .625rem;
    font-size: .9375rem;
    line-height: 1.35;
}
.comodidades__icone { color: #41442F; margin-top: .05em; }

/* "Mostrar mais (N)" — do 5º item em diante de cada lista de comodidades
   (`ChaleController::listaComodidades()`, pedido do usuário, 2026-08-11).
   Mesmo `.detalhes-recolhiveis` do "Ver detalhes da estadia" no checkout;
   só o espaçamento em volta é próprio daqui. */
.comodidades__mais { margin-top: .875rem; }
.comodidades__mais .comodidades { margin-top: .875rem; }

/* Linha divisória separando "Inclusos na hospedagem" de "Comodidades do
   local".
   `font` copiada do PRÓPRIO título ported "Inclusos na hospedagem"
   (`.elementor-heading-title`, medido ao vivo: Inter 600 16px) — achado do
   usuário, 2026-08-09: os dois títulos vinham em fontes diferentes porque
   este aqui é gerado pelo nosso código (`ChaleController::comodidades()`),
   não pelo template do Elementor, e nunca tinha herdado o estilo certo.

   Cor da linha SUAVIZADA em 2026-08-11 (pedido do usuário, "deixar mais
   clara"): era `#0E1117` (preto do texto, copiado do traço portado na
   época) — trocada pelo mesmo tom sutil já usado em toda borda do site
   (`rgba(65, 68, 47, .15)`, ver `.reserva` etc.). As duas linhas PORTADAS
   vizinhas (acima e abaixo desta seção) levaram a mesma cor — ver EXCEÇÃO
   AUTORIZADA logo abaixo. */
.comodidades__titulo {
    margin: 1.75rem 0 .875rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(65, 68, 47, .15);
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0E1117;
}

@media (min-width: 30em) { .comodidades { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .comodidades { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — cor da linha divisória PORTADA sob
   "Inclusos no local", fim da seção de comodidades. Pedido do usuário
   junto do ajuste acima (`.comodidades__titulo`): "suavizar linhas,
   deixar mais claras".

   Vem do kit do Elementor com `border-color: var(--e-global-color-text)`
   — a variável GLOBAL de cor do texto do site (preto, `#0E1117`), a MESMA
   usada em títulos e parágrafos em toda parte. Por isso o fix é na
   PROPRIEDADE `border-color`, escopado à classe-hash ÚNICA deste
   elemento — nunca na variável em si, que mudaria a cor do texto do site
   inteiro. Mesmo tom sutil usado no ajuste do `.comodidades__titulo` acima
   e em toda borda do site (`rgba(65, 68, 47, .15)`). Sem media query: a
   regra portada original também não tinha. */
.elementor-element-a363ddd {
    border-color: rgba(65, 68, 47, .15) !important;
}

/* ------------------------------------------------------------------
   EXCEÇÃO AUTORIZADA (2026-08-11) — remove a linha sob o cartão de
   reserva.

   Pedido do usuário (print anotado): "eliminar essa linha", uma linha
   fina logo abaixo de "Você não paga agora...". NÃO é borda do cartão
   `.reserva` (que é classe compartilhada com checkout, login, cadastro,
   mensagens etc. — perguntado ao usuário antes de mexer, por causa
   disso). É um elemento DIFERENTE, vizinho do `.reserva` dentro do mesmo
   container portado (`.elementor-element-f0b3379`, o mesmo do fix de
   largura): `.elementor-element-68e7436`, um resto vazio do widget
   "adicionar ao carrinho" do WooCommerce/JetBooking
   (`elementor-add-to-cart--layout-auto jetbooking-radio btn-reserva`) —
   sem WooCommerce no site novo, o widget nunca renderiza nada
   (`textContent` vazio, confirmado ao vivo), só sobrou o `border-top`
   dele. Removido o próprio traço (não só suavizada a cor, como na linha
   irmã `.elementor-element-a363ddd` acima — o pedido aqui foi eliminar).
   Escopo é a classe-hash ÚNICA deste elemento. */
.elementor-element-68e7436 {
    border-top: none !important;
}

/* ---------------------------------------------------------- calendário */

.calendario {
    padding: 1rem;
    border: 1px solid rgba(65, 68, 47, .18);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
}

/* Cabeçalho: noites em destaque e o período por extenso, como referência
   de onde o hóspede está no fluxo de escolha. */
.calendario__cabecalho { margin-bottom: 1rem; }

.calendario__resumo {
    margin: 0;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.1;
    color: #0E1117;
}

.calendario__periodo {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: #5C6058;
}
.calendario__periodo.is-aviso { color: #7f1d1d; font-weight: 600; }

/* As setas ficam nas pontas, na mesma linha dos títulos dos meses */
.calendario__navegacao {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 0;
    z-index: 1;
}

.calendario__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid rgba(65, 68, 47, .15);
}

.calendario__acoes { display: flex; align-items: center; gap: .75rem; }

/* "Limpar datas" e "Fechar" são secundários: texto, sem peso visual.
   Só "Confirmar" recebe a cor de realce da marca. Fonte padronizada
   2026-08-10 (pedido do usuário: fonte/tamanho diferentes entre botões do
   site) — eram Inter .875rem, um par a menos que o resto dos botões
   (`.btn.btn` e o `.tipo-chale__fechar`, mesmo papel de "Fechar" noutro
   painel, já usavam Gantari .9375rem). */
.calendario__limpar,
.calendario__fechar {
    padding: .5rem .25rem;
    background: none;
    border: 0;
    font: 400 .9375rem/1 "Gantari", "Inter", system-ui, sans-serif;
    color: #5C6058;
    cursor: pointer;
}
.calendario__limpar { text-decoration: underline; }
.calendario__limpar:hover, .calendario__fechar:hover { color: #0E1117; }

.calendario__confirmar { min-height: 2.5rem; padding-inline: 1.5rem; }

.calendario__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: 1px solid rgba(65, 68, 47, .2);
    border-radius: 999px;
    color: #41442F;
    cursor: pointer;
}
.calendario__nav:hover { background: #f5f2ec; }
.calendario__nav .icone { width: 1.125rem; height: 1.125rem; }


.calendario__meses { display: grid; gap: 1.5rem; }

.calendario__titulo {
    margin: 0 0 .625rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1rem;
    text-align: center;
    color: #41442F;
}

.calendario__grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendario__dow {
    padding: .25rem 0;
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
    color: #8A8F84;
    text-transform: uppercase;
}

.calendario__dia {
    /* 40px de lado: alvo de toque confortável no celular */
    min-height: 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    font: 400 .875rem/1 "Inter", system-ui, sans-serif;
    color: #0E1117;
    cursor: pointer;
}
.calendario__dia:hover:not(:disabled) { background: #f0ece3; }

.calendario__dia:disabled {
    color: #C3C6BE;
    cursor: not-allowed;
}
.calendario__dia.is-indisponivel { text-decoration: line-through; }

.calendario__dia.is-inicio,
.calendario__dia.is-fim {
    background: #41442F;
    color: #fff;
    font-weight: 600;
}
.calendario__dia.is-intervalo { background: #FBECCF; }


/* Com o calendário ativo os campos viram só leitura: quem escolhe é o
   calendário, que abre ao clique. O ícone do seletor nativo sai de cena
   para não sugerir um segundo caminho. */
.reserva__datas--compacto .campo__input {
    background: #fff;
    cursor: pointer;
}
.reserva__datas--compacto .campo__input::-webkit-calendar-picker-indicator { display: none; }
.reserva__datas--compacto .campo__input[aria-expanded="true"] { border-color: #DE9232; }

/* Painel do calendário: camada sobre o formulário */
.calendario[hidden] { display: none; }
.calendario:not([hidden]) {
    box-shadow: 0 8px 28px rgba(65, 68, 47, .14);
    background: #fff;
    opacity: 0;
    /* Só translateY, nunca scale: `posicionar()` mede a altura do painel
       ainda neste estado "fechado" (antes do fade entrar), e scale()
       distorceria essa medida. Translate não muda largura/altura, só a
       posição — não interfere no cálculo. */
    transform: translateY(-6px);
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1),
                transform .22s cubic-bezier(.16, 1, .3, 1);
}
/* Classe acrescentada um instante depois de tirar o [hidden] (ver
   calendario.js), pra virar de fato uma transição em vez de um "pulo". */
.calendario.calendario--aberto:not([hidden]) { opacity: 1; transform: translateY(0); }

/* Abrindo pra cima o movimento de entrada é o espelho: vem de baixo pra
   cima, não de cima pra baixo — senão a animação "afasta" do campo em vez
   de se aproximar dele. */
.calendario--abre-cima:not([hidden]):not(.calendario--aberto) {
    transform: translateY(6px);
}

/* No desktop o painel é mais largo que a coluna e transborda para a
   esquerda — dois meses não cabem na largura do formulário sem espremer
   as células. */
@media (min-width: 62em) {
    .reserva { position: relative; }

    .calendario:not([hidden]) {
        position: absolute;
        left: auto;
        right: 0;
        width: min(38rem, calc(100vw - 3rem));
        z-index: 30;
        border-color: rgba(65, 68, 47, .28);
        box-shadow: 0 16px 44px rgba(14, 17, 23, .18);
    }
}

@media (min-width: 48em) {
    .calendario__meses { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

    /* Mosaico: principal ocupa a coluna 1 nas duas linhas; as outras quatro
       preenchem as colunas 2 e 3. A proporção do bloco todo é 2:1. */
    /* Altura FIXA, largura livre.
       `aspect-ratio` + `max-height` faz o navegador encolher a LARGURA para
       manter a proporção — foi o que desalinhou a galeria do conteúdo abaixo.
       Com `height` a galeria ocupa 100% da largura e as fotos se ajustam
       por `object-fit: cover`. */
    .galeria {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: clamp(360px, 52vh, 520px);
        border-radius: 12px;
        overflow: hidden;
    }
    .galeria__item { aspect-ratio: auto; height: 100%; border-radius: 0; }
    .galeria__item--principal {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: 100%;
        border-radius: 0;
    }

    /* Recuo igual ao das colunas da seção de baixo, para a foto principal
       começar na mesma vertical do nome do chalé. */
    .chale-galeria-topo > .e-con-inner { padding-inline: 10px; }
}

/* --------------------------------------------- filtro de busca por data */
/* Aparece na home e em /chales, no lugar do filtro do JetSmartFilters. */

/* Sem fundo nem sombra próprios: o bloco portado do Elementor já é o cartão
   branco. Repetir aqui criava um card dentro do outro. */
.busca {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: "Inter", system-ui, sans-serif;
}

/* Redesenhado 2026-08-10 (pedido do usuário: "bem mais compacto e limpo",
   sem ocupar tanto espaço no topo da página, no desktop e no mobile).
   Título "Selecione a data desejada" removido (ver busca-filtro.php) — os
   rótulos dos campos já bastam. Campos mais baixos (2.75rem, a MESMA altura
   mínima de `.btn.btn`, ver linha ~86: o botão não precisa mais de uma
   regra própria pra combinar, casa sozinho) e com menos respiro entre eles. */
.busca__campos { display: grid; gap: .625rem; }

/* Check-in e check-out lado a lado desde o celular comum: um campo de data
   sozinho por linha desperdiça a largura da tela em telas de 360px+. Só
   empilha em aparelho bem estreito (regra mais abaixo). */
.busca__par-datas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

@media (max-width: 21em) {
    /* Celular antigo / tela muito estreita (~320px): lado a lado espremia
       demais os campos, volta a empilhar como os outros. */
    .busca__par-datas { grid-template-columns: 1fr; }
}

.busca__campo { display: flex; flex-direction: column; gap: .1875rem; }

.busca__rotulo {
    display: flex;
    align-items: center;
    gap: .3125rem;
    font-size: .75rem;
    font-weight: 600;
    color: #5C6058;
}
.busca__icone { width: 1rem; height: 1rem; color: #41442F; }

/* Mesma borda, mesmo raio e mesma altura em todos os campos do filtro,
   incluindo o botão de tipo — antes cada um herdava de um CSS diferente. */
.busca__input.busca__input {
    min-height: 2.75rem;
    padding: .5rem .75rem;
    /* 16px evita o zoom automático do iOS ao focar */
    font: 400 1rem/1.4 "Inter", system-ui, sans-serif;
    color: #0E1117;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
}
.busca__input.busca__input:focus { border-color: #DE9232; outline: none; }

/* Só o raio precisa de regra própria agora — a altura já bate com a de
   `.btn.btn` (2.75rem) sem precisar repetir o valor aqui. */
.busca__enviar.busca__enviar { border-radius: 8px; }

.busca__enviar { align-self: end; }

/* O calendário do filtro flutua sobre a página, ancorado no formulário */
.busca { position: relative; }

/* ------------------------------------------------------------------
   MOBILE: o calendário vira folha de tela cheia.
   Ancorado ao formulário ele vazava para fora da viewport — dois meses
   não cabem em 375px. Em tela cheia o alinhamento deixa de ser problema
   e a escolha de datas fica confortável no dedo.
   ------------------------------------------------------------------ */
@media (max-width: 61.99em) {
    .calendario:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 200;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: #fff;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Cabeçalho e rodapé fixos: as ações ficam sempre ao alcance */
    .calendario:not([hidden]) .calendario__cabecalho {
        position: sticky;
        top: -1.25rem;
        margin: -1.25rem -1rem .75rem;
        padding: 1.25rem 1rem .75rem;
        background: #fff;
        border-bottom: 1px solid rgba(65, 68, 47, .15);
        z-index: 2;
    }

    .calendario:not([hidden]) .calendario__rodape {
        position: sticky;
        bottom: calc(-1.25rem - env(safe-area-inset-bottom));
        margin: 1rem -1rem calc(-1.25rem - env(safe-area-inset-bottom));
        padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid rgba(65, 68, 47, .15);
        z-index: 2;
    }

    /* Alvo de toque maior quando há a tela inteira disponível */
    .calendario:not([hidden]) .calendario__dia { min-height: 2.875rem; }
}

@media (min-width: 62em) {
    .calendario--filtro:not([hidden]) {
        position: absolute;
        top: calc(100% + .5rem);
        left: 0;
        z-index: 50;
        width: max-content;
        max-width: min(38rem, calc(100vw - 2.5rem));
        background: #fff;
        box-shadow: 0 16px 44px rgba(14, 17, 23, .18);
    }

    /* Quando o formulário está na parte baixa da tela (ex.: seção de busca
       da home), abrir para baixo empurraria o painel pra fora da primeira
       dobra e o navegador rolava a página pra mostrá-lo. `calendario.js`
       mede o espaço disponível e acrescenta esta classe quando abrir pra
       cima cabe melhor — sem depender de rolagem nenhuma. */
    .calendario--abre-cima:not([hidden]) {
        top: auto;
        bottom: calc(100% + .5rem);
    }
}

/* -------------------------------------------- seletor de tipo de chalé */
/* Substitui o <select> nativo, que não permite duas linhas por opção. */

.tipo-chale { position: relative; }

/* Classe dobrada: o CSS do WooCommerce estiliza <button> e pintava este
   seletor de rosa. Mesmo motivo do bloco `.btn.btn` acima. */
.tipo-chale__botao.tipo-chale__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    padding: .625rem .875rem;
    font: 400 1rem/1.3 "Inter", system-ui, sans-serif;
    color: #0E1117;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}
.tipo-chale__botao::after {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-right: .125rem;
    border-right: 2px solid #5C6058;
    border-bottom: 2px solid #5C6058;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.tipo-chale__botao[aria-expanded="true"] { border-color: #DE9232; }
.tipo-chale__botao[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tipo-chale__botao--erro.tipo-chale__botao--erro { border-color: #7f1d1d; }

.tipo-chale__erro { margin: .375rem 0 0; font-size: .8125rem; color: #7f1d1d; }

.tipo-chale__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sem barra de rolagem: são poucas opções e o texto quebra em vez de cortar.
   `width: max-content` deixa o painel crescer até caber a descrição inteira,
   limitado pela largura da tela. */
.tipo-chale__lista {
    position: absolute;
    top: calc(100% + .375rem);
    left: 0;
    z-index: 40;
    width: max-content;
    min-width: 100%;
    max-width: min(28rem, calc(100vw - 2.5rem));
    padding: .375rem;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .18);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(14, 17, 23, .16);
    overflow: visible;
}
.tipo-chale__lista[hidden] { display: none; }

/* Não cabe abaixo do campo: abre para cima. A classe é posta pelo JS depois
   de medir o espaço disponível. */
.tipo-chale__lista--acima {
    top: auto;
    bottom: calc(100% + .375rem);
}

.tipo-chale__opcoes { display: block; }

/* Cabeçalho só na folha de tela cheia: no desktop o campo continua visível
   logo acima do painel e o título seria repetição. */
.tipo-chale__cabecalho { display: none; }

.tipo-chale__titulo {
    margin: 0;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #0E1117;
}

.tipo-chale__fechar.tipo-chale__fechar {
    min-height: 2.75rem;
    padding: 0 .75rem;
    font: 400 .9375rem/1 "Gantari", "Inter", system-ui, sans-serif;
    color: #5C6058;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ------------------------------------------------------------------
   CELULAR: o seletor vira folha de TELA CHEIA, igual ao calendário.
   Ancorado ao campo, o painel vazava para fora da viewport e ficava
   cortado — e num cartão estreito não há para onde crescer.
   ------------------------------------------------------------------ */
@media (max-width: 61.99em) {
    .tipo-chale__lista:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 200;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Cabeçalho fixo: o "Fechar" fica sempre ao alcance do dedo */
    .tipo-chale__lista:not([hidden]) .tipo-chale__cabecalho {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: sticky;
        top: -1.25rem;
        margin: -1.25rem -1rem .75rem;
        padding: 1.25rem 1rem .75rem;
        background: #fff;
        border-bottom: 1px solid rgba(65, 68, 47, .15);
        z-index: 2;
    }

    /* Alvo de toque confortável quando há a tela inteira disponível */
    .tipo-chale__lista:not([hidden]) .tipo-chale__opcao { min-height: 3.25rem; }
}

.tipo-chale__opcao {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    width: 100%;
    padding: .625rem .75rem;
    background: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}
.tipo-chale__opcao:hover { background: #f5f2ec; }
.tipo-chale__opcao.is-ativo { background: #FBECCF; }

.tipo-chale__nome {
    font: 600 .9375rem/1.3 "Inter", system-ui, sans-serif;
    color: #0E1117;
}
.tipo-chale__camas {
    font: 400 .8125rem/1.35 "Inter", system-ui, sans-serif;
    color: #5C6058;
    /* Quebra em duas linhas em vez de cortar a descrição das camas */
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 48em) {
    /* Tablet: duas colunas, duas linhas — datas em cima, tipo e botão embaixo.
       Com o tipo ocupando a linha inteira o botão sobrava numa terceira. */
    .busca__campos { grid-template-columns: 1fr 1fr; }

    /* O par de datas ocupa a linha inteira (as duas colunas), com suas
       próprias duas subcolunas internas — senão "tipo" subiria para o lado
       do check-out em vez de descer para a segunda linha. */
    .busca__par-datas { grid-column: 1 / -1; }
}

@media (min-width: 62em) {
    /**
     * O cartão do filtro na home nasce com 50% da largura da seção (590 px de
     * conteúdo) e os campos não cabiam numa linha — o botão descia sozinho.
     * A pedido do usuário, o cartão foi alargado.
     *
     * A classe vem do port (`migrar_layout.php`), não de um id do Elementor:
     * regra em site.css só pode usar seletor que exista no nosso código.
     * Dobrada porque `.e-con { width: var(--width) }` também é uma classe —
     * duas vencem sem precisar de !important.
     */
    /* 90% é a mesma folga que o original usa no celular: em telas de ~1024 px
       o cartão de 58rem encostaria nas bordas da seção. */
    .busca-cartao.busca-cartao { width: min(90%, 58rem); }

    /**
     * Quantas colunas cabem é decidido pela LARGURA DISPONÍVEL, não por um
     * número fixo: o mesmo filtro aparece num cartão de 926 px em /chales e num
     * de 912 px na home, com quantidades diferentes de campos.
     *
     * `auto-fit` + `minmax` resolve sozinho, sem media query por página. O
     * mínimo é 12.5rem porque abaixo disso o seletor de tipo corta o texto
     * ("Qualquer config…") — foi medido, não é chute.
     */
    .busca__campos {
        grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
        align-items: end;
    }
    .busca__campo, .busca__input, .tipo-chale { min-width: 0; }
    .busca__rotulo { white-space: nowrap; }
    .busca__enviar { white-space: nowrap; }

    /* Desktop volta ao comportamento original: check-in e check-out são
       colunas independentes do auto-fit acima, lado a lado com tipo e botão
       quando cabe. `display:contents` tira só a CAIXA do wrapper — os dois
       campos continuam filhos do grid de `.busca__campos` normalmente. */
    .busca__par-datas { display: contents; }
}

.busca__erro {
    margin: .75rem 0 0;
    padding: .5rem .75rem;
    font: 400 .875rem/1.4 "Inter", system-ui, sans-serif;
    color: #7f1d1d;
    background: #fdf0ee;
    border-radius: 8px;
}

/* ------------------------------------ cartões de filtro (lateral /chales)
   "Tipologias disponíveis" e "Inclusos na hospedagem". O cartão é o bloco
   portado do Elementor (borda e raio vêm de post-100.css); daqui para dentro
   é componente novo, com classes só nossas. */

.filtro-cartao__icone { width: 2.25rem; height: 2.25rem; color: #0E1117; }

.filtro-lista {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    font-family: "Inter", system-ui, sans-serif;
}

.filtro-lista__itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.filtro-opcao {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    /* Alvo de toque confortável: a linha inteira é clicável */
    min-height: 2.75rem;
    padding: .5rem .5rem;
    border-radius: 8px;
    cursor: pointer;
}
.filtro-opcao:hover { background: #f5f2ec; }

/* Classe dobrada: o CSS do WooCommerce estiliza input e sobrescreveria isto.
   Terceiro caso do mesmo tipo no projeto — ver .btn.btn e .tipo-chale__botao. */
.filtro-opcao__marca.filtro-opcao__marca {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: .125rem 0 0;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .45);
    border-radius: 4px;
    cursor: pointer;
}
.filtro-opcao__marca.filtro-opcao__marca:checked {
    background: #41442F;
    border-color: #41442F;
    /* Marca de conferido desenhada em SVG embutido: sem requisição extra */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}
.filtro-opcao__marca.filtro-opcao__marca:focus-visible {
    outline: 2px solid #DE9232;
    outline-offset: 2px;
}

.filtro-opcao__texto { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; flex: 1; }

.filtro-opcao__nome {
    display: flex;
    align-items: center;
    gap: .375rem;
    font: 600 .9375rem/1.3 "Inter", system-ui, sans-serif;
    color: #0E1117;
}
.filtro-opcao__icone { width: 1.125rem; height: 1.125rem; color: #41442F; }

.filtro-opcao__sub {
    font: 400 .8125rem/1.35 "Inter", system-ui, sans-serif;
    color: #5C6058;
    overflow-wrap: anywhere;
}

/* Quantos chalés têm aquela opção: informação, não ação */
.filtro-opcao__contagem {
    flex: none;
    min-width: 1.5rem;
    padding: .0625rem .375rem;
    font: 600 .75rem/1.5 "Inter", system-ui, sans-serif;
    color: #5C6058;
    text-align: center;
    background: #F1EEE7;
    border-radius: 999px;
}

.filtro-lista__mais > summary {
    font: 600 .875rem/1.4 "Inter", system-ui, sans-serif;
    color: #41442F;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 8px;
}
.filtro-lista__mais > summary:hover { background: #f5f2ec; }
.filtro-lista__mais[open] > summary { margin-bottom: .375rem; }

.filtro-lista__aplicar.filtro-lista__aplicar {
    min-height: 2.75rem;
    border-radius: 8px;
    width: 100%;
}

/* ------------------------------------------------ vitrine filtrada de chalés */

.lista-resumo {
    margin: 0 0 1rem;
    font: 400 .9375rem/1.5 "Inter", system-ui, sans-serif;
    color: #5C6058;
}
.lista-resumo strong { color: #0E1117; }
.lista-resumo__detalhe { color: #5C6058; }
.lista-resumo__limpar { color: #41442F; text-decoration: underline; white-space: nowrap; }

.lista-vazia {
    padding: 2rem 1.25rem;
    text-align: center;
    font-family: "Inter", system-ui, sans-serif;
    color: #5C6058;
    background: #fff;
    border: 1px solid #EFEFEF;
    border-radius: 1em;
}
.lista-vazia__titulo {
    margin: 0 0 .5rem;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.25rem;
    color: #0E1117;
}
.lista-vazia .btn { margin-top: .5rem; }
.lista-vazia__contato { margin-bottom: 0; font-size: .875rem; }
.lista-vazia__contato a { color: #41442F; text-decoration: underline; }

/* Lotação e configurações de cama no card. Único elemento NOVO do card
   portado — as classes são nossas, nenhuma regra toca a marcação do Elementor. */
.card-tipologias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
    margin: 0 0 .5rem;
    font: 400 .875rem/1.4 "Inter", system-ui, sans-serif;
    color: #5C6058;
}
.card-tipologias__lotacao {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    color: #0E1117;
}
.card-tipologias__icone { width: 1.125rem; height: 1.125rem; color: #41442F; }
.card-tipologias__config { color: #5C6058; }
.card-tipologias__livres {
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: #41442F;
    background: #FBECCF;
    border-radius: 999px;
}

/* Preço e botão "Reservar" do card, lado a lado. Wrapper nosso, inserido no
   meio do template portado (ver database/migracao/card_preco_botao_linha.php)
   — igual em espírito ao `card-tipologias-slot` que já existia. */
.card-preco-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .625rem 1rem;
}
.card-preco-linha .elementor-element-fcda643,
.card-preco-linha .elementor-element-a19bd29 {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}
/* O <p class="price"> do WooCommerce vem com margem inferior própria
   (~14px) que, dentro desta linha nova, empurrava o texto pra cima e
   desalinhava do botão. */
.card-preco-linha .price {
    margin: 0;
    white-space: nowrap;
}

/* ------------------------------------------------ formulário de reserva */
/* Componente NOVO do sistema — não existe no layout portado. Todas as
   classes são nossas, nenhuma regra toca a marcação do Elementor. */

.reserva {
    display: grid;
    gap: .75rem;
    /* Padding horizontal igualado ao de `.preco-caixa` (16px/1rem) — achado
       do usuário, 2026-08-11: a caixa de preço, que vive DENTRO deste
       cartão, tinha respiro lateral diferente do cartão em volta (20px vs
       16px), ficando com "caixa dentro de caixa" com recuos desencontrados.
       Vertical continua 1.25rem — não fazia parte do que foi relatado. */
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
}

/* Formulário dentro de um `.reserva` que não É o cartão inteiro (ex.: card
   de mensagens, onde o título e a lista de mensagens vêm antes do form) —
   sem isso o botão colava direto embaixo do campo, sem respiro nenhum. */
.reserva > form { display: grid; gap: .75rem; }

.reserva__titulo {
    margin: 0;
    font-family: "Contrallto", Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #41442F;
}

/* -------------------------------------- mensagens hóspede/atendimento (fase 8.3) */

.mensagens { display: grid; gap: .625rem; max-height: 24rem; overflow-y: auto; }
.mensagem {
    max-width: 85%;
    padding: .625rem .875rem;
    border-radius: 10px;
    background: #F7F5F0;
}
.mensagem--hospede { justify-self: end; background: #41442F; color: #fff; }
.mensagem--hospede .mensagem__autor, .mensagem--hospede .mensagem__data { color: rgba(255, 255, 255, .75); }
.mensagem__autor { margin: 0 0 .125rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mensagem__texto { margin: 0; white-space: pre-line; }
.mensagem__data { margin: .25rem 0 0; font-size: .75rem; color: #767566; }

/* ---------------------------------------------- conta do cliente (fase 6) */

.conta { max-width: 420px; margin-inline: auto; display: grid; gap: 1.25rem; }
.conta--larga { max-width: 640px; }
.conta__links { margin: .25rem 0 0; text-align: center; font-size: .9rem; }
.campo__ajuda { margin: .25rem 0 0; font-size: .8125rem; color: #767566; }

/* "Entrar com o Google" (2026-08-10) — mesmo padrão visual do painel
   (`.entrar__google`/`.entrar__ou` em admin.css), portado pros tokens e
   fonte do site público (Gantari, o mesmo padrão de `.btn.btn`). */
.conta__ou {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8A8F84;
}
.conta__ou::before,
.conta__ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(65, 68, 47, .18);
}

.conta__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    font: 400 .9375rem/1.2 "Gantari", "Inter", system-ui, sans-serif;
    color: #0E1117;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 10px;
    transition: background-color .15s ease, border-color .15s ease;
}
.conta__google:hover { background: #F7F5F0; border-color: #8A8F84; }
.conta__google:focus-visible {
    outline: none;
    border-color: #41442F;
    box-shadow: 0 0 0 3px rgba(65, 68, 47, .12);
}
.conta__google svg { width: 1.125rem; height: 1.125rem; flex: none; }

.conta__menu { margin: 0; font-size: .9rem; }
.conta__menu a { color: #767566; text-decoration: none; }
.conta__menu a.ativo { color: #41442F; font-weight: 700; }

.conta__reserva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.reserva__datas, .reserva__contato { display: grid; gap: 1rem; }

/* Linhas de campos lado a lado (dados pessoais e endereço, etapa 2 do
   checkout) — empilha no celular, mesmo espírito de `.reserva__datas`. */
.reserva__linha { display: grid; gap: 1rem; }
@media (min-width: 30em) { .reserva__linha { grid-template-columns: 1fr 1fr; } }
@media (min-width: 36em) { .reserva__linha--3 { grid-template-columns: 1fr 1fr 6rem; } }

/* Forma de pagamento (etapa 3 do checkout): rádio nativo escondido, o
   cartão clicável é o <label> — alvo de toque grande, funciona sem JS. */
.reserva__opcoes-pagamento { display: grid; gap: .75rem; border: 0; margin: 0; padding: 0; }
.reserva__opcoes-pagamento legend { padding: 0; margin-bottom: .25rem; }
.reserva__opcoes-pagamento.campo--invalido .reserva__opcao-pagamento { border-color: #7f1d1d; }

.reserva__opcao-pagamento {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 10px;
    cursor: pointer;
}
.reserva__opcao-pagamento:has(input:checked),
.reserva__opcao-pagamento.is-selecionado { border-color: #DE9232; background: #FBECCF; }
.reserva__opcao-pagamento:has(input:focus-visible) { outline: 2px solid #DE9232; outline-offset: 2px; }
.reserva__opcao-pagamento input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.reserva__opcao-pagamento-icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 999px;
    background: #fff;
    color: #41442F;
}
.reserva__opcao-pagamento-icone svg { width: 1.25rem; height: 1.25rem; }

.reserva__opcao-pagamento-texto { display: flex; flex-direction: column; font-weight: 600; color: #41442F; }
.reserva__opcao-pagamento-texto small { font-weight: 400; font-size: .8125rem; color: #5C6058; }

/* Bloco da criança: só existe quando a configuração escolhida tem cama extra.
   Some inteiro (campo + mensagem) nas que não têm.
   `:not([hidden])` é obrigatório aqui: sem ele, `display: grid` (mesma
   especificidade do `[hidden]{display:none}` do navegador, e author vence UA)
   cancelava o `hidden` posto pelo PHP/JS e o bloco aparecia em toda config. */
.reserva__crianca:not([hidden]) { display: grid; gap: .625rem; }

/* Uma cama extra só: a pergunta é de sim ou não, então caixa de marcação.
   Classe dobrada porque o CSS do WooCommerce estiliza input. */
/* Alvo de toque de 44 px: a linha inteira é clicável, não só a caixinha. */
.reserva__flag {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .375rem .5rem;
    margin-inline: -.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .9375rem;
}
.reserva__flag:hover { background: #f5f2ec; }
.reserva__flag-marca.reserva__flag-marca {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .45);
    border-radius: 4px;
    cursor: pointer;
}
.reserva__flag-marca.reserva__flag-marca:checked {
    background: #41442F url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m3.5 8.5 3 3 6-6%27/%3E%3C/svg%3E") center/100% no-repeat;
    border-color: #41442F;
}
.reserva__flag-marca.reserva__flag-marca:focus-visible { outline: 2px solid #DE9232; outline-offset: 2px; }

.reserva .campo { display: flex; flex-direction: column; gap: .375rem; }

.reserva .campo__rotulo {
    font-size: .8125rem;
    font-weight: 600;
    color: #5C6058;
}
.reserva .campo__opcional { font-weight: 400; color: #8A8F84; }

.reserva .campo__input,
.reserva .campo__select {
    min-height: 2.75rem;
    padding: .5rem .875rem;
    /* 16px evita o zoom automático do iOS ao focar o campo */
    font: 400 1rem/1.4 "Inter", system-ui, sans-serif;
    color: #0E1117;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 8px;
    width: 100%;
}
.reserva textarea.campo__input { min-height: 3.25rem; resize: vertical; }
.reserva .campo__input:focus, .reserva .campo__select:focus { border-color: #DE9232; }

/* Erro devolvido pelo servidor depois de um redirect (ex.: "Data de check-in
   inválida.") — mostrado embaixo do campo em vez de só no aviso do topo da
   página, pedido do usuário em 2026-08-06. */
.reserva .campo--invalido .campo__input,
.reserva .campo--invalido .campo__select,
.reserva .campo--invalido .tipo-chale__botao { border-color: #7f1d1d; }
.reserva .campo__erro { margin: 0; font-size: .8125rem; color: #7f1d1d; }

.reserva__acomodacao, .reserva__nota, .reserva__seguranca {
    margin: 0;
    font-size: .8125rem;
    color: #5C6058;
}
.reserva__seguranca { text-align: center; }

.reserva__nota--erro { color: #7f1d1d; }
.reserva__nota--ok { color: #2F5D33; }
.reserva__nota--sutil { font-size: .75rem; color: #767566; margin-top: .125rem; }

/* --------------------------------- cancelar reserva: por contato, não botão -- */
/* O botão de cancelamento imediato saiu (2026-08-09). Aqui a pessoa é levada
   ao WhatsApp ou ao e-mail com o código já escrito na mensagem. */

.cancelar-contato {
    margin-top: 1rem;
    padding: 1rem 1.125rem;
    background: #FBF9F4;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
}

.cancelar-contato__titulo {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #16181D;
}

.cancelar-contato__texto {
    margin: 0 0 .875rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #5C6058;
}

.cancelar-contato__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cancelar-contato__acoes .btn { flex: 1 1 11rem; }

/* ------------------------------------------- confirmação do pagamento ------- */
/* Substituiu a faixa fininha de "Pagamento aprovado!": é o momento em que a
   pessoa quer certeza de que deu certo, então merece a tela inteira do
   cartão, com o código da reserva à vista. */

.pagamento-aprovado {
    display: grid;
    justify-items: center;
    gap: .625rem;
    padding: 1.75rem 1.25rem;
    text-align: center;
    background: #E8F1E8;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
}

.pagamento-aprovado[hidden] { display: none; }

.pagamento-aprovado__marca {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #2F5D33;
    color: #fff;
}

.pagamento-aprovado__marca svg { width: 1.5rem; height: 1.5rem; }

.pagamento-aprovado__titulo {
    margin: 0;
    font: 700 1.25rem/1.2 "Inter", system-ui, sans-serif;
    color: #14532d;
}

.pagamento-aprovado__texto {
    margin: 0;
    max-width: 34ch;
    font-size: .9375rem;
    line-height: 1.5;
    color: #2F3C2F;
}

.pagamento-aprovado__parcelas {
    margin: 0;
    padding: .375rem .75rem;
    background: #fff;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: #2F3C2F;
}
.pagamento-aprovado__parcelas[hidden] { display: none; }

.pagamento-aprovado__indo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: #5C6058;
}

.pagamento-aprovado .btn { margin-top: .25rem; max-width: 20rem; }

/* ------------------------------- resumo da reserva recolhido no checkout ---- */
/* Da etapa 2 em diante o resumo vira uma barra: chalé, datas e total. O
   cronômetro fica FORA deste `<details>`, sempre visível. */

.resumo-dobra { display: block; }
.resumo-dobra > summary::-webkit-details-marker { display: none; }
.resumo-dobra > summary::marker { content: ''; }

.resumo-dobra__barra {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    cursor: pointer;
    list-style: none;
    font-family: "Inter", system-ui, sans-serif;
}

.resumo-dobra__barra:hover { background: #FBF9F4; }
.resumo-dobra__barra:focus-visible { outline: 2px solid #DE9232; outline-offset: -2px; }

.resumo-dobra__texto { display: grid; gap: .125rem; min-width: 0; flex: 1; }
.resumo-dobra__chale {
    font-weight: 600;
    font-size: .9375rem;
    color: #16181D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resumo-dobra__datas { font-size: .8125rem; color: #767566; }
.resumo-dobra__total { font-weight: 700; font-size: .9375rem; color: #41442F; white-space: nowrap; }

.resumo-dobra__seta {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: #767566;
    transition: transform .18s ease;
}
.resumo-dobra[open] .resumo-dobra__seta { transform: rotate(180deg); }

/* Aberto, volta a ser o cartão de antes: a foto encosta no topo do conteúdo. */
.resumo-dobra[open] .resumo-dobra__barra { border-bottom: 1px solid rgba(65, 68, 47, .12); }

@media print { .resumo-dobra > summary { display: none; } }

/* --------------------------------------------- data de nascimento em 3 partes */
/* Substituiu o `<input type="date">`, que abria o calendário no mês atual e
   obrigava a andar mês a mês até 1991. Ver `parciais/campo-nascimento`. */

.nascimento {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;   /* sem isto o fieldset ignora o grid do pai e estoura */
    /* `<fieldset>` tem sizing próprio de UA que nem `min-width:0` cobre
       inteiro: sem `width:100%` explícito, ele fica ~30px mais ESTREITO
       que os outros `.campo` da mesma grade (medido, não chute) — "Ano"
       sobrava com um vão vazio à direita que não existe em nenhum outro
       campo da tela. Achado pelo usuário em 2026-08-10. */
    width: 100%;
}

.nascimento__legenda { padding: 0; margin-bottom: .375rem; }

.nascimento__campos {
    display: grid;
    grid-template-columns: 5rem 1fr 6rem;
    gap: .5rem;
}

.nascimento__rotulo {
    display: block;
    margin-bottom: .1875rem;
    font-size: .75rem;
    color: #767566;
}

/* Alvo de toque confortável: o campo é usado por gente que erra o clique. */
.nascimento .campo__select { min-height: 3rem; width: 100%; }

@media (max-width: 26rem) {
    .nascimento__campos { grid-template-columns: 4.25rem 1fr 5.25rem; gap: .375rem; }
}

/* ------------------------------- aviso de divergência entre reserva e cadastro */
/* Em "Meus dados": a reserva do titular trouxe algo diferente do que está
   salvo. Nada muda sozinho, quem decide é o botão.
   Redesenhado em 2026-08-11 (pedido do usuário: empilhado acima do
   formulário com botão gigante "não estava bom", e no mobile "precisa
   parecer notificação") — virou `<details>` fechado por padrão, MESMO
   componente de "Falar com o atendimento" (`.reserva > summary`,
   `.reserva-mensagens__*`, ver mais abaixo): ícone + texto + seta no
   resumo, comparação e botões só aparecem com um toque. Também ganha
   coluna própria em telas largas (`.painel-dados--com-aviso`). */

.reserva--aviso { margin-bottom: 0; }

.comparar { margin: 0; display: grid; gap: .5rem; }

.comparar__linha {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: .25rem 1rem;
    align-items: baseline;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(65, 68, 47, .12);
}

.comparar__linha:last-child { border-bottom: 0; padding-bottom: 0; }

.comparar__rotulo {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #767566;
}

.comparar__valor {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem .625rem;
    font-size: .875rem;
}

.comparar__antes { color: #767566; text-decoration: line-through; }
.comparar__depois { color: #16181D; font-weight: 600; }

.comparar__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.comparar__acoes .btn { flex: 1 1 12rem; }

@media (max-width: 30rem) {
    .comparar__linha { grid-template-columns: 1fr; }
}

/* Abaixo de 62em o painel do cliente já está em "modo mobile" (menu
   hambúrguer — ver `.painel__abrir`/`min-width:62em` mais abaixo): o
   conteúdo do aviso (só visível depois de tocar no resumo) encolhe pra
   pesar menos que um cartão de formulário comum. */
@media (max-width: 61.99em) {
    .reserva--aviso .reserva__nota { font-size: .8125rem; }
    .comparar__linha { padding-bottom: .375rem; }
    .comparar__acoes .btn {
        flex: 1 1 auto;
        padding-block: .625rem;
        font-size: .875rem;
    }
}

.reserva__resumo {
    padding: .875rem 1rem;
    background: #FBECCF;
    border-radius: 8px;
}
.reserva__resumo p { margin: 0; }
.reserva__resumo-total { font-size: 1.25rem; color: #41442F; }
.reserva__resumo-obs { font-size: .75rem; color: #5C6058; }

.reserva-placeholder {
    padding: 1.5rem;
    background: #FBECCF;
    border-radius: 10px;
    font-family: "Inter", system-ui, sans-serif;
}

/* ------------------------------------------------ resumo da reserva */

.reserva-resumo { max-width: 52rem; font-family: "Inter", system-ui, sans-serif; }
.reserva-resumo h1 { margin: 0; }
.reserva-resumo__codigo { font-size: .875rem; color: #5C6058; }

/* Cartão com foto: o card sozinho, estreito, sobrava muito vazio ao lado
   numa tela larga — a foto de capa (mesma info que o checkout já usa) ocupa
   esse espaço com algo de verdade, em vez de só alargar o texto à toa. */
.reserva-resumo--cartao {
    display: grid;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 14px;
    overflow: hidden;
}
.reserva-resumo__foto { width: 100%; height: 14rem; object-fit: cover; }
.reserva-resumo__corpo { display: grid; gap: .875rem; padding: 1.75rem; }

.reserva-resumo__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reserva-resumo__imprimir { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; font-size: .8125rem; }
.reserva-resumo__imprimir svg { width: 1rem; height: 1rem; flex: none; }

.reserva-resumo__status {
    display: inline-block;
    padding: .375rem .875rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
}
.reserva-resumo__status--ok         { background: #e8f5ec; color: #14532d; }
.reserva-resumo__status--aguardando { background: #FBECCF; color: #6b4a12; }
.reserva-resumo__status--erro       { background: #fdecec; color: #7f1d1d; }

/* Ação principal de quem está aguardando pagamento: ligar ou chamar no
   WhatsApp, os dois num botão de verdade, não escondidos numa frase corrida
   como antes. */
.reserva-resumo__cta { display: grid; gap: .75rem; padding: 1rem; background: #FBECCF; border-radius: 10px; }
.reserva-resumo__cta .reserva-resumo__aviso { padding: 0; background: none; }
.reserva-resumo__cta-acoes { display: flex; flex-wrap: wrap; gap: .625rem; }

.reserva-resumo__aviso {
    padding: 1rem;
    background: #FBECCF;
    border-radius: 8px;
    font-size: .9375rem;
}

.reserva-resumo__total-caixa { margin: 0; }
.reserva-resumo__voltar { justify-self: start; }
.reserva-resumo__cancelar { color: #7f1d1d; border-color: #7f1d1d; }

/* Grade de 2 colunas em vez de uma lista de linhas cheias: o mesmo
   conteúdo em bem menos altura, sem perder legibilidade. */
.reserva-resumo__dados { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin: 0; }
.reserva-resumo__dados div { display: flex; flex-direction: column; gap: .0625rem;
                             padding-bottom: .375rem; border-bottom: 1px solid rgba(65,68,47,.12); }
.reserva-resumo__dados dt { font-size: .75rem; color: #5C6058; }
.reserva-resumo__dados dd { margin: 0; font-weight: 600; text-align: left; font-size: .875rem; }
.reserva-resumo__hora { display: block; font-weight: 400; font-size: .75rem; color: #5C6058; }

/* Só na página de resumo (cartão mais largo que o do checkout): 3 colunas
   aproveitam a largura extra em vez de deixar tudo espremido à esquerda. */
@media (min-width: 40em) {
    .reserva-resumo__corpo .reserva-resumo__dados { grid-template-columns: repeat(3, 1fr); }
}

.reserva-resumo__diarias { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem; }
.reserva-resumo__diarias caption { text-align: left; font-size: .8125rem; color: #5C6058; padding-bottom: .5rem; }
.reserva-resumo__diarias th, .reserva-resumo__diarias td { padding: .5rem 0; text-align: left; }
.reserva-resumo__diarias td:last-child, .reserva-resumo__diarias th:last-child { text-align: right; }
.reserva-resumo__diarias tbody tr { border-bottom: 1px solid rgba(65,68,47,.08); }
.reserva-resumo__total th, .reserva-resumo__total td {
    padding-top: .875rem;
    border-top: 2px solid rgba(65,68,47,.25);
    font-size: 1.125rem;
    color: #41442F;
}

/* Páginas de tarefa (checkout, resumo da reserva), não de passeio — o
   padding generoso de `.secao` (pensado pra conteúdo de marketing) só
   atrapalha aqui, então este modificador reduz o respiro vertical pra
   sobrar mais tela pro conteúdo em si (menos rolagem). O fundo levemente
   diferente do branco do cabeçalho (que é HTML portado, não mexemos nele)
   é o que separa visualmente "menu" de "página" sem precisar de borda —
   sem isso as duas coisas se misturavam, pedido do usuário em 2026-08-06. */
.secao--compacta { padding-block: clamp(1.5rem, 3vw, 2.25rem); background: #F7F5F0; }

/* ------------------------------------------- passos do checkout (3 etapas) */

.passos-checkout { margin: 0 0 1.25rem; }
.passos-checkout ol { display: flex; list-style: none; margin: 0; padding: 0; }
.passos-checkout__item { position: relative; flex: 1; text-align: center; }
.passos-checkout__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: rgba(65, 68, 47, .15);
}
.passos-checkout__item--concluido:not(:last-child)::after { background: #41442F; }

.passos-checkout__marco {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    text-decoration: none;
    color: inherit;
}

.passos-checkout__icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 999px;
    background: #fff;
    border: 2px solid rgba(65, 68, 47, .2);
    color: #8A8F84;
}
.passos-checkout__icone svg { width: 1.125rem; height: 1.125rem; }

.passos-checkout__item--atual .passos-checkout__icone { border-color: #DE9232; background: #FBECCF; color: #b5661a; }
.passos-checkout__item--concluido .passos-checkout__icone { border-color: #41442F; background: #41442F; color: #fff; }
a.passos-checkout__marco:hover .passos-checkout__icone { border-color: #41442F; }

.passos-checkout__texto { display: flex; flex-direction: column; font-size: .8125rem; font-weight: 600; color: #8A8F84; }
.passos-checkout__texto small { font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.passos-checkout__item--atual .passos-checkout__texto,
.passos-checkout__item--concluido .passos-checkout__texto { color: #41442F; }

@media (max-width: 26em) {
    .passos-checkout__texto small { display: none; }
    .passos-checkout__texto { font-size: .75rem; }
}

.checkout { display: grid; gap: 1.5rem; align-items: start; }

/* Painel lateral de /reserva/{codigo} (2026-08-07): antes o espaço ao lado
   do resumo ficava vazio em tela larga — agora tem contato e mensagens. */
.reserva-tela { display: grid; gap: 1.25rem; align-items: start; }
.reserva-tela__lateral { display: grid; gap: 1.25rem; }
@media (min-width: 62em) {
    .reserva-tela { grid-template-columns: minmax(0, 52rem) 1fr; gap: 2rem; }
}

/* Cartão de mensagens virou `<details>` (colapsado por padrão) — mesma
   linguagem visual de `.detalhes-recolhiveis`, só que como filho direto
   de `.reserva` (que já é `display:grid`, então o `<summary>` também vira
   uma linha do grid). */
/* Redesenhado 2026-08-10 — pedido do usuário: "isso não parece um box de
   comunicação". A serifada de título de seção (mesma fonte de
   `.reserva__titulo`) fazia esta linha parecer um cabeçalho estático, não um
   controle clicável; o marcador nativo (só um triângulo pequeno antes do
   texto) também não bastava como pista. Agora tem ícone de envelope, fonte
   normal do corpo (Inter) e seta própria na ponta — mesma linguagem do
   cabeçalho de Mensagens já redesenhado no painel do admin. */
.reserva > summary {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #41442F;
    cursor: pointer;
    list-style: none;
}
.reserva > summary::-webkit-details-marker { display: none; }
.reserva[open] > summary { margin-bottom: -.375rem; }

.reserva-mensagens__icone {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: #F1EEE7;
    color: #767566;
}
.reserva-mensagens__icone svg { width: 1rem; height: 1rem; }

.reserva > summary .painel__contador { margin-left: -.125rem; }

.reserva-mensagens__seta {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin-left: auto;
    color: #A6A190;
    transition: transform .15s ease;
}
.reserva[open] > summary .reserva-mensagens__seta { transform: rotate(180deg); }

/* Com resposta nova do atendimento não lida: o cabeçalho vira um destaque
   âmbar visível de cara — sem isto, uma resposta nova ficava só num
   selozinho pequeno do lado do texto, fácil de não perceber. */
.reserva-mensagens--nao-lida {
    background: #FBECCF;
    border: 1px solid rgba(222, 146, 50, .4);
    border-left: 4px solid #DE9232;
    border-radius: 8px;
    padding: .75rem .875rem;
}
.reserva-mensagens--nao-lida .reserva-mensagens__icone { background: #DE9232; color: #fff; }

/* As etapas ficam junto do formulário (coluna da direita), não soltas
   acima das duas colunas — pedido do usuário em 2026-08-06. */
.checkout__coluna-form { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.checkout__etapa {
    margin: 0 0 .25rem;
    font: 600 .8125rem/1 "Inter", system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #DE9232;
}
.checkout__resumo { font-family: "Inter", system-ui, sans-serif; }

/* O resumo ganha a mesma cara de cartão do formulário ao lado (`.reserva`) —
   antes só o formulário parecia um cartão e o resumo flutuava solto na
   página, quebrando a simetria dos dois lados. */
.checkout__cartao {
    display: grid;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 14px;
    overflow: hidden;
}
.checkout__foto {
    width: 100%;
    height: 7rem;
    object-fit: cover;
}
.checkout__cartao-corpo { display: grid; gap: .75rem; padding: 1.25rem; }
.checkout__cartao-corpo h1 { margin: 0; font-size: 1.375rem; }

.checkout__voltar { margin-top: 0; font-size: .875rem; }

/* Bloco "ver mais" reutilizável (checkout e resumo da reserva): informação
   que a pessoa já sabe (ela escolheu essas datas, ou já sabe o que reservou)
   não precisa ocupar a primeira dobra por padrão. O valor total, mais
   importante que os detalhes, mora sempre FORA disto. */
.detalhes-recolhiveis summary {
    font-size: .8125rem;
    font-weight: 600;
    color: #41442F;
    cursor: pointer;
}
.detalhes-recolhiveis summary::marker { color: #DE9232; }
.detalhes-recolhiveis[open] summary { margin-bottom: .625rem; }
/* Era um <a>; virou <button> num <form> (precisa de POST pra liberar a
   reserva no clique, não só trocar de página) — reset pra continuar com
   cara de link. */
.checkout__voltar .link-simples {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: #5C6058;
    text-decoration: underline;
    cursor: pointer;
}
.checkout__voltar .link-simples:hover { color: #0E1117; }

@media (min-width: 30em) {
    .reserva__datas { grid-template-columns: 1fr 1fr; }
}

/* Empilhado (celular e tablet retrato): a foto é bonita, mas custa altura
   de tela que aqui vale mais pro formulário — some pra sobrar menos
   rolagem até o botão de confirmar. No desktop lado a lado ela fica. */
@media (max-width: 61.9375em) {
    .checkout__foto { display: none; }
}

/* Mesma lógica no resumo da reserva: no celular a foto custaria altura que
   aqui vale mais pra quem está `aguardando_pagamento` ver os botões de
   ligar/WhatsApp sem rolar. A partir de tablet paisagem sobra espaço de
   sobra (é o "espaço livre" que a foto veio preencher), então ela aparece. */
@media (max-width: 47.9375em) {
    .reserva-resumo__foto { display: none; }
}

@media (min-width: 62em) {
    .checkout { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ------------------------------------------------ pagamento (fase 5) ---- */
/* PIX: QR gerado pelo servidor, sem Brick — não tem dado sensível de cartão
   pra tokenizar. Cartão: só o container do Card Payment Brick do Mercado
   Pago, que desenha o próprio formulário lá dentro. */

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(65, 68, 47, .2);
    border-top-color: #41442F;
    border-radius: 999px;
    animation: girar .8s linear infinite;
    vertical-align: -.15em;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* [hidden] tem a mesma especificidade destas classes — sem o override
   explícito, a regra daqui (mais tardia na cascata) vence o [hidden] do
   navegador e o bloco continua visível mesmo escondido via JS. Mesma
   armadilha já vista em `.btn[hidden]`. */
.pagamento-pix__carregando[hidden],
.pagamento-pix__conteudo[hidden] { display: none; }

.pagamento-pix__carregando {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.5rem 1rem;
    color: #5C6058;
}

.pagamento-pix__conteudo { display: grid; gap: .75rem; justify-items: center; text-align: center; }

.pagamento-pix__qr {
    width: 12rem;
    height: 12rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
}

.pagamento-pix__copiar { display: flex; gap: .5rem; width: 100%; }
.pagamento-pix__copiar input {
    flex: 1;
    min-width: 0;
    padding: .625rem .75rem;
    border: 1px solid rgba(65, 68, 47, .25);
    border-radius: 8px;
    font-size: .8125rem;
    color: #5C6058;
}

.pagamento-pix__aguardando {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 0;
    font-size: .875rem;
    color: #5C6058;
}

#brick-cartao { min-height: 18rem; }

/* Cabeçalho da tela de pagamento (PIX/cartão): ícone redondo + título, no
   mesmo espírito visual das opções de pagamento da etapa anterior — pedido
   do usuário pra ficar "mais bonito e diagramado" (2026-08-07). */
.pagamento-cabecalho { display: flex; gap: .875rem; align-items: flex-start; margin-bottom: 1rem; }
.pagamento-cabecalho__icone {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 999px;
    background: #FBECCF;
    color: #41442F;
}
.pagamento-cabecalho__icone svg { width: 1.375rem; height: 1.375rem; }
.pagamento-cabecalho .reserva__titulo { margin-bottom: .25rem; }

/* Mesma moldura de cartão usada em `.reserva`, pra o QR do PIX e o Brick do
   cartão pararem de flutuar soltos na coluna. */
.pagamento-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
}

.pagamento-voltar {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(65, 68, 47, .12);
}

/* Erro e sucesso do pagamento (PIX e cartão): caixa colorida com ícone, não
   texto pequeno perdido no meio da tela — "sua reserva expirou" já passou
   despercebido assim (relatado pelo usuário, 2026-08-07). Mesma paleta do
   `.alerta` do topo do site, só que encaixada dentro do cartão em vez de
   ocupar a largura toda. */
.aviso-pagamento {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-top: .875rem;
    padding: .875rem 1rem;
    border-radius: 10px;
    font: 600 .9375rem/1.4 "Inter", sans-serif;
}
.aviso-pagamento[hidden] { display: none; }
.aviso-pagamento svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .0625rem; }

.aviso-pagamento--erro { background: #fdecec; color: #7f1d1d; }
.aviso-pagamento--sucesso { background: #e8f5ec; color: #14532d; }

/* ================================================= painel do cliente */
/* Layout próprio de /minha-conta e afins (`layouts/conta.php`), fora do
   cabeçalho/rodapé do site — pedido do usuário pra parecer uma "tela
   completa gerenciada", no MESMO padrão visual do /admin (barra clara,
   texto escuro, destaque em verde claro) — não uma reinterpretação
   escura. Prefixo `.painel` só pra não confundir com `.lateral`/`.area`
   do admin.css (arquivos diferentes, mesma linguagem visual). */

.painel {
    display: flex;
    min-height: 100vh;
    background: #F7F5F0;
    font-family: "Inter", system-ui, sans-serif;
    color: #0E1117;
}

.painel__lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 16rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid rgba(65, 68, 47, .15);
    padding: 1rem .875rem;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 40;
    overflow-y: auto;
}
body.painel-menu-aberto .painel__lateral { transform: translateX(0); }
body.painel-menu-aberto::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(14, 17, 23, .45);
    z-index: 30;
}

.painel__marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #0E1117;
    text-decoration: none;
    padding: .375rem .375rem 1rem;
}
/* Tamanho igual ao da logo no cabeçalho do site público (127×43px reais,
   medido) — antes era menor (28px de altura), pedido do usuário
   2026-08-11 pra bater com o "padrão" usado no resto do site. */
.painel__logo { display: block; max-height: 2.75rem; max-width: 9rem; width: auto; }

.painel__nav { display: flex; flex-direction: column; gap: .125rem; }

.painel__item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: 8px;
    color: #0E1117;
    text-decoration: none;
    font-size: .875rem;
}
.painel__item .ico { color: #767566; }
.painel__item:hover { background: #F1EEE7; }
.painel__item.is-atual { background: #F1EEE7; color: #41442F; font-weight: 600; }
.painel__item.is-atual .ico { color: #41442F; }
.painel__item span:first-of-type { flex: 1; }

.painel__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    border-radius: 999px;
    background: #DE9232;
    color: #23150A;
    font-size: .75rem;
    font-weight: 700;
}

.painel__nova {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: .625rem;
    padding: .625rem .625rem;
    border-radius: 8px;
    background: #DE9232;
    color: #23150A;
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
}
.painel__nova:hover { background: #c87e24; }

.painel__rodape { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(65, 68, 47, .15); }

.painel__usuario { display: flex; align-items: center; gap: .625rem; padding: 0 .5rem .75rem; }
.painel__avatar {
    width: 2.25rem; height: 2.25rem; flex: none;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #F1EEE7;
    color: #41442F; font-weight: 700; font-size: .8125rem;
    object-fit: cover;
}
.painel__usuario strong { display: block; color: #0E1117; font-size: .875rem; }
.painel__usuario small { display: block; color: #767566; font-size: .75rem; }

/* Upload de foto de perfil, em "Meus dados" (2026-08-11). */
.campo-avatar__linha { display: flex; align-items: center; gap: 1rem; }
.campo-avatar__preview {
    width: 4.5rem; height: 4.5rem; flex: none;
    border-radius: 999px;
    object-fit: cover;
    background: #F1EEE7;
}
.campo-avatar__preview--iniciais {
    display: flex; align-items: center; justify-content: center;
    color: #41442F; font-weight: 700; font-size: 1.375rem;
}

.painel__area { flex: 1; min-width: 0; }

.painel__topo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid rgba(65, 68, 47, .12);
}
.painel__titulo { flex: 1; margin: 0; font: 700 1.125rem/1.2 "Contrallto", Georgia, serif; color: #0E1117; }
.painel__voltar-site {
    display: flex; align-items: center; gap: .375rem;
    color: #767566; text-decoration: none; font-size: .875rem;
}
.painel__voltar-site:hover { color: #41442F; }

.painel__abrir { display: inline-flex; }

.painel__conteudo { padding: clamp(1.25rem, 3vw, 2rem); }
.painel__conteudo > * + * { margin-top: 1rem; }

/* Formulário de "Meus dados"/"Senha" (2026-08-10): sem isto o <form
   class="reserva"> esticava até a largura toda de `.painel__area` — numa
   tela larga isso deixava cada campo enorme (largura, não altura, mas lia
   como "campo grande demais"). Escopado só a esta página: `.painel__area`
   também hospeda listas de reserva e cards que devem continuar largura
   cheia, então o limite não pode ser em `.painel__conteudo .reserva`
   genérico.
   `margin-inline: auto` CENTRALIZA o bloco — sem isso ele ficava colado na
   borda esquerda e sobrava um vão vazio enorme só do lado direito em tela
   larga (reportado pelo usuário: "70% de espaço em branco de tela
   lateral"), o que lia como layout quebrado, não como "formulário
   compacto de propósito". */
.painel__formulario { max-width: 34rem; margin-inline: auto; }

/* Duas colunas em "Meus dados" quando existe aviso de divergência
   (2026-08-11, pedido do usuário — antes o aviso ficava empilhado ACIMA
   do formulário). `min-width:62em` é o mesmo ponto em que
   `.painel__lateral` vira barra fixa (ver `@media (min-width:62em)` mais
   abaixo) — antes disso a tela já está em "modo mobile", então o aviso
   continua empilhado, só que mais leve (ver `.reserva--aviso` acima).
   Sem aviso, `.painel-dados` só tem UM filho e nada muda visualmente. */
.painel-dados { display: flex; flex-direction: column; gap: 1.25rem; }

@media (min-width: 62em) {
    .painel-dados--com-aviso {
        display: grid;
        grid-template-columns: minmax(0, 34rem) 1fr;
        align-items: start;
        gap: 1.75rem;
    }
    .painel-dados--com-aviso .painel__formulario { margin-inline: 0; order: 1; }
    .painel-dados--com-aviso .reserva--aviso { order: 2; }
}

/* Abas (2026-08-10, pedido do usuário: "fácil e dinâmico" no mobile) —
   mesmo componente do admin (`admin.css`/`admin.js`, chale-form em abas),
   portado pros tokens e fonte do site público (Gantari, o padrão de botão
   já unificado). Sem JS, nenhum `[data-aba-painel]` tem `hidden` estático
   — os formulários ficam empilhados e continuam funcionando (ver `app.js`
   e o comentário em `dados.php`). */
.abas__navegacao {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    padding: .25rem;
    background: #F7F5F0;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    overflow-x: auto;
}
.abas__botao {
    flex: none;
    padding: .5rem .875rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: 500 .875rem/1 "Gantari", "Inter", system-ui, sans-serif;
    color: #5C6058;
    white-space: nowrap;
    cursor: pointer;
}
.abas__botao:hover { background: #fff; color: #0E1117; }
.abas__botao:focus-visible { outline: 2px solid #41442F; outline-offset: 2px; }
.abas__botao[aria-selected="true"] { background: #41442F; color: #fff; }

.painel__estatisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .875rem; margin-top: 1rem; }
.painel__estatistica {
    background: #fff;
    border: 1px solid rgba(65, 68, 47, .15);
    border-radius: 10px;
    padding: 1rem 1.125rem;
    text-decoration: none;
    color: inherit;
}
.painel__estatistica strong { display: block; font-size: 1.5rem; color: #41442F; }
.painel__estatistica span { font-size: .8125rem; color: #767566; }

.painel__filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.painel__filtro {
    padding: .5rem .875rem;
    border-radius: 999px;
    background: #F1EEE7;
    color: #5C6058;
    text-decoration: none;
    font-size: .875rem;
}
.painel__filtro:hover { background: #e7e2d6; }
.painel__filtro.is-ativo { background: #41442F; color: #fff; }

.painel__mensagem-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}
.painel__mensagem-item p { margin: 0; }
.painel__mensagem-item .reserva__nota {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32rem;
}

@media (min-width: 62em) {
    .painel__lateral { position: sticky; top: 0; height: 100vh; transform: none; }
    body.painel-menu-aberto::after { display: none; }
    .painel__abrir { display: none; }
}

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

/* ------------------------------------------ comprovante de reserva (impressão) */
/* Reescrito em 2026-08-10: a versão antiga tentava consertar a TELA para o
   papel (escondia botão, forçava os `<details>` abertos) e ainda saía
   quebrada — sem a logo (o cabeçalho do site é escondido de propósito, pra
   não imprimir o menu inteiro), com a URL crua atrás de cada botão de
   WhatsApp/e-mail, e a caixa de mensagens aparecendo fechada e vazia.
   A URL crua vem do `reset.css` do tema (`a[href]:after{content:" ("
   attr(href) ")"}`, herança do HTML5 Boilerplate) — sem essa regra ela some
   sozinha na tela, só aparecia na impressão.

   Em vez de remendar a tela, `.voucher-impressao` é um comprovante PRÓPRIO:
   fica oculto sempre, e é a ÚNICA coisa visível quando a página é impressa.
   Ver a marcação em `views/reserva.php`. */

.voucher-impressao { display: none; }

@media print {
    @page { margin: 1.6cm; }

    /* Vale pro site inteiro: sem isto, qualquer link vira "Texto (url
       enorme)" na impressão — é o que causava os "textos aleatórios
       quebrados" que o usuário reportou. */
    a[href]::after, abbr[title]::after { content: "" !important; }

    body > *:not(#conteudo) { display: none !important; }
    #conteudo > *:not(.voucher-impressao) { display: none !important; }

    .voucher-impressao {
        display: block;
        max-width: 46rem;
        margin: 0 auto;
        color: #16181D !important;
        font-family: "Inter", system-ui, sans-serif;
        font-size: .9375rem;
        line-height: 1.5;
    }

    .voucher__marca {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #41442F !important;
    }
    .voucher__logo { height: 2.75rem; width: auto; }
    .voucher__marca-texto {
        font: 400 1.5rem/1 "Contrallto", Georgia, serif;
        text-transform: lowercase;
        color: #41442F !important;
    }

    .voucher__titulo {
        margin: 1.5rem 0 .25rem;
        font: 400 1.75rem/1.15 "Contrallto", Georgia, serif;
        color: #16181D !important;
    }

    .voucher__codigo { margin: 0 0 1.25rem; font-size: .9375rem; color: #5C6058 !important; }
    .voucher__codigo strong { color: #16181D !important; letter-spacing: .02em; }

    .voucher__status {
        display: inline-block;
        margin-left: .5rem;
        padding: .125rem .625rem;
        border: 1px solid currentColor !important;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
    }
    .voucher__status--ok         { color: #14532d !important; }
    .voucher__status--aguardando { color: #6b4a12 !important; }
    .voucher__status--erro       { color: #7f1d1d !important; }

    .voucher__chale {
        margin: 0 0 1rem;
        font: 400 1.25rem/1.3 "Contrallto", Georgia, serif;
        color: #16181D !important;
    }

    .voucher__grade {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .875rem 1.5rem;
        margin: 0 0 1.5rem;
        padding: 1rem 0;
        border-top: 1px solid #C4C1B4 !important;
        border-bottom: 1px solid #C4C1B4 !important;
    }
    .voucher__grade dt {
        margin: 0 0 .125rem;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #767566 !important;
    }
    .voucher__grade dd { margin: 0; font-weight: 600; }
    .voucher__grade dd small { display: block; font-weight: 400; color: #5C6058 !important; }
    .voucher__grade--larga { grid-column: 1 / -1; }

    .voucher__tabela { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; }
    .voucher__tabela th, .voucher__tabela td {
        padding: .5rem 0;
        border-bottom: 1px solid #E4E1D6 !important;
        text-align: left;
        font-weight: 400;
    }
    .voucher__tabela td:last-child, .voucher__tabela th:last-child { text-align: right; }
    .voucher__tabela tfoot th, .voucher__tabela tfoot td {
        border-top: 2px solid #41442F !important;
        border-bottom: 0;
        padding-top: .625rem;
        font-weight: 700;
        font-size: 1.0625rem;
    }
    /* Data do grupo, embaixo de "R$ 400,00 × 6 diárias" — ver `agrupar_diarias()`. */
    .voucher__tabela small { display: block; font-weight: 400; color: #767566 !important; }

    /* "Pago em Nx de R$X", logo abaixo da tabela de diárias. */
    .voucher__parcelas {
        margin: -1rem 0 1.5rem;
        font-size: .8125rem;
        color: #5C6058 !important;
        text-align: right;
    }

    .voucher__obs {
        margin: 0 0 1.5rem;
        padding: .75rem 1rem;
        border-left: 3px solid #DE9232 !important;
    }

    .voucher__aviso {
        margin: 0 0 1.5rem;
        padding: .75rem 1rem;
        border: 1px solid #DE9232 !important;
        border-radius: 4px;
    }

    .voucher__contato {
        margin: 0 0 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #C4C1B4 !important;
    }
    .voucher__contato h2 {
        margin: 0 0 .5rem;
        font: 700 .8125rem/1 "Inter", sans-serif;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #767566 !important;
    }
    .voucher__contato p { margin: 0 0 .25rem; }

    .voucher__rodape {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid #C4C1B4 !important;
        font-size: .75rem;
        color: #767566 !important;
    }
    .voucher__rodape p { margin: 0 0 .25rem; }
    .voucher__url { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; }
}

/* ---------------------------------------------- avaliações (2026-08-11) */

/* Estrelas CLICÁVEIS do formulário (`/reserva/{codigo}`, "Como foi sua
   estadia?"). Truque clássico só-CSS: os <input>/<label> vêm no HTML na
   ordem 5,4,3,2,1 e `flex-direction: row-reverse` deixa a leitura visual
   1→5 da esquerda pra direita; passar o mouse ou marcar a estrela N
   acende ela e todas as que vêm DEPOIS dela no HTML (N-1, N-2… até 1),
   que são visualmente as de valor menor, à esquerda. */
.estrelas-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .25rem;
    margin-top: .25rem;
}
.estrelas-input input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.estrelas-input label {
    cursor: pointer;
    color: #D8D4C4;
    transition: color .15s ease;
}
.estrelas-input label .icone { width: 1.875rem; height: 1.875rem; }
.estrelas-input input:checked ~ label,
.estrelas-input label:hover,
.estrelas-input label:hover ~ label {
    color: #DE9232;
}
.estrelas-input input:focus-visible + label {
    outline: 2px solid #DE9232;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Estrelas SÓ PRA MOSTRAR — avaliação já enviada (`/reserva/{codigo}`) e
   cards da página do chalé. Mesmas cores da versão clicável, sem interação. */
.estrelas-exibir { display: inline-flex; gap: .125rem; }
.estrelas-exibir__estrela { width: 1.125rem; height: 1.125rem; color: #D8D4C4; }
.estrelas-exibir__estrela--cheia { color: #DE9232; }

/* Status da avaliação já enviada pelo hóspede — mesmos tons de
   `.reserva-resumo__status--*`, pra não inventar paleta nova. */
.avaliacao-status { margin-top: .5rem; }
.avaliacao-status__legenda {
    margin: .5rem 0 0;
    font-size: .875rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    display: inline-block;
}
.avaliacao-status--pendente .avaliacao-status__legenda  { background: #FBECCF; color: #6b4a12; }
.avaliacao-status--aprovada .avaliacao-status__legenda  { background: #e8f5ec; color: #14532d; }
.avaliacao-status--rejeitada .avaliacao-status__legenda { background: #fdecec; color: #7f1d1d; }

/* Grade pública de avaliações aprovadas, no fim da página do chalé
   (`ChaleController::avaliacoes()`, anexada DEPOIS do `$html` portado —
   não é marcador dentro do template do Elementor).
   `font-family` própria é NECESSÁRIA aqui (achado pelo usuário, 2026-08-11,
   comparando um preview local): como a seção fica FORA do wrapper
   `.elementor-…`, ela não herda a tipografia do kit portado — sem isto, o
   texto cai na pilha genérica do sistema (`-apple-system, Segoe UI…`), a
   MESMA fonte pra qualquer elemento solto fora de um widget do Elementor,
   confirmado ao vivo com `getComputedStyle` num `<p>` de teste anexado
   direto no `<body>` de produção. Título mantém "Contrallto" (mesma serifa
   de `.reserva__titulo`), o resto usa "Inter" — o padrão de corpo de texto
   de todo componente próprio do site (`.reserva`, `.campo` etc). */
.avaliacoes-chale {
    background: #F7F5F0;
    font-family: "Inter", system-ui, sans-serif;
}
.avaliacoes-chale__titulo {
    margin: 0 0 .375rem;
    font: 700 1.75rem/1.25 "Contrallto", "Contralto", serif;
    color: #23150A;
}
.avaliacoes-chale__resumo { margin: 0 0 1.75rem; color: #5C6058; }
.avaliacoes-chale__resumo strong { color: #23150A; font-size: 1.125rem; }

.avaliacoes-chale__grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 48em) {
    .avaliacoes-chale__grade { grid-template-columns: 1fr 1fr; }
}

.avaliacao-card {
    background: #fff;
    border: 1px solid #E4E1D6;
    border-radius: 12px;
    padding: 1.25rem;
}
.avaliacao-card__cabecalho {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: .75rem;
}
.avaliacao-card__foto {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: 999px;
    object-fit: cover;
    background: #F1EEE7;
}
.avaliacao-card__foto--iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #41442F;
}
.avaliacao-card__nome { margin: 0 0 .25rem; font-weight: 700; }
.avaliacao-card__comentario { margin: 0 0 .75rem; line-height: 1.6; color: #3C3D33; }
.avaliacao-card__data { margin: 0; font-size: .8125rem; color: #767566; }

/* -------------------------------------- bloco de contato (2026-08-13) */
/* Componente NOVO do sistema (`parciais/secoes/contato.php`, `tipo='contato'`
   dos blocos do CMS). Substituiu as duas seções portadas do Elementor que
   formavam a `/contato` — exceção autorizada pelo usuário, só para essa
   página, porque o formulário de lá era MORTO: sem `action`, dependia do JS
   do Elementor Pro e devolvia HTTP 405 no site novo.

   TODAS as classes daqui são nossas. Nenhuma regra toca `.e-con`,
   `.elementor-element` ou `.elementor-widget` — a proibição do projeto
   continua valendo integralmente.

   `font-family` explícita pelo mesmo motivo já documentado em
   `.avaliacoes-chale`: componente próprio não herda a tipografia do kit
   portado de forma confiável, e sem isto o texto cai na pilha genérica do
   sistema. Campos e botões vêm de `.reserva`/`.campo`/`.btn`, que já
   existem — nada de estilo novo de input aqui. */

.contato { font-family: "Inter", system-ui, sans-serif; }

/* Uma coluna no celular; a partir de 62em o formulário vai para o lado.
   `align-items: start` impede que o cartão do formulário estique até a
   altura da coluna de texto quando esta for mais alta. */
.contato__grade {
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 62em) {
    .contato__grade {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
        gap: 3rem;
    }
}

.contato__titulo {
    margin: 0 0 .75rem;
    font: 400 clamp(2rem, 4.5vw, 2.9rem)/1.1 "Contrallto", Georgia, serif;
    color: #23150A;
}

.contato__lead {
    margin: 0 0 2rem;
    max-width: 34em;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #5C6058;
}

/* ------------------------------------------------------ canais diretos */
/* Cartões de telefone/WhatsApp, e-mail e endereço. Cada um só existe quando
   o dado correspondente está preenchido em /admin/seo — a grade `auto-fit`
   se reacomoda sozinha com um, dois ou três. */
.contato-canais {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.canal {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    background: #fff;
    border: 1px solid #E4E1D6;
    border-radius: 12px;
    /* Movimento discreto: o cartão inteiro sobe um fio ao passar o mouse.
       Quem pediu menos movimento não vê nada disso — o bloco global de
       `prefers-reduced-motion` (linha ~2848) zera a duração com `!important`,
       então vence mesmo estando ANTES destas regras no arquivo. */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.canal:hover {
    transform: translateY(-2px);
    border-color: #D8D4C4;
    box-shadow: 0 8px 20px rgba(35, 21, 10, .07);
}

.canal__icone {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    margin-top: .125rem;
    color: #DE9232;
}

.canal__corpo { min-width: 0; }

.canal__rotulo {
    margin: 0 0 .25rem;
    font: 400 .75rem/1.3 "Gantari", "Inter", system-ui, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A8F84;
}

.canal__valor {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.45;
    font-weight: 600;
    color: #23150A;
    text-decoration: none;
}
a.canal__valor:hover { color: #41442F; text-decoration: underline; }

/* Endereço não é link: peso normal, senão a linha inteira grita mais que o
   telefone, que é a ação principal do cartão vizinho. */
.canal__valor--texto { font-weight: 400; font-size: .9375rem; color: #3C3D33; }

/* E-mail longo não pode estourar a largura do cartão no celular. */
.canal__valor--quebra { overflow-wrap: anywhere; }

.canal__extra {
    display: inline-block;
    margin-top: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: #41442F;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.canal__extra:hover { color: #DE9232; }

/* ------------------------------------------------ formulário de contato */
/* Herda cartão, campos e espaçamento de `.reserva` (checkout). Só o que é
   específico daqui fica abaixo. */
.contato__form { padding: 1.5rem 1.25rem; }
.contato__form .reserva__titulo { margin-bottom: .25rem; }

.contato textarea.contato__mensagem { min-height: 8.5rem; }

/* Armadilha para robô (honeypot). `display: none` de propósito: campo
   escondido só por `position` continua sendo lido por leitor de tela e
   navegável por teclado, o que atrapalharia quem preenche de verdade —
   e um robô simples preenche `<input type="text">` sem olhar o estilo.
   Ver `ContatoController::enviar()`. */
.campo-armadilha { display: none; }

/* -------------------------------------------- mapa da /contato (2026-08-15) */
/* Fecha a página, abaixo das duas colunas. Substituiu a seção 501 (mapa
   portado do Elementor), que apontava para uma busca genérica com zoom 10 e
   ainda por cima era bloqueada pela CSP. A moldura repete o cartão de
   `.canal` — mesma borda, mesmo raio — para o mapa entrar como parte do
   conjunto, não como um bloco estranho colado no fim. */
.contato-mapa { margin-top: 2.5rem; }

.contato-mapa__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

/* O rótulo herda `.canal__rotulo` no HTML; aqui só tira a margem que ele
   carrega de dentro do cartão. */
.contato-mapa__topo .canal__rotulo { margin: 0; }

.contato-mapa__rota {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: #41442F;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.contato-mapa__rota:hover { color: #DE9232; }

/* O ícone vem com a classe `.canal__icone` (mesmo helper de SVG do bloco),
   que é de 1.5rem — grande demais ao lado de um texto de .875rem. */
.contato-mapa__rota .canal__icone {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
}

.contato-mapa__moldura {
    overflow: hidden;
    border: 1px solid #E4E1D6;
    border-radius: 12px;
    /* Fundo enquanto o iframe (lazy) não pintou: sem isto pisca branco puro,
       destoando do papel do resto da página. */
    background: #EFEDE6;
    box-shadow: 0 8px 20px rgba(35, 21, 10, .06);
}

/* Retrato no celular (mapa achatado não mostra referência nenhuma em volta),
   e vai abrindo conforme a tela cresce. `display:block` mata o vão de linha
   de base que o iframe herda de elemento em linha. */
.contato-mapa__moldura iframe {
    display: block;
    width: 100%;
    height: 20rem;
    border: 0;
}
@media (min-width: 48em) {
    .contato-mapa__moldura iframe { height: 24rem; }
}
@media (min-width: 62em) {
    .contato-mapa__moldura iframe { height: 27rem; }
}