/* Font: Inter (Local) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/Inter_18pt-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/Inter_18pt-Black.ttf') format('truetype');
}

:root {
    --bg-white: #FFFFFF;
    --bg-subtle: #FFF7F5;
    --text-main: #0F172A;
    --text-muted: #475569;
    --text-light: #64748B;
    --border-color: #FF3D00;
    --border-hover: #FFA000;
    --brand-orange: #FF3D00;
    --brand-orange-hover: #E03500;
    --brand-amber: #FFA000;
    --brand-dark: #000000;
    --radius-md: 14px;
    --radius-lg: 18px;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
    background-color: #000000;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    background-color: transparent !important;
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* Inline SVG Icons */
.bi-svg {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.icon-box-clean .bi-svg,
.footer-social-link .bi-svg {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

/* Garantir tamanho mínimo de 17px em todos os textos e utilitários */
small,
.small,
.badge,
h6,
.h6 {
    font-size: 17px !important;
}

/* Orange Matrix Canvas Background */
#matrixCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55 !important;
    background-color: #000000;
}

header, section, footer {
    position: relative;
    z-index: 1;
}

/* Headings & Texts */
h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Textos de introdução abaixo dos títulos das seções (fora de cards) */
.section-intro-text {
    color: #FFFFFF !important;
}

/* TODOS os textos, títulos, parágrafos e listas DENTRO dos cards são ESCUROS */
.card-clean,
.card-pricing-featured,
.portfolio-item,
.white-box-orange,
.accordion-clean .accordion-item {
    color: var(--text-main);
}

.card-clean h1, .card-clean h2, .card-clean h3, .card-clean h4, .card-clean h5, .card-clean h6,
.card-pricing-featured h1, .card-pricing-featured h2, .card-pricing-featured h3, .card-pricing-featured h4, .card-pricing-featured h5, .card-pricing-featured h6,
.portfolio-item h1, .portfolio-item h2, .portfolio-item h3, .portfolio-item h4, .portfolio-item h5, .portfolio-item h6,
.white-box-orange h1, .white-box-orange h2, .white-box-orange h3, .white-box-orange h4, .white-box-orange h5, .white-box-orange h6,
.accordion-clean h1, .accordion-clean h2, .accordion-clean h3, .accordion-clean h4, .accordion-clean h5, .accordion-clean h6,
.accordion-clean .accordion-button {
    color: var(--text-main) !important;
}

.card-clean p,
.card-pricing-featured p,
.portfolio-item p,
.white-box-orange p,
.card-clean span:not(.badge):not(.pillar-tag):not(.btn-brand):not(.btn-brand *):not(.btn-outline-clean):not(.btn-outline-clean *),
.card-pricing-featured span:not(.featured-tag):not(.btn-brand):not(.btn-brand *):not(.btn-outline-clean):not(.btn-outline-clean *),
.card-clean li,
.card-pricing-featured li,
.accordion-clean .accordion-body {
    color: var(--text-muted) !important;
}

/* Forçar cor branca absoluta para botões laranjas (.btn-brand) em qualquer contexto */
.btn-brand,
.btn-brand *,
.btn-brand span,
.btn-brand svg,
.btn-brand .bi-svg,
.card-pricing-featured .btn-brand,
.card-pricing-featured .btn-brand *,
.card-pricing-featured .btn-brand span,
.card-pricing-featured .btn-brand svg,
.card-pricing-featured .btn-brand .bi-svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.section-padding {
    padding: 92px 0;
}

.bg-subtle {
    background-color: transparent !important;
}

/* Hero Brand Logo above Badge */
.hero-logo-wrap {
    margin-bottom: 24px;
}

.hero-logo-img {
    height: 58px;
    width: auto;
    display: inline-block;
}

/* Eyebrow Badge */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    background: #FFFFFF;
    border: 1px solid var(--brand-orange);
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-orange);
    display: inline-block;
    flex-shrink: 0;
}

