/* =========================================================
   Top Passagens — Design System
   ========================================================= */

/* -------- Design tokens -------- */
:root {
    /* Brand — paleta Top Passagens */
    --vermelho:        #FF0000;
    --vermelho-suave:  #FF3333;
    --vermelho-soft:   #ffe9e9;
    --vermelho-escuro: #cc0000;

    /* Neutros */
    --branco:          #ffffff;
    --cinza-50:        #f6f6f6;
    --cinza-100:       #EAEAEA;
    --cinza-200:       #dcdfe4;
    --cinza-500:       #7a7a85;
    --cinza-700:       #444444;
    --cinza-escuro:    #282638;
    --preto:           #000000;

    /* Semânticas (UI states) */
    --verde:           #3aa77a;
    --amarelo:         #e8b83a;
    --erro:            #d94d4d;

    /* Tipografia */
    --fonte-titulo:    'Poppins', system-ui, -apple-system, sans-serif;
    --fonte-texto:     'Poppins', system-ui, -apple-system, sans-serif;

    /* Forma */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Sombra */
    --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --sombra-md: 0 10px 30px rgba(0, 0, 0, 0.08);

    --transicao: 220ms cubic-bezier(.2,.8,.2,1);
    --container: 1240px;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { padding-top: 78px; }       /* compensa o header fixo (≈ 79px) — encostado, sem gap */
@media (max-width: 900px) { body { padding-top: 65px; } }   /* mobile: min-height 64px + 1px border */
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cinza-700);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--preto);
    line-height: 1.15;
    margin: 0 0 0.6em;
    font-weight: 700;
    letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--cinza-500); }

p { margin: 0 0 1em; }
strong { color: var(--preto); font-weight: 600; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------- Material Symbols -------- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal; font-style: normal;
    font-size: 1.15em; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* -------- Utilities -------- */
.text-vermelho { color: var(--vermelho); }
.text-grad {
    background: linear-gradient(90deg, var(--vermelho), var(--vermelho-suave));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vermelho);
    margin-bottom: 20px;
}
.eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--vermelho);
    border-radius: 999px;
}
.eyebrow.light { color: var(--vermelho-suave); }
.eyebrow.light::before { background: var(--vermelho-suave); }

/* =========================================================
   HEADER (branco, fixo)
   ========================================================= */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--cinza-100);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.logo img { width: auto; height: auto; max-height: 44px; max-width: 200px; }

.main-nav {
    margin-left: auto;          /* empurra o menu pra direita, encostado no CTA */
    margin-right: 14px;
}
.main-nav > ul {
    display: flex;
    gap: 4px;
    align-items: center;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 11px;
    font-family: var(--fonte-titulo);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--preto);
    border-radius: 8px;
    transition: color var(--transicao);
}
.main-nav a:hover,
.main-nav a.ativo { color: var(--vermelho); }
.main-nav a.ativo { font-weight: 600; }

.header-cta { flex-shrink: 0; }
/* CTA do header mais baixo que o .btn padrão (alinha com os ícones sociais) */
.btn.header-cta { padding: 5px 18px 5px 5px; }
.btn.header-cta .material-symbols-outlined { width: 28px; height: 28px; font-size: 0.95rem; }

.header-social {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    border-radius: 999px;
    background: var(--vermelho);
    color: #fff;
    border: 1.5px solid transparent;
    transition: all var(--transicao);
}
.header-social svg { width: 19px; height: 19px; }
.header-social:hover { background: var(--vermelho-escuro); transform: translateY(-2px); }

/* Itens de redes sociais (Instagram, Facebook) dentro do menu — só aparecem no mobile */
.nav-social { display: none; }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
}
.menu-toggle span {
    width: 26px; height: 2px; background: var(--preto);
    transition: transform var(--transicao), opacity var(--transicao);
}

@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; padding: 8px; flex-shrink: 0; }

    .header-inner {
        padding: 10px 16px;
        min-height: 64px;
        gap: 10px;
        justify-content: flex-start;       /* logo à esquerda; cta+toggle vão pra direita via auto-margin */
    }
    .logo img { height: 30px; width: auto; max-width: 140px; }

    /* CTA do header em versão compacta no mobile, empurrado pro lado do toggle.
       Usa .btn.header-cta para vencer a especificidade do .btn base, que está
       definido mais abaixo no arquivo (mesma especificidade = última vence). */
    .btn.header-cta {
        margin-left: auto;
        font-size: 0.7rem;
        line-height: 1.1;
        padding: 3px 12px 3px 3px;
        gap: 6px;
        flex-shrink: 0;
    }
    .btn.header-cta .material-symbols-outlined {
        width: 22px;
        height: 22px;
        font-size: 0.78rem;
    }
    .header-social {
        width: 38px;
        height: 38px;
    }
    .header-social svg { width: 18px; height: 18px; }

    /* botões da barra somem no mobile; redes sociais passam a viver dentro do menu */
    .header-inner > .header-social { display: none; }
    .nav-social { display: block; }
    .nav-social > a { color: var(--preto); }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--cinza-100);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height var(--transicao), opacity var(--transicao), visibility var(--transicao);
    }
    .main-nav.open {
        max-height: calc(100vh - 72px);
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
    .main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
    }
    .main-nav > ul > li { border-bottom: 1px solid var(--cinza-100); }
    .main-nav > ul > li:last-child { border-bottom: none; }
    .main-nav > ul > li > a {
        padding: 16px 24px;
        font-size: 1rem;
        border-radius: 0;
        justify-content: space-between;
    }
    /* CTA mobile como item de lista */
    .main-nav::after {
        content: '';
    }
}

