/* ── 5-column grid on desktop, tighter gutter ── */
.service-section .service-wrapper>.row {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 10px !important;
}

/* .service-section .service-wrapper>.row>[class*="col-"] {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}*/

.about-wrapper .about-content .list-box div {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199px) {
    .service-section .service-wrapper>.row>[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .about-wrapper .about-content .list-box div {
        gap: 20px;
    }

    #contacto .contact-wrapper-1 .section-title div img {
        max-width: 400px !important;
    }
}

@media (max-width: 993px) {
    #contacto .contact-wrapper-1 .section-title div img {
        max-width: 100% !important;
    }

    #problema.about-section .about-wrapper .about-content .section-title,
    #solucion.about-section .about-wrapper .about-content .section-title,
    .corporativo-section .section-title {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .como-funciona-section .container .section-title,
    .cierre-section .section-title,
    .seo-section .container .row div h2,
    #contacto .section-title,
    .autoridad-section .section-title,
    .vedio-bg-section .container .row div .social-proof-image {
        text-align: center !important;
    }

    #problema.about-section .about-wrapper .about-content .list-box,
    .corporativo-section .list-box,
    .autoridad-section .list-box {
        display: flex !important;
        justify-content: center !important;
    }

    .about-section .about-wrapper .about-content .list-box ul,
    .corporativo-section .list-box ul,
    .autoridad-section .list-box ul {
        width: auto !important;
    }

    .corporativo-section p {
        text-align: center !important;
    }

    .about-section .about-wrapper .about-content .about-btn .theme-btn,
    .corporativo-section .theme-btn,
    .cierre-section .theme-btn,
    #beneficios .theme-btn,
    .vedio-bg-section .theme-btn {
        width: 100%;
        text-align: center;
    }

    .como-funciona-section .theme-btn {
        width: 100%;
        text-align: center;
    }

    .corporativo-section #img-div-corporativo {
        text-align: center;
    }
}

@media(min-width: 993px) {

    #problema .about-wrapper .about-content,
    #solucion .about-wrapper .about-content {
        margin-left: 20px;
    }
}

@media (min-width: 1200px) {
    .autoridad-section .container {
        max-width: 960px;
    }
}

@media (min-width: 1400px) {
    .autoridad-section .container {
        max-width: 1140px;
    }
}

@media (max-width: 768px) {
    .service-section .service-wrapper>.row>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .service-section .service-wrapper .beneficios-image img {
        width: 100% !important;
    }

    .service-section .service-wrapper .beneficios-image {
        margin-top: 8px;
    }

    /* #problema.about-section .about-wrapper .about-content .list-box {
        justify-content: center;
    }

    .about-section .about-wrapper .about-content .list-box ul {
        width: auto !important;
    }

    .about-section .about-wrapper .about-content .about-btn .theme-btn {
        width: 100%;
        text-align: center;
    } */

    .about-wrapper .about-content .list-box div {
        gap: 16px;
    }
}

/* @media (max-width: 575px) {
    .service-section .service-wrapper>.row>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
} */

/* ── Reset Template Bloat ── */
.service-wrapper .service-box-items {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: 100% !important;
}

/* ── Compact service cards ── */
.service-wrapper .service-box-items .service-icon-box.sis-compact {
    padding: 18px 14px 14px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: var(--transition-base);
    cursor: pointer;
    position: relative;
    background: linear-gradient(to bottom, var(--color-primary), #112d9c) !important;
    margin: 0 !important;
    height: 100% !important;
}

/* ── Smaller icon ── */
.service-wrapper .service-box-items .service-icon-box.sis-compact .icon {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-full) !important;
}

.service-wrapper .service-box-items .service-icon-box.sis-compact .icon i {
    font-size: 20px !important;
    line-height: 1 !important;
}

/* ── Title ── */
.service-wrapper .service-box-items .service-icon-box.sis-compact h3 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    transition: var(--transition-base);
    text-align: center;
}

.service-wrapper .service-box-items .service-icon-box.sis-compact h3 a {
    font-size: 1rem !important;
}

/* ── Description firmly hidden by default ── */
.service-icon-box.sis-compact .sis-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-top: 0;
    width: 100%;
}

.service-icon-box.sis-compact .sis-desc p {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: #f7f6ff !important;
    display: block !important;
}

/* ── Hover: reveal (desktop only) ── */
@media (min-width: 769px) {
    .service-wrapper .service-box-items .service-icon-box.sis-compact:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(16, 188, 226, 0.3);
        z-index: 10;
    }

    .service-icon-box.sis-compact:hover .sis-desc {
        max-height: 120px;
        opacity: 1;
        margin-top: 8px;
    }
}

/* ── Mobile: tap to expand ── */
.service-icon-box.sis-compact.sis-expanded .sis-desc {
    max-height: 120px;
    opacity: 1;
    margin-top: 8px;
}

@media (max-width: 991.98px) {
    .cta-wrapper .section-title-area {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 20px !important;
    }

    .cta-wrapper .section-title {
        width: 100% !important;
    }

    .cta-wrapper .section-title h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .cta-wrapper .section-title p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        display: block !important;
        margin-top: 5px !important;
    }

    .cta-wrapper .call-box {
        align-self: flex-start !important;
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* ── Form Contrast Fixes ── */
.form-clt input,
.form-clt select {
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-main) !important;
}

.form-clt input::placeholder {
    color: var(--color-placeholder) !important;
    opacity: 1;
    /* Firefox fix */
}

/* ── Layout Helpers (Frontend Layout Skill) ── */
.row-flex {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-flex {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

.section-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 768px) {
    .section-container {
        padding-inline: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .section-container {
        padding-inline: var(--space-8);
    }
}

.section-padding-sm {
    padding-block: var(--space-8) var(--space-4);
}

.section-padding-md {
    padding-block: var(--space-12) var(--space-8);
}

.section-padding-lg {
    padding-block: var(--space-20) var(--space-12);
}

@media (max-width: 767px) {
    .section-padding-md {
        padding-block: var(--space-10);
    }

    .section-padding-lg {
        padding-block: var(--space-16);
    }
}

@media (max-width: 1199px) {
    #inicio .hero-content .theme-btn {
        width: 100%;
        text-align: center;
    }

    #inicio .hero-content #btn-afiliate {
        width: 100%;
        height: 60px;
        text-align: center;
        margin-top: 0px;
    }
}

/* ── Solucion Section Styling ── */
#solucion {
    background-color: var(--color-primary) !important;
    position: relative;
}

@media (min-width: 994px) {
    #solucion.about-section .about-wrapper .about-content .section-title {
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    #solucion.about-section .about-wrapper .about-content .section-title * {
        text-align: left !important;
    }
}

#solucion .tx-title,
#solucion .about-text,
#solucion .list-box ul li {
    color: var(--color-white) !important;
}

#solucion .tx-subTitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

#solucion .list-box ul li i {
    color: var(--color-accent) !important;
}

@media (max-width: 991px) {
    .hero-1 .hero-image img {
        width: 70%;
    }
}

#btn-afiliate:hover {
    background-color: #025fe0 !important;
}

#btn-problema-evitar:hover {
    background-color: #025fe0 !important;
}