/*
  single-proyecto.css — MADIS
  Depende de: main.css (variables, .btn, .wrap, .eyebrow)
  .reveal duplicado localmente abajo (vive en inicio.css, que no carga acá — ver P32)
  Carga: is_singular('proyecto_portafolio')
*/

/* P16 — .proyecto-volver/.arr-left retirado: P29 (ver changelog arriba)
   ya había sacado el markup del link "Volver al Portafolio" de
   single-proyecto_portafolio.php (duplicaba lo que barra-filtros.php ya
   ofrece), pero el CSS del componente nunca se limpió. Cero referencia
   real desde P29. */

/* ── Share row (igual que noticia) ── */
.proyecto-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2rem 0;
}
.proyecto-share-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: var(--mid-gray);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-right: 4px;
    opacity: .7;
}
.proyecto-share-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid-gray);
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .25s var(--ease);
    text-decoration: none;
}
.proyecto-share-btn:hover {
    border-color: var(--red-accent);
    color: var(--red-accent);
    transform: scale(1.12);
}
.proyecto-share-native { display: none; }

/* ── Reveal — duplicado de inicio.css. inicio.css solo carga en
   is_front_page(), este template no lo tiene disponible. Ver
   discusión de acoplamiento en MADIS-project-log.md (P32). ── */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Hero de proyecto (P32) — mismo lenguaje visual que .hero del home
   (inicio.css), duplicado con clases propias (.proyecto-hero-*) por la
   misma razón que .reveal arriba: no acoplar esta plantilla a cambios
   futuros del hero del home. Sin video/hero-grid — solo imagen destacada
   + overlay + texto, que es todo lo que pidió el punto 2. ── */
.proyecto-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--static-black); /* P55 — fijo: el fondo del hero siempre es oscuro, no depende del tema */
    /* P49 — el contenido del hero se centra verticalmente con
       align-items:center, pero arriba hay 2 barras fijas superpuestas
       (header ~78px + barra de filtros "Area/Sort by date" ~46px, juntas
       ~124px). En una ventana de poca altura, el bloque centrado sube lo
       suficiente para que el eyebrow (primer elemento) quede detrás de
       esas barras — sigue en el DOM, pero tapado. Este padding-top
       reserva ese espacio como zona muerta: el centrado ahora ocurre en
       el resto del alto disponible, nunca invade la franja donde viven
       las barras fijas, sea cual sea el alto real de la ventana. */
    padding-top: 160px;
}
.proyecto-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.proyecto-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proyecto-hero-grid {
    /* P16 — extensión del grid de marca (antes exclusivo de .hero-grid en
       inicio.css, y ahora también en .svc-hero__grid) a este hero. La
       exclusión explícita de P32 ("Sin video/hero-grid") queda superada
       por la unificación de "hero como marca" — mismo criterio en los 3. */
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .5;
    background-image:
        linear-gradient(rgba(16,10,10,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,10,10,.10) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, transparent 80%);
            mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, transparent 80%);
    pointer-events: none;
}
.proyecto-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* P16 — replica la pila de 3 gradientes de .hero-overlay/.svc-hero__overlay
       (radial rojo + 2 lineales cruzados), antes solo 2 lineales sin glow.
       Colores nuevos aprobados: rgba(16,10,10,X) en vez de rgba(0,0,0,X). */
    background:
        radial-gradient(100% 80% at 82% 14%, rgba(229,29,37,.18), transparent 55%),
        linear-gradient(90deg, rgba(16,10,10,.85), rgba(16,10,10,.35) 55%, rgba(16,10,10,.7)),
        linear-gradient(180deg, rgba(16,10,10,.25), rgba(16,10,10,.55) 60%, rgba(16,10,10,.9));
}
.proyecto-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
/* P55 — el usuario notó que en modo claro el título, el ghost btn y la
   descripción del hero se pierden. Causa: body.light redefine --white a
   #161616 y --gray a #5f5f5f (pensados para texto sobre fondos claros
   en el resto del sitio) — pero el fondo de este hero SIEMPRE es oscuro
   (imagen + overlay negro), sea cual sea el tema. Fix: colores fijos en
   vez de las variables reactivas al tema, mismos valores que ya tiene
   --white/--gray en modo oscuro (para no cambiar cómo se ve hoy), pero
   que ya no se muevan con body.light. Mismo criterio que ya usa el hero
   del home (main.css: body.light .hero-content h1{color:#fff}, etc.) —
   acá se resuelve sin necesitar el prefijo body.light, directamente fijo
   siempre, porque este fondo nunca cambia. */
.proyecto-hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    font-weight: 600;
    color: var(--static-ghost-white);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 20px 0 0;
}
.proyecto-hero-content h1 .accent { color: var(--red-accent); display: block; }
.proyecto-hero-content .lead {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    max-width: 54ch;
    margin-top: 26px;
    color: var(--static-light-gray);
    font-weight: 300;
}
.proyecto-hero-content .cta-row {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}
/* .btn/.btn-primary/.btn-ghost son globales (main.css) y sí cambian con
   el tema porque en el resto del sitio SÍ se usan sobre fondos que
   cambian. Acá, dentro del hero, siempre están sobre el mismo fondo
   oscuro — mismo override que main.css ya aplica para body.light
   .hero-content .btn, pero sin condicionarlo a body.light. */