/* =========================================================
   BOTÕES — pill com chip de seta circular
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px 8px 8px;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.92rem;
    border: 1.5px solid transparent;
    background: var(--vermelho);
    color: #fff;
    transition: all var(--transicao);
    white-space: nowrap;
    cursor: pointer;
}
.btn::before {
    content: '';
    width: 30px; height: 30px;
    background: #fff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/14px no-repeat;
    border-radius: 999px;
    flex-shrink: 0;
    transition: transform var(--transicao);
}
.btn:hover { background: var(--vermelho-escuro); transform: translateY(-2px); }
.btn:hover::before { transform: rotate(-45deg); }

/* Variante com ícone Material Symbols como chip à esquerda (substitui a seta padrão) */
.btn .material-symbols-outlined {
    background: #fff;
    color: var(--vermelho);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 1rem;
    flex-shrink: 0;
    order: -1; /* força o ícone a aparecer ANTES do texto */
    transition: transform var(--transicao);
}
.btn:hover .material-symbols-outlined { transform: rotate(-12deg); }
.btn:has(.material-symbols-outlined)::before { display: none; }
.btn-dark .material-symbols-outlined { background: var(--vermelho); color: #fff; }
.btn-white .material-symbols-outlined { background: var(--vermelho); color: #fff; }
.btn-ghost .material-symbols-outlined,
.btn-light .material-symbols-outlined {
    background: transparent;
    color: inherit;
    width: auto;
    height: auto;
    order: 0;
    font-size: 1.15em;
}
.btn-ghost:has(.material-symbols-outlined)::before,
.btn-light:has(.material-symbols-outlined)::before { display: none; }

.btn-ghost {
    background: transparent;
    color: var(--preto);
    border-color: var(--cinza-200);
    padding: 10px 22px;
}
.btn-ghost::before { display: none; }
.btn-ghost:hover { border-color: var(--vermelho); color: var(--vermelho); background: transparent; }

.btn-dark { background: var(--cinza-escuro); }
.btn-dark::before { background-color: var(--vermelho); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.btn-dark:hover { background: var(--preto); }

.btn-white {
    background: #fff;
    color: var(--vermelho);
    border-color: #fff;
}
.btn-white::before {
    background-color: var(--vermelho);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
}
.btn-white:hover { background: var(--preto); color: #fff; border-color: var(--vermelho); }
.btn-white:hover::before { background-color: var(--vermelho); }

.btn-light {
    background: #fff;
    color: var(--preto);
    border-color: var(--cinza-200);
    padding: 10px 22px;
}
.btn-light::before { display: none; }
.btn-light:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
    background: #fff;
    transform: translateY(-2px);
}

.btn-sm { font-size: 0.82rem; padding: 6px 18px 6px 6px; }
.btn-sm::before { width: 26px; height: 26px; background-size: 12px; }

/* =========================================================
   SECTION BASE
   ========================================================= */
.section { padding: 100px 0; }
.section.bg-cinza { background: var(--cinza-50); }
.section.bg-escuro { background: var(--cinza-escuro); color: rgba(255,255,255,0.75); }
.section.bg-escuro h2, .section.bg-escuro h3 { color: #fff; }

.section .lead {
    color: var(--cinza-500);
    font-size: 1.05rem;
    max-width: 60ch;
    line-height: 1.6;
}

/* =========================================================
   FOOTER (cinza escuro)
   ========================================================= */
.site-footer {
    background: var(--cinza-escuro);
    color: rgba(255,255,255,0.7);
    padding: 72px 0 28px;
    font-size: 0.94rem;
}
.site-footer .container {
    max-width: var(--container);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.85fr 1fr 1fr 1.2fr;
    column-gap: 16px;
    row-gap: 36px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-col-brand {
    padding-right: 80px;       /* gap col1→col2 = 16 (column-gap) + 80 (padding) = 96px */
}
.footer-col-brand .logo-footer img {
    max-height: 44px;
    width: auto;
    margin-bottom: 22px;
}
.footer-sobre {
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    max-width: 46ch;            /* força a quebra em 2 linhas no desktop */
    margin: 0;
}

/* Ícones sociais (Instagram, Facebook) */
.footer-social {
    display: inline-flex;
    gap: 10px;
    margin-top: 22px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.footer-social a:hover {
    background: var(--vermelho);
    color: #fff;
    transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }

.footer-col h4 {
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 18px;
    letter-spacing: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transicao);
}
.footer-links a:hover { color: #fff; }
.footer-contact .address {
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
}

.footer-trust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.trust-payments,
.trust-security {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.trust-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.35;
}
.trust-payments img { max-height: 68px; width: auto; }
.trust-security img { max-height: 48px; width: auto; }

.footer-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom .we-are a { color: #fff; font-weight: 600; }
.footer-bottom .we-are a:hover { color: var(--vermelho-suave); }

@media (max-width: 900px) {
    .site-footer { padding: 48px 0 24px; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        row-gap: 36px;
    }
    .footer-col-brand {
        grid-column: 1 / -1;
        padding-right: 0;       /* zera o padding-right do desktop no mobile */
    }
    .footer-sobre { max-width: 56ch; }

    /* Faixa de confiança no mobile: empilhada com label sobre imagem.
       Ordem desejada:
         1) "Formas de pagamento" + imagem dos cartões
         2) "Compra 100% segura" + selo Sectigo                       */
    .footer-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
    .trust-payments,
    .trust-security {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    /* trust-security tem o <img> antes do label no HTML (no desktop a
       imagem fica à esquerda). No mobile invertemos para que o label
       apareça primeiro, mantendo a ordem visual pedida.               */
    .trust-security { flex-direction: column-reverse; }

    /* No mobile o label "Formas de pagamento" cabe numa linha só —
       desativa o <br> que existe pra desktop. O espaço antes do <br>
       no HTML mantém a separação das palavras quando ele some.         */
    .br-desktop { display: none; }

    /* Cartões um pouco maiores no mobile (+20% vs. desktop) */
    .trust-payments img { max-height: 82px; }

    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   WHATSAPP FLOAT — pill com ícone + label "Compre pelo WhatsApp"
   ========================================================= */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #25D366;
    color: #fff;
    border-radius: 999px;
    padding: 6px 22px 6px 6px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(37,211,102,0.4);
    z-index: 90;
    transition: transform var(--transicao), box-shadow var(--transicao);
    font-family: var(--fonte-titulo);
}
.whatsapp-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(37,211,102,0.5);
}
.whatsapp-float .wa-icon {
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #25D366;
    flex-shrink: 0;
}
.whatsapp-float .wa-icon svg { width: 26px; height: 26px; }
.whatsapp-float .wa-text {
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

@media (max-width: 560px) {
    /* Versão compacta da pill no mobile — mantém texto + ícone, proporção menor */
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        padding: 5px 18px 5px 5px;
        gap: 10px;
    }
    .whatsapp-float .wa-icon { width: 40px; height: 40px; }
    .whatsapp-float .wa-icon svg { width: 22px; height: 22px; }
    .whatsapp-float .wa-text { font-size: 0.78rem; }
}

/* =========================================================
   DESIGN SYSTEM — página /componentes (showcase)
   ========================================================= */

/* ---- Hero showcase ---- */
.test-hero {
    background: linear-gradient(180deg, #fff 0%, var(--vermelho-soft) 100%);
    padding: 64px 0 96px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--cinza-100);
}
.test-hero .container {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: end;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 10px;
    background: rgba(255,0,0,0.08);
    border: 1px solid rgba(255,0,0,0.24);
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vermelho);
    margin-bottom: 26px;
}
.tag-pulse {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--vermelho);
    box-shadow: 0 0 0 4px rgba(255,0,0,0.20);
    animation: ds-pulse 1.8s infinite;
}
@keyframes ds-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,0,0,0.20); }
    50%      { box-shadow: 0 0 0 9px rgba(255,0,0,0); }
}
.hero-main h1 .slogan em { font-style: normal; color: var(--vermelho); }
.hero-main .lead {
    font-size: 1.1rem;
    color: var(--cinza-500);
    margin: 22px 0 32px;
    max-width: 56ch;
    line-height: 1.55;
}
.hero-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-aside {
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    padding: 28px 30px;
    box-shadow: var(--sombra-md);
}
.hero-aside .kpi-lbl {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--cinza-500);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.hero-aside .kpi {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1;
    color: var(--preto);
    margin: 14px 0 14px;
    letter-spacing: -0.03em;
}
.hero-aside .kpi em { font-style: normal; color: var(--vermelho); }
.hero-aside p {
    color: var(--cinza-500);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .test-hero { padding: 48px 0 64px; }
    .test-hero .container { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- Section label (cabeçalho numerado de cada bloco) ---- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.section-label .num {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--vermelho);
    background: var(--vermelho-soft);
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.04em;
}
.section-label .tag {
    font-family: var(--fonte-titulo);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cinza-500);
}

/* ---- Tipografia (linhas de exemplo) ---- */
.type-grid { display: grid; gap: 14px; }
.type-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    align-items: center;
}
.type-row .meta {
    font-family: var(--fonte-titulo);
    font-size: 0.82rem;
    color: var(--cinza-500);
    line-height: 1.45;
}
.type-row .meta strong {
    display: block;
    color: var(--preto);
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 0.88rem;
}
.type-row .sample > * { margin: 0; }
.type-row .sample p { color: var(--cinza-700); }

@media (max-width: 900px) {
    .type-row { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
}

/* ---- Paleta de cores ---- */
.cores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cor-swatch {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--cinza-100);
    box-shadow: var(--sombra-sm);
}
.cor-swatch .cor {
    height: 132px;
    display: flex;
    align-items: flex-end;
    padding: 16px 18px;
    font-family: var(--fonte-titulo);
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.cor-swatch .info {
    padding: 14px 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.cor-swatch .info strong {
    font-family: var(--fonte-titulo);
    color: var(--preto);
    font-weight: 700;
    font-size: 0.85rem;
}
.cor-swatch .info span {
    color: var(--cinza-500);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

@media (max-width: 900px) { .cores-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Botões (alias + grid de showcase) ---- */
.btn-primary { /* alias semântico — herda do .btn base */ }
.btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
}

/* ---- Pills / tags ---- */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--cinza-50);
    color: var(--cinza-700);
    border: 1px solid var(--cinza-100);
    line-height: 1.4;
}
.pill.solid    { background: var(--vermelho);        color: #fff; border-color: var(--vermelho); }
.pill.suave    { background: var(--vermelho-suave);  color: #fff; border-color: var(--vermelho-suave); }
.pill.escuro   { background: var(--cinza-escuro);    color: #fff; border-color: var(--cinza-escuro); }
.pill.preto    { background: var(--preto);           color: #fff; border-color: var(--preto); }
.pill.outline  { background: transparent;            color: var(--vermelho); border-color: var(--vermelho); }

/* ---- Toggles / switch ---- */
.toggle-list {
    display: grid;
    gap: 12px;
    max-width: 820px;
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
}
.toggle-row .label strong {
    display: block;
    color: var(--preto);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.96rem;
    margin-bottom: 2px;
}
.toggle-row .label span {
    color: var(--cinza-500);
    font-size: 0.86rem;
    line-height: 1.45;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--cinza-200);
    border-radius: 999px;
    transition: background var(--transicao);
}
.switch .slider::before {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    transition: transform var(--transicao);
}
.switch input:checked + .slider { background: var(--vermelho); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* ---- Cards (showcase) ---- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cards-grid .card {
    position: relative;
    padding: 36px 32px 28px;
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    transition: all var(--transicao);
    color: var(--cinza-700);
}
.cards-grid .card:hover {
    border-color: var(--vermelho);
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
}
.cards-grid .card .card-num {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--cinza-500);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.cards-grid .card .sigla {
    font-family: var(--fonte-titulo);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vermelho);
    margin-bottom: 14px;
}
.cards-grid .card h3 {
    font-size: 1.35rem;
    color: var(--preto);
    margin: 0 0 12px;
}
.cards-grid .card p {
    color: var(--cinza-500);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0 0 22px;
    flex-grow: 1;
}
.cards-grid .card .saiba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vermelho);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--cinza-100);
    transition: gap var(--transicao);
}
.cards-grid .card:hover .saiba { gap: 12px; }

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

/* ---- Caixa-preta (componente assinatura) ---- */
.caixa-preta {
    background: var(--preto);
    color: #fff;
    padding: 72px 64px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.caixa-preta::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 48px);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent);
    pointer-events: none;
}
.caixa-preta > * { position: relative; }
.caixa-preta h2 { color: #fff; max-width: 24ch; margin-bottom: 18px; }
.caixa-preta h2 em { font-style: normal; color: var(--vermelho-suave); }
.caixa-preta .lead-dark {
    color: rgba(255,255,255,0.7);
    max-width: 60ch;
    font-size: 1.02rem;
    margin-bottom: 44px;
}
.cp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.cp-chip {
    padding: 22px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.cp-chip .val {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.cp-chip .lbl { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.45; }
.cp-chip.revealed { background: rgba(255,51,51,0.10); border-color: rgba(255,51,51,0.32); }
.cp-chip.revealed .val { color: var(--vermelho-suave); }
.cp-chip.locked .val, .cp-chip.locked .lbl { filter: blur(6px); user-select: none; }

@media (max-width: 900px) {
    .caixa-preta { padding: 44px 28px; }
    .cp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Comparativo (rodoviária vs Top Passagens) ---- */
.comparativo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}
.comparativo .col { padding: 44px 36px; }
.comparativo .col.tradicional { background: var(--cinza-50); border-right: 1px solid var(--cinza-100); }
.comparativo .col.top { background: #fff; border-top: 3px solid var(--vermelho); }
.comparativo .col-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fonte-titulo);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 12px;
}
.comparativo .col.tradicional .col-head { color: var(--cinza-500); }
.comparativo .col.top .col-head { color: var(--vermelho); }
.comparativo .col h3 { font-size: 1.35rem; margin-bottom: 22px; }
.comparativo .col.tradicional h3 { color: var(--cinza-escuro); }
.comp-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px dashed var(--cinza-100);
    font-size: 0.94rem;
    line-height: 1.55;
}
.comp-item:first-of-type { border-top: none; padding-top: 0; }
.comp-item .mark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px;
    font-size: 0.95rem;
}
.comparativo .col.tradicional .mark { background: rgba(217,77,77,0.12); color: var(--erro); }
.comparativo .col.top .mark { background: var(--vermelho-soft); color: var(--vermelho); }

