/* =====================================================
   ACONTROL ERP
   LANDING PAGE - STYLES V2
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --primary: #E53935;
    --primary-dark: #9f0000;
    --primary-light: #ef3b3b;

    --dark: #171717;
    --dark-2: #242424;

    --text: #444;
    --text-light: #777;

    --light: #f6f6f7;
    --light-2: #fafafa;

    --white: #ffffff;

    --border: #e6e6e6;

    --success: #20a968;
    --warning: #e39a00;

    --shadow:
        0 20px 50px rgba(0,0,0,.08);

    --shadow-large:
        0 30px 80px rgba(0,0,0,.15);

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    line-height: 1.6;

    background:
        var(--white);

}


img {

    max-width: 100%;

}


a {

    color: inherit;

}


button {

    font-family: inherit;

}


/* =====================================================
   GLOBAL
===================================================== */

.container {

    width:
        min(1160px, 92%);

    margin:
        0 auto;

}


.section {

    padding:
        100px 0;

}


.centered {

    text-align:
        center;

}


.section-label {

    display:
        inline-block;

    margin-bottom:
        15px;

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.section-label.light {

    color:
        rgba(255,255,255,.75);

}


.section-intro {

    max-width:
        760px;

    margin-bottom:
        60px;

}


.section-intro.centered {

    margin-left:
        auto;

    margin-right:
        auto;

}


.section-intro h2 {

    font-size:
        clamp(32px, 4vw, 48px);

    line-height:
        1.1;

    color:
        var(--dark);

    margin-bottom:
        20px;

}


.section-intro p {

    font-size:
        18px;

    color:
        var(--text-light);

}


/* =====================================================
   BUTTONS
===================================================== */

.btn-primary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 25px;

    background:
        var(--primary);

    color:
        var(--white);

    border-radius:
        7px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    border:
        2px solid var(--primary);

    transition:
        .25s ease;

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    border-color:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px rgba(201,0,0,.20);

}


.btn-outline {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 25px;

    border:
        2px solid var(--primary);

    color:
        var(--primary);

    border-radius:
        7px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        .25s ease;

}


.btn-outline:hover {

    background:
        var(--primary);

    color:
        white;

}


.btn-white {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 28px;

    background:
        white;

    color:
        var(--primary);

    border-radius:
        7px;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        .25s ease;

}


.btn-white:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

}


/* =====================================================
   HEADER
===================================================== */

.header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(10px);

    border-bottom:
        1px solid rgba(0,0,0,.07);

}


.header-content {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.logo {

    display:
        flex;

    align-items:
        baseline;

    gap:
        5px;

    text-decoration:
        none;

    color:
        var(--dark);

    font-size:
        25px;

    font-weight:
        800;

    letter-spacing:
        -.8px;

}


.logo span {

    color:
        var(--primary);

    font-size:
        15px;

    letter-spacing:
        0;

}

.logo img{
    width: 320px;
}

.footer-logo img{
    width: 250px;
}


.header nav {

    display:
        flex;

    align-items:
        center;

    gap:
        27px;

}


.header nav a {

    color:
        #444;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .2s ease;

}


.header nav a:hover {

    color:
        var(--primary);

}


/* =====================================================
   HERO
===================================================== */

.hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        90px 0 105px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 55%,
            #f1f1f1 100%
        );

}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -250px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        rgba(201,0,0,.04);

}


.hero-content {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        65px;

}


.hero-text {

    max-width:
        600px;

}


.hero-label {

    display:
        inline-block;

    margin-bottom:
        20px;

    padding:
        7px 13px;

    border-radius:
        30px;

    background:
        rgba(201,0,0,.08);

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.hero h1 {

    color:
        var(--dark);

    font-size:
        clamp(42px, 5vw, 64px);

    line-height:
        1.03;

    letter-spacing:
        -2.5px;

    margin-bottom:
        25px;

}


.hero h1 span {

    color:
        var(--primary);

}


.hero-text > p {

    max-width:
        590px;

    font-size:
        19px;

    line-height:
        1.7;

    color:
        var(--text-light);

    margin-bottom:
        32px;

}


.buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        45px;

}


.numbers {

    display:
        flex;

    gap:
        38px;

}


.numbers div {

    display:
        flex;

    flex-direction:
        column;

}


