/* ═══════════════════════════════════════════
   COMPONENTE — Modal Portafolio (galería + info)
   Uso: front-page.php (sección Proyectos) — desde P40 ya NO se usa en
        archive-proyecto_portafolio.php (las tarjetas del archive enlazan
        directo a la entrada del proyecto). También lo reutiliza
        single-proyecto_portafolio.php, pero solo sus clases pmg-*/
        pmodal-meta sueltas (su propio modal es .pgmodal, sin panel de
        info, ver single-proyecto.css).
   P65 — page-servicio.php también lo usa completo (mismas clases .pmodal/
        pmg-*/pmodal-info que front-page.php, IDs propios svcPmodal* para
        no colisionar con el modal de subservicios #svcModal que ya vive
        en ese archivo): el carrusel de portafolio relacionado abre este
        modal en vez de navegar fuera de la página de servicio. Encolado
        agregado en custom-proyectos-noticias.php v8.3.
   Variables: main.css (--black, --graphite, --white, --gray,
   --red, --red-accent, --line, --ease, --z-modal)
   P52 — rediseño: de 2 columnas lado a lado (imagen 1fr + info 300px,
   height:580px fijo) a 1 columna apilada (imagen 16/9 arriba, info
   compacta abajo). Mismo fix de margen fijo en px que .pgmodal
   (P50/P51) para que la pantalla más chica de la empresa también deje
   margen arriba del modal.
   P69.2 — Fix real del aspect ratio de .pmodal-gallery (altura primero,
   ancho derivado — ver comentario en la regla) + info panel achicado
   (sin keywords, fila única cat/título/ficha con separador diagonal,
   descripción a 2 líneas) para liberar presupuesto vertical y que la
   galería pueda respetar 16:9 real en pantallas de notebook bajas sin
   competir con el panel de info por el mismo espacio total. Afecta
   front-page.php Y page-servicio.php a la vez — comparten estas
   clases (ver nota arriba).
   ═══════════════════════════════════════════ */

/* Backdrop */
.pmodal-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(16,10,10,.84);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}
.pmodal-backdrop.open { opacity: 1; pointer-events: all; }

/* Modal */
/* P52 — rediseño final pendiente desde el inicio de esta conversación:
   antes .pmodal-inner era grid 1fr/300px (imagen a la izquierda, panel
   de info angosto a la derecha, ambos a height:580px fijo). Ahora es
   una sola columna: imagen 16/9 arriba, info abajo, compacto. Mismo
   fix de margen que .pgmodal (P50/P51) — margen fijo en px contra el
   alto real de la ventana, no un %, para que la pantalla más chica de
   la empresa también deje margen arriba. overflow:hidden auto en vez
   de solo hidden: si el contenido de info es largo, la pestaña interna
   hace scroll en vez de desbordar o forzar una altura excesiva. */
.pmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    z-index: var(--z-modal);
    /* P69.2 (corrección) — el ancho ya no es solo min(1100px,94vw): se le
       agrega un tercer candidato derivado del presupuesto vertical
       disponible para la galería (calc(100vh-360px), mismo cálculo que
       antes vivía en .pmodal-gallery) multiplicado por 16/9. Así, cuando
       el ancho "natural" (1100px o 94vw) produciría una galería más alta
       de lo que cabe verticalmente, es el MODAL COMPLETO el que se
       angosta — la imagen sigue ocupando el 100% de ese ancho (sin
       franjas internas a los costados), y el "aire" que antes iba adentro
       como margen ahora queda afuera, entre el modal (más angosto) y el
       borde de la ventana. Decisión explícita del usuario tras ver el
       resultado real: la imagen debe ir de borde a borde del modal. */
    width: min(1100px, 94vw, calc((100vh - 360px) * 16 / 9));
    max-height: calc(100vh - 180px);
    background: var(--dark-graphite);
    border: 1px solid var(--mid-gray);
    border-radius: 6px;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: var(--red-accent) transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.pmodal::-webkit-scrollbar { width: 6px; }
