/* ================================================================
   front-page.css — GAMS Sacaba / Tema gams
   Solo se carga en is_front_page().
   Depende de: variables.css (tokens), Bulma (base)
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. HERO — Imagen de portada con overlay
   ══════════════════════════════════════════════════════════════ */
#gams-hero {
  position:         relative;
  min-height:       calc(100vh  - var(--gams-header-h, 210px));
  min-height:       calc(100dvh - var(--gams-header-h, 210px));
  display:          flex;
  align-items:      center;
  overflow:         hidden;
  background-size:     cover;
  background-position: center 35%;
  background-repeat:   no-repeat;
}

/* Overlay verde semitransparente sobre la foto */
#gams-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--hero-overlay-color, #154a19);
  opacity:    var(--hero-overlay-opacity, 0.72);
  z-index:    1;
}

/* Scrim adicional SOLO detrás del texto — el overlay de arriba es
   parejo en todo el hero, pero la imagen de fondo (el logo dorado)
   puede tener zonas más claras justo donde cae el texto. Este
   degradado le da contraste garantizado al texto sin importar qué
   haya detrás en esa foto puntual. */
#gams-hero-text::before {
  content:    '';
  position:   absolute;
  inset:      -16px -20px; /* antes -24px -40px — menos extensión
                               hacia la derecha, tapa menos imagen */
  background: linear-gradient(100deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 55%, transparent 85%);
  z-index:    -1;
  border-radius: var(--radio-lg);
}

/* Contenido sobre el overlay */
#gams-hero .hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  max-width:  var(--max-ancho);
  margin:     0 auto;
  padding:    60px 24px 60px 40px; /* padding-right bajado de 40px a
                                       24px — el panel de alertas queda
                                       más pegado al borde derecho */
  display:    grid;
  grid-template-columns: 1.3fr 1fr;
  gap:        40px;
  align-items: center;
}

/* En pantallas más anchas que --max-ancho (1366px), .hero-inner
   queda centrado con el mismo margen vacío a los dos lados —
   el panel de alertas nunca se acerca al borde real por más que
   se le baje el padding, porque el límite es el max-width del
   contenedor, no el padding. Acá se lo ensancha SOLO para el hero
   (no se toca --max-ancho global, que usa el resto del sitio). */
@media (min-width: 1367px) {
  #gams-hero .hero-inner {
    max-width: min(1700px, 96vw); /* crece con la pantalla, pero
                                       nunca pega literal al borde
                                       (96vw deja un margen mínimo) */
  }
}

/* ── Texto izquierdo ── */
#gams-hero-text {
  position:  relative; /* ancla el ::before del scrim */
  max-width: 460px;
  padding:   8px 0;
}
#gams-hero-text h1 {
  font-weight:   800 !important; /* antes 700 — un toque más pesado,
                                     se nota más contra fondos ocupados */
  font-size:     2.75rem !important;
  color:         #ffffff !important;
  line-height:   1.15 !important;
  letter-spacing: -0.01em;
  margin-bottom: 12px !important;
  text-shadow:   0 2px 10px rgba(0,0,0,0.45); /* sombra más marcada */
}
#gams-hero-text h1 em {
  color:      #f3d052;
  font-style: normal;
}
#gams-hero-text p {
  color:       rgba(255,255,255,0.92); /* antes 0.85 — más contraste */
  line-height: 1.7;
  margin:      0 0 24px;
  font-size:   1.1rem;
}

/* Botón CTA hero */
.hero-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--color-acento);
  color:           #fff;
  font-weight:     700;
  padding:         12px 28px;
  border-radius:   var(--radio);
  text-decoration: none;
  font-size:       0.95rem;
  transition:      background var(--transicion), transform var(--transicion);
  border:          none;
  cursor:          pointer;
}
.hero-cta:hover {
  background:  var(--color-acento-dark);
  color:       #fff;
  transform:   translateY(-1px);
  text-decoration: none;
}

/* ── Columna derecha del hero: Alertas + Clima ── */
#gams-hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  justify-self: end;
  width: 100%;
}

/* ── Panel alertas ── */
#gams-alertas-box {
  background: rgba(15, 46, 15, 0.94);   /* aún más opaco — casi sólido, se despega del todo */
  border: 2px solid #f3d052;             /* antes 1px sutil — borde dorado grueso, el color de acento del sitio, salta contra el verde */
  border-radius: var(--radio-lg);
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow:
          0 0 0 4px rgba(243, 208, 82, 0.15),   /* halo dorado sutil alrededor — efecto "resplandor" */
          0 12px 40px rgba(0, 0, 0, 0.5);       /* sombra más profunda — más elevación */
}

/* ── Widget de clima — junto al panel de Alertas y avisos ──
   Antes vivía como 4ta tarjeta de "Sacaba en cifras"; se movió acá
   para que se vea de entrada, sin bajar de página. Reutiliza los
   mismos IDs (ind-card-emoji/temp/lbl) que ya llena cargarClima()
   en front-page.js, así que no hace falta tocar el JS. */
#gams-clima-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 150px;
  align-self: flex-end;
  background: rgb(47 18 1 / 75%);
  border: 1px solid #ec9d31;
  border-radius: var(--radio-lg);
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--transicion), background var(--transicion);
}
#gams-clima-widget:hover {
  background: rgb(94 36 1 / 75%);
  transform: translateY(-1px);
}
.gams-clima-emoji { font-size: 1.5rem; line-height: 1; }
.gams-clima-info { display: flex; flex-direction: column; }
.gams-clima-temp { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.15; }
.gams-clima-lbl  { font-size: 0.72rem; font-weight: 400; color: rgba(255,255,255,0.75); }
#gams-alertas-header {
  background: linear-gradient(90deg, rgba(243,208,82,0.15) 0%, rgba(255,255,255,0.05) 100%);
  padding:    12px 16px;   /* antes 10px 16px */
  display:    flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(243,208,82,0.25);  /* nuevo — separa el header del contenido */
}
#gams-alertas-header span::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef5350;
  margin-right: 8px;
  vertical-align: middle;
  animation: gams-pulse 2s infinite;
}
@keyframes gams-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 83, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0); }
}
#gams-alertas-header span {
  font-weight:    800;      /* antes 700 */
  color:          #f3d052;  /* antes rgba(255,255,255,0.85) — dorado en vez de blanco, más notorio */
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size:      0.75rem;
}
.gams-dots   { display: flex; gap: 5px; }
.gams-dot {
  width:      7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor:     pointer; border: none; padding: 0;
  transition: background .2s;
}
.gams-dot.active { background: var(--color-acento); }

