/* ══════════════════════════════════════════════════════════════════════
   VARIABLES GLOBALES (paleta de colores, tipografías y medidas)
   Tomadas del sistema de diseño original del sitio en Figma Make
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Colores institucionales */
  --color-primario: #0A1F4E;          /* Azul institucional (fondos oscuros, botones) */
  --color-primario-hover: #1A3572;    /* Azul institucional al pasar el mouse */
  --color-primario-profundo: #05101F; /* Azul casi negro (degradado del hero) */
  --color-acento: #B8922A;            /* Dorado (botones y detalles destacados) */
  --color-acento-hover: #CF9F30;      /* Dorado al pasar el mouse */
  --color-acento-claro: #D4A940;      /* Dorado claro (texto sobre fondos oscuros) */

  /* Colores de fondo */
  --color-fondo-pagina: #F5F7FB;      /* Fondo general claro */
  --color-fondo-blanco: #ffffff;
  --color-fondo-superficie: #EEF1F8;  /* Fondo de íconos y superficies suaves */
  --color-fondo-pie-pagina: #060D1B;  /* Fondo casi negro del footer */

  /* Colores de texto */
  --color-texto-principal: #0B1426;
  --color-texto-oscuro: #0A1F4E;
  --color-texto-secundario: #6B7A99;  /* Texto gris (descripciones) */
  --color-texto-terciario: #3B4D6E;   /* Texto gris más oscuro (párrafos) */
  --color-texto-claro: #C8D0E0;

  /* Bordes */
  --color-borde: rgba(14, 42, 92, 0.1);
  --color-borde-suave: rgba(10, 31, 78, 0.07);

  /* Tipografías */
  --fuente-titulos: 'Bricolage Grotesque', sans-serif;
  --fuente-texto: 'DM Sans', sans-serif;

  /* Medidas generales */
  --ancho-contenedor: 1280px;
  --radio-borde: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET BÁSICO Y ESTILOS GENERALES
   ══════════════════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  color: var(--color-texto-principal);
  background-color: var(--color-fondo-pagina);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* Contenedor centrado reutilizable, igual al max-w-7xl del diseño original */
.contenedor {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) {
  .contenedor { padding: 0 24px; }
}

/* Clases utilitarias de visibilidad responsiva */
.ocultar-en-movil { display: none; }
@media (min-width: 640px) {
  .ocultar-en-movil { display: flex; }
}

