/* ─── 1. Variables CSS globales ─────────────────────────────────── */
:root {
    --bs-primary: #ee7e3c;
    --bs-primary-text-emphasis: #0b1a2b;
    --bs-primary-bg-subtle: #d6e4f5;
    --bs-primary-border-subtle: #a3c3e8;
    --bs-link-color: #c05000;
    --bs-link-hover-color: #8f3a00;
    --bs-paragraph: #333333;
    --ayv-blue: #182d47;
    --ayv-orange: #c05000;
    --ayv-navy: #0C2340;
    /* Sobreescribir verde lima #ee7e3c del tema Finto */
    --bs-btn-bg: #c05000;
    --bs-btn-border-color: #c05000;
    --bs-btn-hover-bg: #8f3a00;
    --bs-btn-hover-border-color: #8f3a00;
    --bs-btn-active-bg: #8f3a00;
    --bs-btn-active-border-color: #8f3a00;
    --bs-dropdown-link-active-bg: #c05000;
    --bs-nav-pills-link-active-bg: #c05000;
    --bs-pagination-active-bg: #0C2340;
    --bs-pagination-active-border-color: #0C2340;
    --bs-progress-bar-bg: #c05000;
    --bs-list-group-active-bg: #0C2340;
    --bs-list-group-active-border-color: #0C2340;
}

/* ─── 2. Botón principal ─────────────────────────── */
.default-btn {
    background-color: var(--ayv-orange);
    color: #ffffff;
}

    .default-btn:hover {
        background-color: var(--ayv-navy);
        color: #ffffff;
    }

    .default-btn.two {
        background-color: var(--ayv-navy);
        color: #ffffff;
    }

        .default-btn.two:hover {
            background-color: var(--ayv-orange);
            color: #ffffff;
        }

    .default-btn.three {
        background-color: #ffffff;
        color: var(--ayv-navy);
    }

        .default-btn.three:hover {
            background-color: var(--ayv-navy);
            color: #ffffff;
        }

/* ─── 3. Navegación ───────────────── */
.navbar .navbar-nav .nav-item .nav-link {
    color: var(--ayv-navy) !important;
    font-weight: 600;
}

    .navbar .navbar-nav .nav-item .nav-link.active,
    .navbar .navbar-nav .nav-item .nav-link:hover {
        color: var(--ayv-orange) !important; /* #c05000 — ratio 4.6:1 sobre blanco ✓ */
    }

/* ─── 4. Dropdown ─────────────── */
.navbar .navbar-nav .nav-item .dropdown-menu {
    border-left-color: var(--ayv-orange);
}

/* ─── 5. Read more links ────────────────────────────────────────── */
.read-more {
    color: var(--ayv-orange);
}

    .read-more:hover {
        color: var(--ayv-navy);
    }

/* ─── 6. Bootstrap btn-primary ─────────────────────────────────── */
.btn-primary {
    background-color: var(--ayv-navy);
    border-color: var(--ayv-navy);
    color: #ffffff;
}

/* ─── 7. Go-top button ──────────────────────────────────────────── */
.go-top {
    background-color: var(--ayv-orange);
}

    .go-top:hover {
        background-color: var(--ayv-navy);
    }

/* ─── 8. Preloader ──────────────────────── */
.wavy span {
    color: var(--ayv-navy);
}

/* ─── 9. Top header bar ─────────────────────────────── */
.top-header-area {
    background-color: var(--ayv-navy) !important;
}

    .top-header-area .left-side li a i {
        color: var(--ayv-orange);
    }

/* ─── 10. Footer ────────────────────────────────────────────────── */
.footer-area,
.copyright-area {
    background-color: var(--ayv-blue); /* Usa el nuevo azul #182d47 */
}

/* ─── 11. Navbar desktop – hover/active naranja brand ───────────── */
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link:hover {
    color: var(--ayv-orange) !important;
}
.navbar .navbar-nav .nav-item .nav-link.active::after,
.navbar .navbar-nav .nav-item .nav-link:hover::after {
    color: var(--ayv-orange) !important;
}
.navbar .navbar-nav .nav-item .dropdown-menu {
    border-left-color: var(--ayv-orange) !important;
}
.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-item.active,
.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-item:hover,
.navbar .navbar-nav .nav-item .dropdown-menu li:hover .sub-dropdown,
.navbar .navbar-nav .nav-item .dropdown-menu li:hover .sub-dropdown.dropdown-toggle::after {
    color: var(--ayv-orange) !important;
}
.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-item .name {
    background-color: var(--ayv-orange) !important;
}

/* ─── 11. Menú móvil offcanvas ───────────────────────────────────── */
.mobile-navbar .offcanvas-header {
    background-color: var(--ayv-blue) !important; /* Azul marca, reemplaza verde #072720 */
}

/* Color de texto de los links del menú */
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list a,
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list a:after,
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list a:hover,
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list a.active {
    color: var(--ayv-blue) !important;
}

