/* ==========================================
   FONTES LOCAIS – NOWAY
========================================== */
@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   FONTES LOCAIS – AFTESTO
========================================== */
@font-face {
    font-family: 'Aftesto';
    src: url('../fonts/Aftesto.woff2') format('woff2'),
         url('../fonts/Aftesto.woff') format('woff'),
         url('../fonts/Aftesto.ttf') format('truetype'),
         url('../fonts/Aftesto.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aftesto';
    src: url('../fonts/Aftesto Italic.woff2') format('woff2'),
         url('../fonts/Aftesto Italic.woff') format('woff'),
         url('../fonts/Aftesto Italic.ttf') format('truetype'),
         url('../fonts/Aftesto Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ==========================================
   FONTES LOCAIS – ZALANDO SANS
========================================== */
@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSans';
    src: url('../fonts/ZalandoSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ==========================================
   RESET & BASE
========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --font-body: 'ZalandoSans', 'Noway', sans-serif;
    --font-display: 'Aftesto', serif;
    --color-dark: #111111;
    --color-white: #ffffff;
    --color-accent: #1e2d3d;
    --container-max: 1400px;
    --container-w: 95%;

    /* Escala tipografica responsiva — reduz titulos grandes site-wide,
       achatando o crescimento perto de 1366-1440px (notebook) para nao
       ficarem espremidos/gigantes nessa faixa. */
    --fs-hero: clamp(2.1rem, 1.1rem + 3vw, 3.6rem);   /* H1 das heroes de pagina */
    --fs-h2:   clamp(1.9rem, 1.1rem + 1.8vw, 2.6rem); /* titulos de secao institucionais */
    --fs-stat: clamp(2.2rem, 1rem + 2.6vw, 4.2rem);   /* numeros grandes de destaque (stats) */
}

/* Contenedor global — todas as seções usam este padrão */
.descubra__inner,
.jvc__inner,
.complexo__inner,
.estrutura__inner,
.diferencial__inner,
.quartos__inner,
.um-quarto__inner,
.piscinas-hero__inner,
.piscinas-stats__inner,
.gastro-hero__inner,
.historia-hero__inner,
.vac-hero__inner,
.vac-jeito__inner,
.vac-paraquem__inner,
.vac-comofunciona__inner,
.vac-umclube__inner,
.historia-origem__inner,
.historia-numeros__inner,
.historia-timeline__inner,
.exp-hero__inner,
.exp-cards__inner,
.receitas__inner,
.solo__inner,
.pausas__inner,
.casa-imperial__inner,
.eventos__inner,
.experiencias__inner,
.natureza__inner,
.descubra-exp__inner,
.pacotes-dark__header-inner,
.pacotes-cards__inner,
.footer__top-inner,
.footer__bottom-inner,
.footer__policies-inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

.vac-umclube__inner {
    max-width: 95% !important;
}

html, body {
    height: 100%;
    font-family: var(--font-body);
    background-color: var(--color-dark);
    color: var(--color-white);
    overflow-x: hidden;
}

/* Logado no WordPress, a barra de admin empurra o <html> para baixo (margin-top). Sem descontar essa
   altura, a página passava da janela e surgia uma segunda barra de rolagem. Para o visitante é 0. */
html {
    height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
}

/* ==========================================
   HERO SECTION
========================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Video de fundo */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay escuro sobre o vídeo */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* ==========================================
   NAVBAR
========================================== */
.hero__nav {
    position: relative;
    z-index: 50;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px 40px;
}

/* Botão hambúrguer */
.hero__nav-hamburger {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    line-height: 1;
    justify-self: start;
}

.hero__nav-hamburger .bar {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* Logo central — coluna do meio, sem absoluto */
.hero__nav-logo {
    justify-self: center;
}

.hero__nav-logo img {
    height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Links direita */
.hero__nav-links {
    justify-self: end;
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-white);
}

.hero__nav-links a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.hero__nav-links a:hover {
    opacity: 0.75;
}

.hero__nav-links .divider {
    margin: 0 10px;
    opacity: 0.6;
}

/* ==========================================
   HERO CONTENT
========================================== */
.hero__content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(100px, 25vh, 200px);
    text-align: center;
}

.hero__title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-hero);
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: 40px;
    letter-spacing: -0.01em;
}

.hero__title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* ==========================================
   SEARCH WIDGET
========================================== */
.search-widget {
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    min-width: min(660px, 92vw);
}

.search-widget__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    border-right: 1px solid #e5e5e5;
    transition: background 0.2s;
}

.search-widget__field:last-of-type {
    border-right: none;
}

.search-widget__field:hover {
    background: #f8f8f8;
}

.search-widget__icon {
    color: #555;
    font-size: 1rem;
    flex-shrink: 0;
}

.search-widget__text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}

.search-widget__label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-widget__value {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 300;
    color: #888;
    white-space: nowrap;
}

.search-widget__btn {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 0 28px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.25s;
    white-space: nowrap;
}

.search-widget__btn:hover {
    background: #2c3f52;
}

/* ==========================================
   SEÇÃO DESCUBRA JUREMA
========================================== */
.descubra {
    background: #eae9e5;
    padding: 50px 0;
}

.descubra__inner {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 90px);
}

.descubra__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.descubra__col--right {
    margin-left: 0;
}

.descubra__label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 18px;
    width: 100%;
}

.descubra__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.08;
    color: #1c1c1c;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    margin-bottom: 36px;
    width: 100%;
}

/* Imagens: tamanho natural exportado, sem esticar */
.descubra__img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Imagem da coluna esquerda (portrait) — empurra para baixo do título */
.descubra__col--left .descubra__img {
    margin-top: auto;
}

/* Imagem da coluna direita (aérea) — espaço antes do texto */
.descubra__col--right .descubra__img {
    margin-bottom: 28px;
}

.descubra__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: #3a3a3a;
    margin: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .descubra__inner {
        flex-direction: column;
        padding: 0 24px;
    }

    .descubra__col--right {
        padding-left: 0;
    }

    .descubra__title {
        font-size: var(--fs-h2);
        margin-bottom: 24px;
    }

    .descubra__col--left .descubra__img {
        margin-top: 0;
    }
}

/* ==========================================
   SEÇÃO JUREMA VACATION CLUB (JVC)
========================================== */
:root {
    --jvc-bg: #1a1a1a;
    --jvc-orange: #c84b1a;
}

.jvc {
    position: relative;
    background: var(--jvc-bg);
    padding: 90px 0;
    /* sem overflow:hidden para a miniatura poder sair à esquerda da coluna */
}

/* Linhas decorativas — cobre toda a seção */
.jvc__linhas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.jvc__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;   /* colunas com a mesma altura: as fotos terminam alinhadas embaixo */
    gap: 40px;
}

.jvc__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Proporcoes das colunas */
.jvc__col--left  {
    flex: 0 0 42%;
    padding-left: clamp(0px, 5vw, 30px);   /* titulo, texto e foto mais para a direita */
}
.jvc__col--right {
    flex: 1;
    justify-content: flex-end;   /* se o texto for mais alto, a foto desce e alinha com a da esquerda */
}

/* Titulo grande - todo laranja */
.jvc__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--jvc-orange);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

/* Corpo de texto */
.jvc__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 40px;
    max-width: 400px;
}

/* Botao CTA ghost */
.jvc__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f0ede8;
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 13px 22px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    white-space: nowrap;
}

.jvc__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    color: #fff;
}

/* Foto grande - coluna da direita */
.jvc__foto-top {
    width: 75%;
    height: auto;
    display: block;
    align-self: flex-start;
}

/* Foto menor - abaixo do texto, empurrada para o fim da coluna (alinhada com a base da foto da direita) */
.jvc__foto-bottom {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: auto;
    padding-top: 40px;
    box-sizing: content-box;
}

/* -- Responsivo -- */
@media (max-width: 900px) {
    .jvc__inner {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px 0 24px;
    }

    .jvc__col--left,
    .jvc__col--right {
        flex: none;
        width: 100%;
        padding-left: 0;
    }

    .jvc__foto-top {
        width: 100%;
    }

    .jvc__foto-bottom {
        display: none;
    }
}

@media (min-width: 1660px) {
    .jvc__inner {
        padding-left: 190px;
    }
}

/* ==========================================
   COMPLEXO DE EVENTOS
========================================== */
:root {
    --complexo-bg:           #eae9e5;
    --complexo-title:        #2d3b18;
    --complexo-btn-border:   rgba(45, 59, 24, 0.50);
    --complexo-btn-hover-bg: rgba(45, 59, 24, 0.07);
}

body.resort-jardins {
    --complexo-bg:           #f0f0f0;
    --complexo-title:        #43355C;
    --complexo-btn-border:   rgba(67, 53, 92, 0.45);
    --complexo-btn-hover-bg: rgba(67, 53, 92, 0.07);
    --estrutura-bg:          #8d7eac;
}

body.resort-jardins .footer {
    background: #43355C;
}

body.resort-aguas .footer {
    background: #437895;
}

body.resort-imperial .footer {
    background: #ADA177;
}

.complexo {
    position: relative;
    background: var(--complexo-bg);
    padding: 150px 0 400px;
}

.complexo__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.complexo__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.complexo__col--left  { flex: 0 0 52%; position: relative; }
.complexo__col--right { flex: 1; }

.complexo__miniatura {
    position: absolute;
    right: calc(100% + 20px);
    top: -80px;
    height: auto;
    max-width: 160px;
    display: block;
}

.complexo__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    margin-bottom: 16px;
}

.complexo__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.0;
    color: var(--complexo-title);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

.complexo__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.60);
    margin-bottom: 16px;
    max-width: 400px;
}

.complexo__body:last-of-type {
    margin-bottom: 40px;
}

.complexo__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--complexo-title);
    border: 1px solid var(--complexo-btn-border);
    padding: 13px 22px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
    white-space: nowrap;
}

.complexo__btn:hover {
    background: var(--complexo-btn-hover-bg);
    border-color: var(--complexo-title);
}

.complexo__mozaico {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .complexo__inner {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px;
    }

    .complexo__col--left,
    .complexo__col--right {
        flex: none;
        width: 100%;
    }

    .complexo__miniatura {
        position: static;
        max-width: 120px;
        margin-bottom: 20px;
    }
}

@media (min-width: 1660px) {
    .complexo__inner {
        padding-left: 190px;
    }
}

/* ==========================================
   SEÇÃO ESTRUTURA NA MEDIDA CERTA
========================================== */
:root {
    --estrutura-bg: #748054;
}

.estrutura {
    background: var(--estrutura-bg);
    padding: 0 0 100px;
}

.estrutura__separador {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -310px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.estrutura__header {
    text-align: center;
    margin-bottom: 80px;
}

.estrutura__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 12px;
}

.estrutura__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

.estrutura__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin: 0 auto 12px;
}

.estrutura__intro strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
}

/* Cards grid */
.estrutura__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.estrutura__card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--estrutura-bg);
    cursor: pointer;
}

.estrutura__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease;
    z-index: 0;
}

.estrutura__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.10) 55%, transparent 100%);
    z-index: 1;
    transition: opacity 0.45s ease;
}

.estrutura__card:hover .estrutura__card-bg,
.estrutura__card:hover .estrutura__card-overlay {
    opacity: 0;
}

.estrutura__card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

.estrutura__card-icon {
    height: 28px;
    width: auto;
    display: block;
    align-self: flex-end;
    opacity: 0.9;
    flex-shrink: 0;
}

.estrutura__card-bottom {
    margin-top: auto;
    transition: transform 0.4s ease;
}

.estrutura__card:hover .estrutura__card-bottom {
    transform: translateY(-14px);
}

.estrutura__card-title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.2vw, 2.6rem);
    line-height: 1.0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

/* Capacidade | visível no estado padrão, some no hover */
.estrutura__card-capacity {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    max-height: 30px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.30s ease, opacity 0.25s ease;
}

.estrutura__card:hover .estrutura__card-capacity {
    max-height: 0;
    opacity: 0;
}

/* Lista de specs | oculta no padrão, aparece no hover */
.estrutura__card-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease 0.08s;
}

.estrutura__card:hover .estrutura__card-specs {
    max-height: 220px;
    opacity: 1;
}

.estrutura__card-specs li {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.estrutura__card-specs li:last-child {
    border-bottom: none;
}

@media (max-width: 900px) {
    .estrutura__separador {
        margin-top: -60px;
    }

    .estrutura__cards {
        grid-template-columns: 1fr;
    }

    .estrutura__card {
        aspect-ratio: 16/9;
    }
}

/* ==========================================
   SEÇÃO DIFERENCIAL
========================================== */
.diferencial {
    background: var(--complexo-bg);
    padding: 120px 0;
}

/* Layout empilhado: cabeçalho em cima, itens embaixo */
.diferencial__inner {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.diferencial__header {
    max-width: 55%;
}

.diferencial__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--complexo-title);
    margin-bottom: 14px;
}

.diferencial__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.0;
    color: var(--complexo-title);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Grid de 4 colunas | largura total do container */
.diferencial__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.diferencial__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.diferencial__icon-wrap {
    height: 52px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 32px;
}

.diferencial__icon {
    display: block;
    height: auto;
    width: auto;
}

.diferencial__item-title {
    font-family: 'Noway', sans-serif;
    font-size: 2.7rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--complexo-title);
    line-height: 1.35;
    margin-bottom: 16px;
}

.diferencial__item-body {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.60);
}

@media (max-width: 900px) {
    .diferencial__header {
        max-width: 100%;
    }

    .diferencial__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }
}

@media (max-width: 480px) {
    .diferencial__items {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   NOSSOS ESPAÇOS — TABELA (Jardins/Eventos)
=========================================== */
.espacos {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 64px;
}

.espacos__header {
    width: 100%;
}

.espacos__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 16px;
}

.espacos__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -0.01em;
}

.espacos__table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.espacos__table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    color: #fff;
    table-layout: fixed;
}

.espacos__table .tr-icons th {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3B2E55;
    text-align: center;
    padding: 0 10px 10px;
    vertical-align: bottom;
}

.espacos__table .tr-icons th img {
    display: block;
    margin: 8px auto 0;
    height: auto;
    width: auto;
}

.espacos__table .tr-labels th {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3B2E55;
    text-align: left;
    padding: 14px 10px 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.28);
    white-space: nowrap;
}

.espacos__table .tr-labels th:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    text-align: center;
}

.espacos__table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.espacos__table tbody tr:last-child {
    border-bottom: none;
}

.espacos__table tbody td {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    padding: 15px 10px 15px 0;
    text-align: center;
}

.espacos__table tbody td:first-child {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

/* ==========================================
   DIFERENCIAL — JARDINS OVERRIDES
=========================================== */
body.resort-jardins .diferencial {
    background: #f0f0f0;
}

body.resort-jardins .diferencial__item-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

body.resort-jardins .diferencial__icon-wrap {
    height: auto;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-top: 3px;
}

body.resort-jardins .diferencial__icon {
    display: block;
}

body.resort-jardins .diferencial__item-title {
    font-family: 'Noway', sans-serif;
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--complexo-title);
}

