/* ============================================================
   ODS Portal — Sistema visual PR #6
   Gobierno de Honduras · Agenda 2030
   Construido sobre los tokens GOB 2026-2030 y los colores
   oficiales de los 17 Objetivos de Desarrollo Sostenible.
   ============================================================ */

/* ─── Tipografía oficial DIGER (Manual de Marca, pag. 08) ───
   Poppins ExtraBold (800) para titulares y Poppins Medium (500)
   para cuerpo de texto. Se declaran los pesos intermedios para
   que el portal aproveche los matices cuando un componente los
   solicite (KPI con 700, etiquetas con 600, etc.). El alcance
   queda acotado al módulo ODS para no impactar al resto del
   sistema, que sigue usando su propia carga tipográfica. */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ─── Cascada tipográfica forzada para el módulo ODS ───
   `gobierno-2026.css` (legacy del portal de ministros) aplica
   `font-family: Georgia ... !important` directamente a body, p, span,
   a, li, td, th, input, button, h1-h6 y otros elementos comunes. Si
   sólo declaramos Poppins en el wrapper, los hijos siguen heredando
   la regla legacy porque ésta apunta directamente al elemento (p,
   span, etc.) con !important y nuestra clase contenedora no compite.
   Por eso forzamos aquí, con selector más específico (`.ods-portal`
   o `.ods-page` + elemento), la fuente oficial del manual DIGER. El
   `:not()` excluye iconos de Bootstrap Icons y SVG, que conservan su
   propia font-family. Limitado al árbol ODS para no impactar al
   resto del sistema. */
.ods-topbar,
.ods-portal,
.ods-portal-detalle,
.ods-page,
.ai-pagina,
.fd-pagina,
.mapa-pagina,
.ods-portal-footer,
.ods-topbar :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.ods-portal :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.ods-portal-detalle :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.ods-page :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.ai-pagina :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.fd-pagina :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.mapa-pagina :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *),
.ods-portal-footer :not(i):not(.bi):not([class*=" bi-"]):not([class^="bi-"]):not(svg):not(svg *) {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Bootstrap Icons deben mantener su propia fuente para que los
   glifos no se rompan. Bootstrap los carga con `font-family:
   bootstrap-icons !important`; sumamos una capa explícita por si
   alguna otra regla globaliza más adelante. */
.ods-topbar i.bi, .ods-topbar [class*="bi-"],
.ods-portal i.bi, .ods-portal [class*="bi-"],
.ods-portal-detalle i.bi, .ods-portal-detalle [class*="bi-"],
.ods-page i.bi, .ods-page [class*="bi-"],
.ai-pagina i.bi, .ai-pagina [class*="bi-"],
.fd-pagina i.bi, .fd-pagina [class*="bi-"],
.mapa-pagina i.bi, .mapa-pagina [class*="bi-"],
.ods-portal-footer i.bi, .ods-portal-footer [class*="bi-"] {
    font-family: 'bootstrap-icons' !important;
}

/* Numéricas grandes (KPIs, scores, contadores de hero) en Poppins
   ExtraBold por defecto para que los números resalten con el peso
   máximo del manual. */
.ods-portal .hstat-num,
.ods-portal .ods-mosaic-num,
.ods-tablero-score-num small,
.ods-portal h1, .ods-portal h2, .ods-portal h3,
.ods-page h1, .ods-page h2, .ods-page h3,
.ai-pagina h1, .ai-pagina h2, .ai-pagina h3,
.fd-pagina h1, .fd-pagina h2, .fd-pagina h3,
.mapa-pagina h1, .mapa-pagina h2, .mapa-pagina h3,
.ods-portal-detalle h1, .ods-portal-detalle h2, .ods-portal-detalle h3 {
    font-weight: 800 !important;
}

/* Texto base del portal en peso 500 (Poppins Medium) según manual */
.ods-portal,
.ods-page,
.ai-pagina,
.fd-pagina,
.mapa-pagina,
.ods-portal-detalle {
    font-weight: 500 !important;
}

:root {
    /* Paleta oficial DIGER (Manual de Marca, pag. 09) */
    --gob-azul:        #02395e;  /* DIGER azul marino · principal */
    --gob-azul-d:      #022a47;  /* derivado oscuro · gradientes profundos */
    --gob-azul-cl:     #1a65a3;  /* DIGER azul medio · corporativo */
    --gob-azul-deep:   #011e34;  /* extra deep · fondos heroicos */
    --gob-celeste:     #7acbdd;  /* DIGER azul claro · innovación/cercanía */
    --gob-dorado:      #ad8411;  /* acento institucional */
    --gob-dorado-c:    #d9ad2e;
    --gob-dorado-cl:   #f5d77d;
    --gob-texto:       #02395e;
    --gob-texto-1: #1f2937;
    --gob-texto-2: #475569;
    --gob-texto-3: #94a3b8;
    --gob-bg: #f8fafc;
    --gob-bg-2: #f3f5f9;
    --gob-bg-3: #eef2f6;
    --gob-borde: #e5e7eb;
    --gob-borde-soft: #f1f5f9;

    /* Escala tipográfica (modular ~1.25) */
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14.5px;
    --fs-md: 15.5px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 38px;
    --fs-5xl: 48px;
    --fs-hero: clamp(36px, 5vw, 60px);

    /* Espaciado (escala 4) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* Radios consistentes */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Sistema de elevación */
    --shadow-xs: 0 1px 2px rgba(11,37,72,.04);
    --shadow-sm: 0 1px 2px rgba(11,37,72,.05), 0 1px 3px rgba(11,37,72,.04);
    --shadow-md: 0 6px 14px rgba(11,37,72,.07), 0 2px 6px rgba(11,37,72,.05);
    --shadow-lg: 0 18px 36px rgba(11,37,72,.10), 0 4px 10px rgba(11,37,72,.04);
    --shadow-xl: 0 28px 56px rgba(11,37,72,.14), 0 8px 18px rgba(11,37,72,.06);
    --shadow-color: 0 20px 40px rgba(0,61,123,.16);
    --shadow-gold: 0 14px 30px rgba(217,173,46,.30);

    /* Easing premium */
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);

    /* Colores oficiales ODS — ONU */
    --ods-1:  #E5243B;
    --ods-2:  #DDA63A;
    --ods-3:  #4C9F38;
    --ods-4:  #C5192D;
    --ods-5:  #FF3A21;
    --ods-6:  #26BDE2;
    --ods-7:  #FCC30B;
    --ods-8:  #A21942;
    --ods-9:  #FD6925;
    --ods-10: #DD1367;
    --ods-11: #FD9D24;
    --ods-12: #BF8B2E;
    --ods-13: #3F7E44;
    --ods-14: #0A97D9;
    --ods-15: #56C02B;
    --ods-16: #00689D;
    --ods-17: #19486A;

    /* Dimensiones 5P */
    --dim-personas:    #6766CB;
    --dim-prosperidad: #F48D02;
    --dim-planeta:     #08C537;
    --dim-paz:         #11A0E7;
    --dim-alianzas:    #9219C4;

    /* Sombras */
    --ods-sombra-suave: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --ods-sombra-media: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --ods-sombra-fuerte: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    --ods-sombra-color: 0 20px 40px rgba(0,61,123,0.12);
}