.ocultar-hasta-md { display: none; }
@media (min-width: 768px) {
  .ocultar-hasta-md { display: inline-flex; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÍCONOS (Lucide)
   ══════════════════════════════════════════════════════════════════════ */
.icono-xs { width: 12px; height: 12px; }
.icono-sm { width: 14px; height: 14px; }
.icono-md { width: 19px; height: 19px; }

/* ══════════════════════════════════════════════════════════════════════
   BOTONES REUTILIZABLES
   ══════════════════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radio-borde);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.boton--primario {
  background-color: var(--color-primario);
  color: #fff;
}
.boton--primario:hover { background-color: var(--color-primario-hover); }

.boton--acento {
  background-color: var(--color-acento);
  color: #fff;
}
.boton--acento:hover { background-color: var(--color-acento-hover); }

.boton--contorno {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 500;
}
.boton--contorno:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background-color: rgba(255, 255, 255, 0.1);
}

.boton--contorno-acento {
  border: 1px solid rgba(184, 146, 42, 0.4);
  color: var(--color-acento-claro);
  justify-content: center;
  width: 100%;
}
.boton--contorno-acento:hover {
  border-color: var(--color-acento);
  background-color: rgba(184, 146, 42, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════
   TÍTULOS Y ETIQUETAS REUTILIZABLES
   ══════════════════════════════════════════════════════════════════════ */
.etiqueta {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.etiqueta--acento { color: var(--color-acento); }
.etiqueta--acento-claro { color: var(--color-acento-claro); }

.etiqueta-pequena {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  font-weight: 600;
  border: 1px solid var(--color-borde);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
  white-space: nowrap;
}

.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: 32px;
  font-weight: 700;
}
@media (min-width: 640px) {
  .titulo-seccion { font-size: 40px; }
}
.titulo-seccion--oscuro { color: var(--color-primario); }
.titulo-seccion--claro { color: #fff; }

.encabezado-seccion { margin-bottom: 48px; }
.encabezado-seccion--centrado { text-align: center; }
.encabezado-seccion--con-enlace {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.enlace-ver-todos {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.enlace-ver-todos--oscuro { color: var(--color-primario); }
.enlace-ver-todos--oscuro:hover { color: var(--color-acento); }
.enlace-ver-todos--claro { color: var(--color-acento-claro); }
.enlace-ver-todos--claro:hover { color: #fcd34d; }

/* Secciones genéricas de fondo */
.seccion { padding: 80px 0; }
.seccion--fondo-claro { background-color: var(--color-fondo-pagina); }
.seccion--fondo-blanco { background-color: var(--color-fondo-blanco); }
.seccion--fondo-oscuro { background-color: var(--color-primario); }

/* ══════════════════════════════════════════════════════════════════════
   ANIMACIÓN DE APARICIÓN AL HACER SCROLL (equivalente al "Appear" de React)
   La clase .visible la agrega js/script.js mediante IntersectionObserver
   ══════════════════════════════════════════════════════════════════════ */
.revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR
   ══════════════════════════════════════════════════════════════════════ */
.barra-superior {
  background-color: var(--color-primario);
  padding: 8px 16px;
}
.barra-superior__contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 4px;
  column-gap: 24px;
}
.barra-superior__nombre {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--fuente-titulos);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.barra-superior__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  column-gap: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}
.barra-superior__enlace,
.barra-superior__horario,
.barra-superior__accesibilidad {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  transition: color 0.2s ease;
}
.barra-superior__enlace:hover,
.barra-superior__accesibilidad:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   ENCABEZADO / NAVEGACIÓN
   ══════════════════════════════════════════════════════════════════════ */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid var(--color-borde-suave);
  transition: all 0.3s ease;
}
.encabezado.con-scroll {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 16px rgba(10, 31, 78, 0.09);
  border-bottom-color: transparent;
}

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

/* Logotipo */
.logotipo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logotipo__icono {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.2s ease;
}
.logotipo:hover .logotipo__icono { background-color: var(--color-primario-hover); }
.logotipo__texto { line-height: 1.2; }
.logotipo__nombre {
  color: var(--color-primario);
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 700;
}
.logotipo__lugar {
  color: var(--color-texto-secundario);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Navegación de escritorio */
.nav-escritorio {
  display: none;
  align-items: center;
  gap: 24px;
}
@media (min-width: 1024px) {
  .nav-escritorio { display: flex; }
}
.nav-escritorio__enlace {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: #334265;
  transition: color 0.2s ease;
  padding-bottom: 2px;
}
.nav-escritorio__enlace:hover { color: var(--color-primario); }
.nav-escritorio__enlace::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--color-acento);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.nav-escritorio__enlace:hover::after { width: 100%; }

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón de menú móvil (hamburguesa) */
.boton-menu-movil {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-borde);
  color: var(--color-primario);
  transition: background-color 0.2s ease;
}
.boton-menu-movil:hover { background-color: var(--color-fondo-superficie); }
@media (min-width: 1024px) {
  .boton-menu-movil { display: none; }
}
.icono-menu-cerrar { display: none; }
.boton-menu-movil.abierto .icono-menu-abrir { display: none; }
.boton-menu-movil.abierto .icono-menu-cerrar { display: block; }

/* Menú desplegable móvil */
.menu-movil {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-top: 1px solid var(--color-borde-suave);
  background-color: #fff;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.menu-movil.abierto {
  max-height: 480px;
  opacity: 1;
}
@media (min-width: 1024px) {
  .menu-movil { display: none; }
}
.menu-movil__contenido {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
}
.menu-movil__enlace {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #334265;
  border-radius: var(--radio-borde);
  transition: all 0.2s ease;
}
.menu-movil__enlace:hover {
  color: var(--color-primario);
  background-color: #F5F7FB;
}
.menu-movil__cta {
  margin-top: 8px;
  justify-content: center;
  padding: 12px 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECCIÓN HERO
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 86vh;
}
@media (min-width: 640px) {
  .hero { align-items: center; }
}
.hero__fondo {
  position: absolute;
  inset: 0;
  background-color: var(--color-primario);
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDJAYJ4jllmbplooD9fVQDGZGdvkGiybBLu4Y5y2ln2kouZpd1O4lmYUH-&s=10');
  background-size: cover;
  background-position: center 35%;
}
.hero__degradado-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5,16,31,0.9), rgba(10,31,78,0.68), rgba(10,31,78,0.2));
}
.hero__degradado-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,16,31,0.5), transparent);
}
.hero__contenido {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 64px 16px 80px;
}
@media (min-width: 640px) {
  .hero__contenido { padding: 64px 24px 32px; }
}
.hero__caja-texto { max-width: 620px; }