.gams-alerta { padding: 16px; display: none; }
.gams-alerta.active { display: block; }

.gams-badge {
  font-weight:    700; padding: 3px 10px;
  border-radius:  99px; display: inline-block;
  margin-bottom:  9px; text-transform: uppercase;
  letter-spacing: .04em; font-size: 0.7rem;
}
.gams-badge-warn  { background: rgba(76,175,80,0.25); color: #a5d6a7; }
.gams-badge-error { background: rgba(244,67,54,0.2);  color: #ef9a9a; }
.gams-badge-info  { background: rgba(33,150,243,0.2); color: #90caf9; }
.gams-badge-ok    { background: rgba(76,175,80,0.2);  color: #a5d6a7; }

.gams-alerta p { color: rgba(255,255,255,0.75); line-height: 1.55; margin-bottom: 10px; font-size: 0.88rem; }
.gams-alerta a { font-weight: 600; color: var(--color-acento); text-decoration: none; font-size: 0.83rem; }
.gams-alerta a:hover { text-decoration: underline; }

.gams-alerta-titulo { font-weight: 700; color: #fff; margin-bottom: 6px; font-size: 0.95rem; }

#gams-alertas-footer {
  display:     flex; justify-content: space-between;
  align-items: center; padding: 10px 16px;
  border-top:  1px solid rgba(255,255,255,0.10);
}
.gams-nav-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none;
  color: #fff; cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center;
}
.gams-nav-btn:hover { background: rgba(255,255,255,0.25); }
#gams-counter { color: rgba(255,255,255,0.45); font-size: 0.78rem; }

/* ══════════════════════════════════════════════════════════════
   2. ACCESOS RÁPIDOS
   ══════════════════════════════════════════════════════════════ */
#gams-accesos {
  padding:       16px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.gams-label {
  font-weight:    700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom:  10px; font-size: 0.72rem;
  display: block;
}
.gams-accesos-row {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   10px;
}
.gams-acc {
  display:         flex; flex-direction: column;
  align-items:     center; gap: 6px;
  padding:         13px 6px;
  background:    var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio);
  text-decoration: none;
  transition:      border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.gams-acc:hover {
  border-color:    var(--primary-main);
  background:    var(--background-card);
  transform:       translateY(-2px);
  text-decoration: none;
}
.gams-acc-icon {
  width:         44px; height: 44px;
  border-radius: var(--radio);
  display:       flex; align-items: center; justify-content: center;
  font-size:     1.3rem;
}
.gams-acc span {
  font-weight:  500; color: var(--texto-default);
  text-align:   center; line-height: 1.3; font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════════════
   3. TRÁMITES — sección ancho completo
   ══════════════════════════════════════════════════════════════ */

/* Header de sección compartido */
.sec-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   20px;
  flex-wrap:       wrap;
  gap:             10px;
}

.gams-sec-titulo {
  font-weight:   700 !important;
  color:         var(--texto-default) !important;
  margin-bottom: 4px !important;
}
.gams-sec-sub { color: var(--texto-suave); margin-bottom: 0; font-size: 0.85rem; }

.gams-ver-todos {
  color:           var(--primary-main); background: none;
  border:          1px solid var(--primary-main);
  padding:         8px 18px; border-radius: var(--radio);
  cursor:          pointer; font-family: var(--fuente);
  text-decoration: none; display: inline-flex;
  align-items:     center; gap: 6px;
  font-size:       0.85rem; white-space: nowrap;
  transition:      background var(--transicion), color var(--transicion);
}
.gams-ver-todos:hover { background: var(--primary-main); color: #fff; text-decoration: none; }

/* Sección trámites */
#gams-tramites {
  padding:       32px 0 28px;
  border-bottom: 1px solid var(--borde-suave);
  background: linear-gradient(180deg, var(--background-default) 0%, #e5eefd 100%);
}

[data-theme="dark"] {
#gams-tramites, #gams-ruat, #gams-documentos {
  background: transparent ;
}
}


/* ── 4 íconos de área — más grandes ── */
.tr-areas-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   14px;
  margin-bottom:         24px;
}

.tr-area-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  padding:         22px 12px 18px;
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio-lg);
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color var(--transicion), transform var(--transicion),
  box-shadow var(--transicion);
}
.tr-area-card:hover {
  border-color:    var(--area-color, var(--primary-main));
  transform:       translateY(-3px);
  box-shadow:      var(--sombra-card);
  text-decoration: none;
}

.tr-area-icon {
  width:           64px;
  height:          64px;
  border-radius:   var(--radio-lg);
  background:      var(--area-bg, #e8f5e9);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.8rem;
  color:           var(--area-color, var(--primary-main));
  transition:      transform var(--transicion);
}
.tr-area-card:hover .tr-area-icon { transform: scale(1.08); }

.tr-area-nombre {
  font-weight: 600;
  color:       var(--texto-default);
  font-size:   0.88rem;
  text-align:  center;
  line-height: 1.2;
}
.tr-area-count {
  font-size: 0.75rem;
  color:     var(--texto-suave);
}

/* ── 4 tarjetas de muestra — grid 2x2 ── */
.tr-muestra-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         18px;
}

.tr-muestra-card {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding:       16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  cursor:        pointer;
  transition:    border-color var(--transicion), box-shadow var(--transicion),
  transform var(--transicion);
}
.tr-muestra-card:hover {
  border-color: var(--card-color, var(--primary-main));
  box-shadow:   var(--sombra-card);
  transform:    translateY(-2px);
}

.tr-muestra-top {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 2px;
}

