/* ==========================================================================
   Páginas de caso (una por proyecto)
   Plantilla: clases genéricas caso-* para que sirva a todos los proyectos.
   Ritmo: banda oscura a sangre + hoja crema montada encima, la pieza
   entregada a todo el ancho, el relato a dos columnas, bloques numerados
   y galería que respeta la proporción de cada foto.
   ========================================================================== */

/* ---------- 1 · Banda oscura ---------- */
.caso-cover{
  position:relative;overflow:hidden;isolation:isolate;
  background:#16120E;color:#fff;
}
.caso-page main section.caso-cover{
  padding:calc(104px + clamp(2.2rem,4vw,3.6rem)) 0 clamp(9rem,14vw,13rem);
}
.caso-cover__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.caso-cover__bg i{position:absolute;display:block;border-radius:50%;filter:blur(110px)}
.caso-cover__bg i:nth-child(1){width:44vw;height:44vw;left:-10vw;top:-12vw;background:#e36539;opacity:.5}
.caso-cover__bg i:nth-child(2){width:36vw;height:36vw;right:-6vw;top:4vw;background:#7d9fe4;opacity:.3}
.caso-cover__bg i:nth-child(3){width:32vw;height:32vw;left:36vw;bottom:-16vw;background:#c9962e;opacity:.26}


.caso-cover__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem);align-items:end;
}
.caso-cover__k{
  display:block;font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.caso-page main .caso-cover h1{
  margin:1.4rem 0 0;color:#fff;font-weight:500;
  font-size:clamp(2.9rem,7vw,6rem);letter-spacing:-.055em;line-height:1;
}
.caso-dot{color:#e36539}
.caso-cover__p{
  margin:0 0 .45rem;max-width:44ch;
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.75;color:rgba(255,255,255,.74);
}
.caso-cover__meta{
  display:flex;flex-wrap:wrap;gap:1.4rem 3rem;margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
}
.caso-cover__meta div{display:flex;flex-direction:column;gap:.35rem}
.caso-cover__meta dt,.caso-cover__meta b{
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.caso-cover__meta span{font-size:.9375rem;color:rgba(255,255,255,.88);letter-spacing:-.01em}

/* ---------- 2 · Hoja crema ---------- */
.caso-sheet{
  position:relative;z-index:2;
  margin-top:clamp(-6.5rem,-7vw,-4.5rem);
  background:var(--paper);
  border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0;
  padding-top:clamp(2.4rem,4.5vw,3.8rem);
}

/* La pieza entregada, a todo el ancho */
.caso-page main section.caso-shot{padding-bottom:0}
.caso-shot figure{margin:0}
.caso-shot__marco{
  overflow:hidden;border-radius:clamp(14px,2vw,22px);
  border:1px solid rgba(27,24,21,.1);
  background:rgba(27,24,21,.04);
  aspect-ratio:16/10;
}
.caso-shot__marco img{width:100%;height:100%;object-fit:cover;display:block}
.caso-shot figcaption{
  margin-top:.9rem;font-size:.8125rem;color:var(--gray);
}

/* ---------- 3 · El relato, a dos columnas ---------- */
.caso-relato__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.caso-page main .caso-relato h2{
  margin:0 0 1.1rem;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.045em;line-height:1.15;
}
.caso-relato p{margin:0 0 1rem;color:var(--gray);font-size:1rem;line-height:1.8;max-width:46ch}
.caso-relato p:last-child{margin-bottom:0}

/* Ritmo entre bloques: los contenedores de sección son el sitio donde se
   controla, en vez de dejarlo al relleno genérico de .web-service-page. */
.caso-page main section.caso-relato{padding-top:clamp(3rem,6vw,5rem)}
.caso-page main section.caso-bloques-sec{padding-top:clamp(1rem,2vw,1.6rem)}
.caso-page main section.caso-galeria-sec{padding-top:clamp(1rem,2vw,1.6rem)}

/* ---------- 4 · Bloques numerados ---------- */
.caso-bloques{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.8rem,3.5vw,3rem) clamp(1.6rem,3vw,2.6rem);
}
.caso-bloques>li{border-top:1px solid var(--web-line);padding-top:1.3rem}
.caso-bloque__n{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;
  color:#a89d93;font-variant-numeric:tabular-nums;
}
.caso-page main .caso-bloques h3{
  margin:clamp(1.4rem,2.4vw,2rem) 0 .7rem;
  font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.035em;line-height:1.2;
}
.caso-bloques p{margin:0;color:var(--gray);font-size:.9375rem;line-height:1.75;max-width:42ch}

/* ---------- 5 · Galería ----------
   Todas las fotos a la misma altura. Los anchos los deciden las clases de
   columna, así que igualar alturas exige altura FIJA: una proporción común
   daría alturas distintas al ser distintos los anchos. El recorte lo absorbe
   object-fit:cover. */
.caso-galeria{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  align-items:start;
}
.caso-galeria figure{margin:0;display:flex;flex-direction:column}
.caso-galeria img{
  width:100%;height:clamp(240px,30vw,440px);object-fit:cover;display:block;
  border-radius:clamp(12px,1.6vw,18px);
}
.caso-galeria figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--gray)}
/* Las clases solo deciden el ANCHO (columnas). La proporcion la trae cada
   imagen de sus atributos width/height, asi que ninguna se recorta y no hace
   falta una clase nueva por cada foto de proporcion distinta. */
.caso-foto--alta{grid-column:span 4}
.caso-foto--ancha{grid-column:span 8}
.caso-foto--mitad{grid-column:span 6}
.caso-foto--panoramica{grid-column:span 12}

/* ---------- 6 · Cierre ---------- */
.caso-page main section.caso-end{padding:0 0 clamp(3.5rem,7vw,6rem)}
.caso-end__in{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.2rem 2rem;
  border-top:1px solid var(--web-line);padding-top:clamp(1.8rem,3.5vw,2.6rem);
}
.caso-page main .caso-end h2{
  margin:0;font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-.045em;line-height:1.15;font-weight:500;
}
.caso-end__in>div>p{margin:.5rem 0 0;color:var(--gray);font-size:.9375rem;max-width:40ch}
.caso-volver{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.875rem;font-weight:500;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--web-line);padding-bottom:.3rem;
}
.caso-volver:hover{border-bottom-color:var(--ink)}

/* ---------- Adaptación ---------- */
@media (max-width:900px){
  .caso-cover__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .caso-cover__p{max-width:52ch}
  .caso-relato__grid{grid-template-columns:1fr;gap:2.2rem}
  .caso-relato p{max-width:56ch}
  .caso-bloques{grid-template-columns:1fr;gap:1.8rem}
  .caso-bloques p{max-width:56ch}
  .caso-foto--alta,.caso-foto--ancha,.caso-foto--mitad{grid-column:span 6}
  .caso-shot__marco{aspect-ratio:4/3}
}
@media (max-width:560px){
  .caso-page main section.caso-cover{padding-top:calc(78px + 2.5rem)}
  .caso-sheet{margin-top:-3.5rem}
  .caso-cover__meta{gap:1.1rem 2rem}
  .caso-foto--alta,.caso-foto--ancha,.caso-foto--mitad{grid-column:span 12}
}

/* Los servicios de la ficha enlazan a su página */
.caso-cover__meta a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
.caso-cover__meta a:hover{border-color:#fff}