/* ============================================================================
   A identidade do Hideaway Inns.

   As cores, as fontes e as texturas saem do site do cliente — nao foram
   escolhidas aqui. Verde #20433d de fundo, creme #f4edc3 no texto, laranja
   #ff6037 no que chama para agir. Sao as tres que aparecem centenas de vezes no
   CSS original; o resto e ruido de plugin.

   FONTES LOCAIS, e nao do Google. Kelson Sans nao existe la, e carregar duas
   das tres de fora deixaria a pagina com o texto certo e o titulo errado no
   primeiro segundo -- justamente no titulo, que e a marca.
   ============================================================================ */

@font-face {
    font-family: 'Kelson Sans';
    src: url('/fonts/KelsonSans-Bold.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

@font-face {
    font-family: 'Kelson Sans';
    src: url('/fonts/KelsonSans-Light.woff2') format('woff2');
    font-weight: 300; font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat-v23-latin-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-v20-latin-regular.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-v20-latin-600.woff2') format('woff2');
    font-weight: 600; font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-v20-latin-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

:root {
    --verde: #20433d;
    --verde-escuro: #17322e;
    --creme: #f4edc3;   /* medido no site real: rgb(244,237,195) */
    --laranja: #ff6037;
    --amarelo: #ffd64f;
    --cinza: #949494;

    --display: 'Kelson Sans', 'Arial Narrow', sans-serif;
    --script: 'Caveat', cursive;
    --texto: 'Manrope', system-ui, sans-serif;
}

body {
    background: var(--creme);
    color: var(--verde);
    font-family: var(--texto);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* O display e caixa alta e apertado: e o que da o ar de cartaz de parque
   nacional que a marca persegue. Em minusculas ele perde a cara. */
h1, h2, h3, .display-marca {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: .95;
    text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* O "olho" e manuscrito e laranja -- e a voz que fala com o hospede antes do
   titulo gritar. Em maiuscula ele viraria mais um titulo. */
.olho {
    font-family: var(--script);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    color: var(--laranja);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    line-height: 1.1;
}

/* ---------------------------------------------------------------------------
   Fundo verde com a textura de mapa.

   A textura vai por cima do verde com mistura, e nao como imagem opaca: assim
   o mesmo arquivo serve ao verde escuro e ao claro sem virar dois arquivos.
   --------------------------------------------------------------------------- */
.fundo-mapa {
    background-color: var(--verde);
    background-image: url('/marca/hideaways_map_texture.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: luminosity;
    color: var(--creme);
}

.fundo-mapa h1, .fundo-mapa h2, .fundo-mapa h3 { color: var(--creme); }

.fundo-verde { background: var(--verde); color: var(--creme); }
.fundo-creme { background: var(--creme); color: var(--verde); }

.fundo-papel {
    background-color: var(--creme);
    background-image: url('/marca/hideaway_paper_bg.jpg');
    background-size: cover;
}

/* ---------------------------------------------------------------------------
   Topo
   --------------------------------------------------------------------------- */
.topo {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    padding: 1.4rem 0;

    /* Estas tres linhas ANULAM o cabecalho da base (site.css), que e sticky, branco
       translucido e com borda. Nao basta trocar o position: o fundo branco continuava
       valendo porque aqui nao havia nada declarado para sobrescrever -- e o cabecalho
       ficava uma faixa clara empurrando o hero, em vez de flutuar sobre o mapa.
       No site do cliente o verde comeca no alto da pagina e o menu flutua por cima. */
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.topo .logo img { height: 74px; width: auto; }

/* A navegacao mora numa pilula creme sobre o verde. E o detalhe que mais
   identifica o topo do site -- sem ela, o menu vira barra de qualquer site. */
.nav-pilula {
    background: var(--creme);
    border-radius: 999px;
    padding: .55rem 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
}

.nav-pilula a {
    color: var(--verde);
    text-decoration: none;
    font-weight: 600;
    font-size: .97rem;
    white-space: nowrap;
}

.nav-pilula a:hover, .nav-pilula a.ativo { text-decoration: underline; text-underline-offset: 5px; }

/* ---------------------------------------------------------------------------
   Botoes
   --------------------------------------------------------------------------- */
.btn-marca {
    background: var(--laranja);
    color: var(--creme);
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.7rem;
    font-weight: 700;
    font-family: var(--texto);
    text-decoration: none;
    display: inline-block;
}

.btn-marca:hover { background: #e8502a; color: var(--creme); }

.btn-outline-marca {
    background: transparent;
    color: var(--creme);
    border: 2px solid var(--creme);
    border-radius: 999px;
    padding: .62rem 1.6rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-marca:hover { background: var(--creme); color: var(--verde); }

.fundo-creme .btn-outline-marca { color: var(--verde); border-color: var(--verde); }
.fundo-creme .btn-outline-marca:hover { background: var(--verde); color: var(--creme); }

/* ---------------------------------------------------------------------------
   Capa da home
   --------------------------------------------------------------------------- */
.capa-home {
    min-height: 100vh;
    padding: 11rem 0 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* O "HI" gigante e translucido atras do conteudo. Fica por baixo de tudo e
   nao recebe clique -- e marca d'agua, nao elemento. */
.marca-hi {
    position: absolute;
    left: -2vw; top: 52%;
    font-family: var(--display);
    font-size: clamp(9rem, 18vw, 20rem);
    color: var(--laranja);
    opacity: .9;
    line-height: .8;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.capa-home .container { position: relative; z-index: 3; }

/* O video numa forma organica, e nao num retangulo: e a assinatura visual da
   home do cliente. O raio assimetrico e o que a produz. */
/* A moldura do video do hero.

   MEDIDA no site do cliente, nao desenhada aqui: 936x449 (proporcao 2.08) com
   `border-radius: 250px` -- uma capsula larga e baixa, nao uma cupula. A versao
   anterior usava um raio organico (46%/26%) sobre 16/10, e era a divergencia mais
   visivel da home: a mesma cor, o mesmo video, e um formato que o cliente nao tem.

   O raio em PIXEL e nao em porcentagem importa: 250px sobre 449px de altura da o
   lado esquerdo e o direito perfeitamente semicirculares; em porcentagem, a forma
   mudaria junto com a largura da tela. */
.moldura-organica {
    border-radius: 250px;
    overflow: hidden;
    max-width: 936px;
    margin: 3.5rem auto 0;
    aspect-ratio: 936 / 449;
    background: var(--verde-escuro);
}

/* Abaixo da largura da capsula o raio fixo comeria o conteudo; acompanha a altura. */
@media (max-width: 1000px) {
    .moldura-organica { border-radius: 26%; }
}

.moldura-organica iframe,
.moldura-organica img,
.moldura-organica video { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   Faixas e cartoes
   --------------------------------------------------------------------------- */
.faixa { padding: 5.5rem 0; }
.faixa-curta { padding: 3.5rem 0; }

.texto { font-size: 1.06rem; max-width: 68ch; }

.cartao-unidade {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 1.4rem;
    overflow: hidden;
    background: var(--creme);
    height: 100%;
}

.cartao-unidade .foto { aspect-ratio: 4 / 3; overflow: hidden; }
.cartao-unidade .foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao-unidade .corpo { padding: 1.2rem 1.3rem 1.5rem; }
.cartao-unidade h3 { margin-bottom: .15rem; }

/* Amenidade: icone em cima, nome e frase embaixo. A coluna estreita e de
   proposito -- a frase tem de caber em duas linhas para a grade nao desalinhar. */
.amenidade { text-align: center; padding: 1.2rem .6rem; }
.amenidade img { width: 56px; height: 56px; object-fit: contain; margin-bottom: .8rem; }
.amenidade .nome { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; }
.amenidade p { font-size: .9rem; opacity: .85; margin: .3rem 0 0; }

.badge-breve {
    background: var(--amarelo);
    color: var(--verde);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-weight: 700;
    font-size: .8rem;
    display: inline-block;
}

.badge-breve-grande { font-size: 1rem; padding: .5rem 1.3rem; }

/* ---------------------------------------------------------------------------
   Rodape
   --------------------------------------------------------------------------- */
.rodape { background: var(--verde-escuro); color: var(--creme); padding: 4rem 0 2rem; }
.rodape a { color: var(--creme); text-decoration: none; opacity: .9; }
.rodape a:hover { text-decoration: underline; }
.titulo-rodape { font-family: var(--display); text-transform: uppercase; margin-bottom: .8rem; }

@media (max-width: 991px) {
    .capa-home { min-height: auto; padding: 8rem 0 3rem; }
    .topo { position: static; background: var(--verde); }
    .nav-pilula { flex-wrap: wrap; gap: 1rem; }
}

/* ---------------------------------------------------------------------------
   A esteira de fotos do fim da home

   Medidas do site do cliente: slides de 329x189, CANTOS RETOS (o radius e 0 --
   e o unico bloco da pagina que nao arredonda nada), faixa de 369px de altura.
   --------------------------------------------------------------------------- */
.faixa-fotos {
    overflow: hidden;
    padding: 90px 0;          /* (369 - 189) / 2, medido no original */
}

.trilho-fotos {
    display: flex;
    gap: 14px;
    width: max-content;

    /* A duracao acompanha a QUANTIDADE de fotos: com tempo fixo, dez fotos
       passariam voando e trinta arrastariam. Cinco segundos por foto mantem o
       ritmo igual, seja qual for o tamanho da galeria. */
    animation: esteira calc(var(--qtd, 10) * 5s) linear infinite;
}

.faixa-fotos:hover .trilho-fotos { animation-play-state: paused; }

.foto-trilho {
    flex: 0 0 auto;
    width: 329px;
    height: 189px;
    overflow: hidden;
    background: var(--verde-escuro);
}

.foto-trilho img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -50% e exatamente o fim da primeira copia da lista: no instante em que ela sai,
   a segunda esta no ponto de partida, e o salto nao aparece. */
@keyframes esteira { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .trilho-fotos { animation: none; }
    .faixa-fotos { overflow-x: auto; }
}

@media (max-width: 700px) {
    .faixa-fotos { padding: 40px 0; }
    .foto-trilho { width: 240px; height: 138px; }
}

/* ---------------------------------------------------------------------------
   "Make Hideaway Yours" -- as fotos que sangram pelas laterais

   Medidas do original (secao de 1425x982): a foto da esquerda entra em -308px e a
   da direita em 1113px, as duas a 180px do topo; a seta, a 390px. Em porcentagem
   para acompanhar a largura da tela, ja que o original foi medido em 1425.
   --------------------------------------------------------------------------- */
.secao-yours { position: relative; overflow: hidden; padding: 9rem 0; }
.secao-yours .container { position: relative; z-index: 2; }

.deco-yours { position: absolute; pointer-events: none; user-select: none; height: auto; }

.deco-esquerda { width: 621px; left: -21.6%; top: 18%; }
.deco-direita  { width: 558px; left: 78.1%;  top: 18%; }
.deco-seta     { width: 250px; left: 78.1%;  top: 40%; }

/* Abaixo de 1200px as fotos passam por cima do texto: a secao vira so o convite,
   que e o que ela precisa dizer. */
@media (max-width: 1200px) {
    .deco-yours { display: none; }
    .secao-yours { padding: 5rem 0; }
}

/* ---------------------------------------------------------------------------
   Rodape -- bloco da newsletter
   --------------------------------------------------------------------------- */
.olho-rodape {
    font-family: var(--script);
    color: var(--laranja);
    font-size: 1.5rem;
    margin: .2rem 0 .8rem;
}

.quadro-newsletter {
    width: 100%;
    max-width: 340px;
    height: 200px;
    border: 0;
    display: block;
}

/* ---------------------------------------------------------------------------
   Seletor de idioma

   Herdava o azul de link do Bootstrap e era a unica coisa fora da paleta no
   cabecalho -- sobre o verde, um azul berrante ao lado do botao laranja.
   --------------------------------------------------------------------------- */
/* SO o seletor de idioma. A primeira versao pegava `.topo .dropdown-toggle`, que
   tambem e o "Hideaway Hotel Locations" DENTRO da pilula creme -- e creme sobre creme
   sumiu com o item do menu. Alcance de seletor tem custo: `.topo .dropdown-toggle` sao
   duas classes e vence o `.nav-pilula a` (uma classe e um elemento) sem avisar. */
.topo .seletor-idioma > .dropdown-toggle {
    color: var(--creme);
    text-decoration: none;
    font-weight: 600;
}

.topo .seletor-idioma > .dropdown-toggle:hover { color: var(--amarelo); }

/* ---------------------------------------------------------------------------
   Capa das paginas internas

   Mais baixa que a da home (que tem o video): aqui e so o olho e o titulo sobre
   o mapa, como em "The Hideaway Way" do cliente.
   --------------------------------------------------------------------------- */
.capa-interna {
    padding: 14rem 0 7rem;   /* o topo flutua sobre ela: o espaco de cima conta o cabecalho */
    text-align: center;
}

.capa-interna h1 { color: var(--creme); }

/* Um paragrafo largo, mas nao infinito: acima de ~70 caracteres por linha o olho
   perde a volta ao trocar de linha. */
.texto-largo { max-width: 68ch; }

/* ---------------------------------------------------------------------------
   Cartao de pessoa (a equipe)
   --------------------------------------------------------------------------- */
.cartao-pessoa {
    background: var(--creme);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 351x480 no original -- retrato, nao quadrado. A proporcao fica no CSS e nao na
   imagem para a pagina nao pular conforme cada foto carrega. */
.cartao-pessoa img {
    width: 100%;
    aspect-ratio: 351 / 480;
    object-fit: cover;
    display: block;
}

.corpo-pessoa { padding: 1.4rem 1.3rem 1.6rem; color: var(--verde); }

.corpo-pessoa h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 1.25rem;
    margin: 0;
    color: var(--verde);
}

.corpo-pessoa .cargo {
    font-weight: 600;
    font-size: .92rem;
    opacity: .75;
    margin-bottom: .9rem;
}

.corpo-pessoa .favorito-titulo {
    font-family: var(--script);
    color: var(--laranja);
    font-size: 1.25rem;
    line-height: 1.1;
}

.corpo-pessoa .favorito { font-size: .93rem; margin: .35rem 0 0; }

/* ---------------------------------------------------------------------------
   Perguntas frequentes

   <details>/<summary> nativo: abre, fecha, responde ao teclado e ao leitor de tela
   sem uma linha de JS. O marcador padrao do navegador some e entra um "+" que vira
   "-" -- o mesmo gesto, desenhado.
   --------------------------------------------------------------------------- */
.pergunta {
    border-bottom: 1px solid rgba(32, 67, 61, .18);
    padding: 1.15rem 0;
}

.pergunta summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: 1.12rem;
    color: var(--verde);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.35;
}

.pergunta summary::-webkit-details-marker { display: none; }

.pergunta summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--laranja);
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.pergunta[open] summary::after { content: "\2212"; }   /* sinal de menos */

.pergunta p {
    margin: .9rem 0 0;
    padding-right: 2.5rem;
    font-size: 1rem;
    color: var(--verde);
    opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
    .pergunta summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Links dentro do conteudo

   O Bootstrap pinta todo <a> de azul, e o site nao tem azul em lugar nenhum. O
   telefone e o e-mail no cartao de contato da pagina da casa apareciam em azul
   berrante no meio do creme -- a unica cor fora da paleta na pagina inteira.
   --------------------------------------------------------------------------- */
.faixa a:not(.btn):not(.dropdown-item),
.capa a:not(.btn),
.rodape a:not(.btn) {
    color: var(--laranja);
    text-decoration: none;
}

.faixa a:not(.btn):not(.dropdown-item):hover,
.capa a:not(.btn):hover,
.rodape a:not(.btn):hover {
    color: var(--laranja);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Protecao do cabecalho sobre a capa

   O cabecalho flutua por cima da foto, e a logo e o menu sao claros. Sobre uma
   foto clara -- o interior de Lenox, por exemplo -- a logo sumia. Um veu escuro
   no alto da capa devolve o contraste sem escurecer a foto inteira.

   So nas capas COM foto: no fundo de mapa (verde) nao ha o que proteger.
   --------------------------------------------------------------------------- */
.capa { position: relative; }

.capa .capa-foto::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 190px;
    background: linear-gradient(to bottom, rgba(23, 50, 46, .62), rgba(23, 50, 46, 0));
    pointer-events: none;
}

.capa .capa-foto { position: relative; }

/* ---------------------------------------------------------------------------
   "Stay Tuned / For More Locations"
   --------------------------------------------------------------------------- */
.secao-espera { position: relative; overflow: hidden; }
.secao-espera .container { position: relative; z-index: 2; }

/* O pino desenhado do cliente, no canto. Decoracao: alt vazio e sem eventos. */
.pino-espera {
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    pointer-events: none;
    opacity: .95;
}

@media (max-width: 1100px) { .pino-espera { display: none; } }

.quadro-newsletter.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   O anel de foco do titulo.

   O <FocusOnNavigate Selector="h1"> poe o foco no titulo a cada navegacao --
   util para leitor de tela, e e por isso que ele fica. Mas o navegador desenha
   a moldura de foco em volta, e no celular isso virava um retangulo azul
   cercando "UNLOCK & UNWIND" e "LENOX".

   Tirar o anel SO do titulo, e nao global: em botao e link o anel e o que
   permite navegar por teclado, e apaga-lo ali seria trocar um defeito visual
   por um de acessibilidade.
   --------------------------------------------------------------------------- */
h1:focus, h1:focus-visible { outline: none; }

/* ---------------------------------------------------------------------------
   Menu do celular.

   Antes nao havia menu nenhum abaixo de 992px -- so o botao de reservar. Quem
   abria no telefone nao tinha como chegar nas unidades nem em "nosso jeito".
   --------------------------------------------------------------------------- */
.hamburguer {
    background: transparent; border: 0; color: var(--creme);
    font-size: 1.7rem; line-height: 1; padding: .2rem .4rem;
}

.menu-celular { background: var(--verde); color: var(--creme); width: min(86vw, 360px); }
.menu-celular .offcanvas-header { border-bottom: 1px solid rgba(250,247,238,.18); }
.menu-celular .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.menu-celular a { color: var(--creme); text-decoration: none; display: block; padding: .55rem 0; font-weight: 600; }
.menu-celular a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-celular .grupo { font-family: var(--display); text-transform: uppercase; font-size: .8rem; opacity: .65; margin: 1.2rem 0 .2rem; }

/* ---------------------------------------------------------------------------
   Capa: a marca d'agua e a forma do video

   O "HI" encosta no CANTO SUPERIOR ESQUERDO do video e o cobre em parte -- e
   assim no site do cliente. Centralizado ou atras do texto ele vira mancha.

   E a moldura do video e uma PILULA: cantos totalmente arredondados nos quatro
   lados. A forma assimetrica que eu tinha feito nao existe no original.
   --------------------------------------------------------------------------- */
.capa-home { text-align: center; padding-top: 9rem; }

.marca-hi {
    position: absolute;
    left: 2vw;
    bottom: 24%;
    font-family: var(--display);
    font-size: clamp(4.5rem, 9vw, 9rem);
    color: var(--laranja);
    line-height: .8;
    transform: rotate(-8deg);
    pointer-events: none;
    user-select: none;
    z-index: 4;
}

.moldura-organica {
    border-radius: 999px / 22%;
    max-width: 1040px;
    margin: 2.5rem auto 0;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------------------
   Titulo em duas vozes: a primeira linha em caixa alta, a segunda manuscrita.
   E o padrao do site inteiro ("START YOUR OWN / Story", "COMPLETELY DESIGNED /
   with You in Mind"), e escrever tudo numa voz so achata a pagina.
   --------------------------------------------------------------------------- */
.titulo-duplo { display: block; }
.titulo-duplo .linha-alta { display: block; }

.titulo-duplo .linha-script {
    display: block;
    font-family: var(--script);
    text-transform: none;
    color: var(--laranja);
    font-size: .62em;
    line-height: 1;
    margin-top: -.05em;
}

/* A moldura de papel em volta do bloco de texto, como no original. */
.caixa-papel {
    border: 2px solid var(--verde);
    border-radius: .3rem;
    padding: 2.6rem 1.6rem;
    max-width: 900px;
    margin: 0 auto;
}

.fundo-mapa .caixa-papel { border-color: var(--creme); }

/* ---------------------------------------------------------------------------
   Capa da pagina de unidade: foto inteira com o texto por cima.
   --------------------------------------------------------------------------- */
.capa-unidade {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--verde);
}

.capa-unidade .foto-fundo { position: absolute; inset: 0; }
.capa-unidade .foto-fundo img,
.capa-unidade .foto-fundo .moldura-vazia { width: 100%; height: 100%; object-fit: cover; }

/* O veu escurece a foto o suficiente para o texto creme ler em cima de
   qualquer imagem -- inclusive uma clara, que e onde legenda sobre foto falha. */
.capa-unidade::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(32,67,61,.55) 0%, rgba(32,67,61,.35) 45%, rgba(32,67,61,.8) 100%);
}

.capa-unidade .conteudo { position: relative; z-index: 2; color: var(--creme); padding: 7rem 1rem 9rem; }
.capa-unidade h1 { color: var(--creme); }

/* A tira de miniaturas no rodape da capa, com as setas redondas laranja. */
.tiras { position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 3; }
.tiras .faixa-miniaturas { display: flex; gap: .5rem; justify-content: center; align-items: center; }
.tiras .mini { width: 86px; height: 62px; border-radius: .5rem; overflow: hidden; border: 2px solid transparent; flex: none; }
.tiras .mini.ativa { border-color: var(--creme); }
.tiras .mini img { width: 100%; height: 100%; object-fit: cover; }

.seta-redonda {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--laranja); color: var(--creme);
    border: 0; display: inline-flex; align-items: center; justify-content: center;
    flex: none;
}

@media (max-width: 991px) {
    .topo { position: absolute; background: transparent; padding: .9rem 0; }
    .topo .logo img { height: 54px; }
    .capa-home { padding-top: 7rem; }
    .capa-unidade { min-height: 70vh; }
    .tiras .mini { width: 62px; height: 46px; }
}

/* ---------------------------------------------------------------------------
   Rodape: a marca e o contato no centro, acima das colunas.
   --------------------------------------------------------------------------- */
.marca-rodape { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(250,247,238,.16); }
.marca-rodape img { height: 96px; width: auto; }

.contato-rodape {
    display: flex; gap: 2.2rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.2rem; font-size: 1.05rem;
}

.olho-rodape { font-family: var(--script); color: var(--laranja); font-size: 1.5rem; margin: .2rem 0 .6rem; }
.lista-rodape { list-style: none; padding: 0; margin: 0; }
.lista-rodape li { padding: .22rem 0; }
.quadro-newsletter { width: 100%; height: 190px; border: 0; border-radius: .6rem; background: rgba(250,247,238,.06); }
.fim-rodape { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(250,247,238,.16); font-size: .85rem; opacity: .8; text-align: center; }

/* ---------------------------------------------------------------------------
   Carrossel de fotos na forma organica -- a secao do meio da home.

   As setas ficam SOBRE a foto e nao embaixo: no original elas invadem a imagem,
   e e isso que faz o bloco parecer um objeto e nao uma galeria de site.
   --------------------------------------------------------------------------- */
.carrossel { position: relative; max-width: 820px; margin: 0 auto; }

.carrossel .palco {
    border-radius: 999px / 20%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--verde-escuro);
}

.carrossel .palco img,
.carrossel .palco .moldura-vazia { width: 100%; height: 100%; object-fit: cover; }

.carrossel .seta-redonda { position: absolute; bottom: 6%; }
.carrossel .seta-esq { left: 12%; }
.carrossel .seta-dir { right: 12%; }

@media (max-width: 767px) {
    .marca-rodape img { height: 72px; }
    .contato-rodape { gap: .6rem; flex-direction: column; }
    .carrossel .seta-esq { left: 4%; }
    .carrossel .seta-dir { right: 4%; }
}

/* ---------------------------------------------------------------------------
   O cartao de busca da reserva.

   Faixa branca com as colunas separadas por filete, como no motor de reservas
   do cliente. Cada data e uma FOLHA DE CALENDARIO: barra laranja com o mes,
   corpo creme com o dia grande.

   O <input type="date"> fica por cima, transparente e do tamanho da folha: e
   ele que abre o seletor nativo do aparelho -- no celular esse seletor e melhor
   que qualquer calendario que eu desenhasse, e de graca.
   --------------------------------------------------------------------------- */
.cartao-busca {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 1.1fr 1.5fr;
    background: #fff;
    border-radius: .9rem;
    box-shadow: 0 18px 45px rgba(23,50,46,.18);
    overflow: hidden;
}

.cartao-busca > * { padding: 1.1rem 1.2rem; border-right: 1px solid #ececec; }
.cartao-busca > *:last-child { border-right: 0; }

.campo-data { position: relative; text-align: center; cursor: pointer; margin: 0; }
.campo-data .rotulo { display: block; font-size: .95rem; color: #4a4a4a; margin-bottom: .5rem; }
.campo-data .folha { display: block; width: 9.2rem; margin: 0 auto; border-radius: .5rem; overflow: hidden; }

.campo-data .mes {
    display: block; background: var(--laranja); color: #fff;
    font-weight: 600; font-size: 1rem; padding: .25rem 0;
}

.campo-data .dia {
    display: block; background: #fdecd2; color: #3b2a12;
    font-size: 2.9rem; font-weight: 700; line-height: 1.15;
}

/* A folha e um BOTAO: ela abre o calendario do proprio site.
   Ja foi um <input type="date"> invisivel por cima da folha, e no computador isso
   deixava a data intocavel -- o clique caia num campo que nao se ve e o que se
   digitava nao aparecia em lugar nenhum. */
button.campo-data { background: transparent; border: 0; padding: 0; display: block; width: 100%; }
button.campo-data:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

.campos-pessoas { display: flex; flex-direction: column; justify-content: center; gap: .1rem; }

.linha-pessoa {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .7rem 0; margin: 0; font-size: 1.02rem;
}

.linha-pessoa + .linha-pessoa { border-top: 1px solid #ececec; }
.linha-pessoa select { width: 4.6rem; }

.bloco-reservar { display: flex; flex-direction: column; justify-content: center; }
.chamada-direta { font-weight: 700; font-size: 1.12rem; text-align: center; margin-bottom: .8rem; }

.btn-verde {
    background: var(--verde); color: var(--creme); border: 0;
    border-radius: .5rem; padding: .8rem 1.4rem; font-weight: 700;
}

.btn-verde:hover { background: var(--verde-escuro); color: var(--creme); }
.btn-verde:disabled { opacity: .6; }

@media (max-width: 991px) {
    .cartao-busca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao-busca > * { border-right: 0; border-bottom: 1px solid #ececec; }
    .cartao-busca > *:nth-child(odd) { border-right: 1px solid #ececec; }
    .campos-pessoas, .bloco-reservar { grid-column: 1 / -1; border-right: 0 !important; }
    .campo-data .folha { width: 100%; max-width: 9.2rem; }
}

/* ---------------------------------------------------------------------------
   O cartao de um TIPO de quarto no passo 2 da reserva.

   A foto ocupa a largura toda e as setas ficam SOBRE ela, com as bolinhas no pe:
   e o desenho do motor que o cliente ja usa, e quem reserva reconhece.

   Nada de moldura organica aqui: a capsula arredondada e da marca institucional
   (home e paginas das casas). No fluxo de compra ela atrapalharia a comparacao,
   que e o que a pessoa esta fazendo nesta tela.
   --------------------------------------------------------------------------- */
.cartao-oferta {
    background: #fff; border-radius: .7rem; overflow: hidden;
    margin-bottom: 1.6rem; color: var(--verde);
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.vitrine-oferta { position: relative; background: var(--verde-escuro); }
.vitrine-oferta img, .vitrine-oferta .moldura-vazia { width: 100%; height: 100%; object-fit: cover; }

.vitrine-oferta .seta-redonda {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(20,20,20,.55); width: 52px; height: 52px;
}

.vitrine-oferta .seta-esq { left: .8rem; }
.vitrine-oferta .seta-dir { right: .8rem; }

.bolinhas {
    position: absolute; left: 0; right: 0; bottom: .8rem;
    display: flex; gap: .45rem; justify-content: center;
}

.bolinhas .bolinha {
    width: 11px; height: 11px; border-radius: 50%; padding: 0;
    border: 1px solid rgba(255,255,255,.85); background: transparent;
}

.bolinhas .bolinha.ativa { background: #fff; }

.corpo-oferta { padding: 1.3rem 1.4rem 1.6rem; }

.nome-oferta {
    font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem;
    /* Sem a caixa alta dos titulos da marca: aqui o nome e o do quarto como o
       hospede o le no motor de reservas, e nao um titulo institucional. */
    font-family: var(--texto); text-transform: none;
}
.nome-oferta .cabe { font-size: .95rem; font-weight: 600; opacity: .75; white-space: nowrap; }

.descricao-oferta { margin: 0 0 1.1rem; line-height: 1.55; }

.caixa-preco { border: 1px solid #e3e3e3; border-radius: .6rem; padding: 1.1rem 1.2rem; }
.preco-grande { font-size: 1.9rem; font-weight: 700; color: var(--laranja); line-height: 1.1; }
.apoio-preco { font-size: .9rem; opacity: .75; }

@media (max-width: 575px) {
    .vitrine-oferta .seta-redonda { width: 42px; height: 42px; }
    .preco-grande { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------------------
   O calendario da reserva.

   Cartao branco de cantos redondos, casas cinza-claras e as pontas do intervalo
   em verde -- o mesmo desenho do motor que o cliente usa hoje, para quem ja
   reservou uma vez reconhecer a tela.

   O passado sai RISCADO e nao some: um mes que comeca no dia 15 confunde; o dia
   riscado diz "existe, mas nao da".
   --------------------------------------------------------------------------- */
.calendario {
    background: #fff; border-radius: 1.2rem; padding: 1.2rem 1.1rem 1.1rem;
    color: var(--verde); box-shadow: 0 10px 30px rgba(0,0,0,.18);
    max-width: 480px; margin: 0 auto;
}

.cabeca-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.cabeca-mes .nome-mes { font-size: 1.35rem; font-weight: 600; text-transform: capitalize; }

.seta-mes {
    background: transparent; border: 0; color: var(--verde);
    font-size: 1.3rem; line-height: 1; padding: .2rem .5rem;
}

.seta-mes:disabled { opacity: .25; }

.grade-semana, .grade-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.grade-semana { margin-bottom: .35rem; }
.grade-semana .nome-dia { text-align: center; font-size: .92rem; opacity: .7; padding: .2rem 0; }

.casa-vazia { aspect-ratio: 1 / 1; }

.casa-dia {
    aspect-ratio: 1 / 1; border: 0; border-radius: .5rem;
    background: #f3f3f3; color: var(--verde);
    font-size: 1.02rem; display: flex; align-items: center; justify-content: center;
}

.casa-dia:hover:not(:disabled) { background: #e4e4e4; }

/* O riscado do passado, em CSS e nao em imagem: uma faixa repetida a 45 graus. */
.casa-dia.passado {
    color: #b9b9b9;
    background: repeating-linear-gradient(45deg, #f7f7f7, #f7f7f7 4px, #ededed 4px, #ededed 8px);
}

.casa-dia.meio { background: #dfe9e3; }

.casa-dia.ponta {
    background: var(--verde); color: var(--creme); font-weight: 700;
}

.btn-fechar-calendario {
    margin-top: 1rem; background: #fff; color: var(--verde);
    border: 1px solid #d8d8d8; border-radius: .5rem; padding: .5rem 1.4rem;
}

.faixa-preco {
    margin: 1.1rem -1.1rem 0; padding: 1.1rem 1.2rem;
    background: var(--laranja); color: #fff;
}

.faixa-preco .chamada-preco { font-size: 1.25rem; }
.faixa-preco .valor-preco { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.faixa-preco .valor-preco strong { font-size: 2.1rem; }
.faixa-preco .valor-preco span { font-size: 1rem; opacity: .95; }

.faixa-periodo {
    margin: 0 -1.1rem -1.1rem; padding: .9rem 1.2rem;
    background: #8a8a8a; color: #fff;
    border-radius: 0 0 1.2rem 1.2rem;
}

.faixa-periodo .rotulo-periodo { font-size: 1.02rem; }
.faixa-periodo .datas-periodo { font-weight: 700; margin-top: .25rem; }

/* O calendario COBRE o cartao de busca enquanto esta aberto.
   Sobrepor e nao empurrar: a pagina nao pula quando ele abre e fecha, e a pessoa
   nao escolhe a data com o cartao inteiro competindo ao lado. */
.area-busca { position: relative; }

.capa-calendario {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; z-index: 20;
}

/* Com o calendario aberto, o cartao fica INVISIVEL mas continua ocupando o lugar:
   escondido de vez, a pagina encolheria e voltaria a crescer a cada abertura. */
.area-busca.com-calendario .cartao-busca { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Passos 3 e 4 da reserva: os dados e a confirmacao.

   Mesmo material do passo 2 -- cartao branco de cantos redondos sobre o creme --
   para a reserva inteira parecer um fluxo so, e nao tres telas de projetos
   diferentes emendadas.
   --------------------------------------------------------------------------- */
.btn-voltar {
    background: transparent; border: 0; padding: 0;
    color: var(--verde); font-weight: 600; text-decoration: underline;
}

.cartao-formulario, .cartao-resumo, .cartao-pronto {
    background: #fff; border-radius: .7rem; color: var(--verde);
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.cartao-formulario { padding: 1.4rem; }
.cartao-resumo { overflow: hidden; }

.cartao-formulario .form-label { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }

.cartao-formulario .form-control {
    border: 1px solid #dcdcdc; border-radius: .45rem; padding: .55rem .7rem;
}

.cartao-formulario .form-control:focus {
    border-color: var(--laranja); box-shadow: 0 0 0 .15rem rgba(255,96,55,.2);
}

.foto-resumo img, .foto-resumo .moldura-vazia { width: 100%; height: 100%; object-fit: cover; }
.corpo-resumo { padding: 1.2rem 1.3rem 1.4rem; }

/* O resumo redefine a linha do site.css: ali ela e cinza sobre papel claro, e aqui
   precisa da tinta verde da marca sobre branco. */
.cartao-resumo .linha-resumo {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4rem 0; font-size: .95rem;
    border-bottom: 1px solid #f0f0f0;
}

.cartao-resumo .linha-resumo:last-of-type { border-bottom: 0; }
.cartao-resumo .linha-resumo span { opacity: .75; }

.cartao-pronto { padding: 2.4rem 1.6rem; text-align: center; max-width: 640px; margin: 0 auto; }

/* O marca-ok do site.css usa a cor do template antigo; aqui ele e verde da marca. */
.cartao-pronto .marca-ok {
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    background: var(--verde); color: var(--creme);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

.cartao-pronto .faixa-periodo { border-radius: .6rem; margin: 0; text-align: left; }

.aviso-pagamento {
    background: #fdecd2; color: #3b2a12;
    border-radius: .6rem; padding: .9rem 1.1rem; text-align: left;
}