/* ============================================================
   Reset suave (sólo dentro del módulo)
   ============================================================ */

/* layoutStyle.css legacy fuerza color:black en a:not(.btn) con alta
   especificidad. Para que los wrappers del módulo ODS controlen su
   propio color de texto, restablecemos a "inherit" dentro de cada
   wrapper. Los botones .ods-btn--gold / .ods-btn--ghost tienen su
   propio color !important que sigue pisando esta regla. */
/* Reset puntual para neutralizar el legacy layoutStyle.css que pinta de
   negro todo a:not(.btn). Lo aplicamos solo al breadcrumb del hero
   (donde el color blanco translúcido se pisaba) y a links sueltos
   dentro de .ods-portal (wrapper antiguo) para no romper otros estilos
   específicos como chips de filtros, tags y enlaces de tablas que ya
   definen su propio color. */
.ods-breadcrumb,
.ods-breadcrumb a {
    color: inherit !important;
}

.ods-portal a:not(.btn),
.tb-pagina a:not(.btn),
.bu-pagina a:not(.btn),
.feed-pagina a:not(.btn),
.ai-pagina a:not(.btn),
.mapa-pagina a:not(.btn),
.fd-pagina a:not(.btn),
.inv-hero a:not(.btn),
.inv-sec a:not(.btn) {
    color: inherit !important;
}

/* Igual para el panel admin (wrapper .oa) */
.oa a:not(.btn) {
    color: inherit !important;
}

.ods-portal {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500;
    color: var(--gob-texto);
    background: var(--gob-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ods-portal *,
.ods-portal *::before,
.ods-portal *::after {
    box-sizing: border-box;
}

.ods-portal h1, .ods-portal h2, .ods-portal h3 {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800;
    color: var(--gob-azul);
    letter-spacing: -0.01em;
    margin: 0;
}

/* ============================================================
   HERO inmersivo del portal
   ============================================================ */

.ods-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top right, rgba(217,173,46,0.10), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(38,189,226,0.10), transparent 60%),
        linear-gradient(135deg, #011e34 0%, var(--gob-azul-d) 35%, var(--gob-azul) 100%);
    color: #fff;
    padding: 104px 32px 108px;
    isolation: isolate;
}

/* Trama sutil de líneas diagonales — más sobria que los círculos */
.ods-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(115deg, transparent 0%, transparent 49%, rgba(255,255,255,0.025) 49%, rgba(255,255,255,0.025) 51%, transparent 51%, transparent 100%);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: .7;
}

/* Halo dorado vertical en el borde derecho del hero */
.ods-hero::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 280px;
    background: radial-gradient(circle at 100% 50%, rgba(217,173,46,0.18), transparent 60%);
    pointer-events: none;
}

.ods-hero-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
}

.ods-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ods-hero-eyebrow span.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gob-dorado-c);
    box-shadow: 0 0 12px var(--gob-dorado-c);
}

.ods-hero h1 {
    color: #fff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    margin-top: 20px;
    font-weight: 700;
}