.numbers strong {

    color:
        var(--dark);

    font-size:
        25px;

    line-height:
        1.2;

}


.numbers span {

    margin-top:
        4px;

    color:
        #888;

    font-size:
        11px;

}


/* =====================================================
   HERO DASHBOARD
===================================================== */

.hero-image {

    min-width:
        0;

}


.dashboard {

    width:
        100%;

    padding:
        15px;

    border-radius:
        19px;

    background:
        #191919;

    box-shadow:
        var(--shadow-large);

    transform:
        perspective(1200px)
        rotateY(-2deg)
        rotateX(1deg);

}


.erp-window {

    overflow:
        hidden;

    border-radius:
        11px;

    background:
        white;

    border:
        1px solid #ddd;

}


.erp-topbar {

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 15px;

    border-bottom:
        1px solid #eee;

}


.erp-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #222;

    font-size:
        11px;

}


.erp-logo {

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        5px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        12px;

    font-weight:
        800;

}


.erp-user {

    color:
        #888;

    font-size:
        8px;

}


.erp-user span {

    color:
        var(--success);

    margin-right:
        3px;

}


.erp-body {

    min-height:
        390px;

    display:
        flex;

}


.erp-sidebar {

    width:
        105px;

    flex-shrink:
        0;

    padding:
        14px 8px;

    background:
        #202020;

}


.erp-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        9px 7px;

    margin-bottom:
        3px;

    border-radius:
        5px;

    color:
        #aaa;

    font-size:
        8px;

}


.erp-menu span {

    font-size:
        10px;

}


.erp-menu.active {

    color:
        white;

    background:
        var(--primary);

}


.erp-content {

    flex:
        1;

    min-width:
        0;

    padding:
        15px;

    background:
        #f7f7f8;

}


.erp-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        11px;

}


.erp-heading span {

    display:
        block;

    color:
        #999;

    font-size:
        7px;

}


.erp-heading h3 {

    margin-top:
        1px;

    color:
        #222;

    font-size:
        12px;

}


.erp-heading button {

    padding:
        5px 8px;

    background:
        white;

    border:
        1px solid #ddd;

    border-radius:
        4px;

    color:
        #666;

    font-size:
        7px;

}


.erp-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        8px;

    margin-bottom:
        9px;

}


.erp-stat {

    padding:
        9px;

    background:
        white;

    border:
        1px solid #ececec;

    border-radius:
        6px;

}


.erp-stat span {

    display:
        block;

    color:
        #999;

    font-size:
        7px;

}


.erp-stat strong {

    display:
        block;

    margin:
        3px 0;

    color:
        #222;

    font-size:
        14px;

}


.erp-stat small {

    color:
        #999;

    font-size:
        6px;

}


.erp-stat .positive {

    color:
        var(--success);

}


.erp-panel {

    padding:
        10px;

    background:
        white;

    border:
        1px solid #ededed;

    border-radius:
        6px;

}


.panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        8px;

}


.panel-header strong {

    color:
        #222;

    font-size:
        9px;

}


.panel-header small {

    color:
        #999;

    font-size:
        6px;

}


.panel-value {

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

}


.sales-chart {

    position:
        relative;

    height:
        105px;

    overflow:
        hidden;

}


.chart-lines {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

}


.chart-lines span {

    width:
        100%;

    border-top:
        1px dashed #e7e7e7;

}


.bars {

    position:
        absolute;

    inset:
        10px 15px 0;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-around;

    gap:
        7px;

}


.bars i {

    display:
        block;

    width:
        16px;

    min-height:
        8px;

    border-radius:
        3px 3px 0 0;

    background:
        linear-gradient(
            to top,
            var(--primary),
            #ee5b5b
        );

}


.chart-labels {

    display:
        flex;

    justify-content:
        space-around;

    margin-top:
        3px;

    color:
        #aaa;

    font-size:
        6px;

}


.erp-bottom {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-top:
        8px;

}


.inventory-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        7px 0;

    color:
        #666;

    font-size:
        7px;

}


.inventory-item strong {

    color:
        #222;

    font-size:
        8px;

}


.inventory-bar {

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        4px;

    background:
        #eee;

}


