@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
    --base-clr: #0461a5;
    --base-rgb: 4, 97, 165;
    --btn-clr: #0461a5;
    --btn-clr-dark: #004d82;
    --btn-rgb: 4, 97, 165;
    --base-title: #0461a5;
    --base-white: #0461a5;
    --body-clr: #18191b;
    --light-clr: #ded6ff;
    --title-clr: #18191b;
    --title-rgb: 24, 25, 27;
    --bs-body-bg: #fcfcfc;
    --bs-body-bg-rgb: 252, 252, 252;
    --section-bg: #ffffff;
    --section-bg-2: #ffffff;
    --section-light: #f3f9ff;
    --dark-clr: #00447a;
    --dark-rgb: 0, 68, 122;
    --white-clr: #ffffff;
    --white-rgb: 255, 255, 255;
    --footer: #001f35;
    --footer-bottom: #dbf1ff;
    --primary-clr: #0c67a3;
    --primary-rgb: 12, 103, 163;
    --border-clr: #eeeeee;
    --border-light: #e5e5e5;
    --border-light-only: #e5e5e5;
    --border-dark: #302474;
    --border-dark-only: transparent;
    --header-bg: rgba(227, 242, 252, 0.95);
    --heading-fonts: "Helvetica", sans-serif;
    --body-fonts: "Roboto", sans-serif;
    --base-shadow-sm: 0 0 1px var(--base-clr), 0 0 3px var(--base-clr);
    --base-shadow: 0 0 1px var(--base-clr), 0 0 2px var(--base-clr),
        0 0 3px var(--base-clr), 0 0 5px var(--base-clr),
        0 0 7px var(--base-clr);
    --shadow: 0 0 5px rgba(var(--title-rgb), 0.2);
}

.dark-theme {
    --base-clr: #0093ff;
    --btn-rgb: 4, 97, 165;
    --btn-clr: #0461a5;
    --base-rgb: 3, 247, 255;
    --base-title: #98d3ff;
    --base-white: #fff;
    --body-clr: #a3bdd0;
    --title-clr: #98d3ff;
    --title-rgb: 152, 211, 255;
    --bs-body-bg: #121213;
    --bs-body-bg-rgb: 18, 18, 19;
    --section-bg: rgba(17, 32, 43, 0.6);
    --section-bg-2: #141a20;
    --dark-clr: #142120;
    --dark-rgb: 20, 33, 32;
    --white-clr: #ffffff;
    --white-rgb: 255, 255, 255;
    --border-clr: #283c40;
    --border-dark: #283c40;
    --border-dark-only: #283c40;
    --header-bg: #11202be6;
    --footer: #001f35;
    --footer-bottom: #111a21;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: var(--body-clr);
    line-height: 26px;
    overflow-x: hidden;
    font-family: var(--body-fonts);
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body footer {
    margin-top: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    line-height: 1.3;
    color: var(--title-clr);
    font-family: var(--heading-fonts);
    font-weight: 700;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--title-clr);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--base-clr);
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 22px;
    line-height: 32px;
}

h3 {
    font-size: 18px;
    line-height: 28px;
}

h4 {
    font-size: 15px;
    line-height: 24px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 14px;
}

p {
    margin-top: -9px;
}

p:last-child {
    margin-bottom: -7px !important;
}

@media (min-width: 576px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
        line-height: 34px;
    }

    h3 {
        font-size: 18px;
        line-height: 28px;
    }

    h4 {
        font-size: 16px;
        line-height: 26px;
    }

    h5 {
        font-size: 15px;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 32px;
        line-height: 40px;
    }

    h2 {
        font-size: 26px;
        line-height: 36px;
    }

    h3 {
        font-size: 20px;
        line-height: 30px;
    }

    h4 {
        font-size: 18px;
        line-height: 26px;
    }

    h5 {
        font-size: 16px;
    }
}