/* Buttons */
.btn-brand {
    background-color: var(--brand-orange);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 17px;
    padding: 13px 26px;
    border-radius: 10px;
    border: 1px solid var(--brand-orange);
    transition: all 0.22s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-brand:hover {
    background-color: var(--brand-orange-hover);
    border-color: var(--brand-orange-hover);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(255, 61, 0, 0.45);
}

.btn-outline-clean {
    background-color: #FFFFFF;
    color: var(--text-main);
    font-weight: 600;
    font-size: 17px;
    padding: 13px 26px;
    border-radius: 10px;
    border: 1px solid var(--brand-orange);
    transition: all 0.22s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-outline-clean:hover {
    background-color: var(--bg-subtle);
    border-color: var(--brand-orange);
    color: var(--brand-orange);
    transform: translateY(-1px);
}

.btn-dark-clean {
    background-color: var(--text-main);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 17px;
    padding: 13px 26px;
    border-radius: 10px;
    border: 1px solid var(--brand-orange);
    transition: all 0.22s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-dark-clean:hover {
    background-color: #1E293B;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Clean White Cards with 1px Orange Border */
.card-clean {
    background-color: #FFFFFF;
    border: 1px solid var(--brand-orange) !important;
    border-radius: var(--radius-md);
    padding: 32px 28px;
    height: 100%;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-clean:hover {
    transform: translateY(-4px);
    border-color: var(--brand-orange) !important;
    box-shadow: 0 14px 32px -12px rgba(255, 61, 0, 0.28);
}

.icon-box-clean {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background-color: #FFFFFF;
    border: 1px solid var(--brand-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-orange);
    font-size: 1.25rem;
    margin-bottom: 20px;
    transition: all 0.25s ease;
}

.card-clean:hover .icon-box-clean {
    background-color: var(--brand-orange);
    color: #FFFFFF;
}

/* Feature Pillar Badge */
.pillar-tag {
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    display: block;
    margin-bottom: 8px;
}

/* Filter Buttons */
.tab-btn-clean {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.18s ease;
}

.tab-btn-clean.active {
    background: var(--brand-orange);
    color: #FFFFFF;
    border-color: var(--brand-orange);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Browser Mockup Portfolio Cards */
.portfolio-item {
    background: #FFFFFF;
    border: 1px solid var(--brand-orange) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-item:hover {
    border-color: var(--brand-orange) !important;
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -12px rgba(255, 61, 0, 0.28);
}

.browser-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--brand-orange);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-orange);
}

.browser-url {
    font-size: 17px;
    color: var(--text-main);
    background-color: #FFFFFF;
    border: 1px solid var(--brand-orange);
    border-radius: 5px;
    padding: 2px 10px;
    font-family: monospace;
}

.portfolio-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 500 / 200;
    height: auto;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--brand-orange);
    overflow: hidden;
    border-top-left-radius: calc(var(--radius-md) - 1px);
    border-top-right-radius: calc(var(--radius-md) - 1px);
}

.portfolio-img-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.portfolio-item:hover .portfolio-img-box img {
    transform: scale(1.03);
}

.swap-img-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #FFFFFF;
    color: var(--text-main);
    border: 1px solid var(--brand-orange);
    font-size: 17px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.swap-img-btn:hover {
    background: var(--brand-orange);
    color: #FFFFFF;
    border-color: var(--brand-orange);
}

/* Pricing Featured Card */
.card-pricing-featured {
    background-color: #FFFFFF;
    border: 1px solid var(--brand-orange) !important;
    border-radius: var(--radius-md);
    padding: 36px 32px;
    height: 100%;
    position: relative;
    box-shadow: 0 18px 40px -15px rgba(255, 61, 0, 0.25);
    transition: transform 0.25s ease;
}

.card-pricing-featured:hover {
    transform: translateY(-4px);
}

.featured-tag {
    position: static;
    display: inline-block;
    background-color: var(--brand-orange);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 16px;
    border-radius: 999px;
}

/* Minimalist Accordion as White Cards with 1px Orange Border */
.accordion-clean .accordion-item {
    border: 1px solid var(--brand-orange);
    border-radius: var(--radius-md) !important;
    background: #FFFFFF;
    margin-bottom: 14px;
    padding: 0 24px;
    overflow: hidden;
}

.accordion-clean .accordion-button {
    background: #FFFFFF;
    color: var(--text-main);
    font-weight: 600;
    font-size: 18px;
    padding: 22px 0;
    box-shadow: none;
}

.accordion-clean .accordion-button:not(.collapsed) {
    color: var(--brand-orange);
    background: #FFFFFF;
}

.accordion-clean .accordion-body {
    padding: 0 0 22px 0;
    color: var(--text-muted);
    font-size: 17px;
}

/* White boxes helper for inner cards, filters, and banners */
.white-box-orange {
    background-color: #FFFFFF !important;
    border: 1px solid var(--brand-orange) !important;
    color: var(--text-main) !important;
}

.white-box-orange p,
.white-box-orange span:not(.btn-outline-clean *):not(.btn-brand *),
.white-box-orange div:not(.btn-outline-clean *):not(.btn-brand *) {
    color: var(--text-muted);
}

.btn-outline-clean,
.btn-outline-clean span,
.btn-outline-clean svg,
.btn-outline-clean .bi-svg {
    color: var(--text-muted) !important;
}

.btn-outline-clean:hover,
.btn-outline-clean:hover span,
.btn-outline-clean:hover svg,
.btn-outline-clean:hover .bi-svg {
    color: var(--brand-orange) !important;
}

/* Scroll Fade-Up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Form Controls Clean */
.form-control-clean, .form-select-clean {
    background-color: #FFFFFF;
    border: 1px solid var(--brand-orange);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 17px;
    color: var(--text-main);
}

.form-control-clean:focus, .form-select-clean:focus {
    border-color: var(--brand-orange-hover);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.15);
}

/* Footer */
.footer-black {
    background-color: transparent !important;
    color: #F8FAFC;
    border-top: 1px solid var(--brand-orange);
}

.footer-logo-img {
    height: 48px;
    width: auto;
    display: inline-block;
}

.footer-social-link {
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    background-color: var(--brand-orange) !important;
    border: 1px solid var(--brand-orange) !important;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    transition: all 0.22s ease;
    cursor: pointer;
    padding: 0;
}

.footer-social-link .bi-svg,
.footer-social-link svg {
    width: 24px !important;
    height: 24px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    transition: transform 0.22s ease;
}

.footer-social-link:hover {
    background-color: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -4px rgba(255, 61, 0, 0.6);
}

.footer-social-link:hover .bi-svg,
.footer-social-link:hover svg {
    transform: scale(1.1);
}

/* Floating WhatsApp Button (Green) */
.whatsapp-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 62px;
    height: 62px;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    border: none !important;
}