.inventory-bar span {

    display:
        block;

    width:
        78%;

    height:
        100%;

    background:
        var(--primary);

}


.inventory-item .warning {

    color:
        var(--warning);

}


.invoice-number {

    margin:
        12px 0 4px;

    color:
        #222;

    font-size:
        25px;

    font-weight:
        800;

}


.invoice-status {

    color:
        #777;

    font-size:
        6px;

}


.status-dot {

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    margin-right:
        3px;

    border-radius:
        50%;

    background:
        var(--success);

}


/* =====================================================
   TRUST
===================================================== */

.trust {

    padding:
        28px 0;

    border-bottom:
        1px solid var(--border);

    background:
        white;

}


.trust p {

    margin-bottom:
        18px;

    text-align:
        center;

    color:
        #999;

    font-size:
        11px;

}


.trust-items {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        35px;

}


.trust-items span {

    color:
        #999;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


/* =====================================================
   PROBLEM
===================================================== */

.problem-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        20px;

}


.problem-card {

    padding:
        35px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

    transition:
        .25s ease;

}


.problem-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


.problem-card > span {

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        800;

}


.problem-card h3 {

    margin:
        20px 0 10px;

    color:
        var(--dark);

    font-size:
        21px;

}


.problem-card p {

    color:
        var(--text-light);

    font-size:
        14px;

}


/* =====================================================
   SOLUTION
===================================================== */

.solution {

    padding:
        100px 0;

    color:
        white;

    background:
        var(--dark);

}


.solution-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        80px;

}


.solution h2 {

    max-width:
        550px;

    margin-bottom:
        20px;

    font-size:
        clamp(34px,4vw,50px);

    line-height:
        1.1;

}


.solution p {

    max-width:
        550px;

    margin-bottom:
        28px;

    color:
        #bbb;

    font-size:
        17px;

}


.check-list {

    list-style:
        none;

    margin-bottom:
        32px;

}


.check-list li {

    position:
        relative;

    padding-left:
        28px;

    margin:
        13px 0;

    color:
        #eee;

    font-size:
        14px;

}


.check-list li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        #ef4a4a;

    font-weight:
        800;

}


/* SOLUTION VISUAL */

.solution-visual {

    position:
        relative;

    width:
        430px;

    height:
        430px;

    max-width:
        100%;

    margin:
        auto;

}


.solution-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        60px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        50%;

}


.solution-visual::after {

    content:
        "";

    position:
        absolute;

    inset:
        115px;

    border:
        1px dashed rgba(255,255,255,.12);

    border-radius:
        50%;

}


.solution-center {

    position:
        absolute;

    z-index:
        5;

    left:
        50%;

    top:
        50%;

    width:
        130px;

    height:
        130px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    transform:
        translate(-50%,-50%);

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    font-size:
        19px;

    font-weight:
        800;

    box-shadow:
        0 0 50px rgba(201,0,0,.25);

}


.solution-center small {

    margin-top:
        -3px;

    font-size:
        10px;

    letter-spacing:
        2px;

}


.orbit {

    position:
        absolute;

    z-index:
        6;

    padding:
        9px 13px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        30px;

    background:
        #292929;

    color:
        #ddd;

    font-size:
        10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.20);

}


.orbit-1 {

    top:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

}


.orbit-2 {

    top:
        105px;

    right:
        10px;

}


.orbit-3 {

    bottom:
        95px;

    right:
        5px;

}


.orbit-4 {

    bottom:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

}


.orbit-5 {

    bottom:
        95px;

    left:
        5px;

}


.orbit-6 {

    top:
        105px;

    left:
        10px;

}


/* =====================================================
   MODULES
===================================================== */

.gray {

    background:
        var(--light);

}


.modules {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        18px;

}


.module-card {

    padding:
        28px 25px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        white;

    transition:
        .25s ease;

}


.module-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201,0,0,.2);

    box-shadow:
        var(--shadow);

}


.module-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        9px;

    background:
        rgba(201,0,0,.08);

    color:
        var(--primary);

    font-size:
        18px;

    font-weight:
        800;

}


.module-card h3 {

    margin-bottom:
        8px;

    color:
        var(--dark);

    font-size:
        18px;

}


.module-card p {

    min-height:
        65px;

    margin-bottom:
        18px;

    color:
        var(--text-light);

    font-size:
        13px;

}


