/* ============================================================
   OBSERVATORIO DE PAZ, DERECHOS HUMANOS Y CULTURA CIUDADANA
   Hoja de estilos principal
   ------------------------------------------------------------
   1. Variables y personalización de Bootstrap
   2. Base y tipografía
   3. Barra de navegación
   4. Hero principal
   5. Secciones genéricas
   6. Sobre el Observatorio
   7. Herramientas
   8. Indicadores
   9. Publicaciones
  10. Noticias
  11. Contacto
  12. Pie de página
  13. Utilidades y animaciones
  14. Media queries
============================================================ */

/* ------------------------------------------------------------
   1. Variables y personalización de Bootstrap
------------------------------------------------------------ */
:root {
  /* Paleta institucional */
  --azul-900: #004B6F;
  --azul-700: #257A9C;
  --azul-700-texto: #1a566e;
  --azul-400: #39ADD3;
  --naranja-400: #F49F1E;
  --naranja-500: #D9842B;
  --naranja-600: #DF6F0E;

  /* Neutros */
  --blanco: #ffffff;
  --gris-suave: #f4f8fb;
  --gris-borde: #d5e3ee;
  --texto: #21455a;
  --texto-suave: #3d5666;

  /* Utilidades */
  --sombra-suave: 0 10px 30px rgba(0, 0, 0, 0.08);
  --sombra-fuerte: 0 18px 45px rgba(0, 0, 0, 0.14);
  --sombra-card: 0 1px 2px rgba(15, 40, 56, 0.04), 0 10px 28px rgba(15, 40, 56, 0.06);
  --radio: 1rem;
  --nav-alto: 86px;

  /* Sobrescritura de variables de Bootstrap */
  --bs-primary: var(--azul-900);
  --bs-primary-rgb: 0, 75, 111;
  --bs-secondary: var(--naranja-400);
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--blanco);
  --bs-heading-font-family: "Poppins", "Source Sans 3", sans-serif;
  --bs-link-color: var(--azul-700-texto);
  --bs-link-hover-color: var(--azul-900);
  --bs-border-radius: 0.75rem;
  --bs-border-color: var(--gris-borde);
}

/* ------------------------------------------------------------
   2. Base y tipografía
------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 12px);
}

body {
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection {
  background: var(--azul-400);
  color: var(--blanco);
}

:focus-visible {
  outline: 3px solid var(--azul-900);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Sobre fondos oscuros el azul institucional no destaca: se usa el naranja. */
.hero :focus-visible,
.indicadores :focus-visible,
.dash-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--naranja-400);
}

/* El destino del enlace «Saltar al contenido» no necesita anillo propio. */
main:focus,
main:focus-visible {
  outline: none;
}

h1, h2, h3, h4 {
  color: var(--azul-900);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-weight: 700; letter-spacing: -0.03em; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

img {
  max-width: 100%;
  height: auto;
}

a {
  text-underline-offset: 3px;
}

/* Enlace de accesibilidad (visibles al recibir foco) */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--azul-900);
  color: var(--blanco);
  border-radius: 0 0 0.5rem 0.5rem;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* ------------------------------------------------------------
   3. Barra de navegación
------------------------------------------------------------ */
.navbar {
  padding: 0.85rem 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.navbar.scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0;
}

.brand-text {
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--azul-900);
  display: inline-block;
}
.brand-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--azul-700-texto);
  letter-spacing: 0.01em;
}

/* En la franja donde la navegación horizontal ya va justa de ancho, el
   subtítulo cede sitio al CTA del Visor Ciudadano. Por debajo de 1200px el
   menú va plegado (no compite) y por encima de 1400px hay ancho de sobra,
   así que el nombre completo se ve en los dos casos. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .brand-sub { display: none; }
}

.brand-logo {
  border-radius: 0.6rem;
  flex-shrink: 0;
}

.navbar .nav-link {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--texto);
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--azul-900);
}
.navbar .nav-link.active {
  background: rgba(0, 75, 111, 0.07);
}

/* Botón naranja institucional */
.btn-acento {
  --bs-btn-color: #002a3d;
  --bs-btn-bg: var(--naranja-400);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #002a3d;
  --bs-btn-hover-bg: var(--naranja-500);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--naranja-500);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--naranja-400);
  --bs-btn-disabled-border-color: transparent;
  background: var(--naranja-400);
  color: #002a3d !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-acento:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}