@media (max-width: 900px) {
    .comparativo { grid-template-columns: 1fr; }
    .comparativo .col.tradicional { border-right: none; border-bottom: 1px solid var(--cinza-100); }
    .comparativo .col { padding: 32px 24px; }
}

/* ---- Features (cards de vantagens) ---- */
.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.features .feature {
    display: flex;
    gap: 18px;
    padding: 28px;
    background: var(--vermelho-soft);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,0,0,0.08);
    align-items: flex-start;
}
.features .feature .ico {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: #fff;
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.45rem;
}
.features .feature h4 {
    color: var(--preto);
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.features .feature p {
    color: var(--cinza-700);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.55;
}
.features .feature.suave   { background: var(--vermelho-suave); border-color: transparent; }
.features .feature.suave   .ico { background: rgba(255,255,255,0.22); color: #fff; }
.features .feature.suave   h4  { color: #fff; }
.features .feature.suave   p   { color: rgba(255,255,255,0.92); }

.features .feature.escuro  { background: var(--cinza-escuro);  border-color: transparent; }
.features .feature.escuro  .ico { background: rgba(255,255,255,0.10); color: var(--vermelho-suave); }
.features .feature.escuro  h4  { color: #fff; }
.features .feature.escuro  p   { color: rgba(255,255,255,0.72); }

.features .feature.preto   { background: var(--preto); border-color: transparent; }
.features .feature.preto   .ico { background: rgba(255,255,255,0.10); color: var(--vermelho); }
.features .feature.preto   h4  { color: #fff; }
.features .feature.preto   p   { color: rgba(255,255,255,0.7); }

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

/* ---- Accordion / FAQ ---- */
.accordion { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.accordion details {
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    padding: 0 28px;
    transition: border-color var(--transicao);
}
.accordion details[open] { border-color: var(--vermelho); }
.accordion summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--preto);
    font-size: 1rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
    content: '+';
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--vermelho-soft);
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 400;
    flex-shrink: 0;
    transition: all var(--transicao);
}
.accordion details[open] summary::after { content: '−'; background: var(--vermelho); color: #fff; }
.accordion details > p {
    margin: 0;
    padding: 0 0 22px;
    color: var(--cinza-500);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ---- Alerts ---- */
.alerts { display: grid; gap: 12px; }
.alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.5;
}
.alert .material-symbols-outlined {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.alert strong {
    display: block;
    color: var(--preto);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    margin-bottom: 2px;
}
.alert.info     { background: var(--vermelho-soft);   border-left-color: var(--vermelho);  color: #5a0000; }
.alert.info     .material-symbols-outlined { color: var(--vermelho); }
.alert.info     strong { color: #5a0000; }

.alert.verde    { background: rgba(58,167,122,0.10);  border-left-color: var(--verde);     color: #1f5a3f; }
.alert.verde    .material-symbols-outlined { color: var(--verde); }
.alert.verde    strong { color: #154a30; }

.alert.amarelo  { background: rgba(232,184,58,0.14);  border-left-color: var(--amarelo);   color: #6b4f12; }
.alert.amarelo  .material-symbols-outlined { color: var(--amarelo); }
.alert.amarelo  strong { color: #5a420f; }

.alert.vermelho { background: rgba(217,77,77,0.10);   border-left-color: var(--erro);      color: #7d2222; }
.alert.vermelho .material-symbols-outlined { color: var(--erro); }
.alert.vermelho strong { color: #621a1a; }

/* ---- Depoimento ---- */
.depoimento {
    max-width: 860px;
    margin: 32px auto 0;
    text-align: center;
}
.depoimento blockquote {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    color: var(--preto);
    line-height: 1.45;
    margin: 0 0 28px;
    letter-spacing: -0.015em;
}
.depoimento blockquote::before { content: '\201C'; color: var(--vermelho); margin-right: 2px; }
.depoimento blockquote::after  { content: '\201D'; color: var(--vermelho); margin-left: 2px; }
.depoimento .autor strong {
    display: block;
    color: var(--preto);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1rem;
}
.depoimento .autor span {
    color: var(--cinza-500);
    font-size: 0.88rem;
}

/* ---- Form preview ---- */
.form-preview {
    display: grid;
    gap: 18px;
    max-width: 580px;
}
.form-preview > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-preview label {
    font-family: var(--fonte-titulo);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--preto);
}
.form-preview input,
.form-preview textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--preto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-preview input::placeholder,
.form-preview textarea::placeholder { color: var(--cinza-500); }
.form-preview input:focus,
.form-preview textarea:focus {
    outline: none;
    border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.10);
}
.form-preview textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}
.form-preview button {
    justify-self: start;     /* em grid, impede que o botão estique até o fim */
    width: fit-content;
    margin-top: 6px;
}

/* ---- Clientes / logos placeholder ---- */
.clientes-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}
.cliente-item {
    padding: 18px 32px;
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: 12px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--cinza-500);
    font-size: 0.92rem;
    min-width: 160px;
    text-align: center;
    letter-spacing: 0.04em;
    transition: all var(--transicao);
}
.cliente-item:hover {
    color: var(--vermelho);
    border-color: var(--vermelho-soft);
    transform: translateY(-2px);
}

/* =========================================================
   HOME — HERO COM IMAGEM DE FUNDO
   ========================================================= */
.home-hero {
    position: relative;
    background: var(--cinza-escuro) url('../img/hero.webp') center/cover no-repeat; /* fallback sem JS */
    color: #fff;
    overflow: hidden;
    padding: 130px 0 100px;
}

/* Carrossel de fundo — slides empilhados que trocam por crossfade (main.js) */
.hero-slides {
    position: absolute; inset: 0;
    z-index: 0;
}
.hero-slide {
    position: absolute; inset: 0;
    background: center/cover no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }

.home-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.20) 100%);
    z-index: 1;
}
.home-hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;                /* coluna única — texto sobre a foto */
    gap: 80px;
    align-items: center;
}
.home-hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.3rem);      /* menor: cabe em 2 linhas */
    margin-bottom: 12px;
    max-width: 600px;                           /* largura do título — controla a quebra */
}
.home-hero h1 em {
    font-style: normal;
    color: var(--vermelho);
}
.home-hero .sub {
    color: rgba(255,255,255,0.9);
    font-family: var(--fonte-titulo);           /* Poppins, como o resto do site */
    font-size: 18px;
    max-width: 600px;                           /* mesma largura do título */
    line-height: 1.55;
    margin: 0;
}

/* Container do widget de busca — quadro branco que abriga o SDK do Distribusion */
/* Widget de busca (ClickBus) sobreposto na base do hero */
.hero-search-wrap {
    position: relative;
    z-index: 5;
    margin-top: -64px;        /* puxa o widget pra cima: metade sobre a foto */
}
.hero-search {
    background: #fff;
    border-radius: 20px;
    padding: 16px 20px;
    color: var(--preto);
    box-shadow: 0 24px 60px rgba(0,0,0,0.30);
}
.hero-search search-widget { display: block; width: 100%; }

/* Aproxima a primeira seção do widget sobreposto */
.hero-search-wrap + .section { padding-top: 64px; }

@media (max-width: 900px) {
    .home-hero { padding: 60px 0 84px; }
    .home-hero .container { grid-template-columns: 1fr; gap: 36px; }
    .hero-search-wrap { margin-top: -36px; }
    .hero-search { padding: 12px; }
    .home-hero .sub { font-size: 0.98rem; }
}

/* =========================================================
   HOME — CABEÇALHO DE SEÇÃO (eyebrow + h2 + lead, centrado)
   Centrado no desktop, alinhado à esquerda no mobile.
   ========================================================= */
.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.section-head .eyebrow { justify-content: center; }
.section-head .lead { margin: 16px auto 0; }

@media (max-width: 900px) {
    .section-head {
        text-align: left;
        margin: 0;
        max-width: none;
    }
    .section-head .eyebrow { justify-content: flex-start; }
    .section-head .lead { margin: 16px 0 0; }
}

/* =========================================================
   HOME — DIFERENCIAIS
   ========================================================= */
.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}
.diferencial {
    padding: 36px 32px;
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    transition: all var(--transicao);
}
.diferencial:hover {
    border-color: var(--vermelho);
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
}
.diferencial .ico {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--vermelho-soft);
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
    transition: background var(--transicao), color var(--transicao);
}
.diferencial:hover .ico {
    background: var(--vermelho);
    color: #fff;
}
.diferencial h3 {
    font-size: 1.2rem;
    margin: 0 0 10px;
    color: var(--preto);
}
.diferencial p {
    margin: 0;
    color: var(--cinza-500);
    font-size: 0.96rem;
    line-height: 1.55;
}

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

