/* version 1.0 */


.rio-page {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    background: transparent !important;
    color: #2c3e50;
    /* Base para telas entre os breakpoints de 900px e 1200px, que não
       redefinem esta variável — sem isso o padding-top do hero (que depende
       dela) fica inválido nessa faixa de largura e a logo/título deslizam
       para debaixo do header. */
    --rio-header-height: 72px;
}

.main-container.rio-page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    position: relative !important;
}

/* Garante full-bleed do topo (header + painel) sem recuo lateral.
   Usa 100vw (não 100%) porque .main-container.rio-page tem overflow-y:auto
   e gera sua própria barra de rolagem interna, que "rouba" espaço de um
   width:100% do lado direito. 100vw ignora essa barra e cola nas bordas reais. */
.rio-page > header,
.rio-page > .rio-hero {
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
}

.rio-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* No Android, a barra de navegação some/aparece durante a rolagem e o
       viewport recalcula; height:100% (equivalente a 100vh aqui) faz o fundo
       "pular" e revelar uma faixa em branco. 100dvh acompanha essa transição
       suavemente. height:100% acima é o fallback para navegadores sem suporte. */
    height: 100dvh;
    z-index: -1;
    /* Sem imagem por baixo — só a cor sólida (do admin via --city-fundo-cor,
       com fallback fixo aqui). --city-fundo-img só existe quando o admin
       escolhe explicitamente modo degradê/imagem para o fundo da cidade. */
    background-color: var(--city-fundo-cor, #02415a);
    background-image: var(--city-fundo-img, none);
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* O style.css compartilhado pinta a foto do Rio de Janeiro em DUAS camadas
   fixas (body::before e .main-container::after, ambas z-index:-2) por baixo
   de tudo. Como a cor de fundo desta página vem do admin com transparência
   (ex.: 88%), essa foto aparecia por baixo da cor sólida. Neutralizada aqui
   — só a cor sólida fica abaixo do conteúdo. Como este arquivo é carregado
   depois do style.css, a mesma especificidade basta para vencer. */
body::before,
.main-container::after {
    background-image: none;
}

html,
body {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remover display:flex do body (style.css) que causa offset no container */
body {
    display: block !important;
}

:root {
    --bg: transparent;
}

/* ===================================================== */
/* HEADER TRANSPARENTE SOBRE O HERO                      */
/* ===================================================== */
.rio-page header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 50;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    padding: 1.2rem clamp(0.5rem, 2vw, 2rem);
    box-sizing: border-box;
}

.rio-page header .main-container {
    padding: 0;
}

.rio-page header .main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rio-page nav a {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.rio-page header,
.rio-page header *,
.rio-page header nav a,
.rio-page header .lang-label,
.rio-page header .profile-btn,
.rio-page header .hamburger span {
    color: #fff;
}

.rio-page nav a:hover,
.rio-page nav a.active {
    color: #f0e5c0;
    border-bottom-color: #f0e5c0;
}

.mobile-menu-container {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(92vw, 360px);
    max-height: calc(100vh - 90px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
    display: none;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
}

.mobile-menu-container.open {
    display: block;
}

.mobile-menu-panel {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.24);
    transform: translateY(-10px);
    transition: transform 0.22s ease, opacity 0.22s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
}

.mobile-menu-container.open .mobile-menu-panel {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mobile-menu-title {
    font-weight: 600;
    font-size: 1rem;
    color: #2c3e50;
}

.mobile-menu-back,
.mobile-menu-close {
    border: none;
    background: transparent;
    color: #2c3e50;
    font-size: 1.1rem;
    cursor: pointer;
}

.mobile-menu-content {
    overflow-y: auto;
    flex: 1;
    padding: 0.75rem 0.85rem;
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 0 0 16px 16px;
}

.mobile-menu-view {
    display: none;
}

.mobile-menu-view.active {
    display: block;
}

.mobile-menu-view a,
.mobile-menu-launcher,
.mobile-lang-list li {
    display: block;
    padding: 0.75rem 0.6rem;
    border-radius: 8px;
    color: #234160;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.mobile-menu-view a:hover,
.mobile-lang-list li:hover,
.mobile-menu-launcher:hover {
    background: rgba(194,178,128,0.2);
}

.mobile-lang-list {
    display: block;
    position: static;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
}

.mobile-lang-list li {
    cursor: pointer;
}

.rio-page header.menu-open + .mobile-menu-container {
    display: block;
}

.rio-page .lang-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.rio-page .lang-list {
    background: rgba(255, 255, 255, 0.94);
    color: #0a2a4a;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.rio-page .lang-list li {
    color: #0a2a4a;
}

.rio-page .lang-list li:hover {
    background: rgba(0, 0, 0, 0.40);
    color: #072041;
}

.rio-page .search-bar {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.rio-page .search-bar input {
    color: #fff;
}

.rio-page .search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.rio-page .search-bar button {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.rio-page .search-bar button:hover {
    background: rgba(255, 255, 255, 0.35);
}

.rio-page .btn-signup {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    min-width: 130px;
    text-align: center;
}

/* field code 6 inputs */
.register-code-group {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.9rem; /* espaçamento abaixo antes do botão reenviar */
}

.register-code-input {
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    background: #fff;
    color: #333;
}

.register-code-input:focus {
    outline: none;
    border-color: #017cff;
    box-shadow: 0 0 0 2px rgba(1, 124, 255, 0.2);
}

.register-code-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2) !important;
}

.register-code-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

.rio-page .btn-signup:hover {
    background: rgba(255, 255, 255, 0.3);
}

.rio-page .hamburger span {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ===================================================== */
/* HERO                                                  */
/* ===================================================== */
.rio-hero {
    position: relative;
    /* Abaixo de 1024px sobra de propósito uma ponta visível da seção de
       tours logo abaixo, como dica de que há mais conteúdo por rolar. Por
       isso vh puro (sem piso em px que force cobrir 100% da viewport).
       A partir de 1024px o painel passa a cobrir a tela toda — ver o bloco
       "HERO — TELAS GRANDES". */
    min-height: 72vh;
    display: flex;
    /* flex-start (não center): com o hero bem mais alto que o conteúdo,
       centralizar empurrava o bloco pin+título para bem abaixo do header,
       deixando um vão vazio no topo. O espaçamento do header vem do
       padding-top de .rio-hero-content em cada breakpoint. */
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
    /* A foto em si vive em .rio-hero::before (ver abaixo) para poder ser
       recortada seguindo a onda sem cortar junto o overlay, a onda decorativa
       e o "Descubra mais". !important neutraliza o background inline que
       cidade-visual.js ainda escreve neste elemento (compat com Salvador/São
       Luís) — sem isso a foto retangular voltaria a aparecer por baixo do
       recorte. */
    background: transparent !important;
    /* Recorte em onda, compartilhado pela foto (::before) e pelo véu escuro
       (.rio-hero-overlay) — os dois cobrem o hero inteiro e precisam ficar
       opacos em cima e cortar exatamente na mesma curva embaixo.

       Não dá pra usar UMA curva só em % da altura do hero: a onda decorativa
       (.rio-hero-wave-divider) é posicionada em pixels fixos (bottom:58px +
       altura clamp(48px,9vw,90px)), e a altura real do hero varia demais
       entre telas (não é só 72vh — o conteúdo estica além disso) pra uma
       curva em % acompanhar. Por isso a máscara é 2 camadas UNIDAS (a
       composição padrão do mask-image já é união — não precisa de
       mask-composite, que é onde a tentativa anterior quebrou em alguns
       navegadores):
         camada 1: um retângulo 100% opaco cobrindo do topo do hero até o
                   topo da faixa da onda (tudo isso nunca é cortado);
         camada 2: dentro da faixa da onda (mesmos bottom:58px + clamp usados
                   pela onda decorativa de verdade), a região ACIMA da curva
                   da SEGUNDA linha (mais fraca/baixa, baseline 74) fica
                   opaca; abaixo dela fica transparente.
       As duas camadas juntas cobrem o hero inteiro sem sobra nem buraco. */
    --hero-wave-band-height: calc(58px + clamp(48px, 9vw, 90px));
    --hero-wave-band-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 148' preserveAspectRatio='none'%3E%3Cpath d='M0 74 C 240 34, 480 34, 720 62 S 1200 98, 1440 56 L1440 0 L0 0 Z' fill='white'/%3E%3C/svg%3E");
}

/* Foto de fundo do hero, recortada seguindo a curva de .rio-hero-wave-divider
   para que a imagem termine em onda em vez de um retângulo reto. */
.rio-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      var(--city-painel-bg, transparent);
    -webkit-mask-image: linear-gradient(#fff, #fff), var(--hero-wave-band-svg);
    mask-image: linear-gradient(#fff, #fff), var(--hero-wave-band-svg);
    /* +2px: sobrepõe de propósito a borda das duas camadas — sem isso sobra
       uma linha branca fina exatamente na costura entre o retângulo de cima
       e a faixa da onda (artefato de arredondamento na renderização). */
    -webkit-mask-size: 100% calc(100% - var(--hero-wave-band-height) + 2px), 100% var(--hero-wave-band-height);
    mask-size: 100% calc(100% - var(--hero-wave-band-height) + 2px), 100% var(--hero-wave-band-height);
    -webkit-mask-position: left top, left bottom;
    mask-position: left top, left bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
}

/* Escurecimento da base para dar contraste à onda dourada e ao chevron.
   Sempre ficou restrito à faixa perto do fundo (nunca cobriu o hero
   inteiro), então só precisa da MESMA faixa/curva da onda decorativa,
   sem precisar do retângulo superior que a foto/overlay usam. */
.rio-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hero-wave-band-height);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(4, 22, 40, 0) 0%,
        rgba(4, 22, 40, 0.35) 45%,
        rgba(4, 22, 40, 0.72) 78%,
        rgba(4, 22, 40, 0.92) 100%
    );
    -webkit-mask-image: var(--hero-wave-band-svg);
    mask-image: var(--hero-wave-band-svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    z-index: 2;
}


.rio-hero-overlay {
    position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  right: -1px;
    -webkit-mask-image: linear-gradient(#fff, #fff), var(--hero-wave-band-svg);
    mask-image: linear-gradient(#fff, #fff), var(--hero-wave-band-svg);
    /* +2px: sobrepõe de propósito a borda das duas camadas — sem isso sobra
       uma linha branca fina exatamente na costura entre o retângulo de cima
       e a faixa da onda (artefato de arredondamento na renderização). */
    -webkit-mask-size: 100% calc(100% - var(--hero-wave-band-height) + 2px), 100% var(--hero-wave-band-height);
    mask-size: 100% calc(100% - var(--hero-wave-band-height) + 2px), 100% var(--hero-wave-band-height);
    -webkit-mask-position: left top, left bottom;
    mask-position: left top, left bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    /* Mais escuro no topo (contraste com header/logo) e na base (contraste com
       texto/botão), com uma faixa central mais clara para revelar a foto. */
    background: linear-gradient(
        180deg,
    rgba(4, 20, 36, 0.72) 0%,
    rgba(10, 40, 60, 0.32) 42%,
    rgba(6, 28, 46, 0.50) 70%,
    rgba(4, 18, 32, 0.86) 100%
    );
  pointer-events: none;
    z-index: 1;
}

.rio-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1200px;
    padding: calc(var(--rio-header-height, 72px) + 16px) 2.5rem 7rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    animation: heroIntro 0.9s ease-out forwards;
}

/* -----------------------------------------------------------------
   LOCKUP DA MARCA
   Em telas grandes a marca fica deitada (símbolo à esquerda,
   tipografia à direita). Como a arte enviada pelo admin é um arquivo
   único e empilhado, o lockup deitado é montado recortando a MESMA
   imagem duas vezes. As caixas abaixo foram medidas sobre a arte
   original (701x356 px):
       símbolo + ondas ...... x124  y7    444x225
       "VISIT LENÇÓIS" ...... x22   y247  657x104
   Cada recorte é dimensionado apenas pela altura (--mark-h/--word-h);
   largura e deslocamento derivam dessas proporções. As três imagens
   mantêm a classe .rio-hero-logo para que cidade-visual.js continue
   trocando todas pelo logo vindo do servidor.
   ----------------------------------------------------------------- */
.rio-hero-brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.rio-hero-logo--full {
    display: block;
    width: min(320px, 62vw);
    height: auto;
    aspect-ratio: 701 / 356;
    object-fit: contain;
    margin: 0 auto 0.3rem;
    opacity: 1;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.85));
}

/* Os recortes só entram no lockup deitado (ver @media adiante). */
.rio-hero-brand-mark,
.rio-hero-brand-wordmark {
    display: none;
    position: relative;
    overflow: hidden;
    flex: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.85));
}

.rio-hero-brand-mark > .rio-hero-logo,
.rio-hero-brand-wordmark > .rio-hero-logo {
    position: absolute;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    filter: none;
}

.rio-hero-brand-mark {
    width: calc(var(--mark-h) * 1.9733);   /* 444 / 225 */
    height: var(--mark-h);
}

.rio-hero-brand-mark > .rio-hero-logo {
    width: calc(var(--mark-h) * 3.1156);   /* 701 / 225 */
    left: calc(var(--mark-h) * -0.5511);   /* -124 / 225 */
    top: calc(var(--mark-h) * -0.0311);    /*   -7 / 225 */
}

.rio-hero-brand-wordmark {
    width: calc(var(--word-h) * 6.3173);   /* 657 / 104 */
    height: var(--word-h);
}

.rio-hero-brand-wordmark > .rio-hero-logo {
    width: calc(var(--word-h) * 6.7404);   /* 701 / 104 */
    left: calc(var(--word-h) * -0.2115);   /*  -22 / 104 */
    top: calc(var(--word-h) * -2.375);     /* -247 / 104 */
}

.rio-hero-logo-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: 0.1rem 0 0;
    font-family: "Lato", "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(0.72rem, 2.4vw, 0.95rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.rio-hero-logo-sub::before,
.rio-hero-logo-sub::after {
    content: '';
    display: block;
    width: clamp(26px, 8vw, 56px);
    height: 1px;
    background: #e0b653;
}

/* Bloco de texto alinhado à esquerda (logo permanece centralizada acima). */
.rio-hero-text {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.rio-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(2.1rem, 6.2vw, 5.5rem);
    color: #fdfbf7;
    text-transform: none;
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0.4rem 0 0.2rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* Trechos dourados dentro da descrição (vêm marcados em translations.js). */
.rio-hero-accent {
    color: #e8c473;
}

#rioHeroDesc {
    color: #ffffff !important;
}

.rio-hero-content .btn-book {
    /* z-index acima das duas ondas decorativas (.rio-hero-wave-divider,
       z-index:4) — sem isso a onda passava por cima do botão em telas onde
       o hero encolhe e as duas se sobrepõem. */
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    width: auto;
    min-width: 0;
    margin: 1.1rem 0 0;
    padding: 0.75rem 1.7rem 0.75rem 0.75rem;
    border: none;
    color: #123049;
    background: linear-gradient(180deg, #f7cf72 0%, #edbb4f 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(0.85rem, 3vw, 1rem);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Badge circular escuro com a bússola, à esquerda do rótulo. */
.rio-hero-content .btn-book::before {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.35em;
    height: 2.35em;
    border-radius: 50%;
    background: #123049;
    color: #f5c95f;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f14e";
    font-size: 0.95em;
    line-height: 1;
}

@media (min-width: 1200px) {
    .rio-hero-content {
    padding-top: calc(var(--rio-header-height, 72px) + 2px);
    margin-top: 0;
    }

    .rio-hero-content .btn-book {
        width: auto;
        padding: 0.6rem 1.6rem 0.6rem 0.6rem;
        max-width: 420px;
        overflow: visible;
        text-overflow: clip;
    }
}

.rio-hero-content .btn-book:hover,
.rio-hero-content .btn-book:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    color: #123049;
}

.rio-city-highlight {
    display: block;
    color: #fdfbf7;
    text-transform: none;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.5px;
}

.rio-hero-location {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: "Lato", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(0.95rem, 3.4vw, 1.35rem);
    color: #e0b653;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0.15rem 0 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Fio dourado curto só à esquerda do local, como na referência. */
.rio-hero-location::before {
    content: '';
    flex: none;
    width: clamp(24px, 3.2vw, 46px);
    height: 1px;
    background: currentColor;
    opacity: 0.9;
}

.rio-hero-desc {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    color: #edf1f3;
    font-size: clamp(0.98rem, 1.55vw, 1.4rem);
    line-height: 1.75;
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin: 0.3rem 0 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    display: block;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.rio-hero-wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;
    width: 100%;
    height: clamp(48px, 9vw, 90px);
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.rio-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.rio-hero-scroll-label {
    font-family: "Lato", "Montserrat", sans-serif;
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #e0b653;
}

/* A seta pulsa sozinha — o wrapper carrega o translateX(-50%) da centralização. */
.rio-hero-scroll > .fa {
    animation: rioScrollBounce 2s ease-in-out infinite;
}

@keyframes rioScrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(7px); opacity: 1; }
}

/* =====================================================
   HERO — TELAS GRANDES
   Composição de referência: conteúdo encostado à esquerda,
   marca em lockup deitado e o lado direito da foto aberto.
   ===================================================== */
@media (min-width: 1024px) {
    /* Aqui o painel cobre a tela inteira, como na referência. A "ponta
       visível da seção de baixo" que servia de dica de rolagem (ver
       comentário em .rio-hero) foi substituída pela dica explícita
       "Descubra mais" + seta animada, que cumpre o mesmo papel. */
    .rio-hero {
        min-height: 100vh;
    }

    /* O escurecimento passa a vir da esquerda (onde mora o texto) em vez de
       ser uma faixa horizontal, deixando as dunas visíveis à direita. */
    .rio-hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(4, 20, 36, 0.55) 0%,
                rgba(4, 20, 36, 0.05) 30%,
                rgba(4, 20, 36, 0.05) 58%,
                rgba(4, 18, 32, 0.88) 100%),
            linear-gradient(95deg,
                rgba(5, 22, 40, 0.90) 0%,
                rgba(5, 22, 40, 0.68) 28%,
                rgba(5, 22, 40, 0.28) 52%,
                rgba(5, 22, 40, 0.04) 74%,
                rgba(5, 22, 40, 0) 100%);
    }

    .rio-hero-content {
        max-width: none;
        align-items: flex-start;
        text-align: left;
        padding-left: clamp(3rem, 12vw, 15rem);
        padding-right: 3rem;
        padding-bottom: 8rem;
    }

    /* Troca a arte inteira pelos dois recortes, lado a lado. */
    .rio-hero-brand {
        --mark-h: clamp(60px, 5.9vw, 96px);
        --word-h: clamp(34px, 3.35vw, 55px);
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: clamp(10px, 1.2vw, 20px);
        margin-bottom: clamp(0.6rem, 1.6vw, 1.4rem);
    }

    .rio-hero-logo--full {
        display: none;
    }

    .rio-hero-brand-mark,
    .rio-hero-brand-wordmark {
        display: block;
    }

    .rio-hero-brand-word {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .rio-hero-logo-sub {
        font-size: clamp(0.62rem, 0.9vw, 0.82rem);
        letter-spacing: 0.26em;
        gap: 0.7rem;
    }

    .rio-hero-logo-sub::before,
    .rio-hero-logo-sub::after {
        width: clamp(20px, 2.2vw, 38px);
    }

    .rio-hero-text {
        max-width: min(640px, 46vw);
        margin: 0;
    }

    .rio-hero-title {
        margin: 0.5rem 0 0.6rem;
    }

    .rio-hero-location {
        margin-top: 0;
    }

    .rio-hero-desc {
        margin-top: 1.1rem;
    }

    .rio-hero-content .btn-book {
        margin-top: 1.9rem;
    }
}



/* ===================================================== */
/* SEÇÃO DE AVISO (modal)                                */
/* ===================================================== */
.rio-notice {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
}

.rio-notice-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    background: linear-gradient(120deg, #c2b280 0%, #f0e5c0 45%, #c2b280 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
}

.rio-notice-text {
    text-align: left;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 2.5rem 3rem;
    max-width: 600px;
}

.rio-notice-text p {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.6rem;
}

.rio-notice-text p:last-child {
    margin-bottom: 0;
}

.rio-notice-text i {
    color: #C2B280;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}

.rio-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rio-notice-text .btn-proceed {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 60px;
    background: #C2B280;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.2s;
}

.rio-notice-text .btn-proceed:hover {
    background: #b5a370;
    transform: scale(1.03);
}

.rio-notice-text .btn-dont-show {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 60px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    border: none;
    transition: color 0.2s;
}

.rio-notice-text .btn-dont-show:hover {
    color: #fff;
}

/* ===================================================== */
/* SEÇÃO DE TOURS                                        */
/* ===================================================== */
.rio-tours {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    position: relative;
}

/* Seções dinâmicas (ex.: #expedicoes-compartilhadas, #expedicoes-privativas)
   só recebem cards via JS quando há tours daquela modalidade cadastrados no
   banco para a cidade. O grid tem só um comentário HTML como marcador de
   posição, então :empty não pega (o comentário + a quebra de linha ao redor
   contam como texto); por isso a checagem real é feita em JS (ver
   Lencoismaranhenses.js) e esta classe só existe para o JS aplicar. */
.rio-tours.rio-tours-vazia {
    display: none;
}

/* Textura sutil inspirada no calçadão — ondas em baixíssima opacidade.
   z-index:0 (em vez do z-index:auto padrão) garante que fique DEBAIXO dos
   cards: um pseudo-elemento position:absolute com z-index:auto pinta acima
   do conteúdo em fluxo normal do mesmo contexto de empilhamento, mesmo
   vindo antes no DOM — por isso o grid abaixo precisa de z-index:1. */
.rio-tours::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='48'%3E%3Cpath d='M0,12 C60,4 120,4 180,12 C240,20 300,20 360,12 L360,17 C300,25 240,25 180,17 C120,9 60,9 0,17Z' fill='%23000' opacity='0.025'/%3E%3Cpath d='M0,30 C60,22 120,22 180,30 C240,38 300,38 360,30 L360,35 C300,43 240,43 180,35 C120,27 60,27 0,35Z' fill='%23000' opacity='0.02'/%3E%3C/svg%3E") repeat;
    background-size: 360px 48px;
}

.rio-section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    color: #2c3e50;
    text-align: center;
    margin-bottom: 0.5rem;
}