.module-card a {

    color:
        var(--primary);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

}


/* =====================================================
   BENEFITS
===================================================== */

.benefits-heading {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        end;

    margin-bottom:
        55px;

}


.benefits-heading h2 {

    max-width:
        600px;

    color:
        var(--dark);

    font-size:
        clamp(32px,4vw,46px);

    line-height:
        1.1;

}


.benefits-heading > p {

    color:
        var(--text-light);

    font-size:
        16px;

}


.benefit-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid var(--border);

}


.benefit-item {

    min-height:
        210px;

    padding:
        30px 25px;

    border-right:
        1px solid var(--border);

}


.benefit-item:last-child {

    border-right:
        none;

}


.benefit-item strong {

    color:
        var(--primary);

    font-size:
        12px;

}


.benefit-item h3 {

    margin:
        35px 0 12px;

    color:
        var(--dark);

    font-size:
        18px;

}


.benefit-item p {

    color:
        var(--text-light);

    font-size:
        13px;

}


/* =====================================================
   STEPS
===================================================== */

.steps {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        20px;

}


.step {

    position:
        relative;

    padding:
        35px;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        12px;

}


.step-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        25px;

    border-radius:
        50%;

    background:
        #00ccff;

    color:
        white;

    font-size:
        18px;

    font-weight:
        800;

}


.step h3 {

    margin-bottom:
        10px;

    color:
        var(--dark);

    font-size:
        20px;

}


.step p {

    color:
        var(--text-light);

    font-size:
        14px;

}


/* =====================================================
   CTA
===================================================== */

.cta {

    padding:
        70px 0;

    background:
        var(--primary);

}


.cta-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.cta h2 {

    max-width:
        680px;

    color:
        white;

    font-size:
        clamp(30px,4vw,45px);

    line-height:
        1.1;

}


.cta p {

    margin-top:
        10px;

    color:
        rgba(255,255,255,.8);

}


/* =====================================================
   FAQ
===================================================== */

.faq-container {

    max-width:
        850px;

}


.faq-list {

    border-top:
        1px solid var(--border);

}


.faq-list details {

    border-bottom:
        1px solid var(--border);

}


.faq-list summary {

    position:
        relative;

    padding:
        22px 40px 22px 0;

    cursor:
        pointer;

    list-style:
        none;

    color:
        var(--dark);

    font-size:
        16px;

    font-weight:
        700;

}


.faq-list summary::-webkit-details-marker {

    display:
        none;

}


.faq-list summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        5px;

    top:
        18px;

    color:
        var(--primary);

    font-size:
        22px;

    font-weight:
        400;

}


.faq-list details[open] summary::after {

    content:
        "−";

}


.faq-list details p {

    max-width:
        720px;

    padding:
        0 40px 25px 0;

    color:
        var(--text-light);

    font-size:
        14px;

}


/* =====================================================
   CONTACT
===================================================== */

.contact {

    padding:
        80px 0;

    background:
        linear-gradient(
            135deg,
            #a90000,
            #d90000
        );

}


.contact-box {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        50px;

}


.contact h2 {

    max-width:
        650px;

    color:
        white;

    font-size:
        clamp(32px,4vw,48px);

    line-height:
        1.1;

}


.contact p {

    margin-top:
        15px;

    color:
        rgba(255,255,255,.8);

}


.contact-actions {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        12px;

    min-width:
        230px;

}


.contact-email {

    color:
        white;

    text-align:
        center;

    font-size:
        12px;

    text-decoration:
        none;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    background:
        #161616;

    color:
        white;

}


.footer-content {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        45px 0;

}


.footer-logo {

    font-size:
        22px;

    font-weight:
        800;

}


.footer-logo span {

    color:
        var(--primary-light);

}


.footer-content p {

    margin-top:
        8px;

    color:
        #888;

    font-size:
        12px;

}


.footer-links {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;

}


.footer-links a {

    color:
        #aaa;

    text-decoration:
        none;

    font-size:
        12px;

}


.footer-links a:hover {

    color:
        white;

}


.footer-bottom {

    padding:
        20px 0;

    border-top:
        1px solid #292929;

    text-align:
        center;

}


.footer-bottom p {

    color:
        #666;

    font-size:
        11px;

}