.pmodal::-webkit-scrollbar-track { background: transparent; }
.pmodal::-webkit-scrollbar-thumb { background: var(--red-accent); border-radius: 3px; }
.pmodal::-webkit-scrollbar-thumb:hover { background: var(--red); }
.pmodal.open {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

.pmodal-inner {
    display: block;
}

/* Galería */
/* P69.2 — el 16:9 real ya está garantizado por el ancho de .pmodal (ver
   comentario ahí): la galería vuelve a ocupar el 100% de ese ancho, sin
   margen propio ni tope de altura independiente — no hace falta, el
   ancho del modal ya viene pre-calculado para que esta altura quepa en
   el presupuesto vertical disponible. */
.pmodal-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--static-black);
}
.pmg-track { position: relative; width: 100%; height: 100%; }
/* P16 — sin pointer-events, los slides inactivos (opacity:0) seguían
   siendo clickeables. Sin z-index explícito, el orden de apilamiento lo
   decide el orden en el DOM — como el video (si existe) siempre va
   primero (ver single-proyecto_portafolio.php, "video externo... siempre
   primero"), las imágenes que vienen después en el HTML quedaban ENCIMA
   del iframe en la pila de clics aunque invisibles. El clic sobre el
   botón de play de YouTube chocaba contra una imagen fantasma en vez de
   llegar al iframe. Afecta a ambos consumidores de esta clase: el modal
   de portafolio del home/servicio (.pmodal) y el propio de la entrada de
   proyecto (.pgmodal). */
.pmg-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
/* P16 (fix 2) — el fix anterior (.pmg-slide.active{pointer-events:auto})
   tenía un bug real: el slide 0 nace con la clase "active" en el HTML
   del servidor (single-proyecto_portafolio.php, $i===0), ANTES de que
   el modal se abra alguna vez. .pgmodal/.pmodal están siempre en el
   DOM, centrados con position:fixed, solo invisibles vía opacity:0
   mientras están cerrados — pointer-events:auto en un hijo SÍ puede
   sobrescribir el pointer-events:none heredado del padre, aunque el
   padre sea invisible. Resultado real: el iframe/video del slide activo
   quedaba clickeable de fondo, flotando fijo center-viewport, e
   interceptaba clics de cualquier contenido real de la página que
   cayera bajo ese rectángulo — incluida la propia galería que abre el
   modal. Fix: el pointer-events:auto (y el fade a opacity:1) dependen
   de que el modal esté realmente .open, no solo de qué slide está
   "seleccionado" internamente. */
.pmodal.open .pmg-slide.active,
.pgmodal.open .pmg-slide.active { opacity: 1; pointer-events: auto; }
.pmg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* P16 — opacity:.88 default retirada: las fotos representantes del
   producto no llevan opacidad reducida en su estado default (mismo
   criterio aplicado a .svc-mg-slide img en services.css, su gemela para
   la galería de subservicios). Sin hover que la compensara — quedaba
   permanentemente dimeada en el modal principal de portafolio/servicio. */
/* P45 — galería con video: mismo tratamiento visual que la imagen dentro
   del slide. Sin opacity reducida (los controles nativos necesitan
   contraste completo para leerse bien). */
.pmg-slide video { width: 100%; height: 100%; object-fit: contain; background: var(--static-black); display: block; }
/* P46 — mismo contenedor que el video self-hosted, sin controles propios
   que estilar (los da YouTube dentro del iframe). */
.pmg-slide iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--static-black); }
.pmg-empty {
    display: flex; align-items: center; justify-content: center; height: 100%;
    font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--mid-gray); opacity: .4;
}

/* P50 — el usuario notó que P48 (más opaco/borde blanco) no se veía
   aplicado; de paso pide un tratamiento más fuerte: fondo rojo sólido,
   ícono blanco, hover con el segundo rojo — mismo patrón que .btn-primary
   del sitio (main.css: base var(--red), hover var(--red-accent)), para
   consistencia de marca en vez de inventar un tratamiento nuevo acá. */
.pmg-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--red); border: 2px solid var(--red); color: var(--static-white);
    box-shadow: 0 4px 16px rgba(16,10,10,.5);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pmg-btn svg { width: 20px; height: 20px; stroke-width: 2.5; }
.pmg-btn:hover { background: var(--red-accent); border-color: var(--red-accent); color: var(--static-white); transform: translateY(-50%) scale(1.06); }
.pmg-prev { left: 1rem; }
.pmg-next { right: 1rem; }

.pmg-dots {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 2;
}
.pmg-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,252,255,.3); border: none; padding: 0; cursor: pointer;
    transition: background .2s, transform .2s;
}
.pmg-dot.active { background: var(--static-white); transform: scale(1.3); }