.rio-section-divider {
    width: 80px;
    height: 3px;
    background: #C2B280;
    margin: 0 auto 1.5rem;
    border-radius: 2px;
}

.rio-divider-small {
    width: 50px;
}

.rio-section-subtitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: #8b6914;
    text-align: center;
    margin-bottom: 2rem;
}

.rio-paid-label {
    margin-top: 3rem;
}

.rio-paid-subtitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    color: #5a6c7d;
    text-align: center;
    margin-bottom: 2rem;
}

/* ===================================================== */
/* CARDS DE TOURS                                        */
/* ===================================================== */
.rio-tours-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
    margin-bottom: 1rem;
}

.rio-tour-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    overflow: hidden;
    position: relative; /* âncora de .rio-tour-float-actions */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.rio-tour-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.rio-tour-paid {
    border-color: rgba(194,178,128,0.3);
    background: #fffdf7;
}

@media (min-width: 1200px) {
  .rio-btn-reserve {
    min-width: 240px;
    max-width: 340px;
    font-size: 1.05rem;
    padding: 0.7rem 2.2rem;
  }
}

.rio-tour-images {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.rio-tour-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.rio-tour-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    transition: transform 1s ease;
}

.rio-tour-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
}

.rio-tour-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rio-tour-slider-dots {
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 10;
    pointer-events: auto;
}