body.resort-jardins .diferencial__item-body {
    font-size: 1rem;
    line-height: 1.65;
}

body.resort-jardins .diferencial__title {
    font-size: var(--fs-h2);
}

/* ==========================================
   JARDINS — PISCINAS OVERRIDES
========================================== */
body.resort-jardins .piscinas-stats {
    background: #f0f0f0;
}

body.resort-jardins .piscinas-stats__number {
    color: #43355C;
}

body.resort-jardins .piscinas-stats__label {
    color: #43355C;
}

body.resort-jardins .brincar {
    background: #f0f0f0;
}

body.resort-jardins .brincar__title {
    color: #43355C;
}

body.resort-jardins .calor__content-col {
    background: #43355C;
}

body.resort-jardins .mergulho__content-col {
    background: #43355C;
}

/* ==========================================
   SEÇÃO O MELHOR DE DOIS MUNDOS
========================================== */
.dois-mundos {
    position: relative;
    background: #000;
    width: 100%;
    /* Altura limitada a tela: a secao inteira (e o nome do resort no hover) cabe sem rolar */
    height: min(57vw, 94vh);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Metades de imagem (Lagos / Jardins) lado a lado */
.dois-mundos__bg-half {
    flex: 0 0 50%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.dois-mundos__bg-half img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay preto leve para garantir legibilidade do texto */
.dois-mundos__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Texto fica acima dos hotspots, sem bloquear cliques */
.dois-mundos__text {
    position: absolute;
    top: 50%;
    z-index: 5;
    pointer-events: none;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.dois-mundos__title {
    font-family: 'Aftesto', serif;
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    margin: 0;
}

@media (max-width: 768px) {
    .dois-mundos__title {
        font-size: var(--fs-h2);
        white-space: normal;
        text-align: center;
    }

    .dois-mundos__text {
        white-space: normal;
        width: 80%;
    }
}

/* ==========================================
   DOIS MUNDOS – HOTSPOTS
========================================== */
.dois-mundos__hotspot {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 48px;
    transition: background 0.55s ease;
}

.dois-mundos__hotspot--left  { left: 0; }
.dois-mundos__hotspot--right { right: 0; }

.dois-mundos__hotspot:hover {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.55) 25%,
        rgba(0, 0, 0, 0.28) 50%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 88%);
}

.dois-mundos__hs-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
}

.dois-mundos__hotspot:hover .dois-mundos__hs-label {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   DM PANEL – OVERLAYS LAGOS / JARDINS
========================================== */
.dm-panel {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dm-panel--lagos   { background: #6b7d5a; }
.dm-panel--jardins { background: #8d7eac; }

/* Metades */
.dm-panel__half {
    flex: 0 0 50%;
    min-width: 0;
    position: relative;
}

/* Foto preenche 100% do box (cover) sem cortar a mulher do Lagos: ela vai de ~136px do topo até o pé da foto (958x1189).
   - object-position ancorado embaixo: o corte vertical sai só do céu, nunca dos pés;
   - largura no máximo 88vh: o box nunca fica "largo" a ponto de o corte do topo passar de ~100px e pegar a cabeça.
   Se a tela for estreita, o cover corta as laterais (pessoas ficam no centro/direita, ver object-position de cada painel). */
.dm-panel__half--img {
    flex: 0 0 auto;
    width: min(50%, 88vh);
    overflow: hidden;
}

.dm-panel__half--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 100%;   /* Lagos: mulher centralizada em ~42% da largura */
    display: block;
}

.dm-panel--jardins .dm-panel__half--img img {
    object-position: 70% 100%;   /* Jardins: menino pulando e família à direita */
}

/* Texto: altura total do painel (margem auto só na horizontal, para centralizar no espaço livre).
   Com margin: auto também na vertical o bloco ficava do tamanho do conteúdo e, em tela baixa, vazava
   para fora do painel (topo/rodapé sumiam). "safe center": centraliza, mas se não couber começa do topo e rola. */
.dm-panel__half--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    padding: clamp(40px, 10vh, 140px) clamp(48px, 7vw, 110px);
    overflow-y: auto;
    max-width: 560px;
    margin: 0 auto;
}

/* Botão fechar */
.dm-panel__close {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 10;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s, border-color 0.22s;
}

.dm-panel__close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Conteúdo do painel */
.dm-panel__logo {
    display: block;
    max-width: 190px;
    max-height: 115px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 44px;
}

.dm-panel__tagline {
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 22px;
    line-height: 1.55;
}

.dm-panel__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.85;
    margin-bottom: 44px;
    max-width: 420px;
}

.dm-panel__body strong {
    font-weight: 600;
    color: #fff;
}

.dm-panel__btn {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 14px 34px;
    transition: background 0.22s, border-color 0.22s;
}

.dm-panel__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
}

@media (max-width: 768px) {
    /* Celular: painel rola na vertical. Foto em largura total com a proporção do arquivo (958x1189):
       preenche as laterais sem cortar ninguém. Texto vem logo abaixo (Lagos: texto antes da foto no HTML) */
    .dm-panel {
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .dm-panel__half.dm-panel__half--img {
        flex: none;
        width: 100%;
        aspect-ratio: 958 / 1189;
    }

    .dm-panel__half--img img {
        object-position: center;
    }

    .dm-panel__half.dm-panel__half--text {
        flex: none;
        max-width: none;
        margin: 0;
        overflow: visible;
        padding: 40px 28px;
    }

    /* Fechar fica preso no topo enquanto o painel rola (sticky dentro do painel), sobreposto ao conteúdo */
    .dm-panel__close {
        position: sticky;
        top: 16px;
        right: auto;
        align-self: flex-end;
        flex: none;
        margin: 16px 16px -62px 0;
    }
}

/* ==========================================
   INPUT OCULTO FLATPICKR
========================================== */
.date-input-hidden {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
    background: transparent;
}

/* ==========================================
   CHEVRON DO DESTINO
========================================== */
.search-widget__chevron {
    font-size: 1rem;
    color: #888;
    margin-left: auto;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.search-widget__field.is-active .search-widget__chevron {
    transform: rotate(180deg);
}

/* ==========================================
   DROPDOWN DE DESTINO
========================================== */
.destino-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    overflow: hidden;
    min-width: 260px;
    z-index: 100;
    display: none;
}

.destino-dropdown.is-open {
    display: block;
    animation: fadeInUp 0.18s ease;
}

.destino-dropdown__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.destino-dropdown__option:last-child {
    border-bottom: none;
}

.destino-dropdown__option:hover {
    background: #f5f8fb;
}

.destino-dropdown__option.is-selected {
    background: #eef3f8;
}

.destino-dropdown__option > i {
    font-size: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.destino-dropdown__option > div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.destino-dropdown__option strong {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #222;
}

.destino-dropdown__option span {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    color: #999;
}

/* ==========================================
   MENU OVERLAY – FULLSCREEN
========================================== */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: #354a5e;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Estado fechado */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-overlay--lagos    { background: #8D9974; }
.nav-overlay--jardins  { background: #43355C; }
.nav-overlay--aguas    { background: #437895; }
.nav-overlay--imperial { background: #ADA177; }

/* Botão fechar */
.nav-overlay__close {
    position: absolute;
    top: 28px;
    right: 40px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s, transform 0.3s;
}

.nav-overlay__close:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* Lista de itens */
.nav-overlay__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-overlay__nav li {
    overflow: hidden;
}

.nav-overlay__nav a {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    font-weight: 300;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-transform: uppercase;
    padding: 11px 0;

    /* Item fechado */
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s;
}

.nav-overlay__nav a:hover {
    color: #fff;
    letter-spacing: 0.18em;
}

/* Stagger de entrada ao abrir */
.nav-overlay.is-open .nav-overlay__nav a {
    opacity: 1;
    transform: translateY(0);
}

.nav-overlay.is-open li:nth-child(1)  a { transition-delay: 0.04s; }
.nav-overlay.is-open li:nth-child(2)  a { transition-delay: 0.08s; }
.nav-overlay.is-open li:nth-child(3)  a { transition-delay: 0.12s; }
.nav-overlay.is-open li:nth-child(4)  a { transition-delay: 0.16s; }
.nav-overlay.is-open li:nth-child(5)  a { transition-delay: 0.20s; }
.nav-overlay.is-open li:nth-child(6)  a { transition-delay: 0.24s; }
.nav-overlay.is-open li:nth-child(7)  a { transition-delay: 0.28s; }
.nav-overlay.is-open li:nth-child(8)  a { transition-delay: 0.32s; }
.nav-overlay.is-open li:nth-child(9)  a { transition-delay: 0.36s; }
.nav-overlay.is-open li:nth-child(10) a { transition-delay: 0.40s; }
.nav-overlay.is-open li:nth-child(11) a { transition-delay: 0.44s; }
.nav-overlay.is-open li:nth-child(12) a { transition-delay: 0.48s; }

/* Reset atraso ao fechar (saída rápida) */
.nav-overlay:not(.is-open) .nav-overlay__nav a {
    transition-delay: 0s !important;
}

/* ==========================================
   SUBMENUS LAGOS / JARDINS
=========================================== */
.nav-overlay__has-sub {
    overflow: visible !important;
}

.nav-overlay__parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    font-weight: 300;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    padding: 11px 0;
    opacity: 0;
    transition: opacity 0.4s ease, color 0.2s;
}

.nav-overlay.is-open .nav-overlay__parent { opacity: 1; }
.nav-overlay.is-open li:nth-child(3) .nav-overlay__parent { transition-delay: 0.12s; }
.nav-overlay.is-open li:nth-child(4) .nav-overlay__parent { transition-delay: 0.16s; }
.nav-overlay:not(.is-open) .nav-overlay__parent { transition-delay: 0s !important; }

.nav-overlay__parent:hover { color: #fff; }

.nav-overlay__arrow {
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.25s ease;
}

.nav-overlay__has-sub.is-open .nav-overlay__arrow { transform: rotate(90deg); }

.nav-overlay__submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.nav-overlay__has-sub.is-open .nav-overlay__submenu { max-height: 280px; }

.nav-overlay__submenu li a {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1.1vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px 0 7px 0;
    opacity: 1;
    transform: none;
    transition: color 0.2s, letter-spacing 0.2s;
}

.nav-overlay__submenu li a:hover {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.15em;
}

.nav-overlay__submenu li span {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1.1vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    padding: 7px 0 7px 18px;
    cursor: default;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 768px) {
    .hero__nav {
        padding: 20px 20px;
    }

    .hero__nav-logo img {
        height: 64px;
    }

    .hero__nav-links {
        display: none;
    }

    .hero__content {
        padding-bottom: 50px;
    }

    .search-widget {
        flex-direction: column;
        border-radius: 6px;
        min-width: unset;
        width: 92vw;
    }

    .search-widget__field {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .search-widget__btn {
        padding: 16px 20px;
        justify-content: center;
    }

    .hero__content {
        padding-bottom: clamp(60px, 15vh, 160px);
    }

    .nav-overlay__close {
        top: 20px;
        right: 20px;
    }

    .destino-dropdown {
        left: 0;
        right: 0;
        min-width: unset;
    }

    .guest-dropdown {
        left: 0;
        right: 0;
        transform: none;
    }

    .guest-dropdown.is-open {
        animation: fadeInUp 0.18s ease;
    }
}

/* ==========================================
   SEARCH WIDGET – ESTADOS INTERATIVOS
========================================== */
.search-widget__field.is-active {
    background: #f0f4f8;
}

.search-widget__field .search-widget__value.has-value {
    color: #222;
    font-weight: 400;
}

/* ==========================================
   DROPDOWN DE HÓSPEDES
========================================== */
.search-widget-wrapper {
    position: relative;
}

.guest-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 20px 22px;
    min-width: 280px;
    z-index: 100;
    display: none;
}

.guest-dropdown.is-open {
    display: block;
    animation: fadeInUp 0.18s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.guest-dropdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.guest-dropdown__row:last-of-type {
    border-bottom: none;
}

.guest-dropdown__info strong {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
}

.guest-dropdown__info small {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #999;
    font-weight: 300;
}

.guest-dropdown__counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-dropdown__counter button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: #fff;
    color: #333;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.guest-dropdown__counter button:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.guest-dropdown__counter button:disabled {
    opacity: 0.3;
    cursor: default;
}

.guest-dropdown__counter span {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #222;
    min-width: 20px;
    text-align: center;
}

.guest-dropdown__confirm {
    width: 100%;
    margin-top: 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.guest-dropdown__confirm:hover {
    background: #2c3f52;
}

/* Idades das crianças (uma linha por criança) */
.guest-dropdown.is-open {
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.guest-dropdown__ages:not(:empty) {
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.guest-dropdown__age {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #555;
}

.guest-dropdown__age select {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #222;
    border: 1.5px solid #ccc;
    border-radius: 5px;
    padding: 5px 8px;
    background: #fff;
    min-width: 128px;
    cursor: pointer;
}

.guest-dropdown__age select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.guest-dropdown__age select.is-invalid {
    border-color: #c0392b;
}

.guest-dropdown__error {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #c0392b;
    margin: 6px 0 0;
}

/* ==========================================
   FLATPICKR – CUSTOMIZAÇÃO
========================================== */
.flatpickr-calendar {
    font-family: var(--font-body) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    border: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

.flatpickr-day.inRange {
    background: #d6e0ea !important;
    border-color: #d6e0ea !important;
    box-shadow: -5px 0 0 #d6e0ea, 5px 0 0 #d6e0ea !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--color-accent) !important;
    color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
}

/* ==========================================
   CASA IMPERIAL – WRAPPER STICKY REVEAL
========================================== */

/* Wrapper: contexto sticky — não pode ter overflow hidden */
.casa-reveal {
    position: relative;
}

/* ── TEASER (frase fullscreen, fica sticky) ── */
.casa-teaser {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    background: #e3e1db;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casa-teaser__text {
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #3d4448;
    text-align: center;
    line-height: 1.6;
    padding: 0 20px;
}

/* ── CASA IMPERIAL (desliza por cima do teaser) ── */
.casa-imperial {
    position: relative;
    z-index: 2;                  /* sobrepõe o teaser ao rolar */
    background: #e3e1db;
    padding: 70px 0 90px;
}


/* Título grande centralizado */
.casa-imperial__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    color: #1e2d3d;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.015em;
    white-space: nowrap;
    margin-bottom: 44px;
}

/* Área da imagem + elementos sobrepostos */
.casa-imperial__media {
    position: relative;
}

/* Imagem principal full-width do container */
.casa-imperial__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* Card de texto sobrepostos no canto direito-inferior da imagem */
.casa-imperial__card {
    position: absolute;
    right: 0;
    bottom: 100px;
    width: 38%;
    z-index: 2;
    background: #ADA177;
    padding: 36px 36px 40px;
}

.casa-imperial__body {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.78;
    color: #fff;
    margin-bottom: 28px;
}

/* Botão ghost sobre o card */
.casa-imperial__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px 22px;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}

.casa-imperial__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* ── Responsivo ── */
@media (max-width: 768px) {
    .casa-imperial__card {
        position: static;
        width: 100%;
        margin-top: 0;
    }

}

/* ==========================================
   SEÇÃO EVENTOS
========================================== */
.eventos {
    position: relative;
    background: #2b3f45;
    overflow: hidden;
    padding: 90px 0 80px;
}

/* Imagem botânica de fundo */
.eventos__bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}

.eventos__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}

.eventos__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.eventos__col--left {
    flex: 0 0 auto;
    width: clamp(280px, 38%, 480px);
}

.eventos__col--right {
    flex: 1;
    min-width: 0;
}

/* Label */
.eventos__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

/* Título */
.eventos__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

/* Corpo */
.eventos__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 36px;
}

/* Botão ghost */
.eventos__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 13px 26px;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}

.eventos__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Mosaico */
/* Duas fotos empilhadas (larga em cima, mais alta embaixo), centralizadas na coluna */
.eventos__fotos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: center;
}

.eventos__fotos img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Responsivo ── */
@media (max-width: 900px) {
    .eventos__inner {
        flex-direction: column;
    }

    .eventos__col--left {
        width: 100%;
    }
}

/* ==========================================
   SEÇÃO NATUREZA
========================================== */
.natureza {
    position: relative;
    z-index: 2;
    background: #5e8aa2;
    padding: 100px 0;
    overflow: visible;
}

.natureza__inner {
    display: flex;
    align-items: flex-start;
    gap: clamp(50px, 6vw, 90px);
}

/* Coluna esquerda */
.natureza__left {
    flex: 0 0 52%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.natureza__img1 {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Título em fluxo, abaixo de natureza-1 */
/* Label acima do titulo (mesmo estilo do .eventos__label) */
.natureza__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

.natureza__caption-title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 40px;   /* acima da foto, em uma linha so; o espaco empurra a foto para baixo */
    white-space: nowrap;
}

/* natureza-2: na coluna da direita, abaixo do botao */
.natureza__img2 {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 70px;
}

/* Coluna direita */
.natureza__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
    padding-left: 110px;
}

.natureza__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 1.0;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

.natureza__body {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 34px;
    max-width: 380px;
}

.natureza__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 13px 26px;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}

.natureza__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

@media (max-width: 900px) {
    .natureza__inner {
        flex-direction: column;
    }

    .natureza__left {
        flex: none;
        width: 100%;
    }

    .natureza__img2 {
        margin-top: 40px;
    }
}

/* ==========================================
   SEÇÃO EXPERIÊNCIAS
========================================== */
.experiencias {
    background: #e9e7e1;
    padding: 90px 0 80px;
    overflow: hidden;
}

.experiencias__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 95%;
    margin-right: 0;
}

