:root {
    --color1: #51a9e4;
    --color2: #ffa600;
    --color3: #d511cb;

    --color1-claro: #b6d5e9;
    --color2-claro:#ffca67;
    --color3-claro: #ff74f8;

    --gris0: #dedede;
    --gris1: #b4b4b4;
    --gris2: #636363;
    --gris3: #363636;
    --gris4: #1f1f1f;

    

    --subtitulos-color: var(--color2);
    --subtitulos-fs: 36px;
    --subtitulos-fw: 300;
    --subtitulos-ls: 1.6px;
    --subtitulos-lh: 1.3em;

    --text-color: var(--gris2);
    --text-big: 26px;
    --text-medium: 16px;
    --text-small: 14px;
    --text-fw: 300;
    --text-ls: 1px;
    --text-lh: 2;

    --citas-fs: 24px;
    
    
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}
body {
    width: 100%;
}
section {
    margin-bottom: 60px;
}
a {
    text-decoration: none;
    color:  #353535;
}
button {
    padding: 18px 25px;
    border: none;
    border-radius: 28px;
    background-color: var(--color1);
    color: white;
    font-size: 16px;
}
button:hover {
    cursor: pointer;
}


.titulos {
    display: inline-block;
    color: var(--color1);
    font-size: var(--titulos-fs);
    font-weight: var(--titulos-fw);
    letter-spacing: var(--titulos-ls);
    line-height: var(--titulos-lh);
    text-align: left;
    margin: 80px 0;
    width: 90%;
}
.subtitulos {
    color: var(--subtitulos-color);
    font-size: var(--subtitulos-fs);
    font-weight: var(--subtitulos-fw);
    letter-spacing: var(--subtitulos-ls);
    line-height: var(--subtitulos-lh);
    text-align: center;
}
.texto {
    color: var(--text-color);
    font-weight: var(--text-fw);
    letter-spacing: var(--text-ls);
    line-height: var(--text-lh);
}

header {
    display: flex;
    width: 100%;
    align-items: center;
}
header nav {
    display: flex;
    margin: auto;
    font-size: 22px;
}
header nav a {
    padding: 0 40px;
}
/* Estilo de los elementos dentro del dropdown */
header nav .secondary .dropdown a, header nav .yoga .dropdown2 a {
    display: block;
    margin: 0;
    padding: 10px;
    color: white;
    text-decoration: none;
    background-color: var(--color1-claro);
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}
header nav .secondary .dropdown a:hover, header nav .yoga .dropdown2 a:hover {
    background-color: var(--color2-claro);
}
header nav .yoga .dropdown2 {
    display: none;
}
header nav .yoga:hover > .dropdown2 {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    background-color: var(--color1-claro);
    color: var(--gris2);
}

.dropdown2 a {
    color: black;
    background-color: #ffa600;
}
header .logo {
    width: 86px;
    height: 86px;
    margin-left: 90px;
    margin-right: auto;
}
header .inst-a {
    margin-right: 50px;
    margin-left: auto;
}
header .instagramButton img {
    width: 13px;
    height: 13px;
    filter: invert(1);
}
.secondary {
    display: none;
    position: relative;
    top: 50%;
    left: 38%;
}
.secondary input {
    display: none;
}
.open-menu {
    font-size: 52px;
    color: var(--color3);
}
.open-menu:hover {
    cursor: pointer;
}
header .secondary #check:checked ~ .dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    z-index: 100;
    background-color: var(--color1-claro);
    color: var(--gris2);
}
.dropdown a {
    margin-top: 9px;
}
.dropdown {
    display: none;
}