.proyecto-hero-content .btn { color: var(--static-ghost-white); border-color: rgba(255,252,255,.35); }
.proyecto-hero-content .btn-primary { border-color: var(--red); }
.proyecto-hero-content .btn-ghost:hover { border-color: var(--static-ghost-white); }
.scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--static-light-gray); /* P55 — fijo: mismo motivo que el h1 de arriba */
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.scroll-cue .bar {
    width: 1px;
    height: 46px;
    background: linear-gradient(var(--red-accent), transparent);
    animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Header de proyecto en fila (P37/P39) — space-between entre el bloque
   autor+fecha (izquierda) y la ficha cliente/año (derecha), ambos
   centrados en el eje Y (align-items:center en .proyecto-header-row).
   Ajuste P39: el min-width fijo (180px) no se adaptaba al ancho real
   de la columna .8fr, y quitarlo sin más rompía la alineación entre
   "Cliente"/"TVN" y "Año"/"2025" (cada .pmmr es su propio flex row, sin
   ancho compartido no hay forma de alinear los valores entre sí).
   Solución: .proyecto-header-ficha pasa a grid de 2 columnas
   (max-content), y cada .pmmr adentro usa grid-template-columns:subgrid
   para heredar esas mismas 2 columnas — así label y valor quedan
   alineados entre ambas filas, el ancho total se ajusta solo al
   contenido más ancho (sin número mágico en px) y sigue funcionando
   igual de angosta que sea la columna. Selectores compuestos
   (.pmodal-meta.proyecto-header-ficha) para no depender del orden de
   carga entre portfolio-modal.css y este archivo — no toca el .pmmr
   real del modal (portfolio-modal.css), solo esta instancia. ── */
.proyecto-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}
.proyecto-header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.pmodal-meta.proyecto-header-ficha {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 1.5rem;
}
.pmodal-meta.proyecto-header-ficha .pmmr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

.proyecto-content-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}
.proyecto-header { margin-bottom: 2.5rem; }
.proyecto-contenido p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--reading-text);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}
.proyecto-contenido h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem,2vw,1.4rem);
    font-weight: 600;
    color: var(--white);
    margin: 2.5rem 0 1rem;
}

/* ── Layout 2 columnas con filas explícitas (P36/P38) — el artículo ocupa
   fila 1-2 en columna 1 (grid-row: span 2, grid-column: 1). Las imágenes
   NO llevan grid-column fijo: el auto-placement de CSS Grid las ubica
   solo en las celdas libres. Como columna 1 está ocupada por el artículo
   en las filas 1-2, las primeras 2 imágenes caen automáticamente en
   columna 2 (una por fila, al lado del texto); desde la fila 3 en
   adelante columna 1 queda libre, así que la 3ª imagen cae en fila 3
   columna 1, la 4ª en fila 3 columna 2, la 5ª en fila 4 columna 1, etc.
   — dos imágenes por fila a ancho completo apenas el artículo termina.
   Para que esto funcione, .proyecto-galeria-col deja de ser un
   contenedor flex propio (eso aislaba sus hijos del grid del padre) y
   pasa a display:contents — sigue existiendo en el DOM (aria-label,
   semántica) pero sus <button> hijos se vuelven celdas directas de
   .proyecto-dos-columnas, participando en la misma grilla de filas
   que el artículo. row-gap separado de column-gap: el primero controla
   el espacio entre imágenes apiladas, el segundo la separación
   artículo↔galería. ── */