.experiencias__left {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.experiencias__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: italic;
    font-size: var(--fs-h2);
    line-height: 1.08;
    color: #2d3436;
    margin-bottom: 24px;
}

.experiencias__title em {
    font-style: italic;
}

.experiencias__body {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.85;
    color: #4a5055;
    margin-bottom: 32px;
}

.experiencias__cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.5);
    padding: 12px 22px;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}

.experiencias__cta:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
}

.experiencias__slider-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.experiencias__track {
    display: flex;
    gap: 20px;
    will-change: transform;
}

/* Cards do slider da home — escopados para não conflitar com lagos/experiencias */
.experiencias__track .exp-card {
    flex: 0 0 320px;
}

.exp-card__img-wrap {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.exp-card__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* Experiência cadastrada sem imagem no admin */
.exp-card__img-wrap--vazio {
    aspect-ratio: 1;
    background: #d6d3cb;
}

.exp-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 0 0;
}

.exp-card__period {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #2d3436;
    margin-bottom: 8px;
    border-bottom: 1px solid #2F3E46;
}

.experiencias__track .exp-card__desc {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 300;
    line-height: 1.72;
    color: #4a5055;
    flex: 1;
    margin-bottom: 18px;
}

.exp-card__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.45);
    padding: 10px 18px;
    text-decoration: none;
    align-self: flex-start;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.exp-card__btn:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
}

/* ==========================================
   DIALOG "SAIBA MAIS" DAS EXPERIÊNCIAS
========================================== */
.exp-dialog {
    width: min(920px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;                   /* o reset global (* { margin: 0 }) tira a centralização nativa do <dialog> */
    padding: 0;
    border: none;
    background: #e9e7e1;
    color: #2d3436;
    overflow-y: auto;
}

.exp-dialog::backdrop {
    background: rgba(17, 17, 17, 0.6);
}

.exp-dialog[open] {
    animation: expDialogIn 0.25s ease;
}

@keyframes expDialogIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exp-dialog__inner {
    position: relative;
    padding: 48px clamp(20px, 4vw, 48px) 40px;
}

.exp-dialog__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #2d3436;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.exp-dialog__close:hover {
    transform: rotate(90deg);
}

.exp-dialog__header {
    max-width: 620px;
    margin-bottom: 28px;
}

.exp-dialog__period {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a5055;
    margin-bottom: 10px;
}

.exp-dialog__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: var(--fs-h2);
    line-height: 1.08;
    color: #2d3436;
    margin-bottom: 14px;
}

.exp-dialog__desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.8;
    color: #4a5055;
    margin: 0;
}

.exp-dialog__label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2d3436;
    border-bottom: 1px solid #2F3E46;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.exp-dialog__resorts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 20px;
}

.exp-dialog__resort {
    display: flex;
    background: #fff;
}

/* Imagem enviada pelo admin funciona como background (tamanhos variados).
   Proporção 2:3 preserva as artes verticais dos pacotes (texto no topo e na base). */
.exp-dialog__resort-img {
    flex: 0 0 40%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #d6d3cb;
}

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

.exp-dialog__resort-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
}

.exp-dialog__resort-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0;
}

.exp-dialog__resort--lagos   .exp-dialog__resort-name { color: #6f7a58; }
.exp-dialog__resort--jardins .exp-dialog__resort-name { color: #43355C; }

.exp-dialog__resort-dates {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 300;
    color: #4a5055;
    margin: 0 0 6px;
}

.exp-dialog__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.45);
    padding: 11px 20px;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.exp-dialog__btn:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
    color: #2d3436;
}

.exp-dialog__btn--primary {
    color: #fff;
    border-color: transparent;
}

.exp-dialog__resort--lagos   .exp-dialog__btn--primary { background: #8D9974; }
.exp-dialog__resort--jardins .exp-dialog__btn--primary { background: #43355C; }

.exp-dialog__btn--primary:hover {
    color: #fff;
    border-color: transparent;
    opacity: 0.88;
}

.exp-dialog__resort--lagos   .exp-dialog__btn--primary:hover { background: #8D9974; }
.exp-dialog__resort--jardins .exp-dialog__btn--primary:hover { background: #43355C; }

.exp-dialog__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2d3436;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.exp-dialog__link:hover {
    color: #2d3436;
    opacity: 0.75;
}

.experiencias__nav {
    display: flex;
    gap: 10px;
    margin-top: 32px;
}

.exp-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(45, 52, 54, 0.4);
    background: transparent;
    color: #2d3436;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.2s, border-color 0.2s;
}

.exp-nav-btn:hover {
    background: rgba(45, 52, 54, 0.08);
    border-color: #2d3436;
}

@media (max-width: 900px) {
    .experiencias__inner {
        flex-direction: column;
    }

    .experiencias__left {
        flex: none;
        width: 100%;
    }
}

/* ==========================================
   SEÇÃO DESCUBRA EXPERIÊNCIAS
========================================== */
.descubra-exp {
    position: relative;
    z-index: 1;                     /* fica abaixo da seção natureza */
    background: #e9e7e1;
    padding: 250px 0 90px;
    overflow: hidden;
}

.descubra-exp__inner {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

/* Colunas de imagem */
.descubra-exp__col--img {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.descubra-exp__col--img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Coluna central de texto */
.descubra-exp__col--text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.descubra-exp__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 1.12;
    color: #2d3436;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.descubra-exp__title-u {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.descubra-exp__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.85;
    color: #4a5055;
    max-width: 340px;
    margin-bottom: 34px;
}

.descubra-exp__btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.descubra-exp__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.5);
    padding: 12px 22px;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s;
}

.descubra-exp__btn:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
}

@media (max-width: 900px) {
    .descubra-exp__inner {
        flex-direction: column;
    }

    .descubra-exp__col--img {
        width: 100%;
    }

    .descubra-exp__col--img img {
        width: 100%;
    }
}

/* ==========================================
   FOOTER
========================================== */
.footer {
    background: #2f3e46;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
}

/* ── Área principal ── */
.footer__top-inner {
    padding: 80px 0 64px;
    display: flex;
    gap: clamp(40px, 6vw, 90px);
    align-items: flex-start;
}

/* Coluna esquerda: newsletter */
.footer__newsletter {
    flex: 0 0 38%;
    min-width: 0;
}

.footer__news-title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--fs-h2);
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.footer__news-sub {
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    margin-bottom: 32px;
}

/* Formulário */
.footer__form-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.footer__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 300;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.2s;
}

.footer__input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

.footer__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer__submit {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-family: 'Aftesto', serif;
    font-style: italic;
    font-size: 0.9rem;
    padding: 7px 26px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.22s, border-color 0.22s;
    flex-shrink: 0;
}

.footer__submit:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.8);
}

.footer__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    line-height: 1.5;
}

.footer__check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: rgba(255, 255, 255, 0.7);
}

/* Coluna direita: cols + social empilhados */
.footer__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.footer__cols {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    align-items: flex-start;
}

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

/* Links de navegação */
.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer__nav a {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}

.footer__nav a:hover {
    color: #fff;
}

/* Endereço / Contato */
.footer__col-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.footer__col--contact p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.9;
}

.footer__col--contact a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer__col--contact a:hover {
    color: #fff;
}

/* Social */
.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3.5vw, 48px);
}

.footer__social-link {
    font-family: 'Aftesto', serif;
    font-style: italic;
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.22s;
}

.footer__social-link i {
    font-style: normal;
    font-size: 1.5rem;
}

.footer__social-link:hover {
    color: #fff;
}

/* ── Bottom: logos + selos ── */

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.footer__logos {
    height: auto;
    display: block;
    max-width: 100%;
    margin-top: 165px;
}

.footer__selos {
    height: auto;
    display: block;
    margin-left: auto;
    max-width: 100%;
}

/* ── Políticas ── */
.footer__policies {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 16px 0;
}

.footer__policies-inner {
    display: flex;
    gap: 28px;
}

.footer__policies-inner a {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s;
}

.footer__policies-inner a:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* ==========================================
   SCROLL ANIMATIONS (IntersectionObserver)
========================================== */
[data-aos] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 800ms;
}

[data-aos][data-aos-duration="950"] {
    transition-duration: 950ms;
}

[data-aos] {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-aos="fade-up"]:not(.aos-animate) {
    opacity: 0;
    transform: translateY(36px);
}

[data-aos="fade-right"]:not(.aos-animate) {
    opacity: 0;
    transform: translateX(-52px);
}

[data-aos="fade-left"]:not(.aos-animate) {
    opacity: 0;
    transform: translateX(52px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================
   BANNER HERO (full-screen inner page banner)
=========================================== */
.banner-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.banner-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.banner-hero__content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    color: var(--color-white);
}

.banner-hero__eyebrow {
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 50px;
}

.banner-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 400;
    line-height: 1.0;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.banner-hero__subtitle {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.8;
    max-width: 52ch;
    opacity: 0.9;
    margin-bottom: 44px;
}

.banner-hero__cta {
    display: inline-block;
    padding: 16px 52px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.3s, border-color 0.3s;
}

.banner-hero__cta:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
    color: var(--color-white);
}

/* ==========================================
   PAGE HEADER (inner pages | sticky dark bar)
=========================================== */
.page-header {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 5%;
    background: var(--color-dark);
}

.page-header__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.page-header__hamburger .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
}

.page-header__logo img {
    height: 42px;
    display: block;
}

.page-header__links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-header__links a {
    color: var(--color-white);
    text-decoration: none;
}

.page-header__links a:hover {
    opacity: 0.7;
}

.page-header__links .divider {
    opacity: 0.35;
}

/* ==========================================
   RESORT SUBNAV
=========================================== */
.resort-subnav {
    background: #f5f0ea;
    position: sticky;
    top: 72px;
    z-index: 400;
}

.resort-subnav__inner {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
}

.resort-subnav__inner::-webkit-scrollbar {
    display: none;
}

.resort-subnav__link {
    flex-shrink: 0;
    display: block;
    padding: 15px 22px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.resort-subnav__link:hover {
    color: var(--color-dark);
}

.resort-subnav__link.is-active {
    color: var(--color-dark);
    border-bottom-color: var(--color-dark);
}

/* ==========================================
   PAGE HERO (inner pages | banner)
=========================================== */
.page-hero {
    position: relative;
    height: 480px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: var(--color-accent);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    padding-bottom: 56px;
    color: var(--color-white);
}

.page-hero__eyebrow {
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 400;
    line-height: 1.05;
    margin: 0;
}

/* ==========================================
   PAGE CONTENT (inner page body)
=========================================== */
.page-content {
    background: #faf8f5;
    color: var(--color-dark);
    padding: 80px 0;
    min-height: 60vh;
}

.page-content__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
}

.page-content__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: 24px;
}

.page-content__text {
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 72ch;
    opacity: 0.75;
}

@media (max-width: 768px) {
    .page-header {
        height: 60px;
    }

    .page-hero {
        height: 320px;
    }

    .page-hero__content {
        padding-bottom: 36px;
    }

    .resort-subnav {
        top: 60px;
    }
}

/* ==========================================
   SEÇÃO MOMENTOS INESQUECÍVEIS (CTA FINAL)
========================================== */
.momentos {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.momentos.piscinas {
    padding: 100px 0;
    min-height: auto !important;
}

.momentos .momentos__historia {
    gap: 20px;
}

@media (max-width: 991px) {
    .momentos .momentos__historia {
        display: block !important;
    }
    .momentos .momentos__historia a{
        display: block !important;
        margin: 10px 0;
    }

}

.momentos__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.momentos__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.momentos__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 80px 40px;
    width: 100%;
}

.momentos__eyebrow {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 20px;
}

.momentos__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.0;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.momentos__body {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    width: 800px;
    max-width: 90%;
    margin: 0 auto 52px;
}

.momentos__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* CTA com fundo semitransparente */
.momentos__cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 48px;
    min-width: 400px;
    text-align: center;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    white-space: nowrap;
}

.momentos__cta--filled {
    color: #000;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.75);
}

.momentos__cta--filled:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: #fff;
}

.momentos__cta--ghost {
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.38);
}

.momentos__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}

@media (max-width: 600px) {
    .momentos__cta {
        min-width: 0;
        width: 100%;
        max-width: 380px;
    }
}