.ods-hero h1 .gold {
    background: linear-gradient(120deg, var(--gob-dorado-c) 0%, #f7dc88 50%, var(--gob-dorado-c) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(217,173,46,0.25);
}

.ods-hero p.lead {
    margin-top: 22px;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.65;
    max-width: 58ch;
    color: rgba(255,255,255,0.86);
    font-weight: 400;
}

.ods-hero-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ods-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Las reglas usan !important solo en color porque layoutStyle.css legacy
   pinta de negro a todos los <a> sin clase .btn. No afecta a otros módulos
   porque .ods-btn es exclusivo del portal ODS. */
.ods-btn.ods-btn--gold,
.ods-btn.ods-btn--gold:link,
.ods-btn.ods-btn--gold:visited,
.ods-btn.ods-btn--gold:hover,
.ods-btn.ods-btn--gold:focus,
.ods-btn.ods-btn--gold:active {
    background: var(--gob-dorado-c);
    color: var(--gob-azul-d) !important;
    box-shadow: 0 10px 24px rgba(217,173,46,0.35);
}

.ods-btn.ods-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(217,173,46,0.5);
    background: #f5d77d;
}

.ods-btn.ods-btn--ghost,
.ods-btn.ods-btn--ghost:link,
.ods-btn.ods-btn--ghost:visited,
.ods-btn.ods-btn--ghost:hover,
.ods-btn.ods-btn--ghost:focus,
.ods-btn.ods-btn--ghost:active {
    border-color: rgba(255,255,255,0.4);
    color: #fff !important;
    background: transparent;
}

.ods-btn.ods-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Heredar color del padre en iconos inline / spans internos */
.ods-btn .bi,
.ods-btn > span,
.ods-btn svg { color: inherit; fill: currentColor; }

/* Wheel oficial ODS (mosaico de los 17 iconos rotando suavemente) */

.ods-hero-wheel {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
}

.ods-hero-wheel-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    transform: rotate(2deg);
}

.ods-hero-wheel-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
    transition: transform .35s ease, box-shadow .35s ease;
}

.ods-hero-wheel-grid img:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.4);
    z-index: 2;
    position: relative;
}

/* ============================================================
   Datos de cabecera (mini KPIs sobre el hero)
   ============================================================ */

.ods-kpis {
    margin: -64px auto 0;
    max-width: 1240px;
    padding: 0 32px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.ods-kpi {
    background: #fff;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 20px 40px rgba(11,37,72,0.12), 0 2px 6px rgba(11,37,72,0.05);
    border: 1px solid rgba(0,61,123,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.ods-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 36px; height: 3px;
    background: linear-gradient(90deg, var(--gob-dorado-c), transparent);
    border-radius: 0 0 4px 0;
}
.ods-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 56px rgba(11,37,72,0.14), 0 4px 10px rgba(11,37,72,0.06);
}

.ods-kpi small {
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10.5px;
    font-weight: 600;
}

.ods-kpi .val {
    margin-top: 8px;
    font-size: 32px;
    font-weight: 700;
    color: #02395e;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

/* ============================================================
   Sección de cards de los 17 ODS
   ============================================================ */

.ods-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 72px 32px;
}

.ods-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.ods-section-title h2 {
    font-size: clamp(22px, 2.4vw, 32px);
}

.ods-section-title p {
    color: var(--gob-texto-2);
    font-size: 14px;
    margin: 0;
    max-width: 60ch;
}

.ods-grid-17 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.ods-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11,37,72,0.04), 0 2px 6px rgba(11,37,72,0.04);
    border: 1px solid rgba(11,37,72,0.06);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .22s ease;
    opacity: 0;
    transform: translateY(14px);
    animation: odsFadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
}

.ods-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(11,37,72,0.12), 0 6px 16px rgba(11,37,72,0.06);
    border-color: rgba(0,61,123,0.18);
}

.ods-card-icon {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.ods-card-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18));
    opacity: 0;
    transition: opacity .25s;
}

.ods-card:hover .ods-card-icon::after {
    opacity: 1;
}

.ods-card-body {
    padding: 16px 16px 18px;
    border-top: 4px solid currentColor;
}

.ods-card-num {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: var(--gob-texto-2);
    text-transform: uppercase;
}

.ods-card-name {
    margin-top: 4px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.28;
    color: #02395e;
    letter-spacing: -.005em;
}

.ods-card-meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--gob-texto-2);
    font-weight: 500;
}

.ods-card-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--gob-texto);
}

.ods-card-score .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 3px rgba(0,0,0,0.06);
}

/* ============================================================
   Sección 5P (dimensiones)
   ============================================================ */

.ods-5p {
    background: linear-gradient(180deg, #fff, var(--gob-bg));
    border-top: 1px solid var(--gob-borde);
    border-bottom: 1px solid var(--gob-borde);
}

.ods-5p .ods-5p-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .ods-5p .ods-5p-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ods-5p-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: var(--ods-sombra-suave);
    border: 1px solid var(--gob-borde);
    position: relative;
    overflow: hidden;
}

.ods-5p-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--c, var(--gob-azul));
}

