/* Reset de estilos y configuración básica */

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-size: cover; /* Añadido para que la imagen cubra todo el fondo */
    background-repeat: no-repeat; /* Añadido para evitar la repetición de la imagen */
    overflow-x: hidden; /* Evita el scroll horizontal solo en este contenedor */
    scroll-behavior: smooth;
}

.images {
    display: flex;
    width: 200%; /* Doble del ancho para contener ambas imágenes */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Añadido para suavizar el movimiento */
}

.images img {
    width: 50%; /* Cada imagen ocupa la mitad del contenedor */
    height: 100%;
    object-fit: cover; /* Ajusta a la pantalla manteniendo la proporción */
}

/* Barra de navegación */
/* Estilo del header */
.header1 {
    background-color: #026937; /* Color de fondo del header */
    color: #ffffff; /* Color del texto dentro del header */
    padding: 0px 90px 10px; /* Relleno del header (arriba, lados, abajo) */
    position: relative; /* Establece el contexto de posicionamiento para los elementos hijos */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga del área del header */
    margin: 0 auto; /* Centra el header horizontalmente */
    top: 0%;
    max-width: 70%; /* Ancho máximo del header */
    font-size: 150%;
    /* Establece el radio de las esquinas inferiores */
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    text-align: left; /* Alinea el texto dentro del header a la izquierda */
}

/* Estilo del contenedor de navegación */
.nav1 {
    display: flex; /* Crea un contenedor de diseño flexible */
    justify-content: space-between; /* Distribuye los elementos con espacio adicional entre ellos */
    align-items: center; /* Centra los elementos verticalmente en el contenedor */
}

/* Estilo del texto dentro del header que deseas alinear a la izquierda */
header h4 {
    text-align: left;
}

.titulo2{
    color: #026937;
    font-size: 620%;
    text-align: center;
}

.texto2{
    margin-top: -3%;
    color: #00381d;
    font-size: 200%;
    text-align: center;
}

/* Estilo del contenedor del logo */
.logo {
    flex-shrink: 0; /* Evita que el logo se contraiga más allá de su tamaño original */
    margin-bottom: 1px; /* Añade un pequeño margen inferior al logo */
    position: relative; /* Establece la posición relativa para que los pseudoelementos sean relativos a este contenedor */
}

/* Estilo de la imagen del logo */
.logo img {
    max-height: 80px; /* Altura máxima de la imagen del logo */
    margin-top: 5%; /* Añade un pequeño margen superior a la imagen del logo */
    width: auto; /* Permite que la imagen del logo se ajuste automáticamente a su tamaño original */
}

/* Pseudoelemento que representa la línea vertical entre el logo y el texto */
.logo::after {
    content: ""; /* Añade un contenido vacío al pseudoelemento */
    position: absolute; /* Posiciona el pseudoelemento en relación con el contenedor .logo */
    top: 16%; /* Establece la posición superior del pseudoelemento */
    bottom: 16%; /* Fuerza al pseudoelemento a llegar hasta la parte inferior de .logo */
    right: -35px; /* Posiciona el pseudoelemento 30 píxeles hacia la izquierda desde el borde derecho de .logo */
    width: 3px; /* Ancho de la línea vertical */
    background-color: #ffffff; /* Color de la línea vertical */
}


h4 {
    margin: 0; /* Elimina el margen superior del h4 */
    font-size: 1em; /* Ajusta el tamaño de la fuente según sea necesario */
    text-align: center; /* Centra el texto horizontalmente */
    color: #ffffff;
}

ul {
    list-style: none;
    display: flex;
}

li {
    margin-right: 20px;
}

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

/* Sección de héroe */

.section1 {
    background-image: url(img_blanco/udea.jpg);
}

.section2{
    background-color: #fff;
    padding: 2%;
}

.section3 {
    background-color: rgb(0, 0, 0);
    padding: 1%; /* Establece el padding a 0 para ocupar todo el espacio */
    height: 100vh;
}

.contenedor3 {
    position: relative; /* Establece el contenedor como posición relativa */
    margin: 0px; /* Ajusta el espacio entre las imágenes */
}

.pendon1, .pendon2 {
    position: absolute; /* Establece las imágenes como posición absoluta dentro del contenedor */
    margin-top: -43%;
    
}

