/* =====================================================================
   Roteiro Aberto — Design System
   ---------------------------------------------------------------------
   Minimalista, profissional e confortável. Tema claro + escuro via
   `data-bs-theme` (Bootstrap 5.3). As cores vivem em tokens (--ra-*) e
   são remapeadas para as variáveis do Bootstrap (--bs-*), então os
   componentes nativos se adaptam sozinhos aos dois temas.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens de tema
   ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    /* Marca (preenchimentos: botões, chips ativos → sempre texto branco) */
    --ra-primary: #c05a34;
    --ra-primary-hover: #a54a28;
    --ra-primary-rgb: 192, 90, 52;
    /* Marca aplicada a TEXTO/links/ícones sobre o fundo da página */
    --ra-primary-ink: #9d4324;
    /* Superfície tingida (hover de chips, realces suaves) */
    --ra-primary-soft: #f1ddce;
    --ra-accent: #566647;        /* verde-oliva (um tom mais escuro p/ contraste) */

    /* Neutros — fundo quente mais PROFUNDO para as superfícies claras se
       destacarem (antes tudo era quase branco e sumia). */
    --ra-bg: #eae1d2;            /* fundo da página (areia quente) */
    --ra-surface: #fdfbf7;       /* cards, navbar, inputs (off-white, não estourado) */
    --ra-surface-2: #e0d5c2;     /* superfícies sutis (chips, realces) */
    --ra-text: #231e18;          /* texto principal */
    --ra-text-muted: #595248;    /* texto secundário (mais legível) */
    --ra-border: #cfbfa9;        /* bordas/divisores claramente visíveis */
    --ra-shadow: rgba(58, 40, 26, .12);
    --ra-shadow-strong: rgba(58, 40, 26, .20);

    /* Hero e rodapé */
    --ra-hero-1: #7c3a22;
    --ra-hero-2: #c05a34;
    --ra-footer-bg: #211d1a;
    --ra-footer-text: #c8c0b6;

    /* Raio e tipografia */
    --ra-radius: 14px;
    --ra-radius-sm: 10px;
    --ra-radius-pill: 999px;
    --ra-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --ra-primary: #c8623b;
    --ra-primary-hover: #d9784f;
    --ra-primary-rgb: 200, 98, 59;
    --ra-primary-ink: #e79a76;   /* terracota clara: legível sobre fundo escuro */
    --ra-primary-soft: #38271e;
    --ra-accent: #9aa982;

    --ra-bg: #16120f;
    --ra-surface: #201b16;
    --ra-surface-2: #2a241d;
    --ra-text: #f0e9df;
    --ra-text-muted: #a89e92;
    --ra-border: #362f26;
    --ra-shadow: rgba(0, 0, 0, .45);
    --ra-shadow-strong: rgba(0, 0, 0, .6);

    --ra-hero-1: #241610;
    --ra-hero-2: #7c3a22;
    --ra-footer-bg: #100d0b;
    --ra-footer-text: #b8b0a6;

    color-scheme: dark;
}

/* ---------------------------------------------------------------------
   1b. Tema claro — profundidade
   Só no tema CLARO: as superfícies (cards, caixas, barra de busca) ganham
   uma sombra sutil de descanso para se separarem do fundo quente. O tema
   escuro já tem contraste natural e permanece exatamente como está.
   ------------------------------------------------------------------ */
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .ra-card,
[data-bs-theme="light"] .ra-near-cta,
[data-bs-theme="light"] .ra-searchbar {
    box-shadow: 0 1px 2px rgba(58, 40, 26, .05), 0 8px 22px rgba(58, 40, 26, .08);
}
/* Barra de busca compacta/reexpandida: sombra um pouco mais forte para
   flutuar sobre o conteúdo (sobrescreve a de descanso acima). */