/* =========================================================
   HOME — BANNER WHATSAPP (diferencial competitivo)
   ========================================================= */
.wa-banner {
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
    border-radius: var(--radius-lg);
    padding: 60px 60px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.wa-banner::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 360px; height: 360px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.wa-banner .eyebrow-wa {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 22px;
}
.wa-banner h2 {
    color: #fff;
    margin: 0 0 22px;
    max-width: 18ch;
}
.wa-banner p {
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    margin: 0 0 30px;
    max-width: 52ch;
    line-height: 1.55;
}

/* CTA do banner — pill branca com texto verde escuro */
.btn-wa {
    background: #fff;
    color: #128C7E;
    border-color: #fff;
}
.btn-wa::before { display: none; }
.btn-wa .wa-chip {
    width: 30px; height: 30px;
    background: #25D366;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    order: -1;
}
.btn-wa .wa-chip svg { width: 16px; height: 16px; }
.btn-wa:hover { background: #128C7E; color: #fff; }
.btn-wa:hover .wa-chip { background: #fff; color: #128C7E; }

/* Imagem do banner WhatsApp (VitórIA) com badge flutuante */
.wa-banner .imagem {
    position: relative;
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.wa-banner .imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge "Fale com a VitórIA" — pill vermelha flutuando sobre a imagem */
.wa-banner .badge-vitoria {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--vermelho);
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30);
    letter-spacing: -0.005em;
}
.wa-banner .badge-vitoria .material-symbols-outlined {
    font-size: 1rem;
}

@media (max-width: 900px) {
    .wa-banner { padding: 44px 32px; grid-template-columns: 1fr; gap: 32px; }
    .wa-banner .imagem { aspect-ratio: 4/5; }   /* retrato no mobile — imagem da VitórIA fica mais alta */
}

/* Quebra de linha que aparece SÓ no mobile (oposto do .br-desktop) */
.br-mobile { display: none; }
@media (max-width: 900px) {
    .br-mobile { display: inline; }
}

/* =========================================================
   HOME — DESTINOS MAIS PROCURADOS
   ========================================================= */
.destinos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}
.destino-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cinza-100);
    transition: all var(--transicao);
    display: flex;
    flex-direction: column;
}
.destino-card:hover {
    border-color: var(--vermelho);
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
}
.destino-card .imagem {
    aspect-ratio: 4/3;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: #fff;
    background: var(--cinza-100);
}
.destino-card .imagem img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.destino-card .imagem::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.45) 28%,
        rgba(0,0,0,0) 60%);
    z-index: 1;
}
.destino-card .imagem .cidade {
    position: relative;
    z-index: 2;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.destino-card .imagem .cidade small {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.destino-card .info {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.destino-card .rota {
    font-size: 0.84rem;
    color: var(--cinza-500);
    line-height: 1.4;
}
.destino-card .rota strong {
    color: var(--preto);
    font-weight: 600;
}
.destino-card .preco {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--vermelho);
    line-height: 1.1;
}
.destino-card .preco small {
    display: block;
    color: var(--cinza-500);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.destino-card .btn-ver {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--cinza-100);
    font-family: var(--fonte-titulo);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--preto);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--transicao), color var(--transicao);
}
.destino-card .btn-ver .material-symbols-outlined { font-size: 1.05em; }
.destino-card:hover .btn-ver { gap: 10px; color: var(--vermelho); }

