/* ============================================= */
/* ESTILOS GLOBALES */
/* ============================================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden; /* Evita el scroll horizontal causado por animaciones */
}


/* ============================================= */
/* HEADER SUPERIOR */
/* ============================================= */
.header-arriba{
    height: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8%;
    width: 100%;
    background-color: #334d80;
    
}
.cristo{
    height: 80px;
}
.reclamaciones {
    height: 68px;
}

/* ============================================= */
/* BARRA DE NAVEGACIÓN */
/* ============================================= */
nav{
    background-color: #6699ff;
    width: 100%;
    padding: 0px 8%;
    height: 40px;
    box-sizing: border-box;
}
.cambiar-color{
  background-color: none;
  color: white;
}
nav ul{
    gap: 20px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
nav ul li {
      position: relative;
    }
nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    display: block;
    }

.color-white:hover {
    color: #fdffff;
    background-color: #444;
}
.color-white{
  background-color: #334d80;
  color: white;
}
nav ul li ul {
    display: none;
    position: absolute;
    min-width: 180px;
    list-style: none;
    border-radius: 0 0 5px 5px;
    z-index: 10;
    }
   nav ul li ul li a {
      padding: 10px 20px;
    }

    /* Mostrar al pasar el mouse */
    nav ul li:hover ul {
      display: block;
      
    }

/* ============================================= */
/* ELEMENTOS DEL HEADER (SERENAZGO) */
/* ============================================= */
.serenazgo p {
    font-size: 20px;
    font-weight: 100;
    color: white;
    
}
.serenazgo {
    display: flex;
    gap: 10px;
}
.serenazgo i{
    font-size: 40px;
    color: white;
}
.serenazgo-numero {
    font-size: 30px;
    font-weight: bold;
    color: #a8c142;
}