/* =====================================================
   JAVASCRIPT ANIMATIONS
===================================================== */

.hidden {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.show {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-floating {

    position:
        fixed;

    z-index:
        2000;

    right:
        22px;

    bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 19px;

    border-radius:
        50px;

    background:
        #25D366;

    color:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:
        .25s ease;

}


.whatsapp-floating:hover {

    transform:
        translateY(-3px)
        scale(1.03);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1000px) {


    .header nav {

        display:
            none;

    }


    .hero-content {

        grid-template-columns:
            1fr;

    }


    .hero-text {

        max-width:
            750px;

        margin:
            auto;

        text-align:
            center;

    }


    .hero-text > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .buttons {

        justify-content:
            center;

    }


    .numbers {

        justify-content:
            center;

    }


    .dashboard {

        max-width:
            750px;

        margin:
            auto;

        transform:
            none;

    }


    .problem-grid {

        grid-template-columns:
            1fr;

    }


    .solution-grid {

        grid-template-columns:
            1fr;

    }


    .solution-visual {

        order:
            -1;

    }


    .modules {

        grid-template-columns:
            repeat(2,1fr);

    }


    .benefits-heading {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .benefit-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .benefit-item:nth-child(2) {

        border-right:
            none;

    }


    .steps {

        grid-template-columns:
            1fr;

    }


    .cta-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .contact-box {

        grid-template-columns:
            1fr;

    }


}


@media(max-width:650px) {


    .section {

        padding:
            70px 0;

    }


    .header-content {

        min-height:
            68px;

    }


    .header .btn-primary {

        padding:
            0 15px;

        min-height:
            42px;

        font-size:
            11px;

    }


    .hero {

        padding:
            65px 0 75px;

    }


    .hero h1 {

        font-size:
            42px;

        letter-spacing:
            -1.5px;

    }


    .hero-text > p {

        font-size:
            16px;

    }


    .numbers {

        gap:
            20px;

        flex-wrap:
            wrap;

    }


    .numbers strong {

        font-size:
            22px;

    }


    .numbers span {

        font-size:
            9px;

    }


    .erp-sidebar {

        display:
            none;

    }


    .erp-bottom {

        grid-template-columns:
            1fr;

    }


    .erp-stats {

        grid-template-columns:
            1fr;

    }


    .erp-body {

        min-height:
            0;

    }


    .erp-content {

        padding:
            10px;

    }


    .modules {

        grid-template-columns:
            1fr;

    }


    .benefit-grid {

        grid-template-columns:
            1fr;

    }


    .benefit-item {

        border-right:
            none;

        border-bottom:
            1px solid var(--border);

    }


    .benefit-item:last-child {

        border-bottom:
            none;

    }


    .solution-visual {

        height:
            340px;

    }


    .solution-center {

        width:
            105px;

        height:
            105px;

        font-size:
            15px;

    }


    .orbit {

        font-size:
            8px;

        padding:
            7px 9px;

    }


    .footer-content {

        flex-direction:
            column;

    }


    .footer-links {

        flex-wrap:
            wrap;

    }


    .whatsapp-floating {

        right:
            15px;

        bottom:
            15px;

        min-height:
            45px;

    }


}


@media(max-width:430px) {


    .logo {

        font-size:
            21px;

    }


    .logo span {

        font-size:
            12px;

    }


    .header .btn-primary {

        padding:
            0 11px;

    }


    .hero h1 {

        font-size:
            36px;

    }


    .buttons {

        flex-direction:
            column;

    }


    .buttons a {

        width:
            100%;

    }


    .numbers {

        justify-content:
            space-between;

    }


    .erp-topbar {

        padding:
            0 9px;

    }


    .erp-user {

        display:
            none;

    }


    .erp-stat strong {

        font-size:
            13px;

    }


    .solution-visual {

        transform:
            scale(.85);

        margin:
            -20px auto;

    }


}


/* Botón de acción principal en el encabezado */
.header .btn-primary {

    background:
        #00ccff;

    border-color:
        #00ccff;

}


.header .btn-primary:hover {

    background:
        #00a8d6;

    border-color:
        #00a8d6;

    box-shadow:
        0 10px 25px rgba(0,204,255,.25);

}