/* =========================
   NUEVE PATIOS (work page)
   SOLO overrides internos
========================= */

.work-page{
  background:#000;
  color:#fff;
}

/* separa del topbar fixed */
.work-main{
  padding-top:clamp(10rem,14vh,16rem);
}

/* ---------- HERO ---------- */
.work-hero{
  padding-bottom:clamp(5rem,7vw,10rem);
}

.hero-patios{
  margin:clamp(7rem,9vh,10rem) auto 0;
  padding:2rem 0;
  width:min(110rem, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.hero-h1{
  margin:0;
  font-family:'CamptonBlack', system-ui, sans-serif;
  text-transform:uppercase;
  font-size:clamp(4.2rem,7vh,10rem);
  line-height:.9;
  letter-spacing:-0.02em;
}

.hero-p{
  margin:1.6rem 0 0;
  width:min(92rem,100%);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.75;
  font-size:clamp(1.15rem,1.2vw,1.45rem);
  opacity:.72;
}

.hero-span{
  margin-left:0;
  opacity:.6;
}

/* <br> solo desktop */
.hero-p br{ display:none; }
@media (min-width:900px){
  .hero-p br{ display:inline; }
}

/* ---------- META ---------- */
.patios-text{
  width:100%;
  margin:0 auto clamp(4rem,6vw,8rem);
}

.patios-parent{
  width:min(168rem, calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  gap:3rem;
  text-align:left;
}

.patios-parent p{ margin:0 0 .6rem; }

.patios-parent span{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.1rem;
  opacity:.65;
}

.patios-parent h2{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-family:'CamptonBold', system-ui, sans-serif;
  font-size:clamp(1.6rem,1.8vw,2.2rem);
}

/* ---------- Copy section ---------- */
.patios-copy{
  width:min(168rem, calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
  padding-bottom:clamp(3.5rem,5vw,7rem);
  text-align:left;
}

.patios-copy h3{
  margin:0 0 1.2rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.2rem;
  opacity:.85;
  font-family:'CamptonBold', system-ui, sans-serif;
}

.patios-copy p{
  margin:0;
  max-width:92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.75;
  font-size:1.25rem;
  opacity:.72;
}

/* =====================================================
   IMÁGENES (columna centrada)
===================================================== */

.work-cover{
  padding:0 0 clamp(4rem,7vw,9rem);
}

.work-cover .container-wide{
  width:min(150rem, calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;

  display:flex;
  flex-direction:column;
  gap:clamp(1.2rem,1.8vw,2.6rem);
}

/* Caja general */
.work-cover figure,
.work-cover .container-wide > div{
  margin:0;
  border-radius:2.4rem;
  overflow:hidden;
  outline:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,0.02);
}

/* Imágenes base */
.work-cover figure img,
.work-cover .container-wide > div > img{
  width:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16 / 9;
}

/* BLOQUE DOBLE */
.work-cover .work-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;

  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:2.4rem;
}

.work-cover .work-pair > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .patios-parent{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }

  .patios-copy{
    text-align:center;
  }

  .patios-copy p{
    margin-inline:auto;
  }

  .work-cover figure img,
  .work-cover .container-wide > div > img{
    aspect-ratio:4 / 3;
  }

  .work-cover .work-pair{
    grid-template-columns:1fr;  /* se apilan */
    aspect-ratio:4 / 3;
  }
}

/* =========================
   MORE WORKS – MARQUEE
========================= */

.work-more{
  padding:0 0 clamp(7rem,10vw,14rem);
}

.work-more .more-marquee{
  position:relative;
  overflow:hidden;
  padding:2.4rem 0 4rem;
  margin-bottom:3rem;
  display:block;
}

.work-more .more-marquee .track{
  display:flex;
  gap:4rem;
  white-space:nowrap;
  will-change:transform;
  animation:moreScroll 16s linear infinite;
  opacity:.95;
}

.work-more .more-marquee .word{
  font-family:'CamptonBlack', system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-size:clamp(4.8rem,6vw,9rem);
  line-height:.9;
}

.work-more .more-marquee .word.opacity{ opacity:.35; }

@keyframes moreScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================
   MORE WORKS – CARDS (texto fuera)
========================= */

.work-more .more-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(2rem,3vw,4rem);
}

.work-more .more-card{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  text-decoration:none;
  color:#fff;
  overflow:visible;
  border-radius:0;
}

.work-more .more-card img{
  width:100%;
  object-fit:cover;
  display:block;
  border-radius:2.4rem;

  height:clamp(22rem,20vw,30rem);
  aspect-ratio:16 / 9;
}

.work-more .more-card .label{
  padding-left:.2rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:1.2rem;
  line-height:1.5;
  color:#fff;
}

.work-more .more-card .label span{
  display:block;
  font-size:1.1rem;
  opacity:.55;
}

/* anti-underline */
.work-more .more-card,
.work-more .more-card *{
  text-decoration:none !important;
  color:inherit;
}

.work-more .more-card:hover img{
  transform:scale(1.03);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

/* Mobile */
@media (max-width:900px){
  .work-more .more-grid{ grid-template-columns:1fr; }

  .work-more .more-card img{
    height:22rem;
    aspect-ratio:4 / 3;
  }
}

@media (max-width:768px){
  .work-more .more-card img{
    height:20rem;
    aspect-ratio:4 / 3;
  }
}

@media (max-width:480px){
  .work-more .more-card img{
    height:18rem;
    aspect-ratio:1 / 1;
  }
}

/* =========================
   WORK PAIR (BASE)
   mismo tamaño que los demás bloques
========================= */
.work-pair{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;                     /* se ve como una sola pieza */
  border-radius: 2.4rem;
  overflow: hidden;

  outline: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,0.02);
}

/* Imágenes */
.work-pair img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;           /* el radio vive en el contenedor */
}

/* =========================
   SINGLE (Giralda)
   MISMO TAMAÑO que las demás
========================= */
.work-pair.is-single{
  grid-template-columns: 1fr;
}

/* Forzamos misma proporción visual */
.work-pair.is-single img{
  aspect-ratio: 16 / 9;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .work-pair{
    grid-template-columns: 1fr;
  }

  .work-pair img{
    aspect-ratio: 4 / 3;
  }
}

/* contenedor máscara: no se mueve, solo recorta */
.work-media{
  border-radius: 2.4rem;
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,0.02);
}

/* la imagen se anima por dentro */
.work-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}