body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0; 
  background-image: url(Imagenes/SLIDER/white-abstract-background-vector.jpg);
  min-height: 100vh;
  display: flex;  
  overflow-x: hidden;
  flex-direction: column;
}

.home-page {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh; 
}

/*HEADER*/

header {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  background-image: url(Imagenes/SLIDER/white-abstract-background-vector.jpg);
  color: rgb(66, 66, 66);
  padding: 22px;
}

.brand-logo {
  height: 120px;
  width: auto;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
    opacity: 0;
    transform: translateY(30px); 
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}


.visible {
    opacity: 1;   
    transform: translateY(0); 
}

/*ICONOS REDES SOCALES*/

.wrapper {
    display: inline-flex;
    list-style: none;
    height: 50px;
    width: 100%;
    max-width: 100%;
    padding-top: 6px;
    font-family: "Poppins", sans-serif;
    justify-content: center;
  }
  
  .wrapper .icon {
    position: relative;
    background: #fff;
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper .tooltip {
    position: absolute;
    top: 0;
    font-size: 14px;
    background: #fff;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: #fff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .wrapper .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .wrapper .icon:hover span,
  .wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(240, 11, 11, 0.1);
  }
  
  .wrapper .facebook:hover,
  .wrapper .facebook:hover .tooltip,
  .wrapper .facebook:hover .tooltip::before {
    background: #1877f2;
    color: #fff;
  }
  
  .wrapper .twitter:hover,
  .wrapper .twitter:hover .tooltip,
  .wrapper .twitter:hover .tooltip::before {
    background: #1da1f2;
    color: #fff;
  }
  
  .wrapper .instagram:hover,
  .wrapper .instagram:hover .tooltip,
  .wrapper .instagram:hover .tooltip::before {
    background: #e4405f;
    color: #fff;
  }
  
  /*MENU DE NAVEGACION*/
  /* Estilo base del nav */
nav {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 7px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Estilo base para los enlaces en nav */
nav a {
  color: #323232;
  text-decoration: none;
  padding: 10px 15px;
  font-size: 1rem;
  position: relative; /* Necesario para posicionar la línea debajo */
  transition: color 0.3s;
}

/* Agregamos la línea debajo del enlace con un pseudo-elemento */
nav a::after {
  content: ''; /* Necesario para crear el pseudo-elemento */
  position: absolute;
  bottom: 0; /* Posiciona la línea en la parte inferior del enlace */
  left: 0;
  width: 0; /* La línea empieza oculta */
  height: 3px; /* Alto de la línea */
  background-color: #f39c12; /* Color de la línea */
  transition: width 0.3s ease; /* La línea se anima */
}

/* Efecto hover: hacer que la línea se extienda */
nav a:hover {
  color: #f39c12; /* Cambia el color del texto al hacer hover */
}

nav a:hover::after {
  width: 100%; /* La línea se extiende completamente al hacer hover */
}


@media (max-width: 768px) {
  header {
    font-size: 12px;  
  }

 

  .brand-logo {
    height: 60px;  
  }

  nav a {
    font-size: 16px;  
    padding: 10px 15px;  
  }

  .wrapper .icon {
    width: 40px;  
    font-size: 16px;  
  }

  .container {
    padding: 15px;  
  }
}


@media (max-width: 480px) {
  header {
    font-size: 10px;  
  }

 

  .brand-logo {
    height: 50px;  
  }

  nav a {
    font-size: 14px;  
    padding: 8px 12px;  
  }

  .wrapper .icon {
    width: 35px;  
    height: 35px;
    font-size: 14px; 
  }

  .container {
    padding: 10px;  
  }
}

/* Sección de equipo */

.team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px 0;
}

.team-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
}

.team-card {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.team-photo {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border-bottom: 2px solid #eaeaea;
}

.team-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 15px 0 5px;
  color: #2C3E50;
}

.team-role {
  font-size: 1rem;
  color: #95a5a6;
}

.team-description {
  font-size: 0.9rem;
  color: #7f8c8d;
  padding: 0 15px 15px;
}

.team-card:hover .team-name {
  color: #3498db;
}