/* ==========================================
   ACOMO HERO (banner hero da página de Acomodações)
========================================== */
.acomo-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.acomo-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.acomo-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}

/* Área de texto + mídia — ocupa o espaço restante (abaixo da nav) */
.acomo-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
}

.acomo-hero__inner {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

.acomo-hero__text-col {
    flex: 0 0 auto;
    max-width: 44%;
    color: #fff;
    padding-bottom: clamp(60px, 10vh, 120px);
}

/* Coluna da direita: imagens empilhadas, alinhadas ao rodapé */
.acomo-hero__media-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 0;
}

/* Foto piscina — acima do título, dentro da text-col */
.acomo-hero__foto-esq {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: -60px;
    margin-right: -40px;
}

/* Foto lago — rodapé da coluna, com caption sobreposto */
.acomo-hero__foto-dir-wrap {
    position: relative;
    width: 100%;
}

.acomo-hero__foto-dir {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: 120px;
}

/* Título sobreposto na foto direita */
.acomo-hero__caption {
    position: absolute;
    bottom: 40px;
    left: 72px;
    z-index: 2;
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.0;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: -0.01em;
}

.acomo-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 20px;
}

.acomo-hero__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 0.95;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.acomo-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 42ch;
}

@media (max-width: 900px) {
    .acomo-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .acomo-hero__text-col {
        max-width: 100%;
        padding-bottom: 40px;
        order: 2;
    }

    .acomo-hero__media-col {
        order: 1;
        opacity: 0.5;
    }

    .acomo-hero__foto-esq {
        display: none;
    }

    .acomo-hero__caption {
        font-size: var(--fs-h2);
    }
}

/* ==========================================
   QUARTOS — ACCORDION
=========================================== */
.quartos {
    background: #f5f4f0;
    padding: 120px 0 140px;
}

.quartos__header {
    text-align: center;
    margin-bottom: 72px;
}

.quartos__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #748054;
    margin-bottom: 20px;
}

.quartos__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
    color: #2d3b18;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
}

.quartos__subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: #555;
    max-width: 54ch;
    margin: 0 auto;
}

/* List */
.quartos__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid #2F3E46;
}

/* ---- Individual accordion item ---- */
.quarto-item {
    border: 2px solid #2F3E46;
    border-top: none;
    overflow: hidden;
}

/* ---- Collapsed bar ---- */
.quarto-item__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 15px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.quarto-item__bar:hover {
    opacity: 0.75;
}

.quarto-item__name-col {
    flex: 0 0 32%;
}

.quarto-item__name {
    font-family: 'Noway', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #2d3b18;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 4px;
}

.quarto-item__size {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #748054;
    letter-spacing: 0.06em;
}

.quarto-item__features {
    min-width: 300px;
    max-width: 100%;
}

.quarto-item__feature {
    font-family: var(--font-body);
    font-size: 0.80rem;
    font-weight: 300;
    color: #555;
    line-height: 1.5;
    padding-left: 0;
    position: relative;
    display: block;
}

.quarto-item__trigger {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2d3b18;
    white-space: nowrap;
    transition: color 0.2s;
    margin-left: auto;
}

.quarto-item__trigger-icon {
    font-size: 1rem;
    transition: transform 0.35s ease;
    display: inline-block;
}

.quarto-item.is-open .quarto-item__trigger-icon {
    transform: rotate(45deg);
}

.quarto-item.is-open .quarto-item__trigger {
    color: #748054;
}

/* Esconde a barra de collapsed quando aberto */
.quarto-item.is-open .quarto-item__bar {
    display: none;
}

/* ---- Expandable panel ---- */
.quarto-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.quarto-item.is-open .quarto-item__panel {
    max-height: 900px;
}

/* Panel header — olive green strip */
.quarto-item__panel-header {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #748054;
    padding: 0 32px 0 0;
}

/* Miniatura sem redimensionamento — tamanho exportado */
.quarto-item__thumb {
    display: block;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}

.quarto-item__panel-name {
    font-family: 'Noway', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 4px;
}

.quarto-item__panel-size {
    font-family: var(--font-body);
    font-size: 0.80rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.06em;
}

/* Panel body — 3 colunas: texto | nav | foto */
.quarto-item__panel-body {
    display: flex;
    align-items: stretch;
    background: transparent;
}

.quarto-item__panel-left {
    flex: 0 0 40%;
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quarto-item__specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quarto-item__specs li {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 300;
    color: #333;
    line-height: 1;
    padding: 8px 0;
}

.quarto-item__panel-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 36px 20px 0;
}

.quarto-item__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #748054;
    background: transparent;
    color: #748054;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.quarto-item__nav-btn:hover {
    background: #748054;
    color: #fff;
}

.quarto-item__panel-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #555;
    line-height: 1.75;
}

/* Right: slider de fotos */
.quarto-item__panel-right {
    flex: 1;
    overflow: hidden;
    min-height: 360px;
}

.quarto-item__slider {
    width: 100%;
    height: 100%;
}

.quarto-item__slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .quarto-item__bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .quarto-item__name-col {
        flex: 0 0 100%;
    }

    .quarto-item__features {
        display: none;
    }

    .quarto-item__panel-body {
        flex-direction: column;
    }

    .quarto-item__panel-left {
        flex: none;
        padding: 24px 20px;
    }

    .quarto-item__panel-nav {
        flex-direction: row;
        padding: 0 20px 16px;
    }

    .quarto-item__panel-right {
        min-height: 240px;
    }

    .quarto-item__panel-header {
        padding: 16px 20px 16px 0;
    }

    .quartos__title {
        font-size: var(--fs-h2);
    }
}

/* ==========================================
   UM QUARTO PARA CHAMAR DE PAUSA
=========================================== */
.um-quarto {
    position: relative;
    overflow: hidden;
    background: #162b1c;
}

.um-quarto__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Row 1: imagem grudada na esquerda + texto */
.um-quarto__row-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
}

.um-quarto__foto-esq {
    display: block;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}

.um-quarto__col-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 60px 8% 60px 6%;
}

.um-quarto__col-texto p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
}

/* Row 2: eyebrow + título + imagem direita */
.um-quarto__inner {
    position: relative;
    z-index: 1;
}

.um-quarto__row-bottom {
    display: flex;
    align-items: flex-end;
    padding: 48px 0 80px;
}

.um-quarto__col-titulo {
    flex: 1;
}

.um-quarto__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
}

.um-quarto__titulo {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    text-transform: uppercase;
    color: #fff;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.um-quarto__col-foto-dir {
    flex: 0 0 auto;
    align-self: flex-end;
}

.um-quarto__foto-dir {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .um-quarto__row-top {
        flex-direction: column;
    }

    .um-quarto__col-texto {
        padding: 40px 5%;
    }

    .um-quarto__row-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 40px 0 60px;
    }

    .um-quarto__titulo {
        font-size: var(--fs-h2);
    }
}

/* ==========================================
   VIVA O DESCANSO — Jardins Acomodações
=========================================== */
.viva-descanso {
    background: #43355C;
    padding: 100px 0;
}

.viva-descanso__row-top {
    display: flex;
    align-items: flex-end;
    gap: 60px;
    padding: 100px 5vw 60px;
}

.viva-descanso__titulo {
    flex: 0 0 55%;
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.02em;
    text-align:right;
}

.viva-descanso__foto-dir-wrap {
    flex: 1;
    align-self: flex-start;
}

.viva-descanso__foto-dir {
    display: block;
    max-width: 100%;
    height: auto;
    margin: -280px auto 0;
    position: relative;
    z-index: 1;
}

.viva-descanso__row-bottom {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.viva-descanso__foto-esq-wrap {
    flex: 0 0 55%;
}

.viva-descanso__foto-esq {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
}

.viva-descanso__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 80px 5vw 100px;
}

.viva-descanso__texto p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    width: 400px;
    max-width: 100%;
}

@media (max-width: 900px) {
    .viva-descanso__row-top {
        flex-direction: column;
        padding: 72px 5vw 48px;
        gap: 40px;
    }

    .viva-descanso__foto-dir-wrap {
        align-self: flex-end;
    }

    .viva-descanso__row-bottom {
        flex-direction: column;
    }

    .viva-descanso__foto-esq-wrap {
        flex: none;
    }

    .viva-descanso__texto {
        padding: 60px 5vw 72px;
    }
}

/* ==========================================
   JARDINS — QUARTOS ACCORDION OVERRIDES
========================================== */
body.resort-jardins .acomo-hero__foto-dir {
    margin-left: auto;
    margin-right: auto;
}

body.resort-jardins .quartos__eyebrow {
    color: #8d7eac;
}

body.resort-jardins .quartos__title {
    color: #43355C;
}

body.resort-jardins .quarto-item__name {
    color: #43355C;
}

body.resort-jardins .quarto-item__size {
    color: #8d7eac;
}

body.resort-jardins .quarto-item__trigger {
    color: #43355C;
}

body.resort-jardins .quarto-item__panel-header {
    background: #43355C;
}

/* ==========================================
   PISCINAS HERO
=========================================== */
.piscinas-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.piscinas-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.piscinas-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
}

.piscinas-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
}

.piscinas-hero__grid {
    display: flex;
    align-items: end;
    gap: 60px;
}

.piscinas-hero__text-col {
    flex: 1;
    color: #fff;
}

.piscinas-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 24px;
}

.piscinas-hero__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 0.92;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 36px;
}

.piscinas-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 38ch;
}

.piscinas-hero__photo-col {
    flex: 0 0 auto;
}

.piscinas-hero__photo {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .piscinas-hero__grid {
        flex-direction: column;
        gap: 40px;
    }

    .piscinas-hero__photo-col {
        display: none;
    }

    .piscinas-hero__title {
        font-size: var(--fs-hero);
    }
}

/* ==========================================
   PISCINAS — STATS
=========================================== */
.piscinas-stats {
    background: #e8e7e2;
    padding: 80px 0;
}

.piscinas-stats__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
}

.piscinas-stats__item {
    text-align: center;
}

.piscinas-stats__number {
    display: block;
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-stat);
    line-height: 1;
    color: #1a3322;
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
}

.piscinas-stats__label {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #1a3322;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .piscinas-stats__inner {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }
}

/* ==========================================
   PARA BRINCAR — texto + mozaico + mulher
=========================================== */
.brincar {
    position: relative;         /* âncora do mozaico absoluto */
    background: #e8e7e2;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 150px 0;
}

/* Coluna de texto */
.brincar__text-col {
    flex: 0 0 38%;
    display: flex;
    align-items: center;
    padding: 100px 5% 100px 5vw;
    position: relative;
    z-index: 1;                 /* texto fica acima do fundo mas abaixo do mozaico */
}

.brincar__text-inner {
    max-width: 440px;
}

.brincar__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 0.95;
    text-transform: uppercase;
    color: #1a3322;
    letter-spacing: -0.02em;
    margin-bottom: 36px;
}

.brincar__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: #3a3a3a;
    margin-bottom: 16px;
}

/* Coluna da mulher: preenche o restante, sem o mozaico no fluxo */
.brincar__photos-col {
    flex: 1;
    min-width: 0;
    position: relative;
}

.brincar__mulher {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin-left: auto;
    margin-right: 100px;
    object-position: center top;
}

/* Mozaico: fora do fluxo, sobreposto no centro-baixo da seção */
.brincar__mozaico {
    position: absolute;
    bottom: 80px;
    left: 36%;                  /* começa após a coluna de texto (~38%) */
    z-index: 4;
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .brincar {
        flex-direction: column;
    }

    .brincar__text-col {
        flex: none;
        padding: 60px 5% 40px;
    }

    .brincar__photos-col {
        min-height: 300px;
    }

    .brincar__mozaico {
        position: static;
        width: 60%;
        margin: 0 auto -1px;
        display: block;
    }
}

/* ==========================================
   ENTRE UM MERGULHO — conteúdo (esq) + slider (dir)
   Espelho invertido do .calor
=========================================== */
.mergulho {
    display: flex;
    align-items: stretch;
    min-height: 60vh;
}

.mergulho__content-col {
    flex: 0 0 50%;
    background: #748054;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 7vw, 100px) clamp(40px, 6vw, 96px);
}

.mergulho__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
}

.mergulho__body {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
}

.mergulho__body:last-of-type {
    margin-bottom: 40px;
}

.mergulho__nav {
    display: flex;
    gap: 12px;
}

.mergulho__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.50);
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.mergulho__nav-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.80);
}

.mergulho__slider-col {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.mergulho__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.mergulho__slide--active {
    opacity: 1;
}

@media (max-width: 900px) {
    .mergulho {
        flex-direction: column;
    }

    .mergulho__slider-col {
        height: 55vw;
        min-height: 280px;
    }

    .mergulho__slide {
        position: absolute;
    }
}

/* ==========================================
   CALOR DAS ÁGUAS — slider + conteúdo
=========================================== */
.calor {
    display: flex;
    align-items: stretch;
    min-height: 60vh;
}

/* Coluna esquerda: slider de fotos */
.calor__slider-col {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
}

.calor__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.calor__slide--active {
    opacity: 1;
}

/* Coluna direita: conteúdo */
.calor__content-col {
    flex: 1;
    background: #1a3322;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 7vw, 100px) clamp(40px, 6vw, 96px);
}

.calor__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
}

.calor__body {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 16px;
}

.calor__body:last-of-type {
    margin-bottom: 40px;
}

.calor__nav {
    display: flex;
    gap: 12px;
}

.calor__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.50);
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.calor__nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.80);
}

@media (max-width: 900px) {
    .calor {
        flex-direction: column;
    }

    .calor__slider-col {
        flex: none;
        height: 55vw;
        min-height: 280px;
    }

    .calor__slide {
        position: absolute;
    }
}

/* ==========================================
   GASTRONOMIA — BANNER HERO
=========================================== */
.gastro-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gastro-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.gastro-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}

.gastro-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.gastro-hero__inner {
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

.gastro-hero__col-esq {
    flex: 0 0 38%;
    display: flex;
    align-items: flex-end;
}

.gastro-hero__chef {
    display: block;
    max-width: 100%;
    height: auto;
}

.gastro-hero__col-dir {
    flex: 1;
    color: #fff;
    padding-bottom: clamp(60px, 10vh, 120px);
}

.gastro-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 20px;
}

.gastro-hero__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 0.92;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.gastro-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 42ch;
}

@media (max-width: 900px) {
    .gastro-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .gastro-hero__col-esq {
        flex: none;
        order: 2;
        opacity: 0.6;
        max-height: 40vh;
        overflow: hidden;
    }

    .gastro-hero__col-dir {
        order: 1;
        padding-bottom: 32px;
    }
}

/* ==========================================
   GASTRONOMIA — RECEITAS QUE CONTAM UMA HISTÓRIA
=========================================== */
.receitas {
    background: #f5f4f0;
    padding: 120px 0 100px;
}

.receitas__inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.receitas__text-col {
    flex: 0 0 40%;
    color: #1a3322;
}

.receitas__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #1a3322;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