.pendon1 {
    left: -1%; /* Ajusta la posición izquierda de la primera imagen */
}

.pendon2 {
    right: -58.5%; /* Ajusta la posición derecha de la segunda imagen */
}

.navbar {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }

  .span4 {
    font-size: 350%;
    color: #026937;
    margin-left: 6%;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    font-weight: bold; /* Hace que el texto sea más grueso */
    position: relative; /* Permite posicionar el pseudo-elemento relativo a este elemento */
  }
  .span4::after {
    content: ""; /* Añade contenido al pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento en relación con el elemento padre */
    left: 0; /* Ajusta la posición del pseudo-elemento desde la izquierda */
    right: 0; /* Ajusta la posición del pseudo-elemento desde la derecha */
    bottom: -3px; /* Ajusta la posición del pseudo-elemento desde abajo para solapar ligeramente el texto */
    height: 7px; /* Establece la altura de la línea de subrayado */
    background: linear-gradient(30deg, #026937, #026937 20%, transparent 50%, transparent); /* Crea una línea personalizada */
  }
  
  .image-container {
    display: flex;
    margin-left: 100px; /* Mover las imágenes a la derecha */
  }
  
  .image-button {
    cursor: pointer;
    margin-left: 4%; /* Ajusta el espacio entre las imágenes */
    border-radius: 5px;
    height: 13%;
    width: 13%;
  }
  
  .image-button.active {
    border: 2px solid #ffffff; /* Ajusta el color del borde según tus preferencias */
    border-radius: 5px; /* Ajusta el radio del borde según tus preferencias */
  }

  .container4 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
  }
  
  .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    border-radius: 10px; /* Agrega bordes redondeados */
    overflow: hidden; /* Garantiza que las esquinas redondeadas se apliquen correctamente */
    background-color: #fff; /* Fondo blanco */
    border: 2px solid #008344; /* Bordes verdes */
    color: #ffffff; /* Texto blanco para mayor contraste */
    padding: 5px; /* Ajusta según sea necesario */
    width: 200px; /* Ajusta el ancho de la caja */
  }
  
  .box img {
    width: 100%;
    height: auto;
    max-width: 300px; /* Ajusta según sea necesario */
  }
  
  .box p {
    margin-top: 5px; /* Reduce el espacio superior */
    font-size: 16px;
    background-color: #007c40;
    color: #fff;
    padding: 10px; /* Ajusta según sea necesario */
  }
  
/* estilo de section 4 */
.section4{
    background-color: rgb(255, 255, 255);
}


/* header 4 */

.section4-header {
    background-color: #026937; /* Color de fondo del header */
    color: #fff; /* Cambia el color del texto según tus preferencias */
    padding: 15px 0; /* Ajusta el relleno según tus preferencias */
    text-align: center; /* Centra el texto dentro del encabezado */
    font-size: 140%;
  }

  
  .header-content {
    display: flex;
    align-items: center; /* Centra horizontalmente los elementos */
    max-width: 1200px;
    width: 50%; /* Ocupa el 50% del ancho del contenedor padre */
    margin-left: 37%;
  }
  
  .header-text h1 {
    margin: 0;
  }
  
  .vertical-line {
    height: 70px; /* Ajusta la altura de la línea según tus preferencias */
    width: 1px;
    background-color: #fff; /* Cambia el color de la línea según tus preferencias */
    margin-left: 1%;
    margin-right: 1%
  }
  
  .header-logo img {
    max-height: 70px; /* Ajusta la altura máxima del logo según tus preferencias */
  }

  .section4 .content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section4 .content .category {
    display: none; /* Oculta todas las categorías inicialmente */
}

.section4 .content h2 {
    color: #026937;
    font-size: 24px;
    margin-bottom: 10px;
}

.section4 .content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* fin section 4 */