.tr-muestra-icon-mini {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.tr-muestra-icon-mini svg {
  width:  14px;
  height: 14px;
  stroke: #fff;
  fill:   none;
  stroke-width:      1.8;
  stroke-linecap:    round;
  stroke-linejoin:   round;
}

.tr-muestra-badge {
  display:        inline-block;
  font-size:      0.68rem;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background:     var(--card-bg, #e8f5e9);
  color:          var(--card-color, var(--primary-main));
  width:          fit-content;
}

/* Puntos de requisitos */
.tr-muestra-reqs {
  display:     flex;
  align-items: center;
  gap:         3px;
}
.tr-req-dot {
  width:        5px;
  height:       5px;
  border-radius: 50%;
  flex-shrink:  0;
}
.tr-req-label {
  font-size:   0.75rem;
  color:       var(--texto-suave);
  margin-left: 4px;
}

.tr-muestra-tit {
  font-weight: 500;
  color:       var(--texto-default);
  font-size:   0.88rem;
  line-height: 1.4;
  flex:        1;
  margin:      0;
}

.tr-muestra-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.75rem;
  color:           var(--texto-suave);
  padding-top:     8px;
  border-top:      1px solid var(--borde-suave);
  margin-top:      auto;
}
.tr-muestra-hint { color: var(--card-color, var(--primary-main)); font-weight: 600; }

/* ── Modal de trámite ── */
#gams-modal-overlay {
  display:         none; position: fixed; inset: 0;
  background:      rgba(0,0,0,0.55); z-index: 9999;
  align-items:     center; justify-content: center; padding: 20px;
}
#gams-modal-overlay.open { display: flex; }
#gams-modal {
  background:    var(--background-card);
  border-radius: var(--radio-lg);
  width:         100%; max-width: 540px;
  max-height:    88vh; overflow-y: auto;
  box-shadow:    0 20px 60px rgba(0,0,0,0.3);
  animation:     gamsIn .18s ease;
}
@keyframes gamsIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
#gams-modal-header {
  padding:       16px 20px 12px;
  border-bottom: 1px solid var(--borde-suave);
  display:       flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  position:      sticky; top: 0;
  background:    var(--background-card); z-index: 1;
}
#gams-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f0f0f0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s; font-size: 14px;
}
#gams-modal-close:hover { background: #ddd; }
#gams-m-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; display: inline-block; margin-bottom: 8px; }
#gams-m-titulo { font-size: 1rem; font-weight: 600; color: var(--texto-default); line-height: 1.35; }
#gams-modal-body { padding: 16px 20px; }
.gams-m-reqs-label { font-size: 0.68rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
/* Estilos ol/li dentro del modal de trámites (front-page) */
#gams-m-reqs ol {
  counter-reset: item;
  list-style:    none;
  padding:       0;
  margin:        0 0 8px;
}
#gams-m-reqs ol li {
  display:           flex;
  align-items:       flex-start;
  gap:               10px;
  padding:           7px 0;
  border-bottom:     1px solid var(--borde-suave);
  font-size:         0.82rem;
  color:             var(--texto-default);
  line-height:       1.5;
  counter-increment: item;
}
#gams-m-reqs ol li:last-child { border-bottom: none; }
#gams-m-reqs ol li::before {
  content:         counter(item) ".";
  min-width:       20px;
  height:          20px;
  border-radius:   50%;
  background:      var(--background-default);
  color:           var(--primary-main);
  font-size:       0.68rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
#gams-m-reqs .tr-etapa {
  background:   color-mix(in srgb, var(--primary-main) 7%, transparent);
  border-left:  3px solid var(--primary-main);
  border-radius: var(--radio);
  padding:      6px 10px;
  margin:       10px 0 4px;
  font-size:    0.80rem;
  color:        var(--primary-main);
}
#gams-m-reqs .tr-nota {
  font-size:   0.72rem;
  color:       var(--texto-muy-suave);
  font-style:  italic;
  margin:      6px 0 0;
  padding-top: 6px;
  border-top:  1px solid var(--borde-suave);
}
#gams-m-reqs .tr-desc {
  font-size:    0.80rem;
  color:        var(--texto-suave);
  font-style:   italic;
  margin:       8px 0 2px;
  padding-left: 4px;
}
#gams-m-base { font-size: 0.72rem; color: var(--texto-suave); margin-top: 4px; }
#gams-modal-footer { display:flex; gap:10px; flex-wrap:wrap; padding:12px 20px 16px; border-top:1px solid var(--borde-suave); }
.gams-m-btn-pdf { background:var(--primary-main); color:#fff; padding:9px 18px; border-radius:var(--radio); font-size:0.83rem; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
.gams-m-btn-pdf:hover { background:var(--primary-light); color:#fff; text-decoration:none; }
.gams-m-btn-lista { background:none; color:var(--primary-main); padding:9px 18px; border-radius:var(--radio); font-size:0.83rem; font-weight:500; border:1px solid var(--primary-main); text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.gams-m-btn-lista:hover { background:var(--primary-main); color:#fff; text-decoration:none; }

/* ══════════════════════════════════════════════════════════════
   NOTICIAS — sección ancho completo
   ══════════════════════════════════════════════════════════════ */
#gams-noticias {
  padding:       32px 0 28px;
  border-bottom: 1px solid var(--borde-suave);
}

/* Grid asimétrico: destacada izquierda + secundarias derecha */
.news-grid {
  display:               grid;
  grid-template-columns: 1.4fr 1fr;
  gap:                   16px;
  align-items:           start;
}

/* ── Tarjeta destacada ── */
.news-destacada {
  display:         flex;
  flex-direction:  column;
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio-lg);
  overflow:        hidden;
  text-decoration: none;
  transition:      box-shadow var(--transicion), transform var(--transicion);
}
.news-destacada:hover {
  box-shadow:      var(--sombra-card);
  transform:       translateY(-2px);
  text-decoration: none;
}

.news-destacada-img {
  height:          210px;
  background:      var(--primary-navbg);
  background-size:     cover;
  background-position: center;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255,255,255,0.2);
  font-size:       4rem;
  position:        relative;
  flex-shrink:     0;
}

/* Badge "Destacado" sobre la imagen */
.news-sticky-badge {
  position:       absolute;
  top:            12px;
  left:           12px;
  background:     var(--color-acento);
  color:          #fff;
  font-size:      0.68rem;
  font-weight:    700;
  padding:        4px 10px;
  border-radius:  99px;
  display:        flex;
  align-items:    center;
  gap:            5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.news-destacada-body {
  padding:        18px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
}

.news-destacada-tit {
  font-size:   1rem !important;
  font-weight: 700 !important;
  color:       var(--texto-default) !important;
  line-height: 1.4 !important;
  margin:      0 !important;
}

.news-destacada-excerpt {
  font-size:   0.84rem;
  color:       var(--texto-suave);
  line-height: 1.6;
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ── Badge de categoría — compartido ── */
.news-cat-pill {
  display:        inline-block;
  font-size:      0.68rem;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  width:          fit-content;
}

/* ── Fecha — compartida ── */
.news-fecha {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   0.75rem;
  color:       var(--texto-suave);
}
.news-fecha i { font-size: 0.8rem; }

/* ── Columna de noticias secundarias ── */
.news-secundarias {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.news-card {
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio-lg);
  padding:         14px;
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  gap:             7px;
  transition:      border-color var(--transicion), transform var(--transicion),
  box-shadow var(--transicion);
}
.news-card:hover {
  border-color:    var(--primary-main);
  transform:       translateX(3px);
  box-shadow:      var(--sombra-card);
  text-decoration: none;
}

.news-card-tit {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--texto-default);
  line-height: 1.4;
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ══════════════════════════════════════════════════════════════
   4. INDICADORES
   ══════════════════════════════════════════════════════════════ */
#gams-indicadores { background:var(--background-card); padding:48px 0; } /* antes 32px */
.gams-ind-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr); /* antes 4 columnas — el clima se
                                           movió al hero, quedan 3 tarjetas */
  gap:20px;              /* antes 16px */
  max-width:780px;       /* antes 1000px — reducido junto con las columnas */
  margin:0 auto;
}
.gams-ind {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding:       32px 18px;  /* antes 24px 14px */
  text-align:center;
  border-top:    4px solid var(--primary-main); /* antes 3px */
}
.gams-ind-num { font-weight:800; font-size:3rem; line-height:1; margin-bottom:8px; color:var(--primary-main); } /* antes 700 / 2.5rem */
.gams-ind-lbl { color:var(--texto-suave); line-height:1.3; font-size:0.92rem; font-weight:500; } /* antes 0.82rem */

/* ══════════════════════════════════════════════════════════════
   5. GACETA MUNICIPAL — nueva sección
   ══════════════════════════════════════════════════════════════ */
#gams-gaceta {
  background:    var(--background-default);
  padding:       40px 0;
  border-top:    1px solid var(--borde-suave);
}