.team-card:hover .team-role {
  color: #2c3e50;
}

@media (max-width: 600px) {
  .team-container {
      grid-template-columns: 1fr; 
      padding: 0 10px;
  }

  .team-card {
      width: 100%;
  }
}


@media (max-width: 900px) {
  .team-container {
      grid-template-columns: repeat(2, 1fr); 
  }
}


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

/* Estilos para el título */

.team-intro {
  text-align: center;
  margin: 30px 0;
}

.team-title {
  font-family: 'Arial', sans-serif; 
  font-size: 2.5rem; 
  font-weight: 600;
  color: #333; 
  margin: 0;
}


@media (max-width: 768px) {
  .team-title {
      font-size: 2rem; 
  }
}

@media (max-width: 480px) {
  .team-title {
      font-size: 1.5rem; 
  }
}

/* FOOTER*/
.info-contacto {
  background-color: #333; /* Fondo oscuro */
  color: rgb(255, 255, 255); /* Color de texto blanco */
  padding: 20px;
  border-radius: 8px; /* Bordes redondeados */
  text-align: left;
  width: 300px; /* Ancho ajustable */
  margin: 0 auto; /* Centrado en la página */
}

.info-contacto p {
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0;
}

.info-contacto i {
  color: #f39c12; /* Color dorado para los iconos */
  margin-right: 10px; /* Espacio entre el icono y el texto */
}

.info-contacto strong {
  color: #f39c12; /* Color dorado para los encabezados */
}


footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  max-width: 100%;
}

.footer-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

footer p {
  font-size: 14px;
  margin: 5px 0;
}

footer i {
  margin-right: 8px; 
}


.footer-socials {
  margin-top: 20px;
}

.footer-socials a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  margin: 0 15px;
  display: inline-block;
  transition: color 0.3s ease-in-out;
}

.footer-socials a:hover {
  color: #f39c12; 
}

@media (max-width: 768px) {
  footer {
      text-align: center;
  }

  .footer-container {
      padding: 0 10px;
  }

  .footer-socials a {
      font-size: 20px;
      margin: 10px 0;
  }
}
.footer-links {
  margin-bottom: 20px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  display: inline-block;
  margin: 0 15px;
}

.footer-links ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.footer-links ul li a:hover {
  color: #f39c12; 
}

/* Estilo del slider */

.slider-container {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 20px auto;
  overflow: hidden;
}


.slide {
  display: none;  
  width: 100%;
}

.slide img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}

/* Botones de navegación */

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  border: none;
  z-index: 1;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}


@media (max-width: 768px) {
  .slide img {
    height: 350px;  
  }

  .prev, .next {
    font-size: 20px;  
    padding: 8px; 
  }
}


@media (max-width: 480px) {
  .slide img {
    height: 250px;  
  }

  .prev, .next {
    font-size: 18px;  
    padding: 6px;  
  }
}

/* Contenedor de botones */
.botones-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  margin-bottom: 35px;
}

/* Estilo general para los botones */
.boton {
    color: #213469;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #213469;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    background: transparent;
    position: relative;
    transition: all 1s;
    overflow: hidden;
    width: 170px; 
    height: 80px; 
    border-radius: 10%;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .boton:hover {
    color: white;
    border-color: #fff;  
  }
  
  
  .boton::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    top: 0;
    left: -40px;
    transform: skewX(45deg);
    background-color: #213469;
    z-index: -1;
    transition: all 1s;
  }
  
  .boton:hover::before {
    width: 160%;
  }
  


  .imagen-contenedor {
    padding: 5%;               /* Espaciado alrededor de la imagen */
    display: inline-block;     /* Hace que el contenedor se ajuste al tamaño de la imagen */
    text-align: center;
    width: 100%;               /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.imagen-clickeable {
    width: 100%;               /* Hace que la imagen ocupe el 100% del ancho disponible del contenedor */
    max-width: 800px;          /* Limita el tamaño máximo de la imagen */
    height: auto;              /* Mantiene la proporción de la imagen */
    cursor: pointer;          /* Cambia el cursor a mano cuando pasas el mouse */
    border-radius: 8px;        /* Bordes redondeados en la imagen */
    padding: 5%;               /* Espaciado interno de la imagen */
}
@media (max-width: 400px) {
  .imagen-clickeable {
      width: 90%;            /* Reduce el tamaño de la imagen en pantallas más pequeñas */
      padding: 2%;           /* Reduce el padding en pantallas más pequeñas */
  }
}

@media (max-width: 200px) {
  .imagen-clickeable {
      width: 100%;           /* La imagen ocupará el 100% del ancho disponible en pantallas muy pequeñas */
      padding: 0;            /* Elimina el padding extra en pantallas pequeñas */
  }
}

/* NOTICIAS Y BLOGS*/
/* Estilo general del contenedor del blog */
.blog-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  width: 100%;               /* Asegura que el contenedor ocupe el 100% del ancho disponible */
}

