* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*variables globales*/
:root{
    --var-bloque1-background-nav-bar: linear-gradient(90deg, rgba(29,42,53,0.8) 0%, rgba(22,32,37,0.8) 100%);/*color del fondo del navbar*/
    --var-bloque1-color-subtitulos: #D3D3D3; /*color de las letras del nabvar*/
    --var-bloque1-imagen: url(../img/Emiliano\ foto\ de\ perfil.jpeg);/*imagen del bloque 1*/
    --var-bloque1-imagen-contorno-letras: #D3D3D3;/*color del contorno y color de las letras del bloque 1*/
    --var-bloque2-color-texto-titulo: #D3D3D3;
    --var-bloque2-color-texto-bloques: white;
    --var-bloque2-color-texto-informativo: #7e7e7e;
    --var-bloque2-pc-titulo: #D3D3D5;
    --var-bloque2-pc-encabezados: rgb(15, 176, 168);
    --var-bloque2-sub-encabezado: rgb(242, 242, 242);
}


html{
    scroll-behavior: smooth;/*suavisar el scroll*/
    scrollbar-color: #D3D3D3 rgba(22, 32, 37, 0.97); /*escroll colores*/
}

body{
    background: rgb(37,53,68);
    background: linear-gradient(90deg, rgba(37,53,68,1) 0%, rgba(44,62,80,1) 100%);
}

/*fuentes externas de letras*/
.dancing-text{
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.roboto-medium{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.fira-sans-medium {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}
  
/*color del fondo de la barra de navegacion*/
.color-Fondo-Navbar{
    background: var(--var-bloque1-background-nav-bar);
    box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.311);
}

/*Inicio del bloque 1*/
/*tamaño del bloque uno*/
.bloque1{
    width: 100%;
    height: 100dvh;
}

/*color de las rayitas del icono del menu desplegable*/
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/*color de las letras del subtitulo*/
.navbar .navbar-nav .nav-link.active {
    color: var(--var-bloque1-color-subtitulos) !important;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.807);
}

/*imagen del bloque 1*/
.imagen1{
    width: 100%; /*editar valores responsive*/
    height: 550px; /*editar valores responsive*/
    background: var(--var-bloque1-imagen);
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 13%;
    border: var(--var-bloque1-imagen-contorno-letras) solid 5px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/*titulo de la imagen del bloque1*/
.titulo-imagen{
    font-size: 5rem;
    color: var(--var-bloque1-imagen-contorno-letras);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.807);
}
/*Fin del bloque 1*/


/*Inicio del bloque 2*/
/*tamaño del bloque uno*/
.bloque2{
    height: 100dvh;
}

/*letras de titulo movil*/
.color-letra-leyenda{
    color: var(--var-bloque2-color-texto-titulo);
    font-size: 3rem;
    text-transform: uppercase;
}