.rio-tour-dot {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(44,62,80,0.35);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
}

.rio-tour-dot.active {
    background: rgba(255,255,255,1);
    transform: scale(1.25);
}

.rio-tour-slider-dots {
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 10;
    pointer-events: auto;
}

.rio-tour-dot {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(44,62,80,0.35);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
}

.rio-tour-dot.active {
    background: rgba(255,255,255,1);
    transform: scale(1.25);
}

.rio-tour-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.rio-tour-card:hover .rio-tour-images img {
    transform: scale(1.05);
}

.rio-tour-info {
    padding: 1.4rem 1.6rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rio-tour-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: #2c3e50;
    margin-bottom: 1rem;
}

.rio-tour-name-sub {
    font-weight: 600;
    font-size: 0.85em;
    color: #8b9db0;
}

.rio-tour-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    flex: 1;
}

.rio-tour-details li {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.rio-tour-details li:last-child {
    border-bottom: none;
}

.rio-tour-details i {
    color: #c9a96e;
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}

/* Textos longos (Inclui, Roteiro, etc.) ficam limitados a 3 linhas — o
   corte agora é feito no próprio TEXTO pelo JS (wireTourDetailToggles, busca
   binária), não visualmente por CSS, porque só assim "Ler mais" termina
   colado no fim do texto, na mesma linha (pedido explícito). O "…" e o botão
   já saem prontos do JS dentro de .rio-tour-detail-value / .rio-tour-detail-line
   — aqui só é preciso deixar tudo fluir normalmente. */
.rio-tour-detail-line {
    display: block;
    width: 100%;
    line-height: 1.5;
}

.rio-tour-detail-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.35em;
    color: #1da194;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.rio-tour-detail-toggle.rio-detail-visible {
    display: inline;
}

.rio-tour-details strong {
    color: #2c3e50;
}

/* Inclui/Roteiro: parágrafos, listas com ✓/✕/* e negrito digitados no
   admin. Clamp aqui é só visual (max-height), diferente do corte por
   caractere usado no texto puro acima, porque agora o conteúdo é HTML. */
.rio-tour-detail-rich-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.rio-tour-detail-richbody {
    flex: 1 1 100%;
    max-height: 4.6em;
    overflow: hidden;
    margin-top: 0.2rem;
}

.rio-tour-detail-rich-item.rio-detail-expanded .rio-tour-detail-richbody {
    max-height: none;
}

/* Parágrafo puro (sem lista): o corte agora é feito no próprio texto pelo
   JS, igual ao texto simples — o max-height daqui atrapalharia a medição
   (o scrollHeight já viria pré-cortado em 3 linhas mesmo com o texto real
   menor) e é desativado por essa classe (ver wireTourDetailToggles). */
.rio-tour-detail-richbody.rio-tour-detail-richbody-textcut {
    max-height: none;
    overflow: visible;
}

.rio-tour-detail-paragraph {
    margin: 0 0 0.4em;
}

.rio-tour-detail-paragraph:last-child {
    margin-bottom: 0;
}

.rio-tour-detail-list {
    list-style: none;
    margin: 0 0 0.4em;
    padding: 0;
    border-bottom: none !important;
}

.rio-tour-detail-list:last-child {
    margin-bottom: 0;
}

.rio-tour-detail-list li {
    border-bottom: none !important;
    padding: 0.1rem 0 0.1rem 1.35em;
    position: relative;
}

.rio-tour-list-check::before,
.rio-tour-list-cross::before,
.rio-tour-list-dot::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.rio-tour-list-check::before {
    content: '✓';
    color: #1da194;
}

.rio-tour-list-cross::before {
    content: '✕';
    color: #c0392b;
}

.rio-tour-list-dot::before {
    content: '•';
    color: #c9a96e;
}

