:root {
    --celeste: #00ccff;
    --gris: #e1e1e1;
    --grisClaro: #dcf5ef;
    --grisOscuro: #a3a1a1;
    --blanco: #ffffff;
    --negroOscuro:#252A2E;
    --negro: #000000;

    --negroClaro:#1e2326;
    --fuente:'Roboto Mono', monospace;

  }
  
  html {
    font-size: 62.5%;
    box-sizing: border-box;

    scroll-behavior: smooth;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
   
    font-size: 1.6rem;
    line-height: 2;
    background-color: var(--gris);


  }
  
  a {
    text-decoration: none;
  }

  
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--fuenteHeading);
    line-height: 1.2;
  }
  
  h1 {
    font-size: 4.8rem;
  }
  
  h2 {
    font-size: 4rem;
  }
  
  h3 {
    font-size: 3.2rem;
  }
  
  h4 {
    font-size: 2.8rem;
  }
  
  img {
    max-width: 100%;

  }

  /*Inicio Header */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--negro);
    color: #fff;
    font-family: var(--fuente);
}

.logo a {
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}

.logo a:hover{
  color: var(--celeste);
}

.nav {
    display: flex;
    gap: 3rem;
}

.nav a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.nav a:hover {
  color: var(--celeste);
}

.nav-responsive {
    display: none;
    cursor: pointer;
}

.nav-responsive:hover {
 color: var(--celeste);
 transition: 0.3s;
}

@media (max-width: 500px) {

  .header{
    justify-content: center;
    flex-direction: column;
  }
  .nav {
      gap: 1rem;
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s; /* Agrega una transición suave para la altura y la opacidad */
  }
  
  .nav.mostrar {
    max-height: 150rem; /* Cambia la altura para mostrar el contenido */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.5s; /* Agrega una transición al esconder el menú */
  }
  
    .nav-responsive{
      display: block;
    
    }


}


/* Final Header */


/* SECCION INICIO */



.inicio {
  background: linear-gradient(to top, rgba(30, 35, 38, 0.8), rgba(30, 35, 38, 1));
  background-size: cover;
  height: 100vh; /* Asegura que la sección tenga altura completa */
  padding-top: 5rem;
  color: white;

  font-family: var(--fuente);
  position: relative; /* Añade posición relativa para que el video absoluto esté contenido */
}

/*Ajustando Video para que este de fondo*/


