html, body{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", serif;
}


:root{
    --primary-color: #9A173A;
    --secundary-color: #EE4561;

    --red-900: #841738;
    --red-700: #B8183E;
    --red-600: #DA244B;
    --red-400: #F67687;
    --red-300: #FAA7B1;
    --red-200: #FAA7B1;
    --red-100: #FCCFD4;
    --red-50: #FFF1F2;

    --white: #FAFAFA;
    --black: #390514;
    --light-grey: #e6e6e6;
    --grey: #a29092;
    --grey-dark: #786a6b;

    --success-color: #63EAB4;
    --warning-color: #fcf3a4;
    --danger-color: #FF2945;

    --shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 
    0px 1px 3px rgba(0, 0, 0, 0.06);
}

html, body{
    overflow-x: hidden;
    overflow-y: scroll;
}

.bakcground-color{
    background-color: #ffffff;
}

.primary-color{
    background-color: var(--primary-color);
}

.primary-color-text{
    color: var(--primary-color);
}

.secondary-color{
    background-color: #EE4561;
}

.secondary-color-text{
    color: #EE4561;
}

.red-900{
    background-color:#841738
};

.red-900-text{
   color:#841738
};

.red-700{
    background-color:#B8183E
};

.red-700-text{
    color:#B8183E
};

.red-600{
    background-color:#DA244B;
}

.red-600-text{
    color:#DA244B;
}

.red-400{
    background-color:#F67687;
}

.red-400-text{
   color:#F67687;
}

.red-300{
    background-color:#FAA7B1;
}

.red-300-text{
    color:#FAA7B1;
}

.red-200{
    background-color:#FAA7B1;
}

.red-200-text{
    color:#FAA7B1;
}

.red-100{
    background-color:#FCCFD4;
}

.red-100-text{
    color:#FCCFD4;
}

.red-50{
    background-color:#FFF1F2;
}

.red-50-text{
    color:#FFF1F2;
}

.white{
    background-color: var(--white);
}

.white-text{
    color: var(--white);
}

.black{
    background-color:#390514;
}

.black-text{
    color:#390514;
}

.light-grey{
    background-color:#c6c1c2;
}

.light-grey-text{
    color:#c6c1c2;
}

.grey{
    background-color:#a29092;
}

.grey-text{
    color:#a29092;
}

.dark-grey{
    background-color:#786a6b;
}

.dark-grey-text{
    color:#786a6b;
}

.warning{
    background-color: var(--warning-color);
}

.warning-text{
    color: var(--warning-color);
}

.warning-complement-text{
    color: #ad9225;
}

.success{
    background-color: #63EAB4;
}

.success-complement-text{
    color: #419976;
}

.danger{
    background-color: var(--danger-color);
}

.danger-text{
    background-color: var(--danger-color);
}

.extra-large-text{
    font-size: 3.5rem;
}

.title-text{
    font-size: 2.5rem;
    font-weight: 700;
}

.subtitle-text{
    font-size: 2rem;
    font-weight: 600;
}

.subtitle-text-secondary-text{
    font-size: 1.75rem;
    font-weight: 600;
}

.title-section-text{
    font-size: 1.5rem;
    font-weight: 500;
}

.paragraph-text{
    font-size: 1rem;
    font-weight: 400;
}

.paragraph-light-text{
    font-size: 1rem;
    font-weight: 300;
}

.paragraph-semibold-text{
    font-size: 1rem;
    font-weight: 500;
}

.paragraph-bold-text{
    font-size: 1rem;
    font-weight: 700;
}

.link-text{
    font-size: 1rem;
    font-weight: 500;
    color: var(--red-600);
    text-decoration: none;
}

.link-text:hover{
    color: rgb(149, 1, 1);
    text-decoration: none;
}

.medium-text{
    font-size: 1.25rem;
    font-weight: 500;
}

.small-text{
    font-size: 0.875rem;
    font-weight: 400;
}

.underline-text{
    text-decoration: underline;
}

/* CLASES DE UTILIDAD*/

h1, h2, h3, h4, p, a{
    margin:0;
    text-decoration: none;
}

.full-width{
    width: 100%;
}

.width-50{
    width: 50%;
}

.width-75{
    width: 75%;
}

.full-height{
    height: 100dvh;
}

.flex{
    display: flex;
} 

.justify-center{
    justify-content: center;
}

.justify-end{
    justify-content: end;
}

.align-center{
    align-items: center;
}

.row{
    flex-direction: row;
}

.column{
    flex-direction: column;
}

.align-end{
    align-items: end;
}

.no-margin{
    margin: 0;
}

.margin-top-1x{
    margin-top: 1rem;
}

.margin-top-2x{
    margin-top: 2rem;
}

.margin-top-3x{
    margin-top: 3rem;
}

.margin-right-1x{
    margin-right: 1rem;
}

.margin-left-1x{
    margin-left: 1rem;
}

.margin-left-2x{
    margin-left: 2rem;
}

.margin-left-3x{
    margin-left: 3rem;
}

.margin-bottom-1x{
    margin-bottom: 1rem;
}

.padding-bottom-1x{
    padding-top: 1rem;
}

.large-padding{
    padding: 2rem;
}

.bold-text{
    font-weight: bold;
}

.ligth-text{
    font-weight: lighter;
}

.text-center{
    text-align: center;
}

.hidden{
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s
}

.gap-20{
    gap: 20px;
}

/* COMPONENTES */


nav {
    width: 100%;
    z-index: 1000; /* Asegura que la navegación esté por encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    /* Transición suave para los cambios */
}

