/* ==========================================================================
   MedLite UI · camada global (carrega depois de style.css e responsive.css)
   Tokens de marca acessíveis (WCAG AA), foco visível, CTA fixo no mobile,
   fechamento de conversão (_CtaDemo) e ajustes de hero por breakpoint.
   Regra de cor: o verde da marca para texto/botão é #087F5B (5,0:1 sobre branco).
   O verde claro #0CA678 (3,1:1) fica só para elementos decorativos grandes.
   ========================================================================== */

:root {
    --ml-brand: #087f5b;
    --ml-brand-600: #066649;
    --ml-brand-50: #edfaf5;
    --ml-brand-border: #b2dfd0;
    --ml-mint: #4fe0b5;          /* verde para texto sobre fundo escuro (azul marinho) */
    --ml-navy: #0f263b;
    --ml-navy-2: #1e4a6e;
    --ml-ink: #0f172a;
    --ml-text: #374151;
    --ml-muted: #5a6a80;
    --ml-border: #e2e8f0;
    --ml-radius: 14px;
    --ml-header-h: 128px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Acessibilidade ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 100000;
    background: var(--ml-ink); color: #fff; padding: 10px 18px; border-radius: 10px;
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 12px; color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #2563eb; outline-offset: 2px;
}
.wsmenu a:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }
img { max-width: 100%; height: auto; }

/* ---------- Links de texto verdes: sublinhado ao foco/hover ---------- */
.feature-link:focus-visible, .cta-plan-more:focus-visible { border-radius: 4px; }

/* ---------- Fechamento de conversão (_CtaDemo) ---------- */
.cta-final {
    background: linear-gradient(160deg, var(--ml-navy) 0%, var(--ml-navy-2) 100%);
    padding: 84px 0; position: relative; overflow: hidden;
}
.cta-final::before {
    content: ""; position: absolute; top: -140px; right: -120px; width: 460px; height: 460px;
    border-radius: 50%; background: rgba(79, 224, 181, .07); pointer-events: none;
}
.cta-final > .container { position: relative; z-index: 1; }
.cta-final-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.cta-final-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ml-mint); background: rgba(79, 224, 181, .12); border: 1px solid rgba(79, 224, 181, .35);
    border-radius: 50rem; padding: 5px 14px; margin-bottom: 16px;
}
.cta-final-head h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.18; letter-spacing: -.025em;
    color: #fff; margin: 0 0 14px; text-wrap: balance;
}
.cta-final-head p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .88); margin: 0; }

.cta-plan {
    position: relative; height: 100%; display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 20px; padding: 30px 28px;
}
.cta-plan-featured {
    background: #fff; border-color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.cta-plan-badge {
    position: absolute; top: -13px; right: 22px; background: var(--ml-brand); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 13px; border-radius: 50rem; box-shadow: 0 6px 16px rgba(8, 127, 91, .4);
}
.cta-plan-name { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-bottom: 8px; }
.cta-plan-featured .cta-plan-name { color: var(--ml-brand); }
.cta-plan-price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; margin-bottom: 18px; }
.cta-plan-price small { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .8); letter-spacing: 0; }
.cta-plan-featured .cta-plan-price { color: var(--ml-ink); }
.cta-plan-featured .cta-plan-price small { color: var(--ml-muted); }
.cta-plan-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cta-plan-list li {
    position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .92);
}
.cta-plan-list li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(79, 224, 181, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234fe0b5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.cta-plan-featured .cta-plan-list li { color: var(--ml-text); }
.cta-plan-featured .cta-plan-list li::before {
    background: var(--ml-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.cta-plan-btn {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-radius: 12px; padding: 16px 22px; font-size: 16px; font-weight: 700; text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s; min-height: 52px;
}
.cta-plan-btn-outline { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; }
.cta-plan-btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.cta-plan-btn-solid { color: #fff; background: var(--ml-brand); box-shadow: 0 10px 28px rgba(8, 127, 91, .4); }
.cta-plan-btn-solid:hover { color: #fff; background: var(--ml-brand-600); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(8, 127, 91, .5); }
.cta-plan-more { display: block; text-align: center; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--ml-brand-600); text-decoration: underline; text-underline-offset: 3px; }
.cta-plan-more:hover { color: #054d38; }
.cta-final-note { text-align: center; margin: 30px auto 0; max-width: 760px; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.cta-final-note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta-final-note a:hover { color: var(--ml-mint); }

/* ---------- CTA fixo no mobile ---------- */
.m-cta-bar { display: none; }
@media (max-width: 991px) {
    .m-cta-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        display: flex; gap: 10px; align-items: center;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97); border-top: 1px solid var(--ml-border);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .1);
        transform: translateY(110%); transition: transform .28s ease;
    }
    .m-cta-bar.is-visible { transform: translateY(0); }
    body.wsactive .m-cta-bar { transform: translateY(110%); }
    .m-cta-primary {
        flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px;
        background: var(--ml-brand); color: #fff; font-weight: 700; font-size: 15px; border-radius: 12px;
        text-decoration: none; box-shadow: 0 6px 18px rgba(8, 127, 91, .35);
    }
    .m-cta-primary:hover, .m-cta-primary:focus { color: #fff; background: var(--ml-brand-600); }
    .m-cta-secondary {
        display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
        color: var(--ml-ink); font-weight: 700; font-size: 14.5px; border: 1.5px solid #cbd5e1; border-radius: 12px;
        text-decoration: none; background: #fff; white-space: nowrap;
    }
    .m-cta-secondary:hover { color: var(--ml-brand); border-color: var(--ml-brand); }
    .footer-wrap { padding-bottom: 76px; }
    .has-mcta .whatsapp-button { bottom: 82px !important; }
}

/* ---------- Heróis: tamanho de título e respiro por breakpoint ---------- */
@media (max-width: 991px) {
    section[style*="padding:180px 0 80px"], section[style*="padding:160px 0 80px"] { padding-top: 104px !important; padding-bottom: 52px !important; }
}
@media (max-width: 575px) {
    section h1.text-white, section h1.title-xl { font-size: clamp(1.6rem, 7vw, 2rem) !important; line-height: 1.2 !important; }
    .cta-final { padding: 60px 0; }
    .cta-plan { padding: 26px 22px; }
}

/* ---------- Tabelas largas: rolagem horizontal contida ---------- */
.table-responsive-ml { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Alvos de toque mínimos (44px) em telas de toque ---------- */
@media (max-width: 991px) {
    a.btn, button.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}