.ods-5p-card h3 {
    font-size: 18px;
    margin: 4px 0 8px;
    color: var(--c, var(--gob-azul));
}

.ods-5p-card p {
    margin: 0;
    font-size: 12.5px;
    color: var(--gob-texto-2);
    line-height: 1.5;
}

.ods-5p-numbers {
    margin-top: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Botones numéricos de las 5P — pintan los 17 ODS con su color oficial.
   Usamos !important para neutralizar el reset .ods-portal a:not(.btn)
   { color: inherit } que de otro modo dejaría los números 16 y 17 sin
   contraste sobre los fondos azules (#00689D y #19486A). */
.ods-portal a.ods-5p-num,
.ods-5p-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10), inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
    text-decoration: none;
    transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s;
}

.ods-portal a.ods-5p-num:hover,
.ods-5p-num:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
    color: #fff !important;
}

/* ============================================================
   Vista de detalle de ODS
   ============================================================ */

.ods-detalle-hero {
    color: #fff;
    padding: 72px 32px 48px;
    position: relative;
    overflow: hidden;
    background: var(--c, var(--gob-azul));
}

.ods-detalle-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 460px;
    height: 460px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.ods-detalle-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 32px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ods-detalle-icon {
    width: 220px;
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 12px;
    backdrop-filter: blur(10px);
}

.ods-detalle-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
}

.ods-detalle-num {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.85;
}

.ods-detalle-titulo {
    color: #fff;
    font-size: clamp(28px, 3.4vw, 44px);
    margin-top: 6px;
    line-height: 1.08;
}

.ods-detalle-desc {
    margin-top: 14px;
    font-size: 16px;
    max-width: 60ch;
    color: rgba(255,255,255,0.92);
}

.ods-detalle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ods-detalle-score {
    text-align: center;
    background: rgba(255,255,255,0.95);
    color: var(--gob-azul);
    border-radius: 18px;
    padding: 22px 28px;
    min-width: 180px;
    box-shadow: 0 18px 38px rgba(0,0,0,0.25);
}

.ods-detalle-score .big {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--c, var(--gob-azul));
}

.ods-detalle-score small {
    display: block;
    margin-top: 4px;
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}

.ods-detalle-score .pendiente {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 18px;
    color: var(--gob-texto-2);
    font-style: italic;
}

/* ============================================================
   Tabs / secciones del detalle
   ============================================================ */

.ods-tabs {
    display: flex;
    gap: 4px;
    margin: 32px auto 0;
    max-width: 1240px;
    padding: 0 32px;
    border-bottom: 1px solid var(--gob-borde);
}

.ods-tab {
    padding: 12px 18px;
    border: 0;
    background: transparent;
    color: var(--gob-texto-2);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-size: 14px;
}

.ods-tab.is-active {
    color: var(--c, var(--gob-azul));
    border-bottom-color: var(--c, var(--gob-azul));
}

.ods-tab:hover {
    color: var(--c, var(--gob-azul));
}

.ods-tab-panel { display: none; }
.ods-tab-panel.is-active { display: block; animation: odsFadeIn .25s ease-out; }

/* Listado de metas */

.ods-metas {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.ods-meta-item {
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-left: 5px solid var(--c, var(--gob-azul));
    border-radius: 10px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: var(--ods-sombra-suave);
}

.ods-meta-codigo {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    color: var(--c, var(--gob-azul));
    font-size: 20px;
}

.ods-meta-desc {
    color: var(--gob-texto);
    font-size: 14px;
    line-height: 1.5;
}

.ods-meta-tag {
    background: var(--gob-azul);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

/* Cards de indicador (modo público) */

.ods-ind-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ods-ind-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--ods-sombra-suave);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}

.ods-ind-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--c, var(--gob-azul));
    border-radius: 4px 0 0 4px;
}

.ods-ind-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ods-sombra-media);
}

.ods-ind-meta {
    font-size: 11px;
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.ods-ind-titulo {
    margin-top: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gob-texto);
    line-height: 1.35;
}

.ods-ind-resp {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gob-texto-2);
}

.ods-ind-valor {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ods-ind-valor .num {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    font-size: 30px;
    color: var(--gob-azul);
    line-height: 1;
}

.ods-ind-valor .anio {
    color: var(--gob-texto-2);
    font-size: 12px;
}

.ods-ind-no-data {
    margin-top: 14px;
    font-size: 12px;
    color: var(--gob-texto-2);
    font-style: italic;
}

/* ============================================================
   Tablero comparativo estilo SDG Index
   ============================================================ */

.ods-tablero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.ods-tablero-card {
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--ods-sombra-suave);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s, box-shadow .2s;
}

.ods-tablero-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ods-sombra-fuerte);
}

.ods-tablero-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ods-tablero-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.ods-tablero-card-nombre {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
}

.ods-tablero-card-num {
    font-size: 11px;
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.ods-tablero-gauge {
    position: relative;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ods-tablero-gauge svg {
    width: 100%;
    height: 100%;
}

.ods-tablero-score-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c, var(--gob-azul));
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.ods-tablero-score-num small {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif !important;
    font-size: 10px;
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-top: 4px;
}

.ods-tablero-tendencia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--gob-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ods-tablero-tendencia-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gob-bg);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

