/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
*/

body {
    font-family: 'Dongle';
    font-size: 1.2em;
}

@font-face {
    font-family: 'Dongle';
    src: url(/fonts/DONGLE-REGULAR.TTF) format('TrueType');
}

@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/MONTSERRAT-REGULAR.TTF) format('TrueType');
}

/* TOAST/NOTIFICATION ---------------------------------------------------------------------------------------------------------*/
/* Animación para simular desplazamiento del gradiente */
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Base para todos los toast con efecto animado */
.toast-animated {
    background-size: 200% 200%;
    animation: gradient-move 5s ease infinite;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* brillo sutil */
    border: 2px solid transparent;
    color: white;
}

/* Tipos personalizados con degradados animados */
.toast-gradient-success {
    background: linear-gradient(135deg, rgba(25,135,84,0.9), rgba(40,167,69,0.9));
    color: white;
    border: 2px solid rgba(25,135,84,1);
}

.toast-gradient-danger {
    background: linear-gradient(135deg, rgba(220,53,69,0.9), rgba(200,35,51,0.9));
    color: white;
    border: 2px solid rgba(220,53,69,1);
}

.toast-gradient-warning {
    background: linear-gradient(135deg, rgba(255,193,7,0.9), rgba(255,165,0,0.9));
    color: black;
    border: 2px solid rgba(255,193,7,1);
}

.toast-gradient-info {
    background: linear-gradient(135deg, rgba(13,202,240,0.9), rgba(0,123,255,0.9));
    color: white;
    border: 2px solid rgba(13,202,240,1);
}

.toast-gradient-primary {
    background: linear-gradient(135deg, rgba(0,123,255,0.9), rgba(0,105,217,0.9));
    color: white;
    border: 2px solid rgba(0,123,255,1);
}


/* END TOAST/NOTIFICATION -----------------------------------------------------------------------------------------------------*/


/* START Summernote*/

/*Fuentes para editor documentos*/
@font-face {
    font-family: 'EB Garamond';
    src: url('/fonts/EBGaramond-TimesNewRoman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*Fuente default*/
.note-editable {
    font-family: 'Roboto', sans-serif;
}

/* END Summernote */





.fontSmaller {
    /*font-size: smaller !important;*/
    font-size: small !important;
}

.font_Dongle {
    font-family: 'Dongle'
}

.font_Montserrat {
    font-family: 'Montserrat';
}

.cursorHand {
    cursor: pointer;
}

.tooltip_bgPurple {
    --bs-tooltip-bg: #42579C !important;
}

.popover-bgPurple {
    --bs-popover-header-bg: #42579C !important;
    --bs-popover-border-color: #42579C !important;
    --bs-popover-body-color: #42579C !important;
    --bs-popover-header-color: #60A892 !important;
}


.formControlsGray .form-control, .formControlsGray .form-select {
    background-color: rgba(66, 87, 156, 0.1);
}

.align_centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.positionAboslute {
    position: absolute !important;
}

.accordion-button::after {
    filter: brightness(0) invert(1) !important; /*flechas de acordeon blancas*/
}


/* DOC PREVIEW --------------------------------------------------------------------------------------------------------------*/
.docPreview {
    font-size: 1.1em !important;
    font-family: Calibri !important;
}

.docPreview span {
    text-decoration: underline;
}

.fadeText {
    position: relative;
    max-height: calc(150vh); /* Altura visible del texto */
    overflow: hidden;
    line-height: 1.5em;
}

.fadeText::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20em; /* Altura del degradado */
    background: linear-gradient(to bottom, rgba(255,255,255,0), white); /* Cambia blanco por el color de fondo */
}

.watermarkText {
    position: relative;
    padding: 3rem;
    background-color: white;
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'> <text x='0' y='200' font-size='24' fill='rgba(0,0,0,0.20)' transform='rotate(-30 300 200)'>COMPRE PARA TENER ACCESO COMPLETO</text> </svg>"); 
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 600px 400px; /* Controla la densidad del patrón */
}
/* END DOC PREVIEW --------------------------------------------------------------------------------------------------------------*/

/* ANIMATIONS ------------------------------------------------------------------------------------------------------------------ */
.zoom {
    transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(1.2);
}


/*Cristal con z-index corregido *********************************************************** */
.animation-alert-membership-glass {
    background: rgba(40, 167, 69, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.animation-alert-membership-glass::after {
    content: '';
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg, transparent, rgba(40, 167, 69, 0.3), transparent);
    animation: rotate 8s linear infinite;
    z-index: 0; /* Muy importante: poner el efecto detrás */
    pointer-events: none; /* Muy importante: evitar que capture eventos del mouse */
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.glass-content {
    position: relative;
    z-index: 2; /* Por encima del efecto rotatorio */
}

/* Asegurar que los inputs estén por encima */
.glass-content input, .glass-content label, .glass-content .row {
    position: relative;
    z-index: 3;
}
/*END Cristal con z-index corregido *********************************************************** */

/* END ANIMATIONS ----------------------------------------------------------------------------------------------------------------- */

.txtBluePurple {
    color: #42579C !important;
}

.txtGray {
    color: rgb(151, 144, 144) !important;
}

.txtWhite {
    color: white !important;
}

.txtBlack {
    color: black !important;
}

.txtGreen {
    color: #60A892 !important;
}

.bgColorAppGreen, .accordion-button {
    background-color: #60A892 !important;
}

.bgColorAppPurple {
    background-color: #42579C !important;
}

.bgColorGray {
    background-color: rgba(66, 87, 156, 0.1);
}

.bgColorGreenStrong {
    background-color: #198754 !important;
}

.borderGreen {
    border-color: #60A892 !important;
}




/*Scroll bar*/
::-webkit-scrollbar { /* width */
    width: 10px;
}

::-webkit-scrollbar-track { /* Track */
    box-shadow: inset 0 0 5px #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb { /* Handle */
    background: #60A892;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover { /* Handle on hover */
        background: #b2c2bd;
    }
/*END Scroll bar*/



/*Widths*/

.maxWidth_160 {
    max-width: 160px !important;
}

.maxWidth_120 {
    max-width: 120px !important;
}

.minWidth_100 {
    min-width: 100px !important;
}

.minWidth_120 {
    min-width: 120px !important;
}

.minWidth_160 {
    min-width: 160px !important;
}

.minWidth_100percent {
    min-width: 100% !important;
}

.minWidth_90percent {
    min-width: 90% !important;
}
/*END Widths*/







#section_Main {
    clip-path: ellipse(70% 60% at 50% 40%);
    background: url(/img/main.jpg);
    background-position: 60% 60%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.77);
}

#section_Slogan {
    background-color: rgba(66, 87, 156, 0.1);
    height: 350px;
}