[data-bs-theme="light"] .ra-searchbar.is-compact,
[data-bs-theme="light"] .ra-searchbar.is-fixed {
    box-shadow: 0 .5rem 1.6rem rgba(58, 40, 26, .22);
}
/* Divisor inferior da navbar mais perceptível no claro. */
[data-bs-theme="light"] .ra-navbar {
    border-bottom-color: color-mix(in srgb, var(--ra-border) 85%, transparent);
}

/* ---------------------------------------------------------------------
   2. Remapeamento para o Bootstrap (componentes nativos herdam o tema)
   ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--ra-bg);
    --bs-body-color: var(--ra-text);
    --bs-secondary-color: var(--ra-text-muted);
    --bs-tertiary-color: var(--ra-text-muted);
    --bs-tertiary-bg: var(--ra-surface-2);
    --bs-border-color: var(--ra-border);
    --bs-border-color-translucent: var(--ra-border);
    --bs-emphasis-color: var(--ra-text);
    --bs-heading-color: var(--ra-text);

    --bs-primary: var(--ra-primary);
    --bs-primary-rgb: var(--ra-primary-rgb);
    --bs-link-color: var(--ra-primary-ink);
    --bs-link-color-rgb: var(--ra-primary-rgb);
    --bs-link-hover-color: var(--ra-primary-hover);

    --bs-card-bg: var(--ra-surface);
    --bs-card-border-color: var(--ra-border);
    --bs-card-cap-bg: var(--ra-surface);

    --bs-font-sans-serif: var(--ra-font);
    --bs-body-font-family: var(--ra-font);

    --bs-border-radius: var(--ra-radius-sm);
    --bs-border-radius-lg: var(--ra-radius);
}

/* ---------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------ */
body {
    font-family: var(--ra-font);
    color: var(--ra-text);
    background-color: var(--ra-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--ra-text); letter-spacing: -0.015em; }
h1, .h1, h2, .h2 { font-weight: 700; }
/* Âncoras (#termos, #privacidade…) não ficam escondidas sob a navbar fixa. */
:target { scroll-margin-top: 90px; }

a { color: var(--ra-primary-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ra-primary-hover); }

hr { border-color: var(--ra-border); opacity: 1; }

::selection { background: rgba(var(--ra-primary-rgb), .22); }

/* Barra de rolagem discreta e no tom do tema */
* { scrollbar-color: var(--ra-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ra-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ra-text-muted); }

.text-primary { color: var(--ra-primary-ink) !important; }
.text-secondary, .text-body-secondary { color: var(--ra-text-muted) !important; }
.border { border-color: var(--ra-border) !important; }

/* Foco acessível e consistente com a marca */
.form-control, .form-select {
    background-color: var(--ra-surface);
    border-color: var(--ra-border);
    color: var(--ra-text);
    border-radius: var(--ra-radius-sm);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.form-control::placeholder { color: var(--ra-text-muted); opacity: .8; }
.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--ra-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--ra-primary-rgb), .22);
}

/* ---------------------------------------------------------------------
   4. Botões
   ------------------------------------------------------------------ */
.btn { --bs-btn-border-radius: var(--ra-radius-sm); font-weight: 600; }
.btn-lg { --bs-btn-border-radius: var(--ra-radius); }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ra-primary);
    --bs-btn-border-color: var(--ra-primary);
    --bs-btn-hover-bg: var(--ra-primary-hover);
    --bs-btn-hover-border-color: var(--ra-primary-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ra-primary-hover);
    --bs-btn-active-border-color: var(--ra-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--ra-primary);
    --bs-btn-disabled-border-color: var(--ra-primary);
    --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--ra-primary-ink);
    --bs-btn-border-color: color-mix(in srgb, var(--ra-primary) 55%, transparent);
    --bs-btn-hover-bg: var(--ra-primary);
    --bs-btn-hover-border-color: var(--ra-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ra-primary-hover);
    --bs-btn-active-border-color: var(--ra-primary-hover);
}
/* Botão claro para usar sobre o hero (fundo escuro, nos dois temas) */
.ra-btn-light {
    --bs-btn-color: var(--ra-text);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #f1ece6;
    --bs-btn-hover-border-color: #f1ece6;
    --bs-btn-hover-color: #1a1512;
    color: #211d1a;
}