.receitas__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: #1a3322;
    max-width: 50ch;
}

.receitas__mozaico-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.receitas__mozaico {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .receitas__inner {
        flex-direction: column;
        gap: 48px;
    }

    .receitas__text-col {
        flex: none;
    }

    .receitas__mozaico-col {
        justify-content: center;
    }
}

/* ==========================================
   GASTRONOMIA — DO SOLO AO SABOR
=========================================== */
.solo {
    background: #6E7A5A;
    padding: 120px 0 140px;
    text-align: center;
    color: #fff;
}

.solo__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

.solo__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.solo__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.solo__label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C7E58F;
    line-height: 1.4;
}

.solo__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: #fff;
    max-width: 62ch;
}

/* ==========================================
   GASTRONOMIA — PAUSAS QUE TÊM AROMA
=========================================== */
.pausas {
    background: #f5f4f0;
    padding: 100px 0;
}

.pausas__inner {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.pausas__col-esq {
    flex: 0 0 56%;
    display: flex;
    flex-direction: column;
}

.pausas__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a3322;
    margin-bottom: 16px;
    padding-left: 70px;
}

.pausas__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    color: #1a3322;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    padding-left: 70px;
}

.pausas__title span {
    display:block;
    text-align: right;
}

.pausas__foto-esq {
    display: block;
    max-width: 100%;
    height: auto;
}

.pausas__col-dir {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.pausas__foto-dir-cima,
.pausas__foto-dir-baixo {
    display: block;
    max-width: 100%;
    height: auto;
}
.pausas__foto-dir-baixo {
    max-width: 85%;
    margin: auto;
}

.pausas__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: #1a3322;
    width: 450px;
    max-width: 100%;
    margin: auto;
}

.pausas__body strong {
    font-weight: 700;
    color: #1a3322;
}

@media (max-width: 900px) {
    .pausas__inner {
        flex-direction: column;
        gap: 48px;
    }

    .pausas__col-esq {
        flex: none;
    }

    .pausas__title {
        font-size: var(--fs-h2);
    }
}

/* ==========================================
   GASTRONOMIA — ENTRE ÁGUAS, CONVERSAS E BRINDES
=========================================== */
.bares {
    display: flex;
    align-items: stretch;
    min-height: 65vh;
}

.bares__content-col {
    flex: 0 0 50%;
    background: #1a3322;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 7vw, 100px) clamp(40px, 6vw, 96px);
}

.bares__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 20px;
}

.bares__title {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 36px;
}

.bares__body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 40px;
    max-width: 46ch;
}

.bares__nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.bares__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.50);
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.bares__nav-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.80);
}

.bares__slider-col {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.bares__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.bares__slide--active {
    opacity: 1;
}

@media (max-width: 900px) {
    .bares {
        flex-direction: column;
    }

    .bares__slider-col {
        height: 55vw;
        min-height: 280px;
    }
}

/* ==========================================
   GASTRONOMIA — ESPACOS (slider de cards)
=========================================== */
.gastro-espacos {
    background: #f5f4f0;
    padding: 80px 0 60px;
    overflow: hidden;
}

.gastro-espacos__viewport {
    overflow: hidden;
}

.gastro-espacos__track {
    display: flex;
    gap: 16px;
    padding-left: 5vw;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gastro-espacos__card {
    flex: 0 0 calc((95vw - 3 * 16px) / 3.5);
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: #43355C;
    cursor: pointer;
    flex-shrink: 0;
}

.gastro-espacos__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease;
    z-index: 0;
}

.gastro-espacos__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.10) 55%, transparent 100%);
    z-index: 1;
    transition: opacity 0.45s ease;
}

.gastro-espacos__card:hover .gastro-espacos__card-bg,
.gastro-espacos__card:hover .gastro-espacos__card-overlay {
    opacity: 0;
}

.gastro-espacos__card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

.gastro-espacos__icon-wrap {
    margin: 0;
}

.gastro-espacos__icon-wrap--top-right {
    align-self: flex-end;
}

.gastro-espacos__card-bottom {
    margin-top: auto;
    transition: transform 0.4s ease;
}

.gastro-espacos__card:hover .gastro-espacos__card-bottom {
    transform: translateY(-12px);
}

.gastro-espacos__name {
    font-family: 'Aftesto', serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 12px;
}

.gastro-espacos__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition: max-height 0.45s ease,
                opacity 0.35s ease 0.08s,
                transform 0.4s ease 0.06s;
}

.gastro-espacos__card:hover .gastro-espacos__desc {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

/* Info card — sempre no estado de destaque */
.gastro-espacos__card--info .gastro-espacos__icon-wrap {
    align-self: center;
    margin-bottom: 24px;
}

.gastro-espacos__card--info .gastro-espacos__icon {
    height: 44px;
}

.gastro-espacos__card--info .gastro-espacos__card-inner {
    justify-content: flex-start;
    padding-top: 44px;
}

.gastro-espacos__card--info .gastro-espacos__card-bottom {
    transform: none;
}

.gastro-espacos__card--info .gastro-espacos__desc {
    max-height: 300px;
    opacity: 1;
}

/* Navigation */
.gastro-espacos__controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 28px 5vw 0;
}

.gastro-espacos__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #43355C;
    background: transparent;
    color: #43355C;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.gastro-espacos__nav-btn:hover:not(:disabled) {
    background: #43355C;
    color: #fff;
}

.gastro-espacos__nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 900px) {
    .gastro-espacos__card {
        flex: 0 0 calc((95vw - 16px) / 1.5);
    }
}

/* ==========================================
   JARDINS — GASTRONOMIA OVERRIDES
========================================== */
body.resort-jardins .receitas__title,
body.resort-jardins .receitas__body {
    color: #43355C;
}

body.resort-jardins .receitas__text-col {
    color: #43355C;
}

/* Jardins experiencias — hero vertical center */
.exp-hero--vcenter .exp-hero__body {
    align-items: center;
}

.exp-hero--vcenter .exp-hero__inner {
    align-items: center;
}

/* Jardins experiencias — hero layout override (foto à direita, acima do texto) */
body.resort-jardins .exp-hero__col-esq {
    justify-content: flex-end;
    padding-bottom: clamp(24px, 4vh, 56px);
}

body.resort-jardins .exp-hero__title {
    margin-top: 0;
    padding-bottom: 0;
}

body.resort-jardins .exp-hero__col-dir {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-end;
    padding-bottom: clamp(24px, 4vh, 56px);
    gap: 20px;
    text-align: right;
}

body.resort-jardins .exp-hero__col-dir .exp-hero__photo {
    max-width: 100%;
    height: auto;
}

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

/* Jardins experiencias — exp-card color overrides */
body.resort-jardins .exp-card__badge {
    background: #43355C;
}

body.resort-jardins .exp-card__info {
    background: #43355C;
}

body.resort-jardins .exp-card__back {
    background: #43355C;
}

/* Mosaico section before exp-cards grid */
.exp-mozaico {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.exp-mozaico__img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: -200px;
    z-index: 1;
    position: relative;
}

/* ==========================================
   HISTÓRIA — TIMELINE (linha do tempo)
=========================================== */
.historia-timeline {
    background: #edeae5;
    padding: clamp(70px, 9vh, 110px) 0 clamp(80px, 10vh, 120px);
    overflow: hidden;
}

.historia-timeline__header-wrap {
    position: relative;
    text-align: center;
    margin-bottom: clamp(48px, 6vh, 76px);
}

.historia-timeline__eyebrow {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #2f3e46;
    margin-bottom: 50px;
}

.historia-timeline__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #2f3e46;
    text-transform: uppercase;
    margin-bottom: clamp(16px, 2.5vh, 26px);
}

.historia-timeline__desc {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 300;
    line-height: 1.68;
    color: #4a5055;
    max-width: 560px;
    margin: 0 auto;
}

/* Setas de navegação — posicionadas à direita do header */
.historia-timeline__nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.historia-timeline__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(47, 62, 70, 0.35);
    background: transparent;
    color: #2f3e46;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}

.historia-timeline__nav-btn:hover {
    background: rgba(47, 62, 70, 0.08);
    border-color: #2f3e46;
}

.historia-timeline__nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Slider */
.historia-timeline__wrap {
    overflow: hidden;
    width: 100%;
}

.historia-timeline__track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    padding-top: 60px;
}

/* Cards individuais */
.historia-timeline__item {
    --tl-pt: clamp(20px, 3vh, 32px);
    flex-shrink: 0;
    padding: var(--tl-pt) 28px 0 28px;
    position: relative;
    opacity: 0.25;
    transition: opacity 0.45s ease;
}

/* Linha vertical — começa do centro da bolinha e desce até o fim do card */
.historia-timeline__item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: calc(var(--tl-pt) + 5px);
    bottom: 0;
    width: 1px;
    background: #BC9D5F;
}

.historia-timeline__item--active { opacity: 1; }
.historia-timeline__item--dim    { opacity: 0.48; }
.historia-timeline__item--faint  { opacity: 0.25; }

/* Ano */
.historia-timeline__year {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: #2f3e46;
    margin-bottom: clamp(12px, 2vh, 20px);
    height: 120px;
    display: flex;
    align-items: end;
    width: 100%;
    margin-top: -90px;
}

/* Bolinha no topo da linha — posicionada absolutamente no canto superior esquerdo */
.historia-timeline__dot {
    position: absolute;
    left: 0;
    top: var(--tl-pt);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c8856a;
    z-index: 1;
}

/* Label */
.historia-timeline__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #2f3e46;
    line-height: 1.4;
    margin-bottom: clamp(12px, 1.5vh, 18px);
}

/* Texto */
.historia-timeline__body {
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.95vw, 0.93rem);
    font-weight: 300;
    line-height: 1.72;
    color: #4a5055;
    margin-bottom: clamp(18px, 2.5vh, 28px);
}

/* Foto */
.historia-timeline__photo {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================
   HISTÓRIA — A ORIGEM (card + números)
=========================================== */
.historia-origem {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(50px, 7vh, 90px);
    border-top: 200px solid #DDD;
}

.historia-origem__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Card escuro — sobe para dentro do banner anterior com margin-top negativo */
.historia-origem__inner {
    position: relative;
    z-index: 10;
}

.historia-origem__card {
    background: #274A66;
    padding: 150px 250px 150px 50px;
    margin-top: -110px;
    margin-left: auto;
    width: 78%;
}

.historia-origem__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.60);
    margin-bottom: 14px;
}

.historia-origem__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 36px);
}

.historia-origem__body {
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.95vw, 0.94rem);
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 10px;
}

.historia-origem__body:last-child {
    margin-bottom: 0;
}

/* Números — row na base da section */
.historia-numeros {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: clamp(60px, 9vh, 120px);
}

.historia-numeros__inner {
    position: relative;
    z-index: 2;
}

.historia-numeros__grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.historia-numeros__item {
    text-align: center;
}

.historia-numeros__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px;
}

.historia-numeros__label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 auto;
    line-height: 1.45;
}

/* ==========================================
   VACATION CLUB — BANNER HERO
=========================================== */
.vac-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Atalho flutuante para o WhatsApp do Vacation (substitui o chatbot nesta página; ver footer.php) */
.vac-whats {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 540;                /* abaixo da barra de reserva, do menu overlay e dos painéis */
    display: block;
    width: 270px;
    max-width: 62vw;
    transition: transform 0.25s;
}

.vac-whats:hover {
    transform: scale(1.04);
}

.vac-whats img {
    display: block;
    width: 100%;
    height: auto;
}

.vac-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.vac-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 20, 0.45);
    z-index: 1;
}

.vac-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;   /* sem o motor de reservas, texto e foto descem para a parte de baixo do banner */
    justify-content: flex-end;
    gap: clamp(32px, 4vh, 56px);
    padding-bottom: clamp(60px, 10vh, 120px);
}

.vac-hero__inner {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(24px, 4vw, 72px);
    padding-right: clamp(24px, 6vw, 110px);   /* afasta a foto da borda direita */
}

/* Linha 1: 2 colunas */
.vac-hero__row1 {
    display: flex;
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
}

.vac-hero__col-esq {
    flex: 0 0 56%;
    display: flex;
    flex-direction: column;
}

.vac-hero__col-dir {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.vac-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 2rem;
    text-align: center;
    width: 100%;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    margin-bottom: clamp(12px, 2vh, 20px);
    margin-top: clamp(-220px, -18vh, -40px);
}

.vac-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 2.5vh, 32px);
}

.vac-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 400px;
}

.vac-hero__img-direita {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================
   VACATION — SEÇÃO UM JEITO
=========================================== */
.vac-jeito {
    position: relative;
    background: #f5ede8;
    padding: clamp(60px, 8vh, 110px) 0;
    overflow: hidden;
}

.vac-jeito__linha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
}

.vac-jeito__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: clamp(32px, 4vw, 64px);
}

.vac-jeito__col-esq {
    flex: 0 0 46%;
}

.vac-jeito__col-dir {
    flex: 1;
    padding-top: clamp(40px, 7vh, 90px);
}

.vac-jeito__foto {
    display: block;
    max-width: 100%;
    height: auto;
}

.vac-jeito__desc {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.75;
    color: #333;
    max-width: 440px;
    margin-bottom: clamp(24px, 3vh, 40px);
}

.vac-jeito__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    text-transform: uppercase;
    margin: 0;
}

.vac-jeito__title--orange {
    display: block;
    color: var(--jvc-orange);
}

.vac-jeito__title--dark {
    display: block;
    color: #1a1a1a;
}

/* ==========================================
   VACATION — SEÇÃO PARA QUEM SABE
=========================================== */
.vac-paraquem {
    background: var(--jvc-bg);
    overflow: hidden;
}

.vac-paraquem__inner {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(48px, 7vw, 130px);
    padding-right: 0;
    display: flex;
    flex-direction: column;
}

/* Linha superior: lista + imagem superior */
.vac-paraquem__row-top {
    display: flex;
    align-items: center;
    padding-top: clamp(48px, 6vh, 80px);
}

.vac-paraquem__lista-wrap {
    flex: 0 0 55%;
    padding-right: clamp(32px, 4vw, 72px);
    padding-bottom: clamp(32px, 4vh, 52px);
}

.vac-paraquem__col-sup {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Linha inferior: título + imagem inferior */
.vac-paraquem__row-bot {
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(48px, 6vh, 80px);
}

.vac-paraquem__titulo-wrap {
    flex: 0 0 70%;
}

.vac-paraquem__col-inf {
    display: block;
    height: 210px;
}

/* Lista de benefícios */
.vac-paraquem__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.vac-paraquem__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.vac-paraquem__item:last-child {
    border-bottom: none;
}

.vac-paraquem__icone {
    display: block;
    width: 24px;
    height: auto;
    flex-shrink: 0;
    opacity: 0.85;
}

.vac-paraquem__item-texto {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

/* Eyebrow + título */
.vac-paraquem__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.vac-paraquem__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    text-transform: uppercase;
    margin: 0;
}

.vac-paraquem__title--white {
    display: block;
    color: #fff;
}

.vac-paraquem__title--orange {
    display: block;
    color: var(--jvc-orange);
}

.vac-paraquem__img-sup {
    display: block;
    max-width: 100%;
    height: auto;
}

.vac-paraquem__img-inf {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: -130px;
}

/* ==========================================
   VACATION — SEÇÃO COMO FUNCIONA
=========================================== */
.vac-comofunciona {
    background: #f5ede8;
    padding-top: 0;
    overflow: hidden;
    padding: 100px 0;
}

.vac-comofunciona__inner {
    display: flex;
    flex-direction: column;
}

/* Linha das 3 colunas */
.vac-comofunciona__cols {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 3vw, 52px);
}