a {
    display: inline-block;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

label,
button,
select {
    cursor: pointer;
}

input,
textarea {
    width: 100%;
}

.pt-25 {
    padding-top: 25px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pt-50 {
    padding-top: 50px;
}

.pb-50 {
    padding-bottom: 50px;
}

.py-25 {
    padding: 25px 0;
}

.main-footer {
    background: var(--footer);
}

@media (min-width: 1200px) {
    footer .container {
        max-width: 1325px;
    }
}

.footer-bottom {
    background: var(--footer-bottom);
    color: var(--btn-clr);
}

.footer-bottom a {
    color: var(--btn-clr);
}

.dark-theme .footer-bottom {
    color: var(--title-clr);
}

.dark-theme .footer-bottom a {
    color: var(--title-clr);
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icons a {
    display: block;
}

.social-icons a img {
    width: 20px;
}

.footer__wrapper {
    display: flex;
    flex-wrap: wrap;
}

.footer__wrapper-widget {
    width: 0;
    flex-grow: 1;
    font-size: 12px;
    line-height: 14px;
    text-align: justify;
    padding: 55px 23px 53px;
}

.footer__wrapper-widget .logo {
    display: block;
    margin-bottom: 23px;
}

.footer__wrapper-widget .logo img {
    max-width: 100%;
}

.footer__wrapper-widget p {
    max-width: 218px;
    margin-bottom: 16px;
    color: #f6f6f6;
}

.footer__wrapper-widget .social-icons {
    margin-bottom: 34px;
}

.footer__wrapper-widget:first-child {
    max-width: 317px;
    width: 100%;
}

.footer__wrapper-widget .cont {
    max-width: 244px;
    margin: 0 auto;
}

.footer__wrapper-widget:not(:last-child) {
    border-right: 1px solid rgba(var(--btn-rgb), 0.5);
}

@media (min-width: 1280px) {
    .footer__wrapper-link {
        padding-left: 25px;
    }
}

.footer__wrapper-link li a {
    color: #f1f1f1;
    font-weight: 400;
    font-size: 14px;
    display: inline-block;
    padding: 8px 0;
}

.footer__wrapper-link li a:hover {
    color: var(--base-clr);
}

.footer__wrapper-contact {
    text-align: center;
    line-height: 20px;
    color: var(--white-clr);
}

.footer__wrapper-contact .icon {
    height: 50px;
    margin-bottom: 30px;
}

.footer__wrapper-contact h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--white-clr);
    margin-bottom: 10px;
    /* T-UX-A: capitalize removido — innecesario en títulos cortos en español */
}

.footer__wrapper-contact a {
    color: var(--white-clr);
}

.footer__wrapper-contact a:not(.cmn--btn):hover {
    color: var(--base-clr);
}

@media (max-width: 1199px) {
    .footer__wrapper-widget:first-child {
        max-width: 250px;
    }
}

@media (max-width: 991px) {
    .footer__wrapper-widget:first-child {
        max-width: 50%;
        border-bottom: 1px solid rgba(var(--btn-rgb), 0.5);
    }

    .footer__wrapper-widget:nth-child(2) {
        width: 50%;
        border: none;
        border-bottom: 1px solid rgba(var(--btn-rgb), 0.5);
    }

    .footer__wrapper-widget:nth-child(2) .footer__wrapper-link {
        max-width: 180px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .footer__wrapper-widget {
        padding: 50px 15px;
    }
}

@media (max-width: 575px) {
    .footer__wrapper {
        padding: 70px 0;
    }

    .footer__wrapper-widget {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 35px;
        border: none !important;
    }

    .footer__wrapper-widget:not(:last-child) {
        margin-bottom: 25px;
    }

    .footer__wrapper-widget .footer__wrapper-link {
        max-width: 100% !important;
    }

    .footer__wrapper-widget .cont {
        max-width: 100%;
    }

    .footer__wrapper-widget .cont .social-icons {
        margin-bottom: 25px;
    }

    .footer__wrapper-contact {
        text-align: left;
    }

    .footer__wrapper-contact .icon {
        height: 40px;
        margin-bottom: 15px;
    }

    .footer__wrapper-contact h6 {
        margin-bottom: 0;
    }
}

@media (max-width: 991px) {
    footer .container {
        max-width: 100%;
        padding: 0;
    }
}

.app-btns {
    display: flex;
    gap: 10px;
}

.app-btns a {
    width: calc(50% - 5px);
}

.navbar-top-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    padding: 10px 0;
    min-height: 40px;
}

.navbar-top-wrapper .tel-link {
    display: flex;
    align-items: center;
    line-height: 1;
}

.navbar-top-wrapper .tel-link i {
    margin-right: 4px;
    transform: translateY(-1px) rotate(18deg);
    font-size: 16px;
    font-weight: 900;
}

@media (max-width: 575px) {
    .navbar-top-wrapper {
        font-size: 14px;
    }
}

.mode--toggle {
    width: 42px;
    height: 20px;
    border-radius: 10px;
    background: rgba(141, 153, 174, 0.5);
    border-radius: 50px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 99;
}

.mode--toggle img {
    transition: all ease 0.3s;
    position: absolute;
    left: 2px;
    top: 1px;
    height: 18px;
    border-radius: 50%;
}

.language-bar {
    color: var(--title-clr);
    position: relative;
}

.language-bar button {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.language-bar button img {
    width: 18px;
    height: 13px;
    object-fit: cover;
}

.language-bar button span {
    padding-left: 7px;
    color: var(--title-clr);
}

.language-bar .lang-btn {
    padding: 3px 12px;
    margin: 0 10px;
    height: 20px;
}

.language-bar ul {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(141, 153, 174, 0.5);
    transform: translateY(15px);
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.4s;
    background: var(--white-clr);
    z-index: 99;
}

.language-bar ul li {
    padding: 0;
}

.language-bar ul li button {
    height: 35px;
    padding: 0 27px 0 23px;
}

.language-bar ul li button span {
    color: var(--dark-clr);
    font-size: 14px;
}

.language-bar > button:focus ~ ul {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.navbar-bottom-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 17px;
    background: var(--header-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    border-radius: 0px 0px 10px 10px;
    transition: all ease 0.3s;
}

.navbar-bottom-wrapper .menu {
    display: flex;
    margin-left: auto;
    transition: all ease 0.3s;
    transform-origin: top;
}

.navbar-bottom-wrapper .menu li {
    padding: 2.5px;
}

.navbar-bottom-wrapper .menu li a {
    padding: 10px;
    font-size: 14px;
    color: var(--title-clr);
    text-transform: capitalize;
    font-weight: 500;
}

/* .navbar-bottom-wrapper .menu li a span {
    position: relative;
} */

/* .navbar-bottom-wrapper .menu li a > span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    height: 2px;
    background: var(--base-clr);
    border-radius: 2px;
    width: 0;
    transition: 0.3s ease-in-out;
} */

.navbar-bottom-wrapper .menu li a:hover,
.navbar-bottom-wrapper .menu li a.active {
    color: var(--base-clr);
}

.navbar-bottom-wrapper .menu li a:hover span::before,
.navbar-bottom-wrapper .menu li a:hover span::before,
.navbar-bottom-wrapper .menu li a.active span::before,
.navbar-bottom-wrapper .menu li a.active span::before {
    width: 100%;
}

@media (max-width: 991.9px) {
    .navbar-bottom-wrapper .menu {
        position: absolute;
        top: 100%;
        flex-direction: column;
        width: 100%;
        padding: 30px 20px;
        background: var(--header-bg);
        left: 0;
        border-top: 1px solid var(--border-clr);
    }

    .navbar-bottom-wrapper .menu li {
        padding: 0;
    }

    .navbar-bottom-wrapper .menu li a {
        padding: 5px;
        display: block;
    }

    .navbar-bottom-wrapper .menu:not(.active) {
        transform: scaleY(0);
    }
}

.navbar-bottom-wrapper .logo {
    height: 50px;
    width: 220px;
}

.navbar-bottom-wrapper .logo img {
    object-fit: contain;
    width: 70%;
    height: 100%;
}

@media (max-width: 575px) {
    .navbar-bottom-wrapper {
        padding: 10px;
    }

    .navbar-bottom-wrapper .logo {
        width: 0;
        flex-grow: 1;
        margin-right: 10px;
        max-width: 240px;
    }

    .navbar-bottom-wrapper .cmn--btn {
        font-size: 12px;
        padding: 3px 12px;
        font-weight: 400;
    }
}

.navbar-top {
    background: rgba(var(--bs-body-bg-rgb), 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    z-index: 999;
}

header {
    position: sticky;
    top: 0;
    z-index: 9;
}

/*Dark CSS For Header*/
.dark-theme .mode--toggle img {
    transform: translateX(21px);
}

.dark-theme .navbar-top-wrapper .text--base {
    color: var(--white-clr) !important;
}

.nav-toggle {
    position: relative;
    cursor: pointer;
    width: 25px;
    height: 20px;
}

.nav-toggle span {
    position: absolute;
    display: inline-block;
    height: 2px;
    width: 100%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    background: var(--title-clr);
    left: 0;
}

.nav-toggle span:first-child {
    top: 0;
}

.nav-toggle span:nth-child(2) {
    top: 52%;
    transform: translateY(-65%);
}

.nav-toggle span:last-child {
    bottom: 0;
}

.nav-toggle.active span:first-child {
    -webkit-transform: rotate(45deg) translate(3px, 10px);
    -ms-transform: rotate(45deg) translate(3px, 10px);
    transform: rotate(45deg) translate(3px, 10px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:last-child {
    -webkit-transform: rotate(-45deg) translate(3px, -10px);
    -ms-transform: rotate(-45deg) translate(3px, -10px);
    transform: rotate(-45deg) translate(3px, -10px);
}

.banner-section {
    padding: 41px 0 25px;
}

.banner-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.banner-content {
    width: 0;
    max-width: 446px;
    flex-grow: 1;
    margin-top: 30px;
}

.banner-content .subtitle {
    font-weight: 400;
    margin-bottom: 20px;
}

.banner-content .subtitle::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 2px;
    background: var(--btn-clr);
    margin-right: 10px;
    transform: translateY(-3px);
    border-radius: 2px;
}

.banner-content .title {
    text-transform: uppercase;
    margin-bottom: 25px;
}

.banner-content .txt {
    font-size: 16px;
    margin: 0;
    margin-bottom: 45px;
}

@media (max-width: 1199px) {
    .banner-content {
        max-width: 350px;
    }
}

@media (max-width: 991px) {
    .banner-content {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .banner-content .title {
        margin-bottom: 15px;
    }

    .banner-content .txt {
        margin-bottom: 20px;
    }
}

.banner-thumb {
    width: 0;
    max-width: 700px;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.banner-thumb-wrapper {
    overflow: hidden;
    height: 200px;
}

.banner-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.banner-thumb img:hover {
    transform: scale(1.05);
}

@media (min-width: 1400px) {
    .banner-thumb-wrapper:nth-of-type(4n + 1) {
        /* max-width: 370px; */
    }

    .banner-thumb-wrapper:nth-of-type(4n + 2) {
        max-width: 315px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 3) {
        max-width: 200px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 4) {
        max-width: 485px;
    }
}

@media (max-width: 1399px) {
    .banner-thumb-wrapper:nth-of-type(4n + 1) {
        max-width: 350px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 2) {
        max-width: 278px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 3) {
        max-width: 200px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 4) {
        max-width: 428px;
    }
}

@media (max-width: 1199px) {
    .banner-thumb-wrapper {
        height: 180px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 1) {
        max-width: 310px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 2) {
        max-width: 234px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 3) {
        max-width: 180px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 4) {
        max-width: 364px;
    }
}

@media (max-width: 991px) {
    .banner-thumb-wrapper:nth-of-type(4n + 1) {
        max-width: 370px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 2) {
        max-width: 314px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 3) {
        max-width: 200px;
    }

    .banner-thumb-wrapper:nth-of-type(4n + 4) {
        max-width: 484px;
    }
}

@media (max-width: 767px) {
    .banner-thumb {
        gap: 8px;
    }

    .banner-thumb-wrapper {
        /* height: 160px; */
    }

    .banner-thumb-wrapper:nth-of-type(4n + 1) {
        max-width: calc(65% - 4px);
    }

    .banner-thumb-wrapper:nth-of-type(4n + 2) {
        max-width: calc(35% - 4px);
    }

    .banner-thumb-wrapper:nth-of-type(4n + 3) {
        max-width: calc(30% - 4px);
    }

    .banner-thumb-wrapper:nth-of-type(4n + 4) {
        max-width: calc(70% - 4px);
    }
}

@media (max-width: 767px) and (max-width: 450px) {
    .banner-thumb-wrapper {
        height: 140px;
    }
}

@media (max-width: 767px) and (max-width: 325px) {
    .banner-thumb-wrapper {
        height: 130px;
    }
}

.app-btns {
    gap: 15px;
}

.app-btns a {
    display: block;
    width: calc(50% - 8px);
    max-width: 130px;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
}

.app-btns a:hover {
    box-shadow: var(--base-shadow-sm);
    filter: brightness(1.1);
}

.app-btns a img {
    width: 100%;
}

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

.section-title {
    text-align: center;
    max-width: 470px;
    margin: 0 auto 25px;
}

@media (min-width: 992px) {
    .section-title {
        max-width: 670px;
        margin-bottom: 35px;
    }
}

/*Service Section*/
.service__item {
    padding: 45px 20px 24px;
    background-color: var(--section-bg);
    box-shadow: 0px 0px 15px rgba(4, 97, 165, 0.05);
    margin: 10px;
    color: var(--body-clr);
    transition: box-shadow 0.3s ease;
}


.service__item:hover {
    box-shadow: var(--shadow);
}

@media (min-width: 768px) and (max-width: 991px) {
    .service__item {
        padding-top: 35px;
    }
}

.service__item-icon {
    height: 80px;
    margin-bottom: 20px;
}

.service__item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service__item-content {
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
}

.service__item-content .title {
    color: var(--base-title);
    margin-bottom: 15px;
}

.service__item-content .txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 24px;
}

.service__item-btn {
    border: 1px solid var(--btn-clr);
    border-radius: 10px;
    color: var(--base-clr);
    font-size: 14px;
    line-height: 14px;
    text-transform: capitalize;
    padding: 10px 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.service__item-btn:hover {
    color: var(--white-clr);
    background: var(--btn-clr);
}

.service__item::before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

#landing-loader {
    background: #fcfcfc;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
}

.slider-wrapper {
    margin: -10px;
    position: relative;
}

.slider-wrapper .service__item-popup {
    position: absolute;
    top: 10px;
    left: 0px;
    /* left: 10px; */
    width: calc(100% - 0px);
    /* width: calc(100% - 20px); */
    min-height: calc(100% - 20px);
    background-color: #fff;
    z-index: 9;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 5px rgba(var(--title-rgb), 0.073);
}
.dark-theme .service__item-popup{
    background-color: rgba(17, 32, 43) !important;
}

.slider-wrapper .service__item-popup.active {
    transition: 300ms all ease-in-out;
}

.slider-wrapper .service__item-popup-inner {
    display: flex;
    align-items: center;
    padding: 25px 40px 20px 0;
    flex-grow: 1;
}

.slider-wrapper .service__item-popup-inner .left-content {
    width: 284px;
}

.slider-wrapper .service__item-popup-inner .right-content {
    width: 0;
    flex-grow: 1;
    text-align: center;
    line-height: 1.5;
}

.slider-wrapper .service__item-popup-inner .right-content .top-text {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin-bottom: 1.4375rem;
    color: var(--body-clr);
}

.slider-wrapper .service__item-popup:not(.active) {
    transition: 300ms all ease-in-out;
    transform: scale(0.95);
    visibility: hidden;
    opacity: 0;
}

@media (max-width: 767px) {
    .slider-wrapper .service__item-popup:not(.active) {
        transform: translateY(30px);
    }
}

@media (max-width: 991px) {
    .slider-wrapper .service__item-popup-inner .left-content {
        width: 200px;
    }

    .slider-wrapper .service__item-popup-inner .right-content {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .slider-wrapper .service__item-popup-inner {
        flex-wrap: wrap;
        padding: 20px 15px;
    }

    .slider-wrapper .service__item-popup-inner .service__item {
        margin-bottom: 10px;
    }

    .slider-wrapper .service__item-popup-inner .service__item-icon {
        height: 60px;
        margin-bottom: 10px;
    }

    .slider-wrapper .service__item-popup-inner .left-content,
    .slider-wrapper .service__item-popup-inner .right-content {
        width: 100%;
    }

    .slider-wrapper .service__item-popup-inner .right-content {
        margin-top: 10px;
    }
}

.service-inner-slider-item img {
    aspect-ratio: 1;
    margin-bottom: 15px;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

.service-inner-slider-item span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.5;
}

.slide-icon {
    width: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--base-rgb), 0.05);
    cursor: pointer;
    color: var(--base-clr);
    transition: all ease 0.2s;
}

.slide-icon:hover {
    background: rgba(var(--base-rgb), 0.3);
}

.service-slide-nav {
    position: absolute;
    top: -9px;
    right: 12px;
    display: flex;
    gap: 15px;
}

@media (max-width: 575px) {
    .service-slide-nav {
        display: none;
    }
}

.close__popup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--title-clr);
}

/*About Section*/
.about__wrapper {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
}

.about__wrapper-content {
    padding: 53px 34px 38px 43px;
    width: 100%;
    max-width: 527px;
    border-radius: 5px;
    background: var(--section-bg);
}

.about__wrapper-content p {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
}

.about__wrapper-thumb {
    width: 0;
    flex-grow: 1;
    padding: 25px 27px 25px 0;
    position: relative;
    min-height: 100%;
}

.about__wrapper-thumb .main-img {
    position: relative;
    z-index: 3;
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.about__wrapper-thumb .main-img:hover {
    transform: scale(1.02);
}

.about__wrapper-thumb .bg-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    border-radius: 5px;
    height: 100%;
    left: 176px;
    overflow: hidden;
}

.about__wrapper-thumb .bg-img::before,
.about__wrapper-thumb .bg-img::after {
    border-radius: 5px;
    content: "";
    inset: 0;
    position: absolute;
}

.about__wrapper-thumb .bg-img::before {
    background: rgba(var(--btn-rgb), 0.8);
}

.about__wrapper-thumb .bg-img::after {
    inset: 7px;
    background: var(--bs-body-bg);
    opacity: 0.1;
}

.about__wrapper-thumb .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1199px) {
    .about__wrapper-thumb .main-img {
        height: 450px;
        object-fit: cover;
    }

    .about__wrapper-thumb .bg-img {
        left: 40px;
    }
}

@media (max-width: 1199px) {
    .about__wrapper-content {
        max-width: 470px;
    }
}

@media (max-width: 991px) {
    .about__wrapper-content {
        max-width: 100%;
        padding: 5px 34px;
    }
}

@media (max-width: 991px) and (max-width: 991px) {
    .about__wrapper-content {
        padding: 30px 15px;
    }
}

@media (max-width: 991px) {
    .about__wrapper-thumb {
        padding: 25px 25px 0;
    }
}

@media (max-width: 991px) and (max-width: 575px) {
    .about__wrapper-thumb {
        padding: 15px 15px 0;
    }
}

@media (max-width: 991px) {
    .about__wrapper-thumb .bg-img {
        left: 0;
        height: calc(100% - 50px);
    }
}

@media (max-width: 991px) {
    .about__wrapper-thumb .main-img {
        height: unset;
    }
}

/*Counter Section*/
.counter__item {
    display: flex;
    /* align-items: center; */
    padding: 25px;
    background: var(--section-bg);
    box-shadow: 0px 0px 15px rgba(4, 97, 165, 0.05);
    border-radius: 5px;
}

.counter__item-left {
    width: 50px;
    height: 50px;
}

.counter__item-left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.counter__item-right {
    width: 0;
    flex-grow: 1;
    padding-left: 25px;
    max-height: 50px;
}

.counter__item-right h3 {
    line-height: 1.175;
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) {
    .counter__item-right h3 {
        font-size: 22px;
    }
}

div[class*="col"]:nth-of-type(3n + 1) > .counter__item {
    color: #7f6daf;
}

div[class*="col"]:nth-of-type(3n + 2) > .counter__item {
    color: #c67123;
}

div[class*="col"]:nth-of-type(3n + 3) > .counter__item {
    color: #ff5a5a;
}

/*CTA Section*/
.cta-wrapper {
    border-radius: 10px;
    position: relative;
    padding: 60px 30px;
    overflow: hidden;
}

.cta-wrapper::before {
    background: linear-gradient(
        89.92deg,
        rgba(236, 247, 255, 0.85) 0.06%,
        rgba(216, 238, 255, 0.85) 52.6%,
        rgba(223, 241, 255, 0.85) 75.48%,
        rgba(216, 238, 255, 0.85) 99.92%
    );
    border-radius: 10px;
    inset: 0;
    content: "";
    position: absolute;
}

.cta-wrapper .content {
    position: relative;
    z-index: 1;
    max-width: 405px;
    margin: 0 auto;
    line-height: 1.4;
}

.cta-wrapper .content .title {
    margin-bottom: 24px;
}

.cta-wrapper .cmn--btn {
    padding: 12px 36px;
    border-radius: 30px;
    margin-top: 30px;
    position: relative;
}

@media (min-width: 992px) {
    .cta-wrapper .cmn--btn {
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
        border: none;
    }
}

.cta-wrapper .left-icon {
    position: absolute;
    right: calc(50% + 180px);
    bottom: 0;
}

@media (min-width: 992px) {
    .cta-wrapper .left-icon {
        right: calc(50% + 275px);
    }
}

@media (max-width: 575px) {
    .cta-wrapper {
        padding: 45px 20px;
    }
}

.cta-main {
    border-radius: 10px;
    overflow: hidden;
}

.text-btn-title {
    color: var(--btn-clr);
}

/*Dark CSS For CTA*/
.dark-theme .text-btn-title {
    color: var(--title-clr);
}

.dark-theme .cta-wrapper::before {
    background: linear-gradient(
        89.92deg,
        rgba(17, 26, 33, 0.8) 0.06%,
        rgba(17, 26, 33, 0.7) 52.6%,
        rgba(17, 26, 33, 0.8) 75.48%,
        rgba(17, 26, 33, 0.8) 99.92%
    );
}

/*NewsLetter Section*/
.newsletter-section {
    padding: 70px 0;
    position: relative;
}

.newsletter-section::before {
    content: "";
    inset: 0;
    position: absolute;
    background: #ecf7ff;
    opacity: 0.7;
}

.newsletter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.newsletter-wrapper .content {
    width: 100%;
    max-width: 405px;
    line-height: 20px;
    margin-right: 20px;
    color: var(--base-title);
}

.newsletter-wrapper .content .title {
    font-size: 18px;
    font-weight: 700;
    color: var(--base-white);
    margin-bottom: 6px;
}

.newsletter-wrapper .content p {
    margin: 0;
}

@media (max-width: 991px) {
    .newsletter-wrapper .content {
        max-width: 340px;
    }
}

@media (max-width: 767px) {
    .newsletter-wrapper .content {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 25px;
    }
}

.newsletter-wrapper .newsletter-right {
    width: 120px;
    flex-grow: 1;
    max-width: 596px;
}

.newsletter-form {
    position: relative;
}

.newsletter-form .form-control {
    background: var(--bs-body-bg);
    border: none;
    box-shadow: none;
    border-radius: 30px;
    height: 55px;
    color: var(--title-clr);
    padding: 0 130px 0 20px;
}

.newsletter-form .cmn--btn {
    top: 3px;
    right: 3px;
    width: 122px;
    height: 49px;
    border-radius: 25px;
    position: absolute;
}

@media (max-width: 767px) {
    .newsletter-form .form-control {
        height: 45px;
    }

    .newsletter-form .cmn--btn {
        height: 39px;
    }
}

.bg__img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/*Dark CSS For Newsletter*/
.dark-theme .newsletter-section::before {
    background: #111a21;
}

/*Testimonial Section*/
.testimonial__item {
    text-align: center;
    padding: 41px 28px 43px;
    /* margin: 20px; */
    line-height: 1.6;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 1 !important;
    background: var(--section-bg-2);
}

.testimonial__item-wrapper {
    opacity: 0.4;
}

.swiper-slide-active .testimonial__item-wrapper {
    opacity: 1;
}

.testimonial__item-img {
    width: 120px;
    border-radius: 5px;
    margin: 0 auto;
}

.testimonial__item-img img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    object-fit: cover;
}

.testimonial__item-cont {
    /* T-UX-A: capitalize removido — rompía la naturalidad del español en párrafos */
}

@media (max-width: 1199px) {
    .testimonial__item {
        font-size: 12px;
        padding: 25px 15px 25px;
    }

    .testimonial__item-img {
        width: 80px;
    }
}

.testimonial-section {
    overflow: hidden;
}

.testimonial-slider {
    max-width: 1400px;
    margin: 0 auto;
}

.testimonial-slider blockquote {
    margin: 15px 0 0;
}

.testimonial-slider .swiper-slide-active {
    background: var(--section-bg-2);
    box-shadow: 0px 0px 20px rgba(4, 97, 165, 0.15);
    border-radius: 5px;
    transform: scale(1);
    opacity: 1;
    z-index: 10;
}

.swiper-slide-next .testimonial__item,
.swiper-slide-prev .testimonial__item {
    transform: scale(0.75);
    opacity: 0.7;
    z-index: 5;
}

.swiper-slide-next-next .testimonial__item,
.swiper-slide-prev-prev .testimonial__item {
    transform: scale(0.65);
    opacity: 0.2;
    z-index: 1;
}

.swiper-slide-next-next,
.swiper-slide-prev-prev {
    transform: scale(0.65);
    opacity: 0.2;
    z-index: 1;
}

@media (max-width: 991px) {
    .swiper-slide {
        margin: 12px !important;
    }

    .swiper-slide:not(.swiper-slide-active) .testimonial__item {
        transform: scale(0.95) !important;
    }

    .swiper-slide-next-next,
    .swiper-slide-prev-prev {
        display: none;
    }

    .swiper-slide-next .testimonial__item,
    .swiper-slide-prev .testimonial__item {
        transform: scale(0.75) !important;
    }
}

@media (max-width: 767px) {
    .testimonial-slider {
        max-width: 360px;
        margin: 0 auto;
    }

    .swiper-wrapper {
        overflow: visible;
    }
}

.slider-bottom {
    margin-top: 10px;
}

.slider-bottom .owl-btn {
    font-size: 26px;
    font-weight: 700;
    color: var(--btn-clr);
    cursor: pointer;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.3s;
}

.slider-bottom .owl-btn i {
    transition: all ease 0.3s;
}

.slider-bottom .owl-btn:hover i {
    transform: translateX(5px) scale(1.1);
}

.slider-bottom .owl-btn:first-child:hover i {
    transform: translateX(-5px) scale(1.1);
}

.slider-bottom .owl-btn-next:hover i {
    transform: translateX(-5px) scale(1.1);
}

.app-slider-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.app-slider-wrapper .app-content {
    width: 100%;
    max-width: 686px;
    text-align: center;
    padding: 86px 30px 42px;
    background: var(--section-bg);
    box-shadow: 0px 0px 20px rgba(4, 97, 165, 0.05);
    border-radius: 5px;
}

.app-slider-wrapper .app-content .subtitle {
    margin-bottom: 15px;
}

@media (max-width: 1399px) {
    .app-slider-wrapper .app-content {
        max-width: 620px;
    }
}

@media (max-width: 1199px) {
    .app-slider-wrapper .app-content {
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .app-slider-wrapper .app-content {
        max-width: 100%;
        padding: 40px 20px 25px;
    }
}

.app-slider-wrapper .app-thumb {
    width: 357px;
    height: 511px;
    position: relative;
    margin-right: 80px;
}

@media (max-width: 1399px) {
    .app-slider-wrapper .app-thumb {
        margin-right: 40px;
    }
}

@media (max-width: 1199px) {
    .app-slider-wrapper .app-thumb {
        margin-right: 20px;
    }
}

@media (max-width: 991px) {
    .app-slider-wrapper .app-thumb {
        margin: 25px auto 0;
        height: unset;
    }

    .app-slider-wrapper .app-thumb .smaller-thumb {
        top: 52%;
    }
}

@media (max-width: 575px) {
    .app-slider-wrapper .app-thumb {
        width: 290px;
    }

    .app-slider-wrapper .app-thumb .main-thumb,
    .app-slider-wrapper .app-thumb .smaller-thumb {
        width: 200px;
    }

    .app-slider-wrapper .app-thumb .smaller-thumb {
        top: 60%;
        transform: translateY(-50%) scale(0.6) !important;
        right: 120px;
    }
}

.smaller-thumb,
.main-thumb {
    width: 246px;
    margin-left: auto;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.smaller-thumb .main-img,
.main-thumb .main-img {
    width: 100%;
}

.smaller-thumb .app-slider,
.main-thumb .app-slider {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    width: calc(100% - 20px);
    z-index: -1;
    overflow: hidden;
    border-radius: 25px;
}

.smaller-thumb {
    top: 50%;
    transform: translateY(-50%) scale(0.84);
    position: absolute;
    z-index: 1;
    right: 140px;
}

.scroll-elem {
    top: -100px;
    visibility: hidden;
    opacity: 0;
    position: relative;
}

.page-header {
    border-radius: 10px;
    position: relative;
    padding: 60px 0;
    text-align: center;
}

.page-header::before {
    content: "";
    inset: 0;
    position: absolute;
    border-radius: 10px;
    background: rgba(var(--btn-rgb), 0.5);
}

.page-header .title {
    position: relative;
    z-index: 1;
    font-size: 30px;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--white-clr);
}

@media (max-width: 575px) {
    .page-header .title {
        font-size: 24px;
    }
}

.form--control:not(button) {
    background: var(--bs-body-bg) !important;
    border: 1px solid var(--border-clr);
    box-shadow: none !important;
    outline: none;
    padding: 0 15px;
    border-radius: 5px;
    color: var(--title-clr) !important;
}

.form--control:not(button):focus {
    border-color: var(--btn-clr) !important;
}

.form--control:not(button)::placeholder {
    color: var(--body-clr) !important;
}

.form--control {
    height: 45px;
}

button.form--control {
    height: 45px;
    width: auto;
    border-radius: 25px;
    min-width: 141px;
}

textarea.form--control {
    height: 120px;
    padding: 20px;
}

.dark-theme .page-header {
    background: rgba(var(--btn-rgb), 0.3);
}

.contact__item {
    padding: 29px 30px;
    line-height: 1.5;
    box-shadow: 0px 4px 10px rgba(var(--title-rgb), 0.06);
    background: var(--bs-body-bg);
}

.contact__item * {
    transition: all ease 0.3s;
}

.contact__item-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 9px;
}

.contact__item-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 9px;
}