@media (max-width: 1024px) { .destinos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .destinos-grid { grid-template-columns: 1fr; } }

/* =========================================================
   HOME — PASSOS (como funciona)
   ========================================================= */
.passos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    margin-top: 60px;
}
.passos::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(16.66% + 60px);
    right: calc(16.66% + 60px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cinza-200) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.passo {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}
.passo .ico {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--vermelho-soft);
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 22px;
    transition: all var(--transicao);
}
.passo:hover .ico {
    background: var(--vermelho);
    color: #fff;
    border-color: var(--vermelho);
    transform: scale(1.05);
}
.passo .num {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--vermelho);
    background: var(--vermelho-soft);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.passo h4 {
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--preto);
    margin: 0 0 8px;
}
.passo p {
    color: var(--cinza-500);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
    max-width: 32ch;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .passos { grid-template-columns: 1fr; gap: 40px; }
    .passos::before { display: none; }
    /* No mobile o passo deixa de ser centrado e fica alinhado à esquerda */
    .passo { text-align: left; padding: 0; }
    .passo p { max-width: none; margin-inline: 0; }
}

/* =========================================================
   QUEM SOMOS — 4 pilares (reaproveita o card .diferencial)
   ========================================================= */
.pilares-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}
@media (max-width: 1100px) { .pilares-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pilares-grid { grid-template-columns: 1fr; } }