/* Colunas laterais (steps) */
.vac-comofunciona__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vh, 40px);
    padding-top: clamp(48px, 7vh, 90px);
    padding-bottom: clamp(40px, 5vh, 64px);
}

/* Separador só entre os dois steps */
.vac-comofunciona__step + .vac-comofunciona__step {
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding-top: clamp(24px, 3vh, 40px);
}

/* Coluna central: só imagem, centralizada verticalmente */
.vac-comofunciona__col--center {
    flex: 0 0 36%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vac-comofunciona__img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Título em linha separada, centralizado, margem negativa sobrepõe imagem */
.vac-comofunciona__titulo {
    text-align: center;
    margin-top: -clamp(40px, 6vh, 72px);
    padding-bottom: clamp(32px, 4vh, 52px);
    position: relative;
    z-index: 2;
}

.vac-comofunciona__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.9;
    text-transform: uppercase;
    text-align: center;
    width: 900px;
    max-width: 100%;
    margin: auto;
}

.vac-comofunciona__title--orange {
    display: block;
    color: var(--jvc-orange);
}

.vac-comofunciona__title--dark {
    display: block;
    color: #1a1a1a;
}

/* Step individual */
.vac-comofunciona__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-style: italic;
    color: rgba(200, 75, 26, 0.22);
    line-height: 1;
    margin-bottom: 14px;
}

.vac-comofunciona__step-body {
    padding-top: 0;
}

.vac-comofunciona__step-title {
    display: block;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.vac-comofunciona__step-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.65;
    color: #555;
    margin: 0;
}

/* ==========================================
   VACATION — SEÇÃO UM CLUBE
=========================================== */
.vac-umclube {
    position: relative;
    background: var(--jvc-bg);
    padding: clamp(60px, 8vh, 100px) 0 clamp(48px, 6vh, 80px);
    overflow: hidden;
}

.vac-umclube__linha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.vac-umclube__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vh, 64px);
}

/* Linha superior: 2 colunas, conteudo centralizado (fotos no tamanho exportado, sem sobrepor os textos) */
.vac-umclube__row-top {
    display: flex;
    justify-content: center;
    gap: clamp(40px, 6vw, 120px);
    align-items: flex-end;
}

.vac-umclube__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* sem isso as fotos esticam ate a largura do titulo */
    min-width: 0;
}

.vac-umclube__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.9;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 32px;
}

.vac-umclube__foto {
    display: block;
    max-width: 100%;
    height: auto;
}

.vac-umclube__subtitle {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1;
    margin-top: 32px;
    text-transform: uppercase;
}
.vac-umclube__title--orange { color: var(--jvc-orange); }

.vac-umclube__subtitle--orange { color: var(--jvc-orange); }
.vac-umclube__subtitle--white  { color: #fff; }

/* Linha inferior: botão centralizado */
.vac-umclube__row-bot {
    display: flex;
    justify-content: center;
}

.vac-umclube__btn {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 16px 44px;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.vac-umclube__btn:hover {
    border-color: var(--jvc-orange);
    color: var(--jvc-orange);
}

/* ==========================================
   HISTÓRIA — BANNER HERO
=========================================== */
.historia-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    /* sem overflow:hidden — foto da esquerda vaza para baixo intencionalmente */
}

.historia-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.historia-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 25, 0.52);
    z-index: 1;
}

.historia-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.historia-hero__inner {
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

.historia-hero__col-esq {
    flex: 0 0 48%;
    display: flex;
    align-items: flex-end;
}

.historia-hero__photo {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    margin-bottom: clamp(-120px, -12vh, -60px);
}

.historia-hero__col-dir {
    flex: 1;
    color: #fff;
    text-align: left;
    padding-bottom: clamp(60px, 10vh, 120px);
}

.historia-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
}

.historia-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 40px);
}

.historia-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.80);
    max-width: 460px;
}

/* ==========================================
   EXPERIÊNCIAS LAGOS — BANNER HERO
=========================================== */
.exp-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.exp-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

.exp-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

/* .exp-hero__inner: width/max-width/margin via selector compartilhado */
.exp-hero__inner {
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

/* --- Coluna esquerda: eyebrow acima da foto + foto + título sobreposto --- */
.exp-hero__col-esq {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.exp-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 14px;
}

.exp-hero__photo {
    display: block;
    position: relative;
    z-index: 1;
}

.exp-hero__title {
    font-family: 'Aftesto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 0.88;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    margin-top: -12vh;
    padding-bottom: clamp(24px, 4vh, 56px);
}

/* --- Coluna direita: apenas descrição, alinhada à direita --- */
.exp-hero__col-dir {
    flex: 0 0 35%;
    color: #fff;
    text-align: right;
    align-self: center;
    padding-bottom: clamp(40px, 8vh, 100px);
}

.exp-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 40ch;
    margin-left: auto;
    margin-bottom: 20px;
}

.exp-hero__desc:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .exp-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

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

    .exp-hero__photo {
        height: 38vh;
    }

    .exp-hero__title {
        font-size: var(--fs-hero);
        margin-top: -8vh;
    }

    .exp-hero__col-dir {
        order: 1;
        text-align: left;
        padding-bottom: 20px;
    }
}

/* ==========================================
   EXPERIÊNCIAS LAGOS — GRADE DE CARDS
=========================================== */
.exp-cards {
    background: #f0ede8 url('../img/lagos/experiencias/background-folhas-experiencias.png') no-repeat center center / cover;
    padding: clamp(64px, 9vh, 110px) 0;
}

.exp-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ---- Card ---- */
.exp-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Badge — apenas borda, sem fundo colorido */
.exp-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 66px;
    height: 66px;
    background: #748054;
    /* border: 1px solid rgba(255, 255, 255, 0.42); */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-card__badge img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* --- Frente (estado fechado) ---
   flex: 1 faz a frente preencher toda a altura do card
   (iguala automaticamente pela grid stretch) */
.exp-card__front {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 0.22s ease;
}

.exp-card--opening .exp-card__front {
    opacity: 0;
    pointer-events: none;
}

/* Frente permanece no fluxo quando aberto (mantém a altura do card) */
.exp-card--open .exp-card__front,
.exp-card--closing .exp-card__front {
    opacity: 0;
    pointer-events: none;
}

.exp-card__photo {
    display: block;
    width: 100%;
    height: auto;
}

/* Info ocupa o espaço restante e centraliza o conteúdo */
.exp-card__info {
    flex: 1;
    background: #748054;
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.exp-card__name {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
}

.exp-card__btn-ver,
.exp-card__btn-voltar {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.60);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 9px 26px;
    cursor: pointer;
    transition: background 0.2s;
}

.exp-card__btn-voltar {
    align-self: center;
    flex-shrink: 0;
}

.exp-card__btn-ver:hover,
.exp-card__btn-voltar:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* --- Verso (estado aberto)
   position absolute: preenche exatamente o espaço da frente,
   nunca encolhe nem expande o card */
.exp-card__back {
    position: absolute;
    inset: 0;
    background: #748054;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 60px 0 36px;
    text-align: center;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
}

.exp-card--open .exp-card__back {
    animation: exp-card-in 0.35s ease forwards;
    pointer-events: auto;
}

.exp-card--closing .exp-card__back {
    animation: exp-card-out 0.25s ease forwards;
    pointer-events: none;
}

@keyframes exp-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes exp-card-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

.exp-card__name-detail {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 22px;
    line-height: 1.35;
    margin-top: 70px;
}

.exp-cards .exp-card__desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 18px;
    text-align: left;
    max-width: 100%;
    width: 275px;
    margin: auto;
}

.exp-cards .exp-card__note {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 26px;
    text-align: left;
    max-width: 100%;
    width: 275px;
    margin: auto;
}

/* Tags centralizadas — width 100% garante que justify-content: center funcione */
.exp-cards .exp-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.exp-cards .exp-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    text-align: center;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 900px) {
    .exp-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .exp-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FOOTER | responsive
=========================================== */
@media (max-width: 900px) {
    .footer__top-inner {
        flex-direction: column;
    }

    .footer__newsletter {
        flex: none;
        width: 100%;
    }

    .footer__cols {
        flex-direction: column;
        gap: 32px;
    }

    .footer__form-row {
        flex-wrap: wrap;
    }

    .footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__selos {
        max-width: 100%;
    }
}

/* ==========================================
   PACOTES — BANNER HERO
=========================================== */
.pacotes-hero {
    width: 100%;
    background: #000;
    line-height: 0;
    position: relative;
}

.pacotes-hero__img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
}

/* Mesmo layout de header das outras páginas (grid 1fr auto 1fr do .hero__nav): logo sempre centralizado.
   Só fica absoluto por cima da imagem do banner. */
.pacotes-hero__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: normal;   /* .pacotes-hero usa line-height: 0 */
}

/* ==========================================
   ÁGUAS — BANNER HERO
=========================================== */
.aguas-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aguas-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.aguas-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 25, 0.50);
    z-index: 1;
}

.aguas-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.aguas-hero__inner {
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

.aguas-hero__col-esq {
    flex: 0 0 50%;
    display: flex;
    align-items: flex-end;
}

.aguas-hero__photo {
    display: block;
    max-width: 100%;
    height: auto;
}

.aguas-hero__col-dir {
    flex: 1;
    padding-bottom: clamp(60px, 10vh, 120px);
    color: #fff;
}

.aguas-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
}

.aguas-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 40px);
}

.aguas-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.80);
    max-width: 440px;
}

/* ==========================================
   ÁGUAS — MERGULHAR (3 colunas)
=========================================== */
.aguas-mergulhar {
    display: flex;
    min-height: 85vh;
}

.aguas-mergulhar__col-vazia {
    flex: 0 0 20%;
    background: #d6d0c8;
}

.aguas-mergulhar__col-texto {
    flex: 0 0 40%;
    background: #437895;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aguas-mergulhar__col-foto {
    flex: 0 0 40%;
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: end;
}

.aguas-mergulhar__foto {
    display: block;
    width: 100%;
    height: auto;
}

.aguas-mergulhar__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.88;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(24px, 3.5vh, 44px);
}

.aguas-mergulhar__body {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.85);
    max-width: 400px;
}

/* ==========================================
   ÁGUAS — ÁGUA, TERRA E MEMÓRIA (grade 2×2)
=========================================== */
.aguas-terra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.aguas-terra__titulo-cell {
    padding: clamp(60px, 8vh, 110px) clamp(40px, 5vw, 72px);
    display: flex;
    align-items: end;
    justify-content: end;
    padding-bottom: 0;
    padding-top: 240px;
    background-color: #3F5364;
}

.aguas-terra__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.88;
    color: #fff;
    text-transform: uppercase;
}

.aguas-terra__texto1-cell {
    width: 500px;
    max-width: 100%;
    background: #3F5364;
    padding: clamp(60px, 8vh, 110px) clamp(40px, 5vw, 72px);
    padding-left: 0;
}

.aguas-terra__texto2-cell {
    grid-column: 1;
    grid-row: 2;
    background: #437895;
    padding: clamp(40px, 6vh, 72px) clamp(40px, 5vw, 72px);
    display: flex;
    align-items: flex-start;
    align-self: start;
    position: relative;
    z-index: 2;
    margin-right: -50px;
    justify-content: flex-end;
}

.aguas-terra__corpo {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.82);
    max-width: 420px;
}


.aguas-terra__foto {
    display: block;
    margin-top: -200px;
    position: relative;
    z-index: 1;
}

/* ==========================================
   ÁGUAS — CTA FINAL
=========================================== */
.aguas-cta {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aguas-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.aguas-cta__content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
}

.aguas-cta__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(36px, 5vh, 60px);
}

.aguas-cta__btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.aguas-cta__btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.70);
    padding: 14px 32px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.aguas-cta__btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
}

/* ==========================================
   SPA — BANNER HERO (texto centralizado)
=========================================== */
.spa-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.spa-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.spa-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 20, 40, 0.50);
    z-index: 1;
}

.spa-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 120px;
}

.spa-hero__content {
    text-align: center;
    padding: 0 clamp(24px, 6vw, 100px);
}

.spa-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
}

.spa-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 36px);
}

.spa-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.80);
}

/* ==========================================
   SPA — FILOSOFIA (mulher deitada)
=========================================== */
.spa-filosofia {
    background: #f5f4f0;
    overflow: hidden;
}

/* Linha 1: 2 colunas */
.spa-filosofia__row1 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.spa-filosofia__col-esq {
    flex: 0 0 42%;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spa-filosofia__eyebrow {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #437895;
}

.spa-filosofia__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #2a3e4e;
    text-transform: uppercase;
}

.spa-filosofia__body {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.78;
    color: #4a5a66;
    max-width: 400px;
}

.spa-filosofia__quote {
    border-left: 3px solid #437895;
    padding-left: 18px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a5a66;
    line-height: 1.6;
    margin: 0;
    max-width: 360px;
}

.spa-filosofia__foto {
    display: block;
    height: auto;
    width: auto;
}

.spa-filosofia__caption {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: #7a8a94;
    text-align: right;
    padding: 12px clamp(20px, 3vw, 40px) 0;
    padding-right: 0;
}

/* Linha 2: box sobreposto */
.spa-filosofia__box-wrap {
    position: relative;
    z-index: 2;
    margin-top: -110px;
    padding-bottom: 80px;
}

.spa-filosofia__box {
    background: #437895;
    padding: 40px;
    max-width: 380px;
    margin: 0 auto;
}

.spa-filosofia__box-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 16px;
}

.spa-filosofia__box-body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.88);
}

/* ==========================================
   SPA — RITUAIS
=========================================== */
.spa-rituais {
    background: #f5f4f0;
    overflow: hidden;
}

.spa-rituais__row-texto {
    padding: clamp(60px, 8vh, 100px) clamp(40px, 6vw, 80px) clamp(40px, 5vh, 60px);
    max-width: 1000px;
}

.spa-rituais__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 0.92;
    color: #2a3e4e;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 32px);
}

.spa-rituais__intro {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.78;
    color: #4a5a66;
    max-width: 560px;
}

.spa-rituais__row-escuro {
    display: flex;
    min-height: 420px;
    max-width: 95%;
    margin: auto;
}