/* ============================================= */
/* BOTÓN DE SESIÓN */
/* ============================================= */
.iniciar-sesion {
  background-color: rgb(0, 0, 0);
  padding: 10px;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.nose {
  margin-right: 20px;
}

/* ============================================= */
/* PORTADA 1: SLIDER Y ACCESOS DIRECTOS */
/* ============================================= */
.portada1{
    width: 100%;
    height: auto;
    background-image: linear-gradient(#334d80 , #6699ff);
    display: flex;
    flex-direction: column;
    padding: 0px 8%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.contenedor-java {
    height: 400px;
    width: 100%;
    background-color: aliceblue;
}
.contenedor-tarjetas {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px 10px ;
    flex-wrap: wrap;
    gap: 20px;
}
.tarjetas {
    width: auto;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Estado inicial para la animación con JS */
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.tarjetas img {
    width: 70%;
    height: 70%;
}
.tarjetas a{
    text-align: center;
    margin-top: 10px;
    text-decoration: none;
    color: white;
}
.tarjetas a:hover{
  color: #addc3b;
  transform: translateY(10px);
}
.page {
    height: 110px;
    /* Estado inicial para la animación con JS */
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Clase que se añadirá con JS para activar la animación */
.tarjetas.visible,
.page.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================= */
/* SLIDER DE VIDEOS (PORTADA 1) */
/* ============================================= */
   .slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 450px;
  overflow: hidden;
  margin: auto;
  border-bottom: 6px solid #a8c142;
  margin-top: 30px;
  z-index: 0;
}


    /* --- CARRUSEL DE VIDEOS --- */
    .slides {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease-in-out;
    }

    .slides video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
    }

    /* --- BOTONES DE NAVEGACIÓN --- */
    .buttons {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      padding: 0 15px;
      box-sizing: border-box;
    }

    .buttons button {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      font-size: 24px;
     width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .buttons button:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    /* --- INDICADORES (puntos abajo) --- */
    .indicators {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
    }

    .indicators span {
      display: block;
      width: 12px;
      height: 12px;
      background: rgba(255,255,255,0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s;
    }

    .indicators .active {
      background: #fff;
    }

/* ============================================= */
/* PORTADA 2: TÍTULO NOTICIAS */
/* ============================================= */
.portada2{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a8c142;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eee;
}

/* ============================================= */
/* PORTADA 3: SECCIÓN DE NOTICIAS */
/* ============================================= */
.portada3-contenedor{
  padding: 0px 8%;
  width: 100%;
  height: auto;
  display: flex;
  background-color: #eee;
  padding-bottom: 50px;
}
.portada3-principal{
  width: 70%;
}
  
.portada3-principal img {
    width: 100%;
}
.portada3-contenedor-tarjetas {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contenedor-tarjetas-arriba{
    display: flex ;
    margin-top: 20px;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.tarjeta-arribap3 a {
    display: block;
    overflow: hidden;
}
.tarjeta-arribap3 img {
    transition: transform 0.4s ease-in-out;
    display: block;
}
.portada3-tarjetas:hover .tarjeta-arribap3 img {
    transform: rotate(3deg) scale(1.05);
}

.portada3-tarjetas{
    flex: 1 1 200px;
}
.cuadrito{
    background-color: #6699ff;
    position: absolute;
    bottom: 0;
    padding: 10px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 12px;
}
.number{
    font-size: 20px;
    font-weight: bold;
}

.tarjeta-arribap3{
    position: relative;
}
.tarjeta-abajop3 {
    background-color: white;
    padding: 15px;
}
.tarjeta-abajop3 a {
    text-decoration: none;
    color: inherit;
}

.tarjeta-abajop3 a:hover {
    text-decoration: underline;
}


/* ============================================= */
/* ASIDE (BARRA LATERAL DE PORTADA 3) */
/* ============================================= */
aside {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; 
}
aside img {
    width: 100%;
    flex: 1 1 200px;
}

/* ============================================= */
/* PORTADA 4: BANNERS INFORMATIVOS */
/* ============================================= */
.portada4{
    width: 100%;
    padding: 50px 8%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    background-color: #ddd4;

}
.portada4 a {
    flex: 1;
    min-width: 0;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portada4 img {
    width: 100%;
    height: 100%;

}

.portada4 a:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================= */
/* PORTADA 9 (SECCIÓN OBSOLETA/SIN USO APARENTE) */
/* ============================================= */
.portada9{
    width: 100%;
    height: 100px;
    background-color: #ccc;
    padding: 0px 8%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.portada9 img {
    height: 50px;

}

/* ============================================= */
/* FOOTER (PIE DE PÁGINA) */
/* ============================================= */
footer { 
  color: #fff;

}

.footer-arriba {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
  padding: 50px 8%;
  background-color: #1c2a48;
  color: #e0e1dd;
  flex-wrap:wrap;
}
.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  width: auto;
  min-height: 100px;
  margin-right: 15px;
}

.social-icons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  gap: 10px;
}

.social-icons a {
  color: #fff;
  font-size: 24px;
  margin: 0 8px;
  text-decoration: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Colores específicos para cada red social */
.social-icons a[href*="facebook.com"] { background-color: #1877F2; }
.social-icons a[href*="twitter.com"] { background-color: #000000; }
.social-icons a[href*="youtube.com"] { background-color: #FF0000; }
.social-icons a[href*="tiktok.com"] {
  background: linear-gradient(135deg, #00f2ea, #ff0050);
}
.contact-info{
    line-height: 1.6;
}
.contact-info h4, .legal-links h4 {
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 8px;
}
.contact-info h4::after, .legal-links h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: #a8c142;
}
.legal-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: left;
}
.footer-abajo {
    height: 50px;
    padding: 0px 8%;
    background-color: #6699ff;
    font-weight: 100;
    font-size: 14px;
    display: flex;
    align-items: center;


    }

.legal-links a img {
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.legal-links a:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.footer-abajo p {
  color: white;
}

/* ============================================= */
/* PORTADA 5: SALUDO DEL ALCALDE */
/* ============================================= */
.portada5 {
  min-height: 300px;
  position: relative;
   
}
.saludo-alcalde {
    position: absolute;
    right: 8%;
    bottom: 70px;
}
.portada5 p {
  color: #888888;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
}
.portada5 h3 {
  color: #addc3b;
  font-size:30px;
  font-weight: bold;
  line-height: 1.2;
}

/* ============================================= */
/* PORTADA 7: INFORMACIÓN COVID-19 */
/* ============================================= */
.portada7 {
  display: flex;
  background-color: #BED428;
  padding: 40px 8%;
  gap: 20px;
}
.portada7 img {
  height: 100%;
  max-width: 400px;
}

.portada7-contenedor {
  width: 100%;
  max-width: 1200px;
}

.portada7-contenedor h4 {
  font-size: 28px;
  font-weight: bolder;
  margin-bottom: 10px;
  color: #fff;
}

.portada7-contenedor p {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
.portada7-imagenes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.portada7-tarjetas {
  padding: 20px;
  color: #fff;
  text-align: center;
}

.portada7-tarjetas img {
  width: 80px;
  height: auto;
  margin-bottom: 15px;
}

.portada7-tarjetas a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.portada7-tarjetas a:hover {
  color: #253108;
}

.portada7-tarjetas h5 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

.portada7-tarjetas p {
  font-size: 14px;
  margin: 5px 0 0 0;
}

/* ============================================= */
/* PORTADA 6: SERVICIOS MUNICIPALES */
/* ============================================= */
.portada6 {
  background-color: #2e4a81;
  padding: 50px 8%;
}

.portada6-contenedor {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.portada6-contenedor a {
  text-decoration: none;
  color: inherit;
}

.portada6-tarjetas {
  display: flex;
  flex-direction: column;
  width: 180px;
  padding: 20px 10px;
  color: #fff;
  /* Estado inicial para la animación con JS */
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.portada6-tarjetas img {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
}

.portada6-tarjetas h5 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
}

.portada6-tarjetas p {
  font-size: 14px;
  margin: 5px 0 0 0;
  line-height: 1.3;
}

/* Clase que se añadirá con JS para activar la animación */
.portada6-tarjetas.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================= */
/* PORTADA 8: SLIDER DE OBRAS */
/* ============================================= */
.portada8 {
  background-color: #f0f3f6;
  padding: 50px 8%;
  text-align: center;
}

.portada8 h3 {
  color: #a4d257;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.portada8 > div {
  background-color: #e4eaf2;
  border-radius: 8px;
  width: 100%;
  padding: 30px;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.portada8-contenido {
  display: flex;
  flex-direction: column;
}

.portada8-contenido h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #2e4a81;
}
.portada8-contenido hr {
  width: 50px;
  height: 2px;
  background-color: #2e4a81;
  border: none;
  margin: 0 0 10px 0;
}

.portada8-contenido p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* ============================================= */
/* BOTÓN FLOTANTE DE WHATSAPP */
/* ============================================= */
.wasap {
  bottom: 20px;
  right: 20px;
}
.wasap a, #scrollTopBtn {
  text-decoration: none;
}
.wasap, #scrollTopBtn {
  background-color: #25D366;
  position: fixed;
  border-radius: 50%;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wasap:hover, #scrollTopBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.wasap img {
  width: 30px;
  height: 30px;
}

/* ============================================= */
/* BOTÓN VOLVER ARRIBA */
/* ============================================= */
#scrollTopBtn {
  /* Estilo inicial (oculto) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
  
  /* Diseño y posición */
  background-color: #b9bfcc;
  font-size: 18px;
  bottom: 90px; /* Posición sobre el botón de WhatsApp */
  right: 28px;
  z-index: 101; /* Un z-index más alto para asegurar visibilidad */
  cursor: pointer;
  border: none;
}
.fas:hover{
  color: white;
}
/* Clase que se añade con JS para mostrar el botón */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  background-color: #5a88e8;
  transform: scale(1.1) translateY(-5px); /* Efecto de elevación */
}

/* ============================================= */
/* ESTILOS PARA SLIDERS (SWIPER.JS) */
/* ============================================= */
.swiper {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      padding: 20px 0;

    }

    .obrasSwiper .swiper-slide {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .swiper-slide img {
      width: 80%;
      max-height: 150px;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
    
    .swiper-slide a:hover img {
      transform: scale(1.05);
    }

    .slider-wrapper {
      position: relative;
      width: 100%;
    }
    .obrasSwiper .slide-logo {
      width: 170px;
      margin-bottom: 1.5rem;
    }

    .obrasSwiper .slide-description {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
    }

    .obrasSwiper .slide-meta {
      font-weight: bold;
      color: #004080;
      font-size: 1.1rem;
    }

/* ============================================= */
/* ESTILOS RESPONSIVOS (MEDIA QUERIES) */
/* ============================================= */

/* Estilos para el botón del menú hamburguesa (oculto por defecto) */
/* --- Media Query para tablets y móviles (hasta 768px) --- */
@media (max-width: 768px) {
  /* --- HEADER SUPERIOR --- */
  .header-arriba {
    flex-direction: column;
    height: auto;
    padding: 20px 5%;
    gap: 20px;
  }
  .header-arriba .reclamaciones, .header-arriba .cristo {
    max-width: 150px;
  }

  /* --- BARRA DE NAVEGACIÓN --- */
  nav {
    padding: 0 5%;
    height: 60px;
  }
  .menu-toggle {
    display: block; /* Hacemos visible el botón hamburguesa */
  }
  nav ul {
    display: none; /* Ocultamos el menú por defecto */
    flex-direction: column;
    position: absolute;
    top: 200px; /* Ajustar según la altura del header + nav */
    left: 0;
    width: 100%;
    background-color: #334d80;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  nav ul.active {
    display: flex; /* Mostramos el menú cuando tiene la clase 'active' */
  }
  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li a {
    padding: 15px;
  }
  nav ul li ul {
    position: static; /* Submenús se despliegan dentro del flujo normal */
    background-color: #2e4a81;
    width: 100%;
  }
  .iniciar-sesion {
    margin: 10px 15px;
    text-align: center;
  }

  /* --- PORTADA 1: SLIDER Y ACCESOS --- */
  .portada1 { padding: 0 5%; }
  .slider { height: 300px; }
  .contenedor-tarjetas {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  /* --- PORTADA 3: NOTICIAS --- */
  .portada3-contenedor, .portada3-principal {
    flex-direction: column;
    width: 100%;
  }
  .contenedor-tarjetas-arriba {
    flex-direction: column;
  }
  aside {
    width: 100%;
    margin-top: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  aside img { max-width: 48%; }

  /* --- PORTADA 4: BANNERS --- */
  .portada4 { flex-direction: column; padding: 30px 5%; }

  /* --- PORTADA 6: SERVICIOS --- */
  .portada6 { padding: 30px 5%; }
  .portada6-contenedor {
    flex-direction: column;
    align-items: center;
  }

  /* --- PORTADA 7: COVID --- */
  .portada7 { flex-direction: column; padding: 30px 5%; }
  .portada7-imagenes { flex-direction: column; }


 
}