/* ============================================================
   PROYECTOS.css
   Diseño de las fichas de proyecto: /proyectos/algo/
   Todos los proyectos (actuales y futuros) comparten este
   mismo archivo — no hace falta tocar el PHP al añadir uno nuevo,
   basta con que la URL empiece por /proyectos/.

   El CTA final "¿Hablamos?" de estas páginas usa el componente
   compartido .contact-section / .contact-heading (definido en
   style.css), no un estilo propio — por eso no hay aquí ningún
   .proyecto-cta-hablamos.
   ============================================================ */


/* Cabecera centrada */
.proyecto-cabecera-centrada {
  padding: 3.5rem 1rem 2.5rem;
  text-align: center;
}

.proyecto-kicker-centrado {
  font-size: 13px;
  color: #86847c;
  letter-spacing: 0.02em;
  margin: 14px 0 10px !important;
}

/* Reutiliza la fuente manuscrita ya definida por la clase "manual" del
   tema (la misma del home). Solo tocamos color, porque en home va sobre
   fondo oscuro y aquí el fondo es claro. Si el tema fija el color con
   más especificidad que esto, sube el peso con !important.
   El desplazamiento y la ligera rotación son el efecto "firma casual"
   solapada sobre el H1, como en home. Usamos % en vez de px para que
   no se descuadre en pantallas distintas. */
.proyecto-manual {
  color: #1a1a18 !important;
  margin: 0 0 -10px !important;
  transform: rotate(2deg) translateX(8%);
  position: relative;
  z-index: 1;
}

@media (max-width: 560px) {
  .proyecto-manual {
    transform: rotate(1deg) translateX(2%);
    margin: 0 0 -4px !important;
  }
}

.proyecto-titulo-centrado {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  color: #1a1a18;
  margin: 0 !important;
  position: relative;
}

.proyecto-subtitulo-centrado {
  font-size: 17px;
  line-height: 1.6;
  color: #55534c;
  margin: 0 auto !important;
  max-width: 560px;
}

/* Fila principal: texto + ficha de equipo */
.proyecto-fila-principal {
  max-width: 900px;
  margin: 0 auto 3rem !important;
  gap: 40px !important;
}

.proyecto-texto-principal {
  font-size: 16px;
  line-height: 1.75;
  color: #29281f;
}

.proyecto-texto-principal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b4b2a9;
  text-underline-offset: 3px;
}

.proyecto-texto-principal a:hover {
  text-decoration-color: currentColor;
}

/* Ficha de equipo utilizado */
.proyecto-equipo {
  background: #f5f4f0;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}

.proyecto-equipo-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #86847c;
  margin: 0 0 14px !important;
}

.proyecto-equipo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #29281f;
  margin: 0 0 10px !important;
}

.proyecto-equipo-item:last-child {
  margin-bottom: 0 !important;
}

.proyecto-equipo-icono {
  display: inline-flex;
  flex-shrink: 0;
  color: #ED1F28;
}

/* Galería masonry por columnas — genera irregularidad de forma natural
   porque cada columna fluye de forma independiente, sin filas fijas.
   Fotos a 4:3 (equivalente a 600x450), vídeos a 2:1 (equivalente a
   600x300), sin necesidad de subir los archivos ya recortados así. */
.proyecto-masonry {
  max-width: 1100px;
  margin: 0 auto 3rem !important;
}

.proyecto-masonry > .wp-block-group__inner-container {
  column-count: 3 !important;
  column-gap: 22px !important;
}

.proyecto-masonry-item {
  break-inside: avoid !important;
  margin: 0 0 22px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  display: block !important;
}

.proyecto-masonry-item img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 2px !important;
}

.proyecto-masonry-item video {
  width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 2px !important;
}

/* Pieza discreta: se ve más pequeña dentro de su propia columna,
   centrada, en vez de ocupar el ancho completo de la columna. Útil
   para material de menor calidad que no quieres que destaque. */
.proyecto-masonry-pequena img,
.proyecto-masonry-pequena video {
  width: 65% !important;
  margin: 0 auto !important;
}

/* Pieza vertical: para fotos o vídeos en formato retrato, en vez de
   forzarlos a la proporción horizontal (que los recortaría fatal).
   Úsala junto a proyecto-masonry-item, no en lugar de ella. */
.proyecto-masonry-vertical img,
.proyecto-masonry-vertical video {
  aspect-ratio: 9 / 16 !important;
}

/* Pieza protagonista ocasional: rompe las 3 columnas y ocupa todo el
   ancho. Añádela a mano con la clase "proyecto-masonry-grande" cuando
   quieras destacar una pieza en concreto (opcional, no hace falta
   usarla en todas). */
.proyecto-masonry-grande {
  column-span: all !important;
}

.proyecto-masonry-grande img,
.proyecto-masonry-grande video {
  aspect-ratio: 21 / 9 !important;
}

@media (max-width: 700px) {
  .proyecto-masonry > .wp-block-group__inner-container {
    column-count: 2 !important;
  }
}

@media (max-width: 480px) {
  .proyecto-masonry > .wp-block-group__inner-container {
    column-count: 1 !important;
  }
}