.btn-acento:active {
  transform: translateY(0);
}

/* Botones Bootstrap alineados con la paleta institucional.
   Bootstrap trae los colores compilados; no basta con --bs-primary. */
.btn-primary {
  --bs-btn-color: var(--blanco);
  --bs-btn-bg: var(--azul-900);
  --bs-btn-border-color: var(--azul-900);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-bg: var(--azul-700);
  --bs-btn-hover-border-color: var(--azul-700);
  --bs-btn-active-color: var(--blanco);
  --bs-btn-active-bg: var(--azul-900);
  --bs-btn-active-border-color: var(--azul-900);
  --bs-btn-disabled-color: var(--blanco);
  --bs-btn-disabled-bg: var(--azul-700);
  --bs-btn-disabled-border-color: var(--azul-700);
}
.btn-outline-primary {
  --bs-btn-color: var(--azul-900);
  --bs-btn-border-color: var(--azul-900);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-bg: var(--azul-900);
  --bs-btn-hover-border-color: var(--azul-900);
  --bs-btn-active-color: var(--blanco);
  --bs-btn-active-bg: var(--azul-700);
  --bs-btn-active-border-color: var(--azul-700);
  --bs-btn-disabled-color: var(--texto-suave);
  --bs-btn-disabled-border-color: var(--gris-borde);
}

/* Botón de alto contraste dentro del navbar (reemplaza el flotante). */
.btn-contraste-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--azul-900);
  background: transparent;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-contraste-nav:hover,
.btn-contraste-nav:focus-visible {
  color: var(--blanco);
  background: var(--azul-900);
  border-color: var(--azul-900);
}
.btn-contraste-nav[aria-pressed="true"] {
  color: #00364f;
  background: var(--naranja-400);
  border-color: var(--naranja-400);
}
.btn-contraste-nav i {
  font-size: 1rem;
}
.btn-contraste-nav-txt {
  display: none;
}

@media (max-width: 1199.98px) {
  .navbar .btn-contraste-nav {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
  }
  .navbar .btn-contraste-nav-txt {
    display: inline;
    font-size: 0.94rem;
    font-weight: 600;
  }
}

/* ------------------------------------------------------------
   4. Hero principal
------------------------------------------------------------ */
.hero {
  position: relative;
  padding: calc(var(--nav-alto) + 5rem) 0 9rem;
  color: var(--blanco);
  background: linear-gradient(135deg, #00364f 0%, var(--azul-900) 50%, #1f6f8f 100%);
  overflow: hidden;
}

/* Patrón de puntos sutil */
.hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* Foto de fondo opcional del hero.
   La imagen se pone sobre el degradado y el velo (::after) recupera la
   legibilidad del texto: oscuro a la izquierda, más claro a la derecha para
   que se adivine la fotografía. Si no hay archivo, la imagen dispara un
   error y el propio JS del HTML retira toda la capa. */
.hero-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 54, 79, 0.96) 0%, rgba(0, 54, 79, 0.93) 42%,
                           rgba(0, 64, 93, 0.8) 72%, rgba(0, 80, 116, 0.72) 100%);
}

/* Pista de desplazamiento hacia el contenido */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-scroll:hover { color: var(--blanco); }
.hero-scroll-txt { line-height: 1; }
.hero-scroll-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.hero-scroll svg { animation: heroBajar 1.9s ease-in-out infinite; }

