/* =========================================================
   SMA AMANALCO - ESTILOS PRINCIPALES V2
   Diseño institucional, moderno, sobrio, tecnológico y responsive.
========================================================= */

:root {
    --sma-azul: #1f3f73;
    --sma-azul-profundo: #07162f;
    --sma-azul-noche: #0b1f3f;
    --sma-azul-card: #102a50;
    --sma-dorado: #d7a83f;
    --sma-dorado-claro: #f0c96a;
    --sma-dorado-oscuro: #a97818;
    --sma-blanco: #ffffff;
    --sma-humo: #f4f7fb;
    --sma-gris: #687385;
    --sma-texto: #101828;
    --sma-borde: rgba(255, 255, 255, 0.14);
    --sma-borde-claro: rgba(31, 63, 115, 0.12);
    --sma-sombra: 0 28px 80px rgba(7, 22, 47, 0.22);
    --sma-sombra-suave: 0 18px 48px rgba(7, 22, 47, 0.10);
    --sma-radio: 28px;
    --sma-transicion: all 0.28s ease;
    --sma-font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --site-section-space: 68px;
}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--sma-font);
    color: var(--sma-texto);
    background: var(--sma-humo);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--sma-dorado);
    color: var(--sma-azul-profundo);
}

/* =========================================================
   NAVBAR PRINCIPAL
========================================================= */

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: var(--sma-transicion);
}

.navbar-sma {
    padding: 14px 0;
    background: rgba(7, 22, 47, 0.78);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transition: var(--sma-transicion);
}

.site-header.scrolled .navbar-sma {
    padding: 8px 0;
    background: rgba(7, 22, 47, 0.94);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.brand-sma {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.nav-sma-list {
    align-items: center;
    gap: 2px;
}

.navbar-sma .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 750;
    font-size: 0.86rem;
    padding: 10px 12px !important;
    border-radius: 999px;
    transition: var(--sma-transicion);
    white-space: nowrap;
}

.navbar-sma .nav-link:hover,
.navbar-sma .nav-link.active {
    color: var(--sma-azul-profundo);
    background: var(--sma-dorado-claro);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 14px;
}

.nav-actions .btn {
    padding: 10px 16px;
    font-size: 0.84rem;
}

.nav-btn-outline {
    color: var(--sma-blanco);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.nav-btn-outline:hover {
    color: var(--sma-azul-profundo);
    background: var(--sma-blanco);
}

.nav-btn-gold {
    color: var(--sma-azul-profundo);
    background: linear-gradient(135deg, var(--sma-dorado-claro), var(--sma-dorado));
    box-shadow: 0 12px 30px rgba(215, 168, 63, 0.30);
}

.nav-btn-gold:hover {
    color: var(--sma-azul-profundo);
    transform: translateY(-2px);
}

.menu-toggle {
    border: 1px solid rgba(255, 255, 255, 0.20);
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 15px;
    box-shadow: none !important;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sma-blanco);
    margin: 5px auto;
    border-radius: 99px;
}

/* =========================================================
   HERO PRINCIPAL
========================================================= */

.hero-sma {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(215, 168, 63, 0.26), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(73, 122, 196, 0.22), transparent 30%),
        linear-gradient(135deg, #07162f 0%, #0b1f3f 48%, #102a50 100%);
}

.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}

.hero-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    opacity: 0.75;
}

.hero-glow-one {
    width: 340px;
    height: 340px;
    left: -120px;
    bottom: 6%;
    background: rgba(215, 168, 63, 0.18);
}

.hero-glow-two {
    width: 460px;
    height: 460px;
    right: -140px;
    top: 22%;
    background: rgba(70, 116, 190, 0.20);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 86px;
}


.hero-title {
    color: var(--sma-blanco);
    font-size: clamp(3rem, 6.6vw, 6.4rem);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: -0.075em;
    margin-bottom: 26px;
}

.hero-subtitle {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1.03rem, 2vw, 1.24rem);
    line-height: 1.76;
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.hero-metrics div {
    min-width: 138px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-metrics strong {
    display: block;
    color: var(--sma-blanco);
    font-weight: 900;
    font-size: 1.05rem;
}

.hero-metrics span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    margin-top: 3px;
}

/* Panel principal del hero */
.hero-panel {
    position: relative;
    padding: 34px;
    border-radius: 36px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--sma-sombra);
    backdrop-filter: blur(24px);
    text-align: center;
    overflow: hidden;
    animation: floatCard 5.4s ease-in-out infinite;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(215, 168, 63, 0.16), transparent 44%);
    pointer-events: none;
}

.hero-panel > * {
    position: relative;
    z-index: 2;
}


.hero-panel h2 {
    color: var(--sma-blanco);
    font-size: 1.7rem;
    font-weight: 950;
    margin-bottom: 12px;
}

.hero-panel p {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.panel-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.panel-grid div {
    padding: 16px;
    border-radius: 20px;
    text-align: left;
    background: rgba(7, 22, 47, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.panel-grid span {
    display: block;
    color: var(--sma-dorado-claro);
    font-weight: 950;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.panel-grid strong {
    color: var(--sma-blanco);
    font-size: 0.9rem;
}

/* =========================================================
   BOTONES GENERALES
========================================================= */

.btn {
    border-radius: 999px;
    font-weight: 850;
    padding: 13px 24px;
    transition: var(--sma-transicion);
    border: none;
}

.btn-sma-primary {
    background: linear-gradient(135deg, var(--sma-dorado-claro), var(--sma-dorado));
    color: var(--sma-azul-profundo);
    box-shadow: 0 18px 40px rgba(215, 168, 63, 0.26);
}

.btn-sma-primary:hover {
    color: var(--sma-azul-profundo);
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(215, 168, 63, 0.34);
}

.btn-sma-outline-light {
    color: var(--sma-blanco);
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
}

.btn-sma-outline-light:hover {
    color: var(--sma-azul-profundo);
    background: var(--sma-blanco);
    transform: translateY(-3px);
}

.btn-sma-light {
    background: var(--sma-blanco);
    color: var(--sma-azul-profundo);
}

.btn-sma-light:hover {
    background: var(--sma-dorado-claro);
    color: var(--sma-azul-profundo);
    transform: translateY(-3px);
}

.btn-sma-outline-dark {
    color: var(--sma-azul);
    border: 1px solid rgba(31, 63, 115, 0.30);
    background: transparent;
}

.btn-sma-outline-dark:hover {
    color: var(--sma-blanco);
    background: var(--sma-azul);
    transform: translateY(-3px);
}

/* =========================================================
   SECCIONES GENERALES
========================================================= */

.section-padding {
    padding: 104px 0;
}

.section-heading {
    max-width: 790px;
    margin: 0 auto 52px;
}

.section-heading span,
.section-pill {
    display: inline-block;
    color: var(--sma-dorado-oscuro);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    margin-bottom: 13px;
}

.section-heading h2,
.participa-box h2 {
    color: var(--sma-azul-profundo);
    font-weight: 950;
    font-size: clamp(2.1rem, 4vw, 3.7rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    margin-bottom: 18px;
}

.section-heading p,
.participa-box p {
    color: var(--sma-gris);
    line-height: 1.76;
    font-size: 1.05rem;
}

/* =========================================================
   PROGRAMA Y RESULTADOS
========================================================= */

.program-section {
    background:
        radial-gradient(circle at top right, rgba(215, 168, 63, 0.13), transparent 28%),
        linear-gradient(180deg, var(--sma-humo), #ffffff);
}

.ejes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.eje-card {
    min-height: 210px;
    padding: 30px;
    border-radius: var(--sma-radio);
    background: var(--sma-blanco);
    border: 1px solid var(--sma-borde-claro);
    box-shadow: var(--sma-sombra-suave);
    transition: var(--sma-transicion);
}

.eje-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--sma-sombra);
}

.eje-card span {
    display: inline-block;
    color: var(--sma-azul-profundo);
    background: rgba(215, 168, 63, 0.22);
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 950;
    margin-bottom: 18px;
}

.eje-card h3 {
    color: var(--sma-azul-profundo);
    font-weight: 950;
    margin-bottom: 12px;
}

.eje-card p {
    color: var(--sma-gris);
    line-height: 1.66;
    margin: 0;
}

/* =========================================================
   TRANSPARENCIA
========================================================= */

.transparency-section {
    background: var(--sma-blanco);
}

.transparency-box {
    padding: 28px;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(7, 22, 47, 0.98), rgba(16, 42, 80, 0.96));
    box-shadow: var(--sma-sombra);
}

.data-card {
    height: 100%;
    padding: 28px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.data-card strong {
    display: block;
    color: var(--sma-dorado-claro);
    font-size: 1.08rem;
    margin-bottom: 10px;
}

.data-card p {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.66;
    margin: 0;
}

/* =========================================================
   OBSERVATORIO
========================================================= */

.observatorio-section {
    background: linear-gradient(180deg, #ffffff, var(--sma-humo));
}

.innovation-card {
    min-height: 245px;
    padding: 34px;
    border-radius: var(--sma-radio);
    background: var(--sma-blanco);
    border: 1px solid var(--sma-borde-claro);
    box-shadow: var(--sma-sombra-suave);
    transition: var(--sma-transicion);
}

.innovation-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sma-sombra);
}

.innovation-card h3 {
    color: var(--sma-azul-profundo);
    font-weight: 950;
    margin-bottom: 14px;
}

.innovation-card p {
    color: var(--sma-gris);
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* Aparición progresiva al hacer scroll */
.hidden-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.visible-on-scroll {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FOOTER CLARO-INSTITUCIONAL
========================================================= */

.footer-sma {
    background:
        radial-gradient(circle at 10% 20%, rgba(19, 156, 168, 0.10), transparent 26%),
        linear-gradient(135deg, #f7f2e7 0%, #eef6f7 48%, #ffffff 100%);
    border-top: 1px solid rgba(23, 79, 92, 0.16);
    color: var(--sma-grafito);
}

.footer-sma h3 {
    color: var(--sma-grafito);
}

.footer-sma h4 {
    color: var(--sma-petroleo);
}

.footer-sma p,
.footer-sma a {
    color: rgba(36, 49, 61, 0.74);
}

.footer-sma a:hover {
    color: var(--sma-dorado);
}

.footer-bottom {
    border-top: 1px solid rgba(23, 79, 92, 0.13);
}

/* Logo del footer sin fondo individual */
.footer-logo-clean,
.footer-logo-wide {
    width: 100%;
    max-width: 360px;
    min-height: auto;
    padding: 0;
    margin-bottom: 22px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.footer-logo-clean .footer-logo-sma,
.footer-logo-wide .footer-logo-sma {
    width: 100% !important;
    max-width: 330px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    filter: drop-shadow(0 10px 16px rgba(36, 49, 61, 0.15));
}


/* =========================================================
   AJUSTES VISUALES V2.4 - PALETA INSTITUCIONAL LUMINOSA
   Objetivo: sitio más vivo, elegante, transparente y de alta calidad.
   Se mantiene el logo sin fondo individual.
========================================================= */

:root {
    --sma-azul-profundo: #123d6a;
    --sma-azul-noche: #0f2f52;
    --sma-azul: #176b92;
    --sma-azul-claro: #dceef6;

    --sma-turquesa: #0ea5a6;
    --sma-turquesa-suave: #dff6f5;

    --sma-dorado: #c9972b;
    --sma-dorado-claro: #edc765;
    --sma-dorado-suave: #fbefd0;

    --sma-perla: #fffdf7;
    --sma-marfil: #f8f1df;
    --sma-humo: #f2f7f8;
    --sma-blanco: #ffffff;

    --sma-grafito: #1f2f3d;
    --sma-gris: #60717f;
    --sma-texto: #1f2f3d;

    --sma-borde-claro: rgba(18, 61, 106, 0.14);
    --sma-sombra: 0 30px 90px rgba(18, 61, 106, 0.18);
    --sma-sombra-suave: 0 18px 48px rgba(18, 61, 106, 0.10);
}

/* Fondo general más vivo, sin perder formalidad */
body {
    background:
        linear-gradient(180deg, #fffdf7 0%, #edf8f8 42%, #ffffff 100%);
    color: var(--sma-texto);
}

/* =========================================================
   HEADER MÁS VISIBLE Y ELEGANTE
========================================================= */

.navbar-sma {
    background:
        linear-gradient(135deg, rgba(255, 253, 247, 0.98), rgba(223, 246, 245, 0.94));
    border-bottom: 1px solid rgba(14, 165, 166, 0.20);
    box-shadow: 0 16px 42px rgba(18, 61, 106, 0.10);
}

.site-header.scrolled .navbar-sma {
    background:
        linear-gradient(135deg, rgba(255, 253, 247, 0.99), rgba(236, 248, 249, 0.98));
    border-bottom: 1px solid rgba(18, 61, 106, 0.14);
    box-shadow: 0 18px 50px rgba(18, 61, 106, 0.15);
}

/* Logo horizontal sin fondo, con sombra fina para darle presencia */
.brand-logo-horizontal {
    filter:
        drop-shadow(0 8px 12px rgba(18, 61, 106, 0.16))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

/* Menús más visibles, finos y elegantes */
.navbar-sma .nav-link {
    color: var(--sma-azul-noche);
    font-weight: 850;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid transparent;
}

.navbar-sma .nav-link:hover,
.navbar-sma .nav-link.active {
    color: var(--sma-azul-profundo);
    background: rgba(14, 165, 166, 0.13);
    border-color: rgba(14, 165, 166, 0.16);
}

.navbar-sma .nav-link::after {
    background: linear-gradient(90deg, var(--sma-turquesa), var(--sma-dorado));
}

/* Botones del menú */
.nav-btn-outline {
    color: var(--sma-azul-profundo);
    border: 1px solid rgba(18, 61, 106, 0.22);
    background: rgba(255, 255, 255, 0.72);
}

.nav-btn-outline:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-azul));
    border-color: transparent;
}

.nav-btn-gold {
    color: var(--sma-grafito);
    background: linear-gradient(135deg, #f4d77c, #c9972b);
    box-shadow: 0 14px 34px rgba(201, 151, 43, 0.28);
}

.nav-btn-gold:hover {
    color: var(--sma-grafito);
    transform: translateY(-2px);
}

/* Botón móvil */
.menu-toggle {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(18, 61, 106, 0.22);
}

.menu-toggle span {
    background: var(--sma-azul-profundo);
}

/* =========================================================
   HERO MÁS VIVO, MAJESTUOSO Y TRANSPARENTE
========================================================= */

.hero-sma {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 166, 0.24), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(237, 199, 101, 0.28), transparent 30%),
        radial-gradient(circle at 72% 82%, rgba(23, 107, 146, 0.18), transparent 35%),
        linear-gradient(135deg, #fffdf7 0%, #e5f7f7 43%, #f9fbff 100%);
}

.hero-pattern {
    opacity: 0.40;
    background-image:
        linear-gradient(rgba(18, 61, 106, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 61, 106, 0.055) 1px, transparent 1px);
}

.hero-glow-one {
    background: rgba(14, 165, 166, 0.20);
}

.hero-glow-two {
    background: rgba(237, 199, 101, 0.22);
}

/* Como se eliminó el badge, damos mejor respiración al título */
.hero-title {
    color: var(--sma-azul-noche);
    text-shadow: 0 8px 24px rgba(18, 61, 106, 0.08);
    margin-top: 18px;
}

.hero-subtitle {
    color: rgba(31, 47, 61, 0.78);
}

/* Botones del hero */
.btn-sma-primary {
    background: linear-gradient(135deg, #f4d77c, #c9972b);
    color: var(--sma-grafito);
    box-shadow: 0 20px 44px rgba(201, 151, 43, 0.26);
}

.btn-sma-primary:hover {
    color: var(--sma-grafito);
    box-shadow: 0 26px 60px rgba(201, 151, 43, 0.34);
}

/* =========================================================
   BOTÓN DESTACADO DEL HERO - MARCO NORMATIVO
   Botón principal del inicio orientado a consulta jurídica.
   Se centra, se alarga y adquiere mayor presencia institucional.
========================================================= */

.hero-actions-marco {
    width: 100%;
    justify-content: center;
    margin-top: 34px;
}

.btn-marco-normativo {
    position: relative;
    isolation: isolate;
    width: min(100%, 500px);
    min-height: 76px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 16px 46px;
    border-radius: 999px;
    color: #0b1f3f;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(135deg, #fff3bd 0%, #f0c96a 38%, #d7a83f 72%, #b98222 100%);
    box-shadow:
        0 26px 62px rgba(185, 130, 34, 0.42),
        0 0 0 7px rgba(240, 201, 106, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.btn-marco-normativo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.34) 34%,
            transparent 58%
        );
    transform: translateX(-120%);
    transition: transform 0.75s ease;
}

.btn-marco-normativo::after {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.34);
    pointer-events: none;
}

.btn-marco-normativo:hover {
    color: #07162f;
    transform: translateY(-5px);
    box-shadow:
        0 34px 78px rgba(185, 130, 34, 0.52),
        0 0 0 9px rgba(240, 201, 106, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.btn-marco-normativo:hover::before {
    transform: translateX(120%);
}

.btn-marco-normativo__label {
    display: block;
    font-size: 1.06rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.btn-marco-normativo__sub {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    color: rgba(7, 22, 47, 0.76);
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

/* Ajuste responsive del botón principal del hero */
@media (max-width: 575.98px) {
    .hero-actions-marco {
        margin-top: 28px;
    }

    .btn-marco-normativo {
        width: 100%;
        min-height: 72px;
        padding: 15px 24px;
    }

    .btn-marco-normativo__label {
        font-size: 0.98rem;
    }

    .btn-marco-normativo__sub {
        font-size: 0.68rem;
        letter-spacing: 0.035em;
    }
}

.btn-sma-outline-light {
    color: var(--sma-azul-profundo);
    border: 1px solid rgba(18, 61, 106, 0.26);
    background: rgba(255, 255, 255, 0.58);
}

.btn-sma-outline-light:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-azul));
}

/* Métricas del hero */
.hero-metrics div {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 16px 38px rgba(18, 61, 106, 0.10);
}

.hero-metrics strong {
    color: var(--sma-azul-profundo);
}

.hero-metrics span {
    color: var(--sma-gris);
}

/* Panel derecho más luminoso y elegante */
.hero-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 241, 223, 0.58));
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow: 0 36px 96px rgba(18, 61, 106, 0.16);
}

.hero-panel::before {
    background:
        radial-gradient(circle at top, rgba(14, 165, 166, 0.13), transparent 45%);
}

.hero-logo-horizontal {
    filter:
        drop-shadow(0 14px 20px rgba(18, 61, 106, 0.18))
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.56));
}

.hero-panel h2 {
    color: var(--sma-azul-noche);
}

.hero-panel p {
    color: rgba(31, 47, 61, 0.74);
}

/* Tarjetas internas del panel */
.panel-grid div {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(223, 246, 245, 0.46));
    border: 1px solid rgba(14, 165, 166, 0.16);
}