.spa-rituais__col-escuro {
    flex: 0 0 42%;
    background: #000;
    padding: clamp(50px, 7vh, 80px) clamp(40px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.spa-rituais__col-escuro-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.80;
    color: rgba(255, 255, 255, 1);
    max-width: 380px;
}

.spa-rituais__destaques-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.04em;
}

.spa-rituais__col-foto {
    flex: 1;
    overflow: hidden;
}

.spa-rituais__foto-escura {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.spa-rituais__box-wrap {
    position: relative;
    z-index: 2;
    margin-top: -50px;
    padding-bottom: 100px;
    display: flex;
    justify-content: center;
}

.spa-rituais__box {
    background: #456070;
    max-width: 420px;
    width: 100%;
}

.spa-rituais__lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spa-rituais__lista li {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 18px 30px;
}

.spa-rituais__lista li:last-child {
    border-bottom: none;
}

.spa-rituais__cta-wrap {
    display: flex;
    justify-content: center;
    padding: clamp(40px, 5vh, 60px) 24px clamp(60px, 8vh, 100px);
}

.spa-rituais__cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2a3e4e;
    border: 1px solid #2a3e4e;
    padding: 14px 40px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.spa-rituais__cta:hover {
    background: #2a3e4e;
    color: #fff;
}

/* ==========================================
   SPA — BANHOS
=========================================== */
.spa-banhos {
    background: #437895;
    overflow: visible;
}

.spa-banhos__row-titulo {
    padding: clamp(80px, 10vh, 120px) 5vw clamp(60px, 8vh, 100px);
    text-align: center;
}

.spa-banhos__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 0;
}

.spa-banhos__row-cols {
    display: flex;
    align-items: flex-end;
    padding: 0 5vw;
}

.spa-banhos__col-esq {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: clamp(24px, 4vw, 60px);
}

.spa-banhos__col-esq-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: clamp(28px, 4vh, 48px);
}

.spa-banhos__foto {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -120px;
}

.spa-banhos__col-dir {
    flex: 0 0 38%;
    padding-bottom: clamp(60px, 8vh, 100px);
}

.spa-banhos__col-dir-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: clamp(24px, 3vh, 40px);
}

.spa-banhos__destaques-label {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.spa-banhos__lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spa-banhos__lista li {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
}

/* ==========================================
   SPA — TEXTURAS QUE CUIDAM
=========================================== */
.spa-texturas {
    background: #f5f4f0;
    padding: 150px 0;
}

.spa-texturas__composicao {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 80px) 0;
}

.spa-texturas__titulo-esq {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    text-align: right;
    padding-right: clamp(20px, 3vw, 48px);
    padding-top: clamp(16px, 3vh, 40px);
}

.spa-texturas__img-wrap {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
}

.spa-texturas__img {
    display: block;
    height: auto;
}

.spa-texturas__titulo-dir {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    text-align: left;
    padding-left: clamp(20px, 3vw, 48px);
    padding-bottom: clamp(16px, 3vh, 40px);
}

.spa-texturas__line {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #1d3040;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -0.01em;
}

.spa-texturas__ponto {
    color: #437895;
}

.spa-texturas__intro {
    padding: clamp(60px, 8vh, 100px) clamp(80px, 16vw, 260px) clamp(40px, 5vh, 60px);
    text-align: center;
}

.spa-texturas__intro-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.80;
    color: #4a5a66;
    margin-bottom: clamp(24px, 3vh, 40px);
}

.spa-texturas__destaques-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    color: #4a5a66;
    letter-spacing: 0.05em;
    margin: 0;
}

.spa-texturas__procs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(40px, 5vh, 60px) clamp(40px, 5vw, 80px) clamp(80px, 10vh, 120px);
}

.spa-texturas__proc {
    border-top: 1px solid #c8c0b8;
    padding-top: clamp(20px, 3vh, 32px);
}

.spa-texturas__proc-num {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 300;
    color: #8a9aa5;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}

.spa-texturas__proc-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 400;
    color: #1d3040;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 clamp(12px, 2vh, 20px);
}

.spa-texturas__proc-body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.72;
    color: #4a5a66;
    margin: 0;
}

/* ==========================================
   SPA — CUIDADO FACIAL
=========================================== */
.spa-facial {
    background: #437895;
    position: relative;
    overflow: visible;
}

.spa-facial__img-topo {
    height: auto;
    z-index: 10;
    position: relative;
    margin-left: auto;
    margin-top: -270px;
    margin-bottom: 80px;
}

.spa-facial__cols {
    display: flex;
    align-items: flex-start;
}

.spa-facial__col-esq {
    flex: 0 0 57%;
    display: flex;
    flex-direction: column;
}

.spa-facial__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    margin: 0;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 80px) clamp(40px, 5vh, 60px);
}

.spa-facial__img-prod {
    display: block;
    padding-left:80px;
    height: auto;
}

.spa-facial__col-dir {
    flex: 0 0 43%;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 72px) clamp(40px, 5vh, 60px) clamp(32px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
}

.spa-facial__texto1 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.spa-facial__texto2 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    align-self: flex-end;
    text-align: left;
    max-width: 340px;
    padding-left: 35px;
}

.spa-facial__box-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 300px;
    margin-top: -60px;
}

.spa-facial__box {
    background: #eae7e2;
    padding: clamp(28px, 3.5vh, 44px) clamp(28px, 3vw, 48px);
    max-width: 400px;
    width: 100%;
}

.spa-facial__box-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #4a5a66;
    margin: 0 0 16px;
}

.spa-facial__box-lista {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}

.spa-facial__box-lista li {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #4a5a66;
    padding: 5px 0;
    line-height: 1.6;
}

/* ==========================================
   SPA — ESCOLHA PELO QUE VOCÊ DESEJA SENTIR
=========================================== */
.spa-escolha {
    background: #f5f4f0;
    padding: clamp(80px, 12vh, 140px) clamp(40px, 5vw, 80px);
}

.spa-escolha__intro {
    text-align: center;
    margin-bottom: clamp(60px, 8vh, 100px);
}

.spa-escolha__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #1d3040;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0;
}

.spa-escolha__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.spa-escolha__item {
    padding: clamp(16px, 2.5vh, 28px) clamp(16px, 2.5vw, 32px);
    text-align: center;
    border-left: 1px solid #c8c0b8;
}

.spa-escolha__item:first-child {
    border-left: none;
}

.spa-escolha__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: #437895;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.55;
    margin: 0 0 clamp(14px, 2vh, 24px);
}

.spa-escolha__desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    color: #4a5a66;
    line-height: 1.72;
    margin: 0;
}

@media (max-width: 900px) {
    .spa-escolha__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .spa-escolha__item {
        border-left: none;
        border-top: none;
    }
    .spa-escolha__item:nth-child(even) {
        border-left: 1px solid #c8c0b8;
    }
    .spa-escolha__item:nth-child(n+3) {
        border-top: 1px solid #c8c0b8;
    }
}

@media (max-width: 480px) {
    .spa-escolha__grid {
        grid-template-columns: 1fr;
    }
    .spa-escolha__item {
        border-left: none;
        border-top: 1px solid #c8c0b8;
    }
    .spa-escolha__item:first-child {
        border-top: none;
    }
}

/* ==========================================
   SPA — BISTRÔ & BOUTIQUE
=========================================== */
.spa-bistro {
    background: #f5f4f0;
    padding: 150px 0;
}

.spa-bistro__container {
    max-width: 1280px;
    margin: 0 auto;
}

.spa-bistro__row1 {
    display: flex;
    align-items: flex-start;
}

.spa-bistro__row2 {
    display: flex;
    align-items: flex-start;
    margin-top: -80px;
}

.spa-bistro__box {
    background: #437895;
    padding: clamp(36px, 5vw, 68px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
    flex: 0 0 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
}

.spa-bistro__box--2 {
    margin-top: 300px;
}

.spa-bistro__foto-wrap--1 {
    flex: 0 0 50%;
    margin-top: 60px;
}

.spa-bistro__foto-wrap--2 {
    flex: 0 0 50%;
}

.spa-bistro__foto {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 110px;
}

.spa-bistro__foto-wrap--2 {
    margin-top: 0;
    position:relative;
}

.spa-bistro__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
}

.spa-bistro__body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ==========================================
   IMPERIAL — HERO
=========================================== */
.imperial-hero {
    position: relative;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
}

.imperial-hero__bg {
    margin-top: -12px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.imperial-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.52) 100%);
}

.imperial-hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(50px, 8vh, 80px);
}

.imperial-hero__inner {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.imperial-hero__col-esq {
    flex: 0 0 50%;
}

.imperial-hero__col-dir {
    flex: 0 0 50%;
    padding-right: clamp(40px, 5vw, 80px);
}

.imperial-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 clamp(12px, 2vh, 20px);
    margin-bottom: 35px;
}

.imperial-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(20px, 3vh, 32px);
}

.imperial-hero__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    max-width: 340px;
    margin: 0;
}

/* ==========================================
   IMPERIAL — INTRO (2ª SECTION)
=========================================== */
.imperial-intro {
    background: #ece7da;
    overflow: visible;
    padding-bottom: clamp(80px, 10vh, 120px);
}

.imperial-intro__cols {
    display: flex;
    align-items: flex-start;
    padding: 0 clamp(80px, 10vw, 180px);
}

.imperial-intro__col-esq {
    flex: 0 0 47%;
    position: relative;
    z-index: 2;
    margin-top: clamp(-180px, -22vh, -300px);
}

.imperial-intro__img-esq {
    display: block;
    max-width: 100%;
    height: auto;
}

.imperial-intro__col-dir {
    flex: 0 0 53%;
    padding-left: clamp(40px, 5vw, 72px);
    padding-top: clamp(60px, 8vh, 100px);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vh, 64px);
}

.imperial-intro__texto {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.80;
    color: #2a2520;
    margin: 0;
}

.imperial-intro__texto strong {
    font-weight: 600;
    color: #2a2520;
}

.imperial-intro__img-dir {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================
   IMPERIAL — O VERDE (3ª SECTION)
=========================================== */
.imperial-verde {
    background: #ece7da;
    overflow: visible;
    padding-bottom: clamp(80px, 10vh, 120px);
}

.imperial-verde__cols {
    display: flex;
    align-items: end;
    padding: 0 clamp(80px, 8vw, 140px);
}

.imperial-verde__col-esq {
    flex: 0 0 52%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.imperial-verde__box {
    background: #271d35;
    padding: clamp(24px, 3vw, 44px);
    max-width: 440px;
    width: 100%;
    margin-left: auto;
    margin-top: clamp(-80px, -9vh, -120px);
    position: relative;
    z-index: 3;
    margin-right: 30px;
    margin-bottom: -50px;
}

.imperial-verde__box-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.imperial-verde__img {
    display: block;
    max-width: 100%;
    height: auto;
}

.imperial-verde__col-dir {
    flex: 0 0 48%;
    padding-left: clamp(40px, 5vw, 72px);
    display: flex;
    align-items: center;
}

.imperial-verde__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #1e1530;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
}

/* ==========================================
   IMPERIAL — PARA QUEM (4ª SECTION)
=========================================== */
.imperial-para-quem {
    background: #ece7da;
    padding-bottom: clamp(80px, 10vh, 120px);
}

.imperial-para-quem__roxa {
    background: #271d35;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 5vw, 80px) clamp(80px, 10vh, 110px);
}

.imperial-para-quem__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1280px;
    margin: 0 auto;
}

.imperial-para-quem__item {
    padding: 0 clamp(24px, 3vw, 40px);
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.imperial-para-quem__item:first-child {
    border-left: none;
}

.imperial-para-quem__texto {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.55;
    margin: 0;
}

.imperial-para-quem__img-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(-60px, -8vh, -100px);
    position: relative;
    z-index: 2;
    padding: 0 clamp(40px, 5vw, 80px);
}

.imperial-para-quem__img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================
   IMPERIAL — DESTINO TERMAL (5ª SECTION)
=========================================== */
.imperial-destino {
    background: #ece7da;
    overflow: visible;
}

/* Linha 1 */
.imperial-destino__row1 {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.imperial-destino__box {
    flex: 0 0 auto;
    width: clamp(320px, 46vw, 660px);
    margin-left: auto;
    background: #271d35;
    padding: clamp(40px, 5vw, 68px);
    margin-top: -190px;
    position: relative;
    z-index: 3;
    margin-right: -80px;
}

.imperial-destino__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #ece7da;
    text-transform: uppercase;
    line-height: 1.0;
    margin: 0;
}

.imperial-destino__img-dir {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: 60px;
}

/* Linha 2 */
.imperial-destino__row2 {
    display: flex;
    align-items: stretch;
}

.imperial-destino__col-esq {
    flex: 0 0 50%;
    background-size: cover;
    background-position: center;
    min-height: 480px;
}

.imperial-destino__col-dir {
    flex: 0 0 50%;
    background: #271d35;
    padding: clamp(60px, 8vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(32px, 4vh, 48px);
}

.imperial-destino__titulo2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: #ece7da;
    text-transform: uppercase;
    line-height: 1.0;
    margin: 0;
}

.imperial-destino__cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #ece7da;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(236, 231, 218, 0.55);
    padding: 14px 28px;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s;
}

.imperial-destino__cta:hover {
    background: rgba(236, 231, 218, 0.1);
}

/* ==========================================
   IMPERIAL — IMAGEM FINAL
=========================================== */
.imperial-final {
    display: block;
    line-height: 0;
}

.imperial-final__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================
   PACOTES — DARK HEADER
=========================================== */
.pacotes-dark {
    margin-top: -430px;
    position: relative;
    z-index: 2;
}

.pacotes-dark__header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.pacotes-dark__title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    color: #fff;
    text-transform: uppercase;
    line-height: 0.88;
    letter-spacing: -0.01em;
}

.pacotes-dark__subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 1.05vw, 0.92rem);
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: right;
    padding-bottom: 14px;
}

/* ==========================================
   PACOTES — LISTING
=========================================== */
.pacotes-listing {
    background: #DDDDDD;
    padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 100px);
}

/* ==========================================
   PACOTES — CARDS GRID
=========================================== */
.pacotes-listing__vazio {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    text-align: center;
    color: #3d4448;
    padding: 40px 0;
}

.pacotes-cards__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
}

/* ==========================================
   PACOTES — CARD
=========================================== */
.pacote-card {
    border: 1px solid #2F3E46;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pacote-card__img-wrap {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 0;
    background-color: #DDDDDD;
}

.pacote-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pacote-card__body {
    padding: 29px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pacote-card__period {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1a1a;
    padding-bottom: 20px;
    border-bottom: 1px solid #2F3E46;
}

.pacote-card__desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(0,0,0,0.60);
    flex: 1;
    margin-bottom: 16px;
}