.contact__item ul li a {
    color: var(--body-clr);
}

.contact__item:hover ul li,
.contact__item:hover ul li a,
.contact__item:hover .contact__item-title,
.contact__item:hover .contact__item-icon {
    color: var(--base-clr);
}

@media (max-width: 450px) {
    .contact__item {
        padding: 15px;
        font-size: 12px;
    }

    .contact__item-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .contact__item-icon {
        font-size: 24px;
        margin-bottom: 5px;
    }
}

.shadow-form {
    box-shadow: 0px 0px 15px rgba(var(--title-rgb), 0.07);
    padding: 30px 31px 33px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pt-60 {
    padding-top: 60px;
}

.cmn--btn {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--white-clr);
    background: var(--btn-clr);
    padding: 4px 20px;
    line-height: 25px;
    border-radius: 18px;
    border: 1px solid var(--btn-clr);
    transition: all ease 0.3s;
}

.cmn--btn:hover {
    color: var(--white-clr);
    /* opacity: 0.8; */
    background: var(--btn-clr-dark);
}

.cmn--btn2 {
    font-size: 14px;
    text-transform: capitalize;
    color: var(--base-clr);
    background: rgba(var(--btn-rgb), 0.05);
    padding: 5px 16px;
    line-height: 26px;
    border-radius: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cmn--btn2 i {
    font-size: 18px;
    margin-left: 5px;
    font-weight: 700;
}

.cmn--btn2:hover {
    color: var(--white-clr);
    /* filter: brightness(0.8); */
    background: var(--btn-clr);
}

.bg--body {
    background-color: var(--bs-body-bg) !important;
}

.bg--section {
    background-color: var(--section-bg) !important;
}

.btn--base,
.badge--base,
.bg--base {
    background-color: var(--base-clr) !important;
    border-color: var(--base-clr) !important;
}

.btn--title,
.badge--title,
.bg--title {
    background-color: var(--title-clr) !important;
    border-color: var(--title-clr) !important;
}

.text--primary {
    color: #0c67a3 !important;
}

.text--secondary {
    color: #668799 !important;
}

.text--success {
    color: #0ead69 !important;
}

.text--danger {
    color: #d90429 !important;
}

.text--warning {
    color: #ee9b00 !important;
}

.text--info {
    color: #00b4d8 !important;
}

.text--dark {
    color: #192a56 !important;
}

.text--white {
    color: #fff !important;
}

.text--white p,
.text--white ul li,
.text--white ul li a,
.text--white span {
    color: #daddff;
}

.text--black {
    color: #000 !important;
}

.text--body {
    color: var(--body-clr) !important;
}

.text--base {
    color: var(--base-clr) !important;
}

.text--btn {
    color: var(--btn-clr) !important;
}

.text--title {
    color: var(--title-clr) !important;
}

/*# sourceMappingURL=main.css.map */

.top-padding {
    padding-inline-start: 20px;
}

.dark-theme {
    --bs-body-bg: #121213;
    --header-bg: #11202be6;
    --footer: #001f35;
    --footer-bottom: #111a21;
}

.navbar-nav .dropdown-menu.lang-menu {
    position: absolute;
}

@media (max-width: 575px) {
    .navbar-nav .dropdown-menu.lang-menu {
        left: unset;
        right: 0;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .js-navbar-vertical-aside-toggle-invoker {
        margin-right: 0 !important;
    }
}

/* .lagn-drop-btn {
    background: var(--bs-body-bg);
    padding: 10px 20px !important;
    border-radius: 10px;
    min-width: 200px;
} */
.lagn-drop-btn > span::before {
    display: none;
}

@media (max-width: 1199px) {
    .lagn-drop-btn {
        min-width: initial;
        padding: 10px !important;
    }
}

.lagn-drop-btn + .dropdown-menu {
    min-width: 200px;
}

.lagn-drop-btn + .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid var(--bs-body-bg);
}

.dropdown-item:hover {
    background-color: transparent;
    color: var(--bs-primary);
}

.dropdown-menu {
    box-shadow: 0px 0px 0.125rem rgba(65, 83, 179, 0.05),
        0px 0.75rem 1.5rem -0.25rem rgba(65, 83, 179, 0.05);
    border: none;
    border-radius: 0.625rem;
}

.color-text {
    color: var(--base-title);
}

.subscribe-form-group {
    position: relative;
    display: flex;
    align-items: center;
    inline-size: clamp(100%, 95vw, 90%);
}

.subscribe-form-group .form-control {
    border: 1px solid rgba(4, 97, 165, 0.2);
    border-radius: 1.875rem;
    color: #8a8a8a;
    background: var(--section-bg-2);
    height: 3.4375rem;
    padding: 1rem 1.5rem;
}

.subscribe-form-group .cmn--btn {
    position: absolute !important;
    right: unset;
    inset-inline-end: 0.3125rem;
    block-size: calc(100% - 0.625rem);
    display: flex;
    align-items: center;
    margin: 0;
    padding: 1rem 1.5rem;
}

.footer-social a {
    border-radius: 100px;
}

.footer-social a:hover {
    box-shadow: var(--base-shadow);
}

.footer-social img {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100px;
}

.gap-10 {
    gap: 0.625rem;
}

.navbar-bottom-wrapper .menu li a:focus-visible {
    border: none !important;
}

.subscribe-newsletter {
    background: url("../img/newsletter-bg.png") no-repeat center;
    background-size: cover;
}
.py-75{
    padding-block: 75px
}

.subscribe-btn{
    position: absolute;
    inset-inline-end: 3px;
    padding-block: 8px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 9;
}


.preloader {
    position: fixed;
    inline-size: 100%;
    block-size: 100%;
    background-color: #fff;
    z-index: 9999999;
    display: grid;
    place-items: center;
}
.dark-theme .preloader{
    background-color: #000 !important;
}

.preloader::after {
    content: "";
    position: absolute;
    border: 0.3rem solid var(--bs-primary);
    border-radius: 50%;
    border-top: 0.3rem solid #fff;
    width: 2.75rem;
    height: 2.75rem;
    /* Safari */
    animation: spin 1s linear infinite;
}

.dark-theme .preloader::after{
    border-top: 0.3rem solid #dfe1e2;
}

/* Safari */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* ================================================================
 * T-UX-A Ola 3 — Navegación móvil + touch targets + contraste footer
 * ================================================================ */

/* 1. Hamburguesa con touch target ≥44px y accesible */
.nav-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 12px 9.5px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: background .2s;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    background: rgba(0,0,0,.04);
    outline: 2px solid var(--btn-clr);
    outline-offset: 2px;
}
.nav-toggle span {
    height: 2.5px;
    left: 9.5px;
    width: 25px;
}