.hero__antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero__linea {
  width: 40px;
  height: 1px;
  background-color: var(--color-acento);
}
.hero__antetitulo-texto {
  color: var(--color-acento-claro);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero__titulo {
  font-family: var(--fuente-titulos);
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.04;
  margin-bottom: 20px;
}
@media (min-width: 640px) { .hero__titulo { font-size: 52px; } }
@media (min-width: 1024px) { .hero__titulo { font-size: 60px; } }
.hero__titulo-acento { color: var(--color-acento-claro); }

.hero__descripcion {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 500px;
}
@media (min-width: 640px) { .hero__descripcion { font-size: 16px; } }

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__desvanecido-inferior {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--color-fondo-pagina), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESO RÁPIDO
   ══════════════════════════════════════════════════════════════════════ */
.cuadricula-acceso-rapido {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .cuadricula-acceso-rapido { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .cuadricula-acceso-rapido { grid-template-columns: repeat(6, 1fr); }
}

.tarjeta-acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-borde);
  transition: all 0.2s ease;
}
.tarjeta-acceso:hover {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.tarjeta-acceso__icono {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--color-fondo-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-primario);
  transition: all 0.2s ease;
}
.tarjeta-acceso:hover .tarjeta-acceso__icono {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.tarjeta-acceso__titulo {
  color: var(--color-primario);
  font-weight: 600;
  font-size: 13px;
  transition: color 0.2s ease;
}
.tarjeta-acceso:hover .tarjeta-acceso__titulo { color: #fff; }
.tarjeta-acceso__descripcion {
  color: var(--color-texto-secundario);
  font-size: 11px;
  margin-top: 2px;
  transition: color 0.2s ease;
}
.tarjeta-acceso:hover .tarjeta-acceso__descripcion { color: rgba(191, 219, 254, 0.7); }

/* ══════════════════════════════════════════════════════════════════════
   SERVICIOS
   ══════════════════════════════════════════════════════════════════════ */
.cuadricula-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .cuadricula-servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cuadricula-servicios { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-borde);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tarjeta-servicio:hover {
  border-color: rgba(10, 31, 78, 0.25);
  box-shadow: 0 6px 28px rgba(10, 31, 78, 0.07);
}
.tarjeta-servicio__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tarjeta-servicio__icono {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-borde);
  background-color: var(--color-fondo-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primario);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.tarjeta-servicio:hover .tarjeta-servicio__icono {
  background-color: var(--color-primario);
  color: #fff;
}
.tarjeta-servicio__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.tarjeta-servicio__descripcion {
  color: var(--color-texto-secundario);
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
}
.tarjeta-servicio__mas {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-acento);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tarjeta-servicio:hover .tarjeta-servicio__mas { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   MUNICIPALIDAD (SOBRE NOSOTROS)
   ══════════════════════════════════════════════════════════════════════ */
.municipalidad__cuadricula {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .municipalidad__cuadricula { grid-template-columns: repeat(2, 1fr); gap: 64px; }
}

.municipalidad__foto-caja { position: relative; }
.municipalidad__foto-marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-borde);
  aspect-ratio: 4 / 5;
}
.municipalidad__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.municipalidad__foto-degradado {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,31,78,0.2), transparent);
}
.municipalidad__insignia {
  position: absolute;
  bottom: -16px;
  right: 16px;
  background-color: var(--color-acento);
  color: #fff;
  padding: 16px 20px;
  border-radius: var(--radio-borde);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
}
.municipalidad__insignia-anio {
  font-family: var(--fuente-titulos);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.municipalidad__insignia-texto {
  color: rgba(255, 245, 225, 0.75);
  font-size: 10px;
  margin-top: 4px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.municipalidad__titulo { line-height: 1.2; margin-bottom: 20px; }
.municipalidad__parrafo {
  color: var(--color-texto-terciario);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.municipalidad__parrafo--secundario {
  color: var(--color-texto-secundario);
  font-size: 14px;
  margin-bottom: 36px;
}

.municipalidad__estadisticas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(10, 31, 78, 0.09);
}
.municipalidad__estadistica-numero {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
@media (min-width: 640px) { .municipalidad__estadistica-numero { font-size: 34px; } }
.municipalidad__estadistica-etiqueta {
  color: var(--color-texto-secundario);
  font-size: 10px;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.municipalidad__boton { margin-top: 32px; }

/* ══════════════════════════════════════════════════════════════════════
   PROYECTOS Y DESARROLLO
   ══════════════════════════════════════════════════════════════════════ */
.cuadricula-proyectos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .cuadricula-proyectos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cuadricula-proyectos { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-proyecto {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radio-borde);
  transition: all 0.2s ease;
}
.tarjeta-proyecto:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}
.tarjeta-proyecto__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tarjeta-proyecto__categoria {
  color: var(--color-acento-claro);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.tarjeta-proyecto__estado {
  font-size: 9px;
  color: rgba(191, 219, 254, 0.55);
  background-color: rgba(255, 255, 255, 0.07);
  padding: 2px 8px;
  border-radius: 999px;
}
.tarjeta-proyecto__titulo {
  font-family: var(--fuente-titulos);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.tarjeta-proyecto__descripcion {
  color: rgba(191, 219, 254, 0.45);
  font-size: 12px;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}
.tarjeta-proyecto__avance-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}
.tarjeta-proyecto__avance-info span:first-child { color: rgba(191, 219, 254, 0.45); }
.tarjeta-proyecto__avance-porcentaje { color: #fff; font-weight: 600; }

.barra-progreso {
  height: 3px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.barra-progreso__relleno {
  height: 100%;
  background-color: var(--color-acento-claro);
  border-radius: 999px;
}

.tarjeta-proyecto__pie-inferior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.tarjeta-proyecto__presupuesto {
  font-family: var(--fuente-titulos);
  color: var(--color-acento-claro);
  font-size: 14px;
  font-weight: 700;
}
.tarjeta-proyecto__detalle {
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgba(147, 197, 253, 0.5);
  font-size: 11px;
  transition: color 0.2s ease;
}
.tarjeta-proyecto__detalle:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   NOTICIAS
   ══════════════════════════════════════════════════════════════════════ */
.cuadricula-noticias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .cuadricula-noticias { grid-template-columns: 3fr 2fr; gap: 40px; }
}

.noticia__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.noticia__categoria {
  color: var(--color-acento);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.noticia__separador { color: var(--color-texto-claro); }
.noticia__fecha { color: var(--color-texto-secundario); font-size: 11px; }

.noticia-destacada { cursor: pointer; }
.noticia-destacada__imagen-caja {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-borde);
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  background-color: var(--color-primario);
}
.noticia-destacada__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.noticia-destacada:hover .noticia-destacada__imagen { transform: scale(1.03); }
.noticia-destacada__degradado {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,31,78,0.25), transparent);
}
.noticia-destacada__etiqueta {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--color-acento);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.noticia-destacada__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
@media (min-width: 640px) { .noticia-destacada__titulo { font-size: 26px; } }
.noticia-destacada:hover .noticia-destacada__titulo { color: var(--color-acento); }
.noticia-destacada__resumen {
  color: var(--color-texto-secundario);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.noticia-destacada__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-acento);
  font-size: 13px;
  font-weight: 700;
  transition: gap 0.2s ease;
}
.noticia-destacada__enlace:hover { gap: 10px; }

.lista-noticias-secundarias {
  display: flex;
  flex-direction: column;
}
.noticia-secundaria {
  display: flex;
  gap: 14px;
  cursor: pointer;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-borde-suave);
}
.noticia-secundaria:first-child { padding-top: 0; }
.noticia-secundaria--ultima { border-bottom: none; }
.noticia-secundaria__imagen-caja {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radio-borde);
  background-color: var(--color-fondo-superficie);
}
.noticia-secundaria__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.noticia-secundaria:hover .noticia-secundaria__imagen { transform: scale(1.05); }
.noticia-secundaria__texto { flex: 1; min-width: 0; }
.noticia-secundaria__titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia-secundaria:hover .noticia-secundaria__titulo { color: var(--color-acento); }
.noticia-secundaria__resumen {
  color: var(--color-texto-secundario);
  font-size: 11px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   GALERÍA
   ══════════════════════════════════════════════════════════════════════ */
.cuadricula-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
}
@media (min-width: 768px) {
  .cuadricula-galeria { grid-template-columns: repeat(4, 1fr); }
}
.galeria-item {
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--color-texto-claro);
  opacity: 0;
  animation: aparecer-galeria 0.6s ease forwards;
}
.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.galeria-item:hover img { transform: scale(1.05); }
.galeria-item--grande { grid-column: span 2; grid-row: span 2; }
.galeria-item--ancha { grid-column: span 2; }
@media (max-width: 767px) {
  .galeria-item--grande,
  .galeria-item--ancha { grid-column: span 2; grid-row: span 1; }
}