.pacote-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pacote-card__btn {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    background: transparent;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pacote-card__btn:hover,
.pacote-card__btn:focus {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .pacotes-cards__inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .pacotes-dark__header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pacotes-dark__subtitle {
        text-align: left;
        padding-bottom: 0;
    }

    .pacotes-cards__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pacotes-cards__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   PÁGINAS INSTITUCIONAIS — BASE COMUM
   (sustentabilidade, como chegar, políticas, canal LGPD, trabalhe conosco)
========================================== */
.inst-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(420px, 62vh, 640px);
    background: #2F3E46;
    overflow: hidden;
}

.inst-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inst-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 15, 25, 0.55) 0%, rgba(5, 15, 25, 0.25) 40%, rgba(5, 15, 25, 0.7) 100%);
}

.inst-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.inst-hero__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    padding-bottom: clamp(40px, 8vh, 90px);
    color: #fff;
}

.inst-hero__eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

.inst-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: var(--fs-hero);
    line-height: 1;
    color: #fff;
    max-width: 900px;
    margin-bottom: 16px;
}

.inst-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin: 0;
}

.inst-section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: #2d3436;
    margin-bottom: 20px;
}

/* Texto corrido (políticas e blocos de texto) */
.inst-prose {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.85;
    color: #3d4448;
    min-width: 0;
    overflow-wrap: anywhere;
}

.inst-prose p,
.inst-prose ul,
.inst-prose ol {
    margin: 0 0 1.1em;
}

.inst-prose ul,
.inst-prose ol {
    padding-left: 1.3em;
}

.inst-prose li {
    margin-bottom: 0.45em;
}

.inst-prose strong {
    font-weight: 600;
    color: #2d3436;
}

.inst-prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.inst-prose a:hover {
    opacity: 0.75;
}

.inst-prose h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.45rem, 1rem + 1vw, 1.9rem);
    line-height: 1.2;
    color: #2d3436;
    margin: 2.2em 0 0.7em;
    padding-top: 1.2em;
    border-top: 1px solid rgba(47, 62, 70, 0.18);
    scroll-margin-top: 24px;
}

.inst-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.inst-prose h3 {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 600;
    color: #2d3436;
    margin: 1.8em 0 0.6em;
}

.inst-prose h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a5055;
    margin: 1.5em 0 0.5em;
}

.inst-prose--compacto {
    font-size: 0.9rem;
}

.inst-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.45);
    padding: 13px 22px;
    transition: background 0.2s, border-color 0.2s;
}

.inst-btn i {
    font-size: 1rem;
}

.inst-btn:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
    color: #2d3436;
}

/* ==========================================
   PÁGINAS DE TEXTO (políticas) — sumário + texto
========================================== */
.inst-texto {
    background: #e9e7e1;
    padding: clamp(48px, 7vw, 100px) 0;
}

.inst-texto__inner {
    width: var(--container-w);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.inst-texto__inner--sem-sumario {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.inst-texto__sumario {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-family: var(--font-body);
}

.inst-texto__sumario-titulo {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2d3436;
    border-bottom: 1px solid #2F3E46;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.inst-texto__sumario ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: sumario;
}

.inst-texto__sumario li {
    counter-increment: sumario;
}

.inst-texto__sumario a {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.45;
    color: #4a5055;
    text-decoration: none;
    transition: color 0.2s;
}

.inst-texto__sumario a::before {
    content: counter(sumario, decimal-leading-zero);
    font-size: 0.7rem;
    color: #8a9095;
    padding-top: 2px;
}

.inst-texto__sumario a:hover {
    color: #2d3436;
}

.inst-texto .inst-prose {
    background: #fff;
    padding: clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
    .inst-texto__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .inst-texto__sumario {
        position: static;
        max-height: none;
    }
}

/* ==========================================
   SUSTENTABILIDADE
========================================== */
.sust-intro {
    background: #e9e7e1;
    padding: clamp(56px, 8vw, 110px) 0;
}

.sust-intro__inner {
    width: var(--container-w);
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 90px);
}

.sust-intro__img {
    flex: 0 0 auto;
}

.sust-intro__img img {
    display: block;
    max-width: 100%;
    height: auto;
}

.sust-intro__texto {
    flex: 1;
    min-width: 0;
}

.sust-pilares {
    background: #2F3E46;
    padding: clamp(48px, 6vw, 80px) 0;
}

.sust-pilares__inner {
    width: var(--container-w);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 40px);
}

.sust-pilar {
    color: #fff;
    font-family: var(--font-body);
}

.sust-pilar i {
    font-size: 1.6rem;
    color: #b9c49c;
    margin-bottom: 16px;
}

.sust-pilar strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.sust-pilar p {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.sust-galeria {
    background: #e9e7e1;
    padding: clamp(48px, 6vw, 90px) 0;
}

.sust-galeria__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
}

.sust-galeria__inner img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .sust-intro__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sust-pilares__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .sust-galeria__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .sust-pilares__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   COMO CHEGAR
========================================== */
.chegar-mapa,
.chegar-distancias {
    background: #e9e7e1;
    padding: clamp(56px, 7vw, 100px) 0;
}

.chegar-mapa__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.chegar-mapa__endereco {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    color: #3d4448;
    margin-bottom: 28px;
}

.chegar-mapa__apps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}

.chegar-mapa__aviso {
    display: flex;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.6;
    color: #4a5055;
    background: rgba(47, 62, 70, 0.07);
    padding: 14px 16px;
    margin: 0;
}

.chegar-mapa__aviso i {
    color: #b07a2a;
    padding-top: 3px;
}

.chegar-mapa__frame iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 45vw, 480px);
    border: 0;
}

.chegar-acesso {
    background: #fff;
    padding: clamp(56px, 7vw, 100px) 0;
}

.chegar-acesso__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 90px);
}

.chegar-bloco__texto {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.75;
    color: #4a5055;
    margin-bottom: 24px;
}

.chegar-aeroportos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.chegar-aeroporto {
    margin: 0;
}

.chegar-aeroporto img {
    display: block;
    max-width: 100%;
    height: auto;
}

.chegar-aeroporto figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid #2F3E46;
    font-family: var(--font-body);
    color: #2d3436;
}

.chegar-aeroporto strong {
    font-weight: 500;
}

.chegar-aeroporto span {
    font-size: 0.85rem;
    color: #4a5055;
}

.chegar-rotas {
    display: flex;
    flex-direction: column;
}

.chegar-rota {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(47, 62, 70, 0.2);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #2d3436;
    text-decoration: none;
    transition: padding-left 0.2s;
}

.chegar-rota:first-child {
    border-top: 1px solid rgba(47, 62, 70, 0.2);
}

.chegar-rota i {
    color: #b0412a;
    font-size: 1.1rem;
}

.chegar-rota:hover {
    color: #2d3436;
    padding-left: 6px;
}

.chegar-distancias__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
}

.chegar-distancias__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 3 260px;
    column-gap: clamp(24px, 4vw, 60px);
}

.chegar-distancias__lista li {
    break-inside: avoid;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(47, 62, 70, 0.15);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    color: #3d4448;
}

.chegar-distancias__lista strong {
    font-weight: 500;
    color: #2d3436;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .chegar-mapa__inner,
    .chegar-acesso__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .chegar-aeroportos {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FORMULÁRIOS (canal LGPD, trabalhe conosco)
========================================== */
.inst-form-section {
    background: #e9e7e1;
    padding: clamp(56px, 7vw, 100px) 0;
}

.inst-form-section__inner {
    width: var(--container-w);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.inst-form-section__info h3 {
    font-size: 0.95rem;
}

.inst-form-wrap {
    background: #fff;
    padding: clamp(24px, 4vw, 48px);
    scroll-margin-top: 24px;
}

.inst-form {
    font-family: var(--font-body);
}

.inst-form__nota {
    font-size: 0.8rem;
    color: #7a8085;
    margin-bottom: 20px;
}

.inst-form__req {
    color: #b0412a;
}

.inst-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.inst-form__campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.inst-form__campo--largo {
    grid-column: 1 / -1;
}

.inst-form__campo > label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2d3436;
}

.inst-form__campo input[type="text"],
.inst-form__campo input[type="email"],
.inst-form__campo input[type="tel"],
.inst-form__campo input[type="url"],
.inst-form__campo select,
.inst-form__campo textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #222;
    background: #fff;
    border: 1px solid #c9ccce;
    border-radius: 0;
    padding: 11px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inst-form__campo select {
    text-overflow: ellipsis;
}

.inst-form__campo textarea {
    resize: vertical;
    min-height: 130px;
}

.inst-form__campo input:focus,
.inst-form__campo select:focus,
.inst-form__campo textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(30, 45, 61, 0.12);
}

.inst-form__campo.has-erro input,
.inst-form__campo.has-erro select,
.inst-form__campo.has-erro textarea,
.inst-form__campo.has-erro .inst-form__arquivo {
    border-color: #b0412a;
}

.inst-form__erro {
    font-size: 0.78rem;
    color: #b0412a;
}

.inst-form__dica {
    font-size: 0.75rem;
    color: #7a8085;
}

/* Upload */
.inst-form__arquivo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px dashed #b5b9bc;
    padding: 10px;
    cursor: pointer;
    min-width: 0;
}

/* é um <label> filho direto do campo: não herda o estilo dos rótulos */
.inst-form__campo > .inst-form__arquivo {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.inst-form__arquivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.inst-form__arquivo:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(30, 45, 61, 0.12);
}

.inst-form__arquivo-btn {
    flex-shrink: 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent);
    padding: 9px 14px;
}

.inst-form__arquivo-nome {
    font-size: 0.85rem;
    color: #4a5055;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Consentimento */
.inst-form__consentimento {
    margin: 24px 0;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.6;
    color: #4a5055;
}

.inst-form__consentimento label {
    display: flex;
    gap: 12px;
    cursor: pointer;
}

.inst-form__consentimento input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-accent);
}

.inst-form__consentimento a {
    color: var(--color-accent);
}

.inst-form__consentimento.has-erro span {
    color: #b0412a;
}

.inst-form__enviar {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent);
    border: none;
    padding: 15px 44px;
    cursor: pointer;
    transition: background 0.2s;
}

.inst-form__enviar:hover {
    background: #2c3f52;
}

.inst-form__alerta {
    font-size: 0.85rem;
    color: #8a2f1e;
    background: #fbeae6;
    padding: 12px 14px;
    margin-bottom: 18px;
}

/* Honeypot anti-spam (fora da tela) */
.inst-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.inst-form__sucesso,
.inst-form__aviso {
    font-family: var(--font-body);
    text-align: center;
    padding: 24px 0;
    color: #3d4448;
}

.inst-form__sucesso i {
    font-size: 2.4rem;
    color: #6f7a58;
    margin-bottom: 16px;
}

.inst-form__sucesso h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.8rem;
    color: #2d3436;
    margin-bottom: 10px;
}

.inst-form__aviso a {
    color: var(--color-accent);
}

@media (max-width: 900px) {
    .inst-form-section__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .inst-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================
   VISUALIZADOR DE PROGRAMAÇÃO (pacotes)
========================================== */
.prog-viewer {
    width: min(1180px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: none;
    background: #e9e7e1;
    color: #2d3436;
    overflow: hidden;
}

.prog-viewer::backdrop {
    background: rgba(17, 17, 17, 0.75);
}

.prog-viewer[open] {
    display: flex;
    animation: expDialogIn 0.25s ease;
}

.prog-viewer__inner {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 14px;
    width: 100%;
    height: calc(100dvh - 32px);
    padding: clamp(16px, 3vw, 28px);
}

.prog-viewer__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.prog-viewer__eyebrow {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a5055;
    margin: 0 0 4px;
}

.prog-viewer__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    line-height: 1.1;
    margin: 0;
}

.prog-viewer__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #2d3436;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.prog-viewer__close:hover {
    transform: rotate(90deg);
}

/* Abas Lagos / Jardins */
.prog-viewer__abas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.prog-viewer__abas:empty {
    display: none;
}

.prog-viewer__aba {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2d3436;
    background: transparent;
    border: 1px solid rgba(45, 52, 54, 0.45);
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.prog-viewer__aba[aria-selected="true"] {
    color: #fff;
    border-color: transparent;
}

.prog-viewer__aba--lagos[aria-selected="true"]   { background: #8D9974; }
.prog-viewer__aba--jardins[aria-selected="true"] { background: #43355C; }

/* Imagem + setas */
.prog-viewer__palco {
    position: relative;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* Imagem de conteúdo (cadastrada no admin): ajusta à área visível sem cortar */
.prog-viewer__figura {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y pinch-zoom;
}

.prog-viewer__figura img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    cursor: zoom-in;
}

/* Ampliada (toque/clique na imagem): tamanho de leitura, arrastando para navegar */
.prog-viewer__palco.is-zoom .prog-viewer__figura {
    display: block;
    overflow: auto;
    touch-action: auto;
}

.prog-viewer__palco.is-zoom .prog-viewer__figura img {
    max-width: none;
    max-height: none;
    width: max(100%, 1400px);
    cursor: zoom-out;
}

.prog-viewer__palco.is-zoom .prog-viewer__seta {
    display: none;
}

.prog-viewer__dica {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #fff;
    background: rgba(45, 52, 54, 0.8);
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
}

.prog-viewer__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: none;
    border-radius: 50%;
    background: rgba(45, 52, 54, 0.75);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.prog-viewer__seta:hover {
    background: #2d3436;
}

.prog-viewer__seta--ant  { left: 10px; }
.prog-viewer__seta--prox { right: 10px; }

.prog-viewer__seta[hidden] {
    display: none;
}

/* Rodapé */
.prog-viewer__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.prog-viewer__contador {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #4a5055;
}

.prog-viewer__acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.prog-viewer__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #2d3436;
    border: 1px solid rgba(45, 52, 54, 0.45);
    padding: 10px 16px;
    transition: background 0.2s, border-color 0.2s;
}

.prog-viewer__btn:hover {
    background: rgba(45, 52, 54, 0.07);
    border-color: #2d3436;
    color: #2d3436;
}

.prog-viewer__aviso {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #7a8085;
    margin: 0;
}

@media (max-width: 600px) {
    .prog-viewer {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
    }

    .prog-viewer__inner {
        height: 100dvh;
    }

    .prog-viewer__seta {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .prog-viewer__seta--ant  { left: 4px; }
    .prog-viewer__seta--prox { right: 4px; }

    .prog-viewer__rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .prog-viewer__acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .prog-viewer__btn {
        justify-content: center;
    }
}

/* ==========================================
   BARRA DE RESERVA (mobile) — só aparece no celular; regras em mobile.css
========================================== */
.nav-reserva {
    display: none;
}

/* ==========================================
   BOTÃO "RESERVAR" FIXO (desktop, home) — aparece quando o motor de reservas sai da tela.
   Comportamento em assets/js/main.js. No celular não aparece (lá existe a barra .nav-reserva).
========================================== */
.reservar-flutuante {
    position: fixed;
    top: 24px;
    right: 40px;
    z-index: 550;                /* abaixo do menu overlay e dos painéis (600+) */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.25s;
}

.reservar-flutuante.is-visivel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.reservar-flutuante:hover {
    background: #2c3f52;
}

@media (max-width: 767.98px) {
    .reservar-flutuante {
        display: none;
    }
}