.page-link { color: var(--ra-primary-ink); background-color: var(--ra-surface); border-color: var(--ra-border); }
.page-item.active .page-link { background-color: var(--ra-primary); border-color: var(--ra-primary); color: #fff; }

/* ---------------------------------------------------------------------
   5. Marca / logotipo
   ------------------------------------------------------------------ */
.ra-logo-dot { color: var(--ra-accent); }
.ra-logo-img { display: inline-block; border-radius: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   6. Navbar (limpa: superfície + borda inferior)
   ------------------------------------------------------------------ */
.ra-navbar {
    background-color: var(--ra-surface); /* fallback sólido */
    background-color: color-mix(in srgb, var(--ra-surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ra-border);
    transition: box-shadow .2s ease, background-color .2s ease;
}
/* Estado "rolado": sombra sutil (a barra fixa vira um topo distinto). */
.ra-navbar.is-scrolled {
    background-color: color-mix(in srgb, var(--ra-surface) 96%, transparent);
    box-shadow: 0 .35rem 1rem var(--ra-shadow);
}

/* Busca da navbar em formato "pílula" (usada nas páginas SEM hero). */
.ra-nav-search .form-control {
    border-radius: 999px 0 0 999px;
    border-right: 0;
}
.ra-nav-search .btn {
    border-radius: 0 999px 999px 0;
}

/* Quando a barra "morph" está ativa (páginas com hero), a busca da navbar é
   ocultada para não duplicar — a pílula flutuante assume o topo. */
body.ra-has-searchmorph .ra-nav-search { display: none; }
.ra-navbar .navbar-brand { color: var(--ra-text); font-weight: 700; letter-spacing: -0.02em; }
.ra-navbar .nav-link { color: var(--ra-text-muted); font-weight: 500; }
.ra-navbar .nav-link:hover,
.ra-navbar .nav-link.active { color: var(--ra-primary-ink); }
.ra-navbar .dropdown-menu { --bs-dropdown-bg: var(--ra-surface); border-color: var(--ra-border); box-shadow: 0 .5rem 1.5rem var(--ra-shadow); }

/* Botão de alternância de tema */
.ra-theme-toggle {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ra-border);
    background: var(--ra-surface);
    color: var(--ra-text);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ra-theme-toggle:hover { border-color: var(--ra-primary); color: var(--ra-primary-ink); }
.ra-theme-toggle .icon-sun { display: none; }
.ra-theme-toggle .icon-moon { display: inline-flex; }
[data-bs-theme="dark"] .ra-theme-toggle .icon-sun { display: inline-flex; }
[data-bs-theme="dark"] .ra-theme-toggle .icon-moon { display: none; }

/* ---------------------------------------------------------------------
   7. Hero (banner da home)
   ------------------------------------------------------------------ */
.ra-hero {
    background: linear-gradient(135deg, var(--ra-hero-1) 0%, var(--ra-hero-2) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ra-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 120% at 85% 15%, rgba(255,255,255,.12), transparent 55%);
    pointer-events: none;
}
.ra-hero h1 { color: #fff; letter-spacing: -0.03em; }
.ra-hero .lead { color: rgba(255, 255, 255, .9); }
.ra-hero .form-control { border: 0; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18); }

/* ---------------------------------------------------------------------
   7b. Barra de busca "morph" (estilo Airbnb)
   No topo é grande (dentro do hero); ao rolar encolhe e vira uma pílula
   flutuante fixa no topo. Tamanho/posição são interpolados via JS pelo
   scroll (top/left/width/height/border-radius) — SEM fade de opacidade.
   ------------------------------------------------------------------ */
.ra-searchbar {
    position: relative;            /* estado inicial: no fluxo do hero */
    width: 100%;
    max-width: 680px;
    height: 62px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 6px 0 10px;
    background: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: 16px;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .22);
    /* Transições SÓ em aparência (a geometria é definida quadro a quadro no JS). */
    transition: box-shadow .2s ease, background-color .2s ease;
}
/* Ao rolar, o JS troca para posição fixa e passa a controlar top/left/width. */
.ra-searchbar.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1040;               /* acima da navbar sticky */
    will-change: top, left, width, height, border-radius;
}
.ra-searchbar.is-compact {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .30);
}
.ra-searchbar-slot { max-width: 680px; margin: 0 auto; }