/* ============================================================
   Animaciones
   ============================================================ */

@keyframes odsFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes odsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ods-card:nth-child(1)  { animation-delay: .02s; }
.ods-card:nth-child(2)  { animation-delay: .05s; }
.ods-card:nth-child(3)  { animation-delay: .08s; }
.ods-card:nth-child(4)  { animation-delay: .11s; }
.ods-card:nth-child(5)  { animation-delay: .14s; }
.ods-card:nth-child(6)  { animation-delay: .17s; }
.ods-card:nth-child(7)  { animation-delay: .20s; }
.ods-card:nth-child(8)  { animation-delay: .23s; }
.ods-card:nth-child(9)  { animation-delay: .26s; }
.ods-card:nth-child(10) { animation-delay: .29s; }
.ods-card:nth-child(11) { animation-delay: .32s; }
.ods-card:nth-child(12) { animation-delay: .35s; }
.ods-card:nth-child(13) { animation-delay: .38s; }
.ods-card:nth-child(14) { animation-delay: .41s; }
.ods-card:nth-child(15) { animation-delay: .44s; }
.ods-card:nth-child(16) { animation-delay: .47s; }
.ods-card:nth-child(17) { animation-delay: .50s; }

/* ============================================================
   Footer del portal
   ============================================================ */

.ods-portal-footer {
    margin-top: 60px;
    background: var(--gob-azul-d);
    color: rgba(255,255,255,0.85);
    padding: 32px 32px 28px;
    font-size: 13px;
    position: relative;
}

/* Banda dorada superior — acento institucional */
.ods-portal-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gob-dorado-c) 0%, var(--gob-dorado-cl) 50%, var(--gob-dorado-c) 100%);
    opacity: .85;
}

.ods-portal-footer a {
    color: #fff;
    text-decoration: none;
    transition: opacity .15s, transform .15s var(--ease-out);
}

.ods-portal-footer a:hover {
    opacity: .82;
}

.ods-portal-footer .inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}

/* Bloque marca: logo DIGER + texto institucional */
.ods-footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ods-footer-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
    /* El logo oficial DIGER ya viene en su versión negativa (blanca),
       conservamos el render limpio. Sombra sutil para que respire sobre
       el fondo azul marino. */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.ods-footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ods-footer-brand-text strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
}

.ods-footer-brand-text span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Navegación de enlaces */
.ods-footer-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ods-footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .18s, border-color .18s, transform .15s var(--ease-out);
}

.ods-footer-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

/* Botón "Volver al portal" (modo detalle) */
.ods-footer-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--gob-dorado-c);
    color: var(--gob-azul-d) !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 6px 14px rgba(217, 173, 46, .25);
    transition: transform .15s var(--ease-out), box-shadow .15s;
}

.ods-footer-volver:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(217, 173, 46, .35);
}

@media (max-width: 720px) {
    .ods-portal-footer .inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .ods-footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ods-footer-logo { height: 48px; }
    .ods-footer-nav { justify-content: flex-start; }
}

@media (max-width: 720px) {
    .ods-hero-inner { grid-template-columns: 1fr; }
    .ods-hero-wheel { display: none; }
    .ods-detalle-hero-inner { grid-template-columns: 1fr; gap: 18px; }
    .ods-detalle-icon { width: 140px; }
    .ods-meta-item { grid-template-columns: 70px 1fr; }
    .ods-meta-item > :last-child { grid-column: 1 / -1; }
}

/* ============================================================
   Panel admin — variantes refinadas para gestores
   ============================================================ */

.ods-admin {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--gob-texto);
    background: var(--gob-bg);
}

.ods-admin-hero {
    background: linear-gradient(135deg, var(--gob-azul-d) 0%, var(--gob-azul) 70%);
    color: #fff;
    padding: 36px 32px;
    border-radius: 0 0 24px 24px;
    position: relative;
    overflow: hidden;
}

.ods-admin-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 110% 50%, rgba(217,173,46,0.2), transparent 50%);
    pointer-events: none;
}

.ods-admin-hero h1 {
    color: #fff;
    font-size: 26px;
    margin: 0;
}

.ods-admin-hero p {
    margin: 6px 0 0;
    opacity: 0.85;
}

.ods-admin-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ods-admin-card {
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--ods-sombra-suave);
}

/* ============================================================
   Sistema de iconos premium (SVG inline · stroke 1.5 · 24x24)
   ============================================================ */

.ods-i {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
    color: inherit;
    line-height: 1;
}

.ods-ico-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(217,173,46,.18), rgba(217,173,46,.08));
    color: var(--gob-dorado);
    border: 1px solid rgba(217,173,46,.32);
    flex-shrink: 0;
}

.ods-ico-pill--blue {
    background: linear-gradient(135deg, rgba(0,61,123,.10), rgba(0,61,123,.04));
    color: var(--gob-azul);
    border-color: rgba(0,61,123,.14);
}

.ods-ico-pill--green {
    background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.05));
    color: #047857;
    border-color: rgba(16,185,129,.30);
}