.video-container {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-container video {
  min-width: 100%;
  min-height: 100%;
}

/* Estilos para el contenido encima del video */
.contenedor-banner {
  position: relative;
  z-index: 1;
  /* Agrega otros estilos necesarios */
}


.inicio .contenedor-banner{
  padding: 2rem;
background-color: var(--negro);
  max-width: 35rem;
  margin: auto;
  text-align: center;
  border-radius: 4rem;
  
}

.inicio .redes a{

    color: inherit; /* Esto heredará el color del elemento padre */
    text-decoration: none; /* Esto eliminará el subrayado predeterminado */

}

.inicio .contenedor-banner .contenedor-img {

  border-radius: 5rem;
 
}

.inicio .contenedor-banner .contenedor-img img{
  margin-top: 50rem;
  width: 80%;
  display: block;
  margin: auto;
  border: 0.5rem solid var(--grisClaro);
  border-radius: 100%;
  background-color: var(--grisOscuro);

}

.contenedor-banner h1, .contenedor-banner,h2{
  user-select: none;
}


.inicio .contenedor-banner h1{
  margin-top: 4rem;
  font-size: 4.2 rem;

}

.inicio .contenedor-banner h2{
  margin-top: 4rem;
  font-weight: normal;
  font-size: 2rem;
}

/* Ordeno los enlaces de Ws, fb etc */
.inicio .contenedor-banner .redes {

  display: flex;
  text-align: center;
  justify-content: space-between;
  font-size: 2.5rem;
  text-decoration: none;
  margin: 1rem;
  padding: 1rem;
 


}

.inicio .contenedor-banner .redes a{
  padding: 1rem;
 
  border-radius: 20%;
  line-height: 3.2rem;
  transition: 0.3s;

}

.inicio .contenedor-banner .redes a:hover{
  
  background-color: var(--negroOscuro);

}

/*Seccion Final */



/* Inicio Sobre Mi*/

.sobremi{
  font-family: var(--fuente);

  justify-content: center;
  background-color: var(--negroClaro);
  color: var(--blanco);
  padding: 5rem 2rem;
  display: flex;

 
}


.contenedor-sobremi__todo{
  max-width: 80rem;
  height: 100%;
  width: 100%;
  text-align: justify;
  border-radius: 2em;
  background-color: var(--negro);


}


.sobremi .contenido-seccion  h2 {

  text-align: center;
}

@media (max-width: 540px) {

  .sobremi .contenedor-sobremi__todo .contenido-seccion p{
    font-size: 1.2rem;
  }
    
}





.sobremi .contenedor-sobremi{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
}
/*Ajustando tamaño grande */
@media (min-width: 768px) {
    .sobremi .contenedor-sobremi{
      justify-content: space-between;
    
      flex-direction: row;
     
      
    }
}

.sobremi .contenedor-sobremi .contenedor-sobremi-datos p span{
  font-weight: bold;

  color: var(--celeste);

}

.sobremi .contenedor-sobremi .contenedor-sobremi-datos h1{
  padding: 0;
  text-align: center;
}
.sobremi .contenedor-sobremi .contenedor-sobremi-datos p{
  font-size: 1rem;
  padding: 1rem;
  display: block;
}
@media (min-width: 768px) {

    .sobremi .contenedor-sobremi .contenedor-sobremi-datos p{
      padding: 0;
      font-size: 1rem;
      font-size: 1.5rem;
    }


}


/* Ajustando textos */



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

.contenedor-sobremi__todo{
  font-size: 1rem;
}



.contenedor-sobremi-conocimientos .contenedor-sobre-conocimientos-icono{

  text-align: center;
  display: grid;
  justify-content: center;
  align-items: center;
  transition: 1s;
  font-size: 2rem;

  border-radius: 2rem;

  
}


 .contenedor-sobre-conocimientos-icono:hover{
  background-color: var(--celeste);
  color: black;
 

}



/* Grid de iconos sobre conocimientos */

.sobremi .sobremi-conocimientos .contenedor-sobremi-conocimientos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3rem;

}
.sobremi .sobremi-conocimientos .contenedor-sobremi-conocimientos i{
  font-size: 4rem;
}

@media (min-width:768px ) {
  .sobremi .sobremi-conocimientos .contenedor-sobremi-conocimientos{
  
    grid-template-columns: repeat(3, 1fr);
   

  }
}

.sobremi .contenido-seccion h2{
  
  padding-top: 4rem;
  font-size: 4.8rem;
}

.sobremi .contenido-seccion p{
  font-size: 1.8rem;
  padding: 2rem;
  
}
.sobremi .contenido-seccion p span{
  color: var(--celeste);
  font-weight: bold;
}




.sobremi .contenedor-boton{
  display: flex;
  justify-content: center;
}
.sobremi button{

  cursor: pointer;
  background-color: transparent;
  border: 2px solid var(--blanco);
  color: var(--blanco);
  width: fit-content;
  margin: 20px auto;
  padding: 1rem 2.2rem;
  
  position: relative;
  z-index: 1;

}



.sobremi button .overlay{
  position: absolute;
  width: 0%;
  z-index: -1;
  transition: 1s;
  left: 0;
  top: 0;
  height: 100%;
    background-color: var(--celeste);
  
}

.sobremi button:hover .overlay{
  width: 100%;
  
}
.sobremi button:hover{
  transition: 1s;
  color: var(--negro);
  border: 2px solid var(--negro);
}

/*SECCION ESTUDIOS */ 


/* Estilos base para todos los tamaños de pantalla */
.estudios {
  font-family: var(--fuente);
  place-items: center center;
  background-color: var(--negroOscuro);
  color: var(--blanco);
  padding: 3rem 1rem; /* Ajusta el padding para dispositivos más pequeños */
}

.contenedor-estudios {
  max-width: 90rem; /* Ejemplo de un valor más grande, pero aún razonable */
  margin: 0 auto; /* Centrar el contenedor */
  text-align: justify;
  border-radius: 2em;
  background-color: black;
}


