/*FUENTES*/
*{
    margin: 0;
    padding: 0;
}
@font-face{
    font-family: 'FuenteTitulos';
    src: url(/fonts/LXGWMarkerGothic-Regular.ttf) format('truetype');
}
@font-face{
    font-family: 'FuenteNormal';
    src: url(/fonts/Quicksand-Bold.ttf) format('truetype'), 
        url(/fonts/Quicksand-Light.ttf) format('truetype'),
        url(/fonts/Quicksand-Medium.ttf) format('truetype'),
        url(/fonts/Quicksand-Regular.ttf) format('truetype');
}
:root {
/*colores principales*/
    --color-azul: #4dc7d6;  
    --color-amarillo: #FDD835; 
    --color-rosa: #FDAAAA;   
    --color-verde: #6ac370;   

/*colores neutros */
    --color-blanco: #ffffff;
    --color-negro: #333333;
    --color-gris-claro: #f0f0f0;
    --color-gris-oscuro: #666666;

/*colores de fondo */
    --color-fondo-footer: #c6f1f3;
    --color-cookies-boton: #007bff;
    --color-modo-oscuro: #121212;
}

main{
    width: 90%;
    margin: 2px 20px 2px 20px;
    align-content: center;
}
h2{
    font-size: 1.8em;
    margin: 20px 1px 20px 1px;
    margin-bottom: 20px;
    padding-bottom: 1px; 
}
h3{
    margin: 10px auto;
}
h2, h3, a{
    font-family:'FuenteTitulos', Arial, Helvetica, sans-serif;
}

/*--linea decoración titulos--*/
.h2, h3{
    display: inline-block; /*ancho del text*/
    border-bottom: 8px solid; /*línea debajo título*/
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.titulo_azul{
    border-color: var(--color-azul); 
}
.titulo_rosa{
    border-color: var(--color-rosa);
}
.titulo_verde{
    border-color: var(--color-verde);
}
.titulo_amarillo{
    border-color: var(--color-amarillo);
}

p, li{
    margin-bottom: 10px;
    font-family:'FuenteNormal', Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    line-height: 1.1;
}
img{
    width: 350px;
}
a{
    text-decoration: none;
}
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
/*HERO*/
.hero_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
}
.hero_content p{
    text-align: justify;
}
.hero span {
    font-size: 1.5em; 
    font-weight: bold;
}
.hero span:hover{
    color: var(--color-azul);
}
.hero_content .hero p:first-child { /*Hola*/
    font-size: 3em; 
    font-weight: bold;
    margin-top: 10px; 
    text-align: center;
}
.hero_content .hero strong {
    color: var(--color-azul); 
    font-weight: bold;
}
h2{
    display: inline-block; /*ancho del text*/
    border-bottom: 8px solid; /*línea debajo título*/
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: var(--color-azul); 
}
/*HOME > HERO > MEDI@Q*/
@media (min-width: 1024px) {
    .hero_content {
        flex-direction: row; /*img-izq, text-der */
        justify-content: center;
        align-items: flex-start; 
        padding: 5px 40px; 
        text-align: left;
        font-size: 1.1em;
    }
.hero_content .hero p:first-child { /*Hola*/
    font-size: 6em; 
    text-align: left;
}
    .hero_content div:first-child { /*div img*/
        flex: 1;
        margin-right: 40px; 
        margin-bottom: 0; 
        display: flex; 
        justify-content: right; 
        align-items: center;
    }
    .hero_content img {
        max-width: 350px;
        margin-bottom: 0; 
    }
    .hero_content .hero { /*div texto*/
        width: 90%;
        margin-right: 50px;
        flex: 1.5; /*texto ocupa + espacio que img*/
    }
    .hero_content p {
        text-align: left; 
        margin-left: -50px;
    }
        .hero_content h6 {
        text-align: left; 
        margin-left: -50px;
    }
}

/*-----------------------------------------------------*/
/*PROYECTOS*/
.proyecto_content_grupo, .form_content_grupo{
    text-align: center;
    margin-top: 20px;
}
.proyecto_content{
    padding: auto 20px;
}
.proyecto_content img{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    border-radius: 10px;
}
.proyecto_content .proyecto_item:nth-child(n+3) {
    display: none;
}