.ods-ico-pill--lg {
    width: 56px; height: 56px;
    border-radius: 16px;
}

.ods-ico-pill--sm {
    width: 36px; height: 36px;
    border-radius: 10px;
}

/* ============================================================
   Tipografía premium del portal
   ============================================================ */

.ods-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gob-texto-2);
    padding: 6px 14px;
    background: rgba(0,61,123,.06);
    border-radius: 999px;
    border: 1px solid rgba(0,61,123,.10);
}

.ods-eyebrow--gold {
    color: #6b4d00;
    background: rgba(217,173,46,.12);
    border-color: rgba(217,173,46,.25);
}

.ods-divider-gold {
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gob-dorado-c), var(--gob-dorado-cl));
    margin: 12px 0;
}

.ods-headline-1 {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    color: var(--gob-azul);
    letter-spacing: -.018em;
    font-weight: 700;
    margin: 0;
}

.ods-headline-2 {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.18;
    color: var(--gob-azul);
    letter-spacing: -.012em;
    font-weight: 700;
    margin: 0;
}

.ods-lead {
    color: var(--gob-texto-2);
    font-size: var(--fs-md);
    line-height: 1.65;
    max-width: 60ch;
    margin: 10px 0 0;
}

/* ============================================================
   Componentes premium adicionales
   ============================================================ */

/* Stat tile: icono leading + número + label */
.ods-stat-tile {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.ods-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ods-stat-tile .stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ods-stat-tile .stat-num {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    color: var(--gob-texto);
    line-height: 1.05;
    letter-spacing: -.01em;
}
.ods-stat-tile .stat-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gob-texto-2);
    font-weight: 600;
}

/* Callout: tarjeta de aviso con icono + texto */
.ods-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-left: 4px solid var(--gob-azul);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}

.ods-callout--gold { border-left-color: var(--gob-dorado-c); background: linear-gradient(180deg, #fffbe6 0%, #fff 100%); }
.ods-callout--green { border-left-color: #10b981; background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%); }
.ods-callout--info { border-left-color: var(--gob-azul-cl); background: linear-gradient(180deg, #eff6ff 0%, #fff 100%); }

.ods-callout-body { flex: 1; min-width: 0; }
.ods-callout-title {
    font-weight: 700;
    color: var(--gob-texto);
    margin: 0 0 4px;
    font-size: 14.5px;
}
.ods-callout-text {
    margin: 0;
    color: var(--gob-texto-2);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Link minimalista con flecha al final */
.ods-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gob-azul);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: gap .18s var(--ease-out);
}
.ods-link-arrow .ods-i { transition: transform .18s var(--ease-out); }
.ods-link-arrow:hover { gap: 10px; }
.ods-link-arrow:hover .ods-i { transform: translateX(2px); }

/* Tag soft */
.ods-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gob-bg-2);
    color: var(--gob-texto-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

.ods-tag--blue { background: rgba(0,61,123,.10); color: var(--gob-azul); }
.ods-tag--gold { background: rgba(217,173,46,.18); color: #6b4d00; }
.ods-tag--green { background: rgba(16,185,129,.14); color: #047857; }
.ods-tag--red { background: rgba(239,68,68,.12); color: #b91c1c; }

/* Breadcrumb del portal */
.ods-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 14px;
}
.ods-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.ods-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.ods-breadcrumb .sep { opacity: 0.5; }

/* Sección alterna (fondo distinto) */
.ods-section--alt {
    background: linear-gradient(180deg, var(--gob-bg-2) 0%, #fff 100%);
    border-top: 1px solid var(--gob-borde);
}

/* Card minimalista premium con icono leading */
.ods-feature-card {
    background: #fff;
    border: 1px solid var(--gob-borde);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.ods-feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gob-dorado-c), transparent 50%);
    opacity: 0;
    transition: opacity .25s;
}
.ods-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0,61,123,.18);
}
.ods-feature-card:hover::before { opacity: 1; }
.ods-feature-card .ods-feature-title {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    color: var(--gob-azul);
    font-size: 18px;
    line-height: 1.25;
    margin: 4px 0 0;
}
.ods-feature-card .ods-feature-text {
    color: var(--gob-texto-2);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.ods-feature-card .ods-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gob-azul);
    font-weight: 600;
    font-size: 13px;
    margin-top: 4px;
    transition: gap .18s var(--ease-out);
}
.ods-feature-card:hover .ods-feature-cta { gap: 10px; }

/* Page wrapper de subvistas (Tablero/Mapa/Buscar/etc.) */
.ods-page {
    background: var(--gob-bg);
    min-height: 100vh;
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--gob-texto);
}

.ods-page * { box-sizing: border-box; }

.ods-page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top right, rgba(217,173,46,.10), transparent 55%),
        linear-gradient(135deg, var(--gob-azul-deep) 0%, var(--gob-azul-d) 50%, var(--gob-azul) 100%);
    color: #fff;
    padding: 64px 32px 84px;
}

.ods-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg, transparent 0%, transparent 49%, rgba(255,255,255,.025) 49%, rgba(255,255,255,.025) 51%, transparent 51%, transparent 100%);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: .7;
}