.datos-estudio {
  display: flex;
  flex-direction: column; /* Apila los elementos uno sobre otro */
  align-items: center;
  text-align: center;
  margin: 1.5rem 0; /* Espacio entre los bloques de datos */
}

.datos-estudio p {
  padding: 1rem;
  margin: 0; /* Ajusta el margen de los párrafos */
  width: 40rem;
}

.datos-estudio span {
  padding: 1rem;


}

.datos-estudio h4 {
  margin: 0; /* Elimina el margen superior e inferior del encabezado */
  color: var(--celeste);
}

.datos-estudios .fecha{
  font-weight: bold;
}

.datos-estudio p{
  max-width: 30rem;
}

.estudios .contenedor-estudios h2 {
  margin: 0; /* Elimina el margen superior e inferior del encabezado */
  text-align: center;
}

/* Estilos para dispositivos con ancho menor a 768px (celulares en posición vertical) */
@media (max-width: 767px) {
  .contenedor-estudios {

    padding: 2rem 1rem; 
  }

  .datos-estudio {
    margin: 1rem 0; 
  }

  .datos-estudio span {
    padding: 0.5rem; 
  }
}

/* TERMINA SECCION ESTUDIOS*/

/* INICIO PORTAFOLIO */

.portafolio {
  font-family: var(--fuente);
  place-items: center center;
  background-color: var(--negroClaro);
  color: var(--blanco);
  padding: 3rem 1rem; /* Ajusta el padding para dispositivos más pequeños */
}

.contenedor-portafolio{
  max-width: 120rem; /* Ejemplo de un valor más grande, pero aún razonable */
  margin: 0 auto; /* Centrar el contenedor */
  text-align: justify;
 
  border-radius: 2em;
  background-color: black;
}

.contenedor-portafolio h3{
  text-align: center;
  padding-top: 3rem;
}

.contenedor-portafolio .navegacion__tabs{
  text-align: center;
 
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  align-items: center;

}

.contenedor-portafolio .navegacion__tabs p{
   cursor: pointer;
  color: var(--negro);
  padding: 1rem;
  background-color: var(--celeste);
  border-radius: 2rem;
width: 15rem;

}

.contenedor-portafolio .navegacion__tabs p:hover,.contenedor-portafolio .navegacion__tabs p:focus {

color: var(--blanco);
  background-color: var(--negroClaro);



  transition: 0.3s;
}


.contenedor-portafolio .navegacion__tabs p:active{
  transform: scale(95%);
}

@media (min-width:471px ) {
  .contenedor-portafolio .navegacion__tabs{
    flex-direction: row;
    display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  }
}

[data-content] {
  max-height: 0; /* Inicialmente oculta el contenido */
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s; /* Agrega una transición suave para la altura */
}

.active[data-content] {
  max-height: 150rem; /* Cambia la altura para mostrar el contenido */
  opacity: 100;
}

.contenedor__contenido__portafolio__imagenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  padding: 5rem;

}

@media (min-width: 768px) {
  .contenedor__contenido__portafolio__imagenes {
    grid-template-columns: repeat(3, 1fr);
  }
}




.contenedor__imagenes {
  position: relative; /* Necesario para el posicionamiento del overlay */
  overflow: hidden; /* Oculta el desenfoque que se sale del contenedor */
}

.contenedor__imagenes img {
 
  height: 20rem;
  width: 100%;
  border-radius: 3rem;
  cursor: pointer;
  overflow: hidden; /* Oculta el desenfoque que se sale del contenedor */

}

@media (min-width: 768px) {
  .contenedor__imagenes img{
    height: 100%;
   
  }
}




.contenedor__imagenes::before, .contenedor__imagenes:focus::before {
  content: attr(data-titulo); /* Utiliza el valor del atributo data-overlay como contenido */
  position: absolute;

  
  top: 0;
  left: 0;
  width: 100%;
  height: 20rem;
  background-color: rgba(10, 151, 245,0.9 );
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 3rem;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .contenedor__imagenes::before {
    font-size: 1.6rem;
      height: 100%;
  }
}