#lp-navigation{
    position: sticky;
    padding: 20px 25px;
    background-color: var(--white);
    margin: 0 auto;
    width: 100%;
    text-align: center;
    top: 0;
}


#lp-navigation img{
    width: 85px;
    height: 85px;
}

#sticky-navigation{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
    background-color: var(--white);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#sticky-navigation img{
    width: 85px;
    height: 85px;
}

#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 3rem 3rem;
    min-height: max-content;
    margin-top: 3rem;
}

#hero-content{
    width: 100%;
}

#hero-image{
    width: 100%;
    text-align: center;
}

#hero-image img{
    height: 550px;
}

/* About professional section*/
#about-professionals, #about-patients, #why-rt, #suscription-plans-container, #suscription-plans, #ready-to-connect, #terms-and-conditions{
    padding: 3rem 2rem;
    margin-top: 1.5rem;
    margin: 0;
    min-height: max-content;
}

#about-professionals article, #about-patients article{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    margin-top: 7rem;
    flex-wrap: wrap;
    gap: 20px;
}

#about-professionals .article-reverse, #about-patients .article-reverse{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 7rem;
    flex-direction: column;
}

#content-article{
    width: 100%;
}

#image-article{
    width: 100%;
    display: flex;
}

#about-professionals article div img, #about-patients article div img{
    height: 280px;
    margin: 0 auto;
}
/* END -> about professionals section */

/* why-section */

ul{
    padding: 0;
}


/* fin why-section */

/* ready-to-connect */

#ready-to-connect{

}

/* fin ready-to-connect */

#footer{
    background-color: var(--red-600);
}

#footer-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
}

#footer-container div{

    margin-top: 1.5rem;
}

#footer-container div img{
    width: 50px;
}

#footer-container div ul li{
    list-style: none;
}

#sign-gt{
    padding: 1rem;
}

.footer-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.primary-button-lp{
    display: inline-block;
    background-color: var(--red-600);
    border: 1px solid var(--red-100);
    font-size: 1rem;
    font-weight: bold;
    color: var(--white);
    border-radius: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 15px 20px;
    min-width: 180px;
    max-width: 180px;
    transition: all 0.5s ease-in-out;
}

.primary-button-lp:hover, .secondary-button-lp:hover{
    background-color: var(--red-900);
    border: 1px solid var(--red-100);
    color: var(--white);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.secondary-button-lp{
    display: inline-block;
    background-color: #fff;
    border: 1px solid var(--red-600);
    font-size: 1rem;
    font-weight: bold;
    color: var(--red-600);
    padding: 15px 20px;
    border-radius: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 180px;
    max-width: 180px;
    transition: all 0.5s ease-in-out;
}

.mi-lista{
    list-style: none;
    padding: 0;
    margin: 0;
}

.mi-lista li{
    position: relative;
    padding-left: 30px; /* Ajusta este valor para dar espacio al checkmark */
    margin-bottom: 12px;
    font-size: 1.05em;
    color: #555;
    line-height: 1.4;
}

.mi-lista li::before{
    content: ''; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-color: #F67687; /* El color rojo que quieres para el círculo */
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

[data-controller="text-rotator"] p {
    transition: opacity 0.5s ease-in-out;
}

.why-articles-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
}

.why-articles-container article{
    flex: 1 1 calc(50% - 15px);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    min-width: 280px;
    padding: 25px;
}


@media (min-width: 1200px) {

    .primary-button-lp, .secondary-button-lp{
        min-width: 250px;
        max-width: 250px;
    }

    /* lp-navigation */



    #lp-navigation{
        position: fixed;
        padding: 20px 25px;
        background-color: var(--white);
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    #lp-navigation img{
        width: 85px;
        height: 85px;
    }

    #sticky-navigation{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 15px;
        background-color: var(--white);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #sticky-navigation img{
        width: 85px;
        height: 85px;
    }

    /* END lp-navigation */


    #hero{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        margin: 0 200px;
    }

    #hero-content{
        padding: 8rem;
        width: 60%;
    }

    #hero-image{
        width: 40%;
    }

    #hero-image img{
        height: 720px;
    }

    /* About professional section*/
    #about-professionals, #about-patients, #why-rt, #suscription-plans, #ready-to-connect, #terms-and-conditions{
        padding: 4rem 8rem;
        margin-top: 1rem;
        margin: 0 200px;
    }

    #suscription-plans-container{
        height: 100dvh;
    }

    #about-professionals article, #about-patients article{
        display: flex;
        justify-content: start;
        align-items: center;
        margin-top: 1.5rem;
        flex-direction: row;
    }

    #about-professionals .article-reverse, #about-patients .article-reverse{
        display: flex;
        justify-content: start;
        align-items: center;
        margin-top: 1.5rem;
        flex-direction: row-reverse;
    }

    #content-article{
        width: 40%;
    }

    #image-article{
        width: 55%;
        display: flex;
    }

    #about-professionals article div img, #about-patients article div img{
        height: 320px;
        margin: 0 auto;
    }
    /* END -> about professionals section */

    /* why-section */

    ul{
        padding: 0;
    }

    /* fin why-section */

    /* ready-to-connect */

    #ready-to-connect{

    }

    /* fin ready-to-connect */

    #footer{
        background-color: var(--red-600);
    }

    #footer-container{
        display: flex;
        justify-content:space-around;
        align-items: flex-start;
        flex-direction: row;
        padding: 1.5rem 4rem;
    }

    #footer-container div{
        margin-right: 2rem;
    }

    #footer-container div ul li{
        margin-top: 0.25rem;
        list-style-type: none;
    }

    #footer-container div img{
        width: 50px;
    }
}