.gams-gaceta-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
  flex-wrap:       wrap;
  gap:             12px;
}
.gams-gaceta-header h2 {
  font-weight: 700 !important;
  color: var(--texto-default) !important;
  margin: 0 !important;
}
.gams-gaceta-header p {
  color: var(--texto-suave);
  margin: 4px 0 0;
  font-size: 0.85rem;
}

/* ── Banner Opción B: texto izquierda + imagen decorativa derecha ── */
/* ── Banner Gaceta — Opción A mejorada ──────────────────────
   Móvil:   imagen ocupa todo el fondo, overlay completo
   Desktop: imagen al 50% derecho, texto con fondo semitransparente
   ─────────────────────────────────────────────────────────── */
.gams-gaceta-banner {
  position:        relative;
  border-radius:   var(--radio-lg);
  overflow:        hidden;
  min-height:      220px;
  display:         flex;
  align-items:     stretch;
  margin-bottom:   20px;
  text-decoration: none;
  transition:      transform var(--transicion), box-shadow var(--transicion);
}
.gams-gaceta-banner:hover {
  transform:       translateY(-2px);
  box-shadow:      0 8px 24px rgba(0,0,0,0.18);
  text-decoration: none;
}

/* Imagen de fondo — ocupa todo el banner */
.gams-gaceta-banner-imagen {
  position:   absolute;
  inset:      0;
  z-index:    0;
}
.gams-gaceta-banner-imagen img {
  width:           100%;
  height:          100%;
  object-fit:      contain;
  object-position: right center; /* imagen anclada al 50% derecho */
  display:         block;
}

/* Overlay sobre la imagen:
   Móvil   → oscuro completo para legibilidad
   Desktop → solo en la mitad izquierda (donde va el texto) */
.gams-gaceta-banner-imagen::after {
  content:    '';
  position:   absolute;
  inset:      0;
  /* Degradado: izquierda oscuro → derecha semitransparente */
  background: linear-gradient(
          to right,
          rgba(21,74,25,0.96) 0%,
          rgba(21,74,25,0.95) 50%,
          rgba(21,74,25,0.50) 65%,
          rgba(21,74,25,0.12) 82%,
          rgba(21,74,25,0.04) 100%
  );
  z-index:    1;
}

/* Fallback si no hay imagen: fondo sólido institucional */
.gams-gaceta-banner-imagen.sin-imagen {
  background: linear-gradient(135deg, var(--primary-main) 0%, var(--primary-navbg) 100%);
}
.gams-gaceta-banner-imagen.sin-imagen::after {
  display: none;
}

/* Contenido — encima del overlay */
.gams-gaceta-banner-content {
  position:        relative;
  z-index:         2;
  padding:         32px 36px;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  width:           55%;   /* ocupa el 55% izquierdo en desktop */
  min-height:      220px;
}

.gams-gaceta-banner-content .tag {
  display:        inline-block;
  background:     rgba(255,255,255,0.20);
  color:          rgba(255,255,255,0.95);
  font-size:      0.68rem;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom:  14px;
  width:          fit-content;
  border:         1px solid rgba(255,255,255,0.25);
}
.gams-gaceta-banner-content h3 {
  color:       #fff !important;
  font-weight: 700 !important;
  font-size:   1.6rem !important;
  margin:      0 0 10px !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.gams-gaceta-banner-content p {
  color:       rgba(255,255,255,0.85);
  font-size:   0.88rem;
  margin:      0 0 22px;
  line-height: 1.65;
  flex:        1;
}
.gams-gaceta-banner-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      #fff;
  color:           var(--primary-main);
  font-weight:     700;
  font-size:       0.85rem;
  padding:         10px 22px;
  border-radius:   var(--radio);
  text-decoration: none;
  width:           fit-content;
  transition:      background var(--transicion), color var(--transicion),
  transform var(--transicion);
}
.gams-gaceta-banner-cta:hover {
  background:      var(--color-acento);
  color:           #fff;
  text-decoration: none;
  transform:       translateY(-1px);
}