/* =========================================================
   QUEM SOMOS — origem & credibilidade (texto + selo Ouro e Prata)
   ========================================================= */
.origem {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: center;
}
.origem-texto h2 {
    margin: 14px 0 18px;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.2;
}
.origem-texto p {
    margin: 0 0 16px;
    color: var(--cinza-500);
    line-height: 1.65;
}
.origem-texto p:last-child { margin-bottom: 0; }
.origem-texto strong { color: var(--preto); font-weight: 600; }

.origem-selo {
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-top: 4px solid var(--vermelho);
    border-radius: var(--radius-md);
    padding: 36px 32px;
    box-shadow: var(--sombra-md);
    text-align: center;
}
.origem-selo .selo-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cinza-500);
    margin-bottom: 8px;
}
.origem-selo .selo-marca {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--preto);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.origem-selo .selo-desc {
    margin: 12px 0 22px;
    color: var(--cinza-500);
    font-size: 0.92rem;
    line-height: 1.5;
}
.origem-selo .selo-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 14px 16px;
    background: var(--vermelho-soft);
    border-radius: var(--radius-sm);
    color: var(--vermelho-escuro);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}
.origem-selo .selo-trust .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--vermelho);
}

@media (max-width: 900px) {
    .origem { grid-template-columns: 1fr; gap: 32px; }
}

/* Botões paralelos dentro da caixa-preta (CTA híbrido) */
.caixa-preta .btn-grid { margin-top: 0; }

/* =========================================================
   VALE+ONLINE — exemplo de desconto + acesso (cliente / cadastro)
   ========================================================= */