.rio-tour-detail-toggle-rich {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ===================================================== */
/* AÇÕES DO TOUR (mapa + reservar)                       */
/* ===================================================== */
.rio-tour-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.8rem;
}

/* "Ver no Mapa" e "Avaliações" (mesma classe rio-link-map) encolhem e
   truncam com reticências quando faltar espaço na linha — o botão
   "Reservar Agora" nunca deve ser cortado (ver .rio-btn-reserve abaixo). */
.rio-link-map {
    color: #1da194;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.rio-link-map:hover {
    color: #C2B280;
}

.rio-link-map i {
    margin-right: 0.3rem;
}

.rio-link-map {
    order: 0;
}

.rio-btn-reserve {
    order: 1;
}

/* Ícones flutuantes do card (compartilhar + favoritar) — ficam alinhados à
   direita, na divisão entre a foto e o bloco de informações. A barra é filha
   do .rio-tour-card (não de .rio-tour-images, que tem overflow:hidden pra
   recortar a foto no 16/9 e cortaria os botões): ela cobre exatamente a área
   da foto repetindo o mesmo aspect-ratio, e cada botão desce metade da
   própria altura (translateY(50%)), ficando metade sobre a foto e metade
   sobre o texto. Ver ensureShareButton / ensureFavButton em site-shell.js.
   Os pontos do slideshow (.rio-tour-slider-dots) ficam centralizados e um
   pouco acima, então não disputam espaço com eles. */
.rio-tour-float-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-right: 1.1rem;
    pointer-events: none;
    z-index: 15;
}

/* Fundo escuro translúcido porque a foto por baixo muda de tour pra tour. */
.rio-link-share,
.rio-tour-fav {
    position: static;
    transform: translateY(50%);
    pointer-events: auto;
    flex: 0 0 auto;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Compartilhar: redondo, só o ícone. */
.rio-link-share {
    width: 34px;
    border-radius: 50%;
    padding: 0;
}

.rio-link-share:hover {
    background: #1da194;
    color: #ffffff;
}

/* Favoritar: pílula (retângulo de bordas bem arredondadas) com o coração e a
   quantidade de pessoas que favoritaram — mesmo formato do botão de curtir da
   galeria de relatos (.rio-relatos-like). A contagem vem de
   /get_tour_favoritos; favoritar exige login (ver TourInteracoes em
   tour-interacoes.js). */
.rio-tour-fav {
    width: auto;
    border-radius: 999px;
    padding: 0 0.75rem;
    gap: 0.35rem;
    font-weight: 700;
}

/* Coração: branco quando ainda não favoritado, vermelho quando já é
   favorito — o fundo da pílula continua o mesmo círculo escuro desfocado
   nos dois estados (não vira sólido vermelho), só o glifo do coração muda,
   pedido explícito. */
.rio-tour-fav i {
    color: #ffffff;
    transition: color 0.2s ease, transform 0.25s ease;
}

.rio-tour-fav:hover {
    background: rgba(0, 0, 0, 0.65);
}

.rio-tour-fav.is-fav i {
    color: #e63950;
}

.rio-tour-fav.just-faved i {
    animation: rioTourFavPop 0.4s ease;
}

@keyframes rioTourFavPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
}

/* Destaque temporário no card ao chegar por um link direto (?tour=<id>) —
   some sozinho depois de alguns segundos (ver scrollToDirectLinkTourIfNeeded
   em site-shell.js). */
.rio-tour-card--highlight {
    animation: rioTourCardHighlight 2.4s ease;
}

@keyframes rioTourCardHighlight {
    0%, 100% { box-shadow: none; }
    15%, 65% { box-shadow: 0 0 0 4px rgba(29, 161, 148, 0.55); }
}

.rio-btn-reserve {
    padding: 0.45rem 0.9rem;
    min-width: 120px;
    max-width: 220px;
    width: auto;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.65);
    color: #C2B280;
    border: 1px solid #C2B280;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(194, 178, 128, 0.25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    animation: pulse-reserve 2.4s ease-in-out infinite;
}

.rio-btn-reserve:hover,
.rio-btn-reserve:focus {
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.2);
    box-shadow: 0 12px 32px rgba(194, 178, 128, 0.55);
    background: rgba(255, 255, 255, 0.65);
    color: #C2B280;
}

.rio-btn-reserve.disabled,
.rio-btn-reserve[aria-disabled="true"] {
    opacity: 0.65;
    color: #6b7280;
    border-color: #6b7280;
    background: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
    animation: none;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

@keyframes pulse-reserve {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 20px rgba(194, 178, 128, 0.30);
        background: rgba(255, 255, 255, 0.70);
    }
    40% {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 12px 28px rgba(194, 178, 128, 0.45);
        background: rgba(255, 255, 255, 0.85);
    }
    60% {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 10px 26px rgba(194, 178, 128, 0.40);
        background: rgba(255, 255, 255, 0.75);
    }
}

/* ===================================================== */
/* FOOTER                                                */
/* ===================================================== */
.rio-footer {
    text-align: center;
    padding: 2rem 1rem 3rem;
    position: relative;
}

.rio-footer-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.6rem 1.5rem 1.8rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    align-items: center;
}

.rio-footer-card.hidden {
    display: none !important;
}

.rio-footer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.5rem;
}

.rio-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.rio-footer-nav a,
.rio-footer-nav .btn-signup {
    color: rgba(44,62,80,0.85);
    font-weight: 600;
    border: 1px solid rgba(44,62,80,0.15);
    background: rgba(255,255,255,0.75);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: background 0.2s, transform 0.2s;
}

.rio-footer-nav a:hover,
.rio-footer-nav .btn-signup:hover {
    background: rgba(194,178,128,0.25);
    transform: translateY(-1px);
}

.rio-footer .social-icons {
    justify-content: center;
}


.rio-footer .social-icons a {
    color: #2c3e50;
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}

.rio-footer .social-icons a:hover {
    background: #1da194;
    color: #fff;
    border-color: #1da194;
}