@keyframes heroBajar {
  0%, 100% { transform: translateY(-2px); opacity: 0.45; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blanco);
  background: rgba(0, 54, 79, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
}

.hero-title {
  color: var(--blanco);
  font-size: clamp(2.1rem, 4.5vw, 3.35rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.1rem;
}

.text-acento {
  color: var(--naranja-400);
  position: relative;
  white-space: nowrap;
}

.hero-lead {
  font-size: 1.13rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 34rem;
}

.hero-trust {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero-trust svg {
  color: var(--naranja-400);
  flex-shrink: 0;
}

/* Tarjeta "en vivo" */
.hero-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.35rem;
  padding: 1.75rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hero-card-title {
  font-family: var(--bs-heading-font-family);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blanco);
  margin: 0;
}

.hero-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  background: var(--naranja-400);
  border: 1px solid var(--naranja-400);
  border-radius: 999px;
  color: #002a3d !important;
}
.hero-card-chip .pulse-dot {
  background: #002a3d;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--naranja-400);
  animation: pulso 2s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}

.hero-card-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.95rem;
}
.hero-card-list li:last-child {
  border-bottom: none;
}
.hc-label {
  color: rgba(255, 255, 255, 0.9);
}
.hc-value {
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
}
.hc-down {
  color: var(--naranja-400);
}

.hero-card-nota {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.hero-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid var(--naranja-400);
  padding-bottom: 0.15rem;
  transition: gap 0.2s ease, color 0.2s ease;
}
.hero-card-link:hover {
  color: var(--naranja-400);
  gap: 0.8rem;
}

.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 90px;
}

/* ------------------------------------------------------------
   5. Secciones genéricas
------------------------------------------------------------ */
.section-espacio {
  padding: 5.5rem 1rem;
}

.section-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-700);
  background: rgba(0, 75, 111, 0.08);
  border: 1px solid rgba(0, 75, 111, 0.15);
  border-radius: 999px;
}
.section-badge-claro {
  color: var(--naranja-400);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.25);
}

.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* Filete de acento bajo el título de cada sección */
.section-title::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-400), var(--naranja-400));
}

/* Los encabezados centrados centran también el filete */
.text-center .section-title::before {
  margin-inline: auto;
}

/* Sobre fondo oscuro el acento pasa a naranja para conservar el contraste */
.section-title.text-white::before {
  background: linear-gradient(90deg, var(--naranja-400), var(--naranja-600));
}

.section-text {
  color: var(--texto-suave);
  font-size: 1.08rem;
}

.bg-suave {
  background: var(--gris-suave);
}

/* ------------------------------------------------------------
   6. Sobre el Observatorio
------------------------------------------------------------ */
.about-media {
  position: relative;
  display: inline-block;
  width: 100%;
}
.about-media img {
  width: 100%;
  box-shadow: var(--sombra-fuerte);
}

.about-badge {
  position: absolute;
  bottom: -1.25rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.25rem;
  background: var(--blanco);
  border-radius: 1rem;
  box-shadow: var(--sombra-fuerte);
}
.about-badge strong {
  font-family: var(--bs-heading-font-family);
  font-size: 2.1rem;
  font-weight: 700;
  color: #b45309;
  line-height: 1;
}
.about-badge span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--azul-900);
  line-height: 1.3;
}

.mini-card {
  height: 100%;
  padding: 1.25rem;
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  border-radius: 0.85rem;
  box-shadow: var(--sombra-card);
}
.mini-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.mini-card p {
  font-size: 0.92rem;
  color: var(--texto-suave);
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   7. Herramientas
------------------------------------------------------------ */
.card-herramienta {
  --acc: var(--azul-700);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.85rem;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
}

.herramienta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  vertical-align: middle;
  color: var(--blanco);
  background: color-mix(in srgb, var(--acc) 55%, #00364f);
  border-radius: 0.75rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.herramienta-titulo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.card-herramienta > p {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 1.15rem;
}

/* Lista de funcionalidades de cada herramienta */
.herramienta-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.herramienta-lista li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-suave);
}
.herramienta-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}
.herramienta-lista strong {
  color: var(--azul-900);
  font-weight: 600;
}

/* Acordeón de funcionalidades: en escritorio se ve abierto; en móvil
   se pliega para reducir la longitud de la sección. */
.herramienta-detalle {
  margin: 0;
}
.herramienta-detalle > summary {
  display: none;
}

@media (max-width: 767.98px) {
  .herramienta-detalle {
    border-top: 1px solid var(--gris-borde);
    padding-top: 0.65rem;
  }
  .herramienta-detalle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    cursor: pointer;
    font-weight: 600;
    color: var(--azul-900);
    list-style: none;
  }
  .herramienta-detalle > summary::-webkit-details-marker {
    display: none;
  }
  .herramienta-detalle > summary::after {
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
  }
  .herramienta-detalle[open] > summary::after {
    content: "−";
  }
  .herramienta-detalle[open] > summary {
    margin-bottom: 0.5rem;
  }
}

