:root{
    --primario: #c6c6c6 ;
    --primarioOscuro: #9c9fAE;
    --blanco: #fff;
    --negro: #383737;
    
    }

 @font-face {
    font-family: 'Gotham';
    src: url(/fuente/Gotham-Bold.otf);
    font-weight: 700;
    font-style: bold;
    }

    @font-face {
        font-family: 'Gotham-Book';
        src: url(/fuente/Gotham-Book.otf);
        font-weight: 200;
        font-style: normal;
        }

        @font-face {
            font-family: 'Gotham-Medium';
            src: url(/fuente/Gotham-Medium.otf);
            font-weight: 300;
            font-style: italic;
            }

            @font-face {
              font-family: 'Gotham-Light';
              src: url(/fuente/Gotham-Light.otf);
              font-weight: 100;
              font-style: normal;
              }
        
        
    html{
        box-sizing: border-box;
        font-size: 62.5%;
       scroll-behavior: smooth;
       overflow-y: scroll; 
        scroll-snap-type: y mandatory;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }
    
    .navegacion,
    .imagen__principal,
    .crear,
    .motivo,
    .socioambiental,
    .vida,
    .mundo,
    .otrodiseno,
    .carrera,
    .correo{
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }


    body{
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 1.6rem; /* Cambiado a rem para mejor escalabilidad */
      line-height: 1.1;
      height: 100%;
      width: 100%;
      font-family: 'Gotham-Light';
      font-weight: 100;
      color: var(--primario);
      overflow-x: hidden;
    }
  
    /* Navegación de pantalla completa */
  .navegacion {
    width: 100%;
    height: 100%; /* Cambiado a vh para ocupar toda la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 0 auto;
    padding: 2rem 3rem; /* Espaciado lateral */
    background-color: var(--blanco); /* Fondo blanco para la navegación */
    overflow: hidden; /* Descomentar si quieres ocultar el desbordamiento */
    transition: height 0.4s ease;
    }

.navegacion ul {
  list-style: none; /* Elimina los puntos de la lista */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
  display: flex;
  flex-direction: column;
}

.navegacion li {
  list-style: none;
  padding: 1.5rem 0; /* Espacio entre los enlaces */
  margin: 0; /* Elimina el margen por defecto */
}
.navegacion.expandido{
  height: 150vh; /* ajustá esto según lo que necesite mostrar */
  background-color: var(--blanco); /* Fondo blanco para la navegación */
}

/* Estilo para los enlaces */
.navegacion .enlace .ir-a-mas {
  color: var(--primario);
  text-decoration: none; 
  width: 100%; /* Asegura que el enlace ocupe todo el ancho */
  transition: background-color 0.3s;
  margin-top: 5rem; /* Espacio entre los enlaces */
}

.navegacion img {
  margin-right: 10px;
  transition: 0.3s;
}


 /* Imagen clara por defecto */
 .icon1 {
  content: url('/imagen/1.svg');
  width: 100%;
  max-width: 350px;
}

.icon2 {
  content: url('/imagen/3.svg');
  width: 100%;
  max-width: 410px;

}
.icon3 {
  content: url('/imagen/5.svg');
  width: 100%;
  max-width: 470px;

}
.icon4 {
  content: url('/imagen/7.svg');
  width: 100%;
  max-width: 250px;
}

.icon5 {
  content: url('/imagen/9.svg');
  width: 100%;
  max-width: 40px;
}

/* Imagen oscura cuando el enlace tiene la clase 'activo' */
.enlace.activo .icon-inicio {
  content: url('/imagen/2.svg');
}

.enlace.activo .icon-nosotros {
  content: url('/imagen/4.svg');
}

.enlace.activo .icon-servicios {
  content: url('/imagen/6.svg');
}

.enlace.activo .icon-contacto {
  content: url('/imagen/8.svg');
}

/* Imagen oscura al hacer hover en el enlace */
.enlace:hover .icon-inicio {
  content: url('/imagen/2.svg');
}

.enlace:hover .icon-nosotros {
  content: url('/imagen/4.svg');
 
}

.enlace:hover .icon-servicios {
  content: url('/imagen/6.svg');
}

.enlace:hover .icon-contacto {
  content: url('/imagen/8.svg');
}

.ir-a-mas:hover .icon-mas {
  content: url('/imagen/10.svg');
}