.rio-footer-text {
    color: rgba(44,62,80,0.5);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* ===================================================== */
/* RESPONSIVO                                            */
/* ===================================================== */
@media (max-width: 900px) {
    .rio-page {
        --rio-header-height: 68px;
    }

    .rio-page header {
        padding: 0.8rem 1.2rem;
    }

    .rio-hero {
        min-height: 70vh;
        padding-top: 0;
    }

    .rio-hero-content {
        padding: calc(var(--rio-header-height) + 12px) 1.5rem 6.5rem;
        gap: 0.45rem;
    }

    .rio-hero-content .btn-book {
        margin-top: 1rem; /* botão um pouco mais para baixo no mobile */
    }

    .rio-section-title {
        margin-top: 0.1rem;
    }

    .rio-page header.menu-open nav {
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .rio-page header.menu-open nav a {
        color: #fff;
    }

    .rio-page header.menu-open .lang-selector .lang-btn {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
    }

    .rio-tours-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rio-hero {
        /* Sem piso fixo — o painel encolhe para caber só o conteúdo, sem
           deixar espaço vazio entre o botão e a onda decorativa. A folga
           necessária pra onda não colidir com o botão vem do padding-bottom
           de .rio-hero-content, abaixo. */
        min-height: 0;
        padding-top: 0;
    }

    .rio-hero-content {
        padding: calc(var(--rio-header-height) + 10px) 1rem calc(var(--hero-wave-band-height, 148px) + 24px);
        gap: 0.4rem;
    }

}

/* ===================================================== */
/* TOAST DE NOTIFICAÇÃO (CANTO DIREITO)                  */
/* ===================================================== */
.award-toast {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    /* Sempre atrás do aviso "Informações Importantes" (.rio-notice,
       z-index:1000). */
    z-index: 900;
    max-width: 320px;
    width: min(92vw, 320px);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1rem 1rem 0.9rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.award-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.award-toast__dialog {
    position: relative;
}

.award-toast__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.75);
    font-size: 1.2rem;
    cursor: pointer;
}

.award-toast__title {
    font-size: 1.01rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: rgba(0, 0, 0, 0.9);
}

.award-toast__text {
    color: rgba(0, 0, 0, 0.8);
    font-size: 0.9rem;
    line-height: 1.4;
}

.award-toast__message {
    color: rgba(0, 0, 0, 0.9);
}

.award-toast__countdown {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
}

.award-toast__body {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 0.7rem;
    align-items: flex-start;
}

.award-toast__icon img {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.award-toast__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.4;
}

.award-toast__countdown {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
    .award-toast {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

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

    .rio-page header {
        padding: 0.6rem 0.8rem;
    }

    .rio-hero {
        /* Sem piso fixo — o painel encolhe para caber só o conteúdo, sem
           deixar espaço vazio entre o botão e a onda decorativa. A folga
           necessária pra onda não colidir com o botão vem do padding-bottom
           de .rio-hero-content, abaixo. */
        min-height: 0;
        padding-top: 0;
    }

    .rio-hero-content {
        margin-top: 0;
        padding: calc(var(--rio-header-height) + 34px) 1.35rem calc(var(--hero-wave-band-height, 148px) + 24px);
        gap: 0.4rem;
    }

    .rio-hero-title {
        font-size: clamp(2.6rem, 12vw, 4rem);
        margin-bottom: 0.15rem;
    }

    .rio-hero-location {
        font-size: clamp(0.75rem, 2.8vw, 0.95rem);
        letter-spacing: 2px;
    }

    .rio-hero-desc {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
        line-height: 1.7;
    }

    .rio-hero-content .btn-book {
        margin-top: 0.6rem;
    }

    .rio-tours-grid {
        grid-template-columns: 1fr;
    }

    .rio-notice {
        padding: 1rem;
    }

    .rio-notice-text {
        padding: 1.5rem;
    }

    .rio-tours {
        padding: 1.5rem 1rem 2rem;
    }

    .rio-footer-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .rio-tour-info {
        padding: 1rem 1.2rem 1.4rem;
    }

    .rio-tour-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        flex-wrap: wrap;
    }

    .rio-link-map {
        margin-right: auto;
    }

    .rio-btn-reserve {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 130px;
        text-align: center;
    }
}

@media (min-width: 601px) {
    .rio-tour-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .rio-btn-reserve {
        width: auto;
        min-width: 130px;
        max-width: 260px;
        flex-shrink: 0;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .rio-tour-actions {
        justify-content: space-between;
        gap: 0.75rem;
    }

    .rio-link-map {
        order: 0;
    }

    .rio-btn-reserve {
        order: 1;
        margin-left: auto;
        min-width: 160px;
        max-width: 360px;
        flex-shrink: 0;
        padding: 0.75rem 1.4rem;
        font-size: 0.95rem;
    }
}

/* ===================================================== */
/* ANIMAÇÃO DOS CARDS (scroll reveal)                    */
/* ===================================================== */
.rio-card-hidden {
    opacity: 0;
    transform: translateY(30px);
}

.rio-card-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Global styles for all pages */
:root {
  --bg: #f7f7f7;
  --text: #222;
  --muted: #555;
  --primary: #0b4d8b;
  --surface: #fff;
  --shadow: rgba(0, 0, 0, 0.08);
  --radius: 12px;
  --gap: 1.25rem;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Login modal */
body.modal-open {
  overflow: hidden;
}

body.modal-open > :not(.login-modal-overlay):not(.register-modal-overlay):not(.app-notification-overlay) {
  filter: blur(3px);
  transition: filter 0.2s ease;
}

.login-modal-overlay,
.register-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1500;
}

.login-modal-overlay.open,
.register-modal-overlay.open {
  display: flex;
}

.app-notification-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  z-index: 2147483000;
  padding: 1rem;
}

.app-notification-overlay.open {
  display: flex;
}

.app-notification {
  width: min(460px, 96%);
  background: #ffffff;
  border: 1px solid rgba(220, 220, 220, 0.95);
  border-radius: 18px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1.1rem 1.2rem 1rem;
  position: relative;
}

.app-notification__close {
  position: absolute;
  top: 0.35rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.app-notification__title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: #1f2d3d;
}

.app-notification__message {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #23364a;
  padding-right: 1rem;
}

.app-notification__media {
  margin: 0.6rem 0 0.8rem;
  text-align: center;
}

.app-notification__media img,
.app-notification__media video {
  width: min(160px, 70%);
  border-radius: 14px;
  box-shadow: none;
  border: none;
  background: transparent;
}

.app-notification__media video {
  max-height: 240px;
  object-fit: cover;
}

.app-notification__details {
  margin-top: 0.7rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(12, 56, 91, 0.08);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
}

.app-notification__summary {
  margin: 0;
  padding-left: 1rem;
  color: #1f3041;
  line-height: 1.45;
}

.app-notification__summary li {
  margin-bottom: 0.25rem;
}

.app-notification__summary li:last-child {
  margin-bottom: 0;
}

.app-notification__hint {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: #2a445e;
}

.app-notification-overlay.is-success .app-notification__title,
.app-notification-overlay.is-success .app-notification__message {
  color: #2e9e56;
  font-weight: 700;
}

.app-notification-overlay.is-error .app-notification__title {
  color: #b02a37;
}

/* ===== Minhas Reservas Modal ===== */
.my-reservations-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.my-reservations-overlay.open {
  display: flex;
}

.my-reservations-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem 1.6rem 1.4rem;
  width: min(520px, 96%);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.my-reservations-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  line-height: 1;
}

.my-reservations-close:hover {
  color: rgba(0, 0, 0, 0.8);
}

.my-reservations-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2d3d;
  margin: 0 0 1rem;
}

.my-reservations-empty {
  color: #6b7a8d;
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem 0;
}

.my-reservations-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: #f9fafb;
}

.my-reservations-tour {
  font-size: 0.97rem;
  font-weight: 700;
  color: #1a2d40;
}

.my-reservations-date,
.my-reservations-detail {
  font-size: 0.88rem;
  color: #3b5168;
}

.my-reservations-detail a.my-reservations-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #1fac9c;
  font-weight: 700;
  text-decoration: none;
}

.my-reservations-detail a.my-reservations-map-link i {
  font-size: 0.92rem;
}

.my-reservations-detail a.my-reservations-map-link:hover {
  color: #11867c;
  text-decoration: underline;
}

.my-reservations-status {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  width: fit-content;
  background: #e8f0fe;
  color: #1558b0;
}

.my-reservations-status--confirmado {
  background: #d4edda;
  color: #1f7a3f;
}

.my-reservations-status--pendente {
  background: #fff3cd;
  color: #856404;
}

.my-reservations-status--cancelado {
  background: #f8d7da;
  color: #842029;
}

.my-reservations-actions {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.my-reservations-actions button {
  border: 1px solid #1a7a4a;
  background: #ffffff;
  color: #1a7a4a;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.my-reservations-actions button:hover {
  background: #1a7a4a;
  color: #ffffff;
}

.my-reservations-actions button.btn-cancel-reservation {
  border-color: #c0392b;
  color: #c0392b;
}

.my-reservations-actions button.btn-cancel-reservation:hover {
  background: #c0392b;
}

.reservation-edit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2300;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.reservation-edit-overlay.open {
  display: flex;
}

.user-data-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2300;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.user-data-overlay.open {
  display: flex;
}

.user-data-modal {
  width: min(420px, 96vw);
  background: #ffffff;
  border-radius: 14px;
  padding: 1rem;
  position: relative;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.user-data-close {
  position: absolute;
  top: 0.25rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(0,0,0,0.45);
}

.user-data-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.user-data-loading {
  margin-top: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #eef6ff;
  border: 1px solid #d6e8ff;
  color: #27517a;
  font-size: 0.88rem;
  font-weight: 600;
}

.user-data-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.user-data-photo-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8edf2;
  border: 2px solid #d6dce4;
}

.user-data-photo-upload {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a7a4a;
  cursor: pointer;
  text-decoration: underline;
}

.user-data-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
  color: #33485f;
}

.user-data-form input,
.user-data-form select {
  border: 1px solid #d6dce4;
  border-radius: 8px;
  padding: 0.48rem 0.55rem;
  font-size: 0.92rem;
  background: #fff;
}

.user-data-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.user-data-cancel,
.user-data-save {
  border: 1px solid #d0d7df;
  background: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.user-data-save {
  background: #1a7a4a;
  border-color: #1a7a4a;
  color: #fff;
}

.reservation-edit-modal {
  width: min(420px, 96vw);
  background: #ffffff;
  border-radius: 14px;
  padding: 1rem 1rem 0.9rem;
  position: relative;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.reservation-edit-close {
  position: absolute;
  top: 0.25rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
}

.reservation-edit-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: #1f2d3d;
}

.reservation-edit-form {
  display: grid;
  gap: 0.65rem;
}

.reservation-edit-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
  color: #33485f;
  font-weight: 600;
}

.reservation-edit-form input {
  border: 1px solid #d6dce4;
  border-radius: 8px;
  padding: 0.48rem 0.55rem;
  font-size: 0.92rem;
}

.reservation-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.reservation-edit-cancel,
.reservation-edit-save {
  border: 1px solid #d0d7df;
  background: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.reservation-edit-save {
  background: #1a7a4a;
  border-color: #1a7a4a;
  color: #fff;
}

/* ============================= */

.login-modal {
  width: min(420px, 92%);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 2rem 1.8rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  position: relative;
}

.login-modal__image {
  width: 100%;
  max-width: 240px;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.login-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.login-modal__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: #0b3c6d;
}

.login-modal__close {
  background: transparent;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
}

.login-modal__form {
  display: grid;
  gap: 1rem;
}

.login-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.register-step {
  display: none;
}

.register-step.active {
  display: block;
}

.login-modal__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
}

.login-modal__field input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 0.95rem;
  outline: none;
  transition: border 0.2s ease;
}

.login-modal__field--password .login-modal__password-wrapper {
  position: relative;
  width: 100%;
}

.login-modal__field--password input {
  padding-left: 2.5rem;
}

