/* ============================================================================
   SITE PÚBLICO WHITE-LABEL — design profissional e moderno

   Estrutura:
     1. Reset / variáveis
     2. Tipografia + utilitários
     3. Header (sticky + transparente sobre o hero, sólido após scroll)
     4. Hero (slideshow + título + booking widget)
     5. Booking widget
     6. Trust bar (benefícios)
     7. Resultados / Cards de viatura (estilo do screenshot)
     8. Footer (4 colunas)
     9. Feedback modal
    10. Responsividade
   ========================================================================= */

/* 1. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, li, figure, form { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:root {
    /* Cores do tema — sobrescritas pelo PHP em runtime */
    --cor-primaria:   #fe2a2b;
    --cor-secundaria: #1d3557;
    --cor-destaque:   #16a34a;

    /* Neutros */
    --cor-branco:        #ffffff;
    --cor-fundo:         #f7f7f9;
    --cor-fundo-suave:   #f9fafb;
    --cor-texto:         #1a1d29;
    --cor-texto-mute:    #6b7280;
    --cor-borda:         #e5e7eb;
    --cor-borda-suave:   #f3f4f6;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.20);

    /* Tipografia */
    --font-base: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius:     14px;
    --radius-sm:  10px;
    --radius-pill: 999px;
}

body {
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.55;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
/* Em monitores grandes (≥1920px), o conteúdo é confinado a 1250px para
   não esticar excessivamente — preserva legibilidade e equilíbrio visual. */
@media (min-width: 1920px) {
    .container { max-width: 1250px; }
}

/* 3. Header -------------------------------------------------------------- */
/*
 * Sistema de header com 2 estados visuais animados:
 *
 *   ESTADO COMPACTO (default)
 *   - Aplicado em todas as páginas internas (.site-header-solido)
 *   - Aplicado também na homepage QUANDO scrolled (.site-header-grande.scrolled)
 *   - Altura: 70px, logo: 42px, fundo branco opaco, sombra subtil
 *
 *   ESTADO GRANDE (apenas homepage no topo)
 *   - Aplicado em homepage SEM scroll (.site-header-grande:not(.scrolled))
 *   - Altura: 110px, logo: 76px, fundo semi-transparente sobre o hero
 *   - Visualmente "respira" mais — primeira impressão premium
 *
 * Transições aplicadas em min-height, height (do logo), padding, background,
 * box-shadow — todas com 0.35s cubic-bezier para feel premium.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cor-branco);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.98);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    gap: 24px;
    transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}
.site-logo {
    height: 42px;
    width: auto;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-brand-nome {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    letter-spacing: -0.01em;
    transition: font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Estado GRANDE — homepage no topo, sobre o hero ───────────────────────
   Activo apenas quando .site-header-grande está presente E .scrolled NÃO está.
   Header TRANSPARENTE sobre o hero — o gradiente escuro do hero passa por
   trás, evitando aquela "barra branca" visível entre o cabeçalho e o
   título. Quando o user faz scroll, o booking.js adiciona .scrolled → as
   regras abaixo deixam de aplicar e o header volta ao branco sólido.
   !important para vencer qualquer fallback do .site-header base + transição
   inline injectada por scripts de tema (caso alguma extensão do cliente
   sobreponha). */
.site-header.site-header-grande:not(.scrolled) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.site-header-grande:not(.scrolled) .header-inner {
    min-height: 110px;
}
.site-header-grande:not(.scrolled) .site-logo {
    height: 76px;
}
.site-header-grande:not(.scrolled) .site-brand-nome {
    font-size: 1.4rem;
}
/* Sobre o hero escuro: texto/ícones do header em branco para contrastar.
   Volta a escuro automaticamente quando .scrolled é adicionada. */
.site-header-grande:not(.scrolled) .site-nav-lista > li > a {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.site-header-grande:not(.scrolled) .site-nav-lista > li > a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.site-header-grande:not(.scrolled) .site-nav-toggle span {
    background: #fff;
}

/* Menu dinâmico */
.site-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.site-nav-lista {
    display: flex;
    gap: 4px;
}
.site-nav-lista > li { position: relative; }
.site-nav-lista > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-weight: 500;
    color: var(--cor-texto);
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}
.site-nav-lista > li > a:hover {
    background: var(--cor-fundo);
    color: var(--cor-primaria);
}
/* Dropdown de subpáginas */
.site-nav-lista .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--cor-branco);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 10;
}
.site-nav-lista > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.submenu li a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--cor-texto);
    font-size: 0.95rem;
}
.submenu li a:hover {
    background: var(--cor-fundo);
    color: var(--cor-primaria);
}

/* CTA do header */
.site-header-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.cta-reservar {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    background: var(--cor-primaria);
    color: var(--cor-branco) !important;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cta-reservar:hover {
    background: color-mix(in srgb, var(--cor-primaria) 88%, black);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Hambúrguer mobile */
.site-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.site-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cor-texto);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.site-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.site-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 4. Hero ---------------------------------------------------------------- */
/* margin-top negativo faz o hero "subir" e ficar atrás do header sticky
   transparente — o gradiente escuro estende-se até ao topo da viewport, em
   vez de aparecer uma faixa branca/cinzenta (cor do body) entre o header e
   o início do hero. O valor compensa o min-height do header GRANDE
   (110px desktop, 80px mobile via media query mais abaixo). */
.hero {
    position: relative;
    min-height: 640px;
    margin-top: -110px;
    background: linear-gradient(135deg, #1e2a47 0%, #2c4a72 100%);
    color: var(--cor-branco);
    /* `overflow-x: clip` substitui o antigo `overflow: hidden`. Mantém o
       clipping horizontal (necessário p/ slideshow + decorações) mas permite
       que dropdowns do booking widget (Choices.js) se estendam para baixo
       sem serem cortados pela secção seguinte. `clip`, ao contrário de
       `hidden`, não força o outro eixo a `auto` quando se usa visible. */
    overflow-x: clip;
    overflow-y: visible;
}
.hero-slideshow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-slide {
    position: absolute; inset: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
    transition: background 0.3s;
}
.hero.tem-banners .hero-overlay {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.70) 100%);
}
.hero-inner {
    position: relative; z-index: 2;
    /* padding-top inclui ~110px (altura do header GRANDE em desktop) +
       breathing room para o título não ficar colado ao header. */
    padding: 200px 24px 100px;
}
.hero-text {
    max-width: 720px;
    margin-bottom: 36px;
}
.hero-titulo {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hero-subtitulo {
    font-size: 1.15rem;
    opacity: 0.92;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Dots do slideshow */
.hero-dots {
    position: absolute; z-index: 3;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.hero-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.4); border: none;
    cursor: pointer; padding: 0;
    transition: background 0.15s, transform 0.15s;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-dot.is-active { background: var(--cor-branco); transform: scale(1.25); }

/* 5. Booking widget — versão minimalista ───────────────────────────────────
   Compactado relativamente à versão anterior:
   - widget padding 24→18px
   - input padding vertical 13→10px
   - label 0.95→0.82rem + margin-bottom 8→4px
   - grupo margin 18→10px
   - icon padding 0 12 0 14 → 0 10 0 12
   Preserva a hierarquia visual mas dá ~30% menos altura total ao formulário.
   ============================================================================ */
.booking-widget {
    background: var(--cor-branco);
    color: var(--cor-texto);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-xl);
    max-width: 1100px;
    margin: 0 auto;
    /* O conteúdo do widget pode "transbordar" quando um <select> nativo é
       aberto. overflow:visible é o default mas garantimos aqui. */
    overflow: visible;
}
.bw-grupo { margin-bottom: 10px; }
.bw-grupo:last-of-type { margin-bottom: 8px; }
.bw-grupo-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.bw-grupo-inputs {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr;
    gap: 8px;
}
.bw-grupo-categoria .bw-grupo-inputs { grid-template-columns: 2fr auto; }

.bw-input-wrap {
    display: flex; align-items: center;
    background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    /* IMPORTANTE: overflow:visible (não hidden). Se for hidden, em alguns
       browsers o dropdown nativo do <select> fica visualmente cortado quando
       a sua âncora é o wrap. visible deixa o dropdown render-se naturalmente. */
    overflow: visible;
    min-height: 40px;
}
.bw-input-wrap:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(254, 42, 43, 0.15);
}
.bw-input-icon i {
    font-size: 0.95rem; color: var(--cor-primaria);
    padding: 0 8px 0 12px; flex-shrink: 0;
}
.bw-input-wrap select, .bw-input-wrap input {
    flex: 1;
    border: 0; background: transparent;
    padding: 10px 12px 10px 0;
    font-family: inherit; font-size: 0.9rem;
    color: var(--cor-texto); outline: none; width: 100%;
    appearance: none; -webkit-appearance: none;
}
.bw-input-wrap select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 28px;
    cursor: pointer;
}
/* Estilo das <option> dentro do select. Suporte limitado pelos browsers,
   mas Firefox + alguns Chromium honoram estas regras → dropdown menos
   "cru" visualmente quando aberto. */
