/* ============================================================
   PROYECTOS.CSS — Página de portafolio completo
   BEM | Tokens del sistema (index.css)
   ============================================================ */

/* Stacking context: el contenido de la página se sienta
   por encima del c-footer-video fijo (z-index: 2)        */
main {
  position: relative;
  z-index: 25;
  background-color: var(--color-primary);
}


/* ============================================================
   1. HERO EDITORIAL — Encabezado de página
   ============================================================ */
.c-proy-hero {
  background-color: var(--color-primary);
  padding-top: calc(var(--space-10) + 80px); /* compensa el header en mobile */
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

@media (min-width: 768px) {
  .c-proy-hero {
    padding-top: calc(var(--space-x-large) + 80px);
    padding-bottom: var(--space-10);
  }
}

.c-proy-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .c-proy-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

.c-proy-hero__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-secondary-medium);
  display: block;
  margin-bottom: var(--space-2);
}

.c-proy-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 7vw, 6rem);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--color-white);
  margin: 0;
}

.c-proy-hero__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--font-weight-light);
  color: var(--color-secondary-medium);
  line-height: 1.7;
  max-width: 400px;
  text-align: right;
  margin: 0;
}

@media (max-width: 768px) {
  .c-proy-hero__desc {
    text-align: left;
    max-width: 100%;
  }
}


/* ============================================================
   2. SENTINEL + LOADER — Infinite scroll
   ============================================================ */
.c-proy-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}

.c-proy-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px;
}

.c-proy-loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-secondary-medium);
  animation: c-proy-loader-bounce 1.2s ease-in-out infinite;
}

.c-proy-loader__dot:nth-child(2) { animation-delay: 0.2s; }
.c-proy-loader__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes c-proy-loader-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}


/* ============================================================
   3. MASONRY — CSS columns
   ============================================================ */
.c-proy-grid-section {
  background-color: var(--color-primary);
  padding-bottom: var(--space-x-large);
}

.c-proy-masonry {
  columns: 3;
  column-gap: 3px;
  padding: 3px;
}

@media (max-width: 1024px) {
  .c-proy-masonry { columns: 2; }
}

@media (max-width: 600px) {
  .c-proy-masonry { columns: 1; }
}


/* ============================================================
   4. TARJETA DE PROYECTO
   ============================================================ */
.c-proy-card {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--color-black);
  cursor: pointer;
  break-inside: avoid;      /* ← evita que el navegador parta una card entre columnas */
  margin-bottom: 3px;       /* gap vertical entre cards */
}

/* La imagen dirige la altura de la card via aspect-ratio inline.
   El aspect-ratio del style="" attribute necesita que el
   elemento tenga ancho definido para calcular la altura. */
.c-proy-card__img {
  width: 100%;
  display: block;
  /* Fallback: si no hay aspect-ratio inline, usa 4/3 */
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Zoom-out en hover (regla del proyecto: solo en hipervínculos) */
.c-proy-card:hover .c-proy-card__img {
  transform: scale(0.96);
}

/* Overlay degradado */
.c-proy-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.9)  0%,
    rgba(10,10,10,0.15) 45%,
    rgba(10,10,10,0)    70%
  );
}

/* Info: siempre visible abajo, se eleva en hover */
.c-proy-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  transform: translateY(4px);
  transition: transform 0.35s ease;
}

.c-proy-card:hover .c-proy-card__info {
  transform: translateY(0);
}

/* Meta línea */
.c-proy-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1); /* was 6px */
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.c-proy-card__tipo,
.c-proy-card__sede,
.c-proy-card__year {
  font-family: var(--font-body);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary-medium);
}

.c-proy-card__sep {
  color: rgba(255,255,255,0.2);
  font-size: 0.63rem;
}

/* Título */
.c-proy-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0 0 var(--space-1);
  line-height: 1.15;
}

/* Área: aparece en hover */
.c-proy-card__area {
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary-medium);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
  display: block;
}

.c-proy-card:hover .c-proy-card__area {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   5. CTA EN CUERPO DE ARCHIVE
   ============================================================ */
.c-archive-cta {
    padding: var(--space-16) 0;
    display: flex;
    justify-content: center;
}

.c-archive-cta__inner {
    display: flex;
    justify-content: center;
}

/* ============================================================
   6. EMPTY STATE
   ============================================================ */
.c-proy-empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--color-secondary-medium);
  font-family: var(--font-body);
  font-size: 0.875rem;
}

/* ============================================================
   7. NAV LINK ACTIVO
   ============================================================ */
.c-nav__link--active {
  color: var(--color-white) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   8. CURSOR PILL GLASS
   ============================================================ */
.c-proy-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    will-change: transform, opacity;
}

.c-proy-cursor.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.c-proy-cursor__text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-white);
}

/* Ocultar cursor del sistema dentro de las tarjetas (solo desktop) */
@media (hover: hover) and (pointer: fine) {
    .c-proy-card {
        cursor: none;
    }
}