.whatsapp-float-btn .bi-svg,
.whatsapp-float-btn svg {
    width: 34px !important;
    height: 34px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.whatsapp-float-btn:hover {
    background-color: #20BA5A !important;
    color: #FFFFFF !important;
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.6);
}

.whatsapp-float-btn:active {
    transform: scale(0.96);
}

/* ===================================================
   MOBILE-FIRST ADJUSTMENTS (< 768px e < 992px)
   1. Single Column Layout (1 coluna exclusiva)
   2. Centralização completa de tudo fora de cards
=================================================== */
@media (max-width: 991.98px) {
    /* Forçar 1 coluna em todas as linhas e grids abaixo de 992px */
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Forçar rigorosamente 1 coluna em todas as linhas e grids no mobile */
    .row > [class*="col-"],
    .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Centralizar TODO o conteúdo estrutural fora dos cards */
    section .container,
    section .container > .row,
    section .container > .row > [class*="col-"],
    section .container h1,
    section .container h2,
    section .container h3,
    section .container p,
    section .container .lead,
    #dores .row:first-child,
    #dores .row:first-child > div,
    #solucoes .row:first-child,
    #solucoes .row:first-child > div,
    #html-vs-wp .row:first-child,
    #html-vs-wp .row:first-child > div,
    #portfolio .row:first-child,
    #portfolio .row:first-child > div,
    #planos .row:first-child,
    #planos .row:first-child > div,
    #faq .mb-4,
    footer .container,
    footer .container > .row,
    footer .container > .row > div {
        text-align: center !important;
    }

    /* Centralizar todas as badges eyebrow no mobile */
    .eyebrow {
        display: inline-flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* Centralizar botões fora de cards no mobile */
    section .btn-brand,
    section .btn-outline-clean,
    footer .btn-brand {
        display: inline-flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    /* Nota de Transparência sobre o Portfólio no mobile */
    .p-4.rounded-3.white-box-orange {
        text-align: center !important;
    }
    .p-4.rounded-3.white-box-orange .d-flex {
        justify-content: center !important;
    }
    .p-4.rounded-3.white-box-orange .col-lg-3 {
        text-align: center !important;
    }
    .p-4.rounded-3.white-box-orange .btn-outline-clean {
        display: inline-flex !important;
        margin: 12px auto 0 auto !important;
    }

    /* Centralizar cards no mobile (títulos, ícones e conteúdo) */
    .card-clean {
        text-align: center !important;
    }

    .card-clean .icon-box-clean {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .card-clean h3,
    .card-clean .h3,
    .card-clean h4,
    .card-clean .h4,
    .card-clean h5,
    .card-clean .h5,
    .card-clean p,
    .card-clean .pillar-tag {
        text-align: center !important;
    }

    /* Listas dentro dos cards: manter alinhadas em bloco centralizado */
    .card-clean ul {
        text-align: left !important;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Card Dúvida sobre qual escolher (WordPress): centralizado */
    .card-clean .white-box-orange {
        text-align: center !important;
    }

    .card-clean .d-flex.justify-content-between,
    .card-clean .d-flex.flex-column.flex-sm-row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .card-clean .d-flex.align-items-baseline {
        justify-content: center !important;
    }

    /* Cards de preços também centralizados no topo */
    .card-pricing-featured {
        text-align: center !important;
    }

    .card-pricing-featured h3,
    .card-pricing-featured p {
        text-align: center !important;
    }

    .card-pricing-featured .featured-tag {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .card-pricing-featured .d-flex.align-items-baseline {
        justify-content: center !important;
    }

    .card-pricing-featured ul {
        text-align: left !important;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Portfolio cards */
    .portfolio-item {
        text-align: center !important;
    }

    .portfolio-item h3,
    .portfolio-item p {
        text-align: center !important;
    }

    .portfolio-item .d-flex {
        justify-content: center !important;
    }

    /* Accordion FAQ */
    .accordion-clean .accordion-button {
        text-align: left !important;
    }

    .accordion-clean .accordion-body {
        text-align: left !important;
    }

    /* Ajuste de padding de seções no mobile */
    .section-padding {
        padding: 50px 0 !important;
    }
}