/* Botón de acceso a cada plataforma (alineado al fondo de la tarjeta) */
.herramienta-cta {
  margin-top: auto;
  padding-top: 1.35rem;
  align-self: flex-start;
}

.btn-herramienta {
  --bs-btn-color: var(--blanco);
  --bs-btn-bg: var(--azul-900);
  --bs-btn-border-color: var(--azul-900);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-bg: var(--azul-700);
  --bs-btn-hover-border-color: var(--azul-700);
  --bs-btn-active-bg: var(--azul-700);
  --bs-btn-active-border-color: var(--azul-700);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-herramienta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-fuerte);
}
.btn-herramienta svg {
  transition: transform 0.2s ease;
}
.btn-herramienta:hover svg {
  transform: translate(2px, -2px);
}

/* ------------------------------------------------------------
   8. Indicadores
------------------------------------------------------------ */
.indicadores {
  position: relative;
  padding: 5.5rem 0;
  background:
    radial-gradient(circle at 12% 85%, rgba(57, 173, 211, 0.28), transparent 40%),
    linear-gradient(120deg, #00364f 0%, var(--azul-900) 55%, var(--azul-700) 100%);
  overflow: hidden;
}
.indicadores-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  pointer-events: none;
}

.stat {
  height: 100%;
  padding: 1.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.06);
}

.stat-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.9rem;
  color: #00364f;
  background: var(--acc, var(--naranja-400));
  border-radius: 50%;
}

.stat-number {
  display: block;
  font-family: var(--bs-heading-font-family);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.1;
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.stat p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.indicadores-nota {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.indicadores .section-text,
.indicadores .indicadores-nota,
.indicadores .stat p {
  color: rgba(255, 255, 255, 0.88);
}

/* ------------------------------------------------------------
   9. Publicaciones
------------------------------------------------------------ */
.pub-card {
  height: 100%;
  padding: 1.35rem;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
}

.pub-card img {
  width: 90px;
  height: 120px;
  object-fit: cover;
  border-radius: 0.6rem;
  box-shadow: var(--sombra-suave);
  flex-shrink: 0;
}

.pub-area {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00364f;
  background: var(--cat-bg, rgba(57, 173, 211, 0.15));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--azul-700)) 45%, #ffffff);
  border-radius: 999px;
}

.pub-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-card p {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 0.75rem;
}
.pub-card .pub-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-meta {
  font-size: 0.8rem !important;
  color: var(--azul-700-texto) !important;
  font-weight: 600;
}

/* --- Publicaciones dinámicas (carga desde la API) --- */
.pub-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.pub-buscar {
  position: relative;
  flex: 1 1 280px;
  max-width: 360px;
}
.pub-buscar-icono {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--azul-700);
  pointer-events: none;
}
.pub-buscar .form-control {
  padding-left: 2.4rem;
  border-radius: 999px;
}

.pub-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pub-chip {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul-900);
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.pub-chip span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto-suave);
}
.pub-chip:hover {
  border-color: var(--azul-400);
}
.pub-chip.activo {
  color: var(--blanco);
  background: var(--azul-900);
  border-color: var(--azul-900);
}
.pub-chip.activo span {
  color: var(--blanco);
}

.pub-portada {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 90px;
  height: 120px;
  font-size: 2rem;
  color: var(--blanco);
  background: var(--cat-color, var(--azul-700));
  border-radius: 0.6rem;
  box-shadow: var(--sombra-suave);
}
.pub-portada svg {
  width: 32px;
  height: 32px;
}

.pub-item {
  animation: pubAparecer 0.4s ease both;
}
@keyframes pubAparecer {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pub-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pub-estado {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--texto-suave);
}