.bw-input-wrap select option {
    background: var(--cor-branco);
    color: var(--cor-texto);
    padding: 8px;
}
.booking-widget .bw-input-data,
.booking-widget .bw-input-hora {
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: inherit; font-size: 0.9rem;
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    min-height: 40px;
}
.booking-widget .bw-input-data:focus,
.booking-widget .bw-input-hora:focus {
    outline: none; border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(254, 42, 43, 0.15);
}
/* Quando .bw-input-hora é um <select> (lista de slots válidos do horário do
   tenant), esconde a seta nativa e injecta a custom em SVG para coincidir
   com os outros selects do widget (.bw-input-wrap select). */
.booking-widget select.bw-input-hora {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 28px;
    cursor: pointer;
}
.booking-widget select.bw-input-hora::-ms-expand { display: none; }
.bw-btn-pesquisar {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none; border-radius: var(--radius-sm);
    padding: 10px 26px;
    font-weight: 700; font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(254, 42, 43, 0.25);
    min-height: 40px;
}
.bw-btn-pesquisar:hover {
    opacity: 0.95; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(254, 42, 43, 0.35);
}
.bw-btn-pesquisar:disabled { opacity: 0.5; cursor: not-allowed; }

.bw-extras {
    border-top: 1px solid var(--cor-borda);
    padding-top: 10px; margin-top: 4px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.bw-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--cor-texto-mute); font-size: 0.85rem;
    cursor: pointer; user-select: none;
}
.bw-checkbox input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--cor-primaria); cursor: pointer;
}

/* Hint do horário de serviço — informativo, alinhado à direita do checkbox.
   Aparece em texto subtil (pill) com ícone de relógio. Não ocupa nova linha
   no desktop; em mobile (< 480px) cai para baixo do checkbox. */
.bw-horario-hint {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    padding: 4px 10px;
    background: rgba(254, 42, 43, 0.06);
    color: var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}
.bw-horario-hint i { font-size: 0.85rem; }
@media (max-width: 480px) {
    .bw-horario-hint { margin-left: 0; }
}

.bw-filtros-dinamicos {
    border-top: 1px solid var(--cor-borda);
    padding-top: 10px; margin-top: 8px;
}
.bw-filtros-dinamicos .bw-grupo-inputs {
    grid-template-columns: repeat(3, 1fr);
}
.bw-filtros-dinamicos .bw-filtro { display: none; }
.bw-filtros-dinamicos .bw-filtro.is-active { display: flex; }

/* ── Choices.js overrides — integra os dropdowns com o booking widget ──
   O Choices.js, por defeito, renderiza um container com border, padding e
   margin próprios. Aqui despojamos tudo isso para que o nosso .bw-input-wrap
   (que tem border + background-fundo-suave + ícone à esquerda) continue a
   ser o "envelope visual" do select. O Choices só fornece a UI do dropdown
   aberto — que é onde o user vê o ganho (sombra, cantos arredondados,
   hover/active states, animação suave). */

.bw-input-wrap .choices,
.bw-input-wrap .choices.choices-bw {
    margin: 0;
    width: 100%;
    flex: 1;
    min-width: 0;
}
.bw-input-wrap .choices__inner {
    background: transparent;
    border: 0;
    padding: 0 28px 0 0;        /* espaço à direita p/ a seta do Choices */
    min-height: 38px;
    border-radius: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.bw-input-wrap .choices__list--single {
    padding: 0;
}
.bw-input-wrap .choices__list--single .choices__item {
    color: var(--cor-texto);
    line-height: 1.2;
}
.bw-input-wrap .choices__placeholder {
    opacity: 0.7;
}
/* Seta dropdown — fica na direita do .bw-input-wrap (Choices renderiza-a
   no .choices__inner::after). Override para usar a nossa cor. */
.bw-input-wrap .choices[data-type*="select-one"]::after {
    border-color: #999 transparent transparent;
    right: 12px;
}
.bw-input-wrap .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #999;
    margin-top: -2px;
}

/* Painel do dropdown — onde o user vê a melhoria visual */
.bw-input-wrap .choices__list--dropdown,
.bw-input-wrap .choices__list[aria-expanded] {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin-top: 6px;
    overflow: hidden;
    z-index: 30;
}
.bw-input-wrap .choices__list--dropdown .choices__item,
.bw-input-wrap .choices__list[aria-expanded] .choices__item {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--cor-texto);
    transition: background 0.12s, color 0.12s;
}
.bw-input-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted,
.bw-input-wrap .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--cor-fundo-suave);
    color: var(--cor-primaria);
}
/* Estado focused → border vermelho do .bw-input-wrap (já existe), Choices
   adiciona uma classe extra que precisamos de neutralizar. */
.bw-input-wrap.is-focused,
.bw-input-wrap .choices.is-focused .choices__inner {
    box-shadow: none;
}
/* Quando aberto, dá feedback visual subtil ao próprio wrap */
.bw-input-wrap:has(.choices.is-open) {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(254, 42, 43, 0.15);
}

/* 5b. Segmentos Bar ─────────────────────────────────────────────────────────
   Bloco "Encontre a viatura ideal" — grelha de cards de segmento clicáveis,
   cada um leva à página da frota com ?segmento=ID aplicado. UX/UI moderno:
   media com hover zoom, overlay gradient para legibilidade, CTA arrow,
   responsivo (4 cols ≥1440px → 3 →2 →1).
   ─────────────────────────────────────────────────────────────────────── */
.segmentos-bar {
    background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
    padding: 70px 0;
    border-bottom: 1px solid var(--cor-borda-suave);
}
@media (min-width: 1920px) {
    .segmentos-bar { padding: 110px 0; }
}
.segmentos-cabecalho {
    text-align: center;
    margin-bottom: 40px;
}
.segmentos-titulo {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: var(--cor-secundaria);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.segmentos-subtitulo {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}
.segmentos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1279px) { .segmentos-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 899px)  { .segmentos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 539px)  { .segmentos-grid { grid-template-columns: 1fr; gap: 14px; } }

.segmento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0,0,0,0.04);
}
.segmento-card:hover,
.segmento-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
}
.segmento-card:visited { color: inherit; }