.ods-page-hero-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
}

.ods-page-hero h1 {
    color: #fff;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    margin: 12px 0 0;
    letter-spacing: -.012em;
}

.ods-page-hero p {
    color: rgba(255,255,255,0.86);
    max-width: 64ch;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.ods-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    backdrop-filter: blur(8px);
}
.ods-page-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gob-dorado-c);
    box-shadow: 0 0 12px var(--gob-dorado-c);
}

/* Container y secciones internas de subvistas */
.ods-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.ods-section-block {
    margin: 48px 0;
}

.ods-section-block + .ods-section-block { margin-top: 0; }

/* Empty state premium */
.ods-empty-state {
    background: #fff;
    border: 1px dashed var(--gob-borde);
    border-radius: var(--r-lg);
    padding: 56px 32px;
    text-align: center;
    color: var(--gob-texto-2);
}
.ods-empty-state .ods-i { color: var(--gob-texto-3); margin-bottom: 8px; }
.ods-empty-state h3 {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--gob-azul);
    font-size: 20px;
    margin: 12px 0 6px;
}
.ods-empty-state p { margin: 0; font-size: 14px; line-height: 1.55; }

/* ============================================================
   HERO ODS — versión premium interactiva
   Reemplaza al wheel estático con un mosaico clicable, capas de
   orbes flotantes, spotlight que sigue al cursor, contadores
   animados y ticker inferior.
   ============================================================ */

/* Capas decorativas */
.ods-hero-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.ods-hero-orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
    will-change: transform;
}
.ods-hero-orbs .orb-a {
    width: 420px; height: 420px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, rgba(26, 101, 163, .55), transparent 70%);
    animation: orbFlow1 18s ease-in-out infinite alternate;
}
.ods-hero-orbs .orb-b {
    width: 360px; height: 360px;
    bottom: -100px; right: -80px;
    background: radial-gradient(circle, rgba(217, 173, 46, .42), transparent 70%);
    animation: orbFlow2 22s ease-in-out infinite alternate;
}
.ods-hero-orbs .orb-c {
    width: 280px; height: 280px;
    top: 40%; left: 40%;
    background: radial-gradient(circle, rgba(122, 203, 221, .35), transparent 70%);
    animation: orbFlow3 26s ease-in-out infinite alternate;
}
@keyframes orbFlow1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 90px) scale(1.12); }
}
@keyframes orbFlow2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-80px, -60px) scale(1.15); }
}
@keyframes orbFlow3 {
    0%   { transform: translate(0, 0) scale(.92); }
    100% { transform: translate(-40px, 70px) scale(1.08); }
}

/* Spotlight de cursor */
.ods-hero-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s var(--ease-out);
    background: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 50%),
        rgba(217, 173, 46, .14),
        rgba(122, 203, 221, .06) 40%,
        transparent 70%);
    mix-blend-mode: screen;
}

/* Hero inner queda por encima de las capas decorativas */
.ods-hero-inner { position: relative; z-index: 2; }

/* Animaciones de entrada — controladas por [data-anim] */
[data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(18px);
    animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: var(--d, 0ms);
}
[data-anim="reveal"] {
    opacity: 0;
    transform: translateY(28px);
    animation: heroReveal .85s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroReveal {
    0%   { opacity: 0; transform: translateY(28px) scale(.985); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bloque del título: cada línea en su propia row */
.ods-hero-h1 {
    color: #fff;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    font-weight: 700;
    margin: 20px 0 0;
}
.ods-hero-h1 .line {
    display: block;
}
.ods-hero-h1 .line.gold {
    background: linear-gradient(120deg, var(--gob-dorado-c) 0%, #f7dc88 50%, var(--gob-dorado-c) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(217, 173, 46, .25);
    animation: heroReveal .85s cubic-bezier(.16,1,.3,1) forwards, goldShine 7s linear infinite;
    animation-delay: var(--d, 0ms), 1.5s;
}
@keyframes goldShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* KPIs animados */
.ods-hero-stats {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 540px;
}
.hstat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-left: 2px solid rgba(217, 173, 46, .5);
    padding-left: 14px;
}
.hstat-num {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--gob-dorado-c);
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.hstat-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
}

/* Mosaico interactivo de 17 ODS */
.ods-hero-mosaic {
    position: relative;
    perspective: 1200px;
}
.ods-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    transform:
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        rotate(1.5deg);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ods-mosaic-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, .35),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s,
        z-index 0s;
    opacity: 0;
    animation: tileIn .55s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(700ms + var(--i, 0) * 50ms);
    will-change: transform;
}
@keyframes tileIn {
    from { opacity: 0; transform: scale(.7) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ods-mosaic-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
/* Número del ODS en esquina, visible solo al hover */
.ods-mosaic-num {
    position: absolute;
    top: 5px; left: 6px;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    padding: 1px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s var(--ease-out);
    pointer-events: none;
}
.ods-mosaic-tile:hover {
    transform: scale(1.16) translateZ(20px);
    z-index: 4;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, .35),
        0 0 0 3px var(--c, var(--gob-dorado-c)),
        0 0 28px 6px color-mix(in srgb, var(--c, #d9ad2e) 55%, transparent);
}
.ods-mosaic-tile:hover img { transform: scale(1.08); }
.ods-mosaic-tile:hover .ods-mosaic-num {
    opacity: 1;
    transform: translateY(0);
}
.ods-mosaic-tile:focus-visible {
    outline: 3px solid var(--gob-dorado-c);
    outline-offset: 3px;
}

/* Tile final (logo "ODS") */
.ods-mosaic-tile--logo {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation-delay: calc(700ms + 18 * 50ms);
}
.ods-mosaic-tile--logo span {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 22px);
    color: var(--gob-azul);
    letter-spacing: .04em;
}

/* Ticker inferior */
.ods-hero-ticker {
    position: relative;
    z-index: 2;
    margin-top: 64px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .14);
    overflow: hidden;
    padding: 12px 0;
    backdrop-filter: blur(6px);
}
.ods-hero-ticker .ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .75);
    font-size: 12.5px;
    letter-spacing: .04em;
    font-weight: 500;
    animation: tickerScroll 38s linear infinite;
    padding-left: 100%;
}
.ods-hero-ticker .ticker-track b {
    color: var(--gob-dorado-c);
    font-weight: 700;
    margin-right: 4px;
}
.ods-hero-ticker .ticker-track .sep {
    color: rgba(217, 173, 46, .35);
    font-size: 8px;
}
@keyframes tickerScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}

