/* Política de Gestión Integrada — cómo aseguramos el cumplimiento
   Partial: templates/partials/politicaGestionIntegradaPag/sectionCumplimiento.html */

.pgi-cumplimiento {
    --pgi-cumplimiento-fondo-inicio: #7b278d;
    --pgi-cumplimiento-fondo-fin: #681d72;
    --pgi-cumplimiento-superficie: rgba(51, 15, 70, 0.48);
    --pgi-cumplimiento-borde: rgba(28, 6, 42, 0.56);
    --pgi-cumplimiento-rosa: #c90d68;
    --pgi-cumplimiento-rosa-claro: #e51b7d;
    --pgi-cumplimiento-linea: rgba(255, 255, 255, 0.92);
    --pgi-cumplimiento-texto: rgba(255, 255, 255, 0.98);
    --pgi-cumplimiento-texto-suave: rgba(244, 229, 247, 0.74);

    position: relative;
    overflow: hidden;
    min-height: 750px;
    padding: 84px 0 88px;
    text-align: center;
    background: radial-gradient(circle at 52% 42%, rgba(209, 74, 193, 0.2) 0%, transparent 42%);
}

.pgi-cumplimiento .container {
    position: relative;
    z-index: 2;
}

/* ---------- Encabezado ---------- */

.pgi-cumplimiento-encabezado {
    margin-bottom: 52px;
}

.pgi-cumplimiento .pgi-badge {
    width: min(244px, 78vw);
    margin: 0;
    padding: 6px 18px;
    border-color: rgba(238, 38, 139, 0.65);
    background: linear-gradient(180deg,
        var(--pgi-cumplimiento-rosa-claro) 0%,
        var(--pgi-cumplimiento-rosa) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 20px rgba(54, 8, 65, 0.2);
    font-size: 0.9rem;
    line-height: 1.25;
    white-space: nowrap;
}

.pgi-cumplimiento-titulo {
    zoom: 1;
    position: relative;
    width: min(610px, 84%);
    margin: 16px auto 0;
    padding: 0 24px 14px;
    color: var(--pgi-cumplimiento-texto);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pgi-cumplimiento-titulo span,
.pgi-cumplimiento-titulo strong {
    display: block;
}

.pgi-cumplimiento-titulo strong {
    margin-top: 7px;
    font-weight: 800;
    letter-spacing: 0.26em;
}

.pgi-cumplimiento-titulo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 14px;
    border-right: 2px solid var(--pgi-cumplimiento-linea);
    border-bottom: 2px solid var(--pgi-cumplimiento-linea);
    border-left: 2px solid var(--pgi-cumplimiento-linea);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 8px rgba(255, 255, 255, 0.17);
}

.pgi-cumplimiento-bajada {
    max-width: 600px;
    margin: 28px auto 0;
    color: var(--pgi-cumplimiento-texto-suave);
    font-family: var(--font-main);
    font-size: 0.72rem;
    line-height: 1.38;
}

/* ---------- Tarjetas ---------- */

.pgi-cumplimiento-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    padding-inline: 35px;
}

.pgi-cumplimiento-card {
    min-width: 0;
    height: 228px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 22px;
    border: 1px solid var(--pgi-cumplimiento-borde);
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 6%, rgba(177, 31, 129, 0.12) 0%, transparent 34%),
        var(--pgi-cumplimiento-superficie);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 13px rgba(38, 5, 45, 0.18);
    transition: transform 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease), background 0.3s var(--nx-ease);
}

.pgi-cumplimiento-card:hover {
    transform: translateY(-6px);
    border-color: rgba(237, 84, 181, 0.42);
    background-color: rgba(61, 17, 82, 0.58);
}

.pgi-cumplimiento-icono {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
    border: 1px solid rgba(244, 45, 149, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%,
        var(--pgi-cumplimiento-rosa-claro) 0%,
        var(--pgi-cumplimiento-rosa) 48%,
        #780747 100%);
    box-shadow:
        0 0 0 9px rgba(184, 15, 107, 0.16),
        0 0 24px 12px rgba(216, 21, 126, 0.22),
        inset 0 -8px 13px rgba(70, 4, 51, 0.34),
        inset 0 5px 11px rgba(255, 255, 255, 0.1);
}

.pgi-cumplimiento-icono::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.pgi-cumplimiento-icono img {
    position: relative;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.pgi-cumplimiento-rol {
    zoom: 1;
    min-height: 34px;
    margin: 0;
    color: var(--pgi-cumplimiento-texto);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.pgi-cumplimiento-texto {
    margin: 12px 0 0;
    color: var(--pgi-cumplimiento-texto-suave);
    font-family: var(--font-text);
    font-size: 0.58rem;
    line-height: 1.42;
    text-align: justify;
    text-wrap: pretty;
}

.pgi-cumplimiento-cierre {
    max-width: 850px;
    margin: 76px auto 0;
    color: var(--pgi-cumplimiento-texto);
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.35;
}

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

@media (max-width: 700px) {
    .pgi-cumplimiento {
        min-height: 0;
        padding: 72px 0;
    }

    .pgi-cumplimiento-titulo {
        width: 94%;
        padding-inline: 12px;
        font-size: clamp(1.45rem, 7vw, 1.9rem);
        letter-spacing: 0.16em;
    }

    .pgi-cumplimiento-titulo strong {
        letter-spacing: 0.18em;
    }

    .pgi-cumplimiento-bajada {
        max-width: 92%;
        font-size: 0.8rem;
    }

    .pgi-cumplimiento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 430px;
        margin: 0 auto;
        padding-inline: 0;
    }

    .pgi-cumplimiento-card {
        height: auto;
        min-height: 0;
        padding: 26px 24px 28px;
        border-radius: 28px;
    }

    .pgi-cumplimiento-texto {
        max-width: 310px;
        font-size: 0.76rem;
        text-align: center;
    }

    .pgi-cumplimiento-cierre {
        margin-top: 44px;
        font-size: 1.16rem;
    }
}