/* ============================================
   PROJECT DETAIL — Split-screen editorial
   ============================================ */

.nuka-project {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  .nuka-project {
    grid-template-columns: 33% 67%;
    align-items: start;
  }
}

/* Info column — scrolls, left side on desktop */
.nuka-project__info {
  padding: var(--space-section-md) var(--padding-x);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Mobile: info below image */
@media (max-width: 767px) {
  .nuka-project__info {
    order: 1;
  }
}

@media (min-width: 768px) {
  .nuka-project__info {
    padding: var(--space-section-md) var(--space-2xl) var(--space-section-md) var(--padding-x);
  }
}

/* Media column — sticky on desktop, image on right */
.nuka-project__media {
  background-color: var(--color-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 50dvh;
  min-height: 50dvh;
  padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
  overflow: hidden;
}

/* Mobile: image on top */
.nuka-project__media {
  order: -1;
  position: relative;
  background-color: var(--color-bg);
  /* El bloque crece lo que mide el nav para que la foto conserve el tamaño del diseño: sin
     esto, dejarle hueco al encabezado se lo quitaba a la imagen. */
  height: calc(45dvh + var(--nav-height));
  min-height: calc(45dvh + var(--nav-height));
  z-index: 1;
  /* La regla de arriba ya reservaba el alto del nav, pero esta la pisaba y en móvil el
     encabezado fijo quedaba tapando la parte superior de la obra. */
  padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .nuka-project__media {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    order: 1;
    z-index: 1;
    padding-top: calc(var(--nav-height) + var(--space-lg));
  }
}

/* Tablet specific */
@media (min-width: 768px) and (max-width: 1024px) {
  .nuka-project__media {
    height: 100vh;
    min-height: 100vh;
  }
}

.nuka-project__media img {
  width: 100%;
  max-height: calc(100vh - var(--nav-height) - var(--space-2xl));
  object-fit: contain;
  display: block;
}

@media (max-width: 767px) {
  .nuka-project__media img {
    max-height: 45vh;
    width: auto;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }
}

/* Más obras header — kicker + h2 left, button right */
.nuka-project__more-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .nuka-project__more-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.nuka-project__more-titles {
  display: flex;
  flex-direction: column;
}

.nuka-project__ficha {
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
}

/* Galería del proyecto dentro de info */
.nuka-project__gallery {
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
}

.nuka-project__gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.nuka-project__gallery-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform var(--transition-mid), filter var(--transition-mid);
}

.nuka-project__gallery-img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* ============================================
   PAGE HERO
   ============================================ */

/* Hero Layout: asymmetric editorial */
.nuka-hero {
  position: relative;
  width: 100%;
  padding-top: calc(var(--nav-height));
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top section: name + meta — asymmetric */
.nuka-hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--padding-x) var(--space-2xl);
  align-items: end;
}

@media (min-width: 768px) {
  .nuka-hero__top {
    grid-template-columns: 1.4fr 1fr;
    padding-top: calc(var(--space-lg) + var(--nav-height));
    padding-bottom: var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  .nuka-hero__top {
    grid-template-columns: 1.618fr 1fr;
  }
}

/* Left: big name */
.nuka-hero__name {
  display: flex;
  flex-direction: column;
}

.nuka-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin: 0;
}

.nuka-hero__title--line {
  display: block;
}

/* Right: meta text + button */
.nuka-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  padding-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .nuka-hero__right {
    align-items: flex-end;
    text-align: right;
  }
}

.nuka-hero__right-text {
  font-family: var(--font-body);
  font-size: var(--text-body-large);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  max-width: 36ch;
}

.nuka-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  padding: 14px 32px;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.nuka-hero__btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  transform: translateY(-2px);
}

/* Slider — full width, below content */
.nuka-hero__slider {
  position: relative;
  width: 100%;
  flex: 1;
  /* 56.25vw es 16:9 sobre el ancho de la ventana. Antes era 50dvh, que en un móvil da una caja
     casi cuadrada —375 × 406— y `object-fit: cover` recortaba a los lados cerca del 40% de una
     fotografía horizontal. Con este suelo el recorte baja al 9%.
     Se conserva `flex: 1` a propósito: el slider sigue absorbiendo el espacio sobrante del hero,
     así que nunca queda una franja vacía debajo. Eso lo deja algo más alto que 16:9 exacto,
     que es el precio de no abrir un hueco de 60px en pantallas altas. */
  min-height: 56.25vw;
  overflow: hidden;
}

@media (min-width: 768px) {
  .nuka-hero__slider {
    min-height: 60vh;
  }
}

.nuka-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.nuka-hero__slide.is-active {
  opacity: 1;
}

/* La imagen sobresale un 15% por arriba porque el parallax la desplaza hacia abajo hasta esa
   misma proporción de la altura del slider. A 100% de alto, ese desplazamiento dejaba una
   franja vacía en la parte superior, de hasta 65px en escritorio. El sobrante queda recortado
   por el overflow del slider mientras no hay scroll. */
.nuka-hero__slide img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* Slider dots */
.nuka-hero__dots {
  position: absolute;
  bottom: var(--space-xl);
  right: var(--padding-x);
  z-index: 2;
  display: flex;
  gap: var(--space-sm);
}

.nuka-hero__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nuka-hero__dot.is-active {
  background-color: var(--color-accent);
}

/* Slider counter */
.nuka-hero__counter {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--padding-x);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}

/* Slider arrows */
.nuka-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nuka-hero__arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.nuka-hero__arrow--prev {
  left: var(--padding-x);
}

.nuka-hero__arrow--next {
  right: var(--padding-x);
}

/* Page hero */
.nuka-page-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-section-md));
  padding-bottom: var(--space-section-md);
  background-color: var(--color-bg);
}

.nuka-page-hero__content {
  padding: 0 var(--padding-x);
}

.nuka-page-hero--minimal {
  padding-top: calc(var(--nav-height) + var(--space-section-sm));
  padding-bottom: var(--space-section-sm);
}

/* Asymmetric layout for page hero — matches nuka-hero__top pattern */
.nuka-page-hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: end;
}

@media (min-width: 768px) {
  .nuka-page-hero__top {
    grid-template-columns: 1.4fr 1fr;
    padding-bottom: var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  .nuka-page-hero__top {
    grid-template-columns: 1.618fr 1fr;
  }
}

.nuka-page-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .nuka-page-hero__right {
    align-items: flex-end;
    text-align: right;
  }
}

/* ============================================
   LOGO OVERLAY FIXED — Blend mode effect
   ============================================ */

.nuka-hero__logo-fixed {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-xl));
  left: var(--padding-x);
  width: 80vw;
  z-index: 9;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.nuka-hero__logo-mask {
  clip-path: inset(0 100% 0 0);
}

@media (min-width: 768px) {
  .nuka-hero__logo-fixed {
    top: 30%;
    left: var(--padding-x);
    transform: translateY(-50%);
    width: 50vw;
  }
}

.nuka-hero__logo-fixed svg {
  width: 100%;
  height: auto;
  display: block;
}

.nuka-hero__logo-fixed path {
  fill: var(--color-accent);
}

/* ============================================
   MARQUEE HERO — Scrolling text strip
   ============================================ */

.nuka-hero__marquee {
  width: 100%;
  overflow: hidden;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-top: auto;
}

.nuka-hero__marquee-text {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}