/* Hero responsive — mantener legibilidad en móvil */
@media (max-width: 980px) {
    .ods-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .hstat { padding: 8px 0 8px 10px; }
    .hstat-num { font-size: 22px; }
}
@media (max-width: 720px) {
    .ods-hero-mosaic { display: none; }
    .ods-hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .ods-hero-ticker { margin-top: 40px; }
}

/* Respetar prefers-reduced-motion: cero animaciones de adorno */
@media (prefers-reduced-motion: reduce) {
    .ods-hero-orbs .orb,
    .ods-hero-spotlight,
    .ods-mosaic-grid,
    .ods-hero-ticker .ticker-track,
    [data-anim],
    .ods-mosaic-tile,
    .ods-hero-h1 .line.gold {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ods-hero-orbs { display: none; }
}

/* ============================================================
   Topbar institucional DIGER (Manual de Marca, pág. 02)
   Cintillo superior reutilizable que muestra el logo oficial
   DIGER y el contexto "Gobierno de Honduras · Agenda 2030".
   Pensado para anteceder al contenido principal de cada vista
   del portal público. Soporta dos tonos: claro (default) y
   oscuro (cuando la vista tiene fondo marino prominente).
   ============================================================ */
.ods-topbar {
    background: #fff;
    border-bottom: 1px solid var(--gob-borde);
    position: relative;
    z-index: 5;
}
.ods-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.ods-topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity .18s ease;
}
.ods-topbar-brand:hover { opacity: 0.85; }
.ods-topbar-brand:focus-visible {
    outline: 2px solid var(--gob-azul-cl);
    outline-offset: 4px;
    border-radius: 4px;
}
.ods-topbar-logo {
    height: 42px;
    width: auto;
    display: block;
}
.ods-topbar-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    line-height: 1.25;
}
.ods-topbar-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--gob-texto-3);
    font-weight: 600;
}
.ods-topbar-line {
    font-size: 13px;
    color: var(--gob-azul);
    font-weight: 600;
    letter-spacing: -.005em;
}
.ods-topbar--oscuro {
    background: var(--gob-azul);
    border-bottom-color: rgba(255, 255, 255, .12);
}
.ods-topbar--oscuro .ods-topbar-eyebrow { color: rgba(255, 255, 255, .65); }
.ods-topbar--oscuro .ods-topbar-line { color: #fff; }
@media (max-width: 720px) {
    .ods-topbar-inner { padding: 12px 18px; gap: 12px; }
    .ods-topbar-logo { height: 34px; }
    .ods-topbar-meta { display: none; }
}

/* ============================================================
   Patrón decorativo DIGER · 3 barras (Manual de Marca, pág. 09)
   Banda inferior con la paleta institucional. Se usa como cierre
   visual al final de cada vista pública para reforzar la marca.
   Las proporciones siguen la composición canónica del manual:
   celeste (1) · marino (3) · azul medio (3).
   ============================================================ */
.ods-bars-strip {
    display: flex;
    width: 100%;
    height: 22px;
    margin: 0;
    overflow: hidden;
}
.ods-bars-strip-bar {
    display: block;
    height: 100%;
    flex-grow: 1;
}
.ods-bars-strip-bar--celeste { background: var(--gob-celeste); flex-grow: 1; }
.ods-bars-strip-bar--marino  { background: var(--gob-azul);    flex-grow: 3; }
.ods-bars-strip-bar--azul    { background: var(--gob-azul-cl); flex-grow: 3; }

/* Variante compacta (cuando va dentro del footer DIGER) */
.ods-portal-footer .ods-bars-strip { height: 16px; }
@media (max-width: 720px) {
    .ods-bars-strip { height: 14px; }
}