/* ==========================================================================
   Skin Comercial — derivado de skin-app-landing.css do Porto
   Paleta SisContábil (#009bde) substituindo o roxo/azul original
   ========================================================================== */

/* General */
:root {
    --border-radius: 4px;
    --border-radius2x: 8px;
    --default: #6b7280;
}

/* Skin Colors — Primary #009bde */
:root {
    --primary: #009bde;
    --primary-100: #008cca;
    --primary-200: #007db6;
    --primary-300: #006fa3;
    --primary--100: #1ea7e2;
    --primary--200: #38b3e6;
    --primary--300: #51bfeb;
    --primary-rgba-0:   rgba(0, 155, 222, 0);
    --primary-rgba-10:  rgba(0, 155, 222, 0.1);
    --primary-rgba-20:  rgba(0, 155, 222, 0.2);
    --primary-rgba-30:  rgba(0, 155, 222, 0.3);
    --primary-rgba-40:  rgba(0, 155, 222, 0.4);
    --primary-rgba-50:  rgba(0, 155, 222, 0.5);
    --primary-rgba-60:  rgba(0, 155, 222, 0.6);
    --primary-rgba-70:  rgba(0, 155, 222, 0.7);
    --primary-rgba-80:  rgba(0, 155, 222, 0.8);
    --primary-rgba-90:  rgba(0, 155, 222, 0.9);

    --secondary: #006094;
    --secondary-100: #005383;
    --secondary-200: #004a73;
    --secondary-300: #003e62;
    --secondary--100: #1972a4;
    --secondary--200: #2b80b1;
    --secondary--300: #3d8fbe;
    --secondary-rgba-0:  rgba(0, 96, 148, 0);
    --secondary-rgba-10: rgba(0, 96, 148, 0.1);
    --secondary-rgba-20: rgba(0, 96, 148, 0.2);
    --secondary-rgba-30: rgba(0, 96, 148, 0.3);
    --secondary-rgba-40: rgba(0, 96, 148, 0.4);
    --secondary-rgba-50: rgba(0, 96, 148, 0.5);
    --secondary-rgba-60: rgba(0, 96, 148, 0.6);
    --secondary-rgba-70: rgba(0, 96, 148, 0.7);
    --secondary-rgba-80: rgba(0, 96, 148, 0.8);
    --secondary-rgba-90: rgba(0, 96, 148, 0.9);

    --tertiary: #f0f9fd;
    --tertiary-100: #d6eef9;
    --tertiary-200: #c0e6f6;
    --tertiary-300: #aaddf2;
    --tertiary--100: #ffffff;
    --tertiary--200: #ffffff;
    --tertiary--300: #ffffff;
    --tertiary-rgba-0:  rgba(240, 249, 253, 0);
    --tertiary-rgba-10: rgba(240, 249, 253, 0.1);
    --tertiary-rgba-20: rgba(240, 249, 253, 0.2);
    --tertiary-rgba-30: rgba(240, 249, 253, 0.3);
    --tertiary-rgba-40: rgba(240, 249, 253, 0.4);
    --tertiary-rgba-50: rgba(240, 249, 253, 0.5);
    --tertiary-rgba-60: rgba(240, 249, 253, 0.6);
    --tertiary-rgba-70: rgba(240, 249, 253, 0.7);
    --tertiary-rgba-80: rgba(240, 249, 253, 0.8);
    --tertiary-rgba-90: rgba(240, 249, 253, 0.9);

    --quaternary: #222529;
    --quaternary-100: #16181b;
    --quaternary-200: #111214;
    --quaternary-300: #0b0c0d;
    --quaternary--100: #2e3237;
    --quaternary--200: #33383e;
    --quaternary--300: #393e45;
    --quaternary-rgba-0:  rgba(34, 37, 41, 0);
    --quaternary-rgba-10: rgba(34, 37, 41, 0.1);
    --quaternary-rgba-20: rgba(34, 37, 41, 0.2);
    --quaternary-rgba-30: rgba(34, 37, 41, 0.3);
    --quaternary-rgba-40: rgba(34, 37, 41, 0.4);
    --quaternary-rgba-50: rgba(34, 37, 41, 0.5);
    --quaternary-rgba-60: rgba(34, 37, 41, 0.6);
    --quaternary-rgba-70: rgba(34, 37, 41, 0.7);
    --quaternary-rgba-80: rgba(34, 37, 41, 0.8);
    --quaternary-rgba-90: rgba(34, 37, 41, 0.9);

    --dark: #212529;
    --dark-100: #16181b;
    --dark-200: #101214;
    --dark-300: #0a0c0d;
    --dark--100: #2c3237;
    --dark--200: #32383e;
    --dark--300: #383f45;
    --dark-rgba-0:  rgba(33, 37, 41, 0);
    --dark-rgba-10: rgba(33, 37, 41, 0.1);
    --dark-rgba-20: rgba(33, 37, 41, 0.2);
    --dark-rgba-30: rgba(33, 37, 41, 0.3);
    --dark-rgba-40: rgba(33, 37, 41, 0.4);
    --dark-rgba-50: rgba(33, 37, 41, 0.5);
    --dark-rgba-60: rgba(33, 37, 41, 0.6);
    --dark-rgba-70: rgba(33, 37, 41, 0.7);
    --dark-rgba-80: rgba(33, 37, 41, 0.8);
    --dark-rgba-90: rgba(33, 37, 41, 0.9);

    --light: #FFF;
    --light-100: #f2f2f2;
    --light-200: #ececec;
    --light-300: #e6e6e6;
    --light--100: #ffffff;
    --light--200: #ffffff;
    --light--300: #ffffff;
    --light-rgba-0:  rgba(255, 255, 255, 0);
    --light-rgba-10: rgba(255, 255, 255, 0.1);
    --light-rgba-20: rgba(255, 255, 255, 0.2);
    --light-rgba-30: rgba(255, 255, 255, 0.3);
    --light-rgba-40: rgba(255, 255, 255, 0.4);
    --light-rgba-50: rgba(255, 255, 255, 0.5);
    --light-rgba-60: rgba(255, 255, 255, 0.6);
    --light-rgba-70: rgba(255, 255, 255, 0.7);
    --light-rgba-80: rgba(255, 255, 255, 0.8);
    --light-rgba-90: rgba(255, 255, 255, 0.9);
}