.blog-post {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  padding: 20px;
  line-height: 1.8;  /* Espaciado entre líneas */
  text-shadow: #000;

}

.blog-title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'Times New Roman', Times, serif;
}

.blog-date {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}

.blog-content {
  margin-bottom: 20px;
  font-family: sans-serif;
  font-size: 16px;
}

.blog-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
}

.blog-video {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  margin-top: 10px;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
  .blog-title {
      font-size: 22px;          /* Ajusta el tamaño del título en pantallas medianas */
  }

  .blog-content {
      font-size: 14px;          /* Reduce el tamaño de la fuente del contenido */
  }

  .blog-video {
      height: 300px;            /* Ajusta la altura del video para pantallas medianas */
  }

  .blog-post {
      padding: 15px;            /* Reduce el padding de la publicación en pantallas medianas */
  }
}

@media (max-width: 480px) {
  .blog-title {
      font-size: 18px;          /* Ajusta aún más el tamaño del título para pantallas pequeñas */
  }

  .blog-content {
      font-size: 10px;          /* Reduce el tamaño del texto para pantallas pequeñas */
  }

   .blog-post {
      padding: 8px;            /* Reduce el padding de la publicación en pantallas muy pequeñas */
  }
}

/* Paginación */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.pagination button {
  background-color: #4b8cfb;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin: 0 10px;
}

.pagination button:hover {
  background-color: #3578e5;
}


/* Estilo para ocultar las publicaciones adicionales */
.hidden-posts {
    display: none;
}


/* Estilo para el botón flotante */
.scrollToTopBtn {
    position: fixed;
    bottom: 280px; /* Distancia desde el fondo */
    right: 15px; /* Distancia desde la derecha */
    background-color: #211853;
    color: rgb(255, 255, 255);
    border: none;
    padding: 10px;
    border-radius: 0%;
    font-size: 5px;
    cursor: pointer;
    display:none; /* Inicialmente oculto */
    z-index: 1000;
}

.scrollToTopBtn:hover {
    background-color: #636464;
}

.scrollToTopBtn i {
    font-size: 20px;
}
/* PDF DE HT.CUENTAS*/
.pdf-section {
    margin-bottom: 40px;
    width: 80%;
    padding: 35px;
}

.pdf-section h2 {
    color: #213469;
    margin-bottom: 10px;
    text-align: center;
}

.pdf-item {
    background-color: white;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pdf-item h3 {
    color: #213469;
}

.pdf-links {
    margin-top: 10px;
}

.pdf-links a {
    display: inline-block;
    margin-right: 15px;
    padding: 8px 15px;
    background-color: #f39c12;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.pdf-links a:hover {
    background-color: #f39c12;
}

/*CATALOGO EMPRESAS*/
.catalogo {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 10px; /* Espacio entre los logos */
    padding: 50px;
}

.empresa img {
    width: 100%; /* Hace que la imagen se ajuste al contenedor */
    max-width: 250px; /* Máximo tamaño del logo */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.empresa img:hover {
    transform: scale(1.1); /* Efecto de aumento cuando el cursor pasa sobre la imagen */
}

/* IMAGENES PRODUCTOS EMPRESAS*/
.empresa-description {
    text-align: center;
    margin-bottom: 30px;
    text-align: justify;
  }

  .product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly;
  }

  .product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18%;
    min-width: 200px;
  }

  .product-item img {
    width: 100%; /* Ancho completo del contenedor */
    height: 250px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que las imágenes mantengan sus proporciones sin deformarse */
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .product-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .product-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
  }

  /*BOTON MAS NOTICIAS*/
   
