/* ===========================================================================
   CONECTAMUNICIPIO — Sistema de diseño v1 (Fase 11)
   Identidad: sabana cordobesa y río San Jorge. Verde río profundo, arena
   cálida, dorado mango. Firma visual: la TRENZA del sombrero vueltiao como
   cinta tejida (gradientes CSS, cero imágenes).
   Accesibilidad primero: letra 17px+, objetivos táctiles ≥44px, foco
   visible, movimiento reducido respetado.
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;600;700&display=swap');

:root {
  --rio: #0E5E52;          /* verde río profundo (primario) */
  --rio-oscuro: #0A4239;
  --caribe: #2FA98C;       /* verde hoja brillante (acentos vivos) */
  --mango: #F09A3E;        /* dorado mango (llamados a la acción) */
  --mango-suave: #FCE8CF;
  --sabana: #F8F4EA;       /* arena cálida (fondo) */
  --noche: #17302A;        /* tinta verde-noche (texto) */
  --blanco: #FFFFFF;
  --wa: #25D366;           /* WhatsApp: el canal que todos conocen */
  --cm-primary: var(--rio);          /* re-mapea el color de tenant */
  --radius: 1.1rem;
}

/* --- Base tipográfica generosa ------------------------------------------ */
html { font-size: 17px; }
body {
  font-family: 'Figtree', system-ui, sans-serif;
  background: var(--sabana);
  color: var(--noche);
}
h1, h2, h3, h4, .display-font {
  font-family: 'Bricolage Grotesque', 'Figtree', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--noche);
}

/* --- Firma: la trenza del vueltiao (cinta tejida en CSS puro) ----------- */
.trenza {
  height: 10px;
  background:
    repeating-linear-gradient(45deg,
      var(--noche) 0 8px, var(--sabana) 8px 16px),
    repeating-linear-gradient(-45deg,
      var(--noche) 0 8px, var(--sabana) 8px 16px);
  background-blend-mode: multiply;
  opacity: .9;
}

/* --- Header -------------------------------------------------------------- */
.cm-header {
  background: linear-gradient(140deg, var(--rio-oscuro), var(--rio) 55%, #147a63);
  color: #fff;
}
.cm-header .brand-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.cm-header a { color: #fff; }

/* --- Botones: grandes, redondos, claros ---------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding: .55rem 1.15rem; }
.btn-cm-primary { background: var(--rio); border-color: var(--rio); color: #fff; }
.btn-cm-primary:hover, .btn-cm-primary:focus { background: var(--rio-oscuro); border-color: var(--rio-oscuro); color:#fff; }
.btn-mango { background: var(--mango); border-color: var(--mango); color: var(--noche); font-weight: 700; }
.btn-mango:hover { background: #e18a2f; border-color: #e18a2f; color: var(--noche); }
.btn-success, .bg-success { background-color: var(--wa) !important; border-color: var(--wa) !important; }
.bg-cm-primary, .badge.bg-cm-primary { background-color: var(--rio) !important; }
.badge { border-radius: 999px; font-weight: 600; }
a { color: var(--rio); }
a:hover { color: var(--rio-oscuro); }

/* --- Tarjetas ------------------------------------------------------------- */
.card {
  border: none; border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(23, 48, 42, .07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23,48,42,.12); }
.list-group-item { border-color: rgba(23,48,42,.08); }
.list-group-item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* --- Héroe de la portada --------------------------------------------------- */
.cm-hero {
  background:
    radial-gradient(1100px 420px at 78% -60px, rgba(240,154,62,.28), transparent 60%),
    linear-gradient(150deg, var(--rio-oscuro), var(--rio) 58%, #147a63);
  color: #fff;
  border-radius: 0 0 2rem 2rem;
}
.cm-hero h1 { color:#fff; font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3.1rem); }
.cm-hero .lead { color: #EAF4EF; }
.cm-hero .form-control {
  height: 60px; font-size: 1.1rem; border: none;
  border-radius: 999px 0 0 999px; padding-left: 1.4rem;
}
.cm-hero .btn-buscar {
  height: 60px; border-radius: 0 999px 999px 0; font-size: 1.1rem;
  background: var(--mango); border: none; color: var(--noche); font-weight: 800;
  padding-inline: 1.6rem;
}

/* --- Chips de módulos: puertas grandes con ícono --------------------------- */
.module-chip {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: var(--blanco); border-radius: var(--radius);
  padding: 1rem .5rem; min-height: 96px; justify-content: center;
  text-decoration: none; color: var(--noche); font-weight: 700; font-size: .95rem;
  box-shadow: 0 2px 10px rgba(23,48,42,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.module-chip:hover { transform: translateY(-3px); color: var(--rio); box-shadow: 0 10px 24px rgba(23,48,42,.14); }
.module-chip .icon { font-size: 1.9rem; line-height: 1; }

/* --- Cinta de sección ------------------------------------------------------ */
.section-title {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
}
.section-title::after {
  content: ""; flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mango), transparent 70%);
}

/* --- Pie ------------------------------------------------------------------- */
.cm-footer { background: var(--noche); color: #CFE3DC; }
.cm-footer a { color: #fff; text-decoration: none; }
.cm-footer a:hover { text-decoration: underline; }

/* --- Accesibilidad --------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--mango); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .card, .module-chip { transition: none; }
  .card:hover, .module-chip:hover { transform: none; }
}

/* --- Móvil: header apilable y cero desbordes (fix post-validación) ------- */
body { overflow-x: hidden; }
.cm-header .container { flex-wrap: wrap; row-gap: .5rem; }
.cm-header .brand-title { font-size: 1.15rem; }
@media (max-width: 576px) {
  .cm-header .brand-title { font-size: 1.05rem; }
  .cm-hero h1 { font-size: 1.7rem; }
  .module-chip { min-height: 84px; font-size: .85rem; }
  .module-chip .icon { font-size: 1.6rem; }
}