.panel-grid span {
    color: var(--sma-dorado);
}

.panel-grid strong {
    color: var(--sma-azul-noche);
}

/* =========================================================
   SECCIONES GENERALES MÁS VIVAS
========================================================= */

.quick-access,
.observatorio-section,
.biblioteca-section {
    background:
        linear-gradient(180deg, #ffffff 0%, #eefafa 100%);
}

.program-section,
.denuncias-section {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 166, 0.12), transparent 28%),
        linear-gradient(180deg, #f4fbfb, #ffffff);
}

.section-heading span,
.section-pill {
    color: var(--sma-dorado);
}

.section-heading h2,
.participa-box h2 {
    color: var(--sma-azul-noche);
}

/* Tarjetas */
.access-card,
.eje-card,
.innovation-card,
.notice-card {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(14, 165, 166, 0.14);
    box-shadow: 0 20px 52px rgba(18, 61, 106, 0.10);
}

.access-card:hover,
.eje-card:hover,
.innovation-card:hover {
    box-shadow: 0 30px 80px rgba(18, 61, 106, 0.18);
    border-color: rgba(201, 151, 43, 0.28);
}

.access-card::before {
    background: linear-gradient(90deg, var(--sma-turquesa), var(--sma-dorado));
}

.access-icon {
    background:
        linear-gradient(135deg, rgba(14, 165, 166, 0.16), rgba(237, 199, 101, 0.24));
    color: var(--sma-azul-profundo);
}

.access-card h3,
.eje-card h3,
.innovation-card h3,
.notice-card h3 {
    color: var(--sma-azul-noche);
}

/* Transparencia con más presencia */
.transparency-section {
    background:
        linear-gradient(180deg, #ffffff, #eefafa);
}

.transparency-box {
    background:
        radial-gradient(circle at top left, rgba(237, 199, 101, 0.18), transparent 32%),
        linear-gradient(135deg, #123d6a 0%, #176b92 54%, #0ea5a6 100%);
    box-shadow: 0 32px 88px rgba(18, 61, 106, 0.24);
}

.data-card {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.22);
}

.data-card strong {
    color: #ffe08a;
}

/* Participación más viva */
.participa-section {
    background:
        radial-gradient(circle at top left, rgba(237, 199, 101, 0.20), transparent 30%),
        radial-gradient(circle at bottom right, rgba(14, 165, 166, 0.24), transparent 34%),
        linear-gradient(135deg, #123d6a 0%, #176b92 52%, #0ea5a6 100%);
}

.participa-box {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 32px 88px rgba(18, 61, 106, 0.24);
}

.participa-box .section-pill {
    color: #ffe08a;
}

/* =========================================================
   SMA AMANALCO - HOME V2.5
   Hero con red ligera de interconexión y tarjetas tipo sistema.
========================================================= */

/* HERO TIPO PLATAFORMA */
.hero-platform {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(14, 165, 166, 0.22), transparent 30%),
        radial-gradient(circle at 86% 22%, rgba(237, 199, 101, 0.24), transparent 28%),
        radial-gradient(circle at 70% 86%, rgba(18, 61, 106, 0.16), transparent 34%),
        linear-gradient(135deg, #fffdf7 0%, #e9fbfb 43%, #ffffff 100%);
}

.network-bg {
    position: absolute;
    inset: 0;
    opacity: 0.72;
    pointer-events: none;
}

.network-svg {
    width: 100%;
    height: 100%;
}

.network-lines path {
    fill: none;
    stroke: url(#lineaConexion);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 9 18;
    animation: networkFlow 14s linear infinite;
    opacity: 0.62;
}

.network-nodes circle {
    fill: #ffffff;
    stroke: #0ea5a6;
    stroke-width: 3;
    filter: drop-shadow(0 8px 12px rgba(18, 61, 106, 0.22));
    animation: nodePulse 3.6s ease-in-out infinite;
}

.network-nodes circle:nth-child(2n) {
    stroke: #c9972b;
    animation-delay: 0.6s;
}

.network-nodes circle:nth-child(3n) {
    stroke: #176b92;
    animation-delay: 1.1s;
}

.hero-platform-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(22px);
    pointer-events: none;
}

.hero-platform-glow-one {
    width: 360px;
    height: 360px;
    left: -120px;
    bottom: 4%;
    background: rgba(14, 165, 166, 0.16);
}

.hero-platform-glow-two {
    width: 460px;
    height: 460px;
    right: -150px;
    top: 18%;
    background: rgba(237, 199, 101, 0.18);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--sma-azul-profundo);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow: 0 14px 34px rgba(18, 61, 106, 0.08);
    font-size: 0.84rem;
    font-weight: 850;
    margin-bottom: 22px;
}

.hero-platform .hero-title {
    color: #123d6a;
    max-width: 830px;
}

.hero-platform .hero-subtitle {
    color: rgba(31, 47, 61, 0.80);
}

.hero-tool-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.hero-tool-strip a {
    color: #123d6a;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(14, 165, 166, 0.18);
    padding: 10px 15px;
    border-radius: 999px;
    font-weight: 850;
    font-size: 0.86rem;
    box-shadow: 0 12px 28px rgba(18, 61, 106, 0.08);
    transition: all 0.25s ease;
}

.hero-tool-strip a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #0ea5a6);
    transform: translateY(-2px);
}

/* PANEL DERECHO DEL HERO */
.platform-panel {
    position: relative;
    min-height: 500px;
    padding: 32px;
    border-radius: 38px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 250, 0.66));
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow: 0 36px 96px rgba(18, 61, 106, 0.16);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.platform-panel::before {
    content: "";
    position: absolute;
    inset: -30%;
    background:
        conic-gradient(
            from 180deg,
            transparent,
            rgba(14, 165, 166, 0.14),
            transparent,
            rgba(201, 151, 43, 0.16),
            transparent
        );
    animation: rotateSoft 18s linear infinite;
}

.platform-panel > * {
    position: relative;
    z-index: 2;
}

.platform-panel-header {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(14, 165, 166, 0.16);
    color: #123d6a;
    font-size: 0.82rem;
    margin-bottom: 26px;
}

.platform-panel-header span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0ea5a6;
    box-shadow: 0 0 0 6px rgba(14, 165, 166, 0.13);
}

.platform-logo-zone {
    margin: 28px auto 34px;
    max-width: 460px;
}

.platform-logo {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
    filter:
        drop-shadow(0 14px 22px rgba(18, 61, 106, 0.18))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
}

.platform-orbit {
    position: relative;
    height: 170px;
    margin: 6px 0 24px;
}

.platform-orbit::before,
.platform-orbit::after {
    content: "";
    position: absolute;
    inset: 18px 18%;
    border: 1px dashed rgba(14, 165, 166, 0.36);
    border-radius: 50%;
}

.platform-orbit::after {
    inset: 42px 28%;
    border-color: rgba(201, 151, 43, 0.34);
}

.orbit-node {
    position: absolute;
    padding: 9px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #123d6a;
    font-weight: 850;
    font-size: 0.78rem;
    box-shadow: 0 14px 30px rgba(18, 61, 106, 0.12);
    border: 1px solid rgba(14, 165, 166, 0.16);
}

.node-a {
    left: 8%;
    top: 28px;
}

.node-b {
    right: 5%;
    top: 22px;
}

.node-c {
    left: 18%;
    bottom: 20px;
}

.node-d {
    right: 18%;
    bottom: 24px;
}

.platform-panel p {
    color: rgba(31, 47, 61, 0.76);
    line-height: 1.72;
    margin-bottom: 0;
}

/* SISTEMAS S1-S6 */
.systems-section {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff 0%, #eefafa 100%);
}

.systems-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
}

.system-card {
    position: relative;
    min-height: 255px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 32px;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(18, 61, 106, 0.16);
    transition: all 0.28s ease;
}

.system-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.26), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
    pointer-events: none;
}

.system-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 90px rgba(18, 61, 106, 0.24);
}

.system-card > * {
    position: relative;
    z-index: 2;
}

.system-code {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 950;
    margin-bottom: 24px;
}

.system-content h3 {
    font-weight: 900;
    font-size: 1.22rem;
    margin-bottom: 12px;
    color: #ffffff;
}

.system-content p {
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.66;
    margin: 0;
}

.system-arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    align-self: flex-end;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
    font-size: 1.4rem;
    transition: all 0.25s ease;
}

.system-card:hover .system-arrow {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.30);
}

.system-card-one {
    background: linear-gradient(135deg, #123d6a, #176b92);
}

.system-card-two {
    background: linear-gradient(135deg, #0f766e, #0ea5a6);
}

.system-card-three {
    background: linear-gradient(135deg, #8a5a13, #c9972b);
}

.system-card-four {
    background: linear-gradient(135deg, #4f46e5, #176b92);
}

.system-card-five {
    background: linear-gradient(135deg, #7c2d12, #c9972b);
}

.system-card-six {
    background: linear-gradient(135deg, #164e63, #0ea5a6);
}

/* Animaciones ligeras */
@keyframes networkFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -220;
    }
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.78;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

@keyframes rotateSoft {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .network-lines path,
    .network-nodes circle,
    .platform-panel::before {
        animation: none !important;
    }
}

/* =========================================================
   SMA AMANALCO - V2.6
   Header premium, footer rediseñado, navegación exacta,
   títulos más atractivos, íconos en módulos y menor separación.
========================================================= */

/* Corrige el desfase al navegar con anclas y header fijo */
section[id] {
    scroll-margin-top: 118px;
}

/* Menor espacio vertical entre secciones */
.section-padding {
    padding: 78px 0;
}

.systems-section.section-padding {
    padding-bottom: 54px;
}

.program-section.section-padding,
.transparency-section.section-padding,
.participa-section.section-padding,
.observatorio-section.section-padding,
.denuncias-section.section-padding,
.biblioteca-section.section-padding {
    padding-top: 68px;
}

/* Títulos de sección más vistosos */
.section-heading {
    margin-bottom: 38px;
}

.section-heading span,
.section-pill {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    color: #123d6a;
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.16);
    letter-spacing: 0.10em;
}

.section-heading h2,
.participa-box h2 {
    position: relative;
    display: inline-block;
    color: #123d6a;
    text-shadow: 0 10px 24px rgba(18, 61, 106, 0.08);
}

.section-heading h2::after,
.participa-box h2::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0ea5a6, #edc765, #176b92);
}

.section-heading.text-start h2::after {
    margin-left: 0;
}

/* =========================================================
   HEADER PREMIUM
========================================================= */

.navbar-sma {
    padding: 12px 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 249, 250, 0.94));
    border-bottom: 1px solid rgba(18, 61, 106, 0.12);
    box-shadow:
        0 18px 52px rgba(18, 61, 106, 0.12),
        inset 0 -3px 0 rgba(14, 165, 166, 0.08);
}

.navbar-sma::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #123d6a, #0ea5a6, #edc765, #176b92);
}

