/* ==========================================================================
   CIFRE MEDIA — Páginas internas: cabeceras, galería, lightbox, contacto, 404.
   Depende de tokens.css + home.css.
   ========================================================================== */

/* ---------- Cabecera de página ---------- */
.page-head { padding-top: calc(74px + var(--section-y)); padding-bottom: var(--sp-5); }
.page-head__title { max-width: 16ch; text-wrap: balance; }
.page-head__lead { margin-top: var(--sp-3); max-width: 48ch; color: var(--grey); font-size: clamp(1rem, 1.4vw, 1.25rem); }
.empty-state { color: var(--grey); font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 800; padding-block: var(--sp-6); }

.works__grid--full, .blog__grid--full { margin-top: 0; }

/* ---------- Servicios (página) ---------- */
.services__pillar-lead { color: var(--grey); max-width: 60ch; margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.services__secondary--page { margin-top: var(--sp-3); }

/* ---------- Nosotros ---------- */
.about-page__bio { margin-top: var(--sp-3); max-width: 62ch; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--white); }
.about-page__stats { border-block: 1px solid var(--line); padding-block: var(--sp-5); }

/* ---------- Página de proyecto + galería ---------- */
.project__head { padding-top: calc(74px + var(--sp-5)); padding-bottom: var(--sp-4); }
.project__back { display: inline-block; margin-bottom: var(--sp-4); color: var(--grey); transition: color .3s var(--ease); }
.project__back:hover { color: var(--yellow); }
.project__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.project__tag { background: var(--carbon-800); padding: 0.35rem 0.7rem; border-radius: var(--r-sm); color: var(--white); }
.project__title { max-width: 18ch; }
.project__desc { margin-top: var(--sp-3); max-width: 60ch; color: var(--grey); font-size: clamp(1rem, 1.3vw, 1.2rem); }

.project__gallery {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
    padding-bottom: var(--section-y);
}
.gallery-item { overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); cursor: pointer; margin: 0; }
.gallery-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.gallery-item:hover .gallery-item__img { transform: scale(1.04); }
/* Piezas que abarcan el ancho completo, ritmo editorial */
.gallery-item:nth-child(5n+1) { grid-column: 1 / -1; }
.gallery-item--video { grid-column: 1 / -1; cursor: default; }

/* Barras letterbox (cine) alrededor de piezas de video */
.is-letterbox { position: relative; background: var(--carbon-950); }
.is-letterbox::before, .is-letterbox::after {
    content: ""; position: absolute; left: 0; right: 0; height: 6%; background: var(--carbon-950); z-index: 2; pointer-events: none;
}
.is-letterbox::before { top: 0; } .is-letterbox::after { bottom: 0; }

.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-item--video video { width: 100%; border-radius: var(--r-md); display: block; }

/* Navegación prev/next entre proyectos */
.project__nav { display: flex; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--section-y); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.project__nav-link { display: flex; flex-direction: column; gap: 0.4rem; transition: transform .3s var(--ease); }
.project__nav-link--next { text-align: right; margin-left: auto; }
.project__nav-link:hover { transform: translateY(-3px); }
.project__nav-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); }
.project__nav-link:hover .project__nav-name { color: var(--yellow); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 10001; background: color-mix(in srgb, var(--carbon-950) 96%, transparent); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: var(--gutter); }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 48px; height: 48px; font-size: 1.3rem; color: var(--white); border: 1px solid var(--line); border-radius: 50%; background: var(--carbon-900); }
.lightbox__close:hover { border-color: var(--yellow); color: var(--yellow); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 2rem; color: var(--white); background: color-mix(in srgb, var(--carbon-900) 70%, transparent); border-radius: 50%; }
.lightbox__nav:hover { color: var(--yellow); }
.lightbox__nav--prev { left: var(--sp-3); } .lightbox__nav--next { right: var(--sp-3); }
.lightbox__counter { position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%); color: var(--grey); }
@media (max-width: 720px) { .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; } }

/* ---------- Transición diafragma ---------- */
.diaphragm { position: fixed; inset: 0; z-index: 10050; background: var(--carbon-950); pointer-events: none; clip-path: circle(0% at var(--dx, 50%) var(--dy, 50%)); }
.diaphragm.is-expanding { clip-path: circle(150% at var(--dx, 50%) var(--dy, 50%)); transition: clip-path .55s var(--ease); }
.diaphragm.is-contracting { clip-path: circle(0% at var(--dx, 50%) var(--dy, 50%)); transition: clip-path .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .diaphragm { display: none; } }

/* ---------- Post ---------- */
.post__wrap { max-width: 780px; margin-inline: auto; padding-top: calc(74px + var(--sp-4)); }
.post__date { display: block; margin-bottom: var(--sp-2); }
.post__title { margin-bottom: var(--sp-4); text-wrap: balance; }
.post__cover { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--sp-4); }
.post__video { margin-bottom: var(--sp-4); }
.post__body { font-size: 1.15rem; line-height: 1.75; color: var(--white); }
.post__body p { margin-bottom: var(--sp-3); }
.post__body p { color: #d8d5cc; }

/* ---------- Contacto ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-6); align-items: start; }
.contact__channels { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact__wa { align-self: flex-start; font-size: 1rem; padding: 1rem 1.75rem; }
.contact__detail .label { color: var(--grey-dim); margin-bottom: 0.3rem; }
.contact__detail a { color: var(--white); font-size: 1.1rem; transition: color .3s var(--ease); }
.contact__detail a:hover { color: var(--yellow); }
.contact__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field .label { color: var(--grey); }
.field input, .field textarea {
    background: var(--carbon-900); border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--white); font-family: var(--font-ui); font-size: 1rem; padding: 0.85rem 1rem; resize: vertical;
    transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.contact__form .btn { align-self: flex-start; margin-top: var(--sp-2); }
.contact__error { color: var(--yellow); border: 1px solid var(--line); border-left: 3px solid var(--yellow); padding: 0.85rem 1rem; border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.contact__ok { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-5); background: var(--carbon-900); border: 1px solid var(--line); border-radius: var(--r-md); }
.contact__ok h2 { font-size: var(--fs-h3); }
.contact__ok p { color: var(--grey); }

/* ---------- 404 ---------- */
.error404 { min-height: 72vh; display: flex; align-items: center; }
.error404__inner { text-align: center; margin-inline: auto; max-width: 40ch; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.error404__meta { display: flex; align-items: center; gap: 0.6rem; }
.error404__code { font-size: clamp(6rem, 22vw, 16rem); line-height: 0.9; }
.error404__text { color: var(--grey); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .project__gallery { grid-template-columns: 1fr; }
    .gallery-item:nth-child(5n+1) { grid-column: auto; }
    .contact__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}