.segmento-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.segmento-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.segmento-card:hover .segmento-card-media {
    transform: scale(1.06);
}
.segmento-card-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-secundaria) 0%, #2c4d76 100%);
}
.segmento-card-media-placeholder i {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.segmento-card-corpo {
    padding: 18px 20px 20px 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.segmento-card-nome {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    margin: 0;
    letter-spacing: -0.01em;
}
.segmento-card-total {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.segmento-card-cta {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
    backdrop-filter: blur(4px);
}
.segmento-card:hover .segmento-card-cta {
    background: var(--cor-primaria);
    color: #fff;
    transform: translateX(2px);
}

/* ─── Categorias rápidas (filtros visuais por combustível/oferta) ─────────
   Cards horizontais com topo colorido + ícone + nome em baixo.
   Usados como atalhos para a página da frota com query params:
     ?combustivel=gasolina|diesel|eletrico|hibrido
     ?oferta=1
   Cada card tem cor própria via CSS vars (--cat-cor, --cat-cor-canto).
   ──────────────────────────────────────────────────────────────────────── */
.categorias-rapidas {
    background: #fff;
    padding: 60px 0;
    border-bottom: 1px solid var(--cor-borda-suave);
}
@media (min-width: 1920px) {
    .categorias-rapidas { padding: 100px 0; }
}
.categorias-rapidas-cabecalho {
    text-align: center;
    margin-bottom: 36px;
}
.categorias-rapidas-titulo {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 700;
    color: var(--cor-secundaria);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.categorias-rapidas-subtitulo {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}
/* Flex em vez de grid — cards CRESCEM para preencher a largura do container
   (.container max-width 1240px), distribuídos uniformemente e centrados via
   justify-content. flex-basis serve de "tamanho mínimo confortável" — abaixo
   disso os cards quebram para nova linha (mobile/tablet pequeno). */
.categorias-rapidas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.categorias-rapidas-grid > .categoria-rapida-card {
    flex: 1 1 200px;     /* cresce e encolhe; base 200px */
    max-width: 280px;    /* limite em ultra-wide para não ficarem desproporcionais */
}
@media (max-width: 1279px) {
    .categorias-rapidas-grid { gap: 16px; }
    .categorias-rapidas-grid > .categoria-rapida-card {
        flex: 1 1 180px;
    }
}
@media (max-width: 639px) {
    .categorias-rapidas-grid { gap: 12px; }
    /* Mobile: 2 cards por linha, mantém centragem. calc subtrai metade do
       gap a cada card para encaixarem em 2 colunas com gap entre eles. */
    .categorias-rapidas-grid > .categoria-rapida-card {
        flex: 0 0 calc(50% - 6px);
        max-width: none;
    }
}
@media (max-width: 380px) {
    .categorias-rapidas-grid > .categoria-rapida-card {
        flex: 0 0 100%;
    }
}

.categoria-rapida-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    border: 1px solid var(--cor-borda-suave);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.categoria-rapida-card:hover,
.categoria-rapida-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    color: inherit;
}
.categoria-rapida-card:visited { color: inherit; }

.categoria-rapida-card-media {
    aspect-ratio: 4 / 3;
    background: var(--cat-cor, #e5e7eb);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: filter 0.3s;
}
.categoria-rapida-card-media i {
    font-size: 2.6rem;
    color: var(--cat-cor-canto, var(--cor-secundaria));
    opacity: 0.85;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.categoria-rapida-card:hover .categoria-rapida-card-media i {
    transform: scale(1.12);
}
/* Quando há imagem default em app-central /images/categorias/<slug>.webp o
   template renderiza <img> SEMPRE + <i> como fallback. A regra abaixo esconde
   o ícone quando o <img> existe (sibling adjacente). Se o <img> falhar a
   carregar, o `onerror` remove-o do DOM — o seletor `img + i` deixa de
   matchar e o ícone volta automaticamente a ficar visível.

   Estilo "background cover" — a imagem preenche a totalidade do media box
   (igual aos segmento-cards). object-fit:cover preserva o aspect ratio e
   recorta o excesso para garantir que não há espaço vazio à volta.
   ─ position:absolute + inset:0 → cobre completamente o container
   ─ z-index:1 → acima do ::after (acento decorativo do canto) */
.categoria-rapida-card-media img.categoria-rapida-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.categoria-rapida-card-media img.categoria-rapida-card-img + i {
    display: none;
}
.categoria-rapida-card:hover .categoria-rapida-card-media img.categoria-rapida-card-img {
    transform: scale(1.06);
}
/* Pequeno acento decorativo no canto inferior direito do media */
.categoria-rapida-card-media::after {
    content: '';
    position: absolute;
    right: -20px; bottom: -20px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--cat-cor-canto, transparent);
    opacity: 0.18;
    pointer-events: none;
}

.categoria-rapida-card-corpo {
    padding: 14px 16px;
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.categoria-rapida-card-nome {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Variante CTA — último card: "Ver toda a frota" com cor da marca */
.categoria-rapida-card-cta {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #d12224 100%);
    color: #fff !important;
    border-color: transparent;
}
.categoria-rapida-card-cta:hover { color: #fff !important; }
.categoria-rapida-card-media-cta {
    background: rgba(255,255,255,0.12) !important;
}
.categoria-rapida-card-media-cta i {
    color: #fff !important;
    opacity: 0.95;
    font-size: 2.8rem;
}
.categoria-rapida-card-media-cta::after {
    background: rgba(255,255,255,0.20) !important;
}
.categoria-rapida-card-cta .categoria-rapida-card-nome { color: #fff !important; }
.categoria-rapida-card-cta-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    transition: background 0.2s, transform 0.2s;
}
.categoria-rapida-card-cta:hover .categoria-rapida-card-cta-link {
    background: rgba(255,255,255,0.30);
    transform: translateX(2px);
}
.categoria-rapida-card-cta-link i { color: #fff; font-size: 0.95rem; }

/* ─── Filtro activo (página da frota quando /a-nossa-frota/<slug>) ─────────
   Card branco minimalista com:
     - barra lateral colorida (4px primária) — sinaliza "filtro" sem ser ruidoso
     - ícone num círculo redondo soft-red (visual hierarchy)
     - label discreto "A mostrar segmento" + chip com nome + contagem
     - botão "Ver todas" outlined com hover sólido (subtil → assertivo)
     - micro-animação slideDown na entrada
   ──────────────────────────────────────────────────────────────────────── */
@keyframes widgetFrotaFiltroSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.widget-frota-filtro-ativo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--cor-primaria);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    animation: widgetFrotaFiltroSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.widget-frota-filtro-esq {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.widget-frota-filtro-icone {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(254, 42, 43, 0.10);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.widget-frota-filtro-textos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.widget-frota-filtro-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
}
.widget-frota-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cor-secundaria);
    font-size: 1rem;
    line-height: 1.2;
}
.widget-frota-filtro-chip strong {
    font-weight: 700;
}
.widget-frota-filtro-divisor {
    color: #d1d5db;
    font-weight: 700;
}
.widget-frota-filtro-count {
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 500;
}

/* Botão "Ver todas" — outlined, hover preenche. Mais discreto que o vermelho
   sólido anterior; o protagonista visual é o chip à esquerda. */
.widget-frota-filtro-limpar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #fff;
    color: var(--cor-primaria);
    text-decoration: none;
    border: 1.5px solid var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.widget-frota-filtro-limpar:hover,
.widget-frota-filtro-limpar:focus-visible {
    background: var(--cor-primaria);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(254, 42, 43, 0.20);
    text-decoration: none;
}
.widget-frota-filtro-limpar i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}
.widget-frota-filtro-limpar:hover i { transform: rotate(90deg); }

/* Mobile — empilha o chip e o botão, ícone à esquerda fica menor */
@media (max-width: 540px) {
    .widget-frota-filtro-ativo {
        padding: 12px 14px;
        gap: 12px;
    }
    .widget-frota-filtro-esq { gap: 12px; }
    .widget-frota-filtro-icone {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .widget-frota-filtro-limpar {
        width: 100%;
        justify-content: center;
    }
}

/* 6. Trust Bar ----------------------------------------------------------- */
.trust-bar {
    background: var(--cor-branco);
    border-bottom: 1px solid var(--cor-borda-suave);
    padding: 60px 0;   /* default desktop/tablet */
}
/* Mais espaço respiratório em monitores grandes — equilibra a maior altura
   total da viewport em ≥1920px (FHD vertical, 4K, ultrawide). */
@media (min-width: 1920px) {
    .trust-bar { padding: 100px 0; }
}
.trust-grid {
    display: grid;
    /* Máximo 4 por linha (regra de design). Se o cliente tiver mais que 4
       destaques activos, os restantes "partem" para a linha seguinte
       automaticamente — preserva a hierarquia visual e nunca espreme cards.
       Em tablet/mobile passa para 2 ou 1 (ver media queries no fim do CSS). */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;   /* mais espaço horizontal entre cards quando há 4 */
}
.trust-item {
    display: flex; align-items: center; gap: 14px;
}
.trust-item i {
    font-size: 1.6rem;
    color: var(--cor-primaria);
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: rgba(254, 42, 43, 0.1);
    border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
}
.trust-item strong {
    display: block; font-size: 0.98rem;
    color: var(--cor-secundaria); margin-bottom: 2px;
}
.trust-item span {
    font-size: 0.85rem; color: var(--cor-texto-mute);
}

/* 7. Resultados (cards de viatura) -------------------------------------- */
.resultados-section {
    padding: 60px 0 80px;
    background: var(--cor-fundo);
}
.resultados-section h2 {
    font-size: 1.8rem;
    color: var(--cor-secundaria);
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}
.resultados-contador {
    color: var(--cor-texto-mute);
    font-weight: 400; font-size: 1rem; margin-left: 8px;
}
.resultados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

/* Card individual — estilo do screenshot */
.viatura-card {
    background: var(--cor-branco);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
    position: relative;
}
.viatura-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Área da imagem da viatura — preenche a moldura completa.
   `cover` faz a imagem cobrir todo o espaço (corta excesso para manter
   proporção), em oposição a `contain` (deixa margens em volta). O fundo
   cinzento atrás só fica visível quando a viatura não tem foto definida
   (placeholder/galeria vazia). */
.viatura-card-imagem {
    position: relative;
    background-color: var(--cor-fundo-suave);
    height: 220px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Badges em cima da imagem */
.viatura-badge {
    position: absolute;
    top: 14px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
.viatura-badge-segmento {
    left: 14px;
    background: rgba(78, 164, 216, 0.15);
    color: #2980b9;
}
.viatura-badge-popular {
    right: 14px;
    background: #f97316;
    color: var(--cor-branco);
}

/* Corpo do card */
.viatura-card-body {
    padding: 20px;
    flex: 1;
    display: flex; flex-direction: column;
}
.viatura-card-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
.viatura-card-similar {
    color: var(--cor-texto-mute);
    font-size: 0.85rem;
    margin-bottom: 14px;
}
.viatura-card-info {
    color: var(--cor-texto-mute);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* Bloco de preço — número grande na cor primária */
.viatura-card-preco {
    margin-bottom: 16px;
}
.viatura-card-preco-dia {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cor-primaria);
    line-height: 1;
    letter-spacing: -0.02em;
}
.viatura-card-preco-dia small {
    font-size: 0.55em; font-weight: 700;
}
.viatura-card-preco-total {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cor-texto-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Linha de specs com ícones (Portas / Lugares / Malas / Caixa) */
.viatura-card-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--cor-borda-suave);
    margin-bottom: 16px;
}
.spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.spec-item-valor {
    display: flex; align-items: center; gap: 6px;
    color: var(--cor-secundaria);
    font-weight: 700;
    font-size: 1rem;
}
.spec-item-valor i {
    font-size: 1.4rem;
    color: var(--cor-secundaria);
    opacity: 0.85;
}
.spec-item-label {
    font-size: 0.72rem;
    color: var(--cor-texto-mute);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Botão Reservar — full width, cor primária. Funciona tanto para <button>
   (grid de pesquisa) como para <a> (widget frota em página CMS). */
.viatura-card-btn {
    margin-top: auto;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}
.viatura-card-btn:hover { opacity: 0.92; transform: translateY(-1px); color: var(--cor-branco); }
.viatura-card-btn:visited { color: var(--cor-branco); }

/* 8. Footer -------------------------------------------------------------- */
.site-footer {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    padding: 60px 0 24px;
    margin-top: 0;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer-bloco h4 {
    font-size: 1.05rem;
    margin-bottom: 16px;
    color: var(--cor-branco);
}
.footer-logo {
    height: 48px; width: auto;
    margin-bottom: 12px;
    filter: brightness(0) invert(1);  /* logo a branco para contrastar com o fundo escuro */
}
.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}
.footer-bloco p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
    font-size: 0.93rem;
}
.footer-bloco i {
    margin-right: 8px;
    color: var(--cor-primaria);
}
.footer-bloco a:hover { color: var(--cor-primaria); }
.footer-fiscal {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 10px;
}
.footer-nav li {
    margin-bottom: 8px;
}
.footer-nav a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
    transition: color 0.15s;
}
.footer-redes {
    display: flex;
    gap: 10px; flex-wrap: wrap;
}
.footer-rede {
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.footer-rede:hover {
    background: var(--cor-primaria); transform: translateY(-2px);
}
.footer-rede i { margin: 0; color: var(--cor-branco); }
.footer-bloco-legal {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 24px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
}

/* 9. Feedback modal ------------------------------------------------------ */
.feedback-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.feedback-modal[hidden] { display: none !important; }
.feedback-conteudo {
    background: var(--cor-branco);
    border-radius: var(--radius);
    padding: 36px 30px 30px;
    max-width: 480px; width: 100%;
    text-align: center;
    box-shadow: var(--shadow-xl);
}
.feedback-icone {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    color: var(--cor-branco);
}
.feedback-icone.sucesso { background: var(--cor-destaque); }
.feedback-icone.erro    { background: var(--cor-primaria); }
.feedback-conteudo h3 {
    color: var(--cor-secundaria);
    margin-bottom: 10px; font-size: 1.3rem;
}
.feedback-conteudo p {
    color: var(--cor-texto-mute);
    margin-bottom: 20px;
    white-space: pre-wrap;
}

/* ============================================================================
   11. Página de RESERVA (reserva.php) — checkout em duas colunas
   ========================================================================= */

/* Header sólido para páginas internas (sem hero por trás).
   Já está em estado compacto por defeito — não precisa override de tamanho. */
.site-header-solido {
    background: var(--cor-branco);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.site-header-solido.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.page-reserva { background: var(--cor-fundo); }

/* Steps progress bar */
.reserva-steps {
    background: var(--cor-branco);
    border-bottom: 1px solid var(--cor-borda);
    padding: 16px 0;
}
.steps {
    display: flex;
    gap: 16px;
    align-items: center;
    overflow-x: auto;
    padding: 0;
}
.steps-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-texto-mute);
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.steps-item:not(:last-child)::after {
    content: '›';
    margin-left: 16px;
    color: var(--cor-borda);
    font-size: 1.2rem;
}
.steps-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cor-borda-suave);
    color: var(--cor-texto-mute);
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}
.steps-item.is-done .steps-num {
    background: var(--cor-destaque);
    color: var(--cor-branco);
}
.steps-item.is-done .steps-label { color: var(--cor-texto); }
.steps-item.is-active .steps-num {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    box-shadow: 0 0 0 4px rgba(254, 42, 43, 0.15);
}
.steps-item.is-active .steps-label {
    color: var(--cor-texto);
    font-weight: 600;
}

/* Layout 2 colunas */
.reserva-main { padding: 40px 0 80px; }
.reserva-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 32px;
    /* SEM "align-items: start" — as colunas esticam à altura da grid (= altura
       da coluna esquerda, normalmente a mais alta). Isso dá espaço suficiente
       para o card-total fazer "sticky bottom" ao longo de toda a página. */
}
.reserva-col-dir {
    /* Coluna direita já não é sticky inteira. O efeito de "fixar" foi movido
       para o .card-total (sticky bottom). */
    display: flex;
    flex-direction: column;
}

.card-reserva {
    background: var(--cor-branco);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--cor-borda-suave);
}
.card-reserva-titulo {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    margin-bottom: 14px;
    font-weight: 700;
}
.card-reserva-sub {
    color: var(--cor-texto-mute);
    font-size: 0.92rem;
    margin-bottom: 16px;
}
.card-reserva-info {
    color: var(--cor-texto-mute);
    font-size: 0.9rem;
    background: var(--cor-fundo-suave);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 8px;
}
/* Texto livre vindo do admin (Observações / Condições de Reserva).
   white-space:pre-line preserva as quebras de linha do textarea sem
   colapsar espaços; word-wrap evita strings longas saírem do card. */
.card-reserva-texto {
    color: var(--cor-texto);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-line;
    word-wrap: break-word;
    margin: 0;
}

/* "A sua reserva inclui" — checkmark list */
.incluido-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.incluido-lista li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--cor-texto);
    font-size: 0.92rem;
    line-height: 1.4;
}
.incluido-lista i {
    color: var(--cor-destaque);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Cartão de promoção */
.card-promo {
    background: linear-gradient(135deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 70%, var(--cor-secundaria)));
    color: var(--cor-branco);
    border: none;
    position: relative;
    overflow: hidden;
}
.card-promo::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.card-promo-flag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.card-promo-titulo { font-size: 1.5rem; margin-bottom: 6px; }
.card-promo-msg   { font-size: 0.95rem; opacity: 0.95; }
.card-promo-msg strong {
    background: rgba(0,0,0,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* Planos de protecção (radio cards) */
.protecao-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.protecao-card {
    display: block;
    border: 2px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
}
.protecao-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.protecao-card:hover {
    border-color: var(--cor-primaria);
    background: var(--cor-fundo-suave);
}
.protecao-card:has(input:checked) {
    border-color: var(--cor-primaria);
    background: color-mix(in srgb, var(--cor-primaria) 6%, white);
    box-shadow: 0 0 0 1px var(--cor-primaria);
}
.protecao-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.protecao-card-nome {
    font-weight: 700;
    color: var(--cor-secundaria);
    display: flex; align-items: center; gap: 8px;
}
.protecao-card-nome i { color: var(--cor-primaria); }
.protecao-card-preco {
    color: var(--cor-texto-mute);
    font-size: 0.95rem;
}
.protecao-card-preco strong {
    color: var(--cor-texto);
    font-size: 1.05rem;
}
.protecao-card-desc {
    display: block;
    font-size: 0.88rem;
    color: var(--cor-texto-mute);
    line-height: 1.4;
}

/* Tier visual (cor da bordinha do nome) */
.protecao-tier-basic   .protecao-card-nome { color: #6b7280; }
.protecao-tier-silver  .protecao-card-nome { color: #475569; }
.protecao-tier-silver  .protecao-card-nome i { color: #94a3b8; }
.protecao-tier-gold    .protecao-card-nome { color: #b45309; }
.protecao-tier-gold    .protecao-card-nome i { color: #f59e0b; }
.protecao-tier-platinum .protecao-card-nome { color: #1e293b; }

/* Skeleton loading */
.protecao-skeleton {
    height: 78px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: skel-pulse 1.4s linear infinite;
}
@keyframes skel-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* COLUNA DIREITA — viatura */
.card-viatura { padding: 0; overflow: hidden; }
.card-viatura-imagem-wrap { position: relative; }
.card-viatura-imagem {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--cor-fundo-suave), var(--cor-borda-suave));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-viatura-placeholder { font-size: 4rem; color: var(--cor-borda); }
.card-viatura-imagem.has-image .card-viatura-placeholder { display: none; }
.card-viatura-info { padding: 18px 22px; }
.card-viatura-segmento {
    display: inline-block;
    background: color-mix(in srgb, var(--cor-primaria) 12%, white);
    color: var(--cor-primaria);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card-viatura-segmento:empty { display: none; }
.card-viatura-titulo {
    font-size: 1.4rem;
    color: var(--cor-secundaria);
    margin: 8px 0 2px;
}
.card-viatura-similar {
    color: var(--cor-texto-mute);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

/* Preço diário no card da viatura — alinhado com o estilo do viatura-card-preco
   da grelha de resultados/widget frota mas mais compacto (cabe no card lateral
   estreito da página de reserva). Vermelho destaque, número grande. */
.card-viatura-preco-dia {
    margin: 4px 0 14px 0;
    color: var(--cor-primaria);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.card-viatura-preco-dia[hidden] { display: none; }
.card-viatura-preco-dia strong { font-size: 1.8rem; font-weight: 800; }
.card-viatura-preco-dia small {
    font-size: 0.65em;
    font-weight: 700;
    margin-left: 1px;
    margin-right: 2px;
}

.card-viatura-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    border-top: 1px solid var(--cor-borda-suave);
    padding-top: 12px;
}
.card-viatura-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-texto-mute);
    font-size: 0.85rem;
}
.card-viatura-spec i { font-size: 1.1rem; color: var(--cor-secundaria); }

/* Card Período */
.card-periodo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.card-periodo-bloco { display: flex; flex-direction: column; gap: 2px; }
.card-periodo-label {
    color: var(--cor-texto-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card-periodo-valor {
    color: var(--cor-secundaria);
    font-size: 0.98rem;
    line-height: 1.3;
}
.card-periodo-loc {
    color: var(--cor-texto-mute);
    font-size: 0.82rem;
}
.card-periodo-sep {
    color: var(--cor-primaria);
    font-size: 1.4rem;
    text-align: center;
}

/* Detalhes do preço — linhas */
.preco-linhas { display: flex; flex-direction: column; gap: 8px; }
.preco-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.93rem;
    color: var(--cor-texto);
}
.preco-linha-desc { color: var(--cor-texto-mute); }
.preco-linha-desc small {
    color: var(--cor-texto-mute);
    font-size: 0.8em;
    margin-left: 4px;
}
.preco-linha-valor { font-weight: 600; color: var(--cor-texto); }
.preco-linha-skeleton {
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: skel-pulse 1.4s linear infinite;
}
.preco-erro {
    color: var(--cor-primaria);
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--cor-primaria) 8%, white);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin: 0;
}

/* Extras — items lista */
.extras-lista { display: flex; flex-direction: column; gap: 12px; }
.extras-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, background 0.2s;
}
.extras-item:hover { border-color: var(--cor-primaria); background: var(--cor-fundo-suave); }
.extras-item-info {
    display: flex; gap: 10px; align-items: flex-start;
    flex: 1; min-width: 0;
}
.extras-item-icon {
    font-size: 1.3rem;
    color: var(--cor-primaria);
    margin-top: 2px;
    flex-shrink: 0;
}
.extras-item-nome {
    display: block;
    color: var(--cor-secundaria);
    font-size: 0.95rem;
    font-weight: 600;
}
.extras-item-desc {
    display: block;
    color: var(--cor-texto-mute);
    font-size: 0.83rem;
    line-height: 1.35;
    margin-top: 2px;
}
.extras-item-controls {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    flex-shrink: 0;
}
.extras-item-preco-bloco {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    gap: 2px;
}
.extras-item-preco {
    color: var(--cor-texto);
    font-weight: 700;
    font-size: 0.95rem;
}
/* Etiqueta debaixo do preço — explicita se é "Pagamento único" ou
   "Por cada dia". Pequeno, com cor mute para não competir com o preço. */
.extras-item-preco-tipo {
    font-size: 0.7rem;
    color: var(--cor-texto-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
}
.extras-skeleton {
    height: 56px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: skel-pulse 1.4s linear infinite;
}

/* Stepper de quantidade */
.extras-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--cor-branco);
}
.extras-stepper button {
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    color: var(--cor-texto);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.extras-stepper button:hover { background: var(--cor-fundo-suave); color: var(--cor-primaria); }
.extras-stepper input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--cor-texto);
    font-weight: 600;
    font-size: 0.9rem;
    -moz-appearance: textfield;
}
.extras-stepper input::-webkit-outer-spin-button,
.extras-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Toggle (checkbox tipo iOS) */
.extras-toggle {
    display: inline-block;
    cursor: pointer;
    position: relative;
}
.extras-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.extras-toggle-pill {
    display: inline-block;
    width: 42px; height: 24px;
    background: var(--cor-borda);
    border-radius: var(--radius-pill);
    transition: background 0.2s;
    position: relative;
}
.extras-toggle-pill > span {
    display: block;
    width: 18px; height: 18px;
    background: var(--cor-branco);
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.extras-toggle input:checked + .extras-toggle-pill { background: var(--cor-primaria); }
.extras-toggle input:checked + .extras-toggle-pill > span { transform: translateX(18px); }

/* Card TOTAL — destacado + STICKY BOTTOM
   Fica sempre visível durante o scroll (pinned a 20px da base do viewport)
   enquanto o user navega na coluna esquerda longa (cobertura + extras).
   Quando o user chega à zona natural do card, sai do modo sticky e flui
   normalmente. Background opaco garante legibilidade sobre conteúdo scrollado. */
.card-total {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    border: none;
    margin-top: auto;          /* empurra para o fim da coluna direita (flex-col) */
    position: sticky;
    bottom: 20px;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);   /* destaque visual quando "flutua" */
}
.card-total-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.card-total-iva {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}
.card-total-final {
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 12px;
    margin-top: 8px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card-total-valor {
    font-size: 1.7rem !important;
    color: var(--cor-branco);
}
.card-total-btn {
    width: 100%;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border: none;
    padding: 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card-total-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cor-primaria) 88%, black);
    transform: translateY(-1px);
}
.card-total-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.card-total-btn i { font-size: 1.05rem; }

/* Modalidade de pagamento — bloco entre o total e o botão "Continuar".
   Cores adaptadas ao card escuro do total (.card-total) usando branco
   semi-transparente para harmonizar com o fundo da marca. */
.card-pagamento-bloco {
    margin: 14px 0 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
}
.card-pagamento-rotulo {
    display: flex; align-items: center; gap: 8px;
    color: var(--cor-branco);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: none;
    letter-spacing: 0.01em;
}
.card-pagamento-rotulo i { font-size: 1.05rem; opacity: 0.85; }
.card-pagamento-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.card-pagamento-celula {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--cor-branco);
}
.card-pagamento-celula-agora { background: rgba(255, 255, 255, 0.16); }
.card-pagamento-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-bottom: 3px;
}
.card-pagamento-celula strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.card-total-nota {
    text-align: center;
    margin-top: 14px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.card-total-nota i { color: var(--cor-destaque); }

/* Footer mini (na página de checkout) */
.site-footer-mini {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    padding: 20px 0;
    margin-top: 0;
}
.footer-mini-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.footer-mini-inner p { margin: 0; opacity: 0.85; }
/* Crédito "Desenvolvido por 4Rentacar" — usado tanto no footer-mini como
   no footer-bloco-legal. Sublinhado discreto + hover branco para sinalizar
   que é clicável sem competir com o copyright. */
.footer-credito-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255,255,255,0.4);
    transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-credito-link:hover {
    color: var(--cor-branco);
    text-decoration-color: var(--cor-branco);
}
.footer-mini-nav {
    display: flex; gap: 18px; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0;
}
.footer-mini-nav a {
    color: rgba(255,255,255,0.85);
    transition: color 0.2s;
}
.footer-mini-nav a:hover { color: var(--cor-branco); }

/* ============================================================================
   Formulário de cliente (cliente.php) — passo 3 do checkout
   ========================================================================= */
.form-cliente .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-cliente .form-campo { display: flex; flex-direction: column; gap: 6px; }
.form-cliente .form-campo-full { grid-column: 1 / -1; }
.form-cliente label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-secundaria);
}
.form-cliente .form-req {
    color: var(--cor-primaria);
    margin-left: 2px;
}
.form-cliente input[type="text"],
.form-cliente input[type="email"],
.form-cliente input[type="tel"],
.form-cliente input[type="number"],
.form-cliente textarea,
.form-cliente select {
    width: 100%;
    border: 1px solid var(--cor-borda);
    background: var(--cor-branco);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--cor-texto);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-cliente input:focus,
