@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Black.otf') format('opentype');
    font-weight: 900;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Bold.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-ExtraLight.otf') format('opentype');
    font-weight: 200;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Hairline.otf') format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Heavy.otf') format('opentype');
    font-weight: 800;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Congenial';
    src: url('/font/Congenial\ Medium.ttf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial\ Regular.ttf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-Thin.otf') format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'Congenial';
    src: url('/fonts/Congenial-UltraLight.otf') format('opentype');
    font-weight: 100;
}

/*COLORES*/
:root {
    --regio-tertiary-hot-pink-600: #D33086;
    --regio-blue-1: #045A61;
    --regio-primary-deep-blue: #001A70;
    --regio-midnight-black: #242424;
    --regio-primary-deep-blue-500: #2E46A6;
    --transversal-neutrals-dark-gray: #5C5C5C;
    --Transversal-Neutrals-Light-gray: #8F8F8F;
    --regio-primary-deep-blue-20: #F8F8FC;
    --transversal-neutral-ash: #373737;
    --Transversal-Neutrals-Midnight: #242424;
    --Regio-Primary-Deep-blue-50: #E6E8F4;
}

.max-w-1200px {
    max-width: 1200px;
}


/*TEXTS*/
.text-14px-regio {
    color: var(--Transversal-Neutrals-Midnight, #242424);

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.9px;
    letter-spacing: 0.28px;
}

.text-14px-600-regio {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 17.5px;
}

.text-18px-regio {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.text-12px-regio {
    color: var(--regio-primary-deep-blue-900-p, #373737);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

/*COLORES*/
.color-transversal-neutrals-midnight,
.text-Transversal-Neutrals-Midnight {
    color: var(--Transversal-Neutrals-Midnight);
}

.text-regio-tertiary-hot-pink-600 {
    color: var(--regio-tertiary-hot-pink-600);
}

/*TIPOS*/
body {
    font-family: 'Assistant';
}

.congenial {
    font-family: 'Congenial';
}

.text-xxs {
    font-size: 10px;
    line-height: 13.5px;
}

/* HOVERS */
.btn-blue:hover {
    background: #00165D !important;
    background-color: #00165D !important;
}

.item-navbar:hover {
    text-decoration: underline !important;
    color: #001A70 !important;
}

/*CINTILLO*/
.cintillo-rosa {
    background: #f97b1f;
}

.cintillo-rosa p {
    padding-top: 6px;
}

@media (min-width:640px) {
    .cintillo-rosa p {
        padding-top: 9px;
    }
}

/*NAVBAR*/
.px-25px {
    padding-left: 25px;
    padding-right: 25px;
}

.py-navbar {
    padding-top: 9px;
    padding-bottom: 9px;
}

@media (min-width:640px) {
    .py-navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.logo-regio {
    /* width: 41px; */
    height: 30px;
}

@media (min-width:640px) {
    .logo-regio {
        /* width: 67px; */
        height: 50px;
    }
}

.icono-lupa-mobile {
    width: 16.155px;
    height: 16.155px;
}

.icono-lupa-desktop {
    width: 18px;
    height: 18px;
}

.h-25px {
    height: 25px;
}

.shadow-navbar {
    box-shadow: 0px 4px 9px 0px rgba(230, 232, 244, 0.40);
}

.icon-hamburguesa {
    width: 17px;
    height: 22px;
}

.border-menu-hamburguesa {
    border-bottom: solid 1px #E0E0E0;
}

.text-item-menu-hamburguesa {
    color: var(--Transversal-Neutrals-Ash, #373737);
    font-family: Assistant;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

.text-item-active-menu-hamburguesa {
    color: #001A70;
    font-family: Assistant;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.5px;
}

/* HERO 1 */
.bg-hero-1 {
    background-image: url(../img/Landing-MobileOC.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

@media (min-width:1024px) {

    .bg-hero-1 {
        background-image: none;
    }

    .bg-hero-2-desktop {
        background: url('../img/bg_hero_colores.jpg') center/cover no-repeat, #033a7b;
    }

    .bg-hero-1-desktop {
        background: url('../img/Landing-DeskOC.jpg') center/cover no-repeat, #60276e;
        background-size: contain;
    }
}

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

.border-form1 {
    border-radius: 4px;
    border: 1px solid var(--Transversal-Neutrals-Light-gray, #8F8F8F);
}

.padding-form1 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.disclaimer-form1 {
    margin-top: 15px;
}

.disclaimer-form1 label {
    color: var(--transversal-neutrals-dark-gray);
}

.btn-form1 {
    background-color: var(--regio-primary-deep-blue, #001A70) !important;
    margin-top: 22px;
    font-weight: 400;
}

@media (min-width:1024px) {
    .form-size-desktop {
        max-width: 432px;
        padding-left: 27px;
        padding-right: 27px;
        margin-top: 30px;
        margin-bottom: 30px;
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .form-text-desktop {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }

    .form-labels-desktop {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18.9px;
        letter-spacing: 0.28px;
    }

    .disclaimer-form1 label {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16.2px;
    }
}

.inputs-style {
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .inputs-style {
        font-family: Assistant;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18.9px;
        letter-spacing: 0.28px;
    }
}

/* success */
.text-success-form1 {
    color: var(--Regio-Tertiary-Hot-pink-600, #D33086);
    text-align: center;
    font-family: Congenial;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.cupon-form1-success-container {
    border-radius: 100px;
    border: 1px solid var(--nosotras-secondary-navy-blue-900-s, #001E62);
    background: var(--Nosotras-Secondary-Navy-Blue-20, #F5F6FA);
    padding: 13px 24.09px;

}

.coupon-form1 {
    color: var(--nosotras-secondary-navy-blue-900-s, #001E62);
    font-family: Assistant;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18.8px;
    letter-spacing: 0.32px;
}

.copy-cupon-form1 {
    color: var(--nosotras-secondary-navy-blue-900-s, #001E62);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    /* 16.2px */
    letter-spacing: 0.24px;
    text-decoration-line: underline;
}

.cta-succes-form1 {
    color: var(--Transversal-System-Hyperlink-Regio, #142B85);
    text-align: center;
    font-family: Assistant;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21.7px;
    letter-spacing: 0.28px;
    text-decoration-line: underline;
}

@media (min-width:1024px) {
    .cta-succes-form1 {
        color: var(--Transversal-System-Hyperlink-Regio, #142B85);
        text-align: center;
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.8px;
        letter-spacing: 0.32px;
        text-decoration-line: underline;
    }
}

/*PROMOS DEL DÍA / CATEGORÍAS*/

.mt-promos-del-dia {
    margin-top: 42px;
}

.text-categorias {
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
    color: var(--Transversal-Neutrals-Midnight, #242424);
}

@media (min-width:1024px) {
    .text-categorias {
        font-family: Congenial;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    }
}

.btn-layout-mobile {
    display: flex;
    height: 32px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

@media (min-width:1024px) {
    .btn-layout-mobile {
        display: flex;
        height: 48px;
        padding: 8px 32px;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

.btn-categorias-activo {
    border-radius: 4px;
    border: 1px solid var(--regio-primary-deep-blue, #001A70);
    background: var(--Regio-Primary-Deep-blue-50, #E6E8F4);
}

.btn-categorias-activo span {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .btn-categorias-activo span {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.btn-categorias {
    border-radius: 4px;
    border: 1px solid var(--Regio-Primary-Deep-blue-500, #2E46A6);
}

.btn-categorias span {
    color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .btn-categorias span {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.categorias {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.img-producto-categoria {
    width: 162px;
    height: 162px;
    flex-shrink: 0;
}

.w-162px-text-categoria {
    max-width: 162px;
}

.subtext-categoria {
    color: var(--Regio-Secondary-Azure-700, #2D82BE);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .subtext-categoria {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.text-producto-categoria {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Assistant;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.7px;
    letter-spacing: 0.28px;
}

@media (min-width:1024px) {
    .text-producto-categoria {
        font-family: Assistant;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }
}

.btn-producto-categoria {
    border-radius: 100px;
    background: var(--regio-primary-deep-blue-900-p, #001A70);
}

@media (min-width: 768px) {
    .img-producto-categoria {
        width: 282px;
        height: 282px;
    }
}

.size-categorias {
    max-width: 162px;
}

@media (min-width:1024px) {
    .size-categorias {
        max-width: 282px;
    }
}

/* <!-- TECNOLOGIA GANADORA --> */

.bullet-regio li::marker {
    color: var(--Regio-Primary-Deep-blue-700, #1E3591);
}

.bg-tecnologia-ganadora {
    background: var(--Regio-Primary-Deep-blue-20, #F8F8FC);
}

.subtext-tecnologia-color {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
}

.subtext-tecnologia {
    color: var(--Transversal-Neutrals-Dark-gray, #5C5C5C);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

.subtext-tecnologia-2 {
    color: var(--Transversal-Neutrals-Dark-gray, #5C5C5C);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .subtext-tecnologia {
        font-family: Assistant;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18.9px;
        letter-spacing: 0.28px;
    }

    .subtext-tecnologia-2 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.8px;
        letter-spacing: 0.32px;
        text-decoration-line: underline;
    }
}

.title-tecnologia {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width: 1024px) {
    .title-tecnologia {
        font-family: Congenial;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    }
}

.text-categoria {
    color: var(--Transversal-Neutrals-Ash, #373737);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .text-categoria {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

/* nuevos tooltips */

.bg-producto-tecnologia1 {
    background: url('../img/regio-Just-1-ecomm.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.tooltips-container {
    width: 205px;
    height: 158.072px;
    position: relative;
    /* Agrega posición relativa para .tooltips-container */
}

.tooltip {
    position: absolute;
    /* Cambia de relativo a absoluto */
    display: inline-block;
    background: url('../img/btn_tooltip.png');
    background-size: contain;
    width: 40px;
    height: 40px;
    right: -10px;
    z-index: 2;
    box-shadow: 0px 10px 17px 4px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}

.tooltip .tooltiptext {
    text-align: center;
    position: absolute;
    margin-left: -80px;
    opacity: 0;
    right: 0px;
    transition: opacity 0.3s;
    height: 40px;
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Assistant;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.9px;
    background: #fff;
    border-radius: 100px;
    padding-left: 17px;
    padding-right: 40px;
    padding-top: 12px;
    padding-bottom: 14px;
}

@media (min-width:1024px) {
    .tooltip .tooltiptext {
        height: 48px;
        font-size: 14px;
        letter-spacing: 0.28px;
        padding-top: 14px;
        padding-right: 48px;
    }
}

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.tooltip.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext {
    z-index: 0;
}

/* tooltip2 */

.tooltip-2 {
    position: absolute;
    /* Cambia de relativo a absoluto */
    display: inline-block;
    background: url('../img/btn_tooltip.png');
    background-size: contain;
    width: 40px;
    height: 40px;
    left: -10px;
    top: 45px;
    z-index: 2;
    box-shadow: 0px 10px 17px 4px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}

@media (min-width: 1024px) {
    .tooltip-2 {
        top: 125px;
    }
}

.tooltip-2 .tooltiptext {
    text-align: center;
    position: absolute;
    margin-left: -80px;
    opacity: 0;
    left: 81px;
    transition: opacity 0.3s;
    height: 40px;
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Assistant;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    background: #fff;
    border-radius: 100px;
    padding-right: 17px;
    padding-top: 12px;
    padding-bottom: 14px;
}

@media (min-width:1024px) {
    .tooltip-2 .tooltiptext {
        height: 48px;
        font-size: 14px;
        letter-spacing: 0.28px;
        padding-top: 14px;
    }
}

.tooltip-2 .tooltiptext {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.tooltip-2.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-2 .tooltiptext {
    z-index: 0;
}

/* tooltip3 */

.tooltip-3 {
    position: absolute;
    /* Cambia de relativo a absoluto */
    display: inline-block;
    background: url('../img/btn_tooltip.png');
    background-size: contain;
    width: 40px;
    height: 40px;
    right: -15px;
    bottom: 20px;
    z-index: 2;
    box-shadow: 0px 10px 17px 4px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}

.tooltip-3 .tooltiptext {
    text-align: center;
    position: absolute;
    margin-left: -80px;
    opacity: 0;
    right: 0px;
    transition: opacity 0.3s;
    height: 40px;
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Assistant;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    background: #fff;
    border-radius: 100px;
    padding-left: 17px;
    padding-right: 40px;
    padding-top: 12px;
    padding-bottom: 14px;
}

@media (min-width:1024px) {
    .tooltip-3 .tooltiptext {
        height: 48px;
        font-size: 14px;
        letter-spacing: 0.28px;
        padding-top: 14px;
        padding-right: 48px;
    }
}

.tooltip-3 .tooltiptext {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.tooltip-3.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-3 .tooltiptext {
    z-index: 0;
}

/* controles */

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

.swiper-button-prev {
    right: 200px;
    left: auto;
    width: 40px;
    height: 40px;
    top: 77px;
}

.swiper-button-next {
    right: 160px;
    left: auto;
    width: 40px;
    height: 40px;
    top: 77px;
}

.swiper-container {
    scrollbar-width: thin;
    scrollbar-color: #97A1D1 #fff;
}

/*CARDS STICKERS*/

.cards-stickers-title {
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:768px) {
    .cards-stickers-title {
        font-family: Congenial;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    }
}

.cards-stickers-text {
    color: var(--Transversal-Neutrals-Ash, #373737);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18.6px;
    letter-spacing: 0.24px;
}

@media (min-width:768px) {
    .cards-stickers-text {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.cards-stickers-subtext {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 0.24px;
}

@media (min-width:768px) {
    .cards-stickers-subtext {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.bg-card-stickers-1 {
    background: url(../img/card_generales.png);
    
}

.bg-card-stickers-2 {
    background: url(../img/card_monstruos.png);
}

.bg-card-stickers-3 {
    background: url(../img/card_popo.png);
}

.bg-card-stickers-4 {
    background: url(../img/card_stickers_4.jpg);
}

@media (min-width:1024px) {
    .bg-card-stickers-1:hover .text-card-1 p {
        display: none;
    }

    .bg-card-stickers-1:hover .text-card-1 .btn-card-sticker-desktop {
        display: block;
    }

    .btn-card-sticker-desktop:hover {
        background: #BC2E7E;
    }

    .bgcard-stickers-1:hover {
        background: url(../img/card_generales.png);
    }
    .bg-card-stickers-1::after {
        background: url(../img/card_stickers_1_op.jpg);
    }
}

.btn-card-sticker:hover {
    background: #BC2E7E !important;
}

@media (min-width:1024px) {
    .bg-card-stickers-2:hover .text-card-2 p {
        display: none;
    }

    .bg-card-stickers-2:hover .text-card-2 .btn-card-sticker-desktop {
        display: block;
    }

    .btn-card-sticker-desktop:hover {
        background: #BC2E7E;
    }

    .bgcard-stickers-2:hover {
        background: url(../img/card_monstruos.png);
    }
    .bg-card-stickers-2::after {
        background: url(../img/card_stickers_2_op.jpg);
    }
}

@media (min-width:1024px) {
    .bg-card-stickers-3:hover .text-card-1 p {
        display: none;
    }

    .bg-card-stickers-3:hover .text-card-1 .btn-card-sticker-desktop {
        display: block;
    }

    .btn-card-sticker-desktop:hover {
        background: #BC2E7E;
    }

    .bgcard-stickers-3:hover {
        background: url(../img/card_popo.png);
    }
}

@media (min-width:1024px) {
    .bg-card-stickers-4:hover .text-card-1 p {
        display: none;
    }

    .bg-card-stickers-4:hover .text-card-1 .btn-card-sticker-desktop {
        display: block;
    }

    .btn-card-sticker-desktop:hover {
        background: #BC2E7E;
    }

    .bg-card-stickers-4:hover {
        background: url(../img/card_stickers_4_op.png);
    }
}

.size-card-stickers {
    width: 198px;
    height: 239px;
    background-size: contain;
}

@media (min-width:768px) {
    .size-card-stickers {
        position: relative;
        max-width: 282px;
        width: 100%;
        background-size: cover;
        border-radius: 15px;
        height: 341px;
    }
}

.btn-card-sticker-desktop {
    color: var(--Transversal-Neutrals-White, #FFF);
    text-align: center;
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 0.24px;
    width: 152px;
    height: 37px;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 100px;
    background: var(--Regio-Tertiary-Hot-pink-600, #D33086);
}

.btn-card-sticker {
    color: var(--Transversal-Neutrals-White, #FFF);
    text-align: center;
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 0.24px;
    width: 152px;
    height: 37px;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 100px;
    background: var(--Regio-Tertiary-Hot-pink-600, #D33086);
}

.text-card-1 {
    position: absolute;
    bottom: 25.43px;
    width: 151px;
    height: 48px;
    text-align: center;
    left: 24px;
}

@media (min-width:768px) {
    .text-card-1 {
        width: 221px;
        height: 50px;
        left: 30px;
        bottom: 37px;
    }
}

.text-card-2 {
    position: absolute;
    bottom: 25.43px;
    width: 121px;
    height: 48px;
    text-align: center;
    left: 44px;
}

@media (min-width:768px) {
    .text-card-2 {
        position: absolute;
        bottom: 39px;
        width: 231px;
        height: 50px;
        text-align: center;
        left: 24px;
    }
}

.text-card-1 p,
.text-card-2 p {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
    text-align: center;
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:768px) {

    .text-card-1 p,
    .text-card-2 p {
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.8px;
        letter-spacing: 0.32px;
    }
}

.text-card-1 p span,
.text-card-2 p span {
    background: #fff;
    padding: 0px 2px;
}

@media (max-width:768px) {

    .text-card-1 p span,
    .text-card-2 p span {
        line-height: 1.8;
    }
}

/*PRODUCTO PERFECTO*/
.producto-perfecto-title {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:1024px) {
    .producto-perfecto-title {
        font-family: Congenial;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    }
}

.producto-perfecto-subtext {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
    text-decoration-line: underline;
}

@media (min-width:1024px) {
    .producto-perfecto-subtext {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 155%;
        /* 24.8px */
        letter-spacing: 0.32px;
        text-decoration-line: underline;
    }
}

.producto-perfecto-text-img {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    text-align: center;
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:1024px) {
    .producto-perfecto-text-img {
        font-family: Assistant;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
    }

    .producto-perfecto-img {
        width: 139px;
        height: 139px;
    }

    .pt-71px {
        padding-top: 71px !important;
    }
}

.hover-producto-perfecto > div{
    background: var(--Regio-Primary-Deep-blue-20, #F8F8FC); }

.hover-producto-perfecto > div:hover{
    background: var(--Regio-Primary-Deep-blue-50, #E6E8F4); 
}


/* "2DO HERO" */
.bg-hero2{
    background: url(../img/bg_hero2.jpg);
    background-size: cover;
    background-position: right;
}

@media (min-width:1024px) {
.bg-hero2 {
    background: url(../img/bg_hero2.jpg);
    background-size: cover;
    background-position: center;
}
}


.text-2do-form {
    color: #FFF;
    text-align: center;
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:1024px) {
    .text-2do-form {
        color: var(--Transversal-Neutrals-Dust, #E0E0E0);
        text-align: center;
        font-family: Congenial;
        font-size: 23.1px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }
}

@media (min-width:1024px) {
    .label-2do-form {
        color: var(--Transversal-Neutrals-Dust, #E0E0E0);
        font-family: Assistant;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18.9px;
        letter-spacing: 0.28px;
    }
}

.input-2do-form {
    border-radius: 4px;
    border: 1px solid var(--Transversal-Neutrals-Dust, #E0E0E0);
    padding: 8px 12px;
}

.text-btn-2do-form {
    color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
    font-family: Assistant;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 17.5px;
}

@media (min-width:1024px) {
    .text-btn-2do-form {
        color: var(--regio-primary-deep-blue-900-p, #001A70);
        font-family: Assistant;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 25px;
    }
}

.container {
    display: block;
    position: relative;
    padding-left: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #05559c;
    border: 1px solid #fff;
    border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
    background-color: #05559c;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
    background-color: #05559c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.text-disclaimer {
    display: inline-flex;
    width: 285px;
    color: #e0e0e0;
}

/* TESTIMONIALES */

.testimoniales-container {
    width: 272px;
    height: 333px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 10px 32px 0px #E3ECFC;
    margin-top: 64px;
}

@media (min-width: 768px) {
    .testimoniales-container {
        width: 778px;
        height: 280px;
    }
}


.testimoniales-container-img {
    width: 72px;
    height: 72px;
}

.img-testimoniales {
    border: #6F7DBF solid 3px;
}

.container-text-testimoniales {
    margin-top: 3px;
    width: 232px;
}

@media (min-width:768px) {
    .container-text-testimoniales {
        margin-top: 3px;
        width: 666px;
    }
}

.container-text-testimoniales p {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    text-align: center;
    font-family: Assistant;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:768px) {
    .container-text-testimoniales p {
        font-family: Assistant;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }
}

.text-blue-testimoniales {
    color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
    font-family: Assistant;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:768px) {
    .text-blue-testimoniales {
        color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
        font-family: Assistant;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 125%;
    }
}

@media (min-width) {
    .text-blue-testimoniales {
        color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
        font-family: Assistant;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
    }
}

.container-autor-testimonial {
    margin-top: 34px;
}

.container-autor-testimonial p {
    color: var(--Regio-Primary-Deep-blue-500, #2E46A6);
    text-align: center;
    font-family: Assistant;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.7px;
    letter-spacing: 0.28px;
}

.swiper-pagination-bullet-active {
    background: #97A1D1;
}


/* REGIO TIPS */

.text-regio-tips {
    width: 177px;
}

@media (min-width:768px) {
    .text-regio-tips {
        width: 386px;
    }
}

.text-regio-tips p {
    color: var(--Transversal-Neutrals-Midnight, #242424);
    font-family: Congenial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px;
}

@media (min-width:768px) {
    .text-regio-tips p {
        color: var(--Transversal-Neutrals-Midnight, #242424);
        font-family: Congenial;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
        /* 50px */
    }
}

.subtext-regio-tips a,
.subtext-regio-tips {
    color: var(--regio-primary-deep-blue-900-p, #001A70);
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    letter-spacing: 0.24px;
    text-decoration-line: underline;
}

@media (min-width: 1024px) {

    .subtext-regio-tips a,
    .subtext-regio-tips {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 155%;
        /* 24.8px */
        letter-spacing: 0.32px;
        text-decoration-line: underline;
    }
}

.text-video-protips {
    color: var(--Transversal-Neutrals-Ash, #373737);
    font-family: Assistant;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21.7px;
    letter-spacing: 0.28px;
}

@media (min-width:1024px) {
    .text-video-protips {
        font-size: 16px;
    }
}

/* FOOTER */

.logo-footer {
    width: 54.884px;
    height: auto;
}

@media (min-width:768px) {
    .logo-footer {
        width: 109px;
        height: auto;
    }
}

.menu-footer {
    color: var(--Transversal-Neutrals-Dark-gray, #5C5C5C);
    text-align: center;
    font-family: Assistant;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16.2px;
    letter-spacing: 0.24px;
}

@media (min-width:768px) {
    .menu-footer {
        color: var(--Transversal-Neutrals-Dark-gray, #5C5C5C);
        font-family: Assistant;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 155%;
        letter-spacing: 0.32px;
        text-align: left;
    }
}

.footer-container {
    background: var(--Regio-Primary-Deep-blue-20, #F8F8FC);
}

@media (min-width:768px) {
    .logo-footer-container {
        width: 109px;
        height: auto;
    }
}

@media (min-width:1200px) {
    .slider-grades-descuentos {
        grid-template-columns: 445px 1fr;
    }
}



.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

.modal__overlay {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal__container {
    background-color: white;
    padding: 20px;
    max-width: 792px;
    max-height: 568px;
    height: 100%;
    width: 100%;
    position: relative;
}

.modal__content {
    margin-bottom: 20px;
}

.modal__footer {
    text-align: right;
}

.modal__btn {
    padding: 10px 20px;
    cursor: pointer;
}

.modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
}