@keyframes aparecer-galeria {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   PIE DE PÁGINA
   ══════════════════════════════════════════════════════════════════════ */
.pie-pagina { background-color: var(--color-fondo-pie-pagina); }
.pie-pagina__contenido { padding: 56px 0 40px; }
.pie-pagina__cuadricula {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px) { .pie-pagina__cuadricula { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pie-pagina__cuadricula { grid-template-columns: repeat(4, 1fr); } }

.pie-pagina__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pie-pagina__marca-icono {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--color-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.pie-pagina__marca-nombre {
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 700;
}
.pie-pagina__marca-lugar {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pie-pagina__descripcion {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.pie-pagina__redes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pie-pagina__red {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-borde);
  background-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  transition: background-color 0.2s ease;
}
.pie-pagina__red:hover { background-color: var(--color-acento); }

.pie-pagina__titulo-columna {
  color: #fff;
  font-family: var(--fuente-titulos);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}
.pie-pagina__lista { display: flex; flex-direction: column; gap: 10px; }
.pie-pagina__lista a {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  transition: color 0.2s ease;
}
.pie-pagina__lista a:hover { color: #fff; }

.pie-pagina__lista--contacto { gap: 14px; }
.pie-pagina__lista--contacto li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  line-height: 1.4;
}
.pie-pagina__icono-contacto { color: var(--color-acento-claro); flex-shrink: 0; margin-top: 2px; }
.pie-pagina__boton { margin-top: 20px; }

.pie-pagina__barra-legal { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pie-pagina__barra-legal-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
}
.pie-pagina__copyright {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}
.pie-pagina__enlaces-legales {
  display: none;
  align-items: center;
  gap: 20px;
}
@media (min-width: 640px) { .pie-pagina__enlaces-legales { display: flex; } }
.pie-pagina__enlaces-legales a {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  transition: color 0.2s ease;
}
.pie-pagina__enlaces-legales a:hover { color: rgba(255, 255, 255, 0.5); }