.form-cliente textarea:focus,
.form-cliente select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}
.form-cliente input:invalid:not(:placeholder-shown) {
    border-color: var(--cor-primaria);
}
.form-cliente .form-hint {
    font-size: 0.78rem;
    color: var(--cor-texto-mute);
}
.form-cliente .form-secao-titulo {
    margin: 22px 0 12px;
    font-size: 1rem;
    color: var(--cor-secundaria);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cor-borda-suave);
}
.form-cliente textarea {
    resize: vertical;
    min-height: 80px;
}
.form-cliente .form-termos {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda-suave);
    font-size: 0.9rem;
}
.form-cliente .form-termos a {
    color: var(--cor-primaria);
    text-decoration: underline;
}
.form-cliente .form-termos a:hover { text-decoration: none; }

/* Link "Voltar" debaixo do CTA confirmar */
.form-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    transition: color 0.2s;
}
.form-voltar:hover { color: var(--cor-branco); }

@media (max-width: 700px) {
    .form-cliente .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Página de confirmação (confirmacao.php) — sucesso final
   ========================================================================= */
.confirmacao-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.confirmacao-card {
    background: var(--cor-branco);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 40px 32px;
    text-align: center;
    border: 1px solid var(--cor-borda-suave);
}
.confirmacao-icone {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor-destaque) 15%, white);
    color: var(--cor-destaque);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem;
    animation: pop-in 0.4s ease-out;
}
@keyframes pop-in {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.confirmacao-titulo {
    font-size: 1.8rem;
    color: var(--cor-secundaria);
    margin-bottom: 12px;
}
.confirmacao-sub {
    color: var(--cor-texto-mute);
    font-size: 1rem;
    margin: 0 auto 24px;
    max-width: 540px;
    line-height: 1.6;
}
.confirmacao-sub strong { color: var(--cor-texto); }

.confirmacao-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: var(--cor-fundo-suave);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin: 24px 0;
    text-align: left;
}
.confirmacao-resumo-bloco {
    display: flex; flex-direction: column; gap: 4px;
}
.confirmacao-resumo-label {
    font-size: 0.78rem;
    color: var(--cor-texto-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.confirmacao-resumo-bloco strong {
    font-size: 1rem;
    color: var(--cor-secundaria);
}
.confirmacao-resumo-loc {
    font-size: 0.85rem;
    color: var(--cor-texto-mute);
}
.confirmacao-resumo-total {
    grid-column: 1 / -1;
    border-top: 1px solid var(--cor-borda);
    padding-top: 14px;
    margin-top: 4px;
}
.confirmacao-resumo-total strong {
    font-size: 1.4rem;
    color: var(--cor-primaria);
}

/* Modalidade de pagamento — card destacado abaixo do resumo. Verde
   (cor-destaque) para reforçar "tudo OK"; pago no ato em destaque. */
.confirmacao-pagamento-detalhe {
    text-align: left;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin: 22px 0;
}
.confirmacao-pagamento-titulo {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem;
    color: #065f46;
    margin: 0 0 14px;
    font-weight: 600;
}
.confirmacao-pagamento-titulo i { font-size: 1.1rem; }
.confirmacao-pagamento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.confirmacao-pagamento-celula {
    display: flex; flex-direction: column; gap: 4px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 14px;
}
.confirmacao-pagamento-label {
    font-size: 0.75rem;
    color: var(--cor-texto-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.confirmacao-pagamento-celula strong {
    font-size: 1.15rem;
    color: var(--cor-secundaria);
    font-weight: 700;
}
@media (max-width: 600px) {
    .confirmacao-pagamento-grid { grid-template-columns: 1fr; }
}

.confirmacao-info {
    text-align: left;
    background: var(--cor-fundo-suave);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin: 22px 0;
}
.confirmacao-info h3 {
    font-size: 1rem;
    color: var(--cor-secundaria);
    margin-bottom: 10px;
}
.confirmacao-info ul { display: flex; flex-direction: column; gap: 8px; }
.confirmacao-info li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--cor-texto);
    font-size: 0.92rem;
}
.confirmacao-info i {
    color: var(--cor-primaria);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.confirmacao-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.confirmacao-actions .bw-btn-pesquisar {
    min-width: 220px;
    text-decoration: none;
}

@media (max-width: 600px) {
    .confirmacao-card { padding: 28px 20px; }
    .confirmacao-resumo { grid-template-columns: 1fr; }
    .confirmacao-titulo { font-size: 1.5rem; }
}

/* Aviso de estado de pagamento Stripe (inserido dinamicamente por confirmacao.js) */
.confirmacao-pagamento {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 24px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,.08);
    background: #f8fafc;
    text-align: left;
}
.confirmacao-pagamento i {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.confirmacao-pagamento p { margin: 4px 0 0; font-size: .92rem; opacity: .85; }
.confirmacao-pagamento.pago-ok    { background: #ecfdf5; border-color: #a7f3d0; }
.confirmacao-pagamento.pago-ok i  { color: #059669; }
.confirmacao-pagamento.pago-aviso { background: #fff7ed; border-color: #fed7aa; }
.confirmacao-pagamento.pago-aviso i { color: #ea580c; }
.confirmacao-pagamento.pago-erro  { background: #fef2f2; border-color: #fecaca; }
.confirmacao-pagamento.pago-erro i { color: #dc2626; }

/* 12. Responsividade da página de reserva ------------------------------- */
@media (max-width: 1100px) {
    .reserva-grid { grid-template-columns: 1fr 400px; }
}
@media (max-width: 900px) {
    .reserva-grid { grid-template-columns: 1fr; }
    /* Em mobile (single-column), o card-total continua sticky-bottom — fica
       fixo na base do viewport como CTA persistente, à boa maneira de checkout
       em e-commerce. O margin-top: auto não tem efeito porque já não há flex
       column "esticada" — fica simplesmente após o último irmão. */
    .reserva-col-dir { display: block; }
    .incluido-lista { grid-template-columns: 1fr; }
    .card-periodo { grid-template-columns: 1fr; gap: 8px; text-align: left; }
    .card-periodo-sep { display: none; }
}

/* 10. Responsividade ----------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-titulo { font-size: 2.6rem; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .site-nav-toggle { display: flex; }
    /* Estado fechado: padding-top/bottom 0 e sem box-shadow para ficar
       invisível por completo. Ao abrir, recuperamos padding e sombra
       (transicionados em conjunto com max-height para suavidade). */
    .site-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--cor-branco);
        flex-direction: column;
        padding: 0 16px;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        transition: max-height 0.3s, padding 0.3s, box-shadow 0.3s;
    }
    .site-nav.is-open {
        max-height: 500px;
        padding: 16px;
        box-shadow: var(--shadow-md);
    }
    .site-nav-lista { flex-direction: column; gap: 0; }
    .site-nav-lista > li > a { padding: 12px 14px; }
    /* Em mobile, o dropdown da nav tem fundo branco (.site-nav background)
       — anula a regra global que pinta os links a branco sobre o hero,
       senão fica branco-sobre-branco e ilegível. */
    .site-header-grande:not(.scrolled) .site-nav-lista > li > a,
    .site-header-grande:not(.scrolled) .site-nav-lista > li > a:hover {
        color: var(--cor-texto);
        text-shadow: none;
    }
    .site-header-grande:not(.scrolled) .site-nav-lista > li > a:hover {
        background: var(--cor-fundo);
        color: var(--cor-primaria);
    }
    .site-nav-lista .submenu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding: 4px 0 4px 16px;
    }
    /* Em mobile, o estado "grande" da homepage não é dramático — o utilizador
       já tem pouco espaço vertical. Reduzimos o overhead. */
    .site-header-grande:not(.scrolled) .header-inner { min-height: 80px; }
    .site-header-grande:not(.scrolled) .site-logo { height: 52px; }
    .site-header-grande:not(.scrolled) .site-brand-nome { font-size: 1.15rem; }

    .bw-grupo-inputs { grid-template-columns: 1fr 1fr; }
    .bw-grupo-inputs > .bw-input-wrap:first-child { grid-column: 1 / -1; }
    .bw-grupo-categoria .bw-grupo-inputs { grid-template-columns: 1fr; }
    .bw-filtros-dinamicos .bw-grupo-inputs { grid-template-columns: 1fr 1fr; }
    .trust-grid { grid-template-columns: 1fr 1fr; }
    .hero-titulo { font-size: 2.2rem; }
    /* Header GRANDE em mobile/tablet tem min-height 80px — ajustamos a
       margem negativa do hero e aumentamos o padding-top para o título
       ficar bem afastado do topo (não escondido pelo header sticky). */
    .hero { margin-top: -80px; }
    .hero-inner { padding: 140px 24px 80px; }
}
@media (max-width: 600px) {
    /* Mantemos o nome da empresa visível ao lado do logo em mobile —
       serve de identificador "estás aqui" no topo de qualquer página
       (incluindo a homepage, onde não há cms-titulo). Reduzimos o
       tamanho para não competir com o CTA Reservar. */
    .site-brand-nome {
        font-size: 0.95rem;
        max-width: 30vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bw-grupo-inputs { grid-template-columns: 1fr; }
    .bw-filtros-dinamicos .bw-grupo-inputs { grid-template-columns: 1fr; }
    /* Em mobile (≤600px) os 3 inputs de cada grupo empilham — sem mais
       margem entre grupos os campos do Levantamento "encostam-se" aos da
       Devolução e o utilizador deixa de perceber onde acaba uma secção e
       começa a outra. Aumentamos o gap entre grupos. `.bw-grupo:last-of-type`
       (=Categoria) já tem regra própria de 8px e não é afectado. */
    .bw-grupo { margin-bottom: 24px; }
    .trust-grid { grid-template-columns: 1fr; gap: 16px; }
    .footer-inner { grid-template-columns: 1fr; }
    /* Mobile: alinhamento centrado para todos os blocos do rodapé. Logo
       maior (88px) para ganhar presença, e flex centra blocos de
       contactos/redes que normalmente alinhariam à esquerda. */
    .footer-bloco {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-bloco p { justify-content: center; }
    .footer-logo { height: 88px; margin-bottom: 16px; }
    .footer-redes { justify-content: center; }
    .resultados-grid { grid-template-columns: 1fr; }
    .hero-titulo { font-size: 1.8rem; }
    /* Mobile (≤600px): header transparente sobre o hero, .hero com
       margin-top -80px (já definido no breakpoint ≤900px), padding-top
       maior para o título não ficar escondido pelo header sticky. */
    .hero-inner { padding: 130px 20px 60px; }
    .booking-widget { padding: 20px; }
    .bw-btn-pesquisar { width: 100%; }
}

/* ============================================================================
   13. SCROLL-TO-TOP — botão flutuante "voltar ao topo"
   ============================================================================
   Aparece no canto inferior direito quando o user faz scroll > 400px. Click
   faz scroll suave para o topo. Visível em todas as páginas do modelo.
   Comportamento e visual delegados para JS inline em cada template (ver final
   de index.php / pagina.php / reserva.php / cliente.php / confirmacao.php). */
.scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;                    /* abaixo de modais (100+) e sticky cards */
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--cor-branco);
    color: var(--cor-secundaria);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Estado escondido (default): off-screen + invisível */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s,
                box-shadow 0.2s;
}
.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    box-shadow: 0 8px 24px rgba(254, 42, 43, 0.35);
    transform: translateY(-2px);
}
.scroll-top-btn:active {
    transform: translateY(0);
}
.scroll-top-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Em mobile, mais perto da margem para não atrapalhar polegar */
@media (max-width: 600px) {
    .scroll-top-btn {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

/* ============================================================================
   14. TRADUTOR — Language picker custom UI ligada ao Google Translate Element
   ============================================================================
   O Google Translate widget normalmente injecta uma barra no topo do <body>
   ("Translated by Google · pt → en") que empurra o conteúdo todo para baixo.
   Escondemos essa barra por completo e usamos apenas o select hidden, que
   é controlado pelo nosso botão custom (ver _partials/lang_picker.php +
   assets/js/i18n.js).
   ========================================================================= */

/* Esconde a BARRA SUPERIOR "Translated by Google" + tooltips. Os
   selectores são generosos porque o Google muda os nomes das classes
   entre versões do widget. Tudo o que aparece colado ao topo do <body>
   com a marca .skiptranslate ou IDs do widget é ocultado.
   Importante: NÃO esconder o iframe interno que o engine usa para fazer
   a tradução em runtime — esse não é direct child de <body>. */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
iframe.skiptranslate,
.skiptranslate iframe,
body > iframe[id^=":1.container"],
body > iframe[id^=":2.container"],
body > iframe[id*="goog-gt"],
body > .skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-spinner-pos {
    display: none !important;
}
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}
/* O Google força body { top: 40px } e por vezes margin-top para deixar
   espaço à sua barra. Como escondemos a barra, anulamos os offsets em
   todas as variantes que o widget pode injectar. */
body,
body.goog-disable-mouse-events,
body[style*="top"] {
    top: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}
html[style*="margin-top"] {
    margin-top: 0 !important;
}
/* Esconde o gadget visual do Google (o select que aparece no
   #google_translate_element fica visualmente oculto) — mas o select
   continua acessível ao JS via document.querySelector('.goog-te-combo'). */
#google_translate_element {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
}

/* ── Custom picker ────────────────────────────────────────────────────── */
.lang-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.lang-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--cor-secundaria);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}
.lang-picker-btn:hover,
.lang-picker-btn:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
    outline: none;
}
.lang-picker-flag {
    font-size: 1.05rem;
    line-height: 1;
}
.lang-picker-code {
    letter-spacing: 0.5px;
    font-weight: 700;
}
.lang-picker-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.lang-picker-btn[aria-expanded="true"] .lang-picker-caret {
    transform: rotate(180deg);
}

/* Header GRANDE (homepage no topo) é transparente sobre o hero escuro —
   o picker precisa de cores claras para contrastar. Quando a página fizer
   scroll (.scrolled), o header passa a fundo branco sólido e a regra
   genérica acima volta a aplicar texto escuro. */
.site-header-grande:not(.scrolled) .lang-picker-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.30);
}
.site-header-grande:not(.scrolled) .lang-picker-btn:hover,
.site-header-grande:not(.scrolled) .lang-picker-btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.50);
}