/* PSICONUTRICION */
.psiconutricion {
    width: 82%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.separador-texto {
    width: 100%;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 3px;
    text-align: center;
    color: var(--color1-claro);
    font-size: var(--citas-fs);
    font-weight: var(--citas-fw);
    letter-spacing: var(--citas-ls);
    line-height: var(--citas-lh);
    border: 3px solid var(--color1);
}
.tresTitulos {
    text-align: left;
    position: relative;
    justify-content: center;
    align-items: center;
}
.tresTitulos h4, .tresTitulos h2, .tresTitulos p {
    margin-bottom: 15px;
}
.tresTitulos h4 {
    font-size: var(--text-medium);
    color: var(--gris2);
    font-weight: 700;
}
.tresTitulos h2 {
    text-align: left;
    margin-top: 0;
}
.tresTitulos p {
    width: 94%;
    color: var(--gris1);
    font-size: 24px;
    font-weight: var(--subtitulos-fw);
    letter-spacing: var(--subtitulos-ls);
    line-height: var(--subtitulos-lh);
}
.psiconutricion .tresTitulos div {
    height: 1px;
    width: 60%;
    margin: 25px auto;
    border: none;
    background-color: var(--color3);
    transform: scaleY(0.85);
}
.imagenTexto {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    margin: 30px 0;
}
.imagenTexto img {
    margin-right: auto;
    width: 50%;
}
.imagenTexto .texto {
    margin-left: 50px;
    width: 50%;
    line-height: 2;
}
.titulo-seccion {
    text-align: left;
    margin-bottom: 30px;
    color: var(--gris1);
    font-size: 30px;
    font-weight: var(--subtitulos-fw);
    letter-spacing: var(--subtitulos-ls);
    line-height: var(--subtitulos-lh);
}
.imagenTexto .texto p, .sobre-mes-millor-page ul li p {
    margin-bottom: 15px;
    text-align: left;
    color: var(--text-color);
    font-size: var(--text-small);
}
.imagenTexto .texto .justificado {
    text-align: justify;
}
.tresFotos {
    display: flex;              /* Utiliza Flexbox para alinear las imágenes horizontalmente */
    justify-content: space-between;  /* Espacia uniformemente entre las imágenes */
    gap: 15px;
    width: 100%;                /* El contenedor ocupa el 100% del ancho */
    box-sizing: border-box;      /* Asegura que el padding y el borde se incluyan en el ancho */
    margin: 60px 0 40px 0;
}
.tresFotos img {
    width: 30%;
    height: auto;               /* Mantener la proporción de la imagen */
}


/* CLASES DE YOGA */
.clases-de-yoga-page {
    padding: 60px;
}
.clases-de-yoga-page .imagenTexto .texto {
    margin-top: auto;
    margin-bottom: auto;
}
.clases-de-yoga-page .imagenTexto .texto ul li {
    text-align: left;
    margin-bottom: 20px;
}
.clases-de-yoga-page .imagenTexto .texto ul li p {
    display: inline;
    text-align: left;
}
.clases-de-yoga-page .imagenTexto .texto a {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
.clases-de-yoga-page .imagenTexto .texto button {
    text-align: center;
}
.cen { text-align: center; font-size: 60px; }

.horarios { margin-bottom: 150px; }

.horarios .titulo-seccion {
    margin-top: 40px;
    font-size: var(--titulos-fs);
    font-weight: var(--titulos-fw);
    color: var(--gris2);
}
.horarios table {
    min-width: 470px;
    width: 50%;
    height: auto;
    border-collapse: collapse;
}
.horarios th, .horarios td {
    text-align: left;
    padding: 13px;
}
.horarios thead tr th {
    background-color: var(--color1);
}
.horarios th img {
    width: 18px;
    height: 18px;
    filter: invert(1);
}
.bold {
    font-size: 16px;
    font-weight: 700;
    color: var(--gris2);
}
.faq { margin-bottom: 40px; }
.faq .titulo-seccion {
    color: var(--color1-claro);
    font-size: var(--text-big);
    margin: 17px auto 9px auto;
}
.faq .texto {
    line-height: 2;
    color: var(--gris2);
    font-size: var(--text-small);
}
.rombos {
    width: 50%;
    display: flex;
    margin: 50px auto;
}
.rombo {
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    background-color: var(--color2-claro);
    margin: 0 auto;
}



/* SOBRE MES MILLOR */
.sobre-mes-millor-page {
    padding: 60px 120px;
}
.sobre-mes-millor-page ul li {
    list-style: none;
}
.sobre-mes-millor-page ul li p {
    margin: 30px 0;
}
.sobre-mes-millor-page ul li p.titulito {
    margin-top: 60px;
}
.sobre-mes-millor-page ul li ul li {
    list-style: inside;
    margin: 5px 20px;
}
.sobre-mes-millor-page ul li a, .clases-de-yoga-page .faq a {
    color: var(--color2);
    text-decoration: none;
}


/* YOGA PARA EMBARAZADAS */
.yoga-para-embarazadas-page {
    width: 82%;
    margin: 40px auto;
}
.yoga-para-embarazadas-page .noMostrar {
    color: white;
    margin: 0;
    height: 1px;
}
.yoga-para-embarazadas-page h1 { text-align: center; }
.yoga-para-embarazadas-page .titulos span {
    color: var(--color2);
}
.porque-yoga-embarazo h1 {
    width: 80%;
    margin: 0 auto;
}
.yoga-para-embarazadas-page .horarios p {
    width: 45%;
    margin-top: 40px;
}
.yoga-para-embarazadas-page .horarios table {
    width: 35%;
}

/* YOGA POSTNATAL */
.intro-postnatal {
    display: flex;
}
.intro-postnatal h1 {
    width: 50%;
    margin: auto;
    text-align: center;
    font-size: var(--titulos-fs);
    font-weight: var(--titulos-fw);
    letter-spacing: var(--titulos-ls);
    line-height: var(--titulos-lh);
}
.intro-postnatal img {
    width: 50%;
}
.con-tu-bebe {
    margin: 60px auto 60px auto;
    width: 60%;
}
.con-tu-bebe h1 {
    text-align: center;
    font-size: 48px;
}
.con-tu-bebe div {
    margin-bottom: 30px;
}
.yoga-postnatal-page .imagenTexto img {
    width: 50%;
}
.yoga-postnatal-page .imagenTexto {
    margin-bottom: 80px;
}
.yoga-postnatal-page .imagenTexto .texto {
    padding: 30px;
}
.yoga-postnatal-page .imagenTexto .texto p {
    width: 80%;
}
.yoga-postnatal-page .titulo, .yoga-postnatal-page .subtitulos {
    line-height: 1.2;
    letter-spacing: 1;
    width: 65%;
}
.yoga-postnatal-page .titulo {
    font-size: 52px;
    font-weight: 400;

}
.yoga-postnatal-page .info-postnatal {
    width: 45%;
    margin-left: 100px;
}
.yoga-postnatal-page .info-postnatal p {
    padding-left: 80px;
}
.yoga-postnatal-page .info-postnatal .no-button {
    margin-bottom: 140px;
}

/* FOOTER */
footer {
    width: 100%;
    background-color: var(--color1-claro);
    display: flex;
    margin-top: 80px;
}
footer .footer {
    width: 85%;
    margin: 20px auto 0 auto;
    padding: 60px;
    background-color: white;
    display: flex;
}
footer p {
    line-height: 2;
    color: var(--gris1);
    font-size: 16px;
}
.footer-item {
    padding: 0 25px;
}
footer .footer .logo {
    width: 106px;
    height: 106px;
}
.footer-contacto h4 {
    color: var(--gris2);
    margin-bottom: 8px;
}
.contacto-info {
    display: inline-block;
}
.contacto-info p {
    white-space: nowrap;
}
footer .footer .footer-contacto .contacto-info button {
    background-color: var(--color2-claro);
    border-radius: 100%;
    margin-top: 15px;
}

footer .footer .footer-contacto img {
    width: 25px;
    height: 25px;
    filter: invert(1);
}
@media screen and (max-width: 930px) {
    .titulos {
        margin: 30px 0;
        padding: 0;
        width: 100%;
        font-size: 36px;
        text-align: center;
        line-height: var(--titulos-lh);
    }
    .tresTitulos p {
        width: 100%;
    }
    .page {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .tresFotos {
        flex-direction: column;             /* Utiliza Flexbox para alinear las imágenes horizontalmente */
        gap: 30px;
        width: 100%;                /* El contenedor ocupa el 100% del ancho */
        box-sizing: border-box;      /* Asegura que el padding y el borde se incluyan en el ancho */
        margin: 40px 0 50px 0;
    }
    .tresFotos img {
        width: 100%;
        height: auto;               /* Mantener la proporción de la imagen */
    }
    .imagenTexto {
        flex-direction: column;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .imagenTexto img {
        width: 100%;
        margin: 13px auto 32px auto;
        padding: 0;
    }
    
    .imagenTexto .texto {
        width: 95%;
        margin: 13px auto;
        padding: 0;
    }
    .horarios .titulo-seccion {
        width: 80%;
        margin: 11px auto;
    }
    .horarios table {
        min-width: 300px;
        width: 80%;
        height: auto;
        border-collapse: collapse;
        margin: 0 auto;
    }
    button {
        padding: 12px 16px;
        border: none;
        border-radius: 20px;
        background-color: var(--color1);
        color: white;
        font-size: 14px;
    }
    header .logo {
        width: 86px;
        height: 86px;
        margin-left: 40px;
        margin-right: auto;
    }
    .secondary {
        display: block;
    }
    header nav > a, header nav .yoga {
        display: none;
    }
    header .inst-a {
        margin-right: 20px;
        margin-left: auto;
    }
    footer .footer {
        width: 100%;
        margin: 40px auto;
        background-color: white;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .footer-item {
        padding: 20px;
    }
}