/* Grid de tipos de documentos */
.gams-gaceta-tipos {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}

.gams-gaceta-tipo {
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio);
  padding:         20px 16px;
  text-align:      center;
  text-decoration: none;
  display:         block;
  transition:      border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
  border-top:      3px solid transparent;
}
.gams-gaceta-tipo:hover {
  border-color:    var(--borde-medio);
  border-top-color: var(--primary-main);
  box-shadow:      var(--sombra-card);
  transform:       translateY(-2px);
  text-decoration: none;
}
.gams-gaceta-tipo-icon {
  width:         48px; height: 48px;
  border-radius: 50%;
  background:    #e8f5e9;
  display:       flex; align-items: center; justify-content: center;
  margin:        0 auto 12px;
  font-size:     1.4rem;
  color:         var(--primary-main);
}
.gams-gaceta-tipo h4 {
  font-weight:   600 !important;
  color:         var(--texto-default) !important;
  font-size:     0.88rem !important;
  margin:        0 0 4px !important;
}
.gams-gaceta-tipo p {
  color:     var(--texto-suave);
  font-size: 0.75rem;
  margin:    0;
  line-height: 1.4;
}
.gams-gaceta-tipo .count {
  display:       inline-block;
  margin-top:    8px;
  background:    #e8f5e9;
  color:         var(--primary-main);
  font-weight:   700;
  font-size:     0.7rem;
  padding:       2px 10px;
  border-radius: 99px;
}

/* ══════════════════════════════════════════════════════════════
   TURISMO — layout revista con imágenes de portada
   ══════════════════════════════════════════════════════════════ */
#gams-turismo { padding: 32px 0; }

.gams-tur-grid {
  display:               grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows:    200px 160px 160px;
  gap:                   10px;
  margin-top:            16px;
}

.gams-tur-card {
  position:      relative;
  border-radius: 12px;
  overflow:      hidden;
  cursor:        pointer;
  background:    #111;
  display:       block;
  text-decoration: none;
}
.gams-tur-card:focus-visible { box-shadow: 0 0 0 3px var(--primary-main); }
.gams-tur-card--grande { grid-row: 1 / 4; }
.gams-tur-card--mapa { background: #e8f0e8; }  /* sin overflow:visible */
.gams-tur-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  transition:          transform .5s ease;
}

/* Fondo de la tarjeta mapa — tile de OpenStreetMap estático */
.gams-tur-mapa-bg {
  background-color: #aad3df;
  background-image:
          linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
          linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
}
.gams-tur-card:hover .gams-tur-bg { transform: scale(1.06); }

/* Mapa: la foto es bastante oscura de base — se le sube brillo y
   saturación para que se note más al lado de las otras 3 tarjetas
   con fotos vívidas */
.gams-tur-card--mapa .gams-tur-bg {
  filter: brightness(1.22) saturate(1.15) contrast(1.05);
}

