/* ============================================================
   proyecto.css — Fichas de proyecto (trabajos/<slug>.html)
   Carga: base → nav → footer → index → services → proyecto → whatsapp
   Componentes propios: hero compacto, breadcrumb, ficha de datos,
   comparador ancho, galería con lightbox. Todo sobre los tokens de base.css.
   ============================================================ */

/* Hero más bajo que el de las portadas: es una página interior */
.hero--project { min-height: 72vh; }

/* Breadcrumb sobre el hero */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .85rem; color: rgba(255,255,255,.78); }
.breadcrumb li + li::before { content: "›"; margin-right: .35rem; opacity: .7; }
.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 500; }

/* Ficha rápida */
.project-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); box-shadow: var(--shadow-sm); }
.project-facts > div { min-width: 0; }
.project-facts dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--green-700); margin-bottom: .4rem; }
.project-facts dd { margin: 0; color: var(--color-ink); font-weight: 500; line-height: 1.45; }
.project-facts dd a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
/* Variante integrada en «El trabajo» (split-body): dos columnas, más compacta */
.project-facts--inline { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; margin-top: 1.75rem; padding: 1.25rem 1.5rem; }

/* Galería */
.gallery-item { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface-alt); }
.gallery-item .card-media { display: block; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
.gallery-group { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.gallery-group h3 { margin-bottom: .5rem; }

/* Lightbox (dialog nativo, lo inyecta js/main.js → initLightbox) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(21,24,28,.94); }
.lightbox__figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; padding: 3.5rem 4.5rem 2.5rem; box-sizing: border-box; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lightbox__figure figcaption { color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; max-width: 70ch; }
.lightbox__close, .lightbox__nav { position: fixed; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 960px) {
  .project-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero--project { min-height: 60vh; }
  .lightbox__figure { padding: 4rem 1rem 2rem; }
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}
@media (max-width: 520px) {
  .project-facts, .project-facts--inline { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item:hover img { transform: none; }
}