/* ===========================
   RESET Y ESTRUCTURA GENERAL
   =========================== */
html, body {
  height: 100%;
  margin: 0;
  background-color: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
main { flex: 1; }

/* ===========================
   PALETA DE COLORES (GLOBAL)
   =========================== */
:root{
  --navy: #0b1740;     /* azul navy topbar */
  --magenta: #ec008c;  /* magenta institucional (navbar/acentos) */
  --cyan: #00bfff;     /* celeste pills / botones suaves */
  --cyan-hover:#0099cc;
  --yellow:#ffcc00;    /* CTA amarillo */
  --white:#ffffff;
  --ink:#00111a;       /* texto oscuro */
  --shadow:0 2px 6px rgba(0,0,0,.18);
  --social:#ffd966;    /* iconos redes: dorado legible */
}

header{ isolation:isolate }

/* =================================================================
   HEADER (FORZADO) — TOPBAR NAVY + NAVBAR GRADIENT NAVY→MAGENTA
   ================================================================= */
/* Topbar SIEMPRE navy (máxima especificidad) */
header.sticky-top .topbar{
  background: var(--navy) !important;
  color: #fff !important;
  border: 0 !important;
  margin: 0 !important;
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}

/* Redundancia segura: si se incluye .topbar en otra página, igual será navy */
.topbar {
  background: var(--navy) !important;
  color: #fff;
  box-shadow: var(--shadow);
}

/* Redes a la izquierda */
header.sticky-top .topbar .social a,
.topbar .social a{
  color: var(--social) !important;  /* dorado */
  font-size: 1.1rem;
  opacity: .95;
  transition: opacity .15s ease, transform .15s ease;
}
header.sticky-top .topbar .social a:hover,
.topbar .social a:hover{
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
}

/* Teléfono al centro (ya controlado por tu HTML con d-none d-lg-flex) */
header.sticky-top .topbar .phone{
  color: #eaf2ff !important;
  font-weight: 700;
}

/* Pills (Ley Lobby / Transparencia) a la derecha */
header.sticky-top .topbar .pill-link,
.pill-link{
  background: var(--cyan) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: .6rem !important;
  padding: .45rem .85rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px;
  min-width: 200px;
  text-align: center;
  transition: background .15s ease, transform .15s ease, color .15s ease, box-shadow .15s ease;
}
header.sticky-top .topbar .pill-link:hover,
header.sticky-top .topbar .pill-link:focus-visible,
.pill-link:hover,
.pill-link:focus-visible{
  background: var(--cyan-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(0,191,255,.25);
  outline: none;
}

/* Barra principal: degradado navy → magenta */
header.sticky-top .navbar.header-main,
.navbar.header-main{
  background: linear-gradient(90deg, var(--navy), var(--magenta)) !important;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: var(--shadow);
}

/* Links menú principal */
header.sticky-top .navbar.header-main .nav-link,
.navbar.header-main .nav-link{
  color: #fff !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .35px;
  padding:.85rem 1rem!important;
  font-size:.95rem;
}
header.sticky-top .navbar.header-main .nav-link:hover,
.navbar.header-main .nav-link:hover{
  text-shadow: 0 0 8px rgba(255,255,255,.65);
}

/* Dropdown del header */
header.sticky-top .navbar.header-main .dropdown-menu,
.navbar.header-main .dropdown-menu{
  background: #fff !important;
  border: 0 !important;
  border-radius: .75rem !important;
  padding: .5rem !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
}
header.sticky-top .navbar.header-main .dropdown-item,
.navbar.header-main .dropdown-item{
  font-weight: 600;
  border-radius: .5rem;
  padding:.6rem .8rem;
}
header.sticky-top .navbar.header-main .dropdown-item:hover,
.navbar.header-main .dropdown-item:hover{
  background: rgba(0,191,255,.12) !important;
  color: var(--navy) !important;
}

/* CTA derecha del header */
header.sticky-top .navbar.header-main .btn-cta,
.navbar.header-main .btn-cta{
  background: var(--yellow) !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  border: 0 !important;
}
header.sticky-top .navbar.header-main .btn-cta:hover,
.navbar.header-main .btn-cta:hover{
  background: #ffd633 !important;
}

/* Buscador redondo */
header.sticky-top .navbar.header-main .header-search,
.navbar.header-main .header-search{
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.92) !important;
  color: #fff !important;
}
header.sticky-top .navbar.header-main .header-search:hover,
.navbar.header-main .header-search:hover{
  background: rgba(255,255,255,.16) !important;
}

/* Responsivo: oculta teléfono en móvil (coincide con tu HTML) */
@media (max-width: 991.98px){
  header.sticky-top .topbar .phone{
    display: none !important;
  }
}

/* ==========================================
   SIN ESPACIOS BLANCOS BAJO EL HEADER
   ========================================== */
body, main { margin:0 !important; padding:0 !important; }
header, .topbar, .navbar.header-main { margin:0 !important; border:0 !important; }
section.container-fluid.px-3.mt-2{
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.col-lg-9.col-12.d-flex,
.col-lg-3.col-12.d-flex{
  margin:0 !important;
  padding:0 !important;
}

/* ===========================
   NAVBAR/ENLACES (GENÉRICOS)
   =========================== */
.navbar { flex-wrap: wrap; }
.navbar-brand strong { color: #003366; font-size: 1.3rem; }
.navbar-nav .nav-link { transition: color 0.2s ease-in-out; }
.navbar-nav .nav-link:hover { color: #ffffff; }

/* ===========================
   BOTONES GENERALES
   =========================== */
.btn-primary{
  background-color: var(--navy);
  border-color: var(--navy);
}
.btn-primary:hover{
  background-color: var(--cyan-hover);
  border-color: var(--cyan-hover);
}
.btn-outline-primary{
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-outline-primary:hover{
  background-color: var(--cyan);
  color: #fff;
}

/* ===========================
   CARRUSEL INSTITUCIONAL
   =========================== */
.carrusel-wrapper { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; }
#carruselInstitucional .carousel-inner { height: 100%; }
#carruselInstitucional .carousel-item img,
.carousel-item img{ height: 100%; width: 100%; object-fit: cover; border-radius: 8px; }
.col-lg-9 { display: flex; flex-direction: column; }
#carruselInstitucional { flex-grow: 1; }
#carruselInstitucional .carousel-inner { height: 300px; } /* móvil */
@media (min-width: 768px) {
  #carruselInstitucional .carousel-inner { height: 400px; } /* escritorio */
}

/* ===========================
   SECCIONES INSTITUCIONALES
   =========================== */
.bg-institucional{
  background: linear-gradient(90deg, var(--navy), var(--magenta)) !important;
  color: #fff !important;
  background-repeat: no-repeat; background-size: cover; background-position: center;
}
.portal-ciudadano-section{ background-color: #f9f9f9; padding: 40px 0; border-top: 4px solid #003366; }
.section-title{
  font-size: 2rem; font-weight: 700; position: relative; display: inline-block;
  text-align: center; margin-bottom: 30px;
}
.section-title::after{
  content: ""; display: block; width: 60px; height: 4px; background-color: var(--cyan);
  margin-top: 8px; border-radius: 2px;
}
.section-description{ font-size: 1rem; color: #333; margin-top: 10px; }

/* ===========================
   SERVICIOS (CARDS)
   =========================== */
.servicios-section{ background-color: #eef2f5; padding: 50px 0; }
.servicio-card{
  display: block; background-color: #f8f9fa; border-left: 6px solid var(--cyan);
  padding: 1rem; border-radius: 0.5rem; text-decoration: none; transition: all 0.3s ease;
}
.servicio-card:hover{ background-color: #e9f0ff; transform: translateY(-2px); }
.servicio-icon{ font-size: 2rem; color: var(--cyan); }
.servicio-title{ font-weight: 600; margin-top: 0.5rem; color: #002b5c; }
.servicio-desc{ font-size: 0.95rem; color: #555; }

/* ===========================
   CALENDARIO
   =========================== */
.calendario-section{ background-color: #fff; padding: 50px 0; border-top: 4px solid #003366; }
.evento-card{
  background: #fff; border-left: 6px solid var(--cyan); border-radius: 8px;
  padding: 1.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease; border: 1px solid #e0e0e0;
}
.evento-card:hover{ transform: translateY(-4px); box-shadow:0 0.75rem 1.25rem rgba(0,0,0,0.08); border-color: #d0d0d0; }
.evento-fecha{ font-size: 1.1rem; color: var(--magenta); margin-bottom: 0.5rem; }
.evento-titulo{ font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.evento-desc{ font-size: 0.95rem; color: #555; }

/* ===========================
   ACCESOS RÁPIDOS (columna)
   =========================== */
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm {
  background: linear-gradient(135deg, var(--navy), var(--cyan), var(--magenta));
  background-size: 300% 300%;
  animation: ar-gradient 10s ease infinite;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm h5 {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.2);
  text-align: center;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm .row .btn {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.32) !important;
  font-weight: 700;
  padding: .55rem .9rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.col-lg-3.col-12.d-flex > .p-4.bg-light.rounded-4.shadow-sm .row .btn:hover{
  background: #fff !important;
  color: var(--navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

@keyframes ar-gradient {
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ===========================
   QUICKBAR (BARRA INFERIOR)
   =========================== */
section.quickbar{
  background: linear-gradient(90deg, var(--navy), var(--magenta));
  color:#fff;
}
section.quickbar a{ color:#fff !important; }

/* ===========================
   NOTICIAS (BLOQUE INDEX)
   =========================== */
section.news-section .news-title-bar{
  background:#0a1f6e !important;
  color:#fff !important;
  padding:.65rem 1rem;
  border-radius:8px;
  text-align:center;
  font-weight:800;
  letter-spacing:.3px;
}
section.news-section .cta-tile{
  width:100%;
  border-radius:18px;
  padding:22px;
  margin-bottom:22px;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  gap:16px; display:flex; align-items:center;
}
section.news-section .cta-ico{ width:56px; height:56px; object-fit:contain; }
section.news-section .cta-yellow{ background:#ffd24d; color:#1b1b1b !important; }
section.news-section .cta-navy  { background:#0b1740; }
section.news-section .cta-pink  { background:#f72585; }
section.news-section .news-card{
  background:#fff; border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  padding-bottom:18px; display:flex; flex-direction:column; height:100%;
}
section.news-section .news-img{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px 12px 0 0; }
section.news-section .news-img img{ width:100%; height:100%; object-fit:cover; }
section.news-section .news-meta{ padding:12px 16px 0; font-size:.9rem; color:#6b7280; font-weight:600; }
section.news-section .news-meta .sep{ margin:0 .4rem; opacity:.6; }
section.news-section .news-date{ color:var(--magenta); }
section.news-section .news-title{ padding:6px 16px 10px; font-size:1.05rem; font-weight:800; color:#0b1740; }
section.news-section .news-btn{
  align-self:center; margin-top:auto; border:2px solid #0b1740; color:#0b1740;
  padding:.55rem 1.25rem; border-radius:999px; font-weight:800; text-decoration:none;
}
section.news-section .news-btn:hover{ background:#0b1740; color:#fff; }

/* ===========================
   CARDS GENERALES
   =========================== */
.card{ display: flex; flex-direction: column; height: 100%; transition: all 0.3s ease; }
.card-body{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-img-top{ object-fit: cover; height: 250px; border-bottom: 2px solid var(--cyan); transition: filter 0.3s ease; }
.card:hover{ transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.card:hover .card-img-top{ filter: brightness(90%); }
.card-title{ font-size: 1.2rem; font-weight: 600; }
.card-title.text-primary{ color: #003366; }

/* ======= FORCE NAVY HEADER THEME (override absoluto) ======= */
:root{
  --navy:#0b1740;      /* azul navy oficial */
  --magenta:#ec008c;   /* magenta institucional (por si lo usas en otros lados) */
}

/* Topbar SIEMPRE navy */
header.sticky-top .topbar,
.topbar{
  background-color:#0b1740 !important;
  background:#0b1740 !important;
  color:#fff !important;
}

/* Navbar principal SIEMPRE navy (sin degradados ni temas antiguos) */
header.sticky-top .navbar.header-main,
.navbar.header-main{
  background-color:#0b1740 !important;  /* color sólido */
  background:#0b1740 !important;
  background-image:none !important;     /* cancela gradientes viejos */
  border:0 !important;
  box-shadow:none !important;
}

/* Links del menú en blanco con buen contraste */
header.sticky-top .navbar.header-main .nav-link,
.navbar.header-main .nav-link{
  color:#ffffff !important;
  font-weight:900;
  text-transform:uppercase;
}
header.sticky-top .navbar.header-main .nav-link:hover,
.navbar.header-main .nav-link:hover{
  text-shadow:0 0 8px rgba(255,255,255,.55);
}

/* Botón de búsqueda y CTA mantienen contraste */
header.sticky-top .navbar.header-main .header-search{ 
  border:2px solid rgba(255,255,255,.9) !important; 
  color:#fff !important;
}
header.sticky-top .navbar.header-main .btn-cta{
  background:#ffcc00 !important; 
  color:#00111a !important; 
  border:0 !important; 
  font-weight:900;
}

/* Hamburguesa blanca (por si Bootstrap la pisa) */
.navbar.header-main .navbar-toggler{ border-color: rgba(255,255,255,.7) !important; }
.navbar.header-main .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

    /* =========================
       PALETA INSTITUCIONAL
       (coincide con lo que venimos usando)
    ==========================*/
    :root{
      --navy:#0b1740;
      --magenta:#ec008c;
      --cyan:#00bfff;
      --cyan-2:#14a4e0;
      --ink:#00111a;
      --yellow:#ffcc00;
      --white:#ffffff;
    }

    /* =========================
       HERO PAGOS (tipo Maipú)
    ==========================*/
    .pagos-hero{
      position: relative;
      min-height: 300px;
      background: #0f2347;
      isolation: isolate;
      color:#fff;
    }
    /* imagen de fondo (cámbiala por la que quieras) */
    .pagos-hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1200px 600px at 120% 0%, rgba(236,0,140,.28) 0%, transparent 45%) ,
        radial-gradient(800px 500px at -10% 100%, rgba(0,191,255,.22) 0%, transparent 50%),
        linear-gradient(90deg, rgba(11,23,64,.95) 0%, rgba(11,23,64,.85) 45%, rgba(11,23,64,.80) 100%),
        url("/secciones/img/pagos/banner-pagos.jpg") center/cover no-repeat;  /* <-- reemplaza si quieres */
      z-index: -1;
      filter: saturate(1.05) contrast(1.02);
    }
    /* logo arriba izquierda que regresa al home */
    .pagos-hero .hero-logo{
      position:absolute; top:18px; left:16px;
      display:inline-flex; align-items:center; gap:.5rem;
      text-decoration:none;
    }
    .pagos-hero .hero-logo img{
      height:44px; width:auto; display:block;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    }

    /* Contenido del banner */
    .pagos-hero .hero-inner{
      padding: 90px 16px 32px;
    }
    @media (min-width: 992px){
      .pagos-hero .hero-inner{ padding: 120px 0 40px; }
    }
    .pagos-hero h1{
      font-weight: 900; letter-spacing:.6px; text-transform: uppercase;
    }
    .pagos-hero .sub{
      max-width: 920px;
      font-size: 1.075rem;
      opacity: .95;
    }
    /* botón principal grande */
    .btn-paga-aqui{
      background: var(--yellow);
      color: var(--ink);
      border:0;
      font-weight: 900;
      text-transform: uppercase;
      border-radius: 999px;
      padding: .85rem 1.35rem;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .btn-paga-aqui:hover{ background:#ffd633; color:#000; }

    /* Pill “Paga tu segunda cuota AQUÍ” (opcional estilo) */
    .pago-pill{
      display:inline-flex; align-items:center; gap:.75rem;
      background: #12264c;
      color:#fff; border:2px dashed rgba(255,255,255,.18);
      border-radius: 999px; padding:.5rem .9rem; font-weight:800;
    }
    .pago-pill .badge{
      background: var(--magenta); border-radius:999px; padding:.45rem .75rem;
      font-weight: 900;
    }

    /* =========================
       CAJAS “Dirección / Horario”
    ==========================*/
    .info-box{
      background:#fff; color:#1b1b1b;
      border-left:6px solid var(--cyan);
      border-radius:12px;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      padding: 1rem 1.25rem;
      height:100%;
    }
    .info-box .title{
      font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.35px;
    }

    /* =========================
       TARJETA “Portal de Pagos”
    ==========================*/
    .card-portal .card-title{ color:var(--navy); font-weight: 800; }
    .card-portal .list-check li{ margin-bottom:.45rem; }
    .card-portal .list-check li::marker{ color: var(--cyan-2); }