.site-header.scrolled .navbar-sma {
    padding: 8px 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 250, 0.98));
    box-shadow: 0 20px 56px rgba(18, 61, 106, 0.16);
}

/* Logo con presencia, sin perder la esencia del diseño */
.brand-logo-horizontal {
    width: 370px;
    max-width: 370px;
    filter:
        drop-shadow(0 8px 14px rgba(18, 61, 106, 0.17))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
}

.site-header.scrolled .brand-logo-horizontal {
    width: 320px;
    max-width: 320px;
}

/* Menú más grande, elegante y visible */
.nav-sma-list {
    gap: 8px;
}

.navbar-sma .nav-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 17px !important;
    border-radius: 18px;
    color: #123d6a;
    font-size: 0.90rem;
    font-weight: 900;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(238, 250, 250, 0.66));
    border: 1px solid rgba(18, 61, 106, 0.10);
    box-shadow: 0 10px 22px rgba(18, 61, 106, 0.06);
}

.navbar-sma .nav-link:hover,
.navbar-sma .nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(18, 61, 106, 0.20);
    transform: translateY(-2px);
}

.navbar-sma .nav-link::after {
    display: none;
}

.nav-actions .btn {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 0.90rem;
    font-weight: 900;
}

.nav-btn-outline {
    color: #123d6a;
    background: #ffffff;
    border: 1px solid rgba(18, 61, 106, 0.16);
    box-shadow: 0 10px 24px rgba(18, 61, 106, 0.08);
}

.nav-btn-outline:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92);
}

.nav-btn-gold {
    color: #1f2f3d;
    background: linear-gradient(135deg, #ffe08a, #c9972b);
    box-shadow: 0 14px 34px rgba(201, 151, 43, 0.28);
}

/* =========================================================
   HERRAMIENTAS DEL NÚCLEO DIGITAL
========================================================= */

.platform-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 18px 0 24px;
}

.platform-tool-card {
    position: relative;
    padding: 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(232, 249, 250, 0.62));
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 16px 34px rgba(18, 61, 106, 0.10);
    overflow: hidden;
    transition: all 0.28s ease;
}

.platform-tool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 5px;
    background: linear-gradient(180deg, #0ea5a6, #edc765);
}

.platform-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 58px rgba(18, 61, 106, 0.18);
}

.platform-tool-card span {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #0ea5a6);
    font-weight: 950;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.platform-tool-card strong {
    display: block;
    color: #123d6a;
    font-size: 0.98rem;
    font-weight: 950;
    margin-bottom: 3px;
}

.platform-tool-card small {
    color: rgba(31, 47, 61, 0.66);
    font-weight: 700;
}

/* =========================================================
   ÍCONOS DE LOS MÓDULOS
========================================================= */

.system-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.26);
    margin-bottom: 24px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.system-icon svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.system-card:hover .system-icon {
    transform: scale(1.05) rotate(-2deg);
    background: rgba(255, 255, 255, 0.28);
}

/* Por compatibilidad, si quedó system-code, se oculta solo si no se usa */
.system-code {
    display: none;
}

/* =========================================================
   SMA AMANALCO - V2.7
   Rediseño completo de Participación Ciudadana.
========================================================= */

.participa-premium {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 224, 138, 0.28), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(14, 165, 166, 0.24), transparent 30%),
        linear-gradient(135deg, #102f57 0%, #176b92 48%, #0ea5a6 100%);
}

.participa-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.participa-panel {
    position: relative;
    z-index: 2;
    padding: 54px;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 34px 96px rgba(18, 61, 106, 0.30);
    backdrop-filter: blur(18px);
}

.participa-tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: #ffe08a;
    background: rgba(255, 224, 138, 0.13);
    border: 1px solid rgba(255, 224, 138, 0.30);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.participa-content h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    text-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.participa-content h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe08a, #ffffff, #0ea5a6);
}

.participa-content p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.78;
    margin-bottom: 28px;
}

.participa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-participa-primary {
    color: #1f2f3d;
    background: linear-gradient(135deg, #ffe08a, #c9972b);
    box-shadow: 0 18px 42px rgba(201, 151, 43, 0.28);
}

.btn-participa-primary:hover {
    color: #1f2f3d;
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(201, 151, 43, 0.36);
}

.btn-participa-outline {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.btn-participa-outline:hover {
    color: #102f57;
    background: #ffffff;
    transform: translateY(-3px);
}

.participa-dashboard {
    padding: 28px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 250, 250, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.participa-dashboard-header {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    margin-bottom: 20px;
    border-radius: 999px;
    color: #123d6a;
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.16);
    font-size: 0.82rem;
    font-weight: 900;
}

.participa-dashboard-header span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0ea5a6;
    box-shadow: 0 0 0 6px rgba(14, 165, 166, 0.14);
}

.participa-tool-list {
    display: grid;
    gap: 14px;
}

.participa-tool-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(18, 61, 106, 0.10);
    box-shadow: 0 14px 32px rgba(18, 61, 106, 0.08);
    transition: all 0.25s ease;
}

.participa-tool-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(18, 61, 106, 0.14);
}

.participa-tool-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #0ea5a6);
    font-weight: 950;
    font-size: 0.82rem;
}

.participa-tool-item strong {
    display: block;
    color: #123d6a;
    font-weight: 950;
    margin-bottom: 4px;
}

.participa-tool-item p {
    color: rgba(31, 47, 61, 0.68);
    line-height: 1.55;
    margin: 0;
    font-size: 0.90rem;
}

/* =========================================================
   SMA AMANALCO - V2.8
   Rediseño de Orientación Ciudadana y Biblioteca Digital.
========================================================= */

/* =========================================================
   ORIENTACIÓN CIUDADANA PREMIUM
========================================================= */

.orientacion-premium {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 224, 138, 0.24), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(18, 61, 106, 0.28), transparent 30%),
        linear-gradient(135deg, #16345d 0%, #176b92 50%, #0ea5a6 100%);
}

.orientacion-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.20;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.orientacion-panel {
    position: relative;
    z-index: 2;
    padding: 54px;
    border-radius: 40px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 34px 96px rgba(18, 61, 106, 0.30);
    backdrop-filter: blur(18px);
}

.orientacion-tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: #ffe08a;
    background: rgba(255, 224, 138, 0.13);
    border: 1px solid rgba(255, 224, 138, 0.30);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.orientacion-content h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    text-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.orientacion-content h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe08a, #ffffff, #0ea5a6);
}

.orientacion-content p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.05rem;
    line-height: 1.78;
    margin-bottom: 28px;
}

.orientacion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-orientacion-primary {
    color: #1f2f3d;
    background: linear-gradient(135deg, #ffe08a, #c9972b);
    box-shadow: 0 18px 42px rgba(201, 151, 43, 0.28);
}

.btn-orientacion-primary:hover {
    color: #1f2f3d;
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(201, 151, 43, 0.36);
}

.btn-orientacion-outline {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.btn-orientacion-outline:hover {
    color: #16345d;
    background: #ffffff;
    transform: translateY(-3px);
}

.orientacion-dashboard {
    padding: 28px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 250, 250, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.orientacion-dashboard-header {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    margin-bottom: 20px;
    border-radius: 999px;
    color: #123d6a;
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.16);
    font-size: 0.82rem;
    font-weight: 900;
}

.orientacion-dashboard-header span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0ea5a6;
    box-shadow: 0 0 0 6px rgba(14, 165, 166, 0.14);
}

.orientacion-route {
    display: grid;
    gap: 14px;
}

.orientacion-route-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(18, 61, 106, 0.10);
    box-shadow: 0 14px 32px rgba(18, 61, 106, 0.08);
    transition: all 0.25s ease;
}

.orientacion-route-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(18, 61, 106, 0.14);
}

.orientacion-route-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #0ea5a6);
    font-weight: 950;
    font-size: 1rem;
}

.orientacion-route-item strong {
    display: block;
    color: #123d6a;
    font-weight: 950;
    margin-bottom: 4px;
}

.orientacion-route-item p {
    color: rgba(31, 47, 61, 0.68);
    line-height: 1.55;
    margin: 0;
    font-size: 0.90rem;
}

.orientacion-alert {
    margin-top: 16px;
    padding: 16px;
    border-radius: 20px;
    color: #123d6a;
    background: rgba(255, 224, 138, 0.24);
    border: 1px solid rgba(201, 151, 43, 0.22);
    line-height: 1.55;
    font-size: 0.90rem;
}

.orientacion-alert strong {
    font-weight: 950;
}

/* =========================================================
   BIBLIOTECA DIGITAL PREMIUM
========================================================= */

.biblioteca-digital {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(201, 151, 43, 0.20), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(14, 165, 166, 0.20), transparent 30%),
        linear-gradient(135deg, #fffdf7 0%, #eefafa 52%, #ffffff 100%);
}

.biblioteca-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(24px);
    pointer-events: none;
}

.biblioteca-glow-one {
    width: 360px;
    height: 360px;
    left: -120px;
    bottom: 10%;
    background: rgba(201, 151, 43, 0.18);
}

.biblioteca-glow-two {
    width: 420px;
    height: 420px;
    right: -130px;
    top: 8%;
    background: rgba(14, 165, 166, 0.18);
}

.biblioteca-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
    padding: 54px;
    border-radius: 42px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 34px 96px rgba(18, 61, 106, 0.14);
    backdrop-filter: blur(18px);
}

.biblioteca-tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: #123d6a;
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.16);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.biblioteca-content h2 {
    color: #123d6a;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
}

.biblioteca-content h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0ea5a6, #ffe08a, #176b92);
}

.biblioteca-content p {
    max-width: 720px;
    color: rgba(31, 47, 61, 0.74);
    font-size: 1.05rem;
    line-height: 1.78;
    margin-bottom: 28px;
}

.biblioteca-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-biblioteca-primary {
    color: #1f2f3d;
    background: linear-gradient(135deg, #ffe08a, #c9972b);
    box-shadow: 0 18px 42px rgba(201, 151, 43, 0.26);
}

.btn-biblioteca-primary:hover {
    color: #1f2f3d;
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(201, 151, 43, 0.34);
}

.btn-biblioteca-outline {
    color: #123d6a;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(18, 61, 106, 0.18);
}

.btn-biblioteca-outline:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #0ea5a6);
    transform: translateY(-3px);
}

/* Visual de biblioteca digital */
.biblioteca-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.library-device {
    position: relative;
    width: min(100%, 470px);
    min-height: 310px;
    padding: 18px;
    border-radius: 34px;
    background: linear-gradient(135deg, #123d6a, #176b92);
    box-shadow: 0 30px 80px rgba(18, 61, 106, 0.24);
    overflow: hidden;
    z-index: 2;
}

.library-device::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        conic-gradient(
            from 180deg,
            transparent,
            rgba(255, 224, 138, 0.22),
            transparent,
            rgba(14, 165, 166, 0.22),
            transparent
        );
    animation: rotateSoft 20s linear infinite;
}

.device-top {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.device-top span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffe08a;
}

.device-top span:nth-child(2) {
    background: #ffffff;
}

.device-top span:nth-child(3) {
    background: #0ea5a6;
}

.device-screen {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
}

.digital-document {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    animation: floatDoc 4.8s ease-in-out infinite;
}

.digital-document strong {
    display: block;
    color: #123d6a;
    font-weight: 950;
    margin-bottom: 4px;
}

.digital-document small {
    color: rgba(31, 47, 61, 0.66);
    font-weight: 750;
}

.doc-two {
    margin-left: 34px;
    animation-delay: 0.5s;
}

.doc-three {
    margin-left: 68px;
    animation-delay: 1s;
}

.library-shelf {
    position: absolute;
    display: flex;
    gap: 8px;
    align-items: end;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(14, 165, 166, 0.14);
    box-shadow: 0 18px 46px rgba(18, 61, 106, 0.10);
}

.shelf-one {
    top: 12px;
    right: 12px;
    transform: rotate(4deg);
}

.shelf-two {
    bottom: 14px;
    left: 12px;
    transform: rotate(-4deg);
}

.book {
    width: 16px;
    border-radius: 6px 6px 3px 3px;
    display: block;
    box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.18);
}

.book-a,
.book-f {
    height: 54px;
    background: #123d6a;
}

.book-b,
.book-g {
    height: 72px;
    background: #0ea5a6;
}

.book-c,
.book-h {
    height: 62px;
    background: #c9972b;
}

.book-d {
    height: 84px;
    background: #176b92;
}

.book-e,
.book-i {
    height: 50px;
    background: #ffe08a;
}