/* Esqueletos de carga */
.pub-esqueleto {
  pointer-events: none;
}
.pub-esqueleto .pub-portada {
  color: transparent;
}
.pub-skel,
.pub-skel-line {
  background: linear-gradient(90deg, #eef2f6 25%, #e2e8ef 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: pubBrillo 1.4s ease infinite;
}
.pub-skel-line {
  height: 12px;
  margin-bottom: 0.6rem;
  border-radius: 6px;
}
@keyframes pubBrillo {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ------------------------------------------------------------
   10. Noticias
------------------------------------------------------------ */
.noticia-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

.noticia-card img {
  aspect-ratio: 8 / 5;
  object-fit: cover;
  width: 100%;
}

.noticia-cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.4rem;
}

.noticia-tag {
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blanco);
  background: var(--azul-700-texto);
  border-radius: 999px;
}

.noticia-cuerpo time {
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.noticia-cuerpo h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia-cuerpo p {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticia-link {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--azul-900);
  background: transparent;
  border: 1.5px solid var(--azul-900);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.noticia-link:hover {
  background: var(--azul-900);
  color: var(--blanco);
}

/* Variantes dinámicas (las rellena js/noticias.js) */
.noticia-tag--noticia {
  background: var(--azul-700);
}
.noticia-tag--actividad {
  color: #002a3d;
  background: var(--naranja-400);
}

.noticia-item {
  animation: pubAparecer 0.4s ease both;
}

/* Nota de estado / aviso bajo la cuadrícula */
.noticias-nota {
  margin: 2rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* Botón «Ver todas» */
.btn-ver-todas {
  padding: 0.7rem 1.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--blanco);
  background: var(--azul-700-texto);
  border: 1.5px solid var(--azul-700-texto);
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-ver-todas:hover {
  background: var(--azul-900);
  border-color: var(--azul-900);
  transform: translateY(-2px);
}

/* Esqueletos de carga de las noticias */
.noticia-esqueleto {
  pointer-events: none;
}
.noticia-skel-img,
.noticia-skel-line {
  background: linear-gradient(90deg, #eef2f6 25%, #e2e8ef 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: pubBrillo 1.4s ease infinite;
}
.noticia-skel-img {
  aspect-ratio: 8 / 5;
  width: 100%;
}
.noticia-skel-line {
  height: 12px;
  margin-bottom: 0.7rem;
  border-radius: 6px;
}

/* Detalle de la noticia (modal) */
#noticiaModal .modal-title {
  font-size: 1.15rem;
  line-height: 1.35;
}
.noticia-modal-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}
.noticia-modal-meta {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}
.noticia-modal-texto p {
  margin-bottom: 1rem;
}
.noticia-modal-enlace {
  margin-top: 0.5rem;
}

/* Visor de publicaciones (modal) */
.pub-modal-cabecera {
  min-width: 0;
}
.pub-modal-area {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul-700-texto);
}
#pubModal .modal-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
}
#pubModal .modal-body {
  padding: 0;
}
.pub-visor {
  position: relative;
  height: 70vh;
  min-height: 320px;
  background: var(--gris-suave);
}
.pub-visor-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.pub-visor-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
  pointer-events: none;
}
.pub-visor-error {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--gris-borde);
}

/* ------------------------------------------------------------
   11. Contacto
------------------------------------------------------------ */
.contact-form-wrapper {
  padding: 2rem;
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  border-radius: 1.25rem;
}

.contact-form-wrapper .form-control:focus,
.contact-form-wrapper .form-select:focus {
  border-color: var(--azul-400);
  box-shadow: 0 0 0 0.2rem rgba(57, 173, 211, 0.25);
}
.contact-form-wrapper .form-check-input:checked {
  background-color: var(--azul-900);
  border-color: var(--azul-900);
}

/* Errores de formulario con contraste suficiente sobre el fondo gris. */
.invalid-feedback {
  color: #b02a37;
}
.contact-form-wrapper .invalid-feedback {
  color: #b02a37;
}

.contact-info {
  display: grid;
  gap: 1.35rem;
  margin-bottom: 2rem;
}
.contact-info li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-info strong {
  display: block;
  color: var(--azul-900);
  font-size: 0.98rem;
}
.contact-info p {
  margin-bottom: 0;
  color: var(--texto-suave);
  font-size: 0.95rem;
}
.contact-info a {
  color: var(--texto-suave);
  text-decoration: none;
}
.contact-info a:hover {
  color: var(--azul-700-texto);
}