.ra-searchbar-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}
.ra-searchbar-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--ra-text);
    font-size: 1.02rem;
    padding: 0 8px;
}
.ra-searchbar-input::placeholder { color: var(--ra-text-muted); opacity: 1; }

.ra-searchbar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: calc(100% - 12px);
    min-width: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--ra-primary);
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: padding .18s ease, background-color .15s ease;
}
.ra-searchbar-btn:hover { background: var(--ra-primary-ink); }
.ra-searchbar-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* O rótulo "Buscar" colapsa por LARGURA (não por opacidade) no estado compacto. */
.ra-searchbar-btn-label {
    max-width: 90px;
    overflow: hidden;
    transition: max-width .18s ease, margin .18s ease;
}
.ra-searchbar.is-compact .ra-searchbar-btn { padding: 0; width: 40px; }
.ra-searchbar.is-compact .ra-searchbar-btn-label { max-width: 0; }

/* Pílula compacta é clicável para reexpandir (estilo Airbnb). */
.ra-searchbar.is-compact,
.ra-searchbar.is-compact .ra-searchbar-input { cursor: pointer; }

/* Durante expandir/colapsar por clique, animamos a geometria com transição
   suave (fora disso, o scroll controla a geometria quadro a quadro). */
.ra-searchbar.is-anim {
    transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease,
                border-radius .3s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Fundo escurecido do estado reexpandido (clique fora fecha). */
.ra-searchbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1039;                 /* abaixo da barra (1040), acima do conteúdo */
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .22s ease;
}
.ra-searchbar-backdrop.is-visible { opacity: 1; }

/* ---------------------------------------------------------------------
   8. Cards de roteiro (grade)
   ------------------------------------------------------------------ */
.card {
    background-color: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
}
.ra-card {
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}
.ra-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .9rem 2rem var(--ra-shadow) !important;
    border-color: color-mix(in srgb, var(--ra-primary) 35%, var(--ra-border));
}
.ra-card-cover { display: block; }
.ra-card .card-img-top { aspect-ratio: 5 / 3; object-fit: cover; width: 100%; }
.ra-card-noimg {
    aspect-ratio: 5 / 3;
    background: linear-gradient(135deg, var(--ra-primary-soft), color-mix(in srgb, var(--ra-primary) 22%, var(--ra-surface)));
    color: var(--ra-primary-ink);
    font-size: 2.5rem;
}
.ra-card .card-title a { color: var(--ra-text); }
.ra-card .card-title a:hover { color: var(--ra-primary-ink); }

/* ---------------------------------------------------------------------
   9. Badges e chips
   ------------------------------------------------------------------ */