.login-modal__toggle-password {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-modal__toggle-password:hover {
  color: rgba(0, 0, 0, 0.85);
}

.login-modal__field input:focus {
  border-color: rgba(0, 77, 140, 0.8);
}

.login-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.login-modal__resend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.register-resend-button {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: none;
  background: rgba(11, 77, 139, 0.9);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.register-resend-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.register-resend-button:not(:disabled):hover {
  background: rgba(11, 77, 139, 1);
}

.login-modal__actions--row {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.login-modal__submit,
.login-modal__next,
.login-modal__back {
  padding: 0.85rem;
  border-radius: 999px;
  border: none;
  background: rgba(11, 77, 139, 0.95);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.login-modal__submit:hover,
.login-modal__next:hover,
.login-modal__back:hover {
  background: rgba(11, 77, 139, 1);
}

.login-modal__next.loading {
  position: relative;
  cursor: wait;
  opacity: 0.85;
  padding-right: 2.5rem;
}

.login-modal__next.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-top-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: login-button-spinner 0.8s linear infinite;
}

@keyframes login-button-spinner {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.login-modal__back {
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.login-modal__back:hover {
  background: rgba(0, 0, 0, 0.25);
}

.login-modal__forgot {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  align-self: flex-start;
}

.login-modal__forgot.loading {
  position: relative;
  opacity: 0.75;
  cursor: wait;
}

.login-modal__forgot.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -0.25rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-top-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: login-button-spinner 0.8s linear infinite;
}

.main-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

header .main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 0;
}

.header-spacer {
  flex: 1;
  min-width: 1rem;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative; /* allow dropdowns to position relative to the button container */
}

.nav-left nav {
  display: flex;
  gap: 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-left nav a {
  color: var(--text);
  transition: color 0.2s ease;
}

.nav-left nav a:hover,
.nav-left nav a:focus,
.nav-left nav a:focus-visible {
  color: #d8c8a0;
  outline: none;
  box-shadow: none;
}

/* Remove foco de destaque branco no header ao recarregar */
.rio-page header *,
.rio-page header button,
.rio-page header a {
  outline: none !important;
  box-shadow: none !important;
}

.lang-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

.lang-selector .lang-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  color: #d8c8a0;
}

.lang-selector .lang-btn .lang-label {
  color: #d8c8a0;
}

.lang-selector .lang-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: #0b3a66;
}

.lang-selector .lang-list li .lang-label {
  color: #0b3a66;
}

.lang-selector .lang-list li:hover {
  background: rgba(102, 100, 100, 0.40);
  color: #0b3a66;
}

.flag {
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.flag.flag-pt { background-image: url("https://flagcdn.com/w40/br.png"); }
.flag.flag-en { background-image: url("https://flagcdn.com/w40/us.png"); }
.flag.flag-fr { background-image: url("https://flagcdn.com/w40/fr.png"); }
.flag.flag-es { background-image: url("https://flagcdn.com/w40/es.png"); }
.flag.flag-it { background-image: url("https://flagcdn.com/w40/it.png"); }
.flag.flag-zh { background-image: url("https://flagcdn.com/w40/cn.png"); }
.lang-selector .lang-list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border-radius: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0b3a66;
  min-width: 170px;
  z-index: 2000;
  border: 1px solid rgba(11, 58, 102, 0.4);
  max-height: 280px;
  overflow-y: auto;
}

.lang-selector.open .lang-list {
  display: block;
}

.nav-left nav.open {
  display: flex;
  flex-direction: column;
  width: min(260px, 80vw);
  z-index: 2000;
}

.nav-left nav.open a {
  display: block;
  width: 100%;
}


.lang-selector .lang-list li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: #0b3a66;
}

.lang-selector .lang-list li:hover {
  background: rgba(255, 255, 255, 0.50);
  color: #0b3a66;
}

.hamburger {
  display: none;
  border: 0;
  background: transparent;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 25;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin: 0.35rem 0;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  header {
    padding: 0.5rem 0;
    position: relative;
  }

  .main-container {
    padding: 0 0.75rem;
  }

  .nav-left {
    gap: 0.6rem;
    display: flex;
    align-items: center;
  }

  /* Hide top nav links on mobile, show only via hamburger menu */
  .nav-left nav {
    display: none !important;
  }

  .hamburger {
    display: block;
    position: relative;
    order: -1;
    margin-right: 0.5rem;
    z-index: 30;
  }

  .profile-menu {
    position: relative;
    margin-left: auto;
    z-index: 30;
  }

  .header-dropdown,
  .nav-left nav.open,
  .lang-selector .lang-list,
  .profile-dropdown {
    background: rgba(255, 255, 255, 0.94);
    color: #0a2a4a;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .header-dropdown a,
  .nav-left nav.open a,
  .lang-selector .lang-list li,
  .profile-dropdown .profile-item,
  .profile-menu.open .profile-dropdown .profile-item {
    color: #0b3a66 !important;
    padding: 0.65rem 1rem;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .header-dropdown a:hover,
  .nav-left nav.open a:hover,
  .lang-selector .lang-list li:hover,
  .profile-dropdown .profile-item:hover,
  .profile-menu.open .profile-dropdown .profile-item:hover {
    color: #0b3a66 !important;
    background: rgba(0, 0, 0, 0.06);
  }

  .nav-left nav.open {
    display: flex;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding: 0.8rem 1rem;
    gap: 0.5rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 2000;
  }

  .lang-selector .lang-list,
  .profile-dropdown {
    padding: 0.4rem 0;
    margin: 0;
  }

  .lang-selector .lang-list li,
  .profile-dropdown .profile-item {
    padding: 0.6rem 1rem;
    font-weight: 600;
  }

  .nav-left nav.open a {
    color: #000;
  }
}

@media (min-width: 1024px) {
  .rio-page header .profile-user-info,
  .rio-page header .profile-user-info span[data-i18n="profile_hello"] {
    color: #0f2a57 !important;
  }
}

@media (max-width: 768px) {
  /* Força a exibição do menu em modo dropdown abaixo do hamburger */
  .nav-left nav.open {
    display: block !important;
    position: absolute !important;
    top: 100%; /* Aparece logo abaixo do header */
    left: 10px;
    background: white !important;
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    padding: 10px 0;
    z-index: 1000;
  }

  .nav-left nav.open a {
    display: block !important;
    color: #333 !important;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .nav-left nav.open a:last-child {
    border-bottom: none;
  }

  /* Força a exibição da lista de idiomas */
  .lang-selector.open .lang-list, 
  #langList.open {
    display: block !important;
    position: absolute !important;
    background: white !important;
    color: black !important;
    z-index: 10000 !important;
    top: 50px;
    right: 0;
    min-width: 150px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  }
}


@media (min-width: 900px) {
  .header-center {
    order: -1;
    justify-content: flex-start;
    flex: 0;
  }

  .lang-selector {
    margin-right: 1.5rem;
  }

  .header-spacer {
    display: none;
  }
}

@media (min-width: 1200px) {
  /* Só o espaçamento vertical aqui — o recuo lateral do hero em telas
     grandes é definido no bloco "HERO — TELAS GRANDES" (padding-left
     proporcional). Usar o atalho `padding` neste ponto sobrescreveria
     aquele recuo, já que esta regra vem depois no arquivo. */
  .rio-hero-content {
    padding-top: calc(var(--rio-header-height, 72px) + 20px);
    gap: 0.75rem;
  }

  #rioHeroDesc {
    font-size: 1.25rem;
    line-height: 1.75;
  }
}

/* Footer info card */
.footer-info {
  padding: 2rem 0;
}

.footer-info-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.8rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scroll-margin-top: 110px;
}

.footer-info-card.hidden {
  display: none !important;
}

.footer-info-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.footer-info-body {
  color: rgba(0, 0, 0, 0.85);
}

.hidden {
  display: none !important;
}

.reservation-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.reservation-modal {
  /* Paleta local do modal — teal, igual ao botão "Confirmar Reserva" que já
     existia (#1da194); o resto do site usa verde (#18b015)/azul (#0b3c6d),
     então isso fica isolado aqui em vez de virar variável global. */
  --res-accent: #1da194;
  --res-accent-dark: #178f84;
  --res-accent-light: #e5f6f4;
  --res-border: #e2e8f0;
  --res-text: #1f2937;
  --res-text-muted: #6b7280;

  /* Tudo dimensionado pra caber inteiro sem rolagem (nem vertical, nem
     horizontal) em qualquer aparelho — inclusive celular deitado, a tela
     mais baixa que existe na prática. Por isso os tamanhos abaixo usam
     clamp() amarrado à altura da tela (dvh) em vez de rem fixo: o modal
     encolhe sozinho conforme a tela fica mais baixa, sem precisar de uma
     media query por breakpoint. dvh (não vh) porque no mobile a barra de
     endereço do navegador some/aparece e muda a altura real disponível. */
  width: min(92vw, 520px);
  max-height: min(96dvh, 640px);
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(0.5rem, 3dvh, 1.4rem) clamp(0.9rem, 4vw, 1.4rem);
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.res-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: clamp(0.25rem, 1.6dvh, 0.9rem);
}

.res-modal-icon {
  flex: 0 0 auto;
  width: clamp(26px, 6dvh, 36px);
  height: clamp(26px, 6dvh, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--res-accent-light);
  color: var(--res-accent);
  font-size: clamp(0.8rem, 2.6dvh, 1rem);
}

.res-modal-heading {
  min-width: 0;
}

.reservation-modal h2 {
  margin: 0 0 0.1rem;
  font-size: clamp(0.86rem, 3.2dvh, 1.15rem);
  font-weight: 700;
  color: var(--res-text);
  line-height: 1.15;
}

.res-modal-subtitle {
  margin: 0;
  font-size: clamp(0.6rem, 2dvh, 0.8rem);
  color: var(--res-text-muted);
  line-height: 1.2;
}