/*imagen del banner 1 movil*/
.banner1 {
    background-image: url(../img/animacion_educacion/48.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
    height: 60px;
}

/*imagen del banner 2 movil*/
.banner2 {
    background-image: url(../img/banners/experiencia_banner.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
}

/*imagen del banner 3 movil*/
.banner3 {
    background-image: url(../img/banners/habilidades_banner.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
}

/*imagen del banner 4 movil*/
.banner4 {
    background-image: url(../img/banners/framework_banner.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
}

/*imagen del banner 5 movil*/
.banner5 {
    background-image: url(../img/banners/software_banner.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
}

/*imagen del banner 6 movil*/
.banner6 {
    background-image: url(../img/banners/contacto_baner.png) !important;/*imagen del banner*/
    background-size: cover; /* Ajusta el tamaño al botón */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    border: none; /* Opcional: elimina bordes */
    color: var(--var-bloque2-color-texto-bloques) !important;
    text-shadow: 1px 1px 2px black !important;
    font-size: 1.5rem !important;
}

/*texto de los desplegables movil*/
.texto-informativo{
    color: var(--var-bloque2-color-texto-informativo);
    font-size: 1rem;
}

/*texto de subtitulo bloque 2 movil*/
.texto-subtitulo-bloque2{
    font-size: 1rem;
    color: var(--var-bloque2-color-texto-titulo);
    text-align: justify;
}

/*bloque 2 pc*/
.titulo-bloque-2-pc{
    color: var(--var-bloque2-pc-titulo);
    text-transform: uppercase;
    font-size: 4rem;
    letter-spacing: -5px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.749);
}

.subtitulo-bloque-2-pc{
    color: var(--var-bloque2-pc-titulo);
    font-size: 1rem;
    text-align: justify;
}

.line{
    background: var(--var-bloque2-pc-titulo);
    height: 1px;
}

/*encabezado de los bloques*/
.encabezado-bloque2{
    color: var(--var-bloque2-pc-encabezados);
    font-size: 1.5rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.749);
}

/*leyenda de cada segmento del bloque 2*/
.sub-encabezado-bloque2{
    color: var(--var-bloque2-sub-encabezado);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.749);
    font-size: 1.1rem;
}

/*espaciado entre los comentarios*/
.espaciado{
    line-height: 1.5;
}

/*informacion de las descripciones*/
.info-bloque2{
    color: #ababab;
}

/*contenedor de la imagen*/
.contenedor-imagen{
    width: 532px;
    height: 436px;
}

/*imagen de animacion*/

.imagen-animacion{
    width: 100%;
    height: 100%;
    image-rendering: pixelated; /* Prioridad para navegadores modernos */
    image-rendering: crisp-edges; /* Alternativa para otros navegadores */
}
/*fin del bloque 2*/


/*Media querys para visualizacion de diferentes dispositivos*/  
@media screen and (max-height: 700px) and (min-height: 100px) {
    
}

/* Móviles */
@media (max-width: 576px) {

    /*contenedor de la imagen en el movil*/
    .contenedorimagenmovil{
        width: 280px;
        height: 280px;
    }

    .imagen-movil{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 13%;
        border-radius: 50%;
        border: var(--var-bloque1-imagen-contorno-letras) solid 5px;
    }

    /*titulo de la imagen del bloque1*/
    .titulo-imagen{
        font-size: 1.6rem;
    }
  
}

/* Tablets */
@media (min-width: 576px) and (max-width: 768px) {
  
    /*imagen del bloque 1*/
    .imagen1{
        width: 100%; /*editar valores responsive*/
        height: 200px; /*editar valores responsive*/
    }

    /*titulo de la imagen del bloque1*/

    .titulo-imagen{
        font-size: 2rem;
    }

    /*bloque 2*/
    /*contenedor de la imagen*/
    .contenedor-imagen{
        width: 252px;
        height: 156px;
    }

    /*bloque 2 pc*/
    .titulo-bloque-2-pc{              
        font-size: 1.5rem;
        letter-spacing: 0px;
    }

    .subtitulo-bloque-2-pc{
        font-size: 0.6rem;
    }

    /*encabezado de los bloques*/
    .encabezado-bloque2{
        font-size: 0.8rem;
    }

    /*leyenda de cada segmento del bloque 2*/
    .sub-encabezado-bloque2{
        font-size: 0.7rem;
    }

    /*info de los bloques*/
    .info-bloque2{
        font-size: 0.6rem;
    }

    .espaciado{
        line-height: -1;
    }
}

/* Laptops pequeñas */
@media (min-width: 768px) and (max-width: 992px) {

    /*imagen del bloque 1*/
    .imagen1{
        width: 100%; /*editar valores responsive*/
        height: 300px; /*editar valores responsive*/
    }

    /*titulo de la imagen del bloque1*/

    .titulo-imagen{
        font-size: 2.8rem;
    }

    /*bloque 2*/
    /*contenedor de la imagen*/
    .contenedor-imagen{
        width: 352px;
        height: 256px;
    }

    /*bloque 2 pc*/
    .titulo-bloque-2-pc{              
        font-size: 2.7rem;
    }

    .subtitulo-bloque-2-pc{
        font-size: 0.7rem;
    }

    /*encabezado de los bloques*/
    .encabezado-bloque2{
        font-size: 1rem;
    }

    /*leyenda de cada segmento del bloque 2*/
    .sub-encabezado-bloque2{
        font-size: 0.8rem;
    }

    /*info de los bloques*/
    .info-bloque2{
        font-size: 0.7rem;
    }
    .espaciado{
        line-height: 0.9;
    }
    
}

/*laps medianas*/
@media (min-width: 992px) and (max-width: 1199px) {

    /*imagen del bloque 1*/
    .imagen1{
        width: 100%; /*editar valores responsive*/
        height: 400px; /*editar valores responsive*/
    }

    /*titulo de la imagen del bloque1*/

    .titulo-imagen{
        font-size: 3.5rem;
    }

    /*bloque 2*/
    /*contenedor de la imagen*/
    .contenedor-imagen{
        width: 412px;
        height: 316px;
    }

    /*bloque 2 pc*/
    .titulo-bloque-2-pc{              
        font-size: 3.1rem;
    }

    .subtitulo-bloque-2-pc{
        font-size: 0.9rem;
    }

    /*encabezado de los bloques*/
    .encabezado-bloque2{
        font-size: 1rem;
    }

    /*leyenda de cada segmento del bloque 2*/
    .sub-encabezado-bloque2{
        font-size: 0.9rem;
    }

    /*info de los bloques*/
    .info-bloque2{
        font-size: 0.9rem;
    }
   
}

/*laps grandes*/
@media (min-width: 1200px) and (max-width: 1400px) {

    /*imagen del bloque 1*/
    .imagen1{
        width: 100%; /*editar valores responsive*/
        height: 450px; /*editar valores responsive*/
    }

    /*titulo de la imagen del bloque1*/

    .titulo-imagen{
        font-size: 4.5rem;
    }

    /*bloque 2*/
    /*contenedor de la imagen*/
    .contenedor-imagen{
        width: 492px;
        height: 396px;
    }

    /*bloque 2 pc*/
    .titulo-bloque-2-pc{              
        font-size: 3.8rem;
    }

    .subtitulo-bloque-2-pc{
        font-size: 0.9rem;
    }

    /*encabezado de los bloques*/
    .encabezado-bloque2{
        font-size: 1.2rem;
    }

    /*leyenda de cada segmento del bloque 2*/
    .sub-encabezado-bloque2{
        font-size: 1rem;
    }
    .info-bloque2{
        font-size: 1rem;
    }
}