/* 2. Botón principal: touch target altura mínima 44 en móvil */
@media (max-width: 991.9px) {
    .cmn--btn,
    .cmn--btn2,
    .btn--base {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 3. Botón "Suscribirse" del newsletter — altura ≥44px en todos los viewports */
.subscribe-btn,
.newsletter-form .cmn--btn {
    min-height: 44px;
}

/* 4. Footer enlaces — touch target en móvil */
@media (max-width: 991.9px) {
    .footer__wrapper-link li a,
    .footer__wrapper-contact a {
        display: inline-block;
        padding-top: 8px;
        padding-bottom: 8px;
        min-height: 44px;
    }
}

/* 5. Logo del footer — versión clara para contraste sobre fondo navy oscuro */
footer .main-footer .footer-top .footer__wrapper-widget .logo img,
footer .footer__wrapper-widget:first-child .logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* 6. Banner CTA "Únete como proveedor" — imagen recortada por abajo */
.cta-wrapper {
    position: relative;
    overflow: hidden;
}
.cta-wrapper .left-icon {
    object-fit: contain;
    object-position: center bottom;
    max-height: 100%;
    height: auto;
    align-self: center;
}

/* 7. Newsletter aviso (T-UX-A Ola 2): color legible */
.subscribe-newsletter p {
    color: rgba(0,0,0,.6);
}
.dark-theme .subscribe-newsletter p {
    color: rgba(255,255,255,.7);
}
.subscribe-newsletter p a {
    color: var(--btn-clr);
}

/* 8. Logo header en móvil ≤575px — evitar compresión */
@media (max-width: 575px) {
    .navbar-bottom-wrapper .logo {
        flex-grow: 0;
        max-width: 180px;
        height: 42px;
        width: auto;
    }
    .navbar-bottom-wrapper .logo img {
        width: auto;
        max-width: 100%;
        height: 100%;
    }
}

/* ================================================================
 * T-UX-A Ola 6 — Detalles visuales: aspect-ratio, font-display, performance
 * ================================================================ */

/* 1. Aspect-ratio en cards de servicios y proveedores para evitar CLS */
.service__item-icon img,
.provider-card img.logo,
.contact__item-icon img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.banner-thumb-wrapper img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.testimonial__item-img img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Tarjetas de category card: aspect-ratio para evitar layout shift */
.service__item {
    min-height: 280px;
}

/* 2. Smooth font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 3. Reduce layout shift en imágenes lazy */
img {
    max-width: 100%;
    height: auto;
}

/* 4. Hover smoother en pricing cards */
.pricing-card {
    will-change: transform;
}

/* 5. font-display: swap para fuentes web — definido aquí porque Demandium usa @font-face en main.css */
@font-face {
    font-display: swap;
}

/* ================================================================
 * T-UX-A Ola D — A11y misc + visual
 * ================================================================ */

/* Footer text-align left (no justify) */
.main-footer .footer-bottom,
.footer__wrapper p,
.footer__wrapper-contact div {
    text-align: left !important;
}

/* Banner CTA "Únete como proveedor" — fix recorte definitivo */
.cta-wrapper {
    min-height: 280px;
    align-items: center;
}
.cta-wrapper .left-icon {
    max-height: 280px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Skip link focus */
.skip-link:focus {
    left: 0 !important;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Provider card focus visible para teclado */
.provider-card__cta:focus-visible {
    outline: 2px solid var(--btn-clr);
    outline-offset: 2px;
}

/* ================================================================
 * AUDIT FORENSE — Fixes P1 visuales críticos
 * ================================================================ */

/* 1. Quitar capitalize del menú principal (rompía "Acerca DE Nosotros") */
.navbar-bottom-wrapper .menu li a {
    text-transform: none !important;
}

/* 2. CTA "Únete como proveedor": imagen centrada verticalmente, no pegada abajo */
.cta-wrapper {
    min-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}
.cta-wrapper .left-icon {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    max-height: 280px !important;
    max-width: 280px !important;
    object-fit: contain !important;
}

/* 3. Newsletter: gradient azul corporativo en lugar de hojas verdes */
.subscribe-newsletter {
    background: linear-gradient(135deg, #1E40FF 0%, #0461a5 50%, #0d4c8b 100%) !important;
    background-size: cover !important;
    position: relative !important;
}
.subscribe-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.1) 0%, transparent 50%);
    pointer-events: none;
}
.subscribe-newsletter > div {
    position: relative;
    z-index: 1;
}
.subscribe-newsletter h2,
.subscribe-newsletter h3,
.subscribe-newsletter .text--base,
.subscribe-newsletter p {
    color: #fff !important;
}
.subscribe-newsletter p a {
    color: #FFD60A !important;
    text-decoration: underline !important;
}

/* 4. Footer: padding extra para evitar que los labels queden pegados arriba */
.footer__wrapper-contact .icon {
    margin-bottom: 16px !important;
}

/* 5. Headings de footer ('Escríbenos', 'Contacto', etc.) — espaciado consistente */
.footer__wrapper-contact .footer-label {
    margin-top: 8px !important;
}

/* ================================================================
 * AUDIT FORENSE — Fixes P3 modernización visual (2026)
 *
 * Diagnóstico: template Demandium V3.8 con look corporativo 2022.
 * Tipografía Roboto monótona, colores monocromos, sin elevación moderna.
 *
 * Estrategia: NO reemplazar todo el template (rompería componentes).
 * Agregar capa de modernización vía CSS variables + overrides quirúrgicos.
 * ================================================================ */

/* Cargar Plus Jakarta Sans (Google Fonts) — moderna, latam-friendly */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* === DESIGN TOKENS modernos === */
:root {
    /* Paleta principal — azul eléctrico + accents vibrantes */
    --modern-primary: #1E40FF;
    --modern-primary-deep: #1230CC;
    --modern-primary-soft: rgba(30, 64, 255, 0.08);
    --modern-accent: #FFD60A;
    --modern-coral: #FF6B6B;
    --modern-success: #10B981;
    --modern-surface-0: #FFFFFF;
    --modern-surface-1: #F8FAFC;
    --modern-surface-2: #F1F5F9;
    --modern-ink-900: #0F172A;
    --modern-ink-700: #334155;
    --modern-ink-500: #64748B;
    --modern-ink-300: #CBD5E1;
    --modern-border-soft: #E2E8F0;

    /* Spacing system 8px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border radius escala */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* Shadows con elevación moderna */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 48px -8px rgba(30, 64, 255, 0.18);
    --shadow-glow: 0 8px 24px -4px rgba(30, 64, 255, 0.35);
}

/* === Typography modernization === */
body {
    font-family: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--modern-ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .section-title, .subtitle {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
    letter-spacing: -0.02em;
    color: var(--modern-ink-900);
}

.title {
    font-weight: 800 !important;
}

/* === Hero section modernizada === */
.banner-section {
    background:
        radial-gradient(ellipse at top right, rgba(30, 64, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(255, 214, 10, 0.06) 0%, transparent 50%),
        var(--modern-surface-1) !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.banner-content .subtitle.eyebrow {
    color: var(--modern-primary) !important;
    background: var(--modern-primary-soft);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: inline-block;
    font-size: 12px !important;
    letter-spacing: 1.2px;
}

.banner-content h1.title {
    font-size: clamp(32px, 5vw, 56px) !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
    background: linear-gradient(135deg, var(--modern-ink-900) 0%, var(--modern-primary-deep) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-content .txt {
    font-size: 17px !important;
    color: var(--modern-ink-500) !important;
}

/* === Botones modernos === */
.cmn--btn,
.btn--base {
    border-radius: var(--radius-pill) !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-md) !important;
    border: none !important;
}

.cmn--btn:hover,
.btn--base:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow) !important;
}

/* === Cards / Sections con design moderno === */
.service__item,
.provider-card,
.pricing-card,
.counter__item {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--modern-border-soft) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service__item:hover,
.provider-card:hover,
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

/* Pricing card destacado */
.pricing-card[style*="MÁS POPULAR"],
.pricing-card[style*="scale(1.03)"] {
    border-width: 2px !important;
    box-shadow: var(--shadow-glow) !important;
}

/* === Section titles modernizadas === */
.section-title {
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
}

/* === Provider cards: avatar moderno con shadow === */
.provider-card div[role="img"] {
    box-shadow: 0 8px 20px -4px rgba(0,0,0,0.15) !important;
}

/* === Inputs modernos === */
.form-control,
input[type="email"],
input[type="search"],
input[type="text"] {
    border-radius: var(--radius-pill) !important;
    border-color: var(--modern-border-soft) !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    transition: all 0.2s !important;
}

.form-control:focus,
input:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 4px var(--modern-primary-soft) !important;
}

/* === Badges modernos === */
.badge {
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 5px 11px !important;
}

/* === Counters modernos === */
.counter__item {
    padding: 28px 20px !important;
    background: linear-gradient(135deg, #fff 0%, var(--modern-surface-1) 100%) !important;
}

.counter__item-right h3.subtitle {
    font-size: 28px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--modern-primary) 0%, var(--modern-primary-deep) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === Header glassmorphism === */
.navbar-bottom {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--modern-border-soft) !important;
}

.navbar-bottom-wrapper .menu li a {
    font-weight: 500 !important;
    color: var(--modern-ink-700) !important;
    transition: color 0.2s !important;
    border-radius: var(--radius-sm) !important;
}

.navbar-bottom-wrapper .menu li a:hover,
.navbar-bottom-wrapper .menu li a.active {
    color: var(--modern-primary) !important;
    background: var(--modern-primary-soft) !important;
}

/* === Footer moderno === */
footer.main-footer {
    background: linear-gradient(180deg, #0F172A 0%, #1E40FF 200%) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 13px !important;
}

/* === Sections background sutil === */
.about-section,
.contact-info-section,
.cta-section,
.testimonial-section,
.pricing-section {
    background: var(--modern-surface-0) !important;
}

.provider-list-section,
.service-section {
    background: var(--modern-surface-1) !important;
}

/* === Newsletter mejorado (sobre fix P1) === */
.subscribe-newsletter {
    border-radius: var(--radius-2xl);
    margin: 60px 30px !important;
    padding: 60px 40px !important;
}

@media (min-width: 992px) {
    .subscribe-newsletter {
        margin: 80px auto !important;
        max-width: 1200px;
    }
}

/* === Scroll behavior smooth === */
html { scroll-behavior: smooth; }

/* === Selection color === */
::selection {
    background: var(--modern-primary);
    color: #fff;
}

/* === Provider stats counters (Empresas en InfoVE section) === */
.provider-list-section .col-md-3 div[style*="border-radius:16px"] {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--modern-border-soft) !important;
    transition: all 0.25s !important;
}

.provider-list-section .col-md-3 div[style*="border-radius:16px"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg) !important;
}

/* === Hero buscador modernizado === */
.banner-content form[role="search"] > div {
    box-shadow: var(--shadow-lg) !important;
    border: 1.5px solid var(--modern-border-soft);
    transition: all 0.25s;
}

.banner-content form[role="search"] > div:focus-within {
    border-color: var(--modern-primary) !important;
    box-shadow: var(--shadow-glow) !important;
}

/* === Material Icons alignment === */
.material-icons {
    vertical-align: middle;
}

/* === Skeleton loading sutil para imágenes que tardan === */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

img[loading="lazy"][src*="data:"],
img[loading="lazy"].loaded {
    animation: none;
    background: transparent;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* AUDIT FORENSE v2 — HARDENING paleta moderna sobre Demandium */
:root, .dark-theme {
    --base-clr: #1E40FF !important;
    --base-rgb: 30, 64, 255 !important;
    --btn-clr: #1E40FF !important;
    --btn-clr-dark: #1230CC !important;
    --btn-rgb: 30, 64, 255 !important;
    --base-title: #0F172A !important;
    --base-white: #FFFFFF !important;
    --dark-clr: #1230CC !important;
    --dark-rgb: 18, 48, 204 !important;
    --primary-clr: #1E40FF !important;
    --primary-rgb: 30, 64, 255 !important;
    --light-clr: rgba(30, 64, 255, 0.06) !important;
    --title-clr: #0F172A !important;
    --border-clr: #E2E8F0 !important;
    --base-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04) !important;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
.text--primary, .text--base, .text--btn { color: #1E40FF !important; }

/* Overrides hex inline */
[style*="background:#0D4C8B"], [style*="background: #0D4C8B"], [style*="background:#0d4c8b"] { background: #1E40FF !important; }
[style*="color:#0D4C8B"], [style*="color: #0D4C8B"] { color: #1E40FF !important; }
[style*="rgba(13,76,139,.08)"], [style*="rgba(13,76,139,.1)"] { background: rgba(30, 64, 255, 0.08) !important; }
[style*="color:#145A32"], [style*="color: #145A32"] { color: #10B981 !important; }
[style*="rgba(20,90,50,.1)"], [style*="rgba(20,90,50,.08)"] { background: rgba(16, 185, 129, 0.1) !important; }
[style*="color:#0d6efd"], [style*="--bs-primary, #0d6efd"] { color: #1E40FF !important; }

/* Stats provider section: gradient text */
.provider-list-section [style*="font-size:32px; font-weight:700"] {
    background: linear-gradient(135deg, #1E40FF 0%, #1230CC 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Capitalize fix */
.text-capitalize { text-transform: none !important; }

/* Header sticky shadow */
header { box-shadow: var(--shadow-sm) !important; }

/* Botones sin border feo */
.cmn--btn, .btn--base, .subscribe-btn { border-color: transparent !important; }

/* Provider card avatar */
.provider-card div[role="img"] {
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15) !important;
    transition: transform .25s ease !important;
}
.provider-card:hover div[role="img"] { transform: scale(1.05) rotate(-3deg); }

/* About-us thumb */
.about__wrapper-thumb img.main-img {
    border-radius: 20px !important;
    box-shadow: 0 20px 50px -8px rgba(30, 64, 255, 0.2) !important;
}
.about__wrapper-thumb .bg-img {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 3px solid #1E40FF !important;
    transform: translate(20px, 20px) !important;
}

/* CTA "Únete proveedor" */
.cta-wrapper {
    background: linear-gradient(135deg, rgba(30, 64, 255, 0.05) 0%, rgba(255, 214, 10, 0.05) 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 28px !important;
}

/* Slider arrows */
.service-slide-prev, .service-slide-next, .owl-btn { color: #1E40FF !important; }

/* ================================================================================
 * SESIÓN 23 — Fix auditoría visual MÓVIL real (screenshots usuario 2026-06-03)
 * ================================================================================
 * BUGS arreglados:
 *   #1 Cards "¿Por qué InfoVE?" cortadas + colores rojos/naranjas raros
 *   #2 Banner "Únete como proveedor" imagen lateral solapada al texto + botón tapando texto
 *   #3 2 mockups móvil VACÍOS arriba del banner CTA
 *   #4 Newsletter botón "Suscribirse" superpuesto al input en móvil
 *   #5 Footer monolito azul marino plano + logo gigante + iconos sin combinar
 *   #6 Hero eyebrow "INFOVE — CONECTANDO NEGOCIOS" pesado en azul plano
 * ================================================================================ */

/* ===== BUG #1 — Cards info-section sin recorte + colores cohesivos ===== */
.counter__item-right {
    max-height: none !important;
    width: auto !important;
    flex-grow: 1 !important;
    padding-left: 16px !important;
}

.counter__item-right h3 {
    display: block !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
    align-items: initial !important;
}

.counter__item-right h3 span.ms-1 {
    margin-left: 0 !important;
}

.counter__item-right > div {
    color: #475569 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

/* Override colores nth-of-type que el template hardcodea (#7f6daf, #c67123, #ff5a5a) */
div[class*="col"] > .counter__item,
div[class*="col"]:nth-of-type(3n + 1) > .counter__item,
div[class*="col"]:nth-of-type(3n + 2) > .counter__item,
div[class*="col"]:nth-of-type(3n + 3) > .counter__item {
    color: #0F172A !important;
}

/* Espaciado cards en móvil */
.contact-info-section .row > div[class*="col"] {
    margin-bottom: 14px;
}

@media (max-width: 991px) {
    .counter__item {
        padding: 18px 16px !important;
        align-items: flex-start !important;
    }
    .counter__item-left {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
    .counter__item-right h3.subtitle {
        font-size: 17px !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
        color: #1E40FF !important;
        font-weight: 700 !important;
    }
}


/* ===== BUG #2 — Banner CTA "Únete como proveedor" — móvil sin solapes ===== */
@media (max-width: 991px) {
    .cta-wrapper {
        padding: 28px 22px !important;
        min-height: 0 !important;
        text-align: center !important;
        display: block !important;
    }
    .cta-wrapper .content {
        position: relative !important;
        z-index: 2 !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .cta-wrapper .left-icon {
        display: none !important;
    }
    .cta-wrapper .cmn--btn {
        position: static !important;
        margin-top: 18px !important;
        transform: none !important;
        display: inline-block !important;
        width: auto !important;
        right: auto !important;
        top: auto !important;
    }
}


/* ===== BUG #3 — 2 mockups móvil vacíos: ocultar (no hay imágenes reales del cliente) ===== */
.app-slider-wrapper .app-thumb {
    display: none !important;
}

@media (max-width: 991px) {
    .app-slider-wrapper {
        flex-direction: column !important;
    }
    .app-slider-wrapper .app-content {
        width: 100% !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        text-align: center !important;
    }
}


/* ===== BUG #4 — Newsletter botón sin tapar input en móvil ===== */
@media (max-width: 575px) {
    .subscribe-newsletter form {
        position: relative !important;
        padding-bottom: 0 !important;
    }
    .subscribe-btn {
        position: static !important;
        transform: none !important;
        margin-top: 12px !important;
        margin-inline: 0 !important;
        width: 100% !important;
        display: block !important;
        inset-inline-end: auto !important;
        inset-block-start: auto !important;
    }
    .subscribe-newsletter input[type="email"],
    .subscribe-newsletter input[type="text"],
    .subscribe-newsletter .form-control {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* Aviso "Ver política" amarillo → más sobrio */
.subscribe-newsletter p a,
.subscribe-newsletter .text-note a {
    color: #FFD60A !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
}


/* ===== BUG #5 — Footer: monolito plano → diseño moderno con paleta cohesiva ===== */
.main-footer,
.footer-section,
footer.main-footer {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 60%, #0F172A 100%) !important;
    color: #E2E8F0 !important;
    border-top: none !important;
}

.main-footer .footer-bottom,
.footer-bottom,
footer .footer-bottom {
    background: rgba(8, 12, 24, 0.75) !important;
    color: #94A3B8 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-block: 18px !important;
}

.main-footer .footer-bottom p,
.footer-bottom p,
.footer-bottom span {
    color: #94A3B8 !important;
}

.main-footer a,
.footer-section a,
.footer__wrapper a,
.main-footer .footer-bottom a {
    color: #E2E8F0 !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.main-footer a:hover,
.footer-section a:hover,
.footer__wrapper a:hover {
    color: #FFD60A !important;
}

/* Logo footer — REDUCIR gigantismo (era 1/3 pantalla móvil) */
.footer__wrapper-thumb,
.footer__wrapper-thumb img,
.main-footer .footer-logo,
.main-footer .footer-logo img,
.main-footer .footer-brand img,
footer .navbar-brand img {
    max-width: 150px !important;
    max-height: 56px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

@media (max-width: 575px) {
    .footer__wrapper-thumb img,
    .main-footer .footer-logo img,
    .main-footer .footer-brand img,
    footer .navbar-brand img {
        max-width: 120px !important;
        max-height: 44px !important;
    }
}

/* Iconos footer cohesivos (mail/teléfono/marker) */
.footer__wrapper-contact-icon,
.footer__wrapper-contact .icon,
.footer__wrapper-contact > div > img,
.footer__wrapper-contact img:first-child {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 214, 10, 0.12) !important;
    border-radius: 50% !important;
    padding: 9px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
}

.footer__wrapper-contact h6,
.footer__wrapper-contact .title {
    color: #F8FAFC !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    font-size: 16px !important;
}

.footer__wrapper-contact p,
.footer__wrapper-contact span,
.footer__wrapper-contact div {
    color: #CBD5E1 !important;
    font-size: 14px !important;
}


/* ===== BUG #6 — Hero eyebrow sobrio ===== */
.banner-section .subtitle.eyebrow,
.banner-section p.subtitle,
section.banner-section > .container .subtitle:not(.btn) {
    background: rgba(30, 64, 255, 0.08) !important;
    color: #1230CC !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}


/* ===== EXTRA — Toggle tema mejor visible móvil ===== */
.theme-toggler,
.theme-toggle,
button[class*="theme"] {
    border: 1px solid rgba(30, 64, 255, 0.2) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}


/* ===== EXTRA — Newsletter caja: mejor jerarquía ===== */
.subscribe-newsletter {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.subscribe-newsletter h2,
.subscribe-newsletter .section-title {
    font-size: clamp(22px, 4vw, 32px) !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.subscribe-newsletter p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.92) !important;
}


/* ================================================================================
 * SESIÓN 23 — Toggle tema DARK MODE funcional
 * ================================================================================
 * El template Demandium tiene JS de toggle .mode--toggle pero mi hardening de paleta
 * de la sesión 22 forzó que :root y .dark-theme tengan las mismas vars con !important.
 * Resultado: el click se ejecuta pero el body no cambia visualmente.
 *
 * Solución: definir vars DIFERENTES para .dark-theme + reglas concretas oscuras.
 * ================================================================================ */

/* Override de vars para dark-theme */
.dark-theme {
    --base-clr: #60A5FA !important;
    --base-rgb: 96, 165, 250 !important;
    --btn-clr: #3B82F6 !important;
    --btn-clr-dark: #2563EB !important;
    --base-title: #F8FAFC !important;
    --primary-clr: #60A5FA !important;
    --section-bg: #1E293B !important;
    --modern-primary: #60A5FA !important;
    --modern-primary-deep: #3B82F6 !important;
    --modern-text: #F1F5F9 !important;
    --modern-text-muted: #94A3B8 !important;
    --modern-surface-1: #1E293B !important;
    --modern-border-soft: rgba(255,255,255,0.1) !important;
}

.dark-theme body,
body.dark-theme {
    background: #0F172A !important;
    color: #E2E8F0 !important;
}

.dark-theme,
.dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6,
.dark-theme p, .dark-theme span, .dark-theme div, .dark-theme a {
    color: inherit;
}

/* Header en dark */
.dark-theme header,
.dark-theme .navbar-wrapper,
.dark-theme .header-section {
    background: #1E293B !important;
}

/* Cards en dark */
.dark-theme .counter__item,
.dark-theme .service__item,
.dark-theme .provider-card,
.dark-theme .pricing-card,
.dark-theme .testimonial-card {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #E2E8F0 !important;
}

.dark-theme .counter__item-right > div,
.dark-theme .service__item p,
.dark-theme .provider-card p {
    color: #94A3B8 !important;
}

/* Secciones con fondo claro → dark */
.dark-theme .section--surface,
.dark-theme .bg-light,
.dark-theme section[class*="-section"]:not(.banner-section):not(.subscribe-newsletter):not(.main-footer) {
    background: #0F172A !important;
}

/* Hero en dark */
.dark-theme .banner-section,
.dark-theme .hero {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

.dark-theme h1.title,
.dark-theme .banner-section h1,
.dark-theme .hero h1 {
    color: #F1F5F9 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Inputs en dark */
.dark-theme .form-control,
.dark-theme input[type="email"],
.dark-theme input[type="search"],
.dark-theme input[type="text"] {
    background: rgba(255,255,255,0.05) !important;
    color: #F1F5F9 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.dark-theme .form-control::placeholder,
.dark-theme input::placeholder {
    color: #64748B !important;
}

/* Footer ya es oscuro, sin cambios */

/* === Toggle tema más visible === */
.mode--toggle {
    cursor: pointer !important;
    width: 44px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #1E40FF 0%, #FFD60A 100%) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.25s ease !important;
}

.mode--toggle img {
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    padding: 3px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
    position: absolute !important;
    top: 50% !important;
    left: 3px !important;
    transform: translateY(-50%) !important;
    transition: left 0.25s ease !important;
}

.dark-theme .mode--toggle img {
    left: calc(100% - 21px) !important;
}


/* ================================================================================
 * SESIÓN 23 RONDA 4 — Fix con selectores REALES (Playwright capture verified)
 * ================================================================================ */

/* === Logo footer — selector REAL .footer__wrapper-widget .logo img === */
.footer__wrapper-widget .logo,
.footer__wrapper-widget a.logo {
    display: inline-block !important;
    margin-bottom: 16px !important;
    max-width: 150px !important;
}

.footer__wrapper-widget .logo img {
    max-width: 150px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 575px) {
    .footer__wrapper-widget .logo img {
        max-width: 120px !important;
        max-height: 42px !important;
    }
}


/* === Footer-bottom OSCURO real (override --footer-bottom hardcoded del template) === */
:root {
    --footer-bottom: #0A1018 !important;
}

.footer-bottom,
.main-footer .footer-bottom {
    background: #0A1018 !important;
    color: #94A3B8 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding-block: 16px !important;
}

.footer-bottom a,
.main-footer .footer-bottom a {
    color: #CBD5E1 !important;
}


/* === Iconos footer cohesivos — selector REAL .footer__wrapper-contact img.icon === */
.footer__wrapper-contact .icon,
.footer__wrapper-contact img.icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 214, 10, 0.12) !important;
    border-radius: 50% !important;
    padding: 11px !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
    display: block !important;
}


/* === Footer__wrapper-widget: separadores quitados móvil, mejor jerarquía === */
.footer__wrapper-widget:not(:last-child) {
    border-right: none !important;
}

@media (max-width: 991px) {
    .footer__wrapper {
        flex-direction: column !important;
    }
    .footer__wrapper-widget {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 28px !important;
    }
    .footer__wrapper-widget .cont {
        max-width: 100% !important;
        margin: 0 !important;
    }
}


/* === Newsletter: botón full-width + input no se solapa === */
.subscribe-newsletter .input-group {
    flex-direction: column !important;
    gap: 12px !important;
}

.subscribe-newsletter .input-group .form-control,
.subscribe-newsletter .input-group input {
    width: 100% !important;
    margin: 0 !important;
}

.subscribe-newsletter .input-group-append {
    width: 100% !important;
    display: block !important;
}

.subscribe-newsletter .subscribe-btn {
    width: 100% !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    inset-inline-end: auto !important;
    inset-block-start: auto !important;
    padding: 14px 20px !important;
}

/* h2 del newsletter — no tan duro mayúsculas */
.subscribe-newsletter h2.text-uppercase,
.subscribe-newsletter h2 {
    text-transform: none !important;
    font-size: clamp(22px, 4vw, 30px) !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0 !important;
    color: #fff !important;
}

/* "Ver política" amarillo → más suave */
.subscribe-newsletter p a {
    color: #FCD34D !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* === Banner CTA "Únete como proveedor" botón Regístrate Aquí - alto contraste === */
.cta-wrapper .cmn--btn,
.cta-wrapper a.cmn--btn,
.cta-wrapper button.cmn--btn {
    background: #1E40FF !important;
    color: #fff !important;
    border: 2px solid #1E40FF !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    box-shadow: 0 4px 14px rgba(30, 64, 255, 0.35) !important;
}

.cta-wrapper .cmn--btn:hover {
    background: #1230CC !important;
    border-color: #1230CC !important;
}


/* === Buscador hero: no recortar placeholder === */
.banner-section input[type="search"],
.banner-section .form-control,
section.banner-section input {
    padding-inline-end: 70px !important;
    text-overflow: ellipsis !important;
}


/* === Header sticky: que NO tape el hero eyebrow === */
header.sticky-header,
.header-section.sticky,
.navbar-wrapper.sticky {
    backdrop-filter: blur(10px) !important;
    background: rgba(236, 247, 255, 0.95) !important;
}


/* ================================================================================
 * SESIÓN 23 RONDA 5 — Fixes finales basados en Playwright re-capture
 * ================================================================================ */

/* === Hero: ocultar imagen jpg de baja calidad en móvil === */
@media (max-width: 991px) {
    .banner-thumb-wrapper {
        display: none !important;
    }
    .banner-thumb.hero-visual-block {
        padding: 0 !important;
        gap: 12px !important;
    }
    /* Mantener solo los chips de prueba social */
    .banner-thumb.hero-visual-block > div:last-child {
        margin-top: 24px !important;
    }
}


/* === Buscador hero: placeholder más legible en móvil === */
@media (max-width: 575px) {
    .banner-section input[type="search"],
    section.banner-section input[name="q"] {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
    /* Placeholder más corto en móvil con CSS attr override no es posible,
       pero el font-size más pequeño ayuda a que entre más texto */
}


/* === Banner CTA "Únete como proveedor" botón Regístrate Aquí — especificidad MÁXIMA === */
.cta-wrapper a.cmn--btn,
.cta-wrapper button.cmn--btn,
.cta-wrapper > div .cmn--btn,
.cta-wrapper .content .cmn--btn,
a.cmn--btn.btn--lg,
body .cta-wrapper .cmn--btn,
    background-color: #1E40FF !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 2px solid #1E40FF !important;
    box-shadow: 0 6px 18px rgba(30, 64, 255, 0.4) !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    text-decoration: none !important;
}

.cta-wrapper a.cmn--btn:hover,
.cta-wrapper button.cmn--btn:hover {
    background-color: #1230CC !important;
    border-color: #1230CC !important;
}


/* === Newsletter: separación entre <p> y form en móvil === */
@media (max-width: 991px) {
    .subscribe-newsletter .col-md-5,
    .subscribe-newsletter [class*="col-"] {
        margin-bottom: 8px !important;
    }
    .subscribe-newsletter form {
        margin-top: 18px !important;
    }
}


/* === Texto descripción del CTA banner: no debe ser azul, mejor contraste === */
.cta-wrapper .content p,
.cta-wrapper .content > p,
.cta-wrapper .content > .text {
    color: #334155 !important;
}

.cta-wrapper .content .title,
.cta-wrapper .content h2,
.cta-wrapper .content > h2 {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}


/* === H1 hero: NO uppercase tan agresivo en móvil === */
@media (max-width: 575px) {
    .banner-section h1.title,
    .banner-section h1 {
        font-size: clamp(28px, 7vw, 38px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.5px !important;
    }
}


/* === Sticky header: padding-top al body para que no tape el hero === */
@media (max-width: 991px) {
    body {
        scroll-padding-top: 80px !important;
    }
}


/* === Stat cards flotantes del hero (ocultas ya por hide imagen, pero por si acaso) === */
@media (max-width: 991px) {
    .hero-visual-block .banner-thumb-wrapper [style*="position:absolute"],
    .hero-visual-block .banner-thumb-wrapper > div {
        display: none !important;
    }
}


/* ================================================================================
 * SESIÓN 23 RONDA 6 — Fix bugs introducidos por RONDA 5
 * ================================================================================ */

/* === REVERTIR fix [class*="btn"] que pintó .text-btn-title (párrafo CTA) === */
.cta-wrapper p.text-btn-title,
.cta-wrapper .content .text-btn-title,
.cta-wrapper .content p {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #334155 !important;
    padding: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* === Botón "Regístrate Aquí" — su contenedor + el btn === */
.cta-wrapper > .text-center,
.cta-wrapper > div.text-center:last-child {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 24px !important;
}

.cta-wrapper > .text-center .cmn--btn,
.cta-wrapper > div.text-center .cmn--btn,
.cta-wrapper > div.text-center > a.cmn--btn {
    background: #1E40FF !important;
    background-color: #1E40FF !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 2px solid #1E40FF !important;
    box-shadow: 0 6px 18px rgba(30, 64, 255, 0.4) !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 11 !important;
    text-decoration: none !important;
}

/* === Título CTA "ÚNETE COMO PROVEEDOR" sin uppercase tan agresivo === */
.cta-wrapper .content .title,
.cta-wrapper h2.title {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
    font-size: clamp(20px, 5vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

@media (max-width: 575px) {
    .cta-wrapper .content .title.text-uppercase {
        text-transform: none !important;
    }
}


/* ================================================================================
 * SESIÓN 23 RONDA 7 — Fixes basados en audit WCAG + colores medidos
 * ================================================================================ */

/* === Eyebrow "INFOVE — CONECTANDO NEGOCIOS" — contraste 1.39 FAIL === */
.banner-section .subtitle.eyebrow,
.banner-section p.subtitle,
section.banner-section > .container .subtitle:not(.btn),
.banner-section p.eyebrow {
    background: rgba(30, 64, 255, 0.18) !important;
    color: #0A1A8C !important;
    border: 1px solid rgba(30, 64, 255, 0.25) !important;
}

.dark-theme .banner-section .subtitle.eyebrow,
.dark-theme section.banner-section .subtitle {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}


/* === Bootstrap #0D6EFD viejo → reemplazar con mi paleta moderna === */
a.text-primary,
.text-primary,
header a:not(.cmn--btn),
.header a {
    color: #1E40FF !important;
}

.bg-primary {
    background-color: #1E40FF !important;
}


/* === Botón "Explorar 108 negocios" — texto gris sobre bg azul es CRIMEN === */
a.btn--base.px-5.py-3,
.btn--base,
a.btn.btn--base,
a[class*="btn--base"] {
    background: #1E40FF !important;
    color: #ffffff !important;
    border: 2px solid #1E40FF !important;
    box-shadow: 0 6px 18px rgba(30, 64, 255, 0.35) !important;
    text-decoration: none !important;
}

a.btn--base:hover,
.btn--base:hover {
    background: #1230CC !important;
    color: #ffffff !important;
}


/* === Verde sucio #145A32 → success moderno #10B981 === */
[style*="rgba(20, 90, 50"],
[style*="rgba(20,90,50"],
[style*="color: rgb(20, 90, 50)"],
[style*="background:#145A32"],
[style*="background: #145A32"],
[style*="color:#145A32"],
[style*="color: #145A32"] {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.12) !important;
}


/* === Unificar negros: #18191B y #212529 → #0F172A === */
*[style*="color:#18191B"],
*[style*="color: #18191B"],
*[style*="color:#212529"],
*[style*="color: #212529"],
*[style*="color: rgb(33, 37, 41)"],
*[style*="color: rgb(24, 25, 27)"] {
    color: #0F172A !important;
}


/* === Logo header en dark mode: invertir si es imagen oscura === */
.dark-theme header img[alt*="logo"],
.dark-theme header img[alt*="InfoVE"],
.dark-theme header .navbar-brand img,
.dark-theme header a img:first-child,
.dark-theme .header-section img:first-child,
.dark-theme nav img:first-child {
    filter: brightness(0) invert(1) !important;
}

/* Logo en footer (dark de por sí) - mantener tal cual está */


/* === Header sticky en dark mode === */
.dark-theme header,
.dark-theme .navbar-wrapper,
.dark-theme .header-section,
.dark-theme nav.navbar-bottom-wrapper {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dark-theme header .nav-toggle .lines,
.dark-theme header .nav-toggle::before,
.dark-theme header .nav-toggle::after,
.dark-theme .nav-toggle [class*="line"] {
    background: #F1F5F9 !important;
}


/* === Botón "Contacto" en header dark === */
.dark-theme header .cmn--btn,
.dark-theme header a.cmn--btn {
    background: #3B82F6 !important;
    color: #fff !important;
    border-color: #3B82F6 !important;
}


/* === Pre-header en dark mode (teléfono) === */
.dark-theme .header-top,
.dark-theme .top-bar,
.dark-theme [class*="pre-header"] {
    background: #0A1018 !important;
    color: #94A3B8 !important;
}

.dark-theme .header-top a,
.dark-theme .top-bar a {
    color: #60A5FA !important;
}


/* === Botón "Soy proveedor — Únete gratis" (outline) en dark === */
.dark-theme .banner-section a.cmn--btn[style*="border"],
.dark-theme a[href*="provider/auth/sign-up"] {
    color: #60A5FA !important;
    border-color: #60A5FA !important;
    background: transparent !important;
}


/* === Cards/secciones en dark === */
.dark-theme section.banner-section {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

.dark-theme section.banner-section h1 {
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

.dark-theme section.banner-section .banner-content p {
    color: #CBD5E1 !important;
}

.dark-theme .contact-info-section {
    background: #0F172A !important;
}

.dark-theme .counter__item {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.dark-theme .counter__item-right h3.subtitle {
    color: #60A5FA !important;
    background: none !important;
    -webkit-text-fill-color: #60A5FA !important;
}

.dark-theme .counter__item-right > div {
    color: #94A3B8 !important;
}

.dark-theme .cta-wrapper {
    background: #1E293B !important;
}

.dark-theme .cta-wrapper::before {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
}

.dark-theme .cta-wrapper .content .title {
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

.dark-theme .cta-wrapper .content p {
    color: #CBD5E1 !important;
}

.dark-theme .app-slider-section,
.dark-theme .testimonial-section,
.dark-theme .section--surface {
    background: #0F172A !important;
}

.dark-theme .app-slider-wrapper .app-content .subtitle,
.dark-theme .app-content h3 {
    color: #F1F5F9 !important;
}

.dark-theme .app-content p,
.dark-theme .app-slider-wrapper .app-content p {
    color: #94A3B8 !important;
}


/* === Eyebrow contraste WCAG AA: fg=#0E1556 sobre bg=#EEF2FF === */
.banner-section .subtitle.eyebrow,
.banner-section p.subtitle,
section.banner-section > .container .subtitle:not(.btn),
.banner-section p.eyebrow {
    background: #EEF2FF !important;
    color: #0E1556 !important;
    border: 1px solid rgba(30, 64, 255, 0.35) !important;
    font-weight: 700 !important;
}

.dark-theme .banner-section .subtitle.eyebrow,
.dark-theme section.banner-section .subtitle {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #DBEAFE !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}


/* ================================================================================
 * SESIÓN 23 RONDA 8 — Audit completo (todas las páginas + desktop)
 * ================================================================================ */

/* === FIX hero image glitch en DESKTOP también (no solo móvil) === */
.banner-thumb-wrapper {
    display: none !important;
}

/* En desktop mantener layout limpio con stat cards visibles */
@media (min-width: 992px) {
    .banner-thumb.hero-visual-block {
        min-height: 400px;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* === Banner business-page: text-transform sin uppercase forzado === */
.page-header h1.title,
.page-header h1,
.dynamic-page-wrapper h1.title {
    text-transform: none !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 5vw, 42px) !important;
    color: #ffffff !important;
}

/* Banner overlay sobre la imagen para mejor legibilidad */
.page-header.bg__img,
section.page-header.bg__img {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 60px 20px !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-header.bg__img::before,
section.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 64, 255, 0.78), rgba(15, 23, 42, 0.78)) !important;
    z-index: 0;
}

.page-header h1.title,
.page-header h1 {
    position: relative !important;
    z-index: 1 !important;
}


/* === Logo header en dark mode (selector REAL .navbar-brand .logo) === */
.dark-theme .navbar-brand img,
.dark-theme a.logo img,
.dark-theme header a.logo img,
.dark-theme .navbar-top-wrapper a.logo img,
.dark-theme .navbar-bottom-wrapper a.logo img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}


/* === Wizard "Auto Registro" pasos más visibles === */
.steps-wrapper .step-item,
.step-item {
    text-align: center;
}

.steps-wrapper .step-number,
.step-number {
    background: #E2E8F0 !important;
    color: #475569 !important;
    transition: all 0.3s !important;
}

.steps-wrapper .step-item.active .step-number,
.step-item.active .step-number {
    background: #1E40FF !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(30, 64, 255, 0.35) !important;
}


/* === Provider signup imagen Preview placeholder rota === */
img.global-image-upload-preview,
.global-image-upload img[src=""],
.global-image-upload img:not([src]),
img[src*="/provider/auth/sign-up"][alt="Preview"] {
    background: #F1F5F9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='%2394A3B8'><path d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>") no-repeat center !important;
    min-height: 120px !important;
    border: 2px dashed #CBD5E1 !important;
    border-radius: 12px !important;
}


/* === Wizard signup pasos contraste === */
.dark-theme .steps-wrapper .step-number {
    background: rgba(255,255,255,0.08) !important;
    color: #94A3B8 !important;
}


/* === Body fix dark-theme para business pages también === */
.dark-theme,
body.dark-theme {
    background: #0F172A !important;
    color: #E2E8F0 !important;
}

.dark-theme .container,
.dark-theme section.container,
.dark-theme .dynamic-page-wrapper {
    color: #E2E8F0 !important;
}

.dark-theme .dynamic-page-wrapper h1,
.dark-theme .dynamic-page-wrapper h2,
.dark-theme .dynamic-page-wrapper h3,
.dark-theme .dynamic-page-wrapper h4 {
    color: #F1F5F9 !important;
}

.dark-theme .dynamic-page-wrapper p,
.dark-theme .dynamic-page-wrapper li {
    color: #CBD5E1 !important;
}

.dark-theme .dynamic-page-wrapper a {
    color: #60A5FA !important;
}

.dark-theme .dynamic-page-wrapper strong,
.dark-theme .dynamic-page-wrapper b {
    color: #F1F5F9 !important;
}


/* ================================================================================
 * SESIÓN 23 RONDA 9 — Fixes específicos audit detallado
 * ================================================================================ */

/* === FORM LABELS sin capitalize incorrecto (Bootstrap default) === */
.form-label,
label.form-label,
form label,
.form-group label {
    text-transform: none !important;
}


/* === WIZARD jQuery Steps — diseño moderno === */
#register-vertical-steps .steps,
.wizard > .steps {
    margin-bottom: 30px;
}

#register-vertical-steps .steps > ul,
.wizard > .steps > ul {
    display: flex !important;
    justify-content: space-between;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

/* Línea conectora entre pasos */
#register-vertical-steps .steps > ul::before,
.wizard > .steps > ul::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    height: 3px;
    background: #E2E8F0;
    z-index: 0;
}

#register-vertical-steps .steps > ul > li,
.wizard > .steps > ul > li {
    flex: 1;
    position: relative;
    z-index: 1;
    text-align: center;
}

#register-vertical-steps .steps a,
#register-vertical-steps .steps a:hover,
#register-vertical-steps .steps a:active,
.wizard > .steps a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #475569 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

#register-vertical-steps .steps .number,
.wizard > .steps .number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #475569;
    border: 3px solid #E2E8F0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

/* Paso activo (current) */
#register-vertical-steps .steps .current a,
.wizard > .steps .current a {
    color: #1E40FF !important;
}

#register-vertical-steps .steps .current .number,
.wizard > .steps .current .number {
    background: #1E40FF !important;
    color: #fff !important;
    border-color: #1E40FF !important;
    box-shadow: 0 8px 20px rgba(30, 64, 255, 0.35), 0 0 0 6px rgba(30, 64, 255, 0.12) !important;
}

/* Pasos ya completados */
#register-vertical-steps .steps .done .number,
.wizard > .steps .done .number {
    background: #10B981 !important;
    color: #fff !important;
    border-color: #10B981 !important;
}

#register-vertical-steps .steps .done a,
.wizard > .steps .done a {
    color: #10B981 !important;
}

/* === Botones Wizard "Next" "Previous" === */
#register-vertical-steps .actions ul,
.wizard > .actions > ul {
    display: flex !important;
    justify-content: space-between !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

#register-vertical-steps .actions a,
.wizard > .actions a {
    padding: 12px 28px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    display: inline-block !important;
}

#register-vertical-steps .actions a[href="#next"],
#register-vertical-steps .actions a[href="#finish"],
.wizard > .actions > ul > li:last-child a {
    background: #1E40FF !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(30, 64, 255, 0.3) !important;
}

#register-vertical-steps .actions a[href="#next"]:hover,
#register-vertical-steps .actions a[href="#finish"]:hover {
    background: #1230CC !important;
}

#register-vertical-steps .actions a[href="#previous"],
.wizard > .actions > ul > li:first-child a {
    background: #fff !important;
    color: #475569 !important;
    border: 2px solid #E2E8F0 !important;
}

/* Botones "disabled" */
#register-vertical-steps .actions .disabled a {
    opacity: 0.4 !important;
    pointer-events: none !important;
}


/* === Dark theme wizard === */
.dark-theme #register-vertical-steps .steps > ul::before {
    background: rgba(255,255,255,0.1) !important;
}

.dark-theme #register-vertical-steps .steps .number {
    background: #1E293B !important;
    color: #94A3B8 !important;
    border-color: #334155 !important;
}

.dark-theme #register-vertical-steps .steps a {
    color: #94A3B8 !important;
}

.dark-theme #register-vertical-steps .actions a[href="#previous"] {
    background: #1E293B !important;
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}


/* === HERO DESKTOP — agregar visual block al lado derecho (estaba vacío) === */
@media (min-width: 992px) {
    /* Mostrar el banner-thumb pero sin la imagen rota */
    .banner-thumb.hero-visual-block {
        display: flex !important;
        min-height: 480px !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative;
    }
    
    /* Crear visual block decorativo con CSS-only */
    .banner-thumb.hero-visual-block::before {
        content: "";
        position: absolute;
        inset: 40px;
        background:
            radial-gradient(circle at 25% 30%, rgba(30, 64, 255, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 75% 70%, rgba(255, 214, 10, 0.08) 0%, transparent 50%),
            linear-gradient(135deg, rgba(238, 242, 255, 0.6), rgba(255, 255, 255, 0.4));
        border-radius: 30px;
        border: 1px solid rgba(30, 64, 255, 0.08);
        z-index: 0;
        backdrop-filter: blur(10px);
    }
    
    /* Aumentar los chips para que se vean en el centro */
    .banner-thumb.hero-visual-block > div[style*="flex-wrap"] {
        position: relative;
        z-index: 2;
        max-width: 80%;
        gap: 20px !important;
        justify-content: center !important;
    }
    
    .banner-thumb.hero-visual-block > div[style*="flex-wrap"] > div {
        font-size: 15px !important;
        padding: 14px 24px !important;
        background: rgba(255,255,255,0.85) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }
}

.dark-theme .banner-thumb.hero-visual-block::before {
    background:
        radial-gradient(circle at 25% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(255, 214, 10, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.4)) !important;
    border-color: rgba(96, 165, 250, 0.15) !important;
}

.dark-theme .banner-thumb.hero-visual-block > div[style*="flex-wrap"] > div {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #F1F5F9 !important;
}


/* === Provider register form - inputs con altura cómoda === */
.global-input,
.provider-form input.form-control,
.provider-form input,
.provider-form select,
.provider-form textarea {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.2s !important;
}

.global-input:focus,
.provider-form input:focus,
.provider-form select:focus {
    border-color: #1E40FF !important;
    box-shadow: 0 0 0 4px rgba(30, 64, 255, 0.12) !important;
}


/* ================================================================================
 * SESIÓN 23 RONDA 10 — Fixes con selectores REALES (post-inspección DOM)
 * ================================================================================ */

/* === Labels signup: el selector real es .ff-field__label-text === */
.ff-field__label,
.ff-field__label-text,
label.ff-field__label,
.ff-field .ff-field__label-text,
form .ff-field__label,
form label.ff-field__label,
form label.ff-field__label > span,
form label.ff-field__label > span.ff-field__label-text {
    text-transform: none !important;
}

/* También todas las etiquetas de forms en general */
form label,
.form-label,
.form-group label,
[for] {
    text-transform: none !important;
}


/* === Wizard "Paso 1/2/3/4" — diseño moderno (selector real con .number) === */
form.wizard .steps,
.wizard.vertical .steps {
    margin: 20px 0 28px;
}

form.wizard .steps > ul,
.wizard.vertical .steps > ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: space-between !important;
    position: relative;
    gap: 8px;
}

form.wizard .steps > ul::before,
.wizard.vertical .steps > ul::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    height: 3px;
    background: #E2E8F0;
    z-index: 0;
}

form.wizard .steps > ul > li,
.wizard.vertical .steps > ul > li {
    flex: 1 1 auto !important;
    position: relative;
    z-index: 1;
    text-align: center;
    list-style: none !important;
}

form.wizard .steps a,
form.wizard .steps a:hover,
form.wizard .steps a:active,
.wizard.vertical .steps a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 !important;
}

form.wizard .steps a .number,
form.wizard .steps .number,
.wizard.vertical .steps .number {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #475569 !important;
    border: 3px solid #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: all 0.3s !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Paso CURRENT (activo) */
form.wizard .steps li.current a,
form.wizard .steps li.current,
.wizard.vertical .steps li.current a {
    color: #1E40FF !important;
}

form.wizard .steps li.current .number,
form.wizard .steps li.current a .number,
.wizard.vertical .steps li.current .number {
    background: #1E40FF !important;
    color: #fff !important;
    border-color: #1E40FF !important;
    box-shadow: 0 8px 20px rgba(30, 64, 255, 0.35), 0 0 0 6px rgba(30, 64, 255, 0.12) !important;
}

/* Paso DONE (completado) */
form.wizard .steps li.done .number,
form.wizard .steps li.done a .number,
.wizard.vertical .steps li.done .number {
    background: #10B981 !important;
    color: #fff !important;
    border-color: #10B981 !important;
}

form.wizard .steps li.done a,
.wizard.vertical .steps li.done a {
    color: #10B981 !important;
}

/* Quitar puntos/bullets si quedan */
form.wizard .steps ul li::marker,
.wizard .steps li::marker {
    content: none !important;
}


/* === Dark theme wizard === */
.dark-theme form.wizard .steps > ul::before,
.dark-theme .wizard.vertical .steps > ul::before {
    background: rgba(255,255,255,0.1) !important;
}

.dark-theme form.wizard .steps .number,
.dark-theme .wizard.vertical .steps .number {
    background: #1E293B !important;
    color: #94A3B8 !important;
    border-color: #334155 !important;
}

.dark-theme form.wizard .steps a,
.dark-theme .wizard.vertical .steps a {
    color: #94A3B8 !important;
}


/* === Asegurar que el contenedor del wizard no esté apretado === */
form.wizard.vertical,
.register-right-wrap.bg-white {
    padding: 24px 20px !important;
}

@media (min-width: 768px) {
    form.wizard.vertical,
    .register-right-wrap.bg-white {
        padding: 32px !important;
    }
}


/* === Botón "Siguiente" / "Anterior" alto contraste === */
form.wizard .actions ul,
.wizard .actions > ul {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 28px 0 0 !important;
    gap: 12px !important;
}

form.wizard .actions a,
.wizard .actions a {
    padding: 12px 32px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s !important;
    border: 2px solid transparent !important;
}

/* "Siguiente" o "Finalizar" — botón primary */
form.wizard .actions a[href="#next"],
form.wizard .actions a[href="#finish"],
.wizard .actions > ul > li:last-child a {
    background: #1E40FF !important;
    color: #fff !important;
    border-color: #1E40FF !important;
    box-shadow: 0 6px 18px rgba(30, 64, 255, 0.35) !important;
}

form.wizard .actions a[href="#next"]:hover,
.wizard .actions > ul > li:last-child a:hover {
    background: #1230CC !important;
    border-color: #1230CC !important;
}

/* "Anterior" — botón secundario */
form.wizard .actions a[href="#previous"],
.wizard .actions > ul > li:first-child a {
    background: #fff !important;
    color: #1E40FF !important;
    border-color: #E2E8F0 !important;
}

form.wizard .actions a[href="#previous"]:hover,
.wizard .actions > ul > li:first-child a:hover {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

form.wizard .actions li.disabled a,
.wizard .actions li.disabled a {
    opacity: 0.4 !important;
    pointer-events: none !important;
}