/* ==========================================================================
   PLANA GERENCIAL (includes/plana-gerencial.php)
   Gerente General a la izquierda + 6 gerentes en 3x2 a la derecha.
   Estilos encapsulados bajo .pg
   ========================================================================== */

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

.pg {
    --pg-navy: #002855;   /* Azul marino institucional */
    --pg-blue: #0072ce;   /* Azul primario */
    --pg-muted: #526889;  /* Gris azulado para textos */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 22px 94px;
    background: #f4fbff url('../img/PLANA_GERENCIAL/ondas-fondo.svg') center / cover no-repeat;
    color: var(--pg-navy);
}

/* Foto de la sede (Puquio) abajo a la izquierda, detrás de las tarjetas.
   La máscara la disuelve hacia el centro y hacia arriba, sobre las ondas. */
.pg::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 52%;
    height: 78%;
    background: url('../img/PLANA_GERENCIAL/sede-puquio.webp') left bottom / cover no-repeat;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 30%, transparent 72%);
    mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 30%, transparent 72%);
    pointer-events: none;
}

.pg__container {
    position: relative;
    z-index: 1;
    max-width: 1360px;
    margin: 0 auto;
}

/* --- Encabezado centrado --- */
.pg__header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
}

.pg__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: var(--pg-blue);
}

