/* Scene — Web Showcase: composición editorial de 3 proyectos reales, piedra clara oscureciendo hacia el cierre */

.ws-showcase{
  position:relative;
  background:#E8E6E0;
  padding:clamp(64px,9vh,100px) 8vw clamp(112px,14vh,160px);
  overflow:hidden;
}

.ws-showcase__inner{
  position:relative;
  z-index:1;
  max-width:1360px;
  margin:0 auto;
}

/* ---------- Headline: jerarquía de 3 líneas, línea 2 = masa principal, línea 3 se extiende hacia los proyectos ---------- */

.ws-showcase__heading{
  position:relative;
  z-index:2;
  max-width:min(63%,860px);
  margin:0;
}

.ws-showcase__line{
  display:block;
  font-family:var(--font-clash,'Clash Display',sans-serif);
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.01em;
  color:var(--bryde-color-dark-base,#070707);
}

.ws-showcase__line--1{
  font-size:clamp(1.05rem,.55rem + 1.5vw,1.5rem);
}

.ws-showcase__line--2{
  font-weight:500;
  font-size:clamp(3.03rem,.77rem + 7.26vw,5.61rem);
  margin-top:.04em;
}

.ws-showcase__line--3{
  font-weight:500;
  font-size:clamp(1.81rem,4.69vw,3.36rem);
  margin-top:.12em;
  white-space:nowrap;
}

.ws-showcase__break{ display:none; }
.ws-showcase__line3-tail{ display:inline; }

/* highlight: superficie cobre detrás de "SE PRESENTA"; el texto conserva el grafito del resto de la línea */
.ws-showcase__highlight{
  position:relative;
  display:inline-block;
  padding:.02em .15em .05em;
  margin:0 -.06em;
}
.ws-showcase__highlight-fill{
  position:absolute;
  top:-.03em;
  right:-.07em;
  bottom:-.07em;
  left:-.02em;
  background:#A85F3C;
  border-radius:2px;
  transform-origin:left center;
  transform:scaleX(1);
}
.ws-showcase__highlight-text{
  position:relative;
  z-index:1;
}

/* ---------- Composición: FC10 principal, entra en el territorio de la línea 3; Z Fitness / Mika complementan ---------- */

.ws-showcase__stage{
  position:relative;
  width:100%;
  margin-top:clamp(-150px,-10vw,-96px);
  height:clamp(680px,58vw,900px);
}

.ws-piece{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  will-change:transform,opacity;
  transition:transform .3s ease;
}

.ws-piece__frame{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#D8D6CE;
  border:1px solid rgba(20,19,16,.1);
  box-shadow:0 26px 54px rgba(20,19,16,.16);
  transition:box-shadow .35s ease;
}

.ws-piece__frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .5s ease;
}

.ws-piece__label{
  font-family:var(--font-cabinet,'Cabinet Grotesk',sans-serif);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#57564F;
  transition:color .3s ease;
}

.ws-piece:hover .ws-piece__label,
.ws-piece:focus-visible .ws-piece__label{
  color:#141310;
}

.ws-piece:focus-visible{
  outline:2px solid #A85F3C;
  outline-offset:6px;
  border-radius:14px;
}

.ws-piece:hover .ws-piece__frame img,
.ws-piece:focus-visible .ws-piece__frame img{
  transform:scale(1.015);
}

/* FC10 — pieza principal, ancla visual, entra al territorio de "SE PRESENTA AL MUNDO." */
.ws-piece--fc10{
  left:2%;
  top:24%;
  width:60%;
  z-index:3;
}
.ws-piece--fc10 .ws-piece__frame{ aspect-ratio:4/3; }

/* Z Fitness — secundaria, arriba/derecha del bloque tipográfico */
.ws-piece--zfitness{
  right:2%;
  top:2%;
  width:26%;
  z-index:2;
}
.ws-piece--zfitness .ws-piece__frame{ aspect-ratio:16/11; }

/* Mika — terciaria, cierra la composición abajo */
.ws-piece--mika{
  right:13%;
  bottom:0;
  width:20%;
  z-index:4;
}
.ws-piece--mika .ws-piece__frame{ aspect-ratio:4/3; }

/* Laptop y desktop medio: la columna derecha debe completar la composición,
   no convertirse en una reserva de blanco. FC10 conserva la masa dominante. */
@media (min-width:821px) and (max-width:1500px){
  .ws-showcase__stage{
    height:clamp(660px,62vw,810px);
  }
  .ws-piece--fc10{
    left:1%;
    top:22%;
    width:62%;
  }
  .ws-piece--zfitness{
    right:0;
    top:7%;
    width:32%;
  }
  .ws-piece--mika{
    right:1%;
    bottom:2%;
    width:28%;
  }
}

/* la jerarquía viene 100% de la pieza activa: escala leve + z-index + sombra,
   las vecinas mantienen su opacidad y color natural (sin apagar vecinos) */
.ws-piece.is-active{
  z-index:5;
  transform:scale(1.015);
}
.ws-piece.is-active .ws-piece__frame{
  box-shadow:0 34px 68px rgba(20,19,16,.22);
}

/* ---------- CTA ---------- */

.ws-showcase__cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:clamp(28px,4vh,44px);
  font-family:var(--font-cabinet,'Cabinet Grotesk',sans-serif);
  font-weight:500;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#141310;
  text-decoration:none;
  border-bottom:1px solid rgba(20,19,16,.28);
  padding-bottom:4px;
  transition:border-color .25s ease,gap .25s ease,color .25s ease;
}
.ws-showcase__cta:hover{
  border-color:#A85F3C;
  color:#A85F3C;
  gap:12px;
}
.ws-showcase__cta-arrow{ transition:transform .25s ease; }
.ws-showcase__cta:hover .ws-showcase__cta-arrow{ transform:translateX(2px); }

/* ---------- Mobile ---------- */

@media (max-width:820px){
  .ws-showcase{
    padding:clamp(52px,8vh,72px) 7vw clamp(80px,11vh,112px);
  }

  .ws-showcase__heading{
    max-width:none;
  }

  .ws-showcase__line--1{ font-size:clamp(1.15rem,.62rem + 2.4vw,1.5rem); }
  .ws-showcase__line--2{ font-size:clamp(2.31rem,.61rem + 7.7vw,3.19rem); }
  .ws-showcase__line--3{ font-size:clamp(1.86rem,.43rem + 6.39vw,2.66rem); white-space:normal; }

  .ws-showcase__break{ display:block; }
  .ws-showcase__line3-tail{ display:block; margin-top:.08em; }

  .ws-showcase__stage{
    height:auto;
    margin-top:clamp(28px,5vh,40px);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
  }

  .ws-piece{
    position:static;
    width:100%;
  }
  .ws-piece--fc10{ width:91vw; align-self:center; order:1; }
  .ws-piece--zfitness{ width:74vw; align-self:flex-end; order:2; margin-top:-34px; }
  .ws-piece--mika{ width:62vw; align-self:flex-start; order:3; margin-top:-28px; }

  .ws-showcase__cta{ margin-top:clamp(32px,5vh,44px); }
}

@media (prefers-reduced-motion:reduce){
  .ws-piece,.ws-piece__frame,.ws-piece__frame img,.ws-piece__label,.ws-showcase__line,.ws-showcase__highlight-fill{ transition:none!important; }
}