/* Comienzo section5 */
.section5 {
    background-color: rgb(236, 236, 236);
    padding: 6%;
  }
  
  .navbar5 {
    background-color:  rgb(236, 236, 236);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .span5 {
    font-size: 350%;
    color: #026937;
    margin-left: 6%;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    font-weight: bold; /* Hace que el texto sea más grueso */
    position: relative; /* Permite posicionar el pseudo-elemento relativo a este elemento */
  }
  
  .span5::after {
    content: ""; /* Añade contenido al pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento en relación con el elemento padre */
    left: 0; /* Ajusta la posición del pseudo-elemento desde la izquierda */
    right: 0; /* Ajusta la posición del pseudo-elemento desde la derecha */
    bottom: -3px; /* Ajusta la posición del pseudo-elemento desde abajo para solapar ligeramente el texto */
    height: 7px; /* Establece la altura de la línea de subrayado */
    background: linear-gradient(30deg, #026937, #026937 20%, transparent 50%, transparent); /* Crea una línea personalizada */
  }
  
  .green-button {
    background-color: #007704;
    color: #ffffff;
    border: none;
    padding: 20px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 7px; /* Ajusta según sea necesario */
    cursor: pointer;
    border-radius: 5px;
  }

      /* Estilos para las cartas */
      .card {
        width: 300px;
        margin: 20px;
        display: inline-block;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
        transition: box-shadow 0.3s;
      }
      
      .card:hover {
        box-shadow: 0 16px 32px rgba(9, 255, 0, 0.6); /* Aumenta la intensidad del box-shadow */
        background-color: #c9f0b9; /* Cambia el color de fondo en hover */
        transform: scale(1.05); /* Hace un ligero aumento de escala */
      }
  
      /* Contenedor para las cartas */
      #card-container {
        margin-top: 4%;
        margin-left: 10%;
      }
  
      /* Estilos para la imagen */
      .card img {
        width: 100%;
        height: auto;
      }
  
      /* Estilos para el texto */
      .card-text {
        padding: 10px;
      }
  
      /* Estilos para el botón "Ver Más" y la información adicional */
      .more-info {
        display: none;
        padding: 10px;
        margin-right: 2%;
      }
  
      .show-info-btn {
        background-color: #006403;
        color: white;
        border: none;
        padding: 10px 20px; /* Ajusta el espaciado interno del botón */
        cursor: pointer;
        border-radius: 5px; /* Bordes redondeados */
        display: inline-block; /* Hace que el botón sea un bloque en línea */
        text-align: left; /* Alinea el texto a la izquierda */
      }

      .linea5 {
        border: none;
        height: 2px; /* Ajusta el grosor de la línea */
        background-color: #4CAF50; /* Color verde */
      }

            /* Estilo para la imagen del icono */
      .icono-img {
        width: 20px; /* Ajusta el ancho de la imagen según tus necesidades */
        height: 20px; /* Ajusta la altura de la imagen según tus necesidades */
        margin-right: 10px; /* Ajusta el margen derecho para separar la imagen del texto */
        color: #00381d;
        font-weight: bold; /* Hace que el texto sea más grueso */
      }

      .parrafo5{
        font-size: 100%;
        color: #00381d;
        font-weight: bold; /* Hace que el texto sea más grueso */
        background-color: rgb(236, 236, 236);
      }

      .fot5{
        background-color: #ffffff; /* Color de fondo del header */
        color: #000000; /* Color del texto dentro del header */
        padding: 0px 90px 10px; /* Relleno del header (arriba, lados, abajo) */
        margin: 0 auto; /* Centra el header horizontalmente */
        margin-left: 26%;
      }

      .nav5 {
        display: flex; /* Crea un contenedor de diseño flexible */
        align-items: center; /* Centra los elementos verticalmente en el contenedor */
    }

    .titulo5{
      color: #000;
      margin-right: 3%;
    }
      
  /* Fin section5 */
 
/* inicio section6 */
.section6 {
  background-color: rgb(255, 255, 255);
  padding: 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Alinea el contenido en la parte superior */
}

.contenedor6 {
  margin-left: 0%;
}

.boxtexto6 {
  height: auto;
  width: 70%;
  margin-left: -1.5%;
}

.green-button6 {
  background-color: #278644;
  color: #ffffff;
  border: none;
  padding: 20px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold; /* Hace que el texto sea más grueso */
  font-size: 22px;
  margin-left: 7px; /* Ajusta según sea necesario */
  cursor: pointer;
  border-radius: 5px;
}

.texto6 {
  font-size: 150%;
  color: #026937;
  letter-spacing: 0.5px; /* Ajusta el espaciado entre letras */
  line-height: 1.5; /* Ajusta el espaciado entre líneas */
}

.titulo-izquierdo6 {
  font-size: 300%;
  color: #026937;
  font-weight: bold;
  position: relative;
}

.titulo-izquierdo6::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 7px;
  background: linear-gradient(30deg, #026937, #026937 20%, transparent 50%, transparent);
}


.cartas-derecho6 {
  margin-left: -10%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 20px;
  justify-content: flex-end;
  align-items: flex-start;
}

.carta6 {
  width: 100%;
  text-align: center;
  background-color: #008344;
}

.carta6 img {
  width: 40%;
  height: 40%;
}

.carta6 h2 {
  margin: 10px 0;
  color: #fff;
}

.carta6 p {
  font-size: 20px;
  background-color: #008344;
  color: #fff;
}

/* Fin section6 */




.paragraph-container {
    max-width: 960px; /* Ajusta el ancho máximo según tus necesidades */
    margin: 0 auto; /* Centra el párrafo horizontalmente */
}

p {
    background-color:#ffffff;
    color: #000000;
    padding: 10px 20px;
    font-size: 1.2em;
    text-decoration: none;
    border-radius: 5px;
}

/* botones */

.cta-buttons-container {
    display: flex;
    gap: 18px;
    justify-content: center; /* Centra los elementos horizontalmente */
    margin-bottom: -3%;
}

.cta-button {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    color: #35944b;
    padding: 15px;
    font-size: 1em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s; 
    position: relative;
}

.cta-button:hover {
    background-color: #4CAF50;
    color: #000;
}

.logo-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.button-content {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #4CAF50;
    padding: 5px;
}

.button-title {
    font-weight: bold;
}

.button-translation {
    font-size: 0.8em;
    font-style: italic;
    color: #000;
    text-align: center;
}

/* mismo botones pero en section2 */

.cta-buttons-container2 {
    display: flex;
    gap: 45px;
    justify-content: center; /* Centra los elementos horizontalmente */
}

.cta-button2 {
    display: flex;
    align-items: center;
    background-color: #026937;
    color: #ffffff;
    padding: 24px; /* Ajusta el relleno (padding) según sea necesario */
    font-size: 1.8em;
    text-decoration: none;
    border-radius: 7px;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    width: 300px; /* Ajusta el ancho según sea necesario */
    height: 105px; /* Ajusta la altura según sea necesario */
}

.cta-button2:hover {
    background-color: #4CAF50;
    color: #000;
}

.logo-icon2 {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.button-content2 {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.button-title2 {
    font-weight: bold;
}

.button-translation2 {
    font-size: 0.8em;
    font-style: italic;
    color: #ffffff;
    text-align: left;
}

/* Pie de página */


.iframe-container {
    overflow: hidden;
    height: 100%; /* Ocupa toda la altura de la sección */
    width: 100%;
    overflow-x: hidden; /* Evita el scroll horizontal solo en este contenedor */
}

.museo-iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow-x: hidden; /* Evita el scroll horizontal solo en este contenedor */
}

/* Estilos para el primer footer */
.arriba {
  color: white;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  background: linear-gradient(to right, #00381d 20%, #1c9111 80%); /* Fondo dividido en dos colores */
}

.izquierda {
  display: flex;
  align-items: center;
}

.izquierda img {
  width: 30px; /* Ajusta el tamaño de las imágenes según tus necesidades */
  height: 30px;
  margin-right: 30px; /* Ajusta el espacio entre las imágenes */
}

.derecha {
  display: flex;
}

.derecha button {
  color: #ffffff; /* Color blanco */
  background-color: #ffffff00;
  font-weight: bold; /* Hace que el texto sea más grueso */
  padding: 10px 15px;
  font-size: 25px;
  border: none;
  border-radius: 5px;
  margin-left: 10px; /* Ajusta el espacio entre los botones */
  cursor: pointer;
}

.derecha button:hover {
  background-color: #45a049; /* Cambia el color al pasar el ratón por encima */
  color: white;
}

.abajo{
  text-align: center;
  background-color: #00381d;
  color: white;
  padding: 5px;
  font-size: 25px;
}