:root {
    --primary-inverse: #FFF;
    --secondary-inverse: #FFF;
    --tertiary-inverse: var(--primary);
    --quaternary-inverse: #FFF;
    --dark-inverse: #FFF;
    --light-inverse: var(--primary);
}

:root {
    --grey: #969696;
    --grey-100: #f4f4f4;
    --grey-200: #eaeaea;
    --grey-300: #e5e5e5;
    --grey-400: #e0e0e0;
    --grey-500: #dbdbdb;
    --grey-600: #cecece;
    --grey-700: #c1c1c1;
    --grey-800: #a8a8a8;
    --grey-900: #8e8e8e;
    --grey-1000: #757575;
}

/* Bootstrap 5 native overrides (defensivo) */
:root {
    --bs-primary: #009bde;
    --bs-primary-rgb: 0, 155, 222;
    --bs-link-color: #009bde;
    --bs-link-hover-color: #007db6;
}

/* ==========================================================================
   Page hero compacto (páginas internas: recursos, modelos, fale-conosco, termos)
   ========================================================================== */
.page-hero {
    background: linear-gradient(135deg, #009bde 0%, #006094 100%);
    color: #fff;
    padding: 60px 0 100px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/comercial/img/waves.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-weight: 300; }
.page-hero h1 strong, .page-hero h1 b { font-weight: 700; }
.page-hero .lead { color: rgba(255, 255, 255, .92); }

.bring-to-front {
    margin-top: -80px;
    position: relative;
    z-index: 2;
}

/* Wave divider */
.wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
    pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }
.wave-divider svg path { fill: #fff; }

/* Feature card customizada (interfaces internas)
   Não força height — quem quer cards de mesma altura usa .h-100 no markup */
.feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    border: 1px solid #f1f3f5;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 155, 222, .12);
    border-color: rgba(0, 155, 222, .2);
}
.feature-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 155, 222, .1), rgba(0, 155, 222, .05));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.feature-card__icon img { max-width: 36px; max-height: 36px; }
.feature-card h5 {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}
.feature-card p {
    color: #6b7280;
    font-size: 0.92rem;
    margin-bottom: 0;
    line-height: 1.55;
}

.section-title { font-weight: 700; color: #1f2937; }
.section-subtitle { color: #6b7280; max-width: 640px; margin: 0 auto 2rem; }
.section-eyebrow {
    display: inline-block;
    background: rgba(0, 155, 222, .1);
    color: #009bde;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.price-highlight { color: #009bde; font-weight: 700; }
.text-muted-comercial { color: #6b7280; }
.bg-soft { background-color: #f8fafc; }

/* Botão CTA pill (usado em algumas páginas internas) */
.btn-cta {
    background: #009bde;
    color: #fff;
    border: none;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(0, 155, 222, .25);
}
.btn-cta:hover {
    background: #007db6;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 155, 222, .35);
}

/* FAQ accordion (BS5 native styling) */
.accordion-comercial .accordion-button:not(.collapsed) {
    background-color: rgba(0, 155, 222, .08);
    color: #009bde;
    box-shadow: none;
}
.accordion-comercial .accordion-button:focus {
    border-color: rgba(0, 155, 222, .3);
    box-shadow: 0 0 0 .25rem rgba(0, 155, 222, .15);
}
.accordion-comercial .accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

/* Form controls focus */
.form-control:focus, .form-select:focus {
    border-color: #009bde;
    box-shadow: 0 0 0 .2rem rgba(0, 155, 222, .15);
}

/* ==========================================================================
   Override defensivo: demo-app-landing.css aplica overflow-x:hidden em
   html/body, o que QUEBRA position:sticky em todos os descendentes.
   Para sticky funcionar, overflow precisa estar em outro elemento (ou clip).
   ========================================================================== */
html, body, .body {
    overflow-x: clip;
    overflow-y: visible;
}

/* ==========================================================================
   Spacing utilities (Bootstrap 5 padrão só vai até 5; estendendo)
   ========================================================================== */
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-8 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pt-7 { padding-top: 6rem !important; }
.pt-8 { padding-top: 8rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.pb-7 { padding-bottom: 6rem !important; }
.pb-8 { padding-bottom: 8rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.mt-6 { margin-top: 4rem !important; }
.mt-7 { margin-top: 6rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.mb-7 { margin-bottom: 6rem !important; }

@media (min-width: 768px) {
    .py-md-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .py-md-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .pt-md-6 { padding-top: 4rem !important; }
    .pb-md-6 { padding-bottom: 4rem !important; }
}

/* Espaçamento entre <section> consecutivas — defensivo */
section + section {
    /* sem regra global pra não quebrar layouts colados intencionais (CTA strip etc) */
}