/* Estilos del index.php (copiados tal cual) para usarlos en todas las páginas internas.
   Si se cambia el diseño del index, actualizar también este archivo. */

    /* ============================================================
       Estilos propios del inicio (prefijo gb-)
       ============================================================ */
    :root {
      --gb-azul: #0e446c;
      --gb-azul-2: #0891b2;
      --gb-dorado: #06b6d4;
      --gb-tinta: #0f172a;
      --gb-gris: #f8fafc;
      --gb-borde: #e5e7eb;
      --gb-texto: #475569;
      --gb-claro: #ecfeff;
      --gb-grad: linear-gradient(90deg, #0891b2 0%, #2563eb 100%);
      --gb-mono: "JetBrains Mono", ui-monospace, monospace;

      /* Variables de la plantilla base */
      --default-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --heading-font: "Plus Jakarta Sans", sans-serif;
      --nav-font: "Plus Jakarta Sans", sans-serif;
      --accent-color: #0891b2;
      --heading-color: #0f172a;
      --nav-color: #334155;
      --nav-hover-color: #0891b2;
      --nav-dropdown-hover-color: #0891b2;
    }

    html { scroll-behavior: smooth; }
    body { color: var(--gb-texto); background: #fff; }

    /* ---------- Encabezado ---------- */
    .index-page .header.gb-header,
    .index-page.scrolled .header.gb-header {
      --background-color: #ffffff;
      padding: 0;
      box-shadow: 0 2px 14px rgba(1, 41, 112, .10);
    }
    .gb-topbar {
      background: var(--gb-azul);
      color: #dbe4f5;
      font-size: 13px;
    }
    .gb-topbar .container-xl { min-height: 38px; gap: 12px; }
    .gb-topbar a { color: #dbe4f5; }
    .gb-topbar a:hover { color: var(--gb-dorado); }
    .gb-topbar-info span, .gb-topbar-info a { margin-right: 18px; white-space: nowrap; }
    .gb-topbar-info i { color: var(--gb-dorado); margin-right: 4px; }
    .gb-topbar-tools { gap: 6px; }
    .gb-topbar-tools .gb-social a { font-size: 15px; margin-left: 10px; }
    .gb-acc-btn {
      background: rgba(255, 255, 255, .12);
      border: 0;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      min-width: 30px;
      height: 26px;
      border-radius: 4px;
      line-height: 1;
    }
    .gb-acc-btn:hover, .gb-acc-btn:focus-visible { background: var(--gb-dorado); color: var(--gb-azul); }
    .gb-nav-row { min-height: 78px; }
    .gb-brand-text { line-height: 1.1; }
    .gb-brand-text strong { display: block; color: var(--gb-azul); font-family: var(--heading-font); font-size: 19px; white-space: nowrap; }
    .gb-brand-text small { display: block; color: #6b7587; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
    @media (max-width: 1399px) {
      .gb-brand-text small { display: none; }
    }
    /* Pantallas de 1200 a 1399 px: menú más compacto para que quepa completo */
    @media (min-width: 1200px) and (max-width: 1399px) {
      .gb-header .navmenu > ul > li > a,
      .gb-header .navmenu > ul > div > li > a { padding: 18px 8px; font-size: 14px; }
      .gb-brand-text strong { font-size: 17px; }
      .gb-header .logo img { max-height: 46px !important; }
    }

    main#main { padding-top: 116px; }
    @media (max-width: 991px) {
      .gb-topbar-info .gb-hide-md { display: none; }
    }
    @media (max-width: 767px) {
      .gb-topbar-info { display: none !important; }
      .gb-topbar .container-xl { justify-content: center !important; }
      .gb-brand-text small { display: none; }
      main#main { padding-top: 110px; }
    }

    /* ---------- Títulos de sección ---------- */
    .gb-section { padding: 70px 0; }
    .gb-section.gb-alt { background: var(--gb-gris); }
    .gb-title { margin-bottom: 36px; }
    .gb-title .gb-kicker {
      display: inline-block;
      color: var(--gb-azul-2);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .gb-title h2 {
      color: var(--gb-azul);
      font-weight: 800;
      font-size: 32px;
      margin: 0;
    }
    .gb-title p { color: #6b7587; margin: 8px 0 0; max-width: 680px; }
    .gb-title.text-center p { margin-left: auto; margin-right: auto; }
    .gb-title h2::after {
      content: "";
      display: block;
      width: 56px;
      height: 4px;
      border-radius: 4px;
      background: var(--gb-dorado);
      margin-top: 12px;
    }
    .gb-title.text-center h2::after { margin-left: auto; margin-right: auto; }

    /* ---------- Portada ---------- */
    .gb-hero {
      position: relative;
      padding: 56px 0 44px;
      overflow: hidden;
      background:
        radial-gradient(900px 420px at 88% -8%, #e0f2fe 0%, transparent 62%),
        radial-gradient(700px 380px at -8% 18%, #ecfeff 0%, transparent 58%),
        #ffffff;
    }
    .gb-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #0e7490; }
    .gb-pill i { color: #0891b2; }
    .gb-pill .sep { color: #cbd5e1; }
    .gb-pill .gb-mono { font-family: var(--gb-mono); font-weight: 500; font-size: 12px; color: #0e7490; background: var(--gb-claro); border: 1px solid #a5f3fc; padding: 3px 10px; border-radius: 6px; }
    .gb-hero h1 { color: var(--gb-tinta); font-weight: 800; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.1; letter-spacing: -1.2px; margin: 18px 0; }
    .gb-grad-text { background: var(--gb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .gb-hero .gb-lead { font-size: 18px; color: var(--gb-texto); max-width: 560px; margin: 0; }
    .gb-hero .gb-lead strong { color: var(--gb-tinta); }

    .gb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
    .gb-btn-grad { display: inline-flex; align-items: center; gap: 8px; background: var(--gb-grad); color: #fff; border: 0; font-weight: 700; padding: 12px 22px; border-radius: 10px; box-shadow: 0 8px 20px rgba(8, 145, 178, .28); transition: transform .2s, box-shadow .2s; }
    .gb-btn-grad:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, .32); }
    .gb-btn-soft { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--gb-tinta); border: 1px solid var(--gb-borde); font-weight: 600; padding: 12px 22px; border-radius: 10px; transition: border-color .2s, color .2s, transform .2s; }
    .gb-btn-soft:hover { border-color: #0891b2; color: #0e7490; transform: translateY(-2px); }

    .gb-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 14px; color: var(--gb-texto); }
    .gb-checks i { color: #0891b2; margin-right: 6px; }

    .gb-search { position: relative; max-width: 600px; margin-top: 26px; }
    .gb-search form { display: flex; background: #fff; border: 1px solid var(--gb-borde); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); transition: border-color .2s, box-shadow .2s; }
    .gb-search form:focus-within { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(6, 182, 212, .15); }
    .gb-search input { flex: 1; border: 0; outline: 0; padding: 10px 14px; font-size: 16px; color: var(--gb-tinta); min-width: 0; background: transparent; }
    .gb-search button { border: 0; background: var(--gb-grad); color: #fff; border-radius: 8px; padding: 0 22px; font-weight: 700; white-space: nowrap; }
    .gb-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--gb-borde); border-radius: 12px; box-shadow: 0 16px 36px rgba(15, 23, 42, .12); list-style: none; margin: 0; padding: 6px; z-index: 20; display: none; max-height: 300px; overflow-y: auto; }
    .gb-search-results.show { display: block; }
    .gb-search-results a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--gb-texto); font-size: 15px; }
    .gb-search-results a:hover, .gb-search-results a.active { background: var(--gb-claro); color: #0e7490; }
    .gb-search-results i { color: #0891b2; }
    .gb-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .gb-chips small { color: #64748b; margin-right: 2px; }
    .gb-chips a { font-size: 13px; color: #0e7490; background: var(--gb-claro); border: 1px solid #cffafe; border-radius: 50px; padding: 4px 12px; transition: background .2s, color .2s; }
    .gb-chips a:hover { background: #0891b2; border-color: #0891b2; color: #fff; }

    /* Foto en marco flotante */
    .gb-hero-media { position: relative; border-radius: 22px; padding: 10px; background: #fff; border: 1px solid var(--gb-borde); box-shadow: 0 30px 60px rgba(15, 23, 42, .12); animation: gbFlota 7s ease-in-out infinite; }
    @keyframes gbFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .gb-hero-media .carousel { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3.4; background: #0f172a; }
    .gb-hero-media .carousel-inner, .gb-hero-media .carousel-item { height: 100%; }
    .gb-hero-media .carousel-item img { width: 100%; height: 100%; object-fit: cover; animation: gbKenBurns 16s ease-in-out infinite alternate; }
    @keyframes gbKenBurns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1%); } }
    .gb-media-tag { position: absolute; top: 24px; right: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: var(--gb-mono); font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, .94); color: #0e7490; border: 1px solid #a5f3fc; padding: 4px 10px; border-radius: 20px; }
    .gb-media-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: gbPunto 1.6s ease-in-out infinite; }
    @keyframes gbPunto { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); } 50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } }
    .gb-media-card { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border: 1px solid var(--gb-borde); border-radius: 14px; padding: 12px 16px; }
    .gb-media-card .ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--gb-claro); color: #0891b2; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    .gb-media-card small { display: block; font-family: var(--gb-mono); font-size: 10.5px; letter-spacing: 1px; color: #0891b2; text-transform: uppercase; }
    .gb-media-card strong { color: var(--gb-tinta); font-size: 14px; }
    .gb-media-card a { margin-left: auto; font-weight: 700; font-size: 13px; color: #0e7490; white-space: nowrap; }
    .gb-media-card a:hover { color: #2563eb; }

    /* Tarjetas de datos rápidos */
    .gb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
    .gb-stat { display: block; background: #fff; border: 1px solid var(--gb-borde); border-radius: 14px; padding: 16px; text-align: center; color: var(--gb-texto); transition: transform .2s, box-shadow .2s, border-color .2s; }
    .gb-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15, 23, 42, .08); border-color: #a5f3fc; color: var(--gb-texto); }
    .gb-stat .lbl { font-family: var(--gb-mono); font-size: 11px; letter-spacing: 1.5px; color: #0891b2; text-transform: uppercase; }
    .gb-stat strong { display: block; font-size: 18px; color: var(--gb-tinta); font-weight: 800; margin: 4px 0 2px; }
    .gb-stat span { font-size: 12px; color: #64748b; overflow-wrap: anywhere; }
    .gb-stat.alerta .lbl { color: #dc2626; }
    @media (max-width: 991px) {
      .gb-hero-media { margin-top: 10px; }
    }
    @media (max-width: 767px) {
      .gb-hero { padding-top: 36px; }
      .gb-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
      .gb-checks { grid-template-columns: 1fr; }
      .gb-media-card { left: 16px; right: 16px; bottom: 16px; }
      .gb-media-card a { display: none; }
      .gb-search button span { display: none; }
    }

    /* ---------- Avisos (cinta) ---------- */
    .gb-ticker { background: #f0f9ff; border-top: 1px solid #e0f2fe; border-bottom: 1px solid #e0f2fe; font-size: 14px; }
    .gb-ticker .container-xl { display: flex; align-items: stretch; overflow: hidden; }
    .gb-ticker-label { background: var(--gb-grad); color: #fff; font-family: var(--gb-mono); font-size: 12px; letter-spacing: 1px; font-weight: 600; padding: 10px 16px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
    .gb-ticker-track { overflow: hidden; flex: 1; display: flex; align-items: center; }
    .gb-ticker-items { display: flex; gap: 50px; white-space: nowrap; padding-left: 20px; animation: gbTicker 40s linear infinite; }
    .gb-ticker-track:hover .gb-ticker-items { animation-play-state: paused; }
    .gb-ticker-items a { color: var(--gb-azul); font-weight: 600; }
    .gb-ticker-items a i { color: #06b6d4; }
    .gb-ticker-items a:hover { color: #0891b2; }
    @keyframes gbTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ---------- Requisitos y trámites ---------- */
    .gb-tram { position: relative; background: linear-gradient(180deg, #f3f8fe 0%, #ffffff 380px); overflow: hidden; }
    .gb-tram .container { position: relative; z-index: 1; max-width: 1080px; }

    /* Ilustración de la iglesia y palmeras (animada) */
    .gb-tram-ilus {
      position: absolute;
      top: 10px;
      right: max(0px, calc(50% - 600px));
      width: min(56%, 640px);
      height: auto;
      z-index: 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
      pointer-events: none;
    }
    .gb-tram-ilus * { fill: none; stroke: #9cbde8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .gb-tram-ilus .relleno { fill: #e6effb; stroke: none; }
    .gb-tram-ilus .suave { stroke: #cddff5; }
    .gb-tram-ilus .nube { animation: gbNube 26s ease-in-out infinite alternate; }
    .gb-tram-ilus .nube.n2 { animation-duration: 34s; animation-direction: alternate-reverse; }
    .gb-tram-ilus .aves { animation: gbAves 22s linear infinite; }
    .gb-tram-ilus .aves path { animation: gbAleteo .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
    .gb-tram-ilus .reloj { transform-box: view-box; transform-origin: 352px 100px; animation: gbReloj 12s linear infinite; }
    .gb-tram-ilus .palma > g { transform-box: fill-box; transform-origin: 50% 100%; animation: gbPalma 4.5s ease-in-out infinite alternate; }
    .gb-tram-ilus .palma.p2 > g { animation-duration: 5.5s; animation-delay: -2s; }
    .gb-tram-ilus .palma.p3 > g { animation-duration: 3.8s; animation-delay: -1s; }
    @keyframes gbNube { from { transform: translateX(-30px); } to { transform: translateX(50px); } }
    @keyframes gbAves { 0% { transform: translate(40px, 120px); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(620px, 30px); opacity: 0; } }
    @keyframes gbAleteo { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
    @keyframes gbReloj { to { transform: rotate(360deg); } }
    @keyframes gbPalma { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }

    .gb-tram-head { max-width: 560px; }
    .gb-tram-head .gb-kicker { color: var(--gb-azul-2); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
    .gb-tram-head h2 { color: var(--gb-azul); font-weight: 800; font-size: clamp(32px, 4.2vw, 46px); margin: 6px 0 8px; letter-spacing: -.5px; }
    .gb-tram-head p { color: #4a5568; font-size: 17px; margin: 0; }

    .gb-tram-search { display: flex; align-items: center; gap: 12px; margin: 34px 0 18px; background: #fff; border: 1px solid #d5ddea; border-radius: 12px; padding: 0 18px; height: 56px; box-shadow: 0 4px 16px rgba(1, 41, 112, .06); transition: box-shadow .25s, border-color .25s; }
    .gb-tram-search:focus-within { border-color: var(--gb-azul-2); box-shadow: 0 0 0 4px rgba(10, 61, 145, .12); }
    .gb-tram-search i { font-size: 20px; color: var(--gb-azul); transition: transform .3s; }
    .gb-tram-search:focus-within i { transform: scale(1.15) rotate(-8deg); }
    .gb-tram-search input { flex: 1; border: 0; outline: 0; font-size: 16px; color: var(--gb-texto); background: transparent; min-width: 0; }

    .gb-tram-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
    .gb-tram-filters button { position: relative; overflow: hidden; border: 1px solid #d5ddea; background: #fff; color: #4a5568; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 10px; transition: color .25s, border-color .25s, transform .2s; }
    .gb-tram-filters button::before { content: ""; position: absolute; inset: 0; background: var(--gb-azul); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: -1; }
    .gb-tram-filters button { z-index: 0; }
    .gb-tram-filters button:hover { border-color: var(--gb-azul-2); color: var(--gb-azul); transform: translateY(-2px); }
    .gb-tram-filters button.active { border-color: var(--gb-azul); color: #fff; }
    .gb-tram-filters button.active::before { transform: scaleX(1); }

    .gb-tram h3.gb-tram-sub { color: var(--gb-azul); font-weight: 800; font-size: 26px; margin-bottom: 22px; }

    /* Tarjetas por dependencia */
    .gb-dep-col { transition: opacity .35s, transform .35s; }
    .gb-dep-col.gb-saliendo { opacity: 0; transform: scale(.96); }
    .gb-dep {
      display: flex;
      align-items: center;
      gap: 24px;
      height: 100%;
      background: #fff;
      border: 1px solid #e1e7f0;
      border-radius: 14px;
      padding: 22px 24px;
      color: var(--gb-texto);
      box-shadow: 0 6px 18px rgba(1, 41, 112, .06);
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .6s ease, transform .6s ease, box-shadow .3s, border-color .3s;
      will-change: transform;
    }
    .gb-dep.in { opacity: 1; transform: none; }
    .gb-dep:hover { box-shadow: 0 18px 36px rgba(1, 41, 112, .14); border-color: #c9d6ea; color: var(--gb-texto); }
    .gb-dep-ico { position: relative; flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; background: #e8f1fc; display: flex; align-items: center; justify-content: center; transition: background .3s; }
    .gb-dep-ico::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px dashed #b9d0ef; transition: border-color .3s; }
    .gb-dep:hover .gb-dep-ico { background: #dcebfb; }
    .gb-dep:hover .gb-dep-ico::before { border-color: var(--gb-azul-2); animation: gbGira 8s linear infinite; }
    @keyframes gbGira { to { transform: rotate(360deg); } }

    .gb-ico-svg { width: 62px; height: 62px; overflow: visible; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
    .gb-dep:hover .gb-ico-svg { transform: translateY(-4px) scale(1.08); }
    .gb-ico-svg * { fill: none; stroke: var(--gb-azul); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .gb-ico-svg .a { stroke: #2f7de1; }
    .gb-ico-svg .f, .gb-ico-svg .b { stroke: none; opacity: 0; transition: opacity .6s ease .9s; }
    .gb-ico-svg .f { fill: #c7dcf6; }
    .gb-ico-svg .b { fill: #ffffff; }
    .gb-ico-svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease .15s; }
    .gb-dep.in .gb-ico-svg [pathLength] { stroke-dashoffset: 0; }
    .gb-dep.in .gb-ico-svg .f, .gb-dep.in .gb-ico-svg .b { opacity: 1; }
    .gb-ico-svg .luz { fill: #2ecc71; stroke: none; animation: gbLuz 1.6s ease-in-out infinite alternate; }
    @keyframes gbLuz { from { opacity: .25; } to { opacity: 1; } }

    .gb-dep h4 { color: var(--gb-azul); font-weight: 800; font-size: 19px; margin: 0 0 4px; }
    .gb-dep p { font-size: 14px; color: #5a6475; margin: 0 0 12px; line-height: 1.45; }
    .gb-dep .gb-more { font-size: 14px; font-weight: 700; color: var(--gb-azul-2); }
    .gb-dep .gb-more i { display: inline-block; margin-left: 6px; transition: transform .25s; }
    .gb-dep:hover .gb-more i { transform: translateX(5px); }
    .gb-tram-empty { display: none; text-align: center; color: #6b7587; padding: 30px 0; }
    .gb-tram-foot { margin-top: 28px; text-align: center; color: #5a6475; }

    @media (max-width: 767px) {
      .gb-tram-ilus { width: 100%; right: 0; top: 0; opacity: .45; }
      .gb-dep { padding: 18px; gap: 16px; }
      .gb-dep-ico { width: 76px; height: 76px; }
      .gb-ico-svg { width: 48px; height: 48px; }
      .gb-dep h4 { font-size: 17px; }
    }

    /* Movimiento en tarjetas con el mouse (inclinación 3D) */
    .gb-tilt { transform-style: preserve-3d; }

    /* ---------- Noticias ---------- */
    .gb-news-main { position: relative; border-radius: 14px; overflow: hidden; height: 100%; min-height: 420px; display: block; color: #fff; }
    .gb-news-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .gb-news-main:hover img { transform: scale(1.04); }
    .gb-news-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 20, 55, .95) 0%, rgba(1, 20, 55, .2) 60%, transparent 100%); }
    .gb-news-main .gb-news-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; z-index: 2; }
    .gb-news-main h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 10px 0 8px; }
    .gb-news-main p { color: #d6dff0; font-size: 15px; margin: 0; }
    .gb-badge { display: inline-block; background: var(--gb-dorado); color: var(--gb-azul); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
    .gb-news-item { display: flex; gap: 14px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gb-borde); color: var(--gb-texto); transition: box-shadow .2s; }
    .gb-news-item:hover { box-shadow: 0 8px 22px rgba(1, 41, 112, .1); color: var(--gb-texto); }
    .gb-news-item img { width: 110px; height: 86px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
    .gb-news-item h4 { font-size: 15px; font-weight: 700; color: var(--gb-azul); margin: 4px 0 0; line-height: 1.3; }
    .gb-news-date { font-size: 12px; color: #8a93a5; }
    .gb-news-date i { margin-right: 4px; }
    .gb-year-links a { font-family: var(--gb-mono); font-size: 13px; font-weight: 600; color: #0e7490; background: var(--gb-claro); border: 1px solid #a5f3fc; border-radius: 8px; padding: 6px 14px; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
    .gb-year-links a:hover { background: var(--gb-grad); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, .22); }
    .gb-year-links a.gb-current { background: var(--gb-grad); border-color: transparent; color: #fff; }

    /* ---------- Alcaldesa ---------- */
    .gb-mayor { background: linear-gradient(135deg, var(--gb-azul) 0%, var(--gb-azul-2) 100%); color: #fff; border-radius: 18px; overflow: hidden; }
    .gb-mayor-img { background: radial-gradient(circle at 50% 70%, rgba(241, 196, 15, .35), transparent 65%); display: flex; align-items: flex-end; justify-content: center; height: 100%; padding-top: 24px; }
    .gb-mayor-img img { max-height: 420px; width: auto; max-width: 100%; }
    .gb-mayor-body { padding: 44px 40px; }
    .gb-mayor-body h2 { color: #fff; font-weight: 800; font-size: 30px; margin: 8px 0 4px; }
    .gb-mayor-body .gb-role { color: var(--gb-dorado); font-weight: 700; }
    .gb-mayor-body blockquote { border-left: 4px solid var(--gb-dorado); padding-left: 16px; margin: 22px 0; font-size: 18px; font-style: italic; color: #e8eef9; }
    .gb-mayor-body p { color: #d3ddf0; }
    .gb-btn-gold { background: var(--gb-dorado); color: var(--gb-azul); font-weight: 700; border: 0; }
    .gb-btn-gold:hover { background: #ffd84a; color: var(--gb-azul); }
    .gb-btn-line { border: 1px solid rgba(255, 255, 255, .6); color: #fff; font-weight: 600; }
    .gb-btn-line:hover { background: #fff; color: var(--gb-azul); }

    /* ---------- Transparencia ---------- */
    .gb-lotaip { background: #fff; border-radius: 14px; border: 1px solid var(--gb-borde); padding: 28px; height: 100%; border-top: 5px solid var(--gb-azul); }
    .gb-lotaip h3 { font-weight: 800; color: var(--gb-azul); font-size: 22px; }
    .gb-lotaip .gb-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
    .gb-lotaip .gb-years a { text-align: center; padding: 10px 0; border-radius: 8px; background: var(--gb-gris); color: var(--gb-azul); font-weight: 700; border: 1px solid var(--gb-borde); }
    .gb-lotaip .gb-years a:hover { background: var(--gb-azul); color: #fff; }
    .gb-lotaip .gb-years a.gb-current { background: var(--gb-azul); color: #fff; }
    .gb-doc { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gb-borde); border-radius: 12px; padding: 16px; height: 100%; color: var(--gb-texto); transition: box-shadow .2s, border-color .2s; }
    .gb-doc:hover { box-shadow: 0 8px 22px rgba(1, 41, 112, .1); border-color: transparent; color: var(--gb-texto); }
    .gb-doc i { font-size: 26px; color: var(--gb-azul-2); line-height: 1; }
    .gb-doc strong { display: block; color: var(--gb-azul); font-size: 15px; }
    .gb-doc span { font-size: 13px; color: #6b7587; }

    /* ---------- Obras ---------- */
    .gb-work { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--gb-borde); height: 100%; display: flex; flex-direction: column; color: var(--gb-texto); transition: box-shadow .2s; }
    .gb-work:hover { box-shadow: 0 12px 28px rgba(1, 41, 112, .12); color: var(--gb-texto); }
    .gb-work-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
    .gb-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .gb-work:hover .gb-work-img img { transform: scale(1.05); }
    .gb-work-img .gb-badge { position: absolute; top: 12px; left: 12px; }
    .gb-work-body { padding: 16px 18px; }
    .gb-work-body h3 { font-size: 17px; font-weight: 700; color: var(--gb-azul); margin: 0 0 4px; }
    .gb-work-body p { font-size: 14px; color: #6b7587; margin: 0; }

    /* ---------- Parroquias ---------- */
    .gb-parish { background: #fff; border-radius: 12px; border: 1px solid var(--gb-borde); padding: 22px; height: 100%; }
    .gb-parish h3 { font-size: 19px; font-weight: 800; color: var(--gb-azul); margin-bottom: 2px; }
    .gb-parish .gb-tag { font-size: 12px; color: #8a93a5; text-transform: uppercase; letter-spacing: 1px; }
    .gb-parish ul { list-style: none; padding: 0; margin: 14px 0 0; }
    .gb-parish li { padding: 7px 0; border-top: 1px dashed var(--gb-borde); font-size: 14px; }
    .gb-parish li a { color: var(--gb-texto); display: flex; justify-content: space-between; }
    .gb-parish li a:hover { color: var(--gb-azul-2); }

    /* ---------- Participación ---------- */
    .gb-part { background: var(--gb-azul); color: #fff; }
    .gb-part .gb-title h2, .gb-part .gb-title .gb-kicker { color: #fff; }
    .gb-part .gb-title .gb-kicker { color: var(--gb-dorado); }
    .gb-part .gb-title p { color: #c9d4ea; }
    .gb-part-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px; padding: 26px; height: 100%; display: block; color: #fff; transition: background .2s; }
    .gb-part-card:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    .gb-part-card > i { font-size: 34px; color: var(--gb-dorado); }
    .gb-part-card h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 14px 0 8px; }
    .gb-part-card p { color: #c9d4ea; font-size: 14px; margin-bottom: 12px; }
    .gb-part-card span { font-weight: 700; color: var(--gb-dorado); font-size: 14px; }

    /* ---------- Multimedia ---------- */
    .gb-marquee { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
    .gb-marquee + .gb-marquee { margin-top: 16px; }
    .gb-marquee-track { display: flex; width: max-content; animation: gbMarquee 45s linear infinite; }
    .gb-marquee.inverso .gb-marquee-track { animation-direction: reverse; animation-duration: 55s; }
    .gb-marquee:hover .gb-marquee-track { animation-play-state: paused; }
    @keyframes gbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .gb-marquee a { position: relative; display: block; width: 240px; aspect-ratio: 4 / 5; margin-right: 16px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(1, 41, 112, .10); flex-shrink: 0; transition: transform .35s; }
    .gb-marquee a:hover { transform: translateY(-6px) rotate(-1deg); }
    .gb-marquee img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
    .gb-marquee a:hover img { transform: scale(1.08); }
    .gb-marquee span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(1, 41, 112, .45); color: #fff; font-size: 26px; opacity: 0; transition: opacity .25s; }
    .gb-marquee a:hover span, .gb-marquee a:focus-visible span { opacity: 1; }
    @media (max-width: 575px) {
      .gb-marquee a { width: 170px; margin-right: 12px; }
    }

    /* ---------- Autoridades ---------- */
    .gb-council { text-align: center; background: #fff; border: 1px solid var(--gb-borde); border-radius: 14px; padding: 22px 14px; height: 100%; }
    .gb-council img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid var(--gb-gris); box-shadow: 0 0 0 2px var(--gb-dorado); margin-bottom: 14px; }
    .gb-council h4 { font-size: 16px; font-weight: 700; color: var(--gb-azul); margin: 0; }
    .gb-council span { font-size: 13px; color: #6b7587; }

    /* ---------- Enlaces de interés ---------- */
    .gb-link-logo { display: flex; align-items: center; justify-content: center; height: 110px; background: #fff; border: 1px solid var(--gb-borde); border-radius: 12px; padding: 14px; transition: box-shadow .2s; }
    .gb-link-logo:hover { box-shadow: 0 8px 22px rgba(1, 41, 112, .1); }
    .gb-link-logo img { max-height: 80px; max-width: 100%; object-fit: contain; }
    .gb-link-text { display: flex; align-items: center; gap: 12px; height: 110px; background: #fff; border: 1px solid var(--gb-borde); border-radius: 12px; padding: 14px 18px; color: var(--gb-texto); transition: box-shadow .2s; }
    .gb-link-text:hover { box-shadow: 0 8px 22px rgba(1, 41, 112, .1); color: var(--gb-texto); }
    .gb-link-text i { font-size: 28px; color: var(--gb-azul-2); }
    .gb-link-text strong { display: block; color: var(--gb-azul); font-size: 15px; }
    .gb-link-text span { font-size: 12px; color: #6b7587; }

    /* ---------- Atención ciudadana ---------- */
    .gb-contact { background: var(--gb-gris); border-top: 1px solid var(--gb-borde); }
    .gb-contact-item { display: flex; gap: 14px; align-items: flex-start; }
    .gb-contact-item i { width: 46px; height: 46px; border-radius: 50%; background: var(--gb-azul); color: var(--gb-dorado); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    .gb-contact-item strong { display: block; color: var(--gb-azul); }
    .gb-contact-item span, .gb-contact-item a { font-size: 14px; color: var(--gb-texto); }
    .gb-emergency { background: #c0392b; color: #fff; border-radius: 12px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
    .gb-emergency i { font-size: 30px; }
    .gb-emergency strong { font-size: 22px; display: block; line-height: 1; }

    /* ---------- Tema claro (turquesa → azul) ---------- */
    body { font-family: var(--default-font); }
    .index-page .header.gb-header, .index-page.scrolled .header.gb-header { box-shadow: 0 1px 0 var(--gb-borde), 0 8px 24px rgba(15, 23, 42, .04); }
    .gb-topbar { background: var(--gb-gris); color: var(--gb-texto); border-bottom: 1px solid var(--gb-borde); }
    .gb-topbar a { color: var(--gb-texto); }
    .gb-topbar a:hover { color: #0891b2; }
    .gb-topbar-info i { color: #0891b2; }
    .gb-acc-btn { background: #fff; border: 1px solid var(--gb-borde); color: var(--gb-tinta); }
    .gb-acc-btn:hover, .gb-acc-btn:focus-visible { background: #0891b2; border-color: #0891b2; color: #fff; }
    .gb-brand-text strong { color: var(--gb-tinta); }
    .gb-brand-text small { font-family: var(--gb-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; }

    .gb-title .gb-kicker { font-family: var(--gb-mono); font-weight: 500; font-size: 12px; letter-spacing: 2px; color: #0891b2; }
    .gb-title h2 { color: var(--gb-tinta); letter-spacing: -.6px; }
    .gb-title h2::after { display: none; }
    .gb-title p { color: #64748b; }

    .gb-badge { background: rgba(236, 254, 255, .95); color: #0e7490; border: 1px solid #a5f3fc; font-family: var(--gb-mono); font-weight: 500; font-size: 11px; letter-spacing: .5px; border-radius: 20px; padding: 3px 10px; }

    #main .btn-primary { background: var(--gb-grad) !important; border: 0; color: #fff; }
    #main .btn-outline-primary { --bs-btn-color: #0e7490; --bs-btn-border-color: #a5f3fc; --bs-btn-hover-bg: #0891b2; --bs-btn-hover-border-color: #0891b2; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0e7490; --bs-btn-active-border-color: #0e7490; border-radius: 10px; font-weight: 600; }

    .gb-mayor { background: linear-gradient(135deg, #0f172a 0%, #0e446c 58%, #0891b2 135%); }
    .gb-mayor-img { background: radial-gradient(circle at 50% 70%, rgba(34, 211, 238, .35), transparent 65%); }
    .gb-mayor-body .gb-role { color: #67e8f9; }
    .gb-mayor-body blockquote { border-left-color: #22d3ee; }
    .gb-mayor-body .gb-badge { background: rgba(255, 255, 255, .1); color: #a5f3fc; border-color: rgba(165, 243, 252, .4); }
    .gb-btn-gold { background: var(--gb-grad); color: #fff; }
    .gb-btn-gold:hover { background: var(--gb-grad); color: #fff; filter: brightness(1.08); }

    .gb-lotaip { border-top: 4px solid #0891b2; }
    .gb-lotaip .gb-years a { background: #fff; }
    .gb-lotaip .gb-years a:hover, .gb-lotaip .gb-years a.gb-current { background: var(--gb-grad); border-color: transparent; color: #fff; }
    .gb-doc i { color: #0891b2; }
    .gb-doc:hover, .gb-service:hover, .gb-news-item:hover, .gb-work:hover { border-color: #a5f3fc; }

    .gb-part { background: linear-gradient(135deg, #0f172a 0%, #0e446c 100%); }
    .gb-part .gb-title .gb-kicker { color: #67e8f9; }
    .gb-part-card > i { color: #22d3ee; }
    .gb-part-card span { color: #67e8f9; }

    .gb-council img { box-shadow: 0 0 0 2px #22d3ee; }
    .gb-contact-item i { background: var(--gb-claro); color: #0891b2; }

    /* Trámites con la misma paleta */
    .gb-tram { background: linear-gradient(180deg, #f0fdff 0%, #ffffff 380px); }
    .gb-tram-head .gb-kicker { font-family: var(--gb-mono); font-weight: 500; font-size: 12px; color: #0891b2; }
    .gb-tram-head h2, .gb-tram h3.gb-tram-sub, .gb-dep h4 { color: var(--gb-tinta); }
    .gb-tram-ilus * { stroke: #99d5e4; }
    .gb-tram-ilus .relleno { fill: #ecfeff; }
    .gb-tram-ilus .suave { stroke: #cdeef5; }
    .gb-tram-search i { color: #0891b2; }
    .gb-tram-filters button.active { border-color: transparent; }
    .gb-tram-filters button::before { background: var(--gb-grad); }
    .gb-tram-filters button:hover { border-color: #0891b2; color: #0e7490; }
    .gb-dep-ico { background: var(--gb-claro); }
    .gb-dep-ico::before { border-color: #a5f3fc; }
    .gb-dep:hover .gb-dep-ico { background: #cffafe; }
    .gb-dep:hover .gb-dep-ico::before { border-color: #0891b2; }
    .gb-dep:hover { border-color: #a5f3fc; }
    .gb-dep .gb-more { color: #0e7490; }
    .gb-ico-svg * { stroke: #0e446c; }
    .gb-ico-svg .a { stroke: #0891b2; }
    .gb-ico-svg .f { fill: #cffafe; }
    .gb-marquee span { background: rgba(14, 68, 108, .5); }

    /* ---------- Estilo celeste, azul y blanco ---------- */
    :root { --gb-celeste: #e0f7fd; --gb-celeste-2: #cffafe; --gb-borde-celeste: #22c3e6; }

    /* Portada: título grande con línea en degradado */
    .gb-pill { font-size: 14px; color: #0e7490; }
    .gb-pill strong { font-weight: 700; }
    .gb-pill .gb-mono { background: none; border: 0; padding: 0; font-size: 13px; color: #0f766e; }
    .gb-hero h1 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -1.6px; color: #0b1120; }
    .gb-hero h1 .gb-grad-text { display: block; }
    .gb-hero .gb-lead { font-size: 18px; color: #64748b; line-height: 1.6; }
    .gb-hero .gb-lead + .gb-lead { margin-top: 10px; color: #1e293b; }
    .gb-subrayado { font-weight: 700; color: #0f172a; background: linear-gradient(90deg, #06b6d4, #2563eb) left bottom / 100% 2px no-repeat; padding-bottom: 1px; }
    .gb-resalte-txt { font-weight: 700; color: #0e7490; }
    .gb-chip-txt { display: inline-block; font-weight: 700; color: #0e7490; background: var(--gb-celeste-2); border: 1px solid #67e8f9; border-radius: 6px; padding: 0 9px; line-height: 1.6; }
    .gb-btn-grad { padding: 15px 26px; border-radius: 12px; font-size: 15px; }
    .gb-btn-soft { padding: 15px 26px; border-radius: 12px; font-size: 15px; box-shadow: 0 4px 12px rgba(15, 23, 42, .05); }
    .gb-checks { font-size: 14px; color: #475569; }
    .gb-checks i { color: #0d9488; }

    /* Tarjeta destacada con cinta sobre el borde */
    .gb-destacada { position: relative; background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%); border: 2px solid var(--gb-borde-celeste); border-radius: 20px; box-shadow: 0 18px 40px rgba(8, 145, 178, .12); }
    .gb-cinta { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--gb-grad); color: #fff; font-family: var(--gb-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(37, 99, 235, .25); }
    .gb-ico-cuadro { width: 52px; height: 52px; border-radius: 14px; background: var(--gb-celeste-2); border: 1px solid #67e8f9; color: #0e7490; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }

    /* Botón azul noche con nota debajo */
    .gb-btn-dark { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #0f172a; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 18px; border: 0; border-radius: 12px; transition: background .2s, transform .2s, box-shadow .2s; }
    .gb-btn-dark:hover, a:hover > .gb-btn-dark { background: #1e293b; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .22); }
    .gb-btn-nota { display: block; text-align: center; margin-top: 10px; font-family: var(--gb-mono); font-size: 12px; color: #64748b; }

    /* LOTAIP como tarjeta destacada */
    .gb-lotaip.gb-destacada { border-top: 2px solid var(--gb-borde-celeste); padding: 34px 28px 26px; }
    .gb-lotaip h3 { color: #0b1120; font-size: 26px; }
    .gb-lotaip .gb-lotaip-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .gb-lotaip p { color: #64748b; }

    /* Alcaldesa en celeste y blanco */
    .gb-mayor.gb-destacada { overflow: visible; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 55%, #ecfeff 100%); }
    .gb-mayor.gb-destacada > .row { border-radius: 18px; overflow: hidden; }
    .gb-mayor-img { background: radial-gradient(circle at 50% 75%, rgba(34, 195, 230, .28), transparent 65%), linear-gradient(180deg, #e0f2fe, #f0f9ff); }
    .gb-mayor-body { padding-top: 54px; }
    .gb-mayor-body h2 { color: #0b1120; letter-spacing: -.8px; }
    .gb-mayor-body .gb-role { color: #0891b2; }
    .gb-mayor-body blockquote { color: #1e293b; border-left: 3px solid #22c3e6; }
    .gb-mayor-body p { color: #64748b; }
    .gb-btn-line { background: #fff; border: 1px solid var(--gb-borde); color: #0f172a; font-weight: 600; }
    .gb-btn-line:hover { border-color: #0891b2; background: #fff; color: #0e7490; }

    /* Participación en celeste */
    .gb-part { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); color: var(--gb-texto); }
    .gb-part .gb-title h2 { color: #0b1120; }
    .gb-part .gb-title .gb-kicker { color: #0891b2; }
    .gb-part .gb-title p { color: #64748b; }
    .gb-part .row { padding-top: 14px; }
    .gb-part-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dbeafe; border-radius: 20px; padding: 28px 26px 22px; color: var(--gb-texto); box-shadow: 0 8px 22px rgba(15, 23, 42, .05); transition: transform .25s, box-shadow .25s, border-color .25s; }
    .gb-part-card:hover { background: #fff; color: var(--gb-texto); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(8, 145, 178, .14); border-color: #67e8f9; }
    .gb-part-card.gb-destacada { border: 2px solid var(--gb-borde-celeste); background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%); }
    .gb-part-card .gb-part-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .gb-part-card h3 { color: #0b1120; font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.4px; }
    .gb-part-card p { color: #64748b; font-size: 14px; margin-bottom: 22px; flex: 1; }
    .gb-part-card span.gb-btn-dark { color: #fff; font-size: 15px; }
    .gb-part-card .gb-btn-nota { margin-top: 10px; }

    /* Atención ciudadana */
    .gb-contact { background: #ffffff; }
    .gb-contact .gb-emergency { margin-top: 12px; padding: 12px 16px; border-radius: 12px; }

    /* ---------- Secciones informativas ---------- */
    /* Estado de atención en vivo */
    .gb-estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--gb-mono); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: #f1f5f9; color: #475569; }
    .gb-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .gb-estado.abierto { background: #dcfce7; color: #15803d; }
    .gb-estado.cerrado { background: #fee2e2; color: #b91c1c; }

    /* Pasos del trámite */
    .gb-pasos-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .gb-pasos-grid::before { content: ""; position: absolute; top: 46px; left: 10%; right: 10%; border-top: 2px dashed #a5f3fc; }
    .gb-paso { position: relative; background: #fff; border: 1px solid var(--gb-borde); border-radius: 20px; padding: 24px 22px 22px; transition: transform .25s, box-shadow .25s, border-color .25s; }
    .gb-paso:hover { transform: translateY(-4px); border-color: #67e8f9; box-shadow: 0 16px 32px rgba(8, 145, 178, .12); }
    .gb-paso-num { width: 44px; height: 44px; border-radius: 50%; background: var(--gb-grad); color: #fff; font-family: var(--gb-mono); font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 0 0 6px #fff, 0 8px 18px rgba(37, 99, 235, .25); }
    .gb-paso .gb-ico-cuadro { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; font-size: 19px; }
    .gb-paso h3 { font-size: 18px; font-weight: 800; color: var(--gb-tinta); margin-bottom: 6px; }
    .gb-paso p { font-size: 14px; color: #64748b; margin-bottom: 12px; }
    .gb-paso a { font-size: 14px; font-weight: 700; color: #0e7490; }
    @media (max-width: 991px) { .gb-pasos-grid { grid-template-columns: 1fr 1fr; } .gb-pasos-grid::before { display: none; } }
    @media (max-width: 575px) { .gb-pasos-grid { grid-template-columns: 1fr; } }

    /* Información útil */
    .gb-util .row { padding-top: 14px; }
    .gb-util-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--gb-borde); border-radius: 20px; padding: 30px 26px 24px; box-shadow: 0 8px 22px rgba(15, 23, 42, .04); }
    .gb-util-card.gb-destacada { border: 2px solid var(--gb-borde-celeste); background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%); }
    .gb-util-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
    .gb-util-card h3 { font-size: 20px; font-weight: 800; color: var(--gb-tinta); margin: 0; letter-spacing: -.3px; }
    .gb-util-card > p { font-size: 14px; color: #64748b; }
    .gb-util-card .gb-btn-dark { margin-top: auto; }
    .gb-barras { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin: 14px 0 6px; padding-bottom: 2px; border-bottom: 1px solid #e2e8f0; }
    .gb-barra { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
    .gb-barra b { font-size: 12px; font-weight: 800; color: var(--gb-tinta); }
    .gb-barra i { display: block; width: 100%; max-width: 32px; height: 0; border-radius: 8px 8px 3px 3px; background: var(--gb-grad); transition: height 1s cubic-bezier(.34, 1.3, .64, 1); }
    .gb-barras.in .gb-barra i { height: var(--h); }
    .gb-barra.recargo b { color: #dc2626; }
    .gb-barra.recargo i { background: linear-gradient(180deg, #f87171, #fca5a5); }
    .gb-barra.hoy i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #22c3e6; }
    .gb-meses { display: flex; gap: 8px; margin-bottom: 12px; }
    .gb-meses span { flex: 1; text-align: center; font-family: var(--gb-mono); font-size: 10.5px; color: #64748b; text-transform: uppercase; }
    .gb-meses span.hoy { color: #0891b2; font-weight: 700; }
    .gb-util-nota { font-size: 12.5px; color: #64748b; background: #f8fafc; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
    .gb-lista { list-style: none; padding: 0; margin: 10px 0 18px; }
    .gb-lista li + li { border-top: 1px dashed #e2e8f0; }
    .gb-lista a, .gb-lista .item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: var(--gb-texto); font-size: 14px; }
    .gb-lista a:hover { color: #0e7490; }
    .gb-lista a:hover .bi-chevron-right { transform: translateX(3px); }
    .gb-lista .bi-chevron-right { margin-left: auto; color: #94a3b8; transition: transform .2s; }
    .gb-lista .li-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--gb-claro); color: #0891b2; display: flex; align-items: center; justify-content: center; }
    .gb-911 { display: flex; align-items: center; gap: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; color: #991b1b; }
    .gb-911 strong { font-size: 20px; color: #b91c1c; line-height: 1; }
    .gb-911 small { display: block; font-family: var(--gb-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; }

    /* Conozca Baba */
    .gb-canton-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--gb-borde); border-radius: 20px; padding: 24px; color: var(--gb-texto); transition: transform .25s, box-shadow .25s, border-color .25s; }
    a.gb-canton-card:hover, .gb-canton-card:hover { transform: translateY(-4px); border-color: #67e8f9; box-shadow: 0 16px 32px rgba(8, 145, 178, .12); color: var(--gb-texto); }
    .gb-canton-card .gb-ico-cuadro { margin-bottom: 16px; }
    .gb-canton-card h3 { font-size: 18px; font-weight: 800; color: var(--gb-tinta); margin-bottom: 6px; }
    .gb-canton-card p { font-size: 14px; color: #64748b; margin-bottom: 14px; flex: 1; }
    .gb-canton-card .gb-link { font-size: 14px; font-weight: 700; color: #0e7490; }
    .gb-canton-card audio { width: 100%; height: 38px; margin-bottom: 10px; }

    /* Normativa por año */
    .gb-normativa { margin-top: 28px; background: #fff; border: 1px solid var(--gb-borde); border-radius: 20px; padding: 22px 24px; }
    .gb-normativa-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .gb-normativa-fila + .gb-normativa-fila { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
    .gb-normativa-fila strong { min-width: 130px; color: var(--gb-tinta); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
    .gb-normativa-fila strong i { color: #0891b2; }
    .gb-normativa-fila a { font-family: var(--gb-mono); font-size: 13px; color: #0e7490; background: var(--gb-claro); border: 1px solid #cffafe; border-radius: 8px; padding: 4px 11px; transition: background .2s, color .2s; }
    .gb-normativa-fila a:hover { background: #0891b2; border-color: #0891b2; color: #fff; }

    /* Preguntas frecuentes */
    @media (min-width: 992px) { .gb-faq-ayuda { position: sticky; top: 140px; } }
    .gb-faq .accordion { --bs-accordion-border-color: var(--gb-borde); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(6, 182, 212, .2); --bs-accordion-active-bg: #f0f9ff; --bs-accordion-active-color: #0e7490; }
    .gb-faq .accordion-item { border: 1px solid var(--gb-borde); border-radius: 14px !important; margin-bottom: 12px; overflow: hidden; }
    .gb-faq .accordion-button { font-weight: 700; color: var(--gb-tinta); font-size: 16px; padding: 18px 20px; gap: 12px; }
    .gb-faq .accordion-button i.q { color: #0891b2; font-size: 18px; }
    .gb-faq .accordion-button:not(.collapsed) { color: #0e7490; box-shadow: none; }
    .gb-faq .accordion-body { color: #475569; font-size: 15px; padding: 4px 20px 20px 50px; }
    .gb-faq .accordion-body a { font-weight: 700; color: #0e7490; }

    /* Canales oficiales */
    .gb-canal { display: flex; align-items: center; gap: 14px; height: 100%; background: #fff; border: 1px solid var(--gb-borde); border-radius: 16px; padding: 16px 18px; color: var(--gb-texto); transition: transform .25s, box-shadow .25s, border-color .25s; }
    .gb-canal:hover { transform: translateY(-3px); border-color: #67e8f9; box-shadow: 0 12px 26px rgba(8, 145, 178, .12); color: var(--gb-texto); }
    .gb-canal strong { display: block; color: var(--gb-tinta); }
    .gb-canal span { font-family: var(--gb-mono); font-size: 12px; color: #0891b2; }
    .gb-canal .bi-arrow-up-right { margin-left: auto; color: #94a3b8; }

    /* ---------- Accesibilidad: alto contraste ---------- */
    body.gb-contrast, body.gb-contrast section, body.gb-contrast .gb-section, body.gb-contrast .gb-service,
    body.gb-contrast .gb-doc, body.gb-contrast .gb-news-item, body.gb-contrast .gb-parish, body.gb-contrast .gb-council,
    body.gb-contrast .gb-lotaip, body.gb-contrast .gb-work, body.gb-contrast .gb-link-text,
    body.gb-contrast .gb-contact, body.gb-contrast .header.gb-header {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    body.gb-contrast h1, body.gb-contrast h2, body.gb-contrast h3, body.gb-contrast h4, body.gb-contrast strong,
    body.gb-contrast p, body.gb-contrast span, body.gb-contrast a, body.gb-contrast .gb-brand-text strong { color: #ffeb3b !important; }
    body.gb-contrast .gb-hero::after { background: rgba(0, 0, 0, .85); }
    body.gb-contrast img { filter: grayscale(1) contrast(1.2); }

    @media (prefers-reduced-motion: reduce) {
      .gb-hero-media, .gb-hero-media .carousel-item img, .gb-media-tag::before, .gb-marquee-track, .gb-tram-ilus *, .gb-ico-svg .luz { animation: none !important; }
      .gb-dep { opacity: 1; transform: none; }
      .gb-barra i { transition: none; height: var(--h); }
      .gb-ico-svg [pathLength] { stroke-dashoffset: 0; }
      .gb-ico-svg .f, .gb-ico-svg .b { opacity: 1; }
    }

    /* Botón "subir" sobre el asistente virtual para que no se encimen */
    #scroll-top { right: 28px; bottom: 96px; }

    /* Foco visible para navegación con teclado */
    a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gb-dorado); outline-offset: 2px; }
    .gb-skip { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--gb-dorado); color: var(--gb-azul); padding: 8px 14px; font-weight: 700; }
    .gb-skip:focus { left: 10px; top: 10px; }

    @media (max-width: 575px) {
      .gb-section { padding: 50px 0; }
      .gb-title h2 { font-size: 26px; }
      .gb-hero-content { padding-top: 50px; padding-bottom: 50px; }
      .gb-mayor-body { padding: 30px 22px; }
      .gb-news-main { min-height: 340px; }
      .gb-news-item img { width: 90px; height: 72px; }
      .gb-lotaip .gb-years { grid-template-columns: repeat(3, 1fr); }
      .gb-search button span { display: none; }
    }