#section_AboutUs {
    clip-path: ellipse(80% 50% at 50% 50%);
    background-color: rgba(96, 168, 146, 1); /*#42579C .bgColorAppPurple*/
    height: 800px;
    margin-top: -100px !important;
}


#section_Support {
    background: url(/img/img3.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: inset 3000px 0 0 0 rgba(66, 87, 156, 0.6); 
    height: 1000px;
    background-position: 50% 70%;
    margin-top: -90px !important;
}

#section_Contact {
    clip-path: ellipse(80% 50% at 50% 50%);
    background-color: rgba(66, 87, 156, 1); /*#42579C .bgColorAppPurple*/
    height: 350px;
    margin-top: -150px !important;
}

#section_Footer  {
    margin-top: -40px !important;
}





/* MEDIA QUERIES ######################################################################################################################## */
/*Small devices (phones 768px and down)                                               S   M   A   L   L       ****************************/
@media screen and (max-width: 767px) {
    /*SECTION MAIN*/
    #section_Main_f1 {
        font-size: 3em !important;
        margin-bottom: -20px !important;
    }

    #section_Main_f2 {
        font-size: 1.5em !important;
    }

    #section_Main .form-control {
        width: 70% !important;
    }

    /*SECTION ITEMS*/
    #section_Items .bi {
        font-size: 4rem !important;
    }

    /*SECTION SLOGAN*/

    #section_Slogan {
        height: 250px;
    }

    .font_f1 {
        font-size: 2.7rem !important;
        margin-bottom: -20px !important;
    }

    .font_f2 {
        font-size: 1.3rem !important;
    }

    /*SECTION ABOUTUS*/
    #section_AboutUs_f1 {
        font-size: 3.2rem !important;
    }

    #section_AboutUs .carousel-item .bi {
        font-size: 5rem !important;
    }

    #section_AboutUs .carousel-item h5 {
        font-size: 3rem !important;
    }

    #section_AboutUs .carousel-item p {
        font-size: 0.95rem !important;
    }

    /*SECTION CONTACT*/
    #section_Contact {
        margin-top: -50px !important;
    }
}

/*Medium devices (tablets, 768px and up)                                              M   E   D   I   U   M   ****************************/
@media screen and (min-width: 768px) {
    /*SECTION MAIN*/
    #section_Main_f1 {
        font-size: 4em !important;
        margin-bottom: -50px !important;
    }

    #section_Main_f2 {
        font-size: 2.5em !important;
    }

    #section_Main .form-control {
        width: 30% !important;
    }

    /*SECTION ITEMS*/
    #section_Items .bi {
        font-size: 7rem !important;
    }

    /*SECTION SLOGAN*/
    .font_f1 {
        font-size: 5rem;
        margin-bottom: -30px !important;
    }

    .font_f2 {
        font-size: 2.5rem;
    }

    /*SECTION ABOUTUS*/
    #section_AboutUs_f1 {
        font-size: 5rem !important;
    }

    #section_AboutUs .carousel-item .bi {
        font-size: 9rem !important;
    }

    #section_AboutUs .carousel-item h5 {
        font-size: 5rem !important;
        margin-bottom: -20px !important;
    }

    #section_AboutUs .carousel-item p {
        font-size: 1.3rem !important;
    }
}

/*Large devices (desktops, 992px and up)                                              L   A   R   G   E       ***************************/
@media screen and (min-width: 992px) {
    /*SECTION MAIN*/
    #section_Main_f1 {
        font-size: 6em !important;
    }

    #section_Main_f2 {
        font-size: 3.5em !important;
    }

    /*DOC PREVIEW*/
    .docPreview {
        font-size: 1.1em !important;
    }
}

/*X-Large devices (large desktops, 1200px and up)                                      X  -  L  A  R  G  E    ***************************/
@media screen and (min-width: 1200px) {
    /*SECTION ABOUTUS*/
    #section_AboutUs #carouselStatic .carousel-item p {
        font-size: 1.2rem !important;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media screen and (min-width: 1400px) {
}