/* Dropdown ----------------------------------------------------------- */
.lang-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    animation: langPickerSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes langPickerSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lang-picker-menu li { margin: 0; padding: 0; }
.lang-picker-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--cor-secundaria);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-picker-menu a:hover,
.lang-picker-menu a:focus-visible {
    background: #f3f4f6;
    color: var(--cor-secundaria);
    text-decoration: none;
    outline: none;
}
.lang-picker-menu a.is-active {
    color: var(--cor-primaria);
    font-weight: 700;
    background: #fff5f5;
}
.lang-picker-menu .lang-picker-flag {
    font-size: 1.1rem;
}

/* Mobile: oculta o "code" (PT/EN) — fica só a bandeira para poupar espaço */
@media (max-width: 600px) {
    .lang-picker { margin-right: 8px; }
    .lang-picker-btn { padding: 6px 10px; }
    .lang-picker-code { display: none; }
    .lang-picker-menu { right: -8px; min-width: 160px; }
}

/* ============================================================================
   15. TESTEMUNHOS — Carousel de Google Reviews + manuais
   ============================================================================
   Carousel OwlCarousel com cards modernos. Badge "Google Reviews" no header
   da secção. Cada card tem avatar (foto ou iniciais), info do autor, estrelas
   amarelas, texto truncado, e tag "G" no canto superior direito quando
   origem=Google. Setas laterais discretas + dots em baixo. Auto-play 6s.
   ========================================================================= */