/* Hover/active en submenú: naranja brand en lugar de lima #ee7e3c */
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list .mobile-menu-items a.active,
.mobile-navbar .offcanvas-body ul.mobile-menu .mobile-menu-list .mobile-menu-items a:hover,
.mobile-navbar .offcanvas-header .close-btn:hover {
    color: var(--ayv-orange) !important;
}

    .footer-area .service-link li a:hover,
    .footer-area .get-touch li a:hover {
        color: var(--ayv-orange);
    }

    .footer-area .social li a:hover {
        background-color: var(--ayv-orange);
    }

/* ─── 11. Fondos oscuros ─────────────────── */
.how-it-works-area {
    background-color: var(--ayv-navy) !important;
}

.single-works-card {
    background-color: var(--ayv-blue) !important;
}
/* #182d47 */
.features-area {
    background-color: var(--ayv-navy) !important;
}

.features-content ul li {
    background-color: var(--ayv-blue) !important;
}

/* ─── 12. Avatares ─────────── */
.ayv-avatar.orange {
    background-color: var(--ayv-orange);
}

.ayv-avatar.navy {
    background-color: var(--ayv-blue);
}

/* ─── 13. Redes Sociales ──────────────────────── */
.ayv-social-fb {
    color: var(--ayv-navy);
}

    .ayv-social-fb:hover {
        color: var(--ayv-blue);
    }

.ayv-social-ig {
    color: var(--ayv-orange);
}

    .ayv-social-ig:hover {
        color: #c9601f;
    }

/* ─── 14. Navbar — siempre visible, fondo sólido desde scroll=0 ── */
/*
 * Finto posiciona .top-header-info como `position: absolute` y el
 * .navbar interior como `background-color: transparent` — en scroll=0
 * el menú queda invisible sobre el hero. Lo corregimos aquí:
 */
.top-header-info {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
}
.top-header-info .navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

/* ─── 15. Override lima #ee7e3c → naranja brand en todos los elementos Finto ── */

/* Clase utilitaria de fondo (usada en pills de subtítulo, etc.) */
.bg-color-9edd05 {
    background-color: var(--ayv-orange) !important;
    color: #ffffff !important; /* Contraste 4.8:1 sobre naranja #c05000 - WCAG AA ✓ */
}

/* choose-card icons (Beneficios, Requisitos, Sucursales) */
.choose-card i {
    background-color: var(--ayv-orange) !important;
    color: #ffffff !important;
}
.choose-card:hover i {
    background-color: var(--ayv-navy) !important;
    color: var(--ayv-orange) !important;
}

/* Play button sobre imagen de choose-area */
.choose-image .paly-content .popup-btn:hover {
    background-color: var(--ayv-orange) !important;
}

/* Features section — subtítulo e íconos */
.features-content .section-heading .sub-title {
    color: var(--ayv-orange) !important;
}
.features-content ul li i {
    background-color: var(--ayv-orange) !important;
    color: #ffffff !important;
}
.features-content ul li:hover i {
    color: var(--ayv-orange) !important;
    background-color: var(--ayv-navy) !important;
}

/* Banner y mission-card */
.main-banner-area .info .user li:last-child {
    background-color: var(--ayv-orange) !important;
}
.banner-area .mission-card ul {
    background-color: var(--ayv-orange) !important;
}

/* Tags de depósito y play button de revenue */
.feature-provide .deposit li a:hover {
    background-color: var(--ayv-orange) !important;
}
.revenue-image .paly-content .popup-btn:hover {
    background-color: var(--ayv-orange) !important;
}

/* Partner area */
.partner-area .title p {
    color: var(--ayv-orange) !important;
}

/* Modal de búsqueda */
.search-modal .modal-body .popup-form .popup-btn:hover {
    color: var(--ayv-orange) !important;
}

/* Hero subtitle accent */
.hero-content .title .sub-t {
    color: var(--ayv-orange) !important;
}

/* ─── 16. Override global: reemplazar verde lima #ee7e3c restante ── */
/* Fondos verdes → naranja brand */
[style*="#ee7e3c"],
[class*="bg-color-9edd05"] { background-color: var(--ayv-orange) !important; }

/* Colores de acento, bordes e iconos verdes → naranja */
.counter-item i,
.services-card i,
.blog-card .top a,
.pricing-card .list li i,
.why-choose-us .choose-card .icon i,
.step-card .icon i,
.team-card .social li a:hover,
.partner-area .owl-dots .owl-dot.active span,
.faq-accordion .accordion-item .accordion-button:not(.collapsed),
.testimonials-card .rating i,
.revenue-card i,
.contact-info-item i {
    color: var(--ayv-orange) !important;
    background-color: transparent;
}

/* Fondos de íconos y badges → naranja */
.services-card:hover i,
.step-card:hover .icon i,
.counter-item .icon,
.info-card .icon {
    background-color: var(--ayv-orange) !important;
    color: #fff !important;
}

/* Bordes de acento → azul brand */
.faq-accordion .accordion-item,
.pricing-card.active,
.tab-content .nav-tabs .nav-item .nav-link.active {
    border-color: var(--ayv-blue) !important;
}