.ra-badge-dest { background-color: var(--ra-primary); color: #fff; }
.ra-badge-cat { background-color: var(--ra-accent); color: #fff; }
/* Badge neutra (substitui text-bg-light, adaptando ao tema) */
.ra-badge-soft {
    background-color: var(--ra-surface-2);
    color: var(--ra-text-muted);
    border: 1px solid var(--ra-border);
}

/* Chamada para ativar a localização ("perto de você") */
.ra-near-cta {
    display: flex;
    background: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    padding: .85rem 1.1rem;
    color: var(--ra-text);
}

.ra-cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ra-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .8rem;
    border-radius: var(--ra-radius-pill);
    border: 1px solid var(--ra-border);
    background: var(--ra-surface);
    color: var(--ra-text);
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ra-chip:hover { background: var(--ra-primary-soft); border-color: var(--ra-primary); color: var(--ra-primary-ink); }
.ra-chip-active { background: var(--ra-primary); border-color: var(--ra-primary); color: #fff; }
.ra-chip-active:hover { background: var(--ra-primary-hover); color: #fff; }
.ra-chip-count { font-size: .75rem; background: rgba(var(--ra-primary-rgb), .12); border-radius: 999px; padding: 0 .4rem; line-height: 1.5; }
.ra-chip-active .ra-chip-count { background: rgba(255, 255, 255, .25); }

/* ---------------------------------------------------------------------
   10. Carrosséis da home (estilo Airbnb)
   ------------------------------------------------------------------ */
.ra-carousel-title { color: var(--ra-text); }
.ra-carousel-title:hover { color: var(--ra-primary-ink); }
.ra-carousel-nav { display: flex; gap: .4rem; }
.ra-carousel-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ra-border);
    background: var(--ra-surface);
    color: var(--ra-text);
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ra-carousel-btn:hover { background: var(--ra-primary-soft); border-color: var(--ra-primary); color: var(--ra-primary-ink); }
.ra-carousel-track {
    display: flex; gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.ra-ccard { flex: 0 0 auto; width: 224px; scroll-snap-align: start; color: var(--ra-text); }
@media (max-width: 575.98px) { .ra-ccard { width: 64vw; max-width: 250px; } }
.ra-ccard-img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--ra-radius);
    overflow: hidden;
    background: var(--ra-surface-2);
    border: 1px solid var(--ra-border);
}
.ra-ccard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
/* O zoom no hover não se aplica aos cards com alternância de capa: lá o
   transform é usado para a passada lateral (ver seção 20). */
.ra-ccard:hover .ra-ccard-img:not(.ra-imgcycle) img { transform: scale(1.05); }
.ra-ccard-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ra-primary-soft), color-mix(in srgb, var(--ra-primary) 22%, var(--ra-surface)));
}
.ra-ccard-noimg img { opacity: .8; }
.ra-ccard-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--ra-surface);
    color: var(--ra-text);
    font-size: .72rem; font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    box-shadow: 0 1px 4px var(--ra-shadow);
}
.ra-ccard-title {
    margin-top: .55rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ra-ccard-meta { font-size: .85rem; color: var(--ra-text-muted); }
.ra-ccard-author { font-size: .8rem; color: var(--ra-text-muted); opacity: .85; }

/* ---------------------------------------------------------------------
   11. Conteúdo dia a dia
   ------------------------------------------------------------------ */
.ra-day-title { color: var(--ra-primary-ink); }
.ra-day-num {
    background: var(--ra-primary-soft);
    color: var(--ra-primary-ink);
    padding: .1rem .5rem;
    border-radius: .4rem;
    font-size: .85em;
    vertical-align: middle;
}
.ra-day-desc { line-height: 1.75; }
.ra-day { border-left: 3px solid color-mix(in srgb, var(--ra-primary) 40%, var(--ra-border)); padding-left: 1rem; }

/* ---------------------------------------------------------------------
   12. Lista de bagagem interativa
   ------------------------------------------------------------------ */
.ra-checklist .form-check-input:checked + .form-check-label { text-decoration: line-through; color: var(--ra-text-muted); }
.ra-checklist .form-check-input:checked { background-color: var(--ra-accent); border-color: var(--ra-accent); }

/* ---------------------------------------------------------------------
   13. Galeria + miniaturas
   ------------------------------------------------------------------ */
.ra-gallery-thumb { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: opacity .15s ease; border-radius: var(--ra-radius-sm); }
.ra-gallery-thumb:hover { opacity: .85; }
.ra-thumb-wrap { position: relative; }
.ra-thumb-wrap img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.ra-thumb-del { position: absolute; top: 4px; right: 4px; line-height: 1; padding: .1rem .4rem; border-radius: 50%; }

/* ---------------------------------------------------------------------
   14. Rodapé
   ------------------------------------------------------------------ */
.ra-footer { background-color: var(--ra-footer-bg); color: var(--ra-footer-text); }
.ra-footer a, .ra-footer .nav-link { color: var(--ra-footer-text); text-decoration: none; transition: color .15s ease; }
.ra-footer a:hover, .ra-footer .nav-link:hover { color: #fff; }
.ra-footer hr { border-color: rgba(255, 255, 255, .14); opacity: 1; }
/* O rodapé é escuro nos dois temas: força o texto "secundário" a ficar claro. */
.ra-footer .text-secondary,
.ra-footer .text-body-secondary { color: color-mix(in srgb, var(--ra-footer-text) 82%, transparent) !important; }

/* Descrição da marca */
.ra-footer-desc { color: color-mix(in srgb, var(--ra-footer-text) 88%, transparent); max-width: 36ch; }

/* Títulos das colunas */
.ra-footer-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    margin-bottom: .9rem;
}

/* Listas de links das colunas */
.ra-footer-links { list-style: none; padding: 0; margin: 0; }
.ra-footer-links li { margin-bottom: .5rem; }
.ra-footer-links a { font-size: .9rem; }

/* Ícones de redes sociais */
.ra-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.ra-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--ra-footer-text);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ra-social a:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    transform: translateY(-2px);
}
.ra-social svg { width: 18px; height: 18px; }