/* Para el acordeón: contenido oculto */
.contenido {
  max-height: 0; /* Inicia oculto */
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
  width: 100%;
  text-align: left; /* Alineamos el texto a la izquierda */
  font-size: 2.5rem; /* Tamaño de fuente más pequeño para el contenido */
  font-family: 'Gotham-Book'; /* Cambiado a Gotham-Light */
  font-weight: 200; /* Cambiado a 100 para mayor ligereza */
  color: var(--negro);
  background-color: var(--blanco); /* Fondo blanco para el contenido */
  padding: 0; /* Espaciado horizontal */ 
}

/* Cuando se activa el acordeón */

.contenido.activo {
  max-height: 60rem; /* Ajusta según el tamaño de tu contenido */
  opacity: 1;
  padding: 10px 0; /* Un poco de padding para el contenido desplegado */
  transition: max-height 0.5s ease, opacity 0.3s ease;
}
 .contenido p{
  margin: 1em 0;
}
/* Opcional: Mejorar el espaciado de los textos dentro de las secciones */
.bloque {
  display: block;
  line-height: 1;
}

     .section {
      width: 100%; /* <-- Cambiado de 100vw */
      padding: 3rem 3rem;
      color: var(--negro);
      font-size: 2.5rem;
      font-family: 'Gotham-Book';
      font-weight: 200;
      text-align: left; /* <-- Asegura alineación del texto */
      margin: 0 auto;
      letter-spacing: 0rem;
       }
       .section-mas {
        width: 100%; /* <-- Cambiado de 100vw */
        height: 100%;
        padding: 3rem 3rem;
        color: var(--negro);
        font-size: 2.5rem;
        font-family: 'Gotham-Book';
        font-weight: 200;
        text-align: left; /* <-- Asegura alineación del texto */
        margin: 0 auto;
        letter-spacing: 0rem;
         }
  
      .section-mas .imagen-socioambiental{
        width: 100%;
        max-width: 80rem;
      }

      .section-mas .linea-superior{
        border-top: #494646 1px solid;
        letter-spacing: 0.1rem;
      }

      .bloque-mas {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .bloque-mas.activo {
        display: block;
        opacity: 1;
      }

     .section .linea-superior{
         border-top: #494646 1px solid;
         letter-spacing: 0.1rem;
       }
       

       .contenido .linea-superior{
          color: var(--negro);
          font-weight: 200;
          font-size: 2.5rem;
          border-top: #494646 1px solid;
       }


      .capitulo {
        font-size: 2.5rem;
        line-height: 0;
      }
      
      .capitulo .numero {
        display: inline-block;
        width: 5.6rem; /* ajustá según el espacio que quieras */
        text-align: left;
      }
      
      .capitulo .titulo {
        display: inline-block;
      }

      .imagen-principal {
        width: 100%;
        height: 100vh; /* Ocupa la pantalla completa */
      }
      
      .imagen__principal {
        width: 100%;
        height: 100%;
        background-image: url('/imagen/IMG_CREARRESISTIR_1_FRAME.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 10px;
      }
    
      .boton-final {
        position: fixed;
        bottom: 15px;
        right: 15px;
        transform: translateX(-50%);
        padding: 12px 24px;
        cursor: pointer;
        text-decoration: none; /* Elimina subrayado si es un enlace */
        z-index: 1000; /* Asegura que esté por encima de otros elementos */
      }
  

      .icon11 {
        content: url('/imagen/11.svg');
        width: 100%;
        max-width: 20px; /* Ajustado para móviles */
      }

      .boton-final:hover .icon-volver {
        content: url('/imagen/12.svg');
      }
     /* Slide Show */
      .mySlides {display: none;}

      .mySlides img {vertical-align: middle;
      border: var(--primarioOscuro) 1px solid;
      }

      .slideshow-container {
             max-width: 1000px;
             position: relative;
             margin: auto;
            }
        /* The dots/bullets/indicators */
      .dot {
      height: 2px;
      width: 2px;
      margin: 0 2px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
      }
            

      .active {
         background-color: #fff;
          }

      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
              from {opacity: .4} 
              to {opacity: 1}
              }

     /*fin slideshow*/

      @media (max-width: 428px) {
        html {
          font-size: 52%;
        }
      
        body {
          overflow-x: hidden;
          padding: 0;
        }
       .navegacion{
        
        padding: 15rem 3rem;

       }
        .navegacion li{
          padding: 1rem 0; /* Espacio entre los enlaces */
          margin: 0; /* Elimina el margen por defecto */
          gap: 0;
        }
        .section,
        .section-mas {
          padding: 0 5rem;
          font-size: 1.2rem;
        }
      
        .section-mas {
          height: auto;
        }
      
        .contenido {
          font-size: 1.2rem;  
           padding: .5rem 0;
        }
      
        .contenido p {
          margin: .5em 0;
        }

        .imagen-principal {
          height: auto;
        }
      
        .imagen__principal {
          height: 30rem;
          background-size: cover;
          background-position: center;
        }
      
        .capitulo {
          font-size: 1.5rem;
        }
      
        .capitulo .numero {
          width: 4rem;
        }
      
       .boton-final {
          display: none;
        }
      
        .icon11 {  
          max-width: 10px;
        }
      
        .section-mas img {
          width: 100%;
          max-width: 80rem;
          height: auto;
          gap: 0; /* Elimina el espacio entre imágenes */
        }
        .navegacion img {
          width: 100%;
          height: auto;
          margin: 0 auto; /* Centra la imagen */
        }

       /* Ajuste para íconos en mobile */
       .icon1{
        width: 100%;
        max-width: 200px; /* Ajustado para móviles */
      }
      .icon2{
        width: 100%;
        max-width: 250px; /* Ajustado para móviles */
      }
      .icon3{
        width: 100%;
        max-width: 290px; /* Ajustado para móviles */
      }
      .icon4 {
        width: 100%;
        max-width: 150px;
        gap: 0; /* Elimina el espacio entre imágenes */
      }
    
      .icon5 {
        width: 100%;
        max-width: 30px;
        gap: 0; /* Elimina el espacio entre imágenes */
      }
    


    }
       
      @media (max-width: 768px){
        
        body {
          overflow-x: hidden;
          padding: 0;
        }

        .navegacion{
          padding: 20rem 3rem;
         }

        .navegacion li{
        padding: 1rem 0; /* Espacio entre los enlaces */
        margin: 0; /* Elimina el margen por defecto */
        gap: 0;
      }

      .navegacion img {
        width: 100%;
        height: auto;
        margin: 0 auto; /* Centra la imagen */
        gap: 0; /* Elimina el espacio entre imágenes */
      }

      /* Ajuste para íconos en mobile */
      .icon1{
        width: 100%;
        max-width: 200px; /* Ajustado para móviles */
      }
      .icon2{
        width: 100%;
        max-width: 250px; /* Ajustado para móviles */
      }
      .icon3{
        width: 100%;
        max-width: 290px; /* Ajustado para móviles */
      }
      .icon4 {
        width: 100%;
        max-width: 150px;
        gap: 0; /* Elimina el espacio entre imágenes */
      }
    
      .icon5 {
        width: 100%;
        max-width: 30px;
        gap: 0; /* Elimina el espacio entre imágenes */
      }

        .section,
        .section-mas {
          padding: 0 5rem;
          font-size: 1.5rem;
        }
        
        .section-mas {
          height: auto;
        }
        
        .contenido {
          font-size: 1.6rem;
          padding: 1rem;
        }
        
        .imagen-principal {
          height: auto;
        }
        
        .imagen__principal {
          height: 30rem;
          background-size: cover;
          background-position: center;
        }
        
        .capitulo {
          font-size: 1.6rem;
        }
        
        .capitulo .numero {
          width: 4rem;
        }
        
      .boton-final {
          display: none; 
        }
        
        .icon11 {  
          max-width: 20px;
        }
        
        .section-mas img {
          width: 100%;
          max-width: 60rem;
          height: auto;
          gap: 0; /* Elimina el espacio entre imágenes */
      }
        .navegacion img {
          width: 100%;
          height: auto;
          margin: 0 auto; /* Centra la imagen */
        }   
        
        .contenido {
          font-size: 1.8rem;
          padding: 0;
        }

        .section,
        .section-mas {
          padding: 3rem;
          font-size: 1.8rem;
          height: auto;
        }

    .slideshow-container {
    max-width: 100%;
    padding: 0 1rem;
  }

 }


      @media screen and (width: 1440px) and (height: 900px) {
        /* Estilo específico para esa resolución */
        .navegacion {
          height: 100vh;
        }
      }