.reservation-modal form {
  display: grid;
  gap: clamp(0.22rem, 1.4dvh, 0.7rem);
  flex: 1;
  min-height: 0;
  /* Fica como rede de segurança, não como plano: com os tamanhos acima o
     conteúdo deve sempre caber sem precisar rolar. Se algum aparelho real
     ainda assim não couber, é melhor um scroll discreto aqui do que
     conteúdo cortado ou vazando pra fora do modal. */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
}

.reservation-modal form::-webkit-scrollbar {
  width: 7px;
}

.reservation-modal form::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
}

/* Nome+Data e Hora+Quantidade (e agora Idioma+Celular) sempre lado a lado,
   em QUALQUER tamanho de tela, inclusive celular — pedido explícito: menos
   linhas empilhadas = menos altura total, o que também ajuda a nunca
   precisar rolar. */
.res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.5rem, 3vw, 0.9rem);
  align-items: end;
}

.res-field {
  display: flex;
  flex-direction: column;
  gap: clamp(0.08rem, 0.6dvh, 0.3rem);
  min-width: 0;
}

/* [hidden] sozinho (regra do navegador) empata em especificidade com
   .res-field e o navegador prioriza a folha de estilo da página — sem esta
   regra explícita, o campo "Hora" continuava ocupando espaço (e ficava
   visível) mesmo com o atributo hidden, porque .res-field { display:flex }
   vencia. */
.res-field[hidden] {
  display: none;
}

.reservation-modal label {
  font-size: clamp(0.58rem, 1.75dvh, 0.75rem);
  font-weight: 600;
  color: var(--res-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Ícone à esquerda, dentro do campo — input/select não aceitam filhos, então
   o ícone é posicionado por cima via wrapper relative + input com
   padding-left reservado pro espaço do ícone. */
.res-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.res-input-icon {
  position: absolute;
  left: 0.65rem;
  color: var(--res-accent);
  font-size: clamp(0.75rem, 2dvh, 0.9rem);
  pointer-events: none;
}

.reservation-modal input,
.reservation-modal select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(0.26rem, 1.3dvh, 0.6rem) 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--res-border);
  font-size: clamp(0.78rem, 2.1dvh, 0.88rem);
  color: var(--res-text);
  background: #fff;
  transition: border-color 0.15s ease;
}

.res-input-wrap input,
.res-input-wrap select {
  padding-left: 1.95rem;
}

.reservation-modal input:focus,
.reservation-modal select:focus {
  outline: none;
  border-color: var(--res-accent);
}

/* Setinha própria pro <select>, na cor do tema — a nativa do navegador não
   dá pra recolorir, e aqui ela também precisa deixar espaço à direita
   equivalente ao ícone da esquerda, pra ficar visualmente simétrico. */
.reservation-modal select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.95rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231da194'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 13px;
}

/* Caixa de destaque "Tour selecionado" — nome do tour vem sempre do próprio
   tour clicado (openReservationModal), nunca é fixo: cada tour mostra o seu. */
.res-tour-box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  background: #f4f8f9;
  border-radius: 10px;
  padding: clamp(0.3rem, 1.5dvh, 0.65rem) 0.7rem;
}

.res-tour-icon {
  flex: 0 0 auto;
  width: clamp(22px, 5dvh, 30px);
  height: clamp(22px, 5dvh, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  overflow: hidden;
  background: #ffffff;
  color: var(--res-accent);
  font-size: clamp(0.7rem, 2dvh, 0.85rem);
}

/* A arte de "Tour selecionado" (imagem/assets/img-tour-selecionado.png, 481x519)
   é redimensionada pra preencher exatamente a caixa quadrada acima: object-fit
   cover recorta o excedente do lado mais longo em vez de distorcer. */
.res-tour-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.res-tour-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.res-tour-label {
  font-size: clamp(0.6rem, 1.7dvh, 0.7rem);
  color: var(--res-accent-dark);
  font-weight: 600;
}

.res-tour-name {
  font-size: clamp(0.78rem, 2.2dvh, 0.92rem);
  font-weight: 700;
  color: var(--res-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calendário customizado da data de reserva — o popup nativo de
   <input type="date"> não é estilizável, então o campo vira um botão que
   abre este mini-calendário próprio, onde os dias em que o tour funciona
   (ver horarios_por_dia) ficam em verde. Estilizado igual aos demais campos
   (mesma borda/altura/ícone à esquerda) pra não destoar do restante do form. */
.res-date-display {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: clamp(0.26rem, 1.3dvh, 0.6rem) 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--res-border);
  font-size: clamp(0.78rem, 2.1dvh, 0.88rem);
  background: #fff;
  color: var(--res-text);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
}

/* Uma linha só, cortando com "…": em telas estreitas "Selecione uma data"
   quebrava em duas linhas, deixando este campo mais alto que o vizinho
   ("Nome") e desalinhando a dupla dentro do .res-grid. */
.res-date-display .res-date-display-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.res-date-display i {
  color: var(--res-accent);
  font-size: 0.9rem;
}

.res-date-display:hover,
.res-date-display:focus-visible {
  border-color: var(--res-accent);
}

.res-calendar-popover {
  z-index: 2100;
  width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
  padding: 0.75rem;
  font-size: 0.85rem;
  color: #1f2937;
}

.res-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.res-calendar-nav {
  border: none;
  background: rgba(11, 77, 139, 0.08);
  color: #0b4d8b;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.res-calendar-nav:hover {
  background: rgba(11, 77, 139, 0.18);
}

.res-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

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

.res-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  cursor: default;
}

.res-calendar-day--empty {
  visibility: hidden;
}

.res-calendar-day--available {
  background: rgba(34, 139, 87, 0.15);
  color: #1a7a4a;
  font-weight: 700;
  cursor: pointer;
}

.res-calendar-day--available:hover {
  background: rgba(34, 139, 87, 0.32);
}

.res-calendar-day--unavailable {
  color: #c1c7cf;
  cursor: not-allowed;
}

.res-calendar-day--selected {
  outline: 2px solid #1a7a4a;
  outline-offset: -2px;
}

.res-calendar-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: #4b5563;
}

.res-calendar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(34, 139, 87, 0.6);
  display: inline-block;
}

.reservation-modal-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: clamp(0.2rem, 1.4dvh, 0.7rem);
  padding-top: clamp(0.25rem, 1.4dvh, 0.8rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.reservation-modal-actions .btn-book {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: clamp(0.38rem, 1.8dvh, 0.7rem) 1rem;
  font-size: clamp(0.75rem, 2dvh, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Sem sombra nestes dois botões, nem em repouso nem no hover — .btn-book (a
   classe geral do site) traz uma sombra forte que não combina com o modal. */
.reservation-modal-actions .btn-book,
.reservation-modal-actions .btn-book:hover,
.reservation-modal-actions .btn-book:focus {
  box-shadow: none;
}

/* Cancelar — ação secundária, discreta (fundo transparente) */
.reservation-modal-actions button[type="button"] {
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  color: #555;
}

.reservation-modal-actions button[type="button"]:hover,
.reservation-modal-actions button[type="button"]:focus {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.35);
  color: #222;
  transform: none;
}

/* Confirmar Reserva — ação primária, preenchida na cor de destaque do site */
.reservation-modal-actions button[type="submit"] {
  background: #1da194;
  border: 1.5px solid #1da194;
  color: #ffffff;
}

.reservation-modal-actions button[type="submit"]:hover,
.reservation-modal-actions button[type="submit"]:focus {
  background: #178f84;
  border-color: #178f84;
  color: #ffffff;
  transform: translateY(-1px);
}

.footer-info-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

/* Links entre destinos no rodape. Herda tipografia e cor do proprio cartao —
   nao introduz cor, fonte nem espacamento novos: so organiza os links em
   linha, quebrando naturalmente no mobile. */
.rio-footer-destinos {
    /* O cartao do rodape e um grid de ate 3 colunas. Sem grid-column:1/-1 este
       bloco virava um 4o item e abria uma linha inteira nova (+214px de altura).
       Ocupando a largura toda, os tres links cabem numa unica linha e o
       acrescimo fica em poucas dezenas de pixels. */
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem 0.9rem;
    text-align: center;
    font-size: 0.82rem;
}

.rio-footer-destinos-titulo {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #02415a;
    font-weight: 700;
}

.rio-footer-destinos-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1rem;
}

.rio-page .rio-footer-destinos a {
    color: #02415a;
    text-decoration: none;
    text-shadow: none;
    opacity: 1;
    transition: opacity 0.2s;
}

.rio-footer-destinos a:hover,
.rio-footer-destinos a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.rio-footer-card-credit {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 1rem auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  width: auto;
}

.footer-credit-copyright {
  font-size: 1.05rem;
  color: #000;
  font-weight: 600;
}

.footer-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.footer-credit-link:hover .footer-credit-text,
.footer-credit-link:focus .footer-credit-text {
  text-decoration: underline;
}

.footer-credit-text {
  font-size: 1.05rem;
  color: #000;
  font-weight: 600;
}

.footer-credit-logo {
  max-width: 70px;
  height: auto;
  display: inline-block;
  transform: translateY(-2px);
  margin-left: 0.25rem;
}

.footer-info-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.78);
  transition: background 0.2s, transform 0.2s;
}

