/* ==========================================================================
   Instalaciones · 5 zonas en composiciones alternadas y solapadas
   Ritmo: hueso (01) → papel (02) → hueso (03) → grafito a sangre (04, la sala principal) → papel (05)
   Móvil: foto a sangre 3:2 + número grande y texto; sin rejillas.
   ========================================================================== */

/* --- Índice de zonas en la cabecera --- */
.zidx ol { display: flex; flex-wrap: wrap; gap: 6px; }
.zidx a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line-dark); font: 600 .8125rem/1 var(--text); color: rgba(245, 242, 236, .86);
  transition: background-color .35s, color .35s, box-shadow .35s; }
.zidx a .num { font-size: .6875rem; color: var(--bronze-hi); letter-spacing: .08em; transition: color .35s; }
.zidx a:hover { background: var(--bone); color: var(--ink); box-shadow: none; }
.zidx a:hover .num { color: var(--bronze-deep); }

/* --- Zona: piezas comunes --- */
.area { --mask: var(--bone); position: relative; background: var(--bone); padding: clamp(48px, 7vw, 120px) 0; scroll-margin-top: var(--header-h); }
.area--b, .area--e { --mask: var(--paper); background: var(--paper); }
.area__in { position: relative; align-items: start; }
.area__media { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 3 / 2; background: var(--ink-3); }
.area__media .plx { height: 100%; }
.area__img { width: 100%; height: 100%; object-fit: cover; }
.area__copy { position: relative; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); align-items: start; padding-top: var(--s3); }
.area__n { grid-row: 1 / span 3; font: 400 clamp(3.5rem, 17vw, 11rem)/.78 var(--display); font-stretch: 140%; letter-spacing: -.05em; color: var(--bronze); }
.area__k { color: var(--muted); margin-top: 4px; }
.area__title { margin-top: var(--s1); font-size: clamp(1.5rem, 6.4vw, 3.4rem); font-stretch: 115%; line-height: .95; letter-spacing: -.025em; }
.area__text { margin-top: var(--s2); max-width: 38ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.area__detail { position: relative; z-index: 2; aspect-ratio: 1 / 1; background: var(--ink-3); box-shadow: var(--shadow-deep); }
.area__detail img { width: 100%; height: 100%; object-fit: cover; }
.area__detail figcaption { position: absolute; z-index: 4; left: 0; bottom: 0; padding: 8px 10px; background: var(--ink); color: var(--bone); font-size: .625rem; }

/* Sala principal: bloque grafito con la foto a todo el ancho y la barra en su borde inferior */
.area--main { --mask: var(--ink-2); background: var(--ink-2); color: var(--bone); }
.area--main .area__k { color: var(--muted-dark); }
.area--main .area__text { color: rgba(245, 242, 236, .8); }
.area--main .area__copy::before { content: ""; position: absolute; top: 0; height: 6px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: var(--bronze); }

@media (max-width: 899px) {
  .area--a .area__media { grid-row: 1; }
  .area--a .area__detail { grid-row: 1; grid-column: 3 / -1; align-self: end; margin: 0 calc(-1 * var(--gutter) + 12px) -28px 0;
    border: 4px solid var(--bone); box-shadow: var(--shadow-soft); }
  .area--a .area__copy { padding-top: var(--s5); }
  .area--main .area__copy { padding-top: var(--s4); }
  .area__title { font-size: clamp(1.4rem, 6.4vw, 2rem); }
  .area__text { font-size: 1rem; }
}

/* --- Escritorio: cada zona con su composición --- */
@media (min-width: 900px) {
  .ih + .areas .area:first-child { padding-top: calc(clamp(48px, 6vw, 96px) + var(--s10)); }
  .area__copy { display: block; padding-top: 0; }
  .area__n { display: block; }
  .area__k { margin-top: var(--s3); }
  .area__title { margin-top: var(--s2); font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .area__text { margin-top: var(--s3); }

  /* 01 Recepción: foto grande a sangre por la izquierda + detalle solapado; texto en columna estrecha */
  .area--a .area__media { grid-column: 1 / span 8; grid-row: 1; margin: 0 0 0 calc(-1 * var(--edge)); aspect-ratio: 3 / 2;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
  .area--a .area__detail { grid-column: 7 / span 3; grid-row: 1; align-self: end; margin-bottom: calc(-1 * var(--s12)); aspect-ratio: 4 / 5; }
  .area--a .area__detail figcaption { font-size: .6875rem; padding: 10px 14px; }
  .area--a .area__copy { grid-column: 10 / span 3; grid-row: 1; padding-top: var(--s4); }
  .area--a { padding-bottom: calc(clamp(48px, 7vw, 120px) + var(--s12)); }

  /* 02 Entreno libre: texto a la izquierda, foto a sangre por la derecha; la barra entra en la foto */
  .area--b .area__copy { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
  .area--b .area__media { grid-column: 5 / -1; grid-row: 1; margin: 0 calc(-1 * var(--edge)) 0 0; aspect-ratio: 16 / 10;
    clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); }
  .area--b .area__k::before, .area--e .area__k::before { content: ""; position: absolute; z-index: 4; left: calc(-1 * var(--edge)); height: 6px; margin-top: -22px;
    width: calc(var(--edge) + 100% + var(--s16)); background: var(--bronze); }
  .area--b .area__k, .area--e .area__k { position: relative; }

  /* 03 Grupo reducido: foto contenida con corte; el número gigante la invade desde la derecha */
  .area--c .area__media { grid-column: 1 / span 7; grid-row: 1; margin: 0; aspect-ratio: 4 / 3;
    clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); }
  .area--c .area__copy { grid-column: 8 / span 5; grid-row: 1; align-self: end; padding-left: var(--s4); }
  .area--c .area__n { margin-left: calc(-1 * var(--s4) - .42em); }

  /* 04 Sala principal: foto a todo el ancho y texto en tres columnas bajo la barra */
  .area--main .area__media { grid-column: 1 / -1; margin: 0 calc(-1 * var(--edge)); aspect-ratio: 21 / 9; }
  .area--main .area__copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: var(--s6); }
  .area--main .area__copy::before { left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge)); }
  .area--main .area__n { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .area--main .area__k { grid-column: 4 / span 5; grid-row: 1; margin-top: var(--s1); }
  .area--main .area__title { grid-column: 4 / span 5; grid-row: 2; }
  .area--main .area__text { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; margin: 0; }
  .area--main { padding-top: 0; }

  /* 05 Vestuarios: texto a la izquierda, foto vertical recortada y desplazada */
  .area--e .area__copy { grid-column: 1 / span 5; grid-row: 1; align-self: center; }
  .area--e .area__media { grid-column: 7 / span 5; grid-row: 1; margin: 0; aspect-ratio: 4 / 5; box-shadow: var(--shadow-deep);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
}