@keyframes floatDoc {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* =========================================================
   SMA AMANALCO - FOOTER V2.9
   Footer amplio, institucional, elegante y de ancho completo.
========================================================= */

.footer-wide {
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 10% 18%, rgba(14, 165, 166, 0.28), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(255, 224, 138, 0.20), transparent 28%),
        linear-gradient(135deg, #102f57 0%, #123d6a 42%, #0b5e7a 100%);
    border-top: none;
}

.footer-wide-bg {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.footer-wide::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0ea5a6, #ffe08a, #176b92, #0ea5a6);
}

.footer-wide-top,
.footer-wide-main,
.footer-wide-bottom {
    position: relative;
    z-index: 2;
}

.footer-wide-top {
    padding: 46px 0 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-wide-brand {
    max-width: 560px;
}

.footer-wide-brand .footer-logo-sma {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    display: block !important;
    margin: 0 0 18px 0 !important;
    filter:
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.footer-wide-brand p {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.72;
    margin: 0;
    font-size: 1.02rem;
}

.footer-wide-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.footer-wide-actions a {
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 18px;
    font-weight: 850;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
    transition: all 0.25s ease;
}

/* =========================================================
   FOOTER - ENLACE DESTACADO A MARCO NORMATIVO
   Realza discretamente el acceso jurídico sin romper la línea visual.
========================================================= */

.footer-wide-actions .footer-action-feature {
    color: var(--sma-azul-profundo);
    background: linear-gradient(135deg, var(--sma-dorado-claro), var(--sma-dorado));
    border-color: rgba(240, 201, 106, 0.72);
    box-shadow: 0 14px 34px rgba(215, 168, 63, 0.24);
}

.footer-wide-actions .footer-action-feature:hover {
    color: var(--sma-azul-profundo);
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(215, 168, 63, 0.32);
}


.footer-wide-actions a:hover {
    color: #102f57;
    background: #ffe08a;
    transform: translateY(-3px);
}

.footer-wide-main {
    padding: 42px 0;
}

.footer-wide h4 {
    color: #ffe08a;
    font-weight: 950;
    margin-bottom: 18px;
}

.footer-wide ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-wide li {
    margin-bottom: 11px;
}

.footer-wide-main a {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 760;
    transition: all 0.25s ease;
}

.footer-wide-main a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-wide-note {
    height: 100%;
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.14);
}

.footer-wide-note p {
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.72;
    margin: 0;
    font-size: 0.94rem;
}

.footer-wide-bottom {
    padding: 20px 0;
    background: rgba(4, 18, 34, 0.28);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.90rem;
}

.footer-tech-note {
    text-align: right;
}

/* Desactiva el estilo anterior del footer con tarjeta central */
.footer-main-card,
.footer-premium .footer-main-card {
    box-shadow: none;
}

/* =========================================================
   SMA AMANALCO - FOOTER V3.0
   Footer más compacto y logo con contraste premium.
========================================================= */

/* Footer más compacto en altura */
.footer-wide-top {
    padding: 30px 0 24px;
}

.footer-wide-main {
    padding: 30px 0;
}

.footer-wide-bottom {
    padding: 14px 0;
}

/* Reduce ligeramente el texto superior */
.footer-wide-brand p {
    font-size: 0.96rem;
    line-height: 1.62;
    max-width: 620px;
}

/* Cápsula premium para que el logo no se pierda con el azul */
.footer-logo-premium {
    width: 100%;
    max-width: 370px;
    padding: 14px 18px;
    margin: 0 0 16px 0;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 253, 247, 0.96), rgba(238, 250, 250, 0.90));
    border: 1px solid rgba(255, 224, 138, 0.42);
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(14px);
}

/* Logo dentro de la cápsula */
.footer-logo-premium .footer-logo-sma {
    width: 100% !important;
    max-width: 330px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 8px 12px rgba(18, 61, 106, 0.16))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
}

/* Mejora estética de botones superiores del footer */
.footer-wide-actions a {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
}

/* Encabezados y enlaces más compactos */
.footer-wide h4 {
    margin-bottom: 12px;
}

.footer-wide li {
    margin-bottom: 8px;
}

.footer-wide-main a {
    font-size: 0.94rem;
}

/* Nota institucional menos alta */
.footer-wide-note {
    padding: 20px;
    border-radius: 22px;
}

.footer-wide-note p {
    font-size: 0.88rem;
    line-height: 1.62;
}

/* Franja inferior más limpia */
.footer-bottom-grid p {
    font-size: 0.84rem;
}

/* =========================================================
   SMA AMANALCO - NAVEGACIÓN V3.1
   Orden visual, anclas exactas y botón regresar al inicio.
========================================================= */

/* Ajuste base para navegación por anclas con header fijo */
html {
    scroll-padding-top: 112px;
}

section[id] {
    scroll-margin-top: 112px;
}

/* Menú con más elementos: se compacta sin perder presencia */
.nav-sma-list {
    gap: 6px;
}

.navbar-sma .nav-link {
    padding-left: 13px !important;
    padding-right: 13px !important;
}

/* Acción destacada única */
.nav-actions {
    margin-left: 12px;
}

.nav-actions .nav-btn-gold {
    white-space: nowrap;
}

/* Botón flotante para regresar al inicio */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.94);
    background:
        linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    box-shadow:
        0 18px 44px rgba(18, 61, 106, 0.34),
        0 0 0 6px rgba(14, 165, 166, 0.12);
    transition: all 0.28s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 24px 58px rgba(18, 61, 106, 0.42),
        0 0 0 8px rgba(255, 224, 138, 0.18);
}

.back-to-top svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   SMA AMANALCO - MENÚ PREMIUM V3.2
   Menú compacto con 6 opciones, íconos y submenús.
========================================================= */

.nav-sma-compact {
    gap: 8px;
}

.nav-link-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.nav-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 12px;
    color: #123d6a;
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.16);
    transition: all 0.25s ease;
}

.nav-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navbar-sma .nav-link:hover .nav-icon,
.navbar-sma .nav-link.active .nav-icon,
.navbar-sma .dropdown.show .nav-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
}

/* Submenú premium */
.dropdown-menu-sma {
    min-width: 250px;
    padding: 12px;
    margin-top: 14px;
    border: 1px solid rgba(14, 165, 166, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.18);
    backdrop-filter: blur(18px);
}

.dropdown-menu-sma .dropdown-item {
    padding: 12px 14px;
    border-radius: 16px;
    color: #123d6a;
    font-weight: 850;
    transition: all 0.22s ease;
}

.dropdown-menu-sma .dropdown-item:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    transform: translateX(3px);
}

/* =========================================================
   SMA AMANALCO - FLECHA DROPDOWN V3.4.1
   Corrige la flecha de Transparencia y Ciudadanía.
========================================================= */

/* Reconstruye la flecha porque una regla anterior de .nav-link::after
   la estaba ocultando junto con la línea decorativa del menú. */
.navbar-sma .nav-link.dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;

    margin-left: 10px !important;
    margin-right: 0 !important;
    vertical-align: middle !important;

    background: transparent !important;
    border-top: 0.42em solid currentColor !important;
    border-right: 0.36em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.36em solid transparent !important;

    opacity: 0.88;
    transform: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;

    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 !important;
}

/* Al abrir el submenú, la flecha gira hacia arriba. */
.navbar-sma .nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
    opacity: 1;
}

/* Cuando el menú está activo, la flecha conserva contraste. */
.navbar-sma .nav-link.dropdown-toggle.active::after,
.navbar-sma .nav-link.dropdown-toggle.is-section-active::after,
.navbar-sma .nav-link.dropdown-toggle:hover::after {
    opacity: 1;
}

/* =========================================================
   SMA AMANALCO - TARJETAS PREMIUM V3.3
   Programa y Resultados + Observatorio.
========================================================= */

/* Tarjetas premium de ejes */
.ejes-grid-premium {
    gap: 20px;
}

.eje-card-premium {
    position: relative;
    overflow: hidden;
    padding: 30px;
    min-height: 245px;
    background:
        radial-gradient(circle at top right, rgba(255, 224, 138, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 250, 250, 0.78));
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.12);
}

.eje-card-premium::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #123d6a, #0ea5a6, #ffe08a);
}

.eje-card-premium::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(14, 165, 166, 0.09);
}

.eje-card-premium:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 151, 43, 0.35);
    box-shadow: 0 34px 86px rgba(18, 61, 106, 0.20);
}

.eje-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    box-shadow: 0 18px 40px rgba(18, 61, 106, 0.20);
}

.eje-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eje-card-premium span {
    color: #123d6a;
    background: rgba(255, 224, 138, 0.34);
    border: 1px solid rgba(201, 151, 43, 0.22);
}

.eje-card-premium h3 {
    position: relative;
    z-index: 2;
    color: #123d6a;
}

.eje-card-premium p {
    position: relative;
    z-index: 2;
    color: rgba(31, 47, 61, 0.72);
}

/* Tarjetas premium de observatorio */
.observatorio-grid-premium {
    align-items: stretch;
}

.observatorio-card-premium {
    position: relative;
    min-height: 290px;
    overflow: hidden;
    padding: 32px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 166, 0.20), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eefafa 100%);
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.12);
}

.observatorio-card-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 6px;
    background: linear-gradient(90deg, #123d6a, #0ea5a6, #ffe08a);
}

.observatorio-card-premium::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(18, 61, 106, 0.08);
}

.observatorio-card-premium:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 151, 43, 0.32);
    box-shadow: 0 34px 86px rgba(18, 61, 106, 0.20);
}

.observatorio-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    box-shadow: 0 18px 42px rgba(18, 61, 106, 0.20);
}

.observatorio-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.observatorio-label {
    display: inline-flex;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    color: #123d6a;
    background: rgba(255, 224, 138, 0.34);
    border: 1px solid rgba(201, 151, 43, 0.22);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.observatorio-card-premium h3 {
    position: relative;
    z-index: 2;
    color: #123d6a;
}

.observatorio-card-premium p {
    position: relative;
    z-index: 2;
    color: rgba(31, 47, 61, 0.72);
}

/* =========================================================
   SMA AMANALCO - MENÚ RESPONSIVE V3.4
   Flecha y estados activos visibles en móvil.
========================================================= */

@media (max-width: 1199px) {

    .navbar-sma .nav-link.dropdown-toggle {
        justify-content: space-between !important;
    }

    .navbar-sma .nav-link.dropdown-toggle::after {
        margin-left: auto !important;
    }

    .nav-item.dropdown.dropdown-section-active > .nav-link {
        color: #ffffff !important;
        background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6) !important;
    }

    .dropdown-menu-sma .dropdown-item.active,
    .dropdown-menu-sma .dropdown-item.is-section-active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6) !important;
    }
}

/* =========================================================
   SMA AMANALCO - FOOTER LEGAL V3.4
   Enlace inferior para Aviso de Privacidad.
========================================================= */

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.footer-legal-links span {
    color: rgba(255, 255, 255, 0.76);
}

.footer-legal-links a {
    color: #ffe08a;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 224, 138, 0.22);
    transition: all 0.25s ease;
}

.footer-legal-links a:hover {
    color: #102f57;
    background: #ffe08a;
    transform: translateY(-2px);
}
/* =========================================================
   SMA AMANALCO - HEADER CENTRADO V3.7
   Corrige escritorio: centra logo + menú como una sola unidad,
   evita extremos y conserva botones visibles.
========================================================= */

@media (min-width: 1200px) {

    /* Centra el conjunto completo del header */
    .navbar-sma .container {
        width: min(1320px, calc(100% - 80px));
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 28px;
    }

    /* Logo con presencia, pero sin pegarse a la orilla */
    .brand-sma,
    .brand-sma-wide {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
    }

    .brand-logo-horizontal {
        width: 315px;
        max-width: 315px;
        height: auto;
        display: block;
    }

    .site-header.scrolled .brand-logo-horizontal {
        width: 285px;
        max-width: 285px;
    }

    /* El menú ya no ocupa todo el espacio restante */
    .navbar-collapse {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }

    .nav-sma-list,
    .nav-sma-compact {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* Botones del menú: tamaño equilibrado, no tan pequeños */
    .navbar-sma .nav-link {
        min-height: 42px;
        padding: 9px 13px !important;
        border-radius: 16px;
        font-size: 0.84rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .nav-link-icon {
        gap: 7px;
    }

    .nav-icon {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        border-radius: 10px;
    }

    .nav-icon svg {
        width: 15.5px;
        height: 15.5px;
    }

    /* Flecha de Transparencia y Ciudadanía proporcional */
    .navbar-sma .nav-link.dropdown-toggle::after {
        margin-left: 7px !important;
        border-top-width: 0.38em !important;
        border-right-width: 0.34em !important;
        border-left-width: 0.34em !important;
    }
}

/* Ajuste especial para computadoras/laptops de 1200px a 1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .navbar-sma .container {
        width: min(1240px, calc(100% - 52px));
        max-width: 1240px;
        gap: 20px;
    }

    .brand-logo-horizontal {
        width: 285px;
        max-width: 285px;
    }

    .site-header.scrolled .brand-logo-horizontal {
        width: 260px;
        max-width: 260px;
    }

    .nav-sma-list,
    .nav-sma-compact {
        gap: 6px;
    }

    .navbar-sma .nav-link {
        min-height: 40px;
        padding: 8px 11px !important;
        font-size: 0.80rem;
        border-radius: 15px;
    }

    .nav-icon {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
    }

    .nav-icon svg {
        width: 14.5px;
        height: 14.5px;
    }
}

/* =========================================================
   SMA AMANALCO - HERO TYPO V3.8
   Título principal más elegante, fino y moderno.
========================================================= */

body {
    font-family: var(--sma-font);
}

.hero-platform .hero-title,
.hero-title {
    font-family: var(--sma-font);
    max-width: 760px;
    font-weight: 700;
    font-size: clamp(3.4rem, 6.2vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #123d6a;
}

/* Da más aire al texto cuando el título es más corto */
.hero-platform .hero-subtitle {
    max-width: 690px;
    margin-top: 8px;
}

/* =========================================================
   SMA AMANALCO - HERO ANIMACIÓN V4.0
   Constelación ciudadana fina, elegante y ligera.
========================================================= */

/* Hero más limpio y premium */
.hero-platform {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 166, 0.16), transparent 28%),
        radial-gradient(circle at 88% 22%, rgba(255, 224, 138, 0.20), transparent 30%),
        radial-gradient(circle at 72% 82%, rgba(18, 61, 106, 0.10), transparent 36%),
        linear-gradient(135deg, #f9fffd 0%, #ecfbfa 45%, #fffaf0 100%);
}

/* Contenedor general de la constelación */
.civic-constellation-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.84;
}

/* SVG de fondo */
.civic-constellation-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Líneas principales: más finas, menos pesadas */
.civic-lines path {
    fill: none;
    stroke: url(#civicLineGradient);
    stroke-width: 0.95;
    stroke-linecap: round;
    stroke-dasharray: 3 14;
    opacity: 0.42;
    animation: civicLineFlow 22s linear infinite;
}

/* Líneas secundarias: casi atmosféricas */
.civic-soft-lines path {
    fill: none;
    stroke: #176b92;
    stroke-width: 0.7;
    stroke-linecap: round;
    stroke-dasharray: 2 18;
    opacity: 0.18;
    animation: civicLineFlowReverse 30s linear infinite;
}

/* Nodos pequeños y elegantes */
.civic-nodes circle {
    fill: url(#civicNodeGradient);
    stroke: rgba(18, 61, 106, 0.24);
    stroke-width: 1.7;
    filter:
        drop-shadow(0 6px 10px rgba(18, 61, 106, 0.14))
        drop-shadow(0 0 8px rgba(14, 165, 166, 0.18));
    animation: civicNodePulse 4.8s ease-in-out infinite;
}

.civic-nodes circle:nth-child(2n) {
    animation-delay: 0.9s;
}

.civic-nodes circle:nth-child(3n) {
    animation-delay: 1.6s;
}

/* Puntos de datos muy discretos */
.civic-data-points circle {
    fill: #c9972b;
    stroke: #ffffff;
    stroke-width: 1.4;
    opacity: 0.74;
    filter:
        drop-shadow(0 0 8px rgba(201, 151, 43, 0.36))
        drop-shadow(0 5px 10px rgba(18, 61, 106, 0.12));
}

/* Luces sutiles para dar profundidad */
.civic-light {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(14, 165, 166, 0.65);
    box-shadow:
        0 0 0 8px rgba(14, 165, 166, 0.07),
        0 0 22px rgba(14, 165, 166, 0.28);
    animation: civicLightFloat 7s ease-in-out infinite;
}

.civic-light-one {
    top: 24%;
    left: 12%;
}

.civic-light-two {
    top: 33%;
    right: 16%;
    background: rgba(201, 151, 43, 0.72);
    box-shadow:
        0 0 0 8px rgba(201, 151, 43, 0.08),
        0 0 22px rgba(201, 151, 43, 0.30);
    animation-delay: 1.2s;
}

.civic-light-three {
    bottom: 22%;
    right: 28%;
    animation-delay: 2s;
}

/* Asegura que el contenido quede por encima */
.hero-content {
    position: relative;
    z-index: 3;
}

/* Animaciones finas */
@keyframes civicLineFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -220;
    }
}

@keyframes civicLineFlowReverse {
    from {
        stroke-dashoffset: -180;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes civicNodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.14);
        opacity: 0.96;
    }
}