.contenedor-noticias {
  display: flex; /* Hacemos que el contenedor sea flexible */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
}

/* Estilos para el botón (enlace) */
.button-noticias {
  font-size: 1rem;
  padding: 0.8em 2em;
  background-color: #495c9c;
  border: 3px solid rgb(255, 255, 255);
  border-radius: 1em;
  color: #fff;
  font-weight: bolder;
  text-decoration: none; /* Elimina el subrayado del enlace */
  display: inline-block; /* Para que el enlace se comporte como un botón */
  transition: cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
  box-shadow: -5px 5px 0px 0px rgb(189, 189, 189);
}

.button-noticias:hover {
  transform: translate(5px, -5px);
}

/* Estilos para el texto dentro del enlace */
.contenedor-noticias a {
  text-align: center; /* Asegura que el texto dentro del enlace esté centrado */
}

/* CARD PARA EMPRESAS EXPORTADORAS */ 
.wrapper2 {
  display: flex;
  justify-content: center;  /* Centra horizontalmente */
  align-items: center;      /* Centra verticalmente */
  height: 75vh;            /* La altura del contenedor es igual a la altura de la ventana */
  margin: 0;                /* Elimina márgenes por defecto */
  background-image: url(Imagenes/SLIDER/white-abstract-background-vector.jpg);
  cursor: pointer;  /* Cambia el cursor para indicar que es clickeable */
  transition: transform 0.3s ease;  /* Si quieres algún efecto visual en hover */
}


section.card {
  position: relative;
  width: 700px;
  height: 350px;
  background-color: #474dc3;
  border-radius: 10px;
  display: grid;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 20, 20, 20 ,20px;
  background-image: url('Imagenes/EmpresasExportadoras.png'); /* Agrega la URL de tu imagen */
  background-size: cover; /* Hace que la imagen cubra toda la tarjeta */
  background-position: center; /* Centra la imagen */
}
.card-link {
  text-decoration: none;  /* Elimina el subrayado de los enlaces */
  
}

.card-link:hover .card {
  transform: scale(1.05);  /* Asegura que el hover también afecte la tarjeta */
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px #000000;
  background-color: #474dc3;
  color: #050505;
  text-align: center;
  
}

