/* Carregar depois de entregador.css e institucional.css. */
:root {
    --page: #ffffff;
    --surface: #f3f4f6;
    --ink: #183b57;
    --text: #284760;
    --muted: #536879;
    --gold-text: #875d2e;
    --line: #dce1e5;
}

body {
    color: var(--text);
    background: var(--page);
}

h1,
h2,
h3 {
    color: var(--ink);
}

.eyebrow,
.section--light .eyebrow,
.hero-card .eyebrow {
    color: var(--gold-text);
}

.section--light,
.section--dark {
    background: var(--page);
    color: var(--text);
}

#ganhos,
#requisitos,
#videos,
.program-rates {
    background: var(--surface);
}

.section-heading p,
.section-intro,
.info-card p,
.steps-grid p,
.benefits-grid p {
    color: var(--text);
}

.site-header {
    background: linear-gradient(90deg, #f0f1f2, #d8dce0);
    border-color: var(--line);
}

.main-nav>a {
    color: var(--ink);
}

.button,
.button--navy {
    color: var(--ink);
    background: linear-gradient(115deg, #f4f5f6, #ffffff);
    border: 1px solid var(--gold);
    box-shadow: 0 7px 18px rgba(22, 35, 46, .10);
}

.button:hover,
.button:focus-visible {
    background: #eeeeef;
}

.button--outline {
    color: var(--ink);
    background: transparent;
    box-shadow: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
}

/* Vídeo livre e cartão abaixo, com pequena sobreposição. */
.hero {
    --hero-video-height: 600px;
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--surface);
}

.hero-video,
.hero-shade {
    height: var(--hero-video-height);
}

.hero-shade {
    background: linear-gradient(to bottom,
            rgba(22, 27, 32, .06) 40%,
            rgba(22, 27, 32, .28));
}

.hero-video {
    display: block;
}

.hero-content {
    padding-top: calc(var(--hero-video-height) - 70px);
}

.hero-card {
    margin: 0 auto;
    color: var(--ink);
    background: var(--page);
    border-color: var(--line);
    box-shadow: 0 14px 36px rgba(22, 35, 46, .10);
}

.hero-card>p {
    color: var(--text);
}

.program-rates {
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
}

.program-stat strong {
    color: var(--gold-text);
    text-shadow: none;
}

.program-stat>span {
    color: var(--ink);
}

.program-cities {
    border-color: var(--line);
}

.city-tags span {
    color: var(--ink);
    background: var(--page);
    border-color: var(--line);
}

/* Ficha e conversa. */
.ticket {
    color: var(--ink);
    background: var(--page);
    border-color: var(--line);
}

.ticket-status {
    color: var(--ink);
    background: var(--surface);
}

.ticket-fields dt {
    opacity: 1;
    color: var(--muted);
}

.ticket>p {
    opacity: 1;
    color: var(--muted);
}

.chat-panel {
    color: var(--text);
    background: var(--page);
    border-color: var(--line);
    box-shadow: 0 14px 36px rgba(22, 35, 46, .10);
}

.chat-header {
    background: var(--surface);
}

.chat-header strong {
    color: var(--ink);
}

.chat-header small {
    color: var(--muted);
}

.restart-button {
    color: var(--ink);
    background: var(--page);
    border-color: var(--line);
}

.chat-progress {
    padding-top: 14px;
    border-color: var(--line);
}

.chat-progress progress,
progress::-webkit-progress-bar {
    background: #e3e6e9;
}

.chat-message {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}

.chat-message--user {
    color: var(--ink);
    background: #fff8ed;
    border-color: #dec39e;
}

.chat-actions {
    background: #f8f9fa;
    border-color: var(--line);
}

.chat-choice {
    color: var(--ink);
    background: var(--page);
    border-color: #c4cbd1;
}

.chat-choice:hover {
    background: #eeeeef;
    border-color: var(--gold-text);
}

.chat-choice--primary,
.chat-choice--primary:hover {
    color: var(--ink);
    background: #eceef0;
    border-color: var(--gold);
}

.chat-guide-link {
    color: var(--gold-text);
}

.name-form label {
    color: var(--ink);
}

.name-form input {
    color: var(--ink);
    background: var(--page);
    border-color: #8c969f;
}

.name-error {
    color: #a22b1b;
}

/* Simulador e estados selecionados. */
.calculator-controls,
.calculator-result {
    color: var(--text);
    background: var(--page);
    border-color: var(--line);
}

.calculator-result {
    box-shadow: 0 14px 36px rgba(22, 35, 46, .10);
}

.city-choice {
    color: var(--ink);
    background: var(--page);
    border-color: #c4cbd1;
}

.city-choice.is-selected {
    border-color: var(--gold-text);
    background: #fff8ed;
}

.city-choice input,
.range-field input {
    accent-color: var(--gold-text);
}

.range-field output,
.monthly-value {
    color: var(--gold-text);
}

.calc-details {
    border-color: var(--line);
}

.calc-details dd {
    color: var(--ink);
}

.calculator-result>p:not(.calculator-note) {
    color: var(--muted);
}

/* Requisitos, etapas, dúvidas e vídeos. */
.info-card {
    color: var(--text);
    background: var(--page);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(22, 35, 46, .06);
}

.card-number,
.steps-grid li>span {
    color: var(--gold-text);
}

.mei-banner {
    color: var(--text);
    background: #e8ebee;
}

.steps-grid li {
    background: var(--surface);
}

.benefits-grid {
    border-color: var(--line);
}

.benefits-grid h3 {
    color: var(--ink);
}

.faq-list details {
    background: var(--page);
    border-color: var(--line);
}

.faq-list details[open] {
    background: var(--surface);
}

.faq-list summary {
    color: var(--ink);
}

.faq-list summary::after {
    color: var(--gold-text);
}

.faq-list details p {
    color: var(--text);
}

.video-card {
    color: var(--text);
    background: var(--page);
    border-color: var(--line);
}

.video-card video,
.video-card iframe {
    background: #e3e6e9;
}

.final-cta {
    background: var(--surface);
    border-color: var(--line);
}

.final-cta p {
    color: var(--text);
}

.site-footer {
    color: var(--muted);
    background: var(--page);
    border-top: 1px solid var(--line);
}

.footer-top a {
    color: var(--ink);
}

.copyright {
    border-color: var(--line);
}

@media (max-width: 900px) {
    .hero {
        --hero-video-height: 500px;
    }

    .main-nav {
        background: #eef0f2;
    }

    .menu-toggle span {
        background: var(--ink);
    }
}

@media (max-width: 540px) {
    .hero {
        --hero-video-height: 370px;
    }

    .hero-content {
        padding-top: calc(var(--hero-video-height) - 50px);
    }

    .hero-card {
        margin-bottom: 0;
    }

    .program-rates {
        padding-top: 28px;
    }
}