.ci-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--azul-700), var(--azul-900));
  border-radius: 0.75rem;
}

.contact-social p {
  color: var(--azul-900);
  letter-spacing: 0.05em;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--azul-900);
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-btn:hover {
  color: #00364f;
  background: var(--naranja-400);
  border-color: var(--naranja-400);
  transform: translateY(-3px);
}

/* Página legal (privacidad y accesibilidad) */
.legal-header {
  padding: 0.85rem 0;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
}
.legal-bloque {
  margin-top: 2.5rem;
}
.legal-bloque h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}
.legal-bloque ul {
  color: var(--texto-suave);
  padding-left: 1.25rem;
}
.legal-bloque li {
  margin-bottom: 0.35rem;
}
.legal-fecha {
  margin-top: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------
   12. Pie de página
------------------------------------------------------------ */
.site-footer {
  background: linear-gradient(180deg, #003a56 0%, var(--azul-900) 100%);
  color: rgba(255, 255, 255, 0.78);
}
.site-footer p {
  color: rgba(255, 255, 255, 0.85);
}

.footer-brand {
  font-family: var(--bs-heading-font-family);
  font-weight: 700;
  font-size: 1rem;
  color: var(--blanco);
  line-height: 1.3;
}
.footer-brand small {
  font-weight: 500;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Logo del pie de página (PNG con transparencia) */
.footer-logo-img {
  flex-shrink: 0;
}

.footer-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.footer-links li {
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-links a:hover {
  color: #ffc266;
  padding-left: 4px;
}

.footer-linea {
  border-color: rgba(255, 255, 255, 0.15);
  margin: 2.5rem 0 1.5rem;
}

.footer-frase {
  color: #ffc266 !important;
  font-weight: 600;
}

.site-footer p a {
  color: #ffc266;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer p a:hover {
  color: var(--blanco);
}

/* ------------------------------------------------------------
   13. Utilidades y animaciones
------------------------------------------------------------ */
/* Botón volver arriba */
.btn-arriba {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--blanco);
  background: var(--azul-900);
  border: none;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}
.btn-arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-arriba:hover {
  background: var(--naranja-400);
  color: #00364f;
}

/* Botón flotante de alto contraste */
.btn-contraste-flotante {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
  background: var(--azul-900);
  border: 2px solid var(--blanco);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-contraste-flotante i {
  font-size: 1.05rem;
}
.btn-contraste-flotante:hover,
.btn-contraste-flotante:focus-visible {
  background: #ffc266;
  color: #00364f;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.btn-contraste-flotante:active {
  transform: translateY(0);
}
.btn-contraste-flotante[aria-pressed="true"] {
  color: var(--blanco);
  background: var(--azul-900);
  border-color: var(--naranja-400);
}

/* Aparición de cifras reales (sin conteos desde cero) */
.valor-nuevo {
  animation: valorAparecer 0.45s ease both;
}
@keyframes valorAparecer {
  from { opacity: 0.45; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Aparición suave al hacer scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado sutil en cuadrículas */
.row.g-4 > .reveal:nth-child(2) { transition-delay: 0.06s; }
.row.g-4 > .reveal:nth-child(3) { transition-delay: 0.12s; }
.row.g-4 > .reveal:nth-child(4) { transition-delay: 0.18s; }
.row.g-5 > .reveal:nth-child(2) { transition-delay: 0.06s; }

/* Accesibilidad: respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Al imprimir, todo debe verse: sin animaciones ni fondos que gasten tinta. */
@media print {
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .navbar,
  .btn-arriba,
  .btn-contraste-nav,
  .hero-scroll,
  .skip-link,
  .contact-form-wrapper,
  .site-footer .footer-links,
  .site-footer .footer-titulo {
    display: none !important;
  }
  body,
  .hero,
  .indicadores,
  .site-footer {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .hero,
  .indicadores {
    padding: 1.5rem 0 !important;
  }
  .hero-title,
  .section-title,
  .hero-lead,
  .section-text,
  .stat p,
  .indicadores-nota,
  .site-footer p {
    color: #000000 !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
}

/* ------------------------------------------------------------
   14. Media queries
------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--blanco);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 1.25rem 1.25rem;
    margin-top: 0.6rem;
  }

  .hero {
    padding: calc(var(--nav-alto) + 3rem) 0 5.5rem;
    text-align: center;
  }
  .hero-lead {
    margin-inline: auto;
  }
  .hero .d-flex.flex-wrap {
    justify-content: center;
  }
  .hero-trust {
    justify-content: center;
  }
  .hero-badge {
    text-align: left;
  }

  /* La pista de desplazamiento choca con la tarjeta en pantallas pequeñas. */
  .hero-scroll {
    display: none;
  }

  .section-espacio {
    padding: 4rem 1rem;
  }

  /* El badge deja de flotar para no tapar el texto de la ilustración. */
  .about-badge {
    position: static;
    width: fit-content;
    margin: 1rem 0 0 auto;
  }

  .btn-arriba {
    display: none;
  }

  /* Objetivos táctiles cómodos en móvil y tableta. */
  .btn-sm,
  .pub-chip,
  .noticia-link,
  .btn-contraste-nav,
  .navbar-toggler {
    min-height: 44px;
  }
  .navbar .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .pub-chip {
    display: inline-flex;
    align-items: center;
  }
  .noticia-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 1rem;
  }

  /* La marca completa no cabe junto al botón del menú. */
  .brand-sub {
    display: none;
  }
  .brand-text {
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .brand-logo {
    width: 48px;
    height: 48px;
  }
  .navbar-brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .hero {
    padding-top: calc(var(--nav-alto) + 2rem);
    padding-bottom: 3.5rem;
  }

  .hero-card {
    padding: 1.35rem;
  }

  /* Texto de lectura en tarjetas un poco más grande. */
  .herramienta-lista li,
  .pub-card p,
  .noticia-cuerpo p,
  .mini-card p {
    font-size: 1rem;
  }

  .contact-form-wrapper {
    padding: 1.35rem;
  }

  .pub-card {
    flex-direction: column;
  }
  .pub-card img {
    width: 100%;
    height: 150px;
  }
  .pub-portada {
    width: 100%;
    height: 110px;
  }
  .pub-buscar {
    max-width: 100%;
  }

  .btn-arriba {
    right: 1rem;
    bottom: 1rem;
  }

  .btn-contraste-flotante {
    left: 1rem;
    bottom: 1rem;
    padding: 0.6rem 0.95rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .legal-header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .legal-header .container > .d-flex {
    width: 100%;
    justify-content: space-between;
  }
  .legal-header .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 1199.98px) {
  /* En tablet el bot�n fijo se acerca al borde de las tarjetas. */
  .btn-arriba {
    display: none;
  }
}

@media print {
  html[data-contraste="1"] body .hero,
  html[data-contraste="1"] body .indicadores,
  html[data-contraste="1"] body .dash-hero,
  html[data-contraste="1"] body .site-footer {
    background: #ffffff !important;
    color: #000000 !important;
  }
  html[data-contraste="1"] body h1,
  html[data-contraste="1"] body h2,
  html[data-contraste="1"] body h3,
  html[data-contraste="1"] body p,
  html[data-contraste="1"] body li,
  html[data-contraste="1"] body a {
    color: #000000 !important;
  }
}

/* Enlaces de texto con �rea de clic algo m�s c�moda. */
.footer-links a,
.site-footer p a {
  display: inline-block;
  padding: 2px 0;
}
@media (min-width: 992px) {
  .pub-acciones .btn {
    min-height: 36px;
  }
}
.contact-info a {
  display: inline-block;
  padding: 2px 0;
}

@media (max-width: 991.98px) {
  .btn,
  .hero-card-link,
  .btn-herramienta,
  .form-control,
  .form-select {
    min-height: 44px;
  }
  .hero-card-link {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 1199.98px) {
  .btn,
  .btn-sm,
  .hero-card-link,
  .btn-herramienta,
  .form-control,
  .form-select,
  .pub-chip,
  .noticia-link,
  .btn-contraste-nav,
  .navbar-toggler,
  .navbar .nav-link {
    min-height: 44px;
  }
  .navbar .nav-link,
  .hero-card-link,
  .pub-chip,
  .noticia-link {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 1199.98px) {
  .hero-scroll {
    display: none;
  }
}