@keyframes civicLightFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.68;
    }

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Apaga visualmente la versión anterior si todavía quedó en el HTML por error */
.integrity-mesh-bg {
    display: none !important;
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .civic-lines path,
    .civic-soft-lines path,
    .civic-nodes circle,
    .civic-light {
        animation: none !important;
    }

    .civic-data-points {
        display: none !important;
    }
}

/* =========================================================
   SMA AMANALCO - NÚCLEO DIGITAL V4.1
   Nuevo aspecto premium del panel derecho del hero.
   Mejora bordes, profundidad, color y contraste sin afectar el logo.
========================================================= */

/* Panel principal del Núcleo Digital */
.platform-panel {
    position: relative;
    padding: 34px;
    border-radius: 42px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(232, 249, 250, 0.58)),
        radial-gradient(circle at top right, rgba(255, 224, 138, 0.22), transparent 34%),
        radial-gradient(circle at bottom left, rgba(14, 165, 166, 0.16), transparent 36%);
    border: 1px solid rgba(14, 165, 166, 0.22);
    box-shadow:
        0 34px 90px rgba(18, 61, 106, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.68) inset;
    backdrop-filter: blur(20px);
    overflow: hidden;
}

/* Borde luminoso animado, muy sutil */
.platform-panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 44px;
    padding: 2px;
    background:
        linear-gradient(
            135deg,
            rgba(14, 165, 166, 0.55),
            rgba(255, 224, 138, 0.60),
            rgba(18, 61, 106, 0.42),
            rgba(14, 165, 166, 0.55)
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.72;
    pointer-events: none;
    animation: platformBorderGlow 8s ease-in-out infinite;
}

/* Luz interna elegante */
.platform-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(255, 224, 138, 0.18);
    filter: blur(10px);
    pointer-events: none;
}

/* Mantiene el contenido por encima de las capas visuales */
.platform-panel > * {
    position: relative;
    z-index: 2;
}

/* Encabezado "Núcleo digital SMA" */
.platform-panel-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #123d6a;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(223, 246, 245, 0.78));
    border: 1px solid rgba(14, 165, 166, 0.22);
    box-shadow: 0 16px 34px rgba(18, 61, 106, 0.10);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

/* Punto indicador del encabezado */
.platform-panel-header span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0ea5a6;
    box-shadow:
        0 0 0 6px rgba(14, 165, 166, 0.13),
        0 0 18px rgba(14, 165, 166, 0.50);
}

/* Zona del logo: sin fondo duro, solo aire y protección visual */
.platform-logo-zone {
    max-width: 470px;
    margin: 30px auto 30px;
    padding: 10px 4px;
}

/* El logo se conserva original; solo se mejora su presencia */
.platform-logo {
    width: 100%;
    max-width: 455px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter:
        drop-shadow(0 16px 24px rgba(18, 61, 106, 0.16))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78));
}

/* Texto inferior del panel */
.platform-panel p {
    color: rgba(31, 47, 61, 0.76);
    line-height: 1.72;
    font-size: 0.96rem;
}

/* Tarjetas internas del núcleo digital */
.platform-tools-grid {
    gap: 14px;
    margin: 18px 0 24px;
}

/* Tarjetas con apariencia más tecnológica y premium */
.platform-tool-card {
    position: relative;
    padding: 17px 17px 16px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 249, 250, 0.70));
    border: 1px solid rgba(14, 165, 166, 0.18);
    box-shadow:
        0 18px 42px rgba(18, 61, 106, 0.11),
        inset 0 0 0 1px rgba(255, 255, 255, 0.56);
    overflow: hidden;
}

/* Barra lateral elegante de cada tarjeta */
.platform-tool-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #0ea5a6, #ffe08a, #176b92);
}

/* Efecto superior muy sutil */
.platform-tool-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -42px;
    top: -42px;
    border-radius: 50%;
    background: rgba(255, 224, 138, 0.16);
    pointer-events: none;
}

.platform-tool-card:hover {
    transform: translateY(-5px);
    border-color: rgba(201, 151, 43, 0.34);
    box-shadow:
        0 26px 64px rgba(18, 61, 106, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

/* Número de cada herramienta */
.platform-tool-card span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #123d6a, #176b92, #0ea5a6);
    box-shadow: 0 12px 28px rgba(18, 61, 106, 0.18);
}

/* Título de cada herramienta */
.platform-tool-card strong {
    color: #123d6a;
    font-size: 0.98rem;
    font-weight: 950;
}

/* Descripción */
.platform-tool-card small {
    color: rgba(31, 47, 61, 0.66);
    font-weight: 750;
}

/* Animación del borde */
@keyframes platformBorderGlow {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.90;
    }
}

/* =========================================================
   CÍVICA INTEGRA 360 / SMA AMANALCO - VISTA CONÓCENOS V1
   Estilos exclusivos para páginas internas del Frontoffice.
========================================================= */

.ci360-page {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 166, 0.12), transparent 28%),
        linear-gradient(180deg, var(--sma-perla), var(--sma-humo));
    overflow: hidden;
}

.ci360-inner-hero {
    position: relative;
    padding: 168px 0 96px;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 224, 138, 0.24), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(14, 165, 166, 0.26), transparent 32%),
        linear-gradient(135deg, #07162f 0%, #123d6a 52%, #176b92 100%);
    overflow: hidden;
}

.ci360-inner-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.26;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}

.ci360-inner-hero .container {
    position: relative;
    z-index: 2;
}

.ci360-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    font-size: 0.84rem;
    font-weight: 900;
}

.ci360-breadcrumb a {
    color: var(--sma-dorado-claro);
}

.ci360-breadcrumb span {
    color: rgba(255, 255, 255, 0.72);
}

.ci360-inner-hero h1 {
    max-width: 820px;
    margin: 0 0 24px;
    color: #ffffff;
    font-size: clamp(2.45rem, 5vw, 5rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ci360-inner-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.78;
}

.ci360-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.btn-sma-outline {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.btn-sma-outline:hover {
    color: var(--sma-azul-profundo);
    background: #ffffff;
    border-color: #ffffff;
}

.ci360-platform-card {
    position: relative;
    padding: 34px;
    border-radius: 34px;
    color: var(--sma-grafito);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 224, 138, 0.28);
    box-shadow: 0 34px 90px rgba(5, 21, 37, 0.28);
    overflow: hidden;
}

.ci360-platform-card::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 7px;
    background: linear-gradient(90deg, var(--sma-azul-profundo), var(--sma-turquesa), var(--sma-dorado-claro));
}

.ci360-platform-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    right: -88px;
    bottom: -88px;
    border-radius: 50%;
    background: rgba(14, 165, 166, 0.16);
}

.ci360-platform-card img {
    position: relative;
    width: 100%;
    max-width: 330px;
    display: block;
    margin: 0 auto 26px;
    filter: drop-shadow(0 14px 20px rgba(18, 61, 106, 0.16));
}

.ci360-platform-card span {
    position: relative;
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--sma-dorado);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.ci360-platform-card h2 {
    position: relative;
    margin: 0 0 12px;
    color: var(--sma-azul-profundo);
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.ci360-platform-card p {
    position: relative;
    color: var(--sma-gris);
}

.ci360-platform-tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.ci360-platform-tags strong {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--sma-azul-profundo);
    background: rgba(14, 165, 166, 0.10);
    border: 1px solid rgba(14, 165, 166, 0.18);
    font-size: 0.78rem;
    font-weight: 950;
}

.ci360-section {
    background: linear-gradient(180deg, #ffffff, var(--sma-humo));
}

.ci360-section-alt {
    background:
        radial-gradient(circle at top left, rgba(255, 224, 138, 0.20), transparent 28%),
        linear-gradient(180deg, var(--sma-humo), #ffffff);
}

.ci360-mini-card {
    height: 100%;
    padding: 30px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 22px 58px rgba(18, 61, 106, 0.10);
    transition: all 0.28s ease;
}

.ci360-mini-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 76px rgba(18, 61, 106, 0.16);
}

.ci360-mini-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-azul), var(--sma-turquesa));
    box-shadow: 0 16px 34px rgba(18, 61, 106, 0.16);
}

.ci360-mini-card h3,
.ci360-org-main h3,
.ci360-org-card h3,
.ci360-timeline-item h3,
.ci360-member-card h3 {
    color: var(--sma-azul-profundo);
    font-weight: 950;
    letter-spacing: -0.025em;
}

.ci360-mini-card p,
.ci360-org-main p,
.ci360-org-card p,
.ci360-timeline-item p,
.ci360-member-card p {
    color: var(--sma-gris);
    line-height: 1.7;
}

.ci360-org-map {
    position: relative;
}

.ci360-org-main {
    max-width: 790px;
    margin: 0 auto 36px;
    padding: 34px;
    text-align: center;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(255, 224, 138, 0.24), transparent 34%),
        linear-gradient(135deg, #ffffff, #eefafa);
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 26px 70px rgba(18, 61, 106, 0.12);
}

.ci360-org-main span {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--sma-azul-profundo);
    background: rgba(255, 224, 138, 0.34);
    border: 1px solid rgba(201, 151, 43, 0.24);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ci360-org-line {
    width: 2px;
    height: 40px;
    margin: -18px auto 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--sma-turquesa), var(--sma-dorado-claro));
}

.ci360-org-card {
    position: relative;
    padding: 30px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 166, 0.12), transparent 32%),
        #ffffff;
    border: 1px solid rgba(18, 61, 106, 0.12);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.10);
    overflow: hidden;
}

.ci360-org-number {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 22px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 950;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-turquesa));
}

.ci360-timeline {
    display: grid;
    gap: 18px;
}

.ci360-timeline-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(14, 165, 166, 0.15);
    box-shadow: 0 18px 46px rgba(18, 61, 106, 0.08);
}

.ci360-timeline-item span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-turquesa));
}

.ci360-members-section {
    background:
        radial-gradient(circle at bottom left, rgba(14, 165, 166, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff, var(--sma-marfil));
}

.ci360-member-card {
    height: 100%;
    padding: 30px;
    text-align: center;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(201, 151, 43, 0.18);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.10);
}

.ci360-member-avatar {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 26px;
    color: #ffffff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--sma-azul-profundo), var(--sma-azul), var(--sma-turquesa));
    box-shadow: 0 18px 40px rgba(18, 61, 106, 0.20);
}

.ci360-member-card span {
    display: inline-flex;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--sma-azul-profundo);
    background: rgba(14, 165, 166, 0.10);
    font-size: 0.78rem;
    font-weight: 900;
}

.ci360-directory-card {
    padding: 32px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 224, 138, 0.20), transparent 30%),
        linear-gradient(135deg, #ffffff, #eefafa);
    border: 1px solid rgba(14, 165, 166, 0.16);
    box-shadow: 0 24px 64px rgba(18, 61, 106, 0.10);
}

.ci360-directory-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sma-azul-profundo);
    font-weight: 950;
}

.ci360-directory-card p {
    margin: 0;
    color: var(--sma-gris);
    line-height: 1.55;
}

.ci360-legal-section {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 166, 0.14), transparent 30%),
        linear-gradient(135deg, #07162f, #123d6a);
}

.ci360-legal-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 224, 138, 0.22);
    box-shadow: 0 30px 80px rgba(5, 21, 37, 0.20);
}

.ci360-legal-card h2 {
    color: var(--sma-azul-profundo);
    font-weight: 950;
    letter-spacing: -0.035em;
}

.ci360-legal-card p {
    color: var(--sma-gris);
    line-height: 1.78;
}

.ci360-legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.ci360-legal-card .btn-sma-outline {
    color: var(--sma-azul-profundo);
    border-color: rgba(18, 61, 106, 0.18);
    background: rgba(18, 61, 106, 0.04);
}

.ci360-legal-card .btn-sma-outline:hover {
    color: #ffffff;
    background: var(--sma-azul-profundo);
    border-color: var(--sma-azul-profundo);
}

/* =========================================================
   SMA AMANALCO - PRIMERA IMPRESIÓN V4.2
   Variante institucional azul marino eléctrico.
   Alcance: encabezado global y hero principal de inicio.
========================================================= */

:root {
    --sma-navy-950: #03142f;
    --sma-navy-900: #061d42;
    --sma-navy-850: #082752;
    --sma-electric: #1268ff;
    --sma-electric-soft: #48a6ff;
    --sma-cyan-accent: #16c7d4;
    --sma-gold-accent: #d7aa3f;
}

/* Tipografía funcional y menos pesada en la primera impresión */
.navbar-sma,
.hero-platform,
.hero-platform .btn,
.hero-tool-strip,
.platform-panel {
    font-family: var(--sma-font);
}