.gams-tur-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
  transition: opacity .3s;
  z-index:    1;
}
.gams-tur-overlay--mapa {
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.gams-tur-card:hover .gams-tur-overlay { opacity: .92; }

/* Pin centrado — refuerza que es un mapa, primer elemento que
   se nota al mirar la tarjeta */
.gams-tur-mapa-pin {
  position:   absolute;
  top:        38%;
  left:       50%;
  transform:  translate(-50%, -50%);
  z-index:    2;
  font-size:  2.4rem;
  color:      #e53935;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
  filter:     drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.gams-tur-mapa-pin-pulso {
  position:      absolute;
  bottom:        -2px;
  left:          50%;
  width:         16px;
  height:        16px;
  transform:     translateX(-50%);
  border-radius: 50%;
  background:    rgba(229, 57, 53, .5);
  animation:     gamsPinPulso 1.8s ease-out infinite;
}
@keyframes gamsPinPulso {
  0%   { transform: translateX(-50%) scale(1);   opacity: .7; }
  100% { transform: translateX(-50%) scale(3.2); opacity: 0;  }
}

.gams-tur-content {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    16px;
  z-index:    2;
  color:      #fff;
  transform:  translateY(4px);
  transition: transform .3s ease;
}
.gams-tur-card:hover .gams-tur-content { transform: translateY(0); }

.gams-tur-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

.gams-tur-tag {
  font-size:       0.62rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .07em;
  padding:         2px 9px;
  border-radius:   99px;
  background:      rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  color:           #fff;
  display:         inline-block;
  margin-bottom:   6px;
}
.gams-tur-tag--dest { background: rgba(255,200,0,.85); color: #7b3f00; }

.gams-tur-tit {
  font-size:     1rem;
  font-weight:   700;
  line-height:   1.3;
  margin-bottom: 4px;
  color:         #fff;
}
.gams-tur-card--grande .gams-tur-tit { font-size: 1.35rem; }

.gams-tur-desc {
  font-size:   0.75rem;
  opacity:     .85;
  line-height: 1.5;
  max-height:  0;
  overflow:    hidden;
  transition:  max-height .35s ease;
  color:       #fff;
}
.gams-tur-card:hover .gams-tur-desc    { max-height: 80px; }
.gams-tur-card--grande .gams-tur-desc  { max-height: 80px; }

.gams-tur-cta {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   0.72rem;
  font-weight: 700;
  margin-top:  6px;
  color:       #fff;
  opacity:     0;
  transform:   translateY(4px);
  transition:  opacity .25s .1s, transform .25s .1s;
}
.gams-tur-card:hover .gams-tur-cta { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 640px) {
  .gams-tur-grid {
    grid-template-columns: 1fr;
    grid-template-rows:    220px 160px 160px 160px;
  }
  .gams-tur-card--grande { grid-row: auto; }
}

/* ══════════════════════════════════════════════════════════════
   7. OBSERVATORIO
   ══════════════════════════════════════════════════════════════ */
#gams-obs {
  background: linear-gradient(135deg, #5e3391 0%, #772ba2 100%);
  border-radius:   var(--radio-lg);
  padding: 28px;
  display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap; margin-top: 24px; margin-bottom: 24px;
}
.gams-obs-icon { flex-shrink:0; }
.gams-obs-text { flex:1; min-width:220px; }
.gams-obs-text h4 { font-weight:600 !important; color:#fff !important; margin-bottom:5px !important; }
.gams-obs-text p { color:rgba(255,255,255,0.8); line-height:1.55; margin:0; font-size:0.88rem; }
.gams-obs-btn {
  background: rgba(255,255,255,0.15);   /* antes: black — se integra al morado en vez de pelear */
  border: 1.5px solid rgba(255,255,255,0.4);  /* nuevo — le da definición sin ser un bloque sólido */
  color:#fff;
  font-weight:700;
  padding:10px 22px;
  border-radius:var(--radio);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: background var(--transicion), border-color var(--transicion);
  font-family:var(--fuente);
  backdrop-filter: blur(4px);
}
.gams-obs-btn:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.6);
  color:#fff;
  text-decoration:none;
}

/* ══════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #gams-hero .hero-inner     { grid-template-columns: 1fr; padding: 40px 24px; }
  #gams-hero-right           { max-width: 520px; justify-self: stretch; }
  .tr-areas-grid             { grid-template-columns: repeat(2,1fr); }
  .news-grid                 { grid-template-columns: 1fr; }
  .gams-gaceta-tipos         { grid-template-columns: repeat(3,1fr); }
  /* Banner gaceta en tablet: contenido ocupa más ancho */
  .gams-gaceta-banner-content {
    width:   70%;
    padding: 24px 24px;
  }
  /* Overlay un poco más opaco en tablet */
  .gams-gaceta-banner-imagen::after {
    background: linear-gradient(
            to right,
            rgba(21,74,25,0.96) 0%,
            rgba(21,74,25,0.95) 60%,
            rgba(21,74,25,0.40) 80%,
            rgba(21,74,25,0.08) 100%
    );
  }
}

@media (max-width: 768px) {
  #gams-hero                 { min-height: 360px; }
  #gams-hero .hero-inner     { padding: 32px 16px; }
  .gams-accesos-row          { grid-template-columns: repeat(3,1fr); }
  .tr-muestra-grid           { grid-template-columns: 1fr; }
  .tr-areas-grid             { grid-template-columns: repeat(2,1fr); gap:10px; }
  .news-destacada-img        { height: 160px; }
  .gams-ind-grid             { grid-template-columns: repeat(2,1fr); }
  .gams-gaceta-tipos         { grid-template-columns: 1fr 1fr; }
  /* Móvil: contenido ocupa todo el ancho, imagen de fondo visible */
  .gams-gaceta-banner-content {
    width:   100%;
    padding: 24px 20px;
    min-height: 220px;
  }
  .gams-gaceta-banner-content h3 { font-size: 1.2rem !important; }
  /* Overlay uniforme en móvil — imagen se ve de fondo pero no distrae */
  .gams-gaceta-banner-imagen::after {
    background: linear-gradient(
            to bottom,
            rgba(21,74,25,0.75) 0%,
            rgba(21,74,25,0.85) 50%,
            rgba(21,74,25,0.92) 100%
    );
  }
  #gams-obs                  { padding: 20px 16px; }
  #gams-modal                { max-width: 100%; }
}

@media (max-width: 480px) {
  .gams-accesos-row          { grid-template-columns: repeat(2,1fr); }
  .gams-gaceta-tipos         { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   TRAMITES — Ícono estilo RUAT (círculo sólido + SVG blanco)
   Reemplaza .tr-area-icon (cuadrado redondeado con bi-icon)
   ══════════════════════════════════════════════════════════════ */
.tr-area-icon-ruat {
  width:           87px;
  height:          87px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   2px;
  transition:      transform var(--transicion), filter var(--transicion);
  flex-shrink:     0;
}
.tr-area-icon-ruat svg {
  width:          48px;
  height:         48px;
  stroke:         #fff;
  fill:           none;
}
.tr-area-card:hover .tr-area-icon-ruat {
  transform: scale(1.08);
  filter:    brightness(1.1);
}


/* ══════════════════════════════════════════════════════════════
   DOCUMENTOS GAMS
   ══════════════════════════════════════════════════════════════ */
#gams-documentos {
  padding:    44px 0 48px;
  border-top: 1px solid var(--borde-suave);
  background: linear-gradient(180deg, var(--background-default) 0%, #ede4d6 100%);
}

/* ── Imagen izquierda + texto derecha ── */

/* ── Imagen alineada a la izquierda con el párrafo ── */
.docs-intro {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 4px;
}
.docs-intro img {
  width:       120px;
  height:      120px;
  object-fit:  contain;
  flex-shrink: 0;
  animation:   docs-float 4s ease-in-out infinite;
  filter:      drop-shadow(0 8px 16px rgba(0,0,0,.13));
}
.docs-intro p {
  margin:      0;
  font-size:   0.9rem;
  color:       var(--texto-suave);
  line-height: 1.75;
}
.docs-intro p strong {
  color:       var(--texto-default);
  font-weight: 600;
}
/* Móvil: imagen se mantiene a la izquierda, solo se reduce */
@media (max-width: 540px) {
  .docs-intro     { gap: 12px; align-items: flex-start; }
  .docs-intro img { width: 70px; height: 70px; flex-shrink: 0; }
  .docs-icon {
    width:           72px !important;
    height:          72px !important;
  }
  .docs-icon svg {
    width:  36px !important;
    height: 36px !important;
  }
  .tr-area-icon-ruat {
    width:           72px;
    height:          72px;
  }
  .tr-area-icon-ruat svg {
    width:          36px;
    height:         36px;
  }
}

/* ── Grid de 4 íconos ── */
.docs-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

.docs-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  padding:         22px 12px 18px;
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio-lg);
  text-decoration: none;
  text-align:      center;
  transition:      border-color var(--transicion), transform var(--transicion),
  box-shadow var(--transicion);
}
.docs-card:hover {
  border-color:    var(--docs-hover-color, var(--color-acento));
  transform:       translateY(-3px);
  box-shadow:      0 6px 20px rgba(0,0,0,.07);
  text-decoration: none;
}

/* Círculo acento → color área en hover */
.docs-icon {
  width:           87px;
  height:          87px;
  border-radius:   50%;
  background:      var(--color-acento);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transicion), transform var(--transicion);
  flex-shrink:     0;
}
.docs-icon svg {
  width:  48px;
  height: 48px;
  stroke: #fff;
  fill:   none;
}
.docs-card:hover .docs-icon {
  background: var(--docs-hover-color, var(--color-acento));
  transform:  scale(1.06);
}