.vale-exemplo .selo-label { margin-bottom: 18px; }
.vale-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--cinza-200);
    text-align: left;
    color: var(--cinza-500);
    font-size: 0.92rem;
}
.vale-linha strong {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--preto);
    white-space: nowrap;
}
.vale-destaque { border-bottom: 0; margin-bottom: 18px; }
.vale-destaque span { color: var(--preto); font-weight: 600; }
.vale-destaque strong { font-size: 1.7rem; font-weight: 800; color: var(--vermelho); }

.vale-acesso {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 320px));
    gap: 14px;
}
.vale-acesso-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.04);
}
.vale-acesso-label {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
}
@media (max-width: 700px) {
    .vale-acesso { grid-template-columns: 1fr; }
}

/* =========================================================
   DÚVIDAS FREQUENTES — grupos por categoria + CTA final
   ========================================================= */
.faq-grupo {
    max-width: 860px;
    margin: 0 auto;
}
.faq-grupo + .faq-grupo { margin-top: 52px; }
.faq-cat {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--preto);
}
.faq-cat .material-symbols-outlined {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--vermelho-soft);
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.faq-cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

@media (max-width: 560px) {
    .faq-cat { font-size: 1.15rem; gap: 12px; }
    .faq-cat .material-symbols-outlined { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* =========================================================
   AJUDA — formulário de suporte + dados de contato
   ========================================================= */
.ajuda-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Variante do cabeçalho de seção alinhada à esquerda */
.section-head--left {
    text-align: left;
    margin: 0 0 28px;
    max-width: none;
}
.section-head--left .eyebrow { justify-content: flex-start; }
.section-head--left .lead { margin: 14px 0 0; }

/* Formulário */
.ajuda-form { display: grid; gap: 18px; }
.ajuda-form .linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ajuda-form .campo { display: flex; flex-direction: column; gap: 6px; }
.ajuda-form label {
    font-family: var(--fonte-titulo);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--preto);
}
.ajuda-form input,
.ajuda-form select,
.ajuda-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--preto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.ajuda-form input::placeholder,
.ajuda-form textarea::placeholder { color: var(--cinza-500); }
.ajuda-form input:focus,
.ajuda-form select:focus,
.ajuda-form textarea:focus {
    outline: none;
    border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.10);
}
.ajuda-form textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.ajuda-form .invalido { border-color: var(--erro); }
.ajuda-form .erro { color: var(--erro); font-size: 0.8rem; }
.ajuda-form button { justify-self: start; margin-top: 4px; }

/* Honeypot: invisível para humanos, visível para bots */
.ajuda-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Card de contato */
.contato-card {
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    padding: 30px 28px;
    box-shadow: var(--sombra-sm);
}
.contato-card h3 { font-size: 1.1rem; margin: 0 0 20px; color: var(--preto); }
.contato-lista { display: grid; gap: 18px; }
.contato-item { display: flex; gap: 14px; align-items: center; }
.contato-item .material-symbols-outlined {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--vermelho-soft);
    color: var(--vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.contato-item .ci-label {
    display: block;
    font-size: 0.78rem;
    color: var(--cinza-500);
    margin-bottom: 2px;
}
.contato-item a {
    color: var(--preto);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color var(--transicao);
}
.contato-item a:hover { color: var(--vermelho); }
.contato-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--cinza-100);
}
.contato-social a {
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 1px solid var(--cinza-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--preto);
    transition: all var(--transicao);
}
.contato-social a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.contato-social svg { width: 20px; height: 20px; }

/* Box de atalho para as dúvidas frequentes */
.faq-link-box {
    margin-top: 20px;
    background: var(--cinza-50);
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-md);
    padding: 26px 28px;
}
.faq-link-box h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--preto); }
.faq-link-box p { margin: 0 0 18px; color: var(--cinza-500); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 900px) {
    .ajuda-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
    .ajuda-form .linha-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   PÁGINAS INSTITUCIONAIS — cabeçalho + prose
   Reutilizável em política de privacidade, termos de uso,
   informações, dúvidas frequentes, fale conosco etc.

   Container usa a mesma largura da home (1240px do .container
   global), pra alinhar com o menu. A prose dentro do container
   tem max-width própria pra manter linhas legíveis (~760px),
   alinhada à esquerda.
   ========================================================= */
.page-header {
    position: relative;
    background: var(--vermelho);
    color: #fff;
    overflow: hidden;
    padding: 72px 0 64px;
}
/* SVG decorativo absoluto cobrindo o fundo — vide HTML */
.page-header-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.page-header > .container {
    position: relative;
    z-index: 1;
    /* sem max-width override — usa o 1240px do .container global */
}
.page-header .eyebrow {
    color: #fff;
    margin-bottom: 14px;
}
.page-header .eyebrow::before { background: #fff; }
.page-header h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
}
.page-header .sub {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 60ch;
}

.prose-section {
    padding: 64px 0 80px;
}
.prose-section > .container {
    /* sem max-width override — usa o 1240px do .container global */
}
.prose {
    color: var(--cinza-700);
    font-size: 1rem;
    line-height: 1.75;
    /* sem max-width: o texto ocupa a largura inteira do container (1240px),
       alinhado à esquerda com o logo e à direita com o CTA "Minhas reservas" */
}
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--preto); font-weight: 600; }

/* Headings dentro de prose — não usam o letter-spacing apertado do design system */
.prose h2 {
    margin: 56px 0 18px;
    font-size: 1.4rem;
    color: var(--preto);
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    margin: 36px 0 14px;
    font-size: 1.1rem;
    color: var(--preto);
    font-weight: 700;
}

/* Listas */
.prose ul, .prose ol {
    margin: 0 0 24px;
    padding-left: 22px;
}
.prose li {
    margin-bottom: 10px;
    padding-left: 4px;
    line-height: 1.65;
}
.prose li::marker { color: var(--vermelho); }
.prose li:last-child { margin-bottom: 0; }