/* Panel info — P69.2: reemplaza el grid de 3 columnas x 3 filas de P53
   (cat/título/divisor | tags | ficha cliente-año) por una fila única:
   categoría · título · ficha cliente/año, separados por una línea
   diagonal (mismo grosor/color 1px var(--white) que ya usaba el borde
   entre filas de .pmmr, solo rotada) en vez del divisor rojo corto que
   había antes bajo el título. Decisiones del usuario:
   1. Sin keywords en el modal — .pmodal-tags/.pmtag removidos (HTML y
      JS en front-page.php/page-servicio.php).
   2. cat/título/ficha en una sola fila con separador diagonal.
   3. Descripción cortada a 2 líneas (line-clamp) — sensación de
      urgencia para que el editor escriba menos, sin arriesgar overflow
      sin importar el alto de pantalla. */
.pmodal-info {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--dark-graphite);
}
.pmodal-headrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
/* Línea diagonal — mismo grosor/color que el borde que separaba las
   filas de .pmmr antes (1px, var(--white)), solo rotada. */
.pmodal-diag {
    display: inline-block;
    width: 1px;
    height: 1.3em;
    background: var(--white);
    transform: rotate(20deg);
    flex-shrink: 0;
}
/* El botón de cerrar flota sobre la imagen (mismo patrón que
   .pgmodal-close del lightbox de proyecto), no empuja contenido del
   panel de info hacia abajo como antes. */
.pmodal-info-top {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
.pmodal-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--static-mid-gray); background: rgba(16,10,10,.75); color: var(--static-mid-gray);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}
.pmodal-close:hover { background: var(--red-accent); border-color: var(--red-accent); color: var(--static-white); }

.pmodal-cat {
    font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--red-accent); margin: 0; flex-shrink: 0;
}
.pmodal-title {
    /* P69.2 (corrección) — título a la izquierda, más grande, con
       subrayado rojo propio (reemplaza el .pmodal-divider suelto que
       antes iba en su propia fila bajo el título). El grupo
       cat/cliente/año se agrupa aparte, a la derecha
       (justify-content:space-between en .pmodal-headrow) — relevancia
       de izquierda a derecha: título primero (lo más importante), el
       resto del detalle después, en ese orden. */
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.02em; line-height: 1.1;
    color: var(--white); margin: 0; padding: 0 0 .4rem;
    border-bottom: 2px solid var(--red-accent);
    display: inline-block;
}
/* .pmodal-divider removido — el divisor rojo corto que iba bajo el
   título queda reemplazado por el border-bottom del propio título. */

.pmodal-metarow {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* Cliente/Año ahora en línea (antes apilados con borde horizontal entre
   sí) — separados por la misma línea diagonal que agrupa cat/meta,
   mismo lenguaje visual en toda la fila. */
.pmodal-meta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.pmmr {
    display: flex; align-items: baseline; gap: .35rem;
    font-family: 'Montserrat', sans-serif; font-size: 11px;
}
.pmmr-label { color: var(--mid-gray); font-size: 10px; letter-spacing: .04em; }
.pmmr-val { color: var(--white); }

.pmodal-desc {
    font-family: 'Nunito', sans-serif; font-size: 13px; color: var(--reading-text);
    line-height: 1.55; margin: .7rem 0 0;
    /* P69.2 — cortada a 2 líneas: previene overflow sin importar el
       alto de pantalla, y de paso obliga a escribir descripciones más
       breves en el editor. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Mobile — P69.2: título pasa a su propia línea (ya no hay espacio para
   quedar junto al grupo cat/cliente/año en el mismo ancho). Líneas
   diagonales ocultas en mobile (separan cat/meta y cliente/año en
   desktop) — con el espacio ya reducido, el gap del flex alcanza sin
   necesitar la línea decorativa. */
@media (max-width: 700px) {
    .pmodal-headrow {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .pmodal-diag { display: none; }
}

/* P16 — @media(max-width:700px){.pmodal{width:96vw}} eliminado: contra
   el 94vw de la fórmula base (.pmodal, más arriba), la diferencia real
   en todo el rango de celulares (320-430px) era de 6 a 14px de margen
   lateral — imperceptible, no resolvía ningún problema de contenido
   real (a diferencia de .svc-hero, donde el cálculo garantiza que la
   galería quepa en el alto disponible). Sin necesidad de reemplazarlo
   por otro breakpoint ni fusionarlo con 768 — 94vw solo, sin excepción,
   cubre mobile completo. */