.footer-info-icons a:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}

.profile-menu {
  margin-left: auto;
}

.profile-btn {
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.3rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.profile-btn i {
  font-size: 1.4rem;
  color: #ffffff;
  line-height: 1;
}

.profile-btn-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-btn:hover {
  opacity: 0.8;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.15);
  padding: 0.6rem 0;
  min-width: 180px;
  z-index: 30;
}


.profile-menu.open .profile-dropdown {
  display: block;
}

.profile-item {
  display: block;
  padding: 0.65rem 1rem;
  color: #0b3a66 !important;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.profile-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0b3a66 !important;
}

.mobile-profile-dropdown {
  display: block !important;
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
}

.mobile-profile-dropdown .profile-item {
  display: block;
  color: #234160 !important;
  padding: 0.75rem 0.6rem !important;
  border-radius: 8px !important;
  background: transparent !important;
  text-decoration: none;
}

.mobile-profile-dropdown .profile-item:hover {
  background: rgba(194,178,128,0.2) !important;
}

.footer-card-up {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.footer-card-up i {
  color: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  animation: floatArrow 2.5s ease-in-out infinite;
}

.footer-card-up:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

@keyframes floatArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================== */
/* DEPOIMENTOS: quotes + galeria de relatos               */
/* ===================================================== */
.rio-testimonials-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.rio-testimonial-quote {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.rio-testimonial-icon {
  display: block;
  color: #c2b280;
  font-size: 1.4rem;
  opacity: 0.65;
  margin-bottom: 0.6rem;
}

.rio-testimonial-text {
  color: #4a5568;
  font-size: 0.98rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 1rem;
}

.rio-testimonial-author {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #2c3e50;
}

.rio-testimonial-author::before {
  content: '- ';
  color: #c2b280;
}

.rio-relatos-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.rio-relatos-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rio-relatos-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.rio-relatos-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.rio-relatos-item:hover img {
  transform: scale(1.06);
}

.rio-relatos-item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.rio-relatos-like {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  /* Ainda não curtida: coração branco. O fundo é escuro e desfocado pra ele
     não se perder na foto (que muda de item pra item) nem competir com o
     vermelho do estado curtido. */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.rio-relatos-like i {
  color: #ffffff;
  transition: transform 0.25s ease;
}

.rio-relatos-like:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.5);
}

.rio-relatos-like.is-liked {
  background: #c0392b;
  color: #fff;
}

.rio-relatos-like.is-liked i {
  color: #fff;
}

.rio-relatos-like.just-liked i {
  animation: relatosLikePulse 0.4s ease;
}

@keyframes relatosLikePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (max-width: 900px) {
  .rio-relatos-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .rio-relatos-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }

  .rio-testimonials-quotes {
    grid-template-columns: 1fr;
  }
}

/* Override final: container da página Lençóis em largura total */
.main-container.rio-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* "Não tem conta? Cadastrar" — verde em todos os modais de entrada. O tom
   #1a7f37 (e não o verde vivo dos botões) é proposital: o texto é pequeno
   e precisa de contraste suficiente sobre o fundo claro do modal. */
.login-modal__switch {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: #1a7f37;
}

.login-modal__switch button {
  background: none;
  border: none;
  color: #1a7f37;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}

/* Cards do modal "Tours Favoritos" (menu de perfil) — reaproveita o overlay
   e o título de .my-reservations-*, só os itens da lista são próprios.
   Ver openMyFavoritesModal em site-shell.js/Riodejaneiro.js. */
.my-favorites-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.my-favorites-card:last-child {
  border-bottom: none;
}

.my-favorites-thumb {
  width: 84px;
  height: 60px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
}

.my-favorites-info {
  min-width: 0;
}

.my-favorites-name {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2d3d;
}

.my-favorites-meta {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: #6b7a8d;
}

.my-favorites-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1da194;
  text-decoration: underline;
}

/* =========================================================
   GUIA DE VIAGEM (cartao do rodape, so na pagina dos Lencois)
   Substitui o antigo cartao de Informacoes/Outros destinos.
   Conteudo dos 4 itens e os links do rodape sao provisorios.
   ========================================================= */
.rio-guide-card {
    display: block;
    text-align: left;
}

.rio-guide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.rio-guide-eyebrow span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d5548;
}

.rio-guide-eyebrow span::after {
    content: '';
    width: 32px;
    height: 2px;
    background: #0d5548;
    opacity: 0.4;
}

.rio-guide-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    color: #02415a;
}

.rio-guide-subtitle {
    margin: 0 0 1.4rem;
    max-width: 640px;
    color: rgba(44, 62, 80, 0.75);
    font-size: 0.95rem;
    line-height: 1.5;
}

.rio-guide-grid {
    /* Esteira automatica: esta e so a "janela" que esconde o que passa dos
       limites. Quem se move e .rio-guide-track, por dentro dela, via
       animacao CSS continua. Sem overflow-x nem scroll manual de proposito
       - o usuario nao consegue arrastar/segurar a faixa em outro lugar. */
    overflow: hidden;
    margin-bottom: 1.4rem;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.rio-guide-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: max-content;
    /* Anda devagar e sem parar; o grupo de cards se repete 2x no HTML, entao
       mover exatamente metade da largura da faixa fecha o loop sem deixar
       buraco nem dar salto visivel quando reinicia do zero. */
    animation: rio-guide-scroll 34s linear infinite;
}

/* Passar o mouse ou tocar (:focus-within, pelo teclado) pausa a esteira -
   sem isso, ler o texto de um card ou clicar nele fica dificil com tudo
   deslizando. Ao soltar/tirar o mouse, ela retoma sozinha de onde parou. */
.rio-guide-grid:hover .rio-guide-track,
.rio-guide-grid:focus-within .rio-guide-track {
    animation-play-state: paused;
}

@keyframes rio-guide-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .rio-guide-track {
        animation: none;
    }
}

.rio-guide-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 230px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(2, 65, 90, 0.12);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rio-guide-item:hover,
.rio-guide-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(2, 65, 90, 0.15);
}

.rio-guide-item-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
}

.rio-guide-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rio-guide-item-num {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #0d5548;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.rio-guide-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.9rem 1rem;
}

.rio-guide-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.rio-guide-item-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #02415a;
    line-height: 1.25;
}

.rio-guide-item-head i {
    color: #0d5548;
    font-size: 0.85rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.rio-guide-item-desc {
    font-size: 0.82rem;
    color: rgba(44, 62, 80, 0.7);
    line-height: 1.4;
}

/* Prefixado com .rio-page para ganhar especificidade de ".rio-page nav a"
   (regra do menu do topo, em style.css, que tambem "pega" qualquer <nav>
   da pagina - mesmo problema que ja resolvemos no .rio-footer-destinos). */
.rio-page .rio-guide-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    padding: 1.1rem 0 0;
    border-top: 1px solid rgba(2, 65, 90, 0.12);
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0.9rem;
    background: none;
    order: initial;
}

.rio-page .rio-guide-links a {
    display: inline;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0d5548;
    text-decoration: none;
    text-shadow: none;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

.rio-guide-links a:hover,
.rio-guide-links a:focus-visible {
    text-decoration: underline;
}

.rio-guide-links a:not(:last-child)::after {
    content: '•';
    margin-left: 0.6rem;
    color: rgba(2, 65, 90, 0.35);
    font-weight: 400;
}

@media (max-width: 520px) {
    .rio-guide-top {
        flex-wrap: wrap;
    }
}

/* .footer-info-icons por padrao fica centralizado embaixo do texto (uso
   antigo). Aqui ele mora ao lado do rotulo "Guia de viagem", entao
   precisa ficar a direita, sem a margem superior, com espaco reservado
   pro botao circular "voltar ao topo" (posicionado em cima, absoluto). */
.rio-guide-top .footer-info-icons {
    justify-content: flex-end;
    margin-top: 0;
    padding-right: 2.6rem;
}

/* =========================================================
   PAINEL DE RESPOSTA (clique num card do Guia de Viagem)
   Ocupa o mesmo espaco/largura do carrossel; ver JS que alterna
   rioGuideGrid.hidden / rioGuideAnswer.hidden.
   ========================================================= */
/* [hidden] tem a mesma especificidade de uma classe (0,1,0), e como regra
   de autor sempre vence empate com o padrao do navegador (que tambem so
   aplica display:none via [hidden]) - sem esse seletor extra, o painel
   ficava sempre visivel mesmo com o atributo hidden presente. */
.rio-guide-answer[hidden] {
    display: none;
}

.rio-guide-answer {
    position: relative;
    min-height: 230px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(2, 65, 90, 0.12);
    border-radius: 16px;
    padding: 2.2rem 3rem;
    margin-bottom: 1.4rem;
}

.rio-guide-answer-text {
    margin: 0;
    color: #02415a;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 60ch;
}

.rio-guide-answer-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(2, 65, 90, 0.18);
    background: #fff;
    color: #0d5548;
    font-size: 0.95rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.rio-guide-answer-close:hover,
.rio-guide-answer-close:focus-visible {
    background: rgba(2, 65, 90, 0.08);
    transform: scale(1.06);
}

@media (max-width: 600px) {
    .rio-guide-answer {
        padding: 2.6rem 1.3rem 1.3rem;
        min-height: 190px;
    }
}