/* Links inline */
.prose a {
    color: var(--vermelho);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transicao);
}
.prose a:hover { color: var(--vermelho-escuro); }

/* Bloco de "última atualização" */
.prose .last-update {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--cinza-100);
    color: var(--cinza-500);
    font-size: 0.9rem;
    font-style: italic;
}

/* Bloco destacado de informação institucional (CNPJ, endereço da empresa) */
.prose .empresa-info {
    background: var(--cinza-50);
    border-left: 3px solid var(--vermelho);
    padding: 20px 24px;
    margin: 0 0 28px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.96rem;
}
.prose .empresa-info p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .page-header { padding: 40px 0 36px; }
    .prose-section { padding: 48px 0 64px; }
    .prose h2 { margin-top: 44px; font-size: 1.25rem; }
    .prose .empresa-info { padding: 18px 20px; }
}

/* =========================================================
   MOBILE — ajustes finos
   ========================================================= */
@media (max-width: 700px) {
    h1 { font-size: clamp(2.4rem, 10vw, 3.2rem) !important; letter-spacing: -0.03em; }
    h2 { font-size: clamp(1.75rem, 7vw, 2.3rem) !important; }
    .section { padding: 56px 0; }
    .container { padding: 0 20px; }
    .caixa-preta { padding: 36px 24px; }
    .caixa-preta h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    .cp-grid { grid-template-columns: 1fr; gap: 12px; }
    .cp-grid .cp-chip:nth-child(4) { display: none; }
}

/* =========================================================
   BLOG — listagem (cards) + post individual
   ========================================================= */

/* -------- Listagem: grid 2 por linha -------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
}

.post-card {
    background: #fff;
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
    border-color: transparent;
}
.post-card-link { display: flex; flex-direction: column; height: 100%; }

.post-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cinza-50); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.post-card:hover .post-card-media img { transform: scale(1.05); }

.post-card-cat {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--vermelho);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255,0,0,0.25);
}

.post-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.post-card-title {
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--preto);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.post-card:hover .post-card-title { color: var(--vermelho); }
.post-card-excerpt { color: var(--cinza-700); font-size: 0.97rem; line-height: 1.6; margin: 0 0 20px; }

.post-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--cinza-500);
    margin-top: auto;
}
.post-card-meta .dot { color: var(--cinza-200); }

.post-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--vermelho);
}
.post-card-cta .material-symbols-outlined { font-size: 1.1em; transition: transform var(--transicao); }
.post-card:hover .post-card-cta .material-symbols-outlined { transform: translateX(4px); }

/* -------- Post individual -------- */
.post-hero { padding: 56px 0 32px; }
.post-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cinza-500);
    margin-bottom: 26px;
    transition: color var(--transicao);
}
.post-back:hover { color: var(--vermelho); }
.post-back .material-symbols-outlined { font-size: 1.15em; }

.post-cat {
    display: inline-block;
    background: var(--vermelho-soft);
    color: var(--vermelho-escuro);
    font-family: var(--fonte-titulo);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.post-title {
    max-width: 20ch;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.12;
    margin: 0 0 22px;
}
@media (min-width: 1000px) { .post-title { max-width: 24ch; } }

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--cinza-500);
}
.post-meta-author { color: var(--preto); font-weight: 600; }
.post-meta .dot { color: var(--cinza-200); }

.post-cover {
    margin: 8px 0 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 2 / 1;
    background: var(--cinza-50);
    box-shadow: var(--sombra-md);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Corpo do post — medida de leitura confortável e centralizada */
.post-body-section { padding-top: 48px; }
.post-body { max-width: 760px; margin: 0 auto; }

/* h4 dentro do prose (nomes de bares/pontos turísticos) */
.prose h4 {
    margin: 28px 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--preto);
    letter-spacing: -0.01em;
}
.prose em { font-style: italic; }

/* CTA no fim do conteúdo */
.post-cta {
    margin-top: 48px;
    padding: 32px;
    background: var(--cinza-50);
    border: 1px solid var(--cinza-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.post-cta-text { display: flex; flex-direction: column; gap: 4px; }
.post-cta-text strong { font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--preto); }
.post-cta-text span { color: var(--cinza-700); font-size: 0.95rem; }
.post-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Botões dentro do conteúdo NÃO devem herdar o estilo de link do .prose
   (sublinhado + cor vermelha) — senão o texto some no botão vermelho. */
.prose a.btn { text-decoration: none; }
.prose a.btn:not(.btn-ghost):not(.btn-light):not(.btn-white) { color: #fff; }
.prose a.btn.btn-ghost { color: var(--preto); }
.prose a.btn.btn-ghost:hover { color: var(--vermelho); }

/* -------- Botões de compartilhamento -------- */
.post-share {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--cinza-100);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.post-share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--preto);
}
.post-share-label .material-symbols-outlined { color: var(--vermelho); font-size: 1.2em; }
.post-share-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cinza-700);
    background: var(--cinza-50);
    border: 1px solid var(--cinza-100);
    transition: transform var(--transicao), background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn .material-symbols-outlined { font-size: 1.15em; }
.share-btn:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-wa:hover   { background: #25D366; }
.share-fb:hover   { background: #1877F2; }
.share-x:hover    { background: #000; }
.share-copy:hover { background: var(--vermelho); }
.share-copy.copied { background: var(--verde); color: #fff; border-color: transparent; }

/* -------- Responsivo -------- */
@media (max-width: 860px) {
    .blog-grid { grid-template-columns: 1fr; gap: 28px; }
    .post-hero { padding: 32px 0 24px; }
    .post-body-section { padding-top: 32px; }
    .post-cover { border-radius: var(--radius-md); }
    .post-cta { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
    .post-cta-btns { width: 100%; }
    .post-cta-btns .btn { flex: 1; justify-content: center; }
    .post-share { flex-direction: column; align-items: flex-start; gap: 14px; }
}