/* ==========================================================================
   MOBILE — ajustes de responsividade (carregado depois de style.css)

   O layout desktop vive em style.css. Aqui ficam só regras para telas menores,
   organizadas por página/seção. Princípios:
   - seções em coluna única, na ordem de leitura (título → texto → imagem);
   - sem margens negativas/posições absolutas do desktop que empurram conteúdo para fora da tela;
   - gutter lateral de 20px; imagens soltas com max-width: 100% (nunca ampliadas);
   - texto mínimo ~12px e alvos de toque de ~40px.
   ========================================================================== */

/* ==========================================
   GLOBAL
========================================== */
@media (max-width: 767.98px) {

    /* Menu hambúrguer: área de toque maior sem mudar o visual */
    .hero__nav-hamburger,
    .page-header__hamburger {
        padding: 12px;
        margin: -12px;
    }

    /* CTAs com texto longo: quebram linha em vez de vazar da tela */
    .momentos__cta,
    .aguas-cta__btn,
    .vac-umclube__btn,
    .jvc__btn,
    .complexo__btn,
    .dm-panel__btn,
    .casa-imperial__btn,
    .imperial-destino__cta {
        white-space: normal;
        min-width: 0;
        max-width: 100%;
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    .momentos__cta {
        width: 100%;
        padding: 14px 20px;
        font-size: 0.8rem;
    }

    .momentos .momentos__historia {
        width: 100%;
    }

    /* Botões pequenos demais para leitura no celular */
    .exp-card__btn,
    .descubra-exp__btn,
    .eventos__btn,
    .experiencias__cta,
    .natureza__btn,
    .search-widget__label,
    .inst-btn,
    .inst-form__arquivo-btn,
    .inst-texto__sumario-titulo,
    .estrutura__card-capacity,
    .estrutura__card-specs li,
    .exp-card__btn-ver,
    .exp-card__btn-voltar,
    .exp-card__tag span {
        font-size: 0.75rem;
    }

    /* Footer: contatos e redes com área de toque confortável */
    .footer__col--contact a {
        display: inline-block;
        padding: 6px 0;
    }

    .footer__social {
        gap: 8px;
    }

    .footer__social-link {
        padding: 8px;
        margin: -8px 0;
    }

    .footer__nav a {
        padding: 4px 0;
    }
}

/* ==========================================
   HOME
========================================== */
@media (max-width: 900px) {
    /* Em coluna (≤900px), o contêiner encolhia para a largura da trilha inteira (~6000px) e ficava centralizado */
    .experiencias__slider-wrap {
        align-self: stretch;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* O Melhor de Dois Mundos: Lagos em cima, Jardins embaixo, título centralizado na emenda entre as fotos.
       Grid de 2 linhas: cada hotspot ocupa a linha da sua foto; título e overlay cobrem as duas. */
    .dois-mundos {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }

    .dois-mundos__bg-half {
        grid-column: 1;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .dois-mundos__bg-half:nth-child(1) { grid-row: 1; }
    .dois-mundos__bg-half:nth-child(2) { grid-row: 2; }

    .dois-mundos__overlay {
        position: static;
        grid-row: 1 / 3;
        grid-column: 1;
    }

    .dois-mundos__text {
        grid-row: 1 / 3;
        grid-column: 1;
        align-self: center;
        justify-self: center;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .dois-mundos__hotspot {
        position: relative;
        grid-column: 1;
        width: auto;
    }

    /* Sem hover no toque: nome do resort sempre visível, com degradê leve atrás.
       Lagos: nome no topo da foto (longe do título); Jardins: nome embaixo. */
    .dois-mundos__hotspot--left,
    .dois-mundos__hotspot--left:hover {
        grid-row: 1;
        align-items: flex-start;
        padding: 20px 0 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
    }

    .dois-mundos__hotspot--right,
    .dois-mundos__hotspot--right:hover {
        grid-row: 2;
        padding-bottom: 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
    }

    .dois-mundos__hs-label {
        opacity: 1;
        transform: none;
    }

    /* Casa Jurema Imperial: botão em uma linha só */
    .casa-imperial__btn {
        white-space: nowrap;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        padding: 12px 16px;
    }

    .natureza {
        padding: 72px 0;
    }

    .natureza__caption-title {
        white-space: normal;   /* em tela estreita pode quebrar para nao vazar */
    }

    .natureza__right {
        padding: 40px 0 0;
    }

    .casa-teaser__text {
        font-size: 1.15rem;
        letter-spacing: 0.14em;
    }

    /* Slider de experiências: 1 card inteiro + espiada do próximo, com swipe (main.js) */
    .experiencias {
        padding: 64px 0;
    }

    .experiencias__inner {
        gap: 32px;
        max-width: 100%;
        width: 100%;
        padding-left: 20px;
    }

    .experiencias__left {
        padding-right: 20px;
    }

    .experiencias__track .exp-card {
        flex: 0 0 min(300px, calc(100vw - 72px));
    }

    .experiencias__track {
        touch-action: pan-y;
    }
}

/* ==========================================
   HISTÓRIA
========================================== */
@media (max-width: 767.98px) {
    .historia-hero {
        height: auto;
        min-height: 100svh;
    }

    .historia-hero__body {
        padding-top: 120px;
    }

    .historia-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .historia-hero__col-dir {
        order: 1;
        padding-bottom: 0;
    }

    .historia-hero__col-esq {
        order: 2;
        flex: none;
    }

    .historia-hero__photo {
        max-width: 70%;
        margin-bottom: -48px;
    }

    .historia-hero__eyebrow {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    /* A Origem: o card ocupa a largura toda (no desktop ele tem 78% e padding-right de 250px) */
    .historia-origem {
        min-height: 0;
        border-top-width: 80px;
    }

    .historia-origem__card {
        width: 100%;
        margin-top: -40px;
        padding: 48px 24px;
    }

    .historia-origem__eyebrow {
        font-size: 0.8rem;
    }

    /* Números: grade 2×2 */
    .historia-numeros {
        padding-top: 56px;
    }

    .historia-numeros__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 16px;
        align-items: start;
    }

    .historia-numeros__label {
        font-size: 0.78rem;
    }

    /* Linha do tempo: 1 card por vez (historia.php ajusta a largura) */
    .historia-timeline__item {
        padding-left: 24px;
        padding-right: 16px;
    }

    .historia-timeline__year {
        font-size: 2.4rem;
    }

    /* Setas abaixo do texto (no desktop ficam sobre o lado direito do título) */
    .historia-timeline__nav {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 20px;
    }
}

/* ==========================================
   ÁGUAS
========================================== */
@media (max-width: 767.98px) {
    .aguas-hero {
        height: auto;
        min-height: 100svh;
    }

    .aguas-hero__body {
        padding-top: 120px;
    }

    .aguas-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        width: 100%;
    }

    .aguas-hero__col-dir {
        padding-left: 20px;
        padding-right: 20px;
    }

    .aguas-hero__col-dir {
        order: 1;
        padding-bottom: 0;
    }

    .aguas-hero__col-esq {
        order: 2;
        flex: none;
    }

    .aguas-hero__photo {
        max-width: 70%;
    }

    .aguas-hero__eyebrow {
        font-size: 0.8rem;
    }

    /* Mergulhar: texto e foto empilhados, sem a coluna vazia decorativa */
    .aguas-mergulhar {
        flex-direction: column;
        min-height: 0;
    }

    .aguas-mergulhar__col-vazia {
        display: none;
    }

    .aguas-mergulhar__col-texto {
        flex: none;
        padding: 56px 24px;
    }

    .aguas-mergulhar__col-foto {
        flex: none;
        max-height: 420px;
    }

    .aguas-mergulhar__foto {
        object-fit: cover;
        object-position: center;
    }

    /* Água, terra e memória: grade 2×2 vira sequência */
    .aguas-terra {
        display: flex;
        flex-direction: column;
    }

    .aguas-terra__titulo-cell {
        padding: 72px 24px 0;
        justify-content: flex-start;
    }

    .aguas-terra__texto1-cell {
        width: 100%;
        padding: 24px;
    }

    .aguas-terra__texto2-cell {
        margin-right: 0;
        justify-content: flex-start;
        padding: 40px 24px;
    }

    .aguas-terra__foto-cell {
        order: 10;
    }

    .aguas-terra__foto {
        margin-top: 0;
        max-width: 100%;
        height: auto;
    }

    .aguas-cta__btns {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================
   SPA
========================================== */
@media (max-width: 767.98px) {
    .spa-hero__body {
        padding-bottom: 64px;
    }

    .spa-hero__content {
        padding: 0 20px;
    }

    /* Filosofia */
    .spa-filosofia__row1 {
        flex-direction: column;
    }

    .spa-filosofia__col-esq {
        flex: none;
        width: 100%;
        padding: 56px 20px 24px;
    }

    .spa-filosofia__col-dir {
        width: 100%;
        padding: 0 20px;
    }

    .spa-filosofia__foto {
        max-width: 100%;
        height: auto;
    }

    .spa-filosofia__box-wrap {
        margin-top: 24px;
        padding: 0 20px 56px;
    }

    /* Rituais */
    .spa-rituais__row-texto {
        padding: 56px 20px 24px;
    }

    .spa-rituais__row-escuro {
        flex-direction: column;
        max-width: 100%;
        min-height: 0;
    }

    .spa-rituais__col-escuro {
        flex: none;
        padding: 40px 24px;
    }

    .spa-rituais__col-foto {
        height: 280px;
    }

    .spa-rituais__box-wrap {
        margin-top: 0;
        padding-bottom: 0;
    }

    .spa-rituais__box {
        max-width: 100%;
    }

    /* Banhos */
    .spa-banhos__row-titulo {
        padding: 64px 20px 32px;
    }

    .spa-banhos__row-cols {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }

    .spa-banhos__col-esq,
    .spa-banhos__col-dir {
        flex: none;
        width: 100%;
        padding-right: 0;
    }

    .spa-banhos__foto {
        margin: 24px 0 0;
    }

    .spa-banhos__col-dir {
        padding: 32px 0 56px;
    }

    .spa-banhos__lista {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .spa-banhos__lista li {
        margin: 0;
    }

    /* Texturas */
    .spa-texturas {
        padding: 64px 0;
    }

    .spa-texturas__composicao {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 20px;
    }

    .spa-texturas__titulo-esq,
    .spa-texturas__img-wrap {
        grid-column: 1;
        text-align: left;
        padding: 0;
    }

    .spa-texturas__titulo-dir {
        display: none;    /* linha decorativa que liga título e foto no desktop */
    }

    .spa-texturas__img {
        max-width: 100%;
    }

    .spa-texturas__intro {
        padding: 40px 20px 16px;
    }

    .spa-texturas__procs {
        grid-template-columns: 1fr;
        padding: 16px 20px 64px;
    }

    /* Facial */
    .spa-facial__img-topo {
        max-width: 60%;
        margin: 24px 20px 0 auto;
    }

    .spa-facial__cols {
        flex-direction: column;
    }

    .spa-facial__col-esq,
    .spa-facial__col-dir {
        flex: none;
        width: 100%;
    }

    .spa-facial__col-esq {
        padding: 0 20px;
    }

    .spa-facial__img-prod {
        padding-left: 0;
        max-width: 100%;
    }

    .spa-facial__col-dir {
        padding: 40px 20px 56px;
        min-height: 0;
        gap: 32px;
    }

    .spa-facial__box-wrap {
        flex-direction: column;
        gap: 24px;
        padding-left: 0;
        margin-top: 0;
    }

    .spa-facial__box {
        max-width: 100%;
    }

    /* Escolha */
    .spa-escolha {
        padding: 64px 20px;
    }

    /* Bistrô */
    .spa-bistro {
        padding: 64px 20px;
    }

    .spa-bistro__row1,
    .spa-bistro__row2 {
        flex-direction: column;
        margin-top: 0;
    }

    .spa-bistro__row2 {
        margin-top: 24px;
    }

    .spa-bistro__box {
        flex: none;
        width: 100%;
        aspect-ratio: auto;
        padding: 36px 24px;
    }

    .spa-bistro__box--2 {
        margin-top: 0;
        order: 2;
    }

    .spa-bistro__foto-wrap--1,
    .spa-bistro__foto-wrap--2 {
        flex: none;
        width: 100%;
        margin-top: 0;
    }

    .spa-bistro__foto {
        margin: 0;
    }
}

/* ==========================================
   VACATION CLUB
========================================== */
@media (max-width: 767.98px) {
    .vac-hero {
        height: auto;
        min-height: 100svh;
    }

    /* Sem barra de reserva nesta página (footer.php): sai também o espaço reservado para ela */
    body.page-template-vacation {
        padding-bottom: 0;
    }

    .vac-whats {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: 210px;
    }

    .vac-hero__body {
        padding-top: 120px;
    }

    .vac-hero__inner {
        padding: 0 20px;
    }

    .vac-hero__row1 {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    /* Ordem de leitura: chamada → título/texto → foto (a coluna da direita "se desfaz") */
    .vac-hero__col-esq {
        flex: none;
        order: 2;
    }

    .vac-hero__col-dir {
        display: contents;
    }

    .vac-hero__eyebrow {
        order: 1;
        margin: 0;            /* no desktop sobe -220px para cima do título */
        text-align: left;
        font-size: 0.85rem;
    }

    .vac-hero__img-direita {
        order: 3;
        max-width: 70%;
    }

    /* Um jeito mais inteligente */
    .vac-jeito__inner {
        flex-direction: column;
        gap: 24px;
    }

    .vac-jeito__col-esq {
        flex: none;
    }

    .vac-jeito__col-dir {
        padding-top: 0;
    }

    /* Para quem sabe */
    .vac-paraquem__inner {
        padding: 0 20px;
    }

    .vac-paraquem__row-top,
    .vac-paraquem__row-bot {
        flex-direction: column;
        align-items: stretch;
    }

    .vac-paraquem__lista-wrap {
        flex: none;
        padding-right: 0;
    }

    .vac-paraquem__col-sup {
        justify-content: flex-start;
    }

    .vac-paraquem__titulo-wrap {
        flex: none;
        padding-top: 24px;
    }

    .vac-paraquem__col-inf {
        height: auto;
    }

    .vac-paraquem__img-inf {
        margin-top: 24px;
    }

    /* Como funciona: passos em sequência */
    .vac-comofunciona {
        padding: 64px 0;
    }

    .vac-comofunciona__cols {
        flex-direction: column;
        gap: 0;
    }

    .vac-comofunciona__col {
        padding: 24px 0;
        gap: 24px;
    }

    .vac-comofunciona__col--center {
        flex: none;
        order: -1;
    }

    .vac-comofunciona__titulo {
        margin-top: 0;
    }

    /* Um clube */
    .vac-umclube__row-top {
        flex-direction: column;
        align-items: stretch;
    }

    .vac-umclube__col--esq,
    .vac-umclube__col--dir {
        width: 100%;
    }

    .vac-umclube__title {
        margin-bottom: 16px;
    }

    .vac-umclube__subtitle {
        margin-top: 16px;
    }
}

/* ==========================================
   CASA JUREMA IMPERIAL
========================================== */
@media (max-width: 767.98px) {
    .imperial-hero__inner {
        padding: 0 20px;
    }

    .imperial-hero__col-esq {
        display: none;
    }

    .imperial-hero__overlay {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.65) 100%);
    }

    .imperial-hero__col-dir {
        flex: 1 1 100%;
        padding-right: 0;
    }

    /* Intro */
    .imperial-intro__cols {
        flex-direction: column;
        padding: 0 20px;
    }

    .imperial-intro__col-esq {
        flex: none;
        margin-top: -48px;
    }

    .imperial-intro__col-dir {
        flex: none;
        padding: 40px 0 0;
        gap: 32px;
    }

    /* O verde */
    .imperial-verde__cols {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }

    .imperial-verde__col-esq,
    .imperial-verde__col-dir {
        flex: none;
        width: 100%;
    }

    .imperial-verde__box {
        max-width: 100%;
        margin: 0;
    }

    .imperial-verde__col-dir {
        padding: 32px 0 0;
    }

    /* Para quem: 2 colunas */
    .imperial-para-quem__roxa {
        padding: 56px 20px 72px;
    }

    .imperial-para-quem__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
    }

    .imperial-para-quem__item {
        padding: 0 12px;
    }

    .imperial-para-quem__item:nth-child(odd) {
        border-left: none;
    }

    .imperial-para-quem__img-wrap {
        padding: 0 20px;
        margin-top: -40px;
    }

    /* Destino */
    .imperial-destino__row1 {
        flex-direction: column;
    }

    .imperial-destino__box {
        width: auto;
        margin: 0 20px;
        padding: 40px 24px;
    }

    .imperial-destino__img-dir {
        margin: 24px auto 0;
    }

    .imperial-destino__row2 {
        flex-direction: column;
    }

    .imperial-destino__col-esq {
        flex: none;
        min-height: 280px;
    }

    .imperial-destino__col-dir {
        flex: none;
        padding: 48px 24px;
    }
}

/* ==========================================
   LAGOS — GASTRONOMIA (Pausas que têm aroma)
========================================== */
@media (max-width: 900px) {
    .pausas__col-dir {
        width: 100%;
    }

    .pausas__eyebrow,
    .pausas__title {
        padding-left: 0;
    }
}

@media (max-width: 767.98px) {
    .pausas {
        padding: 64px 0;
    }

    .pausas__body {
        width: auto;
    }
}

/* ==========================================
   JARDINS — EVENTOS (tabela de salas)
========================================== */
@media (max-width: 767.98px) {
    .espacos__table {
        min-width: 760px;     /* rola na horizontal dentro de .espacos__table-wrap */
    }

    .espacos__table .tr-labels th {
        white-space: normal;
        font-size: 0.8rem;
    }

    .espacos__table tbody td,
    .espacos__table .tr-icons th {
        font-size: 0.85rem;
    }

    .espacos__table-wrap {
        margin-right: -20px;
        padding-right: 20px;
    }
}

/* ==========================================
   PACOTES
========================================== */
@media (max-width: 767.98px) {
    /* No desktop os cards sobem -430px sobre o banner; no celular o banner é baixo e ficava todo coberto */
    .pacotes-hero__img {
        height: 340px;
        object-fit: cover;
    }

    .pacotes-dark {
        margin-top: -150px;
        padding-bottom: 24px;
    }
}

/* ==========================================
   ACOMODAÇÕES (Lagos e Jardins) — quarto expandido
========================================== */
@media (max-width: 767.98px) {
    .quarto-item__panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0 0 16px;
    }

    .quarto-item__panel-header > :not(img) {
        padding: 0 20px;
    }

    .quarto-item__features {
        min-width: 0;
    }
}

/* ==========================================
   HEROES DAS PÁGINAS INTERNAS
   No desktop têm altura fixa (100vh) com overflow escondido; no celular o conteúdo empilhado
   é mais alto que a tela e era cortado. Aqui crescem com o conteúdo.
========================================== */
@media (max-width: 767.98px) {
    .acomo-hero,
    .exp-hero,
    .gastro-hero,
    .piscinas-hero,
    .spa-hero,
    .imperial-hero {
        height: auto;
        min-height: 100svh;
    }

    .acomo-hero__body,
    .exp-hero__body,
    .gastro-hero__body,
    .piscinas-hero__body {
        padding-top: 110px;
        padding-bottom: 40px;
    }

    /* Acomodações: texto primeiro, depois as fotos (sem os deslocamentos negativos do desktop) */
    .acomo-hero__inner {
        gap: 32px;
    }

    .acomo-hero__text-col {
        max-width: 100%;
        padding-bottom: 0;
    }

    .acomo-hero__foto-esq {
        margin: 0 0 16px;
        max-width: 60%;
    }

    .acomo-hero__foto-dir {
        margin-bottom: 0;
    }

    .acomo-hero__caption {
        left: 20px;
        bottom: 20px;
    }

    /* Experiências (Jardins): título primeiro, depois foto e texto; sem sobreposição */
    body.resort-jardins .exp-hero__col-esq {
        order: 1;
        padding-bottom: 24px;
    }

    body.resort-jardins .exp-hero__col-dir {
        order: 2;
        align-items: stretch;
        text-align: left;
        padding-bottom: 24px;
    }

    body.resort-jardins .exp-hero__col-dir .exp-hero__desc {
        margin-left: 0;
    }

    .exp-hero__title {
        margin-top: 16px;
    }

    .exp-hero__photo {
        height: auto;
        max-height: 40vh;
        width: auto;
        max-width: 100%;
    }
}

/* ==========================================
   EXPERIÊNCIAS (Jardins) — mosaico
   No desktop sobe 200px sobre o banner; no celular cobria o texto do hero.
========================================== */
@media (max-width: 767.98px) {
    .exp-mozaico {
        margin-bottom: 40px;
    }

    .exp-mozaico__img {
        margin-top: -40px;
    }
}

/* ==========================================
   BARRA DE RESERVA — fixa no rodapé da tela, todas as páginas
   (template-parts/nav-reserva.php). Fica abaixo do menu overlay e dos painéis (z-index 600+).
========================================== */
@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .nav-reserva {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 550;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--color-accent);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
    }

    .nav-reserva__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: none;
        background: none;
        color: #fff;
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .nav-reserva__item + .nav-reserva__item {
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nav-reserva__item i {
        font-size: 1.15rem;
    }

    .nav-reserva__item:hover,
    .nav-reserva__item:active {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    /* Dialogs Reservar / Check-in */
    .nav-reserva-dialog .exp-dialog__inner {
        padding: 40px 20px 28px;
    }

    .nav-reserva-dialog .exp-dialog__header {
        margin-bottom: 20px;
    }

    .nav-reserva-dialog .exp-dialog__label {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin: 20px 0 12px;
    }

    .nav-reserva-dialog__datas {
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.8rem;
        color: #4a5055;
    }

    .nav-reserva-dialog__destinos {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-reserva-dialog__destinos button {
        flex: 1 1 auto;
        min-height: 40px;
        padding: 8px 14px;
        border: 1px solid rgba(45, 52, 54, 0.45);
        background: none;
        font-family: var(--font-body);
        font-size: 0.8rem;
        color: #2d3436;
        cursor: pointer;
    }

    .nav-reserva-dialog__destinos button[aria-pressed="true"] {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
    }

    .nav-reserva-dialog__calendario .flatpickr-calendar {
        width: 100%;
        max-width: 100%;
        box-shadow: none !important;
    }

    .nav-reserva-dialog__calendario .flatpickr-days,
    .nav-reserva-dialog__calendario .dayContainer {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .nav-reserva-dialog__calendario .flatpickr-day {
        max-width: none;
        flex-basis: 14.2857%;
    }

    .nav-reserva-dialog__hospedes {
        background: #fff;
        padding: 6px 16px;
    }

    .nav-reserva-dialog__hospedes .guest-dropdown__counter button {
        width: 36px;
        height: 36px;
    }

    .nav-reserva-dialog .guest-dropdown__error {
        margin-top: 14px;
        font-size: 0.8rem;
    }

    .nav-reserva-dialog__pesquisar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        margin-top: 20px;
        border: none;
        background: var(--color-accent);
        color: #fff;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
    }

    .nav-reserva-dialog__checkin {
        display: grid;
        gap: 12px;
    }

    .nav-reserva-dialog__checkin .exp-dialog__btn {
        text-align: center;
        padding: 16px 20px;
        font-size: 0.75rem;
    }

    .nav-reserva-dialog__checkin--lagos,
    .nav-reserva-dialog__checkin--lagos:hover   { background: #8D9974; }
    .nav-reserva-dialog__checkin--jardins,
    .nav-reserva-dialog__checkin--jardins:hover { background: #43355C; }
}

/* Motor de busca do hero (home e Vacation Club): no celular a reserva fica só na barra fixa */
@media (max-width: 767.98px) {
    .search-widget-wrapper {
        display: none;
    }

    /* Sem o widget, o título fica sozinho: centralizado no hero e com gutter lateral */
    .hero__content {
        justify-content: center;
        padding: 0 20px;
    }

    .hero__title {
        margin-bottom: 0;
        font-size: 26px;
    }
}