/*HOME PROYECTOS @*/
/*media proyectos*/
@media (min-width: 768px) {  /*movil horizontal/IPAD*/
    .proyecto_content {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-between; 
    }
    .proyecto_item {
        width: calc(50% - 20px); 
        margin-bottom: 20px; 
    }
    /*bloqueo de visualización proyectos*/
    .proyecto_content .proyecto_item:nth-child(n+3) {
        display: block;
    }
    .proyecto_content .proyecto_item:nth-child(n+5) {
        display: none;
    }
}

@media (min-width: 1200px) { /*modo escritorio*/    
    .proyecto_content {
        width: 90%;
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-between; 
        align-items:flex-start;
    }
    .proyecto_item {
        width: calc(33.33% - 20px); 
        margin-bottom: 20px; 
    }
    /*bloqueo de visualización proyectos*/
    .proyecto_content .proyecto_item:nth-child(n+5) {
        display: block;
    }
    .proyecto_content .proyecto_item:nth-child(n+7) {
        display: none;
    }
    .proyecto_content img{
    transition: 0.6s;
    }
    .proyecto_content img:hover{
        transform: scale(1.06);
        transition: 0.6s;
    }
}

/*HOME > PROYECT > BUTTON*/
.proyecto_button a{
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 30px auto 0 auto;
    padding: 5px 25px; 
    text-align: center;
    border: 1px solid var(--color-rosa);
    color: var(--color-blanco);
    background-color: var(--color-rosa);
    cursor: pointer;
    font-size: large;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.proyecto_button a:hover {
    background-color: var(--color-azul); /*color al pasar el ratón*/
    color: var(--color-blanco);
    border-color: var(--color-azul)
}

/*-----------------------------------------------------*/
/*FORMULARIO CONTACTO*/
form {
    max-width: 700px; /*ancho form*/
    margin: 20px auto; /*centra form*/
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /*sombra*/
}
.form-group {
    margin-bottom: 20px; /*espacio entre divs*/
    display: flex;
    flex-direction: column; /*apila vertical*/
    width: 100%;
}
/*FORM > labels*/
.form-group label {
    display: block; /*label ocupa su propia línea*/
    margin-bottom: 8px; /*espacio entre label-input*/
    text-align: left;
    margin-left: 5px;
}
/*FORM > inputs y textarea*/
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea {
    width: calc(100% - 20px); /*100% ancho padre menos padding*/
    padding: 10px;
    border: 1px solid var(--color-gris-claro);
    border-radius: 6px;
}
/*FORM > textarea*/
.form-group textarea {
    min-height: 100px; /*altura mín*/
    resize: vertical; /*redimensiona vertical*/
}
/*FORM > submit*/
.submit-button{    
    display: block; 
    width: 100%; 
    max-width: 280px; 
    margin: 30px auto 0 auto; 
    padding: 5px 25px; 
    text-align: center;
    background-color: var(--color-amarillo);
    color: var(--color-blanco);
    border: none;
    font-size: large;
    border-radius: 10px;
    cursor: pointer;
}

/*EN WEB:*/
.submit-button:hover {
    background-color: var(--color-azul); /*Color + oscuro al pasar el ratón */
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/

/*ABOUT*/
/*ABOUT > ESTUDIOS*/
.estudios_content, .extra_content, .laboral_content, .otros_content{
    padding: 5px 10px; 
    margin-bottom: 2px; 
}

/*estilos ítems*/
.estudio_item h4, .extra_item h4, .laboral_content h4, .otros_content h4{
    font-size: 1.2em;
    margin-bottom: 1px;
}
.estudio_item p,.extra_item p, .laboral_content p, .otros_content p{
    margin-left: 20px;
}
.laboral_content li, .extra_item li{
    list-style: square;
    margin-left: 50px;
}

/*ABOUT @*/
/*media ABOUT*/
@media (min-width: 1024px) { /*SOLO EN NAVEGADOR*/
    .estudios_extra_content, .otros_laboral_content {
        width: 90%;
        display: flex; 
        justify-content: space-between; 
        gap: 5px; /*espacio entre columnas*/
        margin-left: 2px auto;
    }
    .estudios_content, .otros_content{
        text-align: right;
    }
    .estudios_extra_laboral_content{ /*centra el contenido*/
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }
    .estudios_content, .extra_content, .otros_content, .laboral_content{
        flex: 1; /*ambos divs ocupan 1 espacio igual*/
    }
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/

/*PROYECTOS*/
.proyectos_item{ /*bloques*/
    margin: 10px auto;
    padding: 10px 15px;
}
/*titulos*/
.proyectos_item{
    display: flex; 
    flex-wrap: wrap;
    flex-direction: column; 
    align-items: center;
}
.proyectos_item p{
    margin: 20px 20px;
}

@media (min-width: 1024px) { /*SOLO EN NAVEGADOR*/
    .proyectos_content_grupo{ /*centra el contenido*/
        gap: 5px; 
        display: flex; 
        flex-wrap: wrap;
        flex-direction: column; 
        align-content: center; 
        text-align: center;
    }
    .proyectos_content{
        width: 95%;
        display: flex; 
        justify-content: space-between; 
        gap: 5px; 
        margin-left: 2px auto;
    }
    .proyectos_item{
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        align-items: center;
        width: 30%;
        max-height: 500px;
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .proyectos_item p{
        margin: 20px 20px;
    }
    .proyectos_content img{
        border-radius: 10px;
        transition: 0.6s;
    }
    .proyectos_content img:hover{
        transform: scale(1.06);
        transition: 0.6s;
    }
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
/*MENU EN NAVEGADOR*/
.nav_ul{
    display: flex;
    flex-direction: row;
    /*justify-content: flex-end;*/
}
.nav_li{
    padding: 10px 10px;
    margin-left: 5px; /*separación entre li*/
    display: flex;
    align-items: center;
    list-style-type: none;
}
.cabecera{
    width: 90%;
    margin: 1px auto;
    padding: 5px 30px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: relative;
}
.boton-menu{
    display: none;
    width: 95%;
    font-size: 35px;
    text-align: right;
    color: var(--color-azul);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.boton-menu:hover{
    transform: scale(1.1);
}
.menu-principal{
    display: flex;
    gap: 24px;
}
.menu-principal a{
    color: var(--color-azul);
    text-decoration: none;
    font-size: 20px;
}

/*----*/
.menu-principal a:hover{
    color: var(--color-amarillo);
}
.active-link {
    display: inline-block; /*ancho del text*/
    border-bottom: 8px solid; /*línea debajo título*/
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: var(--color-azul); 
}

/*------------*/
@media screen and (max-width: 700px) {
    .boton-menu{
        display: block;
    }
    .menu-principal{
        display: none;
        flex-direction: column;
        background-color: var(--color-blanco);
        position: absolute;
        width: 100%;
        top:100%;
        right: 0;
        left: 0;
        z-index: 2;        
    }
    .menu-principal ul {
        width: 100%;
        display: flex; 
        flex-direction: column; 
    }
    .menu-principal li {
        width: 100%;
        background-color:var(--color-gris-oscuro);
        border-radius: 10px;
        display: flex; 
        flex-direction: column; 
    }
    .menu-principal a{
        width: 90%;
        padding: 10px 10px;
        text-align: center;
    }
    .menu-principal.menu-desplegado{
        display: flex;
        width: 85%;
    }
}
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/*FOOTER*/
.main-footer {
    width: 100%;
    background-color: var(--color-fondo-footer); 
    padding: 20px 0px; 
    text-align: center; 
    font-size: 1em; 
    margin-top: 20px; 
}
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main-footer p {
    margin-bottom: 10px; 
    line-height: 1.6;
}
.social-links {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
}
.social-links img {
    max-width: 35px;
}

/*Media Queries */
@media (min-width: 768px) {
    .main-footer {
        font-size: 1.1em;
    }
    .footer-content {
        max-width: 100%; 
        margin: 0 50px; 
        flex-direction: row;
        justify-content: space-between;
    }
    .social-links {
        gap: 20px; 
    }
}
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/*cookies*/
.cookie-popup{
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    border-radius: 10px;
    display:none;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    padding: 40px 40px;
    margin: 10px auto;
    z-index: 2;
}
.cookie-popup.show{
    display: flex;
}
.cookie-popup button{
    margin-left: 30px;
    background-color: var(--color-negro);
    color: var(--color-blanco);
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
}
.cookie-popup a{
    color: var(--color-cookies-boton);
    text-decoration: underline;
}
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/*Modo claro/oscuro*/
body{
    transition: background-color 0.8s ease, color 0.8s ease;
    justify-items: center;
}
.modo_dia_noche img{
    max-width: 40px;
    cursor: pointer;
}
body.oscuro{
    background-color: var(--color-modo-oscuro);
    color: var(--color-gris-claro);
}
body.oscuro h4{
    color: var(--color-fondo-footer);
}
footer.main-footer p{
    color: var(--color-modo-oscuro);
}