/* ---------------------------------------------------------
   ENCABEZADO: contraste alto, azul marino y navegación clara
--------------------------------------------------------- */
.site-header {
    background: transparent;
}

.navbar-sma {
    min-height: 108px;
    padding: 15px 0;
    background:
        linear-gradient(112deg, rgba(3, 20, 47, 0.99) 0%, rgba(6, 29, 66, 0.99) 52%, rgba(8, 39, 82, 0.98) 100%);
    border-bottom: 1px solid rgba(72, 166, 255, 0.34);
    box-shadow:
        0 18px 48px rgba(0, 8, 26, 0.32),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
}

.navbar-sma::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sma-electric), var(--sma-cyan-accent), var(--sma-gold-accent), transparent);
    opacity: 0.78;
    pointer-events: none;
}

.site-header.scrolled .navbar-sma {
    min-height: 88px;
    padding: 8px 0;
    background:
        linear-gradient(112deg, rgba(3, 20, 47, 0.995) 0%, rgba(6, 29, 66, 0.995) 58%, rgba(8, 39, 82, 0.99) 100%);
    border-bottom-color: rgba(72, 166, 255, 0.42);
    box-shadow: 0 18px 54px rgba(0, 8, 26, 0.42);
}

.brand-sma-wide {
    min-width: 270px;
    padding: 9px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow:
        0 14px 34px rgba(0, 9, 28, 0.25),
        inset 0 0 0 1px rgba(3, 20, 47, 0.05);
}

.brand-logo-horizontal {
    width: min(100%, 310px);
    filter: none;
}

.nav-sma-list {
    gap: 7px;
}

.navbar-sma .nav-link {
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px !important;
    color: rgba(255, 255, 255, 0.91);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.navbar-sma .nav-link:hover,
.navbar-sma .nav-link.active,
.navbar-sma .dropdown.show > .nav-link {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(18, 104, 255, 0.86), rgba(22, 199, 212, 0.68));
    border-color: rgba(113, 193, 255, 0.72);
    box-shadow:
        0 10px 26px rgba(18, 104, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.navbar-sma .nav-link::after {
    background: linear-gradient(90deg, var(--sma-electric-soft), var(--sma-cyan-accent));
}

.nav-icon {
    color: #ffffff;
    background: rgba(72, 166, 255, 0.12);
    border-color: rgba(72, 166, 255, 0.20);
}

.navbar-sma .nav-link:hover .nav-icon,
.navbar-sma .nav-link.active .nav-icon,
.navbar-sma .dropdown.show .nav-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
}

.dropdown-menu-sma {
    margin-top: 12px !important;
    padding: 10px;
    border-radius: 17px;
    background: rgba(3, 20, 47, 0.985);
    border: 1px solid rgba(72, 166, 255, 0.26);
    box-shadow: 0 22px 54px rgba(0, 8, 26, 0.40);
    backdrop-filter: blur(18px);
}

.dropdown-menu-sma .dropdown-item {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 11px;
    font-size: 0.78rem;
    font-weight: 600;
}

.dropdown-menu-sma .dropdown-item:hover,
.dropdown-menu-sma .dropdown-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(18, 104, 255, 0.80), rgba(22, 199, 212, 0.54));
}

.menu-toggle {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(72, 166, 255, 0.42);
}

.menu-toggle span {
    background: #ffffff;
}

/* ---------------------------------------------------------
   HERO: fondo marino eléctrico, títulos blancos y menor peso
--------------------------------------------------------- */
.hero-platform {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 22%, rgba(18, 104, 255, 0.30), transparent 31%),
        radial-gradient(circle at 84% 21%, rgba(22, 199, 212, 0.17), transparent 28%),
        radial-gradient(circle at 73% 84%, rgba(72, 166, 255, 0.13), transparent 34%),
        linear-gradient(125deg, var(--sma-navy-950) 0%, var(--sma-navy-900) 48%, var(--sma-navy-850) 100%);
}

.hero-platform::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 92%);
}

.hero-content {
    padding-top: 108px;
}

.hero-platform .hero-title,
.hero-title {
    max-width: 760px;
    margin-bottom: 25px;
    color: #ffffff;
    font-family: var(--sma-font);
    font-size: clamp(3.20rem, 5.55vw, 5.65rem);
    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -0.052em;
    text-shadow: 0 18px 44px rgba(0, 7, 24, 0.38);
}

.hero-platform .hero-subtitle {
    max-width: 700px;
    margin-top: 0;
    margin-bottom: 31px;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    font-weight: 400;
    line-height: 1.78;
}

.hero-actions-marco {
    max-width: 470px;
}

.btn-marco-normativo {
    min-height: 72px;
    width: 100%;
    border: 1px solid rgba(255, 226, 151, 0.62);
    background: linear-gradient(135deg, #e4b84d 0%, #c99324 100%);
    box-shadow:
        0 18px 42px rgba(201, 147, 36, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.btn-marco-normativo:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #f0c861 0%, #d7a337 100%);
    box-shadow: 0 22px 52px rgba(201, 147, 36, 0.34);
}

.btn-marco-normativo__label {
    color: #071b3d;
    font-family: var(--sma-font);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.btn-marco-normativo__sub {
    color: rgba(7, 27, 61, 0.74);
    font-family: var(--sma-font);
    font-weight: 600;
}

.hero-tool-strip {
    gap: 9px;
    margin-top: 25px;
}

.hero-tool-strip a {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(103, 180, 255, 0.24);
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 0.79rem;
    font-weight: 500;
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.hero-tool-strip a:hover {
    color: #ffffff;
    background: rgba(18, 104, 255, 0.28);
    border-color: rgba(72, 166, 255, 0.64);
    box-shadow: 0 12px 26px rgba(18, 104, 255, 0.18);
}

/* Constelación adaptada al fondo oscuro */
.civic-constellation-bg {
    opacity: 0.50;
}

.civic-lines path {
    stroke: rgba(72, 166, 255, 0.64);
    opacity: 0.45;
}

.civic-soft-lines path {
    stroke: rgba(22, 199, 212, 0.54);
    opacity: 0.24;
}

.civic-nodes circle {
    fill: #ffffff;
    stroke: rgba(72, 166, 255, 0.82);
    filter: drop-shadow(0 0 12px rgba(72, 166, 255, 0.44));
}

.civic-data-points circle {
    fill: var(--sma-gold-accent);
}

.civic-light {
    background: var(--sma-electric-soft);
    box-shadow: 0 0 0 8px rgba(72, 166, 255, 0.08), 0 0 24px rgba(72, 166, 255, 0.42);
}

/* ---------------------------------------------------------
   NÚCLEO DIGITAL: cristal oscuro y logo perfectamente legible
--------------------------------------------------------- */
.platform-panel {
    min-height: 520px;
    padding: 31px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(22, 199, 212, 0.12), transparent 31%),
        linear-gradient(145deg, rgba(6, 29, 66, 0.94), rgba(3, 20, 47, 0.88));
    border: 1px solid rgba(72, 166, 255, 0.30);
    box-shadow:
        0 36px 88px rgba(0, 7, 25, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px);
}

.platform-panel::before {
    opacity: 0.42;
    background: linear-gradient(135deg, rgba(18, 104, 255, 0.72), rgba(22, 199, 212, 0.52), rgba(215, 170, 63, 0.42), rgba(18, 104, 255, 0.72));
}

.platform-panel::after {
    background: rgba(18, 104, 255, 0.16);
}

.platform-panel-header {
    color: rgba(255, 255, 255, 0.91);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(72, 166, 255, 0.28);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 600;
}

.platform-panel-header span {
    background: var(--sma-cyan-accent);
    box-shadow: 0 0 0 6px rgba(22, 199, 212, 0.10), 0 0 18px rgba(22, 199, 212, 0.44);
}

.platform-logo-zone {
    max-width: 475px;
    margin: 26px auto 25px;
    padding: 22px 20px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 20px 44px rgba(0, 8, 28, 0.24),
        inset 0 0 0 1px rgba(3, 20, 47, 0.04);
}

.platform-logo {
    max-width: 430px;
    filter: none;
}

.platform-tools-grid {
    gap: 12px;
    margin: 16px 0 22px;
}

.platform-tool-card {
    min-height: 116px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(72, 166, 255, 0.065));
    border: 1px solid rgba(72, 166, 255, 0.22);
    box-shadow: none;
}

.platform-tool-card::before {
    background: linear-gradient(180deg, var(--sma-electric-soft), var(--sma-cyan-accent));
}

.platform-tool-card::after {
    background: rgba(215, 170, 63, 0.10);
}

.platform-tool-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(18, 104, 255, 0.24), rgba(22, 199, 212, 0.13));
    border-color: rgba(72, 166, 255, 0.56);
    box-shadow: 0 16px 34px rgba(0, 8, 28, 0.22);
}

.platform-tool-card span {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sma-electric), #0e4fb9);
    font-weight: 700;
}

.platform-tool-card strong {
    color: #ffffff;
    font-weight: 600;
}

.platform-tool-card small {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 400;
}

.platform-panel p {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.91rem;
    font-weight: 400;
    line-height: 1.72;
}

/* ---------------------------------------------------------
   RESPONSIVE DEL NUEVO HERO Y HEADER
--------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .navbar-sma {
        min-height: 92px;
    }

    .brand-sma-wide {
        min-width: 245px;
        max-width: 300px;
    }

    .navbar-collapse {
        margin-top: 14px;
        padding: 16px;
        border-radius: 20px;
        background: rgba(3, 20, 47, 0.98);
        border: 1px solid rgba(72, 166, 255, 0.22);
        box-shadow: 0 20px 48px rgba(0, 8, 26, 0.36);
    }

    .navbar-sma .nav-link {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 6px;
    }

    .hero-content {
        padding-top: 116px;
    }
}

@media (max-width: 991.98px) {
    .hero-platform .row {
        padding-top: 54px;
        padding-bottom: 68px;
    }

    .hero-platform .hero-title,
    .hero-title {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(3rem, 8.8vw, 5rem);
    }

    .hero-platform .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions-marco {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-tool-strip {
        justify-content: center;
    }

    .platform-panel {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .navbar-sma {
        min-height: 80px;
        padding: 9px 0;
    }

    .brand-sma-wide {
        min-width: 0;
        width: calc(100% - 64px);
        max-width: 255px;
        padding: 7px 10px;
        border-radius: 14px;
    }

    .hero-content {
        padding-top: 96px;
    }

    .hero-platform .hero-title,
    .hero-title {
        font-size: clamp(2.55rem, 13.2vw, 3.75rem);
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .hero-platform .hero-subtitle {
        font-size: 0.98rem;
        line-height: 1.68;
    }

    .btn-marco-normativo {
        min-height: 68px;
    }

    .hero-tool-strip a {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    .platform-panel {
        padding: 22px;
        border-radius: 26px;
    }

    .platform-logo-zone {
        padding: 17px 13px;
        border-radius: 20px;
    }
}

/* =========================================================
   AJUSTE V0.02 - HEADER + HERO CON TONALIDAD INSTITUCIONAL
   Solicitud del usuario:
   - Header con el tono del footer inferior y retícula sutil.
   - Hero con el tono del bloque superior del footer.
   - Mayor contraste para el núcleo digital SMA.
   - Mantener botón Marco Normativo y tipografía actual.
========================================================= */

body {
    font-family: var(--sma-font);
}

/* HEADER OSCURO CON RETÍCULA SUTIL */
.navbar-sma {
    position: relative;
    background:
        linear-gradient(135deg, rgba(6, 35, 78, 0.97) 0%, rgba(12, 57, 112, 0.96) 100%) !important;
    border-bottom: 1px solid rgba(125, 175, 255, 0.18) !important;
    box-shadow: 0 16px 42px rgba(4, 17, 39, 0.28) !important;
    overflow: hidden;
}

.navbar-sma::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.28;
    pointer-events: none;
}

.site-header.scrolled .navbar-sma {
    background:
        linear-gradient(135deg, rgba(5, 30, 66, 0.985) 0%, rgba(10, 52, 102, 0.98) 100%) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.35) !important;
}

.navbar-sma .container,
.navbar-sma .navbar-collapse,
.navbar-sma .nav-sma-list,
.navbar-sma .brand-sma {
    position: relative;
    z-index: 2;
}

.brand-logo-horizontal {
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
}

.navbar-sma .nav-link {
    color: rgba(255,255,255,0.94) !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.navbar-sma .nav-link .nav-icon {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.navbar-sma .nav-link .nav-icon svg,
.navbar-sma .nav-link .nav-icon svg path,
.navbar-sma .nav-link .nav-icon svg circle {
    stroke: #ffffff !important;
}

.navbar-sma .nav-link:hover,
.navbar-sma .nav-link.active,
.navbar-sma .dropdown.show > .nav-link {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2794ff 0%, #18b8d8 100%) !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 14px 28px rgba(19, 124, 239, 0.30);
}

.navbar-sma .nav-link:hover .nav-icon,
.navbar-sma .nav-link.active .nav-icon,
.navbar-sma .dropdown.show > .nav-link .nav-icon {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.24) !important;
}

.menu-toggle {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

.menu-toggle span {
    background: #ffffff !important;
}

.dropdown-menu-sma {
    background: rgba(8, 28, 62, 0.97) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.26) !important;
    backdrop-filter: blur(16px);
}

.dropdown-menu-sma .dropdown-item {
    color: rgba(255,255,255,0.90) !important;
}

.dropdown-menu-sma .dropdown-item:hover,
.dropdown-menu-sma .dropdown-item:focus,
.dropdown-menu-sma .dropdown-item.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(39, 148, 255, 0.85), rgba(24, 184, 216, 0.85)) !important;
}

/* HERO CON TONO DEL BLOQUE SUPERIOR DEL FOOTER */
.hero-platform {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.08), transparent 18%),
        radial-gradient(circle at 85% 16%, rgba(212, 236, 255, 0.10), transparent 22%),
        linear-gradient(115deg, #0f4670 0%, #164f7a 38%, #2a7386 100%) !important;
}

.hero-platform::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.28;
    pointer-events: none;
}

.hero-platform .hero-title,
.hero-platform .hero-subtitle,
.hero-platform .hero-actions,
.hero-tool-strip,
.platform-panel {
    position: relative;
    z-index: 2;
}

.hero-platform .hero-title {
    color: #ffffff !important;
    text-shadow: 0 10px 32px rgba(5, 22, 46, 0.22);
}

