/* GENERALIDADES */

html,
body {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.amaranth-regular {
    font-weight: 400 !important;
    font-style: normal !important;
}

.amaranth-bold {
    font-weight: 700 !important;
    font-style: normal !important;
}

.amaranth-regular-italic {
    font-weight: 400 !important;
    font-style: italic !important;
}

.amaranth-bold-italic {
    font-weight: 700 !important;
    font-style: italic !important;
}


.montserrat-bold {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.montserrat-regular {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 400 !important;
    font-style: normal !important;
}



.btn-primary-winners {
    background-color: #6500b0 !important;
    color: #fff !important;

}

.btn-primary-winners:hover {
    background-color: #4b0082 !important;
    color: #fff !important;

}

.btn-primary-winners:active {
    background-color: #8000DE !important;
    color: #fff !important;

}

.btn-secondary-winners {
    background-color: #ac3bff !important;
    color: #fff !important;

}

.btn-secondary-winners:hover {
    background-color: #980DFF !important;
    color: #fff !important;

}

.btn-secondary-winners:active {
    background-color: #bf68ff !important;
    color: #fff !important;

}

.btn-amarillo-winners {
    background-color: #f8c631 !important;
    color: #000 !important;

}

.btn-amarillo-winners:hover {
    background-color: #f1e062 !important;
    color: #000 !important;

}

.btn-amarillo-winners:active {
    background-color: #f8c631 !important;
    color: #000 !important;

}



.btn-white-winners {
    background-color: #ffffff !important;
    color: #6500b0 !important;

}

.btn-white-winners:hover {
    background-color: #4b0082 !important;
    border-color: #fff !important;
    color: #fff !important;

}

.btn-white-winners:active {
    background-color: #8000DE !important;
    color: #fff !important;

}

.text-primary-winners {
    color: #4b0082 !important;
}

.text-secondary-winners {
    color: #980DFF !important;
}

.text-complementary-red {
    color: #e54f6d !important;
}

.text-complementary-yellow {
    color: #f8c631 !important;
}

.bg-primary-winners {
    background-color: #4b0082 !important;
}

.bg-secondary-winners {
    background-color: #980DFF !important;
}

.bg-complementary-red {
    background-color: #e54f6d !important;
}

.bg-complementary-yellow {
    background-color: #f8c631 !important;
}

.border-primary-winners {
    border: 1px solid #4b0082 !important;
}

.img-carrusel-logo {
    height: 100px !important;
}

/* CARRUSEL DE LOGOTIPOS */

:root {
    --items-per-page: 4;
}

.carrusel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carrusel-container {
    /* Prevent logos from wrapping to the next line */
    white-space: nowrap;
}

.carrusel-item {
    display: inline-block;
    /* min-width: calc(100% / var(--items-per-page)); */
    box-sizing: border-box;
    padding: 5px !important;
    text-align: center;
    background-color: #fff;
    border: none;
}

.fa-icon-big {
    font-size: 36pt;
}

/* PMFs */
.accordion-winners .accordion-item .accordion-button:not(.collapsed) {
    background-color: #4b0082 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.accordion-winners .accordion-item .accordion-button {
    background-color: #ffffff !important;
    font-weight: 700 !important;
    font-style: normal !important;
    border: none !important;
}

.accordion-winners .accordion-header {
    border: none !important;
}

/* TARJETAS INTERNAS */
.card-winners {
    border: 1px solid #4b0082 !important;
    background-color: #ffffff !important;
    min-height: 415px !important;
}

.card-winners-active {
    border: 1px solid #4b0082 !important;
    background-color: #4b0082 !important;
    color: #ffffff !important;
    min-height: 415px !important;
}

.card-winners .card-title {
    font-weight: 700 !important;
    font-style: normal !important;
}

.card-winners-active .card-title {
    font-weight: 700 !important;
    font-style: normal !important;
}

.card-winners .card-text {
    font-size: 12pt !important;
}

.card-winners-active .card-text {
    font-size: 12pt !important;
}

.card-winners .card-footer {
    border-top: none !important;
    background-color: transparent !important;
}

.card-winners-active .card-footer {
    border-top: none !important;
    background-color: transparent !important;
}

/* COMERCIOS - INICIO */
        /* Existing custom styles */
        .custom-section-container {
            /* Adjust padding/margin based on surrounding sections if needed */
            padding: 80px 0;
            background-color: #6500b0;
            /* Dark background, slightly different from pure black for contrast */
            color: #fff;
        }

        .custom-grid {
            display: grid;
            grid-template-columns: 1fr;
            /* Default to single column for mobile */
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .custom-grid {
                grid-template-columns: 1fr 1fr;
                /* Two columns for larger screens */
            }
        }

        .custom-left-col {
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .custom-tag {
            background-color: #FFD700;
            /* Yellow tag */
            color: #000;
            padding: 8px 15px;
            border-radius: 5px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9em;
            margin-bottom: 20px;
            display: inline-block;
        }

        .custom-left-col h1 {
            font-size: 3.2em;
            font-weight: 700;
            line-height: 1.2;
            margin-top: 15px;
            color: #fff;
            /* Ensure heading is white */
        }

        .custom-right-col {
            background-color: #4b0082;
            /* Darker gray for the quote background */
            border-radius: 15px;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .custom-right-col::before {
            content: "“";
            font-size: 8em;
            color: rgba(255, 255, 255, 0.1);
            /* Slightly transparent quote mark */
            position: absolute;
            top: -20px;
            left: 20px;
            line-height: 1;
            z-index: 0;
            /* Ensure it's behind the text */
        }

        .custom-right-col p {
            font-size: 1.2em;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #ccc;
            /* Lighter text for the quote */
            z-index: 1;
            /* Ensure text is above the pseudo-element */
        }

        .custom-right-col .author {
            font-style: italic;
            font-size: 1em;
            color: #aaa;
            /* Slightly darker color for author */
            text-align: right;
            z-index: 1;
        }

        .custom-stats-row {
            grid-column: span 2;
            /* Spans across both columns */
            display: flex;
            flex-wrap: wrap;
            /* Allows items to wrap on smaller screens */
            justify-content: space-around;
            padding-top: 50px;
            padding-bottom: 20px;
            /* Adjusted padding */
        }

        .custom-stat-item {
            flex: 1 1 22%;
            /* Allows items to grow/shrink, about 4 per row */
            min-width: 180px;
            /* Minimum width before wrapping */
            text-align: center;
            padding: 20px;
            position: relative;
            box-sizing: border-box;
            /* Include padding in width calculation */
        }

        .custom-stat-item::before {
            content: "HASTA";
            display: block;
            font-size: 0.8em;
            color: #ccc;
            margin-bottom: 5px;
            font-family: 'Montserrat', sans-serif;
            /* Ensure consistent font */
        }

        .custom-stat-item h2 {
            font-size: 3em;
            font-weight: 700;
            color: #FFD700;
            /* Yellow color for numbers */
            margin-bottom: 10px;
            font-family: 'Montserrat', sans-serif;
            /* Ensure consistent font */
        }

        .custom-stat-item p {
            font-size: 1em;
            color: #fff;
            line-height: 1.4;
            font-family: 'Montserrat', sans-serif;
            /* Ensure consistent font */
        }

        /* Vertical lines between stats - for larger screens */
        @media (min-width: 768px) {
            .custom-stat-item:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 20%;
                bottom: 20%;
                width: 1px;
                background-color: rgba(255, 255, 255, 0.2);
            }
        }

        /* Responsive adjustments for stats section */
        @media (max-width: 767px) {
            .custom-stats-row {
                flex-direction: column;
                /* Stack stats vertically on smaller screens */
                align-items: center;
                padding-top: 30px;
            }

            .custom-stat-item {
                width: 90%;
                /* Make items wider when stacked */
                margin-bottom: 30px;
                padding-bottom: 30px;
                /* Add space between stacked items */
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                /* Add a subtle separator */
            }

            .custom-stat-item:last-child {
                border-bottom: none;
                /* No border for the last item */
                margin-bottom: 0;
            }

            .custom-stat-item::after {
                display: none;
                /* Hide vertical lines when stacked */
            }
        }

        @media (max-width: 576px) {
            .custom-left-col h1 {
                font-size: 2.5em;
            }

            .custom-right-col p {
                font-size: 1em;
            }

            .custom-stat-item h2 {
                font-size: 2.5em;
            }
        }

        /* New styles for the Leal 360 section */
        .leal-hero-section {
            background-color: #f8f8f4; /* Light background from image */
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .leal-hero-section .container {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        @media (max-width: 768px) {
            .leal-hero-section .container {
                flex-direction: column;
                text-align: center;
            }
        }

        .leal-hero-content {
            flex: 1;
            max-width: 50%;
            text-align: left; /* Keep text left-aligned even on mobile for consistency with original design */
        }

        @media (max-width: 768px) {
            .leal-hero-content {
                max-width: 100%;
            }
        }

        .leal-hero-content .tagline {
            background-color: #333;
            color: #fff;
            display: inline-block;
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 0.9em;
            margin-bottom: 20px;
            font-family: 'Montserrat', sans-serif; /* Using your imported font */
        }

        .leal-hero-content h1 {
            font-size: 3.5em;
            color: #222;
            line-height: 1.1;
            margin-bottom: 20px;
            font-family: 'Amaranth', sans-serif; /* Using your imported font */
            font-weight: 700; /* Assuming bold from visual */
        }

        @media (max-width: 576px) {
            .leal-hero-content h1 {
                font-size: 2.5em;
            }
        }

        .leal-hero-content .description,
        .leal-hero-content .result {
            font-size: 1.1em;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #555;
            font-family: 'Montserrat', sans-serif; /* Using your imported font */
        }

        .leal-hero-content .learn-more {
            display: inline-block;
            color: #007bff; /* Example link color, adjust to your brand's blue */
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
            font-family: 'Montserrat', sans-serif; /* Using your imported font */
        }

        .leal-hero-image {
            flex: 1;
            max-width: 50%;
            position: relative;
        }

        @media (max-width: 768px) {
            .leal-hero-image {
                max-width: 100%;
            }
        }

        .leal-hero-image .dashboard-img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .leal-overlay-buttons {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .leal-button-tag {
            background-color: #000;
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.8em;
            position: absolute;
            white-space: nowrap;
            font-family: 'Montserrat', sans-serif; /* Using your imported font */
            cursor: pointer; /* Indicate it's clickable */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }

        .leal-button-tag:hover {
            background-color: #1a1a1a;
        }

        /* Precise positioning of tags (adjust these values based on your actual dashboard image) */
        .leal-button-tag.objective { top: 8%; left: 8%; }
        .leal-button-tag.offers-bank { top: 8%; left: 36%; }
        .leal-button-tag.ai-engine { top: 8%; left: 66%; }
        .leal-button-tag.maximize-sales { top: 28%; left: 5%; background-color: #FFD700; color: #333; }
        .leal-button-tag.maximize-sales:hover { background-color: #e6c200; } /* Darker yellow on hover */

        /* Additional dashboard elements - these would need specific positioning if included */
        .leal-dashboard-offer-buttons {
            position: absolute;
            top: 40%; /* Adjust */
            left: 55%; /* Adjust */
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .leal-dashboard-offer-buttons span {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.9em;
            color: #333;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            font-family: 'Montserrat', sans-serif;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .leal-dashboard-offer-buttons span:hover {
            transform: translateY(-2px);
        }

        .leal-dashboard-user-card {
            position: absolute;
            top: 40%;
            right: 5%; /* Adjust */
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Montserrat', sans-serif;
        }

        .leal-dashboard-user-card img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .leal-dashboard-user-card .text {
            font-size: 0.9em;
            color: #333;
        }