.pg__header h2 {
    margin: 16px 0 12px;
    font-size: clamp(34px, 4.2vw, 60px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -0.04em;
    color: var(--pg-navy);
}

.pg__header h2 span {
    color: var(--pg-blue);
}

.pg__header p {
    max-width: 750px;
    margin: 0 auto;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.5;
    color: var(--pg-muted);
}

.pg__rule {
    display: block;
    width: 72px;
    height: 3px;
    margin: 20px auto 0;
    border-radius: 8px;
    background: var(--pg-blue);
}

/* --- Mosaico: tarjeta grande + cuadrícula 3x2 --- */
.pg__mosaic {
    display: grid;
    grid-template-columns: minmax(270px, 1.5fr) minmax(0, 3fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

.pg__featured,
.pg__card {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 17px;
    box-shadow: 0 10px 34px rgba(0, 40, 85, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg__featured:hover,
.pg__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 40, 85, 0.14);
}

/* Zona de foto: imagen rectangular a todo lo ancho de la tarjeta.
   Crece (flex: 1) para ocupar todo el alto libre: el texto queda compacto
   debajo y el espacio sobrante se lo lleva la foto, no el blanco. */
.pg__photo {
    --pg-photo: 200px; /* Alto mínimo de la zona de foto */
    position: relative;
    flex: 1 1 auto;
    min-height: var(--pg-photo);
    overflow: hidden;
    background: linear-gradient(120deg, #edf8ff, #c4e8ff);
}

.pg__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.35s ease;
}

.pg__featured:hover .pg__photo img,
.pg__card:hover .pg__photo img {
    transform: scale(1.04);
}

/* --- Gerente General --- */
.pg__featured {
    display: flex;
    flex-direction: column;
}

.pg__photo--featured {
    --pg-photo: 380px;
}

.pg__featured-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 23px 20px;
}

.pg__featured-body h3 {
    margin: 0 0 9px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.pg__pill {
    padding: 6px 14px;
    border-radius: 80px;
    background: #e0f1ff;
    color: #0869d2;
    font-size: 13px;
    font-weight: 700;
}

/* Descripción con ícono de documento */
.pg__featured-desc {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 14px 0 16px;
}

.pg__featured-icon {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f4ff;
    color: var(--pg-blue);
}

.pg__featured-icon svg {
    width: 22px;
    height: 22px;
}

.pg__featured-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pg-muted);
}

.pg__featured-link {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pg-blue);
    color: #ffffff;
    font-size: 26px;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

a.pg__featured-link:hover {
    background: #0059be;
    transform: translateX(3px);
}

/* --- Seis gerentes --- */
.pg__team {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pg__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Texto compacto; la flecha va en la esquina inferior derecha sin ocupar fila propia */
.pg__card-body {
    position: relative;
    flex: 0 0 auto;
    min-height: 84px;
    padding: 13px 16px 14px;
}

/* Nombre y cargo reservan siempre 2 líneas cada uno (como la tarjeta más
   larga): así todas las tarjetas tienen el mismo bloque de texto y la misma foto */
.pg__card h3 {
    min-height: calc(2em * 1.25);
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.pg__card p {
    min-height: calc(2em * 1.35);
    margin: 0 38px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pg-muted);
}

.pg__card-link {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #e0f2ff;
    color: var(--pg-blue);
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease;
}

a.pg__card-link:hover {
    background: #c4e6ff;
}

.pg a:focus-visible {
    outline: 3px solid var(--pg-blue);
    outline-offset: 3px;
}

/* Perfil sin página: flecha decorativa atenuada */
.pg .is-pending {
    opacity: 0.55;
}

/* --- Animación de entrada al llegar a la sección (ver js/main.js, sección 5) ---
   El encabezado usa el [data-reveal] común (css/estilos_servicios.css).
   Las tarjetas entran en cascada con "translate" (no "transform"), para no
   pisar la elevación del hover. Solo se ocultan si el JS está activo. */
.eps-reveal-ready .pg__featured,
.eps-reveal-ready .pg__card {
    opacity: 0;
    translate: 0 32px;
}

.eps-reveal-ready.is-visible .pg__featured,
.eps-reveal-ready.is-visible .pg__card {
    opacity: 1;
    translate: 0 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
                translate 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* --- Responsividad --- */
/* Tablet: el Gerente General pasa arriba a todo el ancho (foto | datos) y los
   6 gerentes debajo en 3 columnas; así su tarjeta no queda angosta y altísima */
@media (max-width: 950px) {
    .pg__mosaic {
        grid-template-columns: 1fr;
    }
    .pg__featured {
        display: grid;
        grid-template-columns: 44% 56%;
    }
    .pg__photo--featured {
        --pg-photo: 300px;
    }
    .pg__featured-body {
        justify-content: center;
    }
    .pg__team {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .pg__card .pg__photo {
        --pg-photo: 190px;
    }
}

@media (max-width: 680px) {
    .pg {
        padding: 50px 14px 70px;
    }
    /* En móvil las tarjetas cubren todo el ancho: la foto de la sede no se vería */
    .pg::before {
        display: none;
    }
    .pg__header {
        margin-bottom: 26px;
    }
    .pg__eyebrow {
        font-size: 11px;
    }
    .pg__mosaic {
        grid-template-columns: 1fr;
    }
    .pg__featured {
        display: grid;
        grid-template-columns: 44% 56%;
        min-height: 240px;
    }
    .pg__photo--featured {
        --pg-photo: 260px;
    }
    .pg__featured-body {
        padding: 16px;
    }
    .pg__featured-body h3 {
        font-size: 17px;
    }
    .pg__featured-desc {
        gap: 10px;
        margin: 12px 0;
    }
    .pg__featured-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
    .pg__featured-icon svg {
        width: 17px;
        height: 17px;
    }
    .pg__featured-body p {
        font-size: 12px;
    }
    .pg__featured-link {
        width: 40px;
        height: 40px;
    }
    .pg__team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .pg__card-body {
        min-height: 80px;
        padding: 12px;
    }
    .pg__card .pg__photo {
        --pg-photo: 180px;
    }
    .pg__card h3 {
        font-size: 13px;
    }
    .pg__card p {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .pg__featured {
        display: flex;
    }
    .pg__photo--featured {
        --pg-photo: 300px;
    }
    .pg__team {
        grid-template-columns: 1fr;
    }
    .pg__card .pg__photo {
        --pg-photo: 260px;
    }
    .pg__card-body {
        min-height: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg__featured,
    .pg__card,
    .pg__photo img,
    .pg__featured-link,
    .pg__card-link {
        transition: none;
    }
    .eps-reveal-ready .pg__featured,
    .eps-reveal-ready .pg__card,
    .eps-reveal-ready.is-visible .pg__featured,
    .eps-reveal-ready.is-visible .pg__card {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

.pg__name-link{color:inherit;text-decoration:none}.pg__name-link:hover{text-decoration:underline;text-underline-offset:4px}.pg__name-link:focus-visible{outline:2px solid #0086b6;outline-offset:4px}

/* Cinco gerencias junto a la tarjeta principal, sin espacios vacíos. */
.pg__team{grid-template-columns:repeat(6,minmax(0,1fr))}.pg__team>.pg__card{grid-column:span 2}.pg__team>.pg__card:nth-last-child(-n+2){grid-column:span 3}@media(max-width:680px){.pg__team{grid-template-columns:repeat(2,minmax(0,1fr))}.pg__team>.pg__card,.pg__team>.pg__card:nth-last-child(-n+2){grid-column:auto}.pg__team>.pg__card:last-child{grid-column:1/-1}}@media(max-width:380px){.pg__team{grid-template-columns:1fr}}