/* Botão "Apoiar o projeto" */
.ra-donate {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--ra-primary);
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--ra-radius-pill);
    padding: .45rem 1.1rem;
}
.ra-donate:hover { background: var(--ra-primary-hover); color: #fff !important; }

/* Crédito do desenvolvedor */
.ra-footer-dev { color: #fff !important; font-weight: 600; }

/* ---------------------------------------------------------------------
   14b. Página "Sobre" — índice + grade de funcionalidades
   ------------------------------------------------------------------ */
.ra-toc {
    columns: 2;
    column-gap: 1.5rem;
    padding-left: 1.1rem;
    margin: 0;
}
@media (max-width: 575.98px) { .ra-toc { columns: 1; } }
.ra-toc li { margin-bottom: .35rem; }

.ra-feature {
    display: flex;
    gap: .75rem;
    height: 100%;
    padding: .9rem 1rem;
    background: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
}
.ra-feature > span { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.ra-feature strong { color: var(--ra-text); }

/* ---------------------------------------------------------------------
   15. Login social + divisor "ou"
   ------------------------------------------------------------------ */
.ra-or-divider { display: flex; align-items: center; text-align: center; gap: .75rem; margin: .25rem 0 .75rem; color: var(--ra-text-muted); }
.ra-or-divider::before, .ra-or-divider::after { content: ""; flex: 1; height: 1px; background: var(--ra-border); }
#btn-google { font-weight: 600; background: var(--ra-surface); color: var(--ra-text); border-color: var(--ra-border); }
#btn-google:hover { background: var(--ra-surface-2); border-color: var(--ra-text-muted); }

/* ---------------------------------------------------------------------
   16. Placeholder de anúncio (apenas em desenvolvimento)
   ------------------------------------------------------------------ */
.ad-placeholder {
    border: 2px dashed var(--ra-border);
    background: var(--ra-surface-2);
    color: var(--ra-text-muted);
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--ra-radius-sm);
    font-size: .9rem;
}

/* ---------------------------------------------------------------------
   17. Lightbox (galeria)
   ------------------------------------------------------------------ */
.ra-lightbox {
    position: fixed; inset: 0;
    background: rgba(10, 8, 6, .92);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; padding: 1rem; cursor: zoom-out;
}
.ra-lightbox img { max-width: 96%; max-height: 92%; border-radius: var(--ra-radius-sm); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------------
   18. Sobreposição de "carregando" (envio do formulário de roteiro)
   ------------------------------------------------------------------ */
.ra-loading-overlay {
    position: fixed; inset: 0;
    z-index: 3000;
    display: none;                 /* mostrada via .is-active (evita bug do [hidden]) */
    align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(10, 8, 6, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.ra-loading-overlay.is-active { display: flex; }
.ra-loading-box {
    text-align: center;
    color: #fff;
    max-width: 340px;
}
.ra-loading-spinner {
    width: 3rem; height: 3rem;
    border-width: .3rem;
    color: var(--ra-primary);
    margin-bottom: 1rem;
}
.ra-loading-msg { font-size: 1.15rem; font-weight: 600; }
.ra-loading-sub { color: rgba(255, 255, 255, .75); }
@media (prefers-reduced-motion: reduce) {
    .ra-loading-spinner { animation-duration: 1.5s; }
}

/* ---------------------------------------------------------------------
   19. Página "Apoiar o projeto" (/apoiar)
   ------------------------------------------------------------------ */
.ra-support-emoji { font-size: 3rem; line-height: 1; }
.ra-support-lead { max-width: 620px; }
.ra-support-card {
    background: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    box-shadow: 0 .3rem 1rem var(--ra-shadow);
}
.ra-pix-badge {
    display: inline-flex; align-items: center;
    background: #32bcad;            /* verde-água do Pix (marca do BCB) */
    color: #fff; font-weight: 700;
    font-size: .8rem; letter-spacing: .02em;
    padding: .15rem .6rem;
    border-radius: var(--ra-radius-pill);
}
.ra-pix-qr {
    width: 200px; height: 200px;
    margin: 0 auto;
    background: #fff;               /* QR precisa de fundo claro p/ leitura */
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius-sm);
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
}
.ra-pix-qr svg { width: 100%; height: 100%; }
.ra-pix-qr-fallback { padding: .5rem; }
.ra-pix-key, .ra-pix-payload {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .9rem;
    background: var(--ra-surface-2);
}
.ra-pix-payload { word-break: break-all; resize: none; }
.ra-support-ways { list-style: none; padding-left: 0; margin: 0; }
.ra-support-ways li { padding: .35rem 0; border-bottom: 1px solid var(--ra-border); }
.ra-support-ways li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------
   20. Alternância de capa nos cards (roteiros com 2+ fotos)
   ---------------------------------------------------------------------
   Ao passar o mouse, as fotos do roteiro se revezam com uma passada lateral.
   A primeira imagem continua no fluxo normal (é ela que dá altura ao card);
   as demais são criadas pelo JavaScript apenas no primeiro hover — assim
   nenhuma imagem extra é baixada enquanto o visitante não interage.
   ------------------------------------------------------------------ */
.ra-imgcycle { position: relative; overflow: hidden; }

.ra-imgcycle img {
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    backface-visibility: hidden;
}

/* Fotos adicionais sobrepostas à capa. */
.ra-imgcycle .ra-imgcycle-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estados da passada: entra pela direita, sai pela esquerda. */
.ra-imgcycle img.is-next   { transform: translateX(100%); }
.ra-imgcycle img.is-active { transform: translateX(0); }
.ra-imgcycle img.is-prev   { transform: translateX(-100%); }

/* Acessibilidade: quem pede menos animação vê a troca sem deslizar. */
@media (prefers-reduced-motion: reduce) {
    .ra-imgcycle img { transition: none; }
}

/* ---------------------------------------------------------------------
   21. Botão "Salvar no Pinterest" sobre cada foto da galeria
   ------------------------------------------------------------------ */
.ra-gallery-item { position: relative; }

.ra-pin-save {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: .3rem;
    background: #e60023;                 /* vermelho da marca Pinterest */
    color: #fff !important;
    font-size: .78rem; font-weight: 700;
    line-height: 1;
    padding: .42rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    opacity: 0;                          /* aparece no hover/foco */
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.ra-gallery-item:hover .ra-pin-save,
.ra-pin-save:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.ra-pin-save:hover { background: #ad081b; color: #fff !important; }

/* Em telas de toque não existe hover: o botão fica sempre visível. */
@media (hover: none) {
    .ra-pin-save { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ra-pin-save { transition: none; }
}