/* Global Reset */
:root {
    --color-dorado: #d1a251;
    /* Dorado para títulos y acentos */
    --color-dorado-hover: rgb(237, 185, 96);
    /* Dorado más claro para hover */
    --color-acento: #dfdfdf;
    /* Gris azulado para texto/links */
    --color-gris-claro: #d1d1d1;
    /* Texto principal (gris claro) */
    --color-gris-oscuro: #111111;
    /* Gris muy claro para fondos */
    --color-fondo-oscuro: #0000002f;
    /* Negro para fondos principales */
    --color-texto-inverso: #171717;
    --color-blanco: #ffffff;
    --color-negro: #030303;
}

@font-face {
    font-family: 'Felixti';
    /* Dale un nombre fácil de recordar */
    src: url('../fuentes/Felixti.woff2') format('woff2'),
        /* Formato más moderno y comprimido */
        url('../fuentes/Felixti.woff') format('woff'),
        /* Buen soporte */
        url('../fuentes/Felixti.ttf') format('truetype');
    font-weight: normal;
    /* Define el peso si la fuente es regular */
    font-style: normal;
    /* Define el estilo (normal, italic, etc.) */
}

.tajawal-extralight {
    font-family: "Tajawal", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.tajawal-light {
    font-family: "Tajawal", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.tajawal-regular {
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.tajawal-medium {
    font-family: "Tajawal", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.tajawal-bold {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.tajawal-extrabold {
    font-family: "Tajawal", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.tajawal-black {
    font-family: "Tajawal", sans-serif;
    font-weight: 900;
    font-style: normal;
}


* {
    font-family: 'Tajawal', sans-serif;
    box-sizing: border-box;
    margin: 0;
}


body {
    font-size: 25px;
    text-align: center;
    color: var(--color-gris-claro);
    margin-top: 80px;
    margin-left: 0;
    margin-right: 0;
    background-color: var(--color-fondo-oscuro);

    background-image: url("../imagenes/fondonegro.png");
    background-size: cover;
    /* Hace que la imagen cubra todo el fondo */
    background-repeat: no-repeat;
    /* No repite la imagen */
    background-attachment: fixed;
    /* Fija la imagen de fondo mientras se desplaza el contenido */
    background-position: center center;
    /* Centra la imagen */
}



h1 {

    font-weight: bold;
    color: var(--color-dorado);
    margin: 1%;
    font-size: 40px;

}

h2 {
    font-family: "Felixti", sans-serif;
    font-weight: 400;
    font-size: 55px;
    color: var(--color-dorado);
    margin: 1vw 0 1vw 0;
    /* filter: drop-shadow(1px 1px 3px rgb(93, 82, 55)); */
}

h3 {
    text-shadow: 1px 1px 1px var(--color-fondo-oscuro);
}


.titulo-principal {
    width: 100%;
    padding: 1vw 10vw 4vw 10vw;
}

.titulo-principal svg {
    width: 100%;
    height: auto;

    vertical-align: middle;
    color: var(--color-dorado);
    fill: #d1a251;
}

header {}

header nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: var(--color-gris-oscuro);
    height: 85px;
    padding: 5px 1%;
    justify-content: flex-end;
    align-items: center;
    /*  box-shadow: 2px 2px 2px 1px rgba(85, 85, 85, 0.2); */
    /*transition: all 1s ease-out 0s;*/
    z-index: 1;


}

header .logo {
    cursor: pointer;
    margin-right: auto;
    padding: 10px;

}

header .logo img {
    height: 50px;
    /*     transform-origin: left center; */
    width: auto;
    transition: all 0.5s;
    filter: invert(85%);
    display: block;
    margin: 0 auto;
}




header .logo img:hover {
    transform: scale(1.2);
}

header .nav-links {

    list-style: none;
}

header .nav-links li {

    display: inline-block;
    padding: 0 0px;
}

header .nav-links li:hover,
.overlay a:hover {}

header .nav-links a {
    font-size: 1.2rem;

    padding: 10px;

    border-radius: 0%;
    margin: 1px;
    /* color: rgba(0, 0, 0, 0) */
}

header .nav-links a:hover {}

/*
header .nav-links  .normal{
    color: rgb(174, 19, 19);  
}*/
.estilo-principal {
    color: var(--color-acento);
    /* background-color: #EFEFEF;*/
    /*   box-shadow: inset 0 0 0 2px rgb(255, 255, 255);*/
}

.estilo-principal:hover {

    background-color: var(--color-dorado);
    color: var(--color-texto-inverso);


}

.estilo-secundario {
    /*  background-color:#E11C25 ;*/
    color: var(--color-acento);
    box-shadow: inset 0 0 0 2px transparent;
}

.estilo-secundario:hover {
    background-color: var(--color-gris-oscuro);
    color: var(--color-texto-inverso);
    box-shadow: inset 0 0 0 2px var(--color-blanco);
}

.estilo-terciario {
    /*  background-color:#0E2141 ;*/
    color: var(--color-acento);
}

.estilo-terciario:hover {
    background-color: var(--color-gris-claro);
    color: var(--color-texto-inverso);
}

.normal {

    color: var(--color-gris-claro);
}

.normal:hover {
    color: var(--color-dorado);
}

.menu-hamburguesa {

    display: none;
}


header button {

    font-size: 1.3rem;
    font-weight: 500;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    margin-left: 20px;
    color: #a8a8a8;


}

header .btn button {

    padding: 7px 22px;
    background-color: var(--color-dorado);
    color: var(--color-texto-inverso);

}


header .btn button:hover {

    color: rgb(19, 20, 20);
    background-color: var(--color-dorado-hover);
    transform: scale(1.1);

}



header .menu-hamburguesa {}

header .menu-hamburguesa button {

    background-color: var(--color-gris-oscuro);
    padding: 0;
    margin: 10px;
    height: 40px;


}

header .menu-hamburguesa button:hover {
    transform: scale(1.1);

}


header .menu-hamburguesa button img {
    height: 40px;
    filter: grayscale(100%) brightness(140%);
}





/* Start  styling the page */

.lienzo {
    width: 100%;
    height: 100%;

    color: var(--color-texto-secundario);

    opacity: 0.95;


    /* display:flex;*/

}

p {
    color: var(--color-gris-claro);
    padding: 5px;
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
}



.color-negro {
    /* Esta sección ahora también tendrá fondo oscuro para consistencia */
    background-color: rgba(0, 0, 0, 0.779);
    color: var(--color-gris-claro);
}

.color-dorado {
    background-color: var(--color-dorado);
    color: var(--color-texto-inverso);
}

.color-texto-dorado {
    color: var(--color-dorado);
}

.color-texto-negro {
    color: var(--color-texto-inverso);
}

.color-blanco {
    /*   background-color:#E11C25;
    color: var(--color-texto-inverso); */
    background-color: var(--color-gris-claro);
    color: var(--color-texto-inverso);
}

.color-background-oscuro {
    background-color: var(--color-fondo-oscuro);
    color: var(--color-gris-claro);
}

.contenedor-principal {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;

    color: var(--color-texto-secundario);
    margin: 50px auto;
    /*  padding: 2%; */



}



.contenedor-blanco {


    height: auto;
    background-color: var(--color-fondo-oscuro);
    color: var(--color-gris-claro);
    /*  margin: 20px auto;*/
    padding: 4vw 12vw 3vw 12vw;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;

}


.contenedor-imagenesdetitulos {
    width: 100%;
    height: fit-content;
    display: flex;
    /* align-items: center;*/
    justify-content: center;


}

.contenedor-imagenesdetitulos img {
    width: 100%;
    height: auto;
    margin-bottom: 1vw;
}

.contenedor-estilo-secundario {

    width: 100%;
    height: fit-content;
    /* Filtro aplicado a imagen con url */
    background-color: #1b1b1b39;
    background-image: url("../imagenes/estudio7.png");

    background-position: top center;
    position: relative;
    background-size: cover;
    color: var(--color-texto-secundario);
    /*  margin: 20px auto;*/
    padding: 2vw 20px 20px 20px;
    display: flex;
    flex-direction: column;
    transition: background-size 1.5s ease-in-out;

}



.overlay-areas-practica {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 0;

}

.overlay-areas-practica.visible {
    opacity: 1;
    visibility: visible;

}

.contenedor-estilo-secundario .contenedor-imagenesdetitulos {

    padding: 10px;
}



.contenedor-estilo-principal {

    width: 100%;
    height: fit-content;

    color: var(--color-texto-secundario);
    /*  margin: 20px auto;*/
    padding: 20px 20px 30px;
    display: flex;
    flex-direction: column;

}


.contenedor-estilo-terciario {

    width: 100%;
    height: fit-content;

    color: var(--color-texto-secundario);
    /*  margin: 20px auto;*/
    padding: 20px 20px 0px 20px;
    display: flex;
    flex-direction: column;

}

.contenedor-modular {
    width: 100%;
    flex-grow: 1;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 50px;
    padding: 1vw 5vw 1vw 5vw;
    z-index: 1;


    display: flex;
    flex-direction: column;
}


h3 {
    margin-top: 3vw;
}

.contenedor-contacto {
    height: auto;
    background-color: var(--color-gris-oscuro);
    color: var(--color-texto-inverso);
    /*  margin: 20px auto;*/
    padding: 2%;
    /* border-top: 1px groove #b8b8b8;*/
    object-fit: cover;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;


}



.datosdecontacto {
    padding: 30px 2%;
    border-top: 1px groove #b8b8b8;


}

.datosdecontacto p {
    text-align: center;
    font-size: 18px;
    padding: 2%;
    margin: 2%;

}



.redessociales {
    padding: 2%;
}

.logosredes img {
    width: 50px;
    margin: 25px;
    transition: all ease-in-out 0.2s;
    filter: brightness(70%) grayscale(99%);
}

.logosredes img:hover {
    filter: brightness(0.9);
}

/* ALINEACION TEXTO */


footer {
    background: var(--color-fondo-oscuro);
    color: var(--color-texto-inverso);
    border-top: 4px solid var(--color-dorado);

}

footer .contenedor-pie p {
    padding: 25px 0;
    width: 85%;

    margin: auto;
    font-size: small;

}

.pie {
    text-align: center;
    color: var(--color-gris-claro);
}


.texto-web {
    /*     color: #EFEFEF;

    background-color: transparent;

    border: 2px solid #FFFFFF;
  
    padding: 10px 20px;
   
    display: inline-block;

    font-size: 16px;
   
    font-family: 'Allerta', sans-serif;
   
    text-align: center; */


    text-decoration: none;
    /* Eliminar subrayado del enlace */
}

.servicios-ocultos {
    max-height: 0;
    overflow: hidden;
    transform: translateY(-20px);
    opacity: 0;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.servicios-visibles {
    max-height: 1000px;
    /* Un valor suficientemente grande para mostrar todo el contenido */
    opacity: 1;
    transform: translateY(0);
}

.ver-mas-container {

    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 35px; */
}

.btn-ver-mas {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all ease-in-out 0.2s;
    text-decoration: none;

}



.arrow-indicator {
    background-color: rgba(255, 255, 255, 0);
    font-size: 24px;
    margin-top: 10px;
    animation: 3s fade-and-move 2s infinite;
    transition: transform 1.4s ease-in-out;
}

.arrow-hidden {

    opacity: 0;
    animation: none;
}

.arrow-indicator.up {
    transform: rotate(180deg);
    animation: none;
    /* Detenemos la animación de rebote cuando apunta hacia arriba */
}

@keyframes fade-and-move {
    0% {
        opacity: 1;
        transform: translateY(-10px);
    }

    50% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

.btn-ver-mas:hover {
    /* background-color: rgb(6, 22, 47); */
    transform: scale(1.1);
    transition: all ease-in-out 0.2s;

}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enlace-web {
    display: block;
    transition: all ease-in-out 0.2s;
}

.enlace-web:hover {
    transform: scale(1.1);
    background-color: var(--color-dorado);
}


.emails p {

    font-size: 25px;
    font-weight: 500;

}


/* Cambios en el por encima de los 800px */
@media screen and (min-width:800px) {


    .contenedor-principal {
        display: flex;
    }

    .contenedor-modular {
        width: 100%;
    }

    .contenedor-contacto {
        font-size: 18px;
    }

    h2 {
        font-family: "Felixti", sans-serif;
        font-weight: 400;
        font-size: 4vw;
        color: var(--color-dorado);
    }

    .emails {
        width: 50vw;
        margin: auto;
    }

    .emails p {

        font-size: 20px;
        font-weight: 500;

    }


}

/* Inicio barra de navegacion Nav*/
/* Cambios en el por debajo de los 800px */
@media screen and (max-width:800px) {
    body {

        font-size: 22px;

    }

    .datosdecontacto p {

        font-size: 12px;


    }

    .nav-links,
    .btn {
        display: none;
    }

    .menu-hamburguesa {
        display: inherit;
    }

    .contenedor-principal {
        display: block;

    }

    .contenedor-modular {
        width: 100%;
    }

    .contenedor-contacto {
        font-size: 12px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-family: "Felixti", sans-serif;
        font-weight: 400;
        font-size: 5vw;
        color: var(--color-dorado);
    }

    .contenedor-imagenesdetitulos {
        width: 100%;
        height: fit-content;
        display: flex;
        /* align-items: center;*/
        justify-content: center;


    }

    .contenedor-imagenesdetitulos img {
        width: 100%;
        height: auto;
        margin-bottom: 1vw;
    }

    .contenedor-estilo-secundario {
        padding: 1vw 20px 20px 20px;
        background-position: top center;
        background-size: cover;
        transition: background-size 1.5s ease-in-out;


    }



    .contenedor-estilo-principal {

        padding: 20px 20px 35px;
    }


    .contenedor-estilo-terciario {

        padding: 20px 20px 10px 20px;

    }



    .logosredes img {
        width: 40px;
        margin: 15px;
    }

    .titulo-principal {
        padding: 8vw 2vw 8vw 2vw;
    }



    .emails p {

        font-size: 15px;
        font-weight: 500;

    }

}


/* Cambios por debajo de los 500px */
@media screen and (max-width:500px) {
    header nav {
        height: 60px;
    }

    header .logo img {
        height: 40px;
        width: auto;
    }

    header .menu-hamburguesa button {
        height: 30px;
    }

    header .menu-hamburguesa button img {
        height: 30px;
    }

    .titulo-principal {
        padding: 5vw 1vw 10vw 1vw;
    }

    body {

        font-size: 20px;
    }



    .datosdecontacto p {
        text-align: center;
        /*  text-align: left; */
        font-size: 17px;

    }


    .logosredes img {
        width: 40px;
        margin: 5vw 3vw;

    }

    .emails {


        margin: 3vw auto;
        width: 100%;

    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-family: "Felixti", sans-serif;
        font-weight: 400;
        font-size: 30px;
        color: var(--color-dorado);
    }

    .contenedor-imagenesdetitulos {
        width: 100%;
        height: fit-content;
        display: flex;
        /* align-items: center;*/
        justify-content: center;

    }

    .contenedor-imagenesdetitulos img {
        width: 95%;
        height: auto;
        margin-bottom: 1vw;
    }


    .contenedor-estilo-secundario {
        padding: 1vw 20px 20px 20px;
        background-position: top center;
        background-size: cover;
        background-image: url("../imagenes/estudio-vertical.png");
        transition: background-size 1.5s ease-in-out;




    }



}


/* Cambios por encima de los 500px */
@media screen and (min-width:500px) {


    .emails {

        width: 60vw;
        margin: 3vw auto;
    }


}

header a {
    text-decoration: none;
    margin: 0;
}

header .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: var(--color-gris-oscuro);
    overflow: hidden;
    transition: all 0.3s ease 0s;
}

header .overlay .overlay-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 35px;


}

header .overlay a {
    padding: 15px;
    font-size: 36px;
    display: block;
    transition: all 0.3s ease 0s;
    font-weight: 700;
    width: 100%;
    white-space: nowrap;

}

header .overlay a:hover,
header .overlay a:focus {

    transform: scale(1.1);
}

header .overlay .close {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 65px;
    width: auto;



}

@media screen and(max-height:450px) {

    header .overlay a {
        font-size: 20px;
    }

    .header .overlay .close {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/* Fin barra de navegacion Nav*/

.animacion-presentacion {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-in-out, transform 1s ease-in-out;
}

.animacion-presentacion.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Clase de utilidad para SEO y Accesibilidad (Oculta visualmente pero mantiene el texto para Google) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}