.docs-label {
  font-weight: 700;
  color:       var(--texto-default);
  font-size:   0.88rem;
  line-height: 1.2;
}
.docs-count {
  font-size: 0.75rem;
  color:     var(--texto-suave);
}

/* Responsive */
@media (max-width: 540px) {
  .docs-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   SACABA EN CIFRAS — tarjetas clickeables + modales
   ══════════════════════════════════════════════════════════════ */

/* Tarjetas ahora son botones */
.gams-ind {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding:       24px 14px;
  text-align:    center;
  cursor:        pointer;
  font-family:   var(--fuente);
  transition:    border-color var(--transicion), box-shadow var(--transicion),
  transform var(--transicion);
  width: 100%;
}
.gams-ind:hover {
  border-color: var(--primary-main);
  box-shadow:   var(--sombra-card);
  transform:    translateY(-2px);
}
.gams-ind-hint {
  font-size:  0.72rem;
  color:      var(--primary-main);
  margin-top: 8px;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transicion);
}
.gams-ind:hover .gams-ind-hint { opacity: 1; }

/* ── Modales generales ── */
.ind-modal {
  position: fixed;
  inset:    0;
  z-index:  99998;
  display:  flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ind-modal[hidden] { display: none !important; }

.ind-modal-backdrop {
  position: absolute;
  inset:    0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}

.ind-modal-box {
  position:      relative;
  background:    var(--background-card);
  border-radius: var(--radio-lg);
  width:         100%;
  max-width:     560px;
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    0 24px 60px rgba(0,0,0,.25);
  animation:     indModalIn .25s cubic-bezier(.34,1.56,.64,1);
}
.ind-modal-box--sm { max-width: 440px; }

@keyframes indModalIn {
  from { opacity:0; transform:scale(.92) translateY(16px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

.ind-modal-box--lg {
  max-width: 700px;
}

.ind-modal-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.2); color: #fff;
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ind-modal-cerrar:hover { background: rgba(255,255,255,.35); }

.ind-modal-head {
  display:     flex;
  align-items: center;
  gap:         16px;
  padding:     20px 20px 16px;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}
.ind-modal-head-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; flex-shrink: 0;
}
.ind-modal-head-num {
  font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1;
}
.ind-modal-head-lbl {
  font-size: 0.8rem; color: rgba(255,255,255,.75);
  font-weight: 600; margin-top: 3px;
}

.ind-modal-body { padding: 20px; }

/* ── Gráfico de barras habitantes ── */
.ind-hab-graficos { display: flex; flex-direction: column; gap: 20px; }
.ind-graf-bloque {}
.ind-graf-titulo {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave); margin-bottom: 10px;
}
.ind-barra-wrap { display: flex; flex-direction: column; gap: 8px; }
.ind-barra-fila {
  display: grid;
  grid-template-columns: 80px 1fr 70px;
  align-items: center;
  gap: 10px;
}
.ind-barra-lbl { font-size: 0.8rem; color: var(--texto-suave); }
.ind-barra-track {
  height: 10px; background: var(--background-default);
  border-radius: 99px; overflow: hidden;
}
.ind-barra-fill {
  height:           100%;
  border-radius:    99px;
  width:            0;                          /* empieza en 0 */
  transition:       width .8s cubic-bezier(.34,1.2,.64,1);
}
/* Cuando el modal tiene clase .ind-animar, las barras van a su ancho real */
.ind-modal.ind-animar .ind-barra-fill { width: var(--bar-w, 0%); }
.ind-barra-val {
  font-size: 0.78rem; font-weight: 600;
  color: var(--texto-default); text-align: right;
}

/* ── Acciones modal ── */
.ind-modal-acciones {
  display: flex; gap: 10px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
}
.ind-btn-primario, .ind-btn-secundario {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 14px; border-radius: var(--radio);
  font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: all .2s;
}
.ind-btn-primario {
  background: var(--primary-main); color: #fff;
}
.ind-btn-primario:hover {
  background: color-mix(in srgb, var(--primary-main) 80%, black); color: #fff;
}
.ind-btn-secundario {
  background: var(--background-default); color: var(--primary-main);
  border: 2px solid var(--primary-main);
}
.ind-btn-secundario:hover { background: var(--primary-main); color: #fff; }

/* ── Modal geografía ── */
.ind-geo-mapa {
  text-align: center;
  padding: 0 0 16px;
}
.ind-geo-mapa svg { max-width: 100%; height: auto; }

.ind-geo-stats {
  display: flex; gap: 12px;
  margin-bottom: 16px;
}
.ind-geo-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--background-default);
  border-radius: var(--radio);
}
.ind-geo-stat i { font-size: 1.2rem; color: var(--color-acento); }
.ind-geo-stat strong { display: block; font-size: 0.95rem; color: var(--texto-default); }
.ind-geo-stat span   { font-size: 0.78rem; color: var(--texto-suave); }

.ind-geo-nota {
  font-size: 0.75rem; color: var(--texto-suave); margin: 0;
  display: flex; align-items: flex-start; gap: 6px; line-height: 1.5;
}