.hero-platform .hero-subtitle {
    color: rgba(255,255,255,0.82) !important;
}

.hero-tool-strip a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    box-shadow: 0 12px 24px rgba(5, 22, 46, 0.12) !important;
}

.hero-tool-strip a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(39,148,255,0.95), rgba(24,184,216,0.95)) !important;
}

.hero-platform-glow-one {
    background: rgba(255,255,255,0.10) !important;
}

.hero-platform-glow-two {
    background: rgba(57, 214, 208, 0.14) !important;
}

/* PANEL NÚCLEO DIGITAL MÁS VISIBLE */
.platform-panel {
    min-height: 520px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244, 250, 253, 0.92)) !important;
    border: 1px solid rgba(255,255,255,0.36) !important;
    box-shadow: 0 34px 90px rgba(5, 22, 46, 0.22) !important;
    backdrop-filter: blur(18px);
}

.platform-panel::before {
    background:
        radial-gradient(circle at 100% 0%, rgba(39,148,255,0.14), transparent 32%),
        radial-gradient(circle at 0% 100%, rgba(24,184,216,0.10), transparent 36%),
        radial-gradient(circle at 50% 50%, rgba(201,151,43,0.08), transparent 40%) !important;
    animation: none !important;
    inset: 0 !important;
}

.platform-panel::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 30px;
    border: 1px solid rgba(13, 74, 120, 0.08);
    pointer-events: none;
}

.platform-panel-header {
    background: linear-gradient(135deg, rgba(17, 73, 116, 0.08), rgba(22, 184, 216, 0.10)) !important;
    border: 1px solid rgba(17, 73, 116, 0.12) !important;
    color: #0d4876 !important;
    font-weight: 700;
}

.platform-panel-header span {
    background: #18b8d8 !important;
    box-shadow: 0 0 0 6px rgba(24, 184, 216, 0.14) !important;
}

.platform-logo-zone {
    padding: 14px 16px;
    border-radius: 26px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(13, 74, 120, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.platform-panel p {
    color: rgba(20, 46, 69, 0.82) !important;
}

.platform-tool-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(241,247,251,0.88)) !important;
    border: 1px solid rgba(15, 70, 112, 0.12) !important;
    box-shadow: 0 16px 32px rgba(8, 32, 56, 0.10) !important;
}

.platform-tool-card::before,
.platform-tool-card::after {
    opacity: 0.7;
}

.platform-tool-card span {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0f4670 0%, #2b84a0 100%) !important;
    box-shadow: 0 10px 22px rgba(15, 70, 112, 0.22);
}

.platform-tool-card strong {
    color: #0e3d69 !important;
}

.platform-tool-card small {
    color: rgba(20, 46, 69, 0.70) !important;
}

.platform-tool-card:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,254,0.94)) !important;
    box-shadow: 0 22px 40px rgba(8, 32, 56, 0.14) !important;
}

@media (max-width: 1199.98px) {
    .navbar-sma {
        padding: 12px 0 !important;
    }

    .navbar-sma .navbar-collapse {
        margin-top: 14px;
        padding: 12px;
        border-radius: 22px;
        background: rgba(7, 30, 65, 0.94);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 20px 42px rgba(0,0,0,0.22);
    }

    .nav-sma-list {
        gap: 10px !important;
    }
}

@media (max-width: 767.98px) {
    .hero-platform {
        background: linear-gradient(145deg, #0f4670 0%, #1a597f 55%, #2c7a89 100%) !important;
    }

    .platform-panel {
        min-height: auto;
        padding: 26px 22px;
    }

    .platform-logo-zone {
        padding: 12px;
    }
}

/* =========================================================
   AJUSTE V0.03 - RED DE DATOS MÁS IMPACTANTE EN EL HERO
   Se sustituyen los círculos móviles por balizas de integridad
   y paquetes de datos tipo diamante, inspirados en una red
   digital institucional con mayor presencia visual.
========================================================= */

/* Atenuamos cualquier punto circular anterior */
.civic-data-points circle {
    display: none !important;
}

/* Fondo de constelación con mayor presencia */
.civic-constellation-bg {
    opacity: 0.68 !important;
}

.civic-lines path {
    stroke-width: 1.45 !important;
    stroke-dasharray: 6 11 !important;
    animation: civicFlowLines 18s linear infinite;
}

.civic-soft-lines path {
    stroke-width: 1.1 !important;
    stroke-dasharray: 4 12 !important;
    animation: civicFlowLinesSoft 24s linear infinite;
}

.civic-nodes circle {
    r: 4.5;
    fill: rgba(230, 244, 255, 0.94) !important;
    stroke: rgba(109, 192, 255, 0.95) !important;
    stroke-width: 1.35;
    filter: drop-shadow(0 0 8px rgba(48, 161, 255, 0.34));
}

/* Balizas estáticas con anillos pulsantes */
.civic-beacons .beacon-ring {
    fill: none;
    stroke-width: 1.45;
}

.civic-beacons .beacon-ring-one {
    stroke: rgba(93, 193, 255, 0.54);
}

.civic-beacons .beacon-ring-two {
    stroke: rgba(32, 215, 217, 0.34);
}

.civic-beacons .beacon-core {
    fill: rgba(255, 255, 255, 0.92);
    stroke: rgba(76, 180, 255, 0.92);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 12px rgba(76, 180, 255, 0.42));
}

.civic-beacons .beacon-dot {
    fill: #d4f3ff;
    filter: drop-shadow(0 0 10px rgba(117, 209, 255, 0.72));
}

/* Paquetes de datos en movimiento */
.civic-data-packets .packet {
    opacity: 0.98;
}

.civic-data-packets .packet-shell {
    fill: rgba(255, 255, 255, 0.12);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 12px rgba(72, 166, 255, 0.46));
}

.civic-data-packets .packet-tail {
    opacity: 0.78;
}

.civic-data-packets .packet-core {
    fill: #ffffff;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95));
}

.civic-data-packets .packet-a .packet-shell {
    stroke: rgba(94, 188, 255, 0.94);
    fill: rgba(94, 188, 255, 0.18);
}

.civic-data-packets .packet-a .packet-tail {
    fill: rgba(94, 188, 255, 0.54);
}

.civic-data-packets .packet-b .packet-shell {
    stroke: rgba(23, 214, 214, 0.92);
    fill: rgba(23, 214, 214, 0.16);
}

.civic-data-packets .packet-b .packet-tail {
    fill: rgba(23, 214, 214, 0.44);
}

.civic-data-packets .packet-c .packet-shell {
    stroke: rgba(226, 186, 84, 0.92);
    fill: rgba(226, 186, 84, 0.18);
}

.civic-data-packets .packet-c .packet-tail {
    fill: rgba(226, 186, 84, 0.46);
}

/* Realce adicional de luces ambientales */
.civic-light {
    width: 10px !important;
    height: 10px !important;
    box-shadow:
        0 0 0 10px rgba(72, 166, 255, 0.06),
        0 0 26px rgba(72, 166, 255, 0.42),
        0 0 48px rgba(22, 199, 212, 0.16) !important;
}

@keyframes civicFlowLines {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -120;
    }
}

@keyframes civicFlowLinesSoft {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 160;
    }
}

@media (max-width: 991.98px) {
    .civic-beacons {
        opacity: 0.78;
    }

    .civic-data-packets .packet-shell {
        filter: drop-shadow(0 0 9px rgba(72, 166, 255, 0.34));
    }
}

@media (max-width: 767.98px) {
    .civic-beacons .beacon-ring-two,
    .packet.packet-c {
        display: none;
    }

    .civic-lines path {
        stroke-width: 1.2 !important;
    }
}

/* =========================================================
   AJUSTE V0.04 - COMPACTACIÓN DEL HERO Y HEADER RESPONSIVE
   - Se elimina la tira de botones debajo de Marco Normativo.
   - Se compacta la tarjeta Núcleo digital SMA.
   - Se reduce la altura visual del hero.
   - Se corrige el crecimiento del logo en responsive al hacer scroll.
========================================================= */

/* Eliminar visualmente la botonera inferior del hero */
.hero-tool-strip {
    display: none !important;
}

/* Hero más compacto */
.hero-content {
    padding-top: 98px !important;
}

.hero-platform {
    scroll-margin-top: 104px;
}

.hero-platform .hero-main-row {
    min-height: calc(100vh - 120px);
    padding-top: 26px;
    padding-bottom: 16px;
}

.hero-platform .hero-title {
    margin-bottom: 20px !important;
}

.hero-platform .hero-subtitle {
    margin-bottom: 24px !important;
}

.hero-actions-marco {
    margin-top: 0 !important;
}

/* Tarjeta Núcleo digital más compacta */
.platform-panel {
    min-height: 410px !important;
    padding: 24px 24px 22px !important;
    border-radius: 30px !important;
}

.platform-panel::after {
    inset: 12px !important;
    border-radius: 24px !important;
}

.platform-panel-header {
    margin-bottom: 18px !important;
}

.platform-logo-zone {
    display: none !important;
}

.platform-tools-grid {
    margin: 4px 0 14px !important;
    gap: 10px !important;
}

.platform-tool-card {
    min-height: 98px !important;
    padding: 14px 14px 13px !important;
    border-radius: 18px !important;
}

.platform-tool-card span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
}

.platform-tool-card strong {
    font-size: 0.94rem !important;
}

.platform-tool-card small {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
}

.platform-panel p {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.62 !important;
}

/* Header responsive estable */
.brand-sma-wide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    flex: 0 0 auto;
}

.brand-logo-horizontal,
.site-header.scrolled .brand-logo-horizontal {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.site-header.scrolled .navbar-sma {
    min-height: auto !important;
}

@media (max-width: 991.98px) {
    .hero-content {
        padding-top: 104px !important;
    }

    .hero-platform .hero-main-row {
        min-height: auto;
        padding-top: 28px;
        padding-bottom: 22px;
    }

    .platform-panel {
        max-width: 680px;
    }
}

@media (max-width: 575.98px) {
    .navbar-sma {
        min-height: 76px !important;
        padding: 8px 0 !important;
    }

    .site-header.scrolled .navbar-sma {
        min-height: 72px !important;
        padding: 7px 0 !important;
    }

    .brand-sma-wide,
    .site-header.scrolled .brand-sma-wide {
        width: calc(100% - 68px) !important;
        max-width: 236px !important;
        min-width: 0 !important;
        padding: 6px 10px !important;
        border-radius: 14px !important;
    }

    .brand-logo-horizontal,
    .site-header.scrolled .brand-logo-horizontal {
        max-width: 214px !important;
        width: 100% !important;
        height: auto !important;
    }

    .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .hero-content {
        padding-top: 90px !important;
    }

    .hero-platform .hero-main-row {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .hero-platform .hero-title {
        font-size: clamp(2.36rem, 12vw, 3.45rem) !important;
        margin-bottom: 14px !important;
    }

    .hero-platform .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.58 !important;
        margin-bottom: 18px !important;
    }

    .btn-marco-normativo {
        min-height: 64px !important;
    }

    .platform-panel {
        padding: 20px 18px 18px !important;
        border-radius: 24px !important;
        min-height: auto !important;
    }

    .platform-panel-header {
        margin-bottom: 14px !important;
    }

    .platform-tools-grid {
        gap: 9px !important;
        margin-bottom: 12px !important;
    }

    .platform-tool-card {
        min-height: 88px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .platform-tool-card span {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }

    .platform-tool-card strong {
        font-size: 0.9rem !important;
    }

    .platform-tool-card small {
        font-size: 0.78rem !important;
    }

    .platform-panel p {
        font-size: 0.84rem !important;
        line-height: 1.54 !important;
    }
}

/* =========================================================
   AJUSTE V0.07 - CORRECCIÓN DEFINITIVA DE HERO Y HEADER
   Objetivos:
   1. El hero termina poco después del Núcleo digital, sin vacío inferior.
   2. El contenido conserva su composición natural y no se desplaza.
   3. El header permanece fijo y visible durante todo el scroll.
   4. El Núcleo digital mantiene un acabado premium y compacto.
========================================================= */

/* Header siempre visible y estable */
.site-header,
.site-header.scrolled {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10050 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.navbar-sma,
.site-header.scrolled .navbar-sma {
    overflow: visible !important;
}

/* El hero deja de forzar la altura total de la pantalla */
.hero-sma.hero-platform {
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
}

.hero-content {
    padding-top: 108px !important;
    padding-bottom: 0 !important;
}

.hero-platform .hero-main-row {
    min-height: auto !important;
    height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 30px !important;
    align-items: center !important;
}

.hero-platform .col-lg-7 {
    padding-top: 0 !important;
}

.hero-platform .hero-title {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.hero-platform .hero-subtitle {
    margin-bottom: 26px !important;
}

.hero-actions-marco {
    margin-top: 0 !important;
}

/* Núcleo digital premium, sin traslapes ni márgenes negativos */
.platform-panel {
    position: relative;
    min-height: 390px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 22px 22px 20px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(67, 180, 255, 0.13), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(218, 180, 70, 0.11), transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 253, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    box-shadow:
        0 30px 74px rgba(4, 25, 49, 0.20),
        0 10px 24px rgba(15, 91, 132, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    overflow: hidden !important;
}

.platform-panel::before {
    inset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.16), transparent 38%),
        radial-gradient(circle at 82% 86%, rgba(30, 153, 187, 0.08), transparent 34%) !important;
}

.platform-panel::after {
    content: "";
    position: absolute;
    inset: 12px !important;
    border-radius: 23px !important;
    border: 1px solid rgba(12, 77, 121, 0.08) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 22%) !important;
    pointer-events: none;
}

.platform-panel > * {
    position: relative;
    z-index: 2;
}

.platform-panel-header {
    margin-bottom: 16px !important;
}

.platform-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 2px 0 13px !important;
}

.platform-tool-card {
    min-height: 96px !important;
    padding: 14px 14px 12px !important;
    border-radius: 18px !important;
}

.platform-tool-card span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
}

.platform-tool-card strong {
    font-size: 0.93rem !important;
}

.platform-tool-card small {
    font-size: 0.79rem !important;
    line-height: 1.32 !important;
}

/* Franja premium vinculada a las primeras herramientas operativas */
.platform-premium-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 5px 0 11px !important;
    padding: 12px 13px;
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.11), transparent 35%),
        linear-gradient(135deg, #0b436f 0%, #17628a 58%, #25839a 100%);
    box-shadow: 0 16px 30px rgba(7, 39, 67, 0.16);
    overflow: hidden;
}