.testemunhos-section {
    background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
    padding: 70px 0;
    border-bottom: 1px solid var(--cor-borda-suave);
}
@media (min-width: 1920px) {
    .testemunhos-section { padding: 110px 0; }
}

.testemunhos-header {
    text-align: center;
    margin-bottom: 36px;
}
.testemunhos-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.testemunhos-google-logo {
    font-family: 'Poppins', -apple-system, system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.5px;
}
.testemunhos-titulo {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: var(--cor-secundaria);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.testemunhos-subtitulo {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* ── Cards do carousel ───────────────────────────────────────────────── */
.testemunhos-carousel { margin-top: 12px; }

.testemunho-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.testemunho-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
}

.testemunho-card-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.testemunho-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
}
.testemunho-avatar-iniciais {
    background: linear-gradient(135deg, var(--cor-secundaria) 0%, #2c4d76 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}
.testemunho-autor-info {
    flex: 1 1 auto;
    min-width: 0;
}
.testemunho-autor-nome {
    font-weight: 600;
    color: var(--cor-secundaria);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testemunho-autor-data {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* Tag pequena "G" do Google no canto superior direito do card */
.testemunho-google-tag {
    position: absolute;
    top: -2px;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.testemunho-google-letra {
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Poppins', -apple-system, system-ui, sans-serif;
    line-height: 1;
}

/* ── Estrelas ───────────────────────────────────────────────────────── */
.testemunho-stars {
    display: flex;
    gap: 3px;
}
.testemunho-stars i {
    font-size: 1rem;
    color: #fbbf24;       /* dourado */
}
.testemunho-stars i.is-empty {
    color: #e5e7eb;
}

/* ── Texto do testemunho ────────────────────────────────────────────── */
.testemunho-texto {
    margin: 0;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.6;
    /* Truncate visual a ~5 linhas para uniformizar altura dos cards */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    font-style: italic;
    quotes: "\201C" "\201D";
}
.testemunho-texto::before {
    content: open-quote;
    margin-right: 2px;
    color: var(--cor-primaria);
    font-weight: 700;
}
.testemunho-texto::after {
    content: close-quote;
    margin-left: 2px;
    color: var(--cor-primaria);
    font-weight: 700;
}

/* ── Setas e dots do Owl ────────────────────────────────────────────── */
.testemunhos-carousel .owl-nav {
    margin-top: 0;
}
.testemunhos-carousel .owl-nav button.owl-prev,
.testemunhos-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--cor-primaria) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}
/* O <i> com icon-font tem bounding box simétrica — centragem ópticamente
   correcta sem hacks adicionais. font-size controla o glyph (~16px ≈ metade
   do diâmetro do botão de 44px = peso visual equilibrado). line-height:1
   evita offset vertical da própria icon-font. */
.testemunhos-carousel .owl-nav button.owl-prev i,
.testemunhos-carousel .owl-nav button.owl-next i {
    font-size: 16px;
    line-height: 1;
    display: block;
}
.testemunhos-carousel .owl-nav button.owl-prev { left: -22px; }
.testemunhos-carousel .owl-nav button.owl-next { right: -22px; }
.testemunhos-carousel .owl-nav button:hover {
    background: var(--cor-primaria) !important;
    color: #fff !important;
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 6px 16px rgba(254, 42, 43, 0.25);
}
.testemunhos-carousel .owl-nav button:hover i { color: #fff; }

/* ─── Modal de testemunho completo ────────────────────────────────────────
   Aparece ao clicar num .testemunho-card. Hidratado via JS com data-attrs.
   Vanilla CSS (sem deps externas) — fica leve e funciona em qualquer página
   que reuse o componente. */

/* Card é clicável — adicionamos cursor + focus ring para keyboard nav */
.testemunho-card { cursor: pointer; }
.testemunho-card:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 3px;
}

.testemunho-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.testemunho-modal[hidden] { display: none; }
.testemunho-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: testemunhoModalFade 0.2s ease;
}
.testemunho-modal-conteudo {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 28px 28px 24px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25),
                0 10px 25px rgba(0, 0, 0, 0.15);
    animation: testemunhoModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes testemunhoModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes testemunhoModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Botão X — top-right do conteúdo */
.testemunho-modal-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    padding: 0;
}
.testemunho-modal-fechar i {
    font-size: 14px;
    line-height: 1;
}
.testemunho-modal-fechar:hover {
    background: var(--cor-primaria);
    color: #fff;
    transform: rotate(90deg);
}

/* Cabeçalho com avatar + nome/data + tag Google */
.testemunho-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 40px; /* espaço para o botão X */
}
.testemunho-modal-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
}
.testemunho-modal-avatar.testemunho-avatar-iniciais {
    background: linear-gradient(135deg, var(--cor-secundaria) 0%, #2c4d76 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}
.testemunho-modal-autor { flex: 1 1 auto; min-width: 0; }
.testemunho-modal-nome {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    line-height: 1.3;
}
.testemunho-modal-data {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #9ca3af;
}
.testemunho-modal-google {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Poppins', system-ui, sans-serif;
    flex-shrink: 0;
}

/* Estrelas — sequência centrada à esquerda, separadas dos textos */
.testemunho-modal-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.testemunho-modal-stars i {
    font-size: 1.1rem;
    color: #fbbf24;
}
.testemunho-modal-stars i.is-empty { color: #e5e7eb; }

/* Texto completo — sem truncate (-webkit-line-clamp do card é o oposto
   do que queremos aqui) */
.testemunho-modal-texto {
    margin: 0;
    color: #4b5563;
    font-size: 0.98rem;
    line-height: 1.65;
    quotes: '\201C' '\201D' '\2018' '\2019';
}
.testemunho-modal-texto::before {
    content: open-quote;
    margin-right: 3px;
    color: var(--cor-primaria);
    font-weight: 700;
    font-size: 1.3em;
}
.testemunho-modal-texto::after {
    content: close-quote;
    margin-left: 3px;
    color: var(--cor-primaria);
    font-weight: 700;
    font-size: 1.3em;
}

/* Mobile — padding mais apertado, tipografia ligeiramente menor */
@media (max-width: 480px) {
    .testemunho-modal { padding: 12px; }
    .testemunho-modal-conteudo {
        padding: 22px 20px 18px;
        border-radius: 14px;
        max-height: calc(100vh - 24px);
    }
    .testemunho-modal-header {
        gap: 12px;
        margin-bottom: 14px;
        padding-right: 36px;
    }
    .testemunho-modal-avatar { width: 48px; height: 48px; }
    .testemunho-modal-nome   { font-size: 1.02rem; }
    .testemunho-modal-texto  { font-size: 0.94rem; line-height: 1.6; }
}

.testemunhos-carousel .owl-dots {
    margin-top: 28px !important;
    text-align: center;
}
.testemunhos-carousel .owl-dots button.owl-dot span {
    width: 8px !important;
    height: 8px !important;
    background: #d1d5db !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.testemunhos-carousel .owl-dots button.owl-dot.active span {
    background: var(--cor-primaria) !important;
    transform: scale(1.4);
}

/* ── CTA "Ver todos os comentários" ─────────────────────────────────── */
.testemunhos-cta-wrap {
    text-align: center;
    margin-top: 36px;
}
.testemunhos-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: var(--cor-primaria);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(254, 42, 43, 0.25);
    transition: background 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
}
.testemunhos-cta:hover,
.testemunhos-cta:focus-visible {
    background: #e02223;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(254, 42, 43, 0.35);
    color: #fff;
    text-decoration: none;
    outline: none;
}
.testemunhos-cta i {
    font-size: 0.78rem;
    transition: transform 0.25s ease;
}
.testemunhos-cta:hover i { transform: translateX(3px); }

/* Mobile (≤ 540px) — setas escondidas (UX touch usa swipe) */
@media (max-width: 540px) {
    .testemunhos-section { padding: 50px 0; }
    .testemunhos-carousel .owl-nav { display: none; }
    .testemunho-card { padding: 20px; }
    .testemunho-texto { -webkit-line-clamp: 8; }
}

/* ── Booking widget na página CMS (quando há widget frota) ────────────────
   O .booking-widget original está optimizado para o hero (texto branco
   sobre slideshow). Em pagina.php fica num fundo claro — adicionamos
   reset cosmético + spacing para integrar. */
.cms-booking-wrap {
    margin: 0 0 64px;
    padding: 0;
}
.booking-widget-page {
    /* Override do background semi-transparente do hero — fundo branco sólido
       com sombra para destaque no contexto da página. */
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.cms-booking-info {
    margin: 14px 4px 0;
    padding: 10px 14px;
    background: #f0f9ff;
    border-left: 3px solid var(--cor-primaria);
    color: #4b5563;
    font-size: 0.85rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cms-booking-info i {
    color: var(--cor-primaria);
    font-size: 1rem;
}

/* ── Fallback CSS-only quando OwlCarousel ainda não inicializou ────────────
   Antes do JS correr, o markup é renderizado como cards lado-a-lado em
   scroll horizontal com snap. Quando o Owl inicializa, a class .owl-loaded
   é adicionada e o Owl assume o controlo do layout (cards em items
   absolutamente posicionados pelo plugin). Esta regra desaparece
   automaticamente uma vez Owl carregado.

   IMPORTANTE: min-height reservada antes do Owl carregar — evita CLS
   (saltos de layout) quando o plugin troca para o modo carousel. ~380px
   cobre o card mais alto numa coluna em mobile. */
.testemunhos-carousel:not(.owl-loaded) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
    padding: 8px 4px 18px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    min-height: 380px;
}
/* Owl-loaded: deixa Owl gerir a altura. Forçar min-height fazia com que o
   container ficasse mais alto que os cards reais, e as setas de navegação
   (top: 50%) ficavam visualmente "baixas" (50% de 380px = 190px, longe do
   centro vertical real dos cards). Sem min-height, Owl iguala a altura de
   todos os cards visíveis ao mais alto, e as setas centram correctamente.
   position: relative garante que as setas absolute se ancoram aqui. */
.testemunhos-carousel.owl-loaded {
    position: relative;
}
.testemunhos-carousel:not(.owl-loaded)::-webkit-scrollbar { height: 6px; }
.testemunhos-carousel:not(.owl-loaded)::-webkit-scrollbar-track { background: transparent; }
.testemunhos-carousel:not(.owl-loaded)::-webkit-scrollbar-thumb {
    background: #d1d5db; border-radius: 3px;
}
.testemunhos-carousel:not(.owl-loaded) .testemunho-card {
    scroll-snap-align: start;
    min-width: 280px;
}

/* ── Grid de testemunhos (widget na página CMS /testemunhos) ───────────────
   Mesmos cards que o carousel mas em grid 3-cols responsivo. */
.widget-testemunhos {
    margin: 12px 0;
}
.widget-testemunhos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1023px) { .widget-testemunhos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .widget-testemunhos-grid { grid-template-columns: 1fr; gap: 16px; } }
.widget-testemunhos-grid .testemunho-card {
    /* Texto sem truncate no grid (cards podem ter alturas diferentes — ok) */
    flex: 0 0 auto;
}
.widget-testemunhos-grid .testemunho-texto {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
.widget-testemunhos-vazio {
    text-align: center;
    color: #6b7280;
    padding: 40px 0;
    font-style: italic;
}

/* ── Sentinel + loader do infinite scroll ───────────────────────────── */
.widget-testemunhos-sentinel {
    text-align: center;
    padding: 30px 0 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-testemunhos-loader {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    font-size: 0.9rem;
    font-style: italic;
    animation: widgetTestPulse 1.6s ease-in-out infinite;
}
/* O atributo `hidden` do HTML aplica `display: none` mas a regra `display:
   inline-flex` acima TEM mais especificidade e sobrepõe — daí o loader
   continuar visível depois de loader.hidden = true. Forçamos a
   prioridade aqui para `[hidden]` voltar a funcionar como esperado. */
.widget-testemunhos-loader[hidden] { display: none !important; }
@keyframes widgetTestPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
.widget-testemunhos-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(254, 42, 43, 0.18);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: widgetTestSpin 0.8s linear infinite;
}
@keyframes widgetTestSpin {
    to { transform: rotate(360deg); }
}
.widget-testemunhos-fim {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.88rem;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
}
.widget-testemunhos-fim i {
    color: #16a34a;
    font-size: 1rem;
}
.widget-testemunhos-mais-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.widget-testemunhos-mais-btn:hover {
    background: #e02223;
    transform: translateY(-1px);
}