.card__content {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover .card__content {
  transform: rotateX(0deg);
}

.card__title {
  margin: 0;
  padding-left: 5px;
  font-size: 24px;
  color: var(--white);
  font-weight: 700;
}

.card:hover svg {
  scale: 0;
}

.card__description {
  margin: 10px 0 0;
  font-size: 14px;
  color: #000000;
  line-height: 1.4;
}



/*PARRAFOS DE EMPRESAS EXPORTADORAS*/

.parrafo-estilizado {
  font-size: 18px;  /* Tamaño de la fuente */
  line-height: 1.6;  /* Espaciado entre líneas */
  font-family: 'Arial', sans-serif;  /* Fuente personalizada */
  background-color: #f9f9f9;  /* Fondo claro */
  padding: 20px;  /* Espaciado interno */
  border-radius: 8px;  /* Bordes redondeados */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Sombra suave */
  color: #333;  /* Color del texto */
  max-width: 900px;  /* Ancho máximo para mantener el párrafo en un tamaño manejable */
  margin: 20px auto;  /* Centrado en la página */
  text-align: justify;  /* Alineación del texto */
  border-left: 5px solid #3498db;  /* Borde izquierdo azul para darle un toque */
  transition: all 0.3s ease;  /* Transición suave */
}

/* Efecto al pasar el mouse */
.parrafo-estilizado:hover {
  background-color: #ecf0f1;  /* Fondo más claro al pasar el mouse */
  transform: translateY(-5px);  /* Desplazamiento hacia arriba */
}

/* BANNER DE INFO UTIL*/
.banner {
  background-image: url(Imagenes/PLAZA/Plano\ Plaza\ San\ Martin-\ Noche.jpg);
  color: white;
  text-align: center;
  padding: 150px 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.banner-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 16px;
  margin-bottom: 20px;
}




/* Estilo para la descripción general */
.descripcion-general {
  margin-bottom: 20px;
}

.descripcion-general h2 {
  font-size: 24px;
  font-weight: bold;
}

.descripcion-general p {
  font-size: 16px;
  line-height: 1.6;
}

/* Estilo de la galería */
.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.galeria-item {
  width: 30%;
  text-align: center;
  margin-bottom: 20px;
}

.galeria-imagen {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.descripcion-imagen {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

/* BANER DE NOTICIAS*/
.baner {
  background-color: rgb(255, 255, 255);
  color: rgb(19, 11, 95);
  text-align: center;
  padding: 0px 0;
  width: 100%;
  position: flex;
  box-sizing: border-box;
  align-items: center;
  margin-top: 0px;
}

.baner-content h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

.baner-content p {
  font-size: 16px;
  margin-bottom: 50px;
}

/*DIRECTORIO DE TELEFONOS*/

.card-container {
  display: flex; /* Disposición horizontal */
  justify-content: center; /* Centra las tarjetas */
  gap: 20px; /* Espacio entre las tarjetas */
  margin: 25px; /* Márgenes de 25px alrededor de la caja que contiene las tarjetas */
  flex-wrap: wrap; /* Permite que las tarjetas pasen a la siguiente línea si no caben */
}

.e-card {
  background: white;
  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
  position: relative;
  width: 180px; /* Ancho ajustado para que las tarjetas se vean bien */
  height: 80px; /* Altura ajustada */
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para hover */
}

.e-card:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada */
}

.wave {
  position: absolute;
  width: 540px;
  height: 700px;
  opacity: 0.6;
  left: 0;
  top: 0;
  margin-left: -50%;
  margin-top: -70%;
  background: linear-gradient(744deg, #af40ff, #5b42f3 60%, #00ddeb);
}

.infotop {
  text-align: center;
  font-size: 10px; /* Fuente más pequeña */
  position: absolute;
  top: 2em; /* Ajustamos la posición del contenido */
  left: 0;
  right: 0;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

.name {
  font-size: 18px; /* Tamaño ajustado */
  font-weight: 100;
  text-align: center;
}

.phone-number {
  font-size: 14px; /* Tamaño ajustado */
  font-weight: 400;
  margin-top: 0.5em; /* Separación para evitar superposición */
  text-align: center;
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 210px;
}

.playing .wave {
  border-radius: 70%;
  animation: wave 3000ms infinite linear;
}

.wave {
  border-radius: 70%;
  animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 4000ms;
}

.wave:nth-child(2) {
  animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  animation-duration: 5000ms;
}

.wave:nth-child(3) {
  animation-duration: 45s;
}

@keyframes wave {
  10% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

h1 span.obraspublicas{
  align-items: center;
  text-align: center;
  padding: 500px;
}



/*PDF Y LOGO OBRAS PRIVADAS*/
.tramites-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
p, ul {
  margin: 10px 0;
  padding-left: 20px;
}

ul {
  list-style-type: disc;
}

strong {
  font-weight: bold;
}
.pdf-item {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas de igual tamaño */
  gap: 20px; /* Espacio entre las columnas */
  margin-top: 20px; /* Espacio superior */
}

/* Estilo para cada entrada del PDF */
.pdf-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* Centra el texto debajo del logo */
  padding: 10px;
  border: 1px solid #ddd; /* Añade borde opcional */
  border-radius: 8px; /* Bordes redondeados para las cajas */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  background-color: #ffffff; /* Fondo suave */
  height: 300px; /* Altura constante para alinear los botones de manera uniforme */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Alinea los elementos para que los botones estén al final */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el zoom y sombra */
}

.pdf-entry:hover {
  transform: translateY(-5px); /* Efecto de elevar ligeramente la entrada */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en el hover */
}

.pdf-entry .logo {
  width: 100px; /* Aumentamos el tamaño de la imagen */
  height: 100px; /* Mantiene la imagen circular */
  border-radius: 50%; /* Hace la imagen circular */
  border-color: rgb(247, 165, 33);
  border-style:dotted;
  margin-bottom: 10px; /* Espacio entre el logo y el título */
  object-fit: cover; /* Asegura que la imagen se recorte adecuadamente */
  transition: transform 0.3s ease; /* Transición suave para el zoom de la imagen */
}

.pdf-entry .logo:hover {
  transform: scale(1.1); /* Efecto de zoom en la imagen */
}

.pdf-entry h3 {
  margin: 0 0 10px 0; /* Elimina margen superior y agrega espacio abajo */
  font-size: 14px; /* Reducimos el tamaño del título */
  font-weight: 600; /* Peso de fuente para que el título resalte */
}

.pdf-entry .pdf-links {
  margin-top: auto; /* Alinea los enlaces hacia la parte inferior */
}

.pdf-entry .pdf-links a {
  text-decoration: none;
  color: #f39c12; /* Color del enlace */
  font-weight: bold; /* Estilo en negrita para el enlace */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 1200px) {
  .pdf-item {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas para pantallas más pequeñas */
  }
}

@media (max-width: 900px) {
  .pdf-item {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
  }
}

@media (max-width: 600px) {
  .pdf-item {
    grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas (móviles) */
  }

  .pdf-entry .logo {
    width: 80px; /* Reducimos el tamaño de la imagen para pantallas pequeñas */
    height: 80px;
  }

  .pdf-entry h3 {
    font-size: 12px; /* Reducimos el tamaño de la fuente */
  }
}


/*MAPA INTERACTIVO*/
/* Contenedor que envuelve las tarjetas */
.cards-container {
  display: flex;
  justify-content: center; /* Centra las tarjetas horizontalmente */
  gap: 20px; /* Espacio entre las tarjetas */
  padding: 20px; /* Espacio alrededor */
}

/* Tarjeta Mapa Interactivo */
.card-mapa-interactivo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px; /* Hacemos las tarjetas más pequeñas */
  padding: 8px; /* Reducimos el padding */
  border-radius: 16px; /* Menos redondeado */
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #ff7f00; /* Color de fondo naranja */
}

.content-mapa-interactivo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* Menos espacio entre los elementos */
  padding: 12px; /* Reducimos el padding interno */
  border-radius: 14px;
  color: #ffffff;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content-mapa-interactivo .heading {
  font-weight: 700;
  font-size: 18px; /* Reducimos el tamaño de la fuente */
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content-mapa-interactivo .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 14px; /* Fuente más pequeña */
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-mapa-interactivo::before {
  content: "";
  position: absolute;
  height: 140%; /* Hacemos la animación un poco más pequeña */
  width: 140%; /* Reducimos el tamaño del fondo */
  border-radius: inherit;
  background: #eb9e52; /* Color de fondo naranja */
  transform-origin: center;
  animation: moving 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-mapa-interactivo:hover::before {
  animation-play-state: running;
  z-index: -1;
  width: 15%; /* Ajustamos el tamaño del hover */
}

.card-mapa-interactivo:hover .content-mapa-interactivo .heading,
.card-mapa-interactivo:hover .content-mapa-interactivo .para {
  color: #000000; /* Texto negro al hacer hover */
}

.card-mapa-interactivo:hover {
  box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
  scale: 1.05;
  color: #000000;
}

/* Tarjeta Gráfico 23 */
.card-grafico-23 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px; /* Hacemos las tarjetas más pequeñas */
  padding: 8px; /* Reducimos el padding */
  border-radius: 16px; /* Menos redondeado */
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #00bfff; /* Color de fondo celeste */
}

.content-grafico-23 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* Menos espacio entre los elementos */
  padding: 12px; /* Reducimos el padding interno */
  border-radius: 14px;
  color: #ffffff;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content-grafico-23 .heading {
  font-weight: 700;
  font-size: 18px; /* Reducimos el tamaño de la fuente */
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content-grafico-23 .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 14px; /* Fuente más pequeña */
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-grafico-23::before {
  content: "";
  position: absolute;
  height: 140%; /* Hacemos la animación un poco más pequeña */
  width: 140%; /* Reducimos el tamaño del fondo */
  border-radius: inherit;
  background: #95d9f0; /* Color de fondo celeste */
  transform-origin: center;
  animation: moving 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-grafico-23:hover::before {
  animation-play-state: running;
  z-index: -1;
  width: 15%; /* Ajustamos el tamaño del hover */
}

.card-grafico-23:hover .content-grafico-23 .heading,
.card-grafico-23:hover .content-grafico-23 .para {
  color: #000000; /* Texto negro al hacer hover */
}

.card-grafico-23:hover {
  box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
  scale: 1.05;
  color: #000000;
}

/* Animación de rotación */
@keyframes moving {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Fondo específico para la subpágina-ObrasPrivadas */
.subpage-container {
  background-image: url(Imagenes/SLIDER/fondo-obrasprivadas.png); /* Cambia este color por el que prefieras */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

a {
  text-decoration: none;
}

/*TRAMITES OBRAS PRIVADAS*/
.tramites-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Títulos principales */
.titulo-principal {
  font-size: 2.5rem;
  text-align: center;
  color: #2c3e50; /* Color oscuro para el título principal */
  margin-bottom: 20px;
  text-transform: uppercase; /* Texto en mayúsculas */
}

/* Títulos de sección */
.titulo-seccion {
  font-size: 2rem;
  color: #e67e22; /* Color vibrante para los subtítulos */
  margin-top: 30px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e67e22; /* Línea inferior para resaltar el subtítulo */
  padding-bottom: 5px;
}

/* Estilo de párrafos */
p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #555; /* Texto de párrafo con color más suave */
}

/* Estilo de listas */
ul {
  list-style: disc;
  margin-left: 20px;
  line-height: 1.8; /* Interlineado más amplio para listas */
}

/* Estilo de links */
a {
  color: #3498db; /* Color azul para enlaces */
  text-decoration: none;
}


/* Mejorar el aspecto de los enlaces importantes */
strong {
  font-weight: 600;
  color: #1e1d1d;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
  .titulo-principal {
      font-size: 2rem; /* Reducir el tamaño en pantallas más pequeñas */
  }
  
  .titulo-seccion {
      font-size: 1.5rem; /* Reducir los subtítulos */
  }

  p {
      font-size: 0.9rem; /* Ajustar el tamaño de los párrafos */
  }
}

@media (max-width: 480px) {
  .titulo-principal {
      font-size: 1.6rem; /* Aún más pequeño para dispositivos móviles */
  }
  
  .titulo-seccion {
      font-size: 1.3rem; /* Subtítulos aún más pequeños */
  }

  ul {
      margin-left: 15px; /* Ajustar la lista en pantallas muy pequeñas */
  }
}
/* Estilos para el nuevo contenedor y el enlace */
.pdf-button-container {
  text-align: center; /* Centra el botón dentro del contenedor */
  margin-top: 20px; /* Separación del contenido superior */
  align-items: center;
  text-align: center;
}

.pdf-button-container a {
  display: inline-block;
  text-decoration: none;
  color: #fff; /* Color del texto */
  background-color: #f39c12; /* Fondo verde */
  padding: 12px 24px; /* Relleno en el botón */
  border-radius: 8px; /* Bordes redondeados */
  font-size: 16px; /* Tamaño de la fuente */
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: all 0.3s ease; /* Transición suave para los efectos */
 
}

.pdf-button-container a:hover {
  background-color: #f39c12; /* Fondo más oscuro cuando se pasa el ratón */
  color: #ffffff; /* El texto se vuelve blanco al pasar el ratón */
  transform: translateY(-4px); /* Efecto de elevación */
}


/*REDES SOCIALES HEADER*/
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
  background-color: #128c7e;
}

.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #3b5998;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}

/*EFECTO ACORDION PARA BOLETINES*/

.boletines-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1120px; /* Espacio entre los contenedores */
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
}

.year {
  flex: 1 1 calc(70% - 30px); /* Contenedor de año con un poco menos de ancho */
  max-width: 100%;
  min-width: 250px;
  border-radius: 15px; /* Bordes redondeados */
  background: linear-gradient(135deg, #ffffff, #ffffff); /* Fondo con gradiente suave */
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto suave al interactuar */
}

.year:hover {
  transform: translateY(-10px); /* Efecto de elevación al hacer hover */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Más sombra al hacer hover */
}

.year h2 {
  text-align: center;
  color: #f39c12; /* Color vibrante para los títulos */
  font-size: 24px; /* Tamaño de fuente más grande */
  margin-bottom: 15px;
  font-weight: bold;
}

.pdf-lista {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* 3 columnas por fila */
  gap: 15px; /* Espacio entre los PDFs */
}

.pdf-item {
  text-align: center;
}

.pdf-item a {
  text-decoration: none;
  color: black; /* Color atractivo para los enlaces */
  font-weight: bold;
  padding: 12px 15px;
  border-radius: 8px; /* Bordes redondeados */
  background-color: #ffffff; /* Fondo blanco para los enlaces */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  display: inline-block;
  width: 100%;
  transition: all 0.3s ease; /* Transición suave para los efectos */
  font-size: 14px;
}

.pdf-item a:hover {
  background-color: #f39c12; /* Fondo verde oscuro al hacer hover */
  color: #ffffff; /* Texto blanco cuando se hace hover */
  transform: translateY(-4px); /* Levantar ligeramente el enlace */
}

@media (max-width: 768px) {
  .boletines-container {
      width: 80%;
  }

  .year {
      flex: 1 1 100%; /* En pantallas pequeñas, los contenedores de año ocupan el 100% */
      max-width: 100%;
  }

  .pdf-lista {
      grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas pequeñas */
  }
}


/* ESCRITURA TUS TRAMITES */

/* Reset de márgenes y padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.container-escritura {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}

/* Estilo general del texto */
h1 {
  font-size: 4rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Palabra 'Tus' estática */
.tus {
  color: black;
  font-size: 4rem; /* Tamaño más pequeño para 'Tus' */
  margin-bottom: 20px; /* Espacio entre 'Tus' y 'Trámites' */
  text-transform: uppercase; /* Fuerza las mayúsculas */
}

/* Estilo de la animación de escritura para 'Trámites' */
.tramites {
  color: orange;
  font-size: 4rem; /* Tamaño más grande para 'Trámites' */
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px solid black; /* Barra de escritura */
  display: inline-block;
  width: 0;
  animation: escribir 4s steps(20) 1 forwards, cursorDesaparecer 0.5s 4s forwards;
}

/* Animación de escritura */
@keyframes escribir {
  0% {
      width: 0;
  }
  100% {
      width: 10ch; /* El ancho final es el largo de 'Trámites' */
  }
}

/* Animación para que el cursor desaparezca */
@keyframes cursorDesaparecer {
  100% {
      border-color: transparent; /* Desaparece el cursor */
  }
}


/*MAPA INTERACTIVO*/

/* Asegurar que los elementos del formulario y mapa estén en una fila (Flexbox) */
.input-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten a una nueva línea si es necesario */
  justify-content: space-between;
  gap: 20px; /* Añadido espacio entre los elementos */
}

/* Ajustar el tamaño del contenedor del mapa */
.map-container {
  flex: 1; /* El mapa ocupará el 50% de la fila si el contenedor tiene 2 elementos */
  padding-left: 20px;
  min-width: 300px; /* Esto asegura que el mapa no se vuelva demasiado pequeño */
}

/* Asegurarse de que el mapa sea más pequeño */
.map-container iframe {
  width: 100%;
  height: 300px; /* Ajustamos la altura para que el mapa sea más pequeño */
}

/* Para pantallas pequeñas, cambiar la disposición */
@media screen and (max-width: 767px) {
  .input-container {
      flex-direction: column; /* Esto asegura que el formulario y el mapa se apilen uno encima del otro en pantallas pequeñas */
  }

  /* Ajuste para el mapa en pantallas pequeñas */
  .map-container {
      padding-left: 0;
      margin-top: 20px;
      min-width: 100%;
  }
}