/* ==========================================================================
   Refreska — lista de proyectos y fichas de proyecto.
   Reutiliza los tokens de base.css y la galería aprobada de home.css.
   Sin degradados nuevos. Breakpoints: 991px · 767px · 479px.
   ========================================================================== */

/* ---------- Cabecera oscura bajo la barra fija ---------- */
.pj-top { position: relative; padding: 10rem 0 4rem; background: #000; color: #fff; }
/* Cabecera de ficha: imagen del propio proyecto, ya difuminada en el archivo, bajo una capa negra plana (sin degradados) */
.pj-top--img { display: flex; align-items: flex-end; min-height: min(36rem, 74vh); overflow: hidden; isolation: isolate; }
.pj-top--img > .wrap { position: relative; width: 100%; }
.pj-top__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pj-top__shade { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }
.pj-top--img .pj-top__title, .pj-top--img .pj-top__lead, .pj-top--img .tagline { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.pj-top--img .pj-tag { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .45); }
/* Cabeceras sin imagen: azul corporativo (listado del blog) y negro con el fondo del Home (contacto y artículos) */
.pj-top--azul { background: var(--blue); }
.pj-top--azul .tagline { color: rgba(255, 255, 255, .86); }
.pj-top--azul .pj-top__lead { color: #fff; }
.pj-top--glow { background: #000 url(/assets/img/hero-bg.avif) 50% 100% / cover no-repeat; }
.pj-top__tag .tagline { color: var(--mute-dark); font-family: var(--inter); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; }
.pj-top__title { max-width: 52rem; margin: .65rem 0 1rem; color: #fff; font-family: var(--slab); font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.12; }
.pj-top__lead { max-width: 44rem; color: #e9ecf5; font-family: var(--inter); font-size: 1.0625rem; line-height: 1.65; }
.pj-top__lead p { margin: 0 0 .85rem; }
.pj-top__lead p:last-child { margin-bottom: 0; }
.pj-top__lead ul { margin: 0 0 .85rem; padding-left: 1.2rem; }
div.pj-top__lead, p.pj-top__lead { margin: 0; }
.pj-top__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Etiquetas de servicios: píldoras que se elevan y se iluminan al pasar, y entran en cascada al aparecer */
.pj-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.pj-tag {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid #3a3a3a;
  border-radius: 100px;
  color: #fff;
  font-family: var(--inter);
  font-size: .875rem;
  line-height: 1.6;
  cursor: default;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.pj-tag:hover { transform: translateY(-2px); border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Sector del cliente: etiqueta aparte de los servicios realizados (solo informa; no es un enlace ni un filtro) */
.pj-sector { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin: 1.75rem 0 0; color: rgba(255, 255, 255, .8); font-family: var(--inter); font-size: .875rem; line-height: 1.6; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.pj-sector__label { letter-spacing: .01em; }
.pj-sector__value { display: inline-block; padding: .3rem .85rem; border-radius: 100px; background: #fff; color: #000; font-weight: 600; text-shadow: none; }
.pj-sector__value--extra { border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; font-weight: 500; }
.pj-sector + .pj-tags { margin-top: .85rem; }

/* ---------- Imagen principal ---------- */
.pj-hero { padding: 16px 16px 0; background: #fff; }
.pj-hero__img { width: 100%; height: auto; background: #f1f2f6; }

/* ---------- Galería de la ficha: casi a todo el ancho (16 px de margen y 16 px entre imágenes), sin esquinas redondeadas ---------- */
.pj-gallery-sec { padding: 16px 0 0; background: #fff; }
.pj-gallery { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0 16px; list-style: none; }
.pj-row { display: flex; gap: 16px; margin: 0; padding: 0; }
/* Cada imagen crece según su proporción: las dos de una fila quedan siempre a la misma altura, sin recortar */
.pj-gallery__link { display: block; flex: var(--ar, 1.7778) 1 0; min-width: 0; overflow: hidden; background: #f1f2f6; cursor: zoom-in; text-decoration: none; }
.pj-gallery__link img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.pj-gallery__link:hover img { transform: scale(1.02); }

/* ---------- Sección de texto (alineada a la izquierda, como la cabecera) ---------- */
.pj-text { padding: 5rem 0 3rem; background: #fff; }
.pj-text__inner { max-width: 44rem; margin: 0; }
.pj-text__title { margin: 0 0 1.25rem; color: #000; font-family: var(--slab); font-size: clamp(1.7rem, 3vw, 2.375rem); font-weight: 600; line-height: 1.15; }
.pj-text__body { color: #242424; font-family: var(--inter); font-size: 1.0625rem; line-height: 1.7; }
.pj-text__body a { display: inline; color: var(--blue); text-underline-offset: 3px; }
.pj-text__body p { margin: 0 0 1rem; }
.pj-text__body ul, .pj-text__body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.pj-text__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.pj-text__ask { margin: 0; color: #000; font-family: var(--inter); font-size: 1rem; font-weight: 600; line-height: 1.5; }

/* ---------- Video (el reproductor de YouTube se carga solo al pulsar) ---------- */
.pj-video { padding: 16px 16px 0; background: #fff; }
.pj-video__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.pj-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pj-video__play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; color: #fff; cursor: pointer; }
.pj-video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pj-video__play:hover img { transform: scale(1.02); }
.pj-video__icon { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 50%; background: rgba(0, 0, 0, .72); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.pj-video__icon::before { content: ""; margin-left: .3rem; border-left: 1.1rem solid #fff; border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; }
.pj-video__play:hover .pj-video__icon, .pj-video__play:focus-visible .pj-video__icon { background: var(--blue); transform: scale(1.06); }
.pj-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ---------- Llamado a la acción ---------- */
.pj-cta { padding: 3rem 0 6rem; background: #fff; }
.pj-cta__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; background: var(--blue); color: #fff; }
.pj-cta__title { max-width: 32rem; margin: 0; color: #fff; font-family: var(--slab); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.15; }

/* ---------- Más proyectos: tarjetas bajas y minimalistas sobre negro ---------- */
.pj-more { padding: 6rem 0; background: #000; color: #fff; }
.pj-more__title { margin: 0 0 2rem; color: #fff; font-family: var(--slab); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.15; }
.pj-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pj-more__card { display: block; color: #fff; text-decoration: none; }
.pj-more__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.pj-more__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pj-more__card:hover .pj-more__media img, .pj-more__card:focus-visible .pj-more__media img { transform: scale(1.03); }
.pj-more__name { display: block; margin-top: .85rem; color: #fff; font-family: var(--slab); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.pj-more__sub { display: block; margin-top: .15rem; color: var(--mute-dark); font-family: var(--inter); font-size: .875rem; line-height: 1.45; }
.pj-more__card:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

/* ---------- Visor de imágenes (lightbox) ---------- */
.pj-lightbox { width: 100%; max-width: 100vw; height: 100%; max-height: 100vh; padding: 0; border: 0; background: transparent; }
.pj-lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.pj-lightbox__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3.5rem 1rem; }
.pj-lightbox__inner img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pj-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.75rem; line-height: 1; transition: background-color .2s; }
.pj-lightbox__btn:hover, .pj-lightbox__btn:focus-visible { background: rgba(255, 255, 255, .3); }
.pj-lightbox__close { top: 1rem; right: 1rem; }
.pj-lightbox__prev { top: 50%; left: 1rem; transform: translateY(-50%); }
.pj-lightbox__next { top: 50%; right: 1rem; transform: translateY(-50%); }
.pj-lightbox :focus-visible { outline-color: #fff; }

@media (max-width: 991px) {
  .pj-top { padding: 8.5rem 0 3.5rem; }
  .pj-more { padding: 5rem 0; }
  .pj-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pj-top { padding: 7.5rem 0 3rem; }
  .pj-top__lead { font-size: 1rem; }
  .pj-hero { padding: 12px 12px 0; }
  .pj-video { padding: 12px 12px 0; }
  .pj-gallery { gap: 12px; padding: 0 12px; }
  .pj-row { flex-direction: column; gap: 12px; }
  .pj-gallery__link { flex: none; }
  .pj-text { padding: 3.5rem 0 2rem; }
  .pj-cta { padding-bottom: 4rem; }
  .pj-more { padding: 4rem 0; }
  /* «Más proyectos» en móvil: una fila que se desliza con el dedo dentro del módulo; la siguiente tarjeta asoma para indicarlo */
  .pj-more__grid { display: flex; gap: 12px; margin: 0 -5vw; padding: 0 5vw 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 5vw; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pj-more__grid::-webkit-scrollbar { display: none; }
  .pj-more__grid > li { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
  .pj-top--img { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-gallery__link img, .pj-video__play img, .pj-more__media img, .pj-tag { transition: none; }
  .pj-tag:hover, .pj-gallery__link:hover img, .pj-more__card:hover .pj-more__media img { transform: none; }
}