/* =========================================================
   Política de Gestión Integrada — base de página
   ---------------------------------------------------------
   Este archivo se carga PRIMERO y SOLO en esta página
   (templates/pag/politica_gestion_integrada.html).

   Contiene lo que es de la página completa y no de una
   sección concreta:
     1. Paleta propia de la página (tokens --pgi-*)
     2. Fondo degradado continuo + capa de estrellas
     3. Componentes compartidos por dos o más secciones
        (.pgi-badge, .pgi-titulo-marco)

   El resto de los estilos vive en un archivo por sección,
   con el mismo nombre que su partial.
   ========================================================= */

:root {
    /* Paleta de la página: azul profundo → violeta → magenta.
       Es específica de este documento y no reemplaza a los
       tokens de marca de static/css/styles.css. */
    --pgi-azul-profundo: #050a2a;
    --pgi-azul: #12154e;
    --pgi-violeta-oscuro: #2e1560;
    --pgi-violeta: #5a1f76;
    --pgi-magenta: #8a2a76;
    --pgi-magenta-oscuro: #6d1f5e;
    --pgi-noche: #2b0d33;

    --pgi-hero-fondo-inicio: #202b70;
    --pgi-hero-fondo-medio: #23275f;
    --pgi-hero-fondo-fin: #302665;
    --pgi-hero-marco: rgba(188, 194, 238, 0.24);
    --pgi-hero-superficie: rgba(17, 21, 68, 0.42);
    --pgi-hero-esquina: rgba(12, 17, 57, 0.78);
    --pgi-hero-badge-inicio: #8a1d7d;
    --pgi-hero-badge-fin: #74145f;

    --pgi-acento: #e11d48;
    --pgi-acento-suave: rgba(225, 29, 72, 0.18);

    --pgi-superficie: rgba(255, 255, 255, 0.06);
    --pgi-superficie-alta: rgba(255, 255, 255, 0.09);
    --pgi-borde: rgba(255, 255, 255, 0.14);
    --pgi-borde-suave: rgba(255, 255, 255, 0.08);

    --pgi-texto: var(--text-white);
    --pgi-texto-suave: rgba(255, 255, 255, 0.72);
    --pgi-texto-tenue: rgba(255, 255, 255, 0.55);

    --pgi-radio: 22px;
    --pgi-radio-sm: 14px;
    --pgi-espacio-seccion: 110px;

    --pgi-campo-azul-inicio: #202b70;
    --pgi-campo-azul-fin: #302665;
    --pgi-campo-violeta-inicio: #3b246f;
    --pgi-campo-violeta-fin: #57237d;
    --pgi-campo-violeta-medio: #63217e;
    --pgi-campo-magenta: #7b278d;
    --pgi-campo-ciruela: #681d72;
    --pgi-campo-ciruela-fin: #64104f;
    --pgi-campo-cierre: #4a092f;
}

/* ---------- Fondo de la página ---------- */

body {
    background: linear-gradient(180deg,
        var(--pgi-campo-azul-inicio) 0%,
        var(--pgi-campo-azul-fin) 13%,
        var(--pgi-campo-violeta-inicio) 37%,
        var(--pgi-campo-violeta-fin) 44%,
        var(--pgi-campo-violeta-medio) 63%,
        var(--pgi-campo-magenta) 72%,
        var(--pgi-campo-ciruela) 82%,
        var(--pgi-campo-ciruela-fin) 91%,
        var(--pgi-campo-cierre) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: -60px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        radial-gradient(1px 1px at 11% 18%, rgba(255, 255, 255, 0.88) 50%, transparent 55%),
        radial-gradient(1.3px 1.3px at 72% 9%, rgba(224, 230, 255, 0.78) 50%, transparent 55%),
        radial-gradient(1px 1px at 34% 43%, rgba(255, 255, 255, 0.7) 50%, transparent 55%),
        radial-gradient(1.4px 1.4px at 86% 55%, rgba(255, 225, 246, 0.72) 50%, transparent 55%),
        radial-gradient(1px 1px at 19% 76%, rgba(255, 255, 255, 0.66) 50%, transparent 55%),
        radial-gradient(1.2px 1.2px at 57% 91%, rgba(231, 220, 255, 0.7) 50%, transparent 55%);
    background-size: 420px 420px;
    background-repeat: repeat;
    animation: pgi-polvo-estelar 80s ease-in-out infinite alternate;
    will-change: transform;
}

body::after {
    content: "";
    position: fixed;
    inset: -30px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    background-image: url("../../img/Estrellas.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    filter: grayscale(1) brightness(1.9) drop-shadow(0 0 7px rgba(232, 226, 255, 0.48));
    animation: pgi-respiracion-estelar 36s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* El campo estelar compartido flota suavemente sobre las secciones. */
.pgi-hero,
.pgi-ambitos,
.pgi-proposito,
.pgi-principios,
.pgi-cumplimiento,
.pgi-vigencia,
.pgi-cierre {
    position: relative;
    z-index: 1;
}

.footerNxtara {
    position: relative;
    z-index: 3;
}

@keyframes pgi-polvo-estelar {
    from { transform: translate3d(-12px, -8px, 0); }
    to { transform: translate3d(16px, 18px, 0); }
}

@keyframes pgi-respiracion-estelar {
    0% {
        opacity: 0.12;
        transform: translate3d(-7px, -10px, 0) scale(1.005);
    }
    48% {
        opacity: 0.17;
    }
    100% {
        opacity: 0.14;
        transform: translate3d(9px, 12px, 0) scale(1.012);
    }
}

/* ---------- Componentes compartidos ---------- */

/* Píldora superior: la usan el hero y la sección de cumplimiento. */
.pgi-badge {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid var(--pgi-borde);
    background: var(--pgi-superficie-alta);
    color: var(--pgi-texto);
    font-family: var(--font-text);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

/* Titular con marco lateral: principios, cumplimiento y vigencia. */
.pgi-titulo-marco {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 26px 40px;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pgi-texto);
}

.pgi-titulo-marco strong {
    font-weight: 700;
}

.pgi-titulo-marco::before,
.pgi-titulo-marco::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    border: 1px solid var(--pgi-borde);
}

.pgi-titulo-marco::before {
    left: 0;
    border-right: none;
    border-radius: var(--pgi-radio-sm) 0 0 var(--pgi-radio-sm);
}

.pgi-titulo-marco::after {
    right: 0;
    border-left: none;
    border-radius: 0 var(--pgi-radio-sm) var(--pgi-radio-sm) 0;
}

/* ---------- Aparición al hacer scroll ----------
   Esta página estrenó el efecto con `animation-timeline: view()`,
   que es CSS puro pero solo funciona en navegadores basados en
   Chromium: en Firefox no se veía ninguna entrada.

   Ahora usa el sistema compartido de static/css/animaciones.css,
   el mismo que las otras nueve páginas, marcando los bloques con
   `data-nx-reveal` / `data-nx-stagger` en los partials. Se gana
   soporte en todos los navegadores y, sobre todo, el mismo ritmo
   que el resto del sitio. Aquí ya no queda nada que declarar. */

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    :root {
        --pgi-espacio-seccion: 70px;
    }

    .pgi-titulo-marco {
        padding: 20px 24px;
        letter-spacing: 0.08em;
    }

    .pgi-titulo-marco::before,
    .pgi-titulo-marco::after {
        width: 16px;
    }

    body::after {
        background-size: 760px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
        transform: none;
        will-change: auto;
    }
}