: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.5rem;
  /* 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: 1.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: 1.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: 1.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: 1.5rem;
  border-top: #494646 1px solid;
}


.capitulo {
  font-size: 1.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;
  }
}