/* Icono */

.contenedor__imagenes {
  position: relative;
  /* Otros estilos que ya tienes */
}

.contenedor__imagenes a {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 7px;
  color: white;
  display: block;
 
  /* Otros estilos si es necesario */
  cursor: pointer;
  opacity: 0; /* Inicialmente oculta los iconos */
  transition: opacity 0.3s ;
  visibility: hidden;

  transition: opacity 0.3s, visibility 0.3s, pointer-events 0.3s; /* Agregada la transición de pointer-events */

 
}

.contenedor__imagenes:hover a,.contenedor__imagenes:hover a:focus {
  opacity: 1; /* Muestra los iconos al hacer hover */
  visibility: visible;
  pointer-events: auto; /* Los elementos son seleccionables cuando aparecen */
 
}

@media (min-width: 768px) {
    .contenedor__imagenes a {
      font-size: 3rem;
      margin: 10px;
    }
}

.contenedor__imagenes a:last-child {
  margin-right: 3rem; /* Añade margen entre los íconos */
}

.contenedor__imagenes .icono__solo:last-child  {
  margin: 1rem; /* Añade margen entre los íconos */
}



@media (min-width:768px ) {
  .contenedor__imagenes a:last-child {
    margin-right: 5rem; /* Añade margen entre los íconos */
  }
}

.contenedor__imagenes:hover::before {
  opacity: 1;
}

@supports (-webkit-appearance:none) { /* Verifica si se trata de Opera GX */
  img {
      filter: none !important; /* Desactiva el filtro */
  }
}




/* Contenedor portafolio Unearte */
.contenedor__contenido__portafolio__imagenes__universidad {
  display: grid;
  justify-content: center;
  padding: 5rem;
}

/* Videos Portafolio */

.contenedor__contenido__portafolio__videos {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem;
}

@media (min-width: 576px) {
  .contenedor__contenido__portafolio__videos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contenedor__contenido__portafolio__videos .video-containerr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor__contenido__portafolio__videos .video-containerr video {
  width: 100%;
  height: auto;
}


/* Final Portafolio */



/* Cambio de Imagen*/

.slider {
  overflow: hidden;
  width: 100%; /* Asegura que el slider tenga un ancho definido */
}

.slider--inner {
  display: flex;
  flex-direction: row;
  transition: transform 0.5s ease; /* Agrega una transición suave */
}

.slider--inner img {
  width: 100%;
  height: auto; /* Ajusta la altura automáticamente */
  object-fit: cover; /* Ajusta el ajuste del contenido */
}

/* Ventana modal*/


dialog {
  max-width: 650px;
  padding: 40px 70px;

  background-color: var(--grisClaro);
  font-family: var(--fuente);
  color: var(--negroOscuro);
  border-radius: 3rem;
}

dialog::backdrop {
  background: rgba(1, 3, 3, 0.9); /* Cambié el valor RGBA para usar el color celeste */
}

dialog p {
  color: var(--negroOscuro);
  font-size: 1rem;
}

dialog .icono_proyecto {
  color: var(--negro);

  font-size: 5rem;
  border: none;
  transition: color 0.3s;
  top: 1rem;
  background:#ff000000;
 
  border-radius: 3rem;

}

dialog .icono_proyecto:hover{
  color: var(--negroClaro);
  


}




dialog h4 {
  text-align: center;
}
@media (min-width: 768px) {

  dialog p {
    font-size: 1.6rem;
  }
    
}

dialog button {
  background-color: var(--negro);
  color: var(--blanco);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

dialog button:hover {

  background-color: var(--negroClaro);
}


dialog a {
  background-color: #000000;
 

  background: var(--negro);
font-family: var(--fuente);

}




.nave a{

  text-decoration: none;
  color: #fff;
  
}

.nave a:hover{

  text-decoration: none;
  color:var(--celeste)
  
}
footer .nave{
  background-color: var(--negro);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;

  font-size: 1.4rem;
  gap: 1rem;
  color: #fff;
  font-family: var(--fuente);
}

@media (min-width: 768px) {
  footer .nave{
 
    font-size: 1.6rem;
    gap: 3rem;
  
  }
}