.platform-premium-strip::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -48px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.premium-status-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.premium-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #8ff1ff;
    box-shadow: 0 0 0 6px rgba(143, 241, 255, 0.11), 0 0 15px rgba(143, 241, 255, 0.48);
}

.premium-status-block strong {
    display: block;
    color: #ffffff;
    font-size: 0.80rem !important;
    font-weight: 800;
    line-height: 1.12;
}

.premium-status-block small {
    display: block;
    max-width: 260px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.70rem !important;
    line-height: 1.24;
}

.premium-chip-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.premium-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.68rem !important;
    font-weight: 700;
    white-space: nowrap;
}

.premium-chip-soft {
    color: #fff5d3;
    background: rgba(218, 180, 70, 0.17);
    border-color: rgba(218, 180, 70, 0.22);
}

.platform-panel p {
    margin: 3px 0 0 !important;
    color: rgba(20, 46, 69, 0.76) !important;
    font-size: 0.82rem !important;
    line-height: 1.50 !important;
}

/* La siguiente sección inicia poco después del panel, sin espacio artificial */
.systems-section {
    padding-top: 72px !important;
}

/* =========================================================
   AJUSTE V0.08 - SEPARACIÓN DEL NÚCLEO DIGITAL + TARJETAS PREMIUM
========================================================= */

/* Despegar ligeramente la tarjeta del header */
.platform-panel {
    margin-top: 18px !important;
}

/* Tarjetas internas con apariencia más premium */
.platform-tool-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(249,252,255,0.98) 58%, rgba(243,248,252,0.96) 100%) !important;
    border: 1px solid rgba(20, 87, 136, 0.12) !important;
    box-shadow:
        0 14px 30px rgba(7, 33, 58, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -10px 20px rgba(27, 121, 173, 0.02) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.platform-tool-card::before {
    width: 5px !important;
    opacity: 1 !important;
}

.platform-tool-card::after {
    width: 108px !important;
    height: 108px !important;
    top: -56px !important;
    right: -48px !important;
    background: radial-gradient(circle, rgba(220,186,83,0.18) 0%, rgba(220,186,83,0.10) 42%, transparent 72%) !important;
    opacity: 1 !important;
}

.platform-tool-card > * {
    position: relative;
    z-index: 2;
}

.platform-tool-card span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    box-shadow:
        0 12px 24px rgba(15, 70, 112, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.platform-tool-card strong {
    display: block;
    margin-top: 2px;
    letter-spacing: -0.01em;
    color: #123f69 !important;
}

.platform-tool-card small {
    display: block;
    font-weight: 700 !important;
    color: rgba(34, 65, 92, 0.66) !important;
}

.platform-tool-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(39, 128, 186, 0.18) !important;
    box-shadow:
        0 18px 38px rgba(7, 33, 58, 0.12),
        0 0 0 1px rgba(255,255,255,0.82) inset,
        inset 0 -12px 24px rgba(27, 121, 173, 0.04) !important;
}

/* Variaciones por tarjeta */
.platform-tool-card:nth-child(1)::before {
    background: linear-gradient(180deg, #0ea5d6, #7fdfff, #dcb553) !important;
}

.platform-tool-card:nth-child(2)::before {
    background: linear-gradient(180deg, #2fc8e8, #88e5f5, #c9a647) !important;
}

.platform-tool-card:nth-child(3)::before {
    background: linear-gradient(180deg, #0f9fb2, #6ce0d1, #d2b056) !important;
}

.platform-tool-card:nth-child(4)::before {
    background: linear-gradient(180deg, #1676b3, #6eb7f2, #d5b35f) !important;
}

.platform-tool-card:nth-child(1) span {
    background: linear-gradient(135deg, #0c6da2 0%, #1e9de0 100%) !important;
}

.platform-tool-card:nth-child(2) span {
    background: linear-gradient(135deg, #0b6990 0%, #22b9da 100%) !important;
}

.platform-tool-card:nth-child(3) span {
    background: linear-gradient(135deg, #087886 0%, #14b8a6 100%) !important;
}

.platform-tool-card:nth-child(4) span {
    background: linear-gradient(135deg, #164d90 0%, #2c8ef0 100%) !important;
}

/* =========================================================
   HOME V1.5 - JERARQUÍA PREMIUM Y RITMO HOMOLOGADO
   Recursos digitales, etiquetas institucionales y alturas.
========================================================= */

.home-main {
    overflow: clip;
}

/* Ritmo vertical uniforme en todas las secciones del inicio */
.home-main .home-featured,
.home-main .systems-section.section-padding,
.home-main .transparency-section.section-padding,
.home-main .participa-section.section-padding,
.home-main .observatorio-section.section-padding,
.home-main .denuncias-section.section-padding {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
}

.home-main .section-heading {
    margin-bottom: 34px;
}

/* Etiqueta única para todas las secciones del inicio */
.section-premium-tag,
.section-heading .section-premium-tag,
.home-featured-heading .section-premium-tag,
.orientacion-content .section-premium-tag {
    position: relative;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 8px 15px;
    border: 1px solid rgba(14, 165, 166, 0.20);
    border-radius: 999px;
    color: #123d6a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(224, 246, 247, 0.86));
    box-shadow:
        0 10px 24px rgba(18, 61, 106, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.section-premium-tag::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5a6, #c9972b);
    box-shadow:
        0 0 0 4px rgba(14, 165, 166, 0.10),
        0 4px 10px rgba(18, 61, 106, 0.16);
}

.section-premium-tag-inverse,
.orientacion-content .section-premium-tag-inverse {
    color: #fff4cf;
    border-color: rgba(255, 224, 138, 0.30);
    background: rgba(7, 34, 65, 0.30);
    box-shadow:
        0 12px 28px rgba(4, 25, 48, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.section-premium-tag-inverse::before {
    background: linear-gradient(135deg, #ffe08a, #0ea5a6);
    box-shadow: 0 0 0 4px rgba(255, 224, 138, 0.12);
}

/* Recursos digitales */
.home-featured {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(18, 61, 106, 0.06);
    border-bottom: 1px solid rgba(18, 61, 106, 0.07);
    background:
        radial-gradient(circle at 8% 12%, rgba(14, 165, 166, 0.08), transparent 28%),
        radial-gradient(circle at 92% 16%, rgba(201, 151, 43, 0.07), transparent 26%),
        linear-gradient(180deg, #f8fbfc 0%, #ffffff 52%, #f3f8fa 100%);
}

.home-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(18, 61, 106, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 61, 106, 0.025) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.home-featured .container {
    position: relative;
    z-index: 1;
}

.home-featured-heading {
    max-width: 790px;
    margin: 0 auto 32px;
    text-align: center;
}

.home-featured-heading h2 {
    margin: 0;
    color: #123d6a;
    font-size: clamp(2.05rem, 3.4vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.042em;
    text-shadow: 0 12px 28px rgba(18, 61, 106, 0.08);
}

.home-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.home-featured-card {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 360px;
    padding: 32px;
    overflow: hidden;
    grid-template-rows: auto 1fr auto;
    color: #183f60;
    border: 1px solid rgba(18, 61, 106, 0.12);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 8%, rgba(14, 165, 166, 0.10), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(242, 250, 251, 0.96));
    box-shadow:
        0 24px 58px rgba(18, 61, 106, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -18px 36px rgba(14, 165, 166, 0.025);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.home-featured-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    z-index: 2;
    background: linear-gradient(90deg, #0ea5a6, #176b92, #c9972b);
}

.home-featured-card::after {
    content: attr(data-index);
    position: absolute;
    right: 20px;
    bottom: -20px;
    z-index: -1;
    color: rgba(18, 61, 106, 0.045);
    font-size: 8rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.10em;
    pointer-events: none;
}

.home-featured-card-capsules {
    background:
        radial-gradient(circle at 91% 7%, rgba(201, 151, 43, 0.13), transparent 29%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(243, 249, 253, 0.97));
}

.home-featured-card-capsules::before {
    background: linear-gradient(90deg, #176b92, #0ea5a6, #c9972b);
}

.home-featured-card-capsules::after {
    color: rgba(201, 151, 43, 0.055);
}

.home-featured-card:hover {
    transform: translateY(-5px);
    border-color: rgba(14, 165, 166, 0.30);
    box-shadow:
        0 32px 72px rgba(18, 61, 106, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -18px 36px rgba(14, 165, 166, 0.035);
}

.home-featured-card-capsules:hover {
    border-color: rgba(201, 151, 43, 0.34);
}

.home-featured-card:focus-visible {
    outline: 3px solid rgba(201, 151, 43, 0.78);
    outline-offset: 4px;
}

.home-featured-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
}

.home-featured-icon {
    display: inline-flex;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #0d607b, #0ea5a6);
    box-shadow:
        0 16px 34px rgba(14, 113, 138, 0.24),
        0 0 0 8px rgba(14, 165, 166, 0.055);
}

.home-featured-card-capsules .home-featured-icon {
    background: linear-gradient(135deg, #123d6a, #247f9d);
    box-shadow:
        0 16px 34px rgba(18, 61, 106, 0.24),
        0 0 0 8px rgba(201, 151, 43, 0.055);
}

.home-featured-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-featured-card-capsules .home-featured-icon svg path:last-child {
    fill: currentColor;
    stroke: none;
}

.home-featured-status {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(14, 165, 166, 0.17);
    border-radius: 999px;
    color: #176b78;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(18, 61, 106, 0.06);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-featured-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ea5a6;
    box-shadow: 0 0 0 4px rgba(14, 165, 166, 0.10);
}

.home-featured-card-capsules .home-featured-status {
    color: #795816;
    border-color: rgba(201, 151, 43, 0.20);
}

.home-featured-card-capsules .home-featured-status > span {
    background: #c9972b;
    box-shadow: 0 0 0 4px rgba(201, 151, 43, 0.10);
}

.home-featured-card-copy {
    position: relative;
    z-index: 1;
    align-self: center;
}

.home-featured-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #0f8998;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-featured-card-capsules .home-featured-eyebrow {
    color: #9a711d;
}

.home-featured-card h3 {
    margin: 0 0 13px;
    color: #123d6a;
    font-size: clamp(1.8rem, 2.7vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.038em;
}

.home-featured-card-copy p {
    max-width: 520px;
    margin: 0;
    color: rgba(31, 64, 92, 0.73);
    font-size: 0.96rem;
    line-height: 1.68;
}

.home-featured-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 16px;
    padding: 7px 11px;
    border: 1px solid rgba(201, 151, 43, 0.17);
    border-radius: 999px;
    color: #745617;
    background: rgba(255, 250, 235, 0.88);
    box-shadow: 0 7px 16px rgba(201, 151, 43, 0.07);
    font-size: 0.71rem;
    font-weight: 850;
}

.home-featured-card-action {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
    padding-top: 20px;
    color: #0d6075;
    border-top: 1px solid rgba(18, 61, 106, 0.11);
    font-size: 0.91rem;
    font-weight: 900;
}

.home-featured-card-capsules .home-featured-card-action {
    color: #745617;
}

.home-featured-arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #0f718a, #0ea5a6);
    box-shadow: 0 10px 22px rgba(14, 113, 138, 0.20);
    transition: transform 0.25s ease;
}

.home-featured-card-capsules .home-featured-arrow {
    background: linear-gradient(135deg, #b78422, #d7aa45);
    box-shadow: 0 10px 22px rgba(183, 132, 34, 0.20);
}

.home-featured-card:hover .home-featured-arrow {
    transform: translateX(4px);
}

/* Alturas internas homologadas */
.home-main .systems-grid {
    align-items: stretch;
}

.home-main .system-card {
    height: 100%;
    min-height: 248px;
}

.home-main .transparency-box .row > [class*="col-"] {
    display: flex;
}

.home-main .data-card {
    width: 100%;
    min-height: 154px;
}

.home-main .observatorio-grid-premium > [class*="col-"] {
    display: flex;
}

.home-main .observatorio-card-premium {
    width: 100%;
    min-height: 280px;
}

.home-main .orientacion-panel {
    padding: 46px;
}

.home-main .orientacion-content h2 {
    margin-bottom: 28px;
}

/* Separación discreta entre la última sección y el footer */
.home-main + .footer-wide {
    margin-top: 16px;
}

.footer-wide-brand {
    display: flex;
    min-height: 88px;
    align-items: center;
}

.footer-wide-brand .footer-logo-sma {
    margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .home-featured-card,
    .home-featured-arrow {
        transition: none !important;
    }
}

/* =========================================================
   CÍVICA INTEGRA 360 · ENLACES EJECUTIVOS DE BACKOFFICE
========================================================= */
.footer-wide-actions .footer-action-admin {
    color: #08213f;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(234,244,252,0.98));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 16px 36px rgba(5, 18, 35, 0.18);
}

.footer-wide-actions .footer-action-admin:hover {
    color: #08213f;
    background: linear-gradient(135deg, #ffe9a5, #ffd36b);
}

.footer-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #08213f !important;
    font-weight: 900;
    background: linear-gradient(135deg, #ffe7a2, #ffd36b);
    box-shadow: 0 12px 26px rgba(214, 169, 64, 0.22);
}

.footer-admin-link:hover {
    color: #08213f !important;
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .footer-admin-link {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* =========================================================
   BACKOFFICE EN HEADER Y AJUSTES DE NAVEGACIÓN
========================================================= */
.navbar-sma .nav-link.nav-link-backoffice {
    color: #ffffff;
    background: linear-gradient(135deg, #0d8a8d, #0b4f79);
    border-color: rgba(11, 79, 121, 0.22);
    box-shadow: 0 16px 30px rgba(11, 79, 121, 0.22);
}

.navbar-sma .nav-link.nav-link-backoffice .nav-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.18);
}

.navbar-sma .nav-link.nav-link-backoffice:hover,
.navbar-sma .nav-link.nav-link-backoffice:focus,
.navbar-sma .nav-link.nav-link-backoffice:active {
    color: #08213f;
    background: linear-gradient(135deg, #ffe9a5, #ffd36b);
    border-color: rgba(201, 151, 43, 0.25);
    box-shadow: 0 18px 34px rgba(201, 151, 43, 0.26);
}

.navbar-sma .nav-link.nav-link-backoffice:hover .nav-icon,
.navbar-sma .nav-link.nav-link-backoffice:focus .nav-icon,
.navbar-sma .nav-link.nav-link-backoffice:active .nav-icon {
    color: #08213f;
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.45);
}