.proyecto-dos-columnas {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    column-gap: 3rem;
    row-gap: .75rem;
    align-items: start;
}
.proyecto-article {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.proyecto-galeria-col {
    display: contents;
}
.proyecto-galeria-item {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 6px;
    background: var(--dark-graphite);
}
/* ── P47 — imágenes de columna 1 (izquierda) llenan el alto real de la
   fila en vez de mantener 16/9 fijo. Contexto: desde la 3ª imagen de la
   galería en adelante (una vez que .proyecto-article ya no ocupa esa
   columna, ver P36), el grid reparte 2 por fila en columnas de ancho
   distinto (.8fr/1.2fr). Con aspect-ratio:16/9 fijo en ambas, la de
   columna 1 (más angosta) sale más baja que su par de columna 2 (más
   ancha) — la fila se estira a la más alta y la de columna 1 queda con
   espacio vacío debajo (align-items:start). Acá se sacrifica el 16/9
   fijo SOLO en esas — aspect-ratio:auto + align-self:stretch para que
   tomen el alto real de la fila (definido por su par de columna 2, que
   sigue en 16/9 sin tocar), object-fit:cover en el <img>/<video> interno
   recorta lo necesario sin distorsionar. Selector con especificidad
   propia (0,2,0), sin !important — ver P27.
   Estas son siempre la 3ª, 5ª, 7ª... miniatura (nth-child(2n+3)):
   auto-placement pone la 1ª y 2ª junto al artículo (columna 2), y desde
   la 3ª en adelante columna 1 se libera y empieza a repartir de a 2.
   P16 — 901 → 1024: reevaluado con el método correcto. Capturas de un
   celular ROTADO (landscape) mostraron el mosaico de 2 columnas
   activándose a un ancho que en el resto del sitio (inicio.css, ya
   migrado) sigue tratándose como "tablet, 1 columna" hasta 1024 — un
   celular girado quedaba con un comportamiento distinto al de una
   tablet en el mismo rango de ancho, inconsistente con el resto.
   Bajo 1024 el grid es 1 columna (ver media query más abajo) y esta
   lógica de "columna angosta vs ancha" no existe. ── */
@media (min-width: 1024px) {
    .proyecto-galeria-item:nth-child(2n+3) {
        aspect-ratio: auto;
        align-self: stretch;
        height: auto;
    }
}
.proyecto-galeria-item img,
.proyecto-galeria-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease), opacity .3s;
}
.proyecto-galeria-item:hover img,
.proyecto-galeria-item:hover video {
    transform: scale(1.04);
    opacity: .9;
}
/* P45 — ícono de play centrado sobre la miniatura de video, mismo
   lenguaje visual que el botón "compartir nativo" del share row
   (círculo translúcido, borde sutil). Pointer-events:none — el click
   siempre lo recibe el <button> completo, no el ícono. */
.proyecto-galeria-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16,10,10,.55);
    border: 1px solid rgba(255,252,255,.4);
    color: var(--static-white);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background .2s, transform .2s;
}
.proyecto-galeria-item:hover .proyecto-galeria-play {
    background: var(--red-accent);
    transform: translate(-50%, -50%) scale(1.08);
}

/* ── Modal de galería de proyecto (P33) — separado de .pmodal
   (portfolio-modal.css: ese lleva panel de info de proyecto, este no
   lo necesita). Reutiliza .pmg-track/.pmg-slide/.pmg-btn/.pmg-dots tal
   cual, no están scopeados a .pmodal. Imagen 16/9 (persistencia visual
   con la miniatura, ver acuerdo de aspect ratio único) + leyenda en
   blanco superpuesta, no panel aparte — resuelve P30. ── */
.pgmodal-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(16,10,10,.9);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}
.pgmodal-backdrop.open { opacity: 1; pointer-events: all; }

.pgmodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    z-index: var(--z-modal);
    /* P50/P51 — antes solo limitaba el ancho (1100px / 92vw). Con
       aspect-ratio:16/9 fijo, el alto resultante no tenía techo propio
       contra el alto real de la ventana. Primer intento (P50) usó un
       porcentaje (85vh): en la pantalla más chica de la empresa seguía
       sin dejar margen arriba, porque un % dado dejaba muy poco margen
       absoluto cuando el vh de por sí ya es bajo. Ahora reservo un
       margen FIJO en px (180px repartidos en top+bottom, ~90px cada
       uno) en vez de un %, así el despeje del header nunca depende del
       alto de la ventana — siempre son los mismos ~90px, sea la pantalla
       grande o la más chica que tengan. */
    width: min(1100px, 92vw, calc((100vh - 180px) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: var(--static-black);
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.pgmodal.open {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}
/* .pmg-track/.pmg-slide ya vienen listos de portfolio-modal.css
   (position:relative/absolute, 100%x100%) — sin overrides acá. */

.pgmodal-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 3rem 1.75rem 1.25rem;
    background: linear-gradient(0deg, rgba(16,10,10,.8) 0%, transparent 100%);
    color: var(--static-white);
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.pgmodal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(16,10,10,.75);
    border: 1px solid var(--static-mid-gray);
    color: var(--static-mid-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.pgmodal-close:hover { background: var(--red-accent); border-color: var(--red-accent); color: var(--static-white); }

/* P16 — 900 → 1023, complementario exacto del min-width:1024 de arriba
   (mismo par que ya usa el nav en main.css). */
@media (max-width: 1023px) {
    .proyecto-dos-columnas { grid-template-columns: 1fr; }
    .proyecto-article { grid-column: auto; grid-row: auto; }
}

/* P16 — @media(max-width:700px){.pgmodal{width:96vw}} eliminado: mismo
   criterio que .pmodal en portfolio-modal.css (700 era una convención
   compartida entre ambos archivos para el mismo tipo de componente).
   Contra el 94vw de la fórmula base, la diferencia real en todo el
   rango de celulares era de 6 a 14px de margen lateral —
   imperceptible, no resolvía ningún problema de contenido real. Sin
   necesidad de reemplazarlo por otro breakpoint ni fusionarlo con 768
   — 94vw solo, sin excepción, cubre mobile completo. */

@media (max-width: 680px) {
    .proyecto-content-wrap { padding: 2rem 1.25rem 4rem; }
}