/* Responsive modales */
@media (max-width: 540px) {
  .ind-modal-box { max-height: 95vh; }
  .ind-barra-fila { grid-template-columns: 70px 1fr 60px; }
  .ind-modal-acciones { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   CLIMA — tarjeta dinámica + modal Open-Meteo
   ══════════════════════════════════════════════════════════════ */

/* Emoji en la tarjeta */
.gams-ind-clima-icon {
  font-size:     1.8rem;
  line-height:   1;
  margin-bottom: 4px;
}

/* Forzar hidden — estos elementos tienen display:flex/grid que sobreescribe
   el atributo hidden del HTML. !important lo corrige. */
#ind-clima-loading[hidden],
#ind-clima-datos[hidden],
#ind-clima-error[hidden] { display: none !important; }

/* Loading spinner */
.ind-clima-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         32px 0;
  color:           var(--texto-suave);
  font-size:       0.88rem;
}
.ind-clima-spinner {
  width:        22px;
  height:       22px;
  border:       3px solid var(--borde-suave);
  border-top:   3px solid #0288d1;
  border-radius: 50%;
  animation:    climaSpin .8s linear infinite;
  flex-shrink:  0;
}
@keyframes climaSpin { to { transform: rotate(360deg); } }

/* Condición principal */
.ind-clima-principal {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 0 16px;
  border-bottom:   1px solid var(--borde-suave);
  margin-bottom:   16px;
}
.ind-clima-condicion {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--texto-default);
}
.ind-clima-maxmin {
  display:  flex;
  gap:      12px;
  font-size: 0.85rem;
  color:    var(--texto-suave);
}
.ind-clima-maxmin strong { color: var(--texto-default); }

/* Grid de 4 datos */
.ind-clima-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   10px;
  margin-bottom:         4px;
}
.ind-clima-dato {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  padding:       14px 10px;
  background:    var(--background-default);
  border-radius: var(--radio);
  text-align:    center;
}
.ind-clima-dato i {
  font-size: 1.2rem;
  color:     #0288d1;
}
.ind-clima-dato-val {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--texto-default);
}
.ind-clima-dato-lbl {
  font-size: 0.72rem;
  color:     var(--texto-suave);
}

/* Error / fallback */
.ind-clima-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         28px 20px;
  text-align:      center;
  color:           var(--texto-suave);
}
.ind-clima-error i   { font-size: 2rem; opacity: .5; }
.ind-clima-error p   { margin: 0; font-size: 0.88rem; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   MODAL ICA — Reporte de Calidad de Aire
   ══════════════════════════════════════════════════════════════ */

.gams-btn-ica,
.gams-btn-modal-url {
  background:      none;
  border:          none;
  color:           var(--color-acento);
  font-weight:     600;
  font-size:       0.83rem;
  cursor:          pointer;
  padding:         0;
  font-family:     var(--fuente);
}
.gams-btn-ica:hover,
.gams-btn-modal-url:hover { text-decoration: underline; }

/* Overlay compartido */
#gams-modal-ica,
#gams-modal-url {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
#gams-modal-ica[hidden],
#gams-modal-url[hidden] { display: none !important; }

#gams-modal-ica-backdrop,
#gams-modal-url-backdrop {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
}

/* ── Caja ICA ── */
#gams-modal-ica-box {
  position:      relative;
  width:         100%;
  max-width:     380px;
  border-radius: 16px;
  overflow:      hidden;
  background:    var(--background-card);
  box-shadow:    0 24px 64px rgba(0,0,0,.35);
  animation:     icaIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes icaIn {
  from { opacity:0; transform:scale(.92) translateY(16px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* Parte superior con color — cabecera + número ICA */
#gams-modal-ica-top {
  padding:    16px 18px 22px;
  transition: background .4s;
}

#gams-modal-ica-head {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   14px;
}
.ica-head-badge {
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding:        3px 10px;
  border-radius:  99px;
  background:     rgba(255,255,255,.25);
  color:          #fff;
  display:        block;
  margin-bottom:  4px;
}
.ica-head-titulo {
  font-size:  0.85rem;
  color:      rgba(255,255,255,.85);
}

#gams-modal-ica-cerrar {
  width:      28px; height: 28px;
  border:     none; border-radius: 50%;
  background: rgba(255,255,255,.2);
  color:      #fff; cursor: pointer; font-size: 13px;
  flex-shrink: 0;
  transition: background .15s;
}
#gams-modal-ica-cerrar:hover { background: rgba(255,255,255,.35); }

.ica-num-wrap {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}
.ica-label {
  font-size:      0.68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          rgba(255,255,255,.7);
  margin-bottom:  2px;
}
#gams-ica-num {
  font-size:   5rem;
  font-weight: 800;
  line-height: 1;
  color:       #fff;
}
#gams-ica-estado-badge {
  padding:        10px 16px;
  border-radius:  10px;
  background:     rgba(255,255,255,.25);
  color:          #fff;
  font-weight:    700;
  font-size:      1rem;
  letter-spacing: .04em;
}

/* Parte inferior — fondo neutro */
#gams-modal-ica-bottom {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--background-card);
}

/* Rangos */
#gams-ica-rangos {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.ica-rango {
  display:     flex;
  align-items: center;
  border-radius: 6px;
  overflow:    hidden;
  opacity:     0.4;
  transition:  opacity .25s, transform .25s;
}
.ica-rango.activo {
  opacity:   1;
  transform: scale(1.02);
}
.ica-rango-num {
  padding:    6px 10px;
  font-size:  0.68rem;
  font-weight: 700;
  min-width:  52px;
  text-align: center;
}
.ica-rango-label {
  padding:    6px 12px;
  font-size:  0.78rem;
  font-weight: 700;
  flex:       1;
  letter-spacing: .04em;
}

/* Descripción */
#gams-ica-desc {
  font-size:   0.82rem;
  color:       var(--texto-suave);
  line-height: 1.6;
  padding:     10px 12px;
  background:  var(--background-default);
  border-radius: 8px;
  border:      1px solid var(--borde-suave);
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  margin:      0;
}
#gams-ica-desc i { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }

/* Fecha */
#gams-ica-fecha-wrap {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         5px;
  font-size:   0.75rem;
  color:       var(--texto-suave);
}

/* Modal URL iframe */
#gams-modal-url-box {
  position:      relative;
  width:         100%;
  max-width:     800px;
  background:    #fff;
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0,0,0,.35);
}
#gams-modal-url-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      var(--primary-main);
  color:           #fff;
  font-weight:     600;
  font-size:       0.9rem;
}
#gams-modal-url-cerrar {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.2);
  color: #fff; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
#gams-modal-url-cerrar:hover { background: rgba(255,255,255,.35); }

@media (max-width: 480px) {
  #gams-modal-ica-box { border-radius: 12px 12px 0 0; }
  #gams-ica-num       { font-size: 4rem; }
}