/* =========================================================
   BLOQUES DE CONTENIDO — cada tipo de layout del capítulo
   lead · numbers · editorial · split · grid · overlay
   statement · steps · full · beforeAfter · video
   ========================================================= */
.block {
  padding: var(--space-l) var(--gutter-r) 0 var(--gutter);
}

/* Bloques "banda": fondo propio a sangre completa */
.block--band { margin-top: var(--space-m); padding: var(--space-m) var(--gutter-r) var(--space-m) var(--gutter); }
.chapter__body > .block--band:first-child { margin-top: 0; }
.block--bleed { padding-inline: 0; }

/* Encabezado reutilizable dentro de un bloque */
.block__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem var(--gap);
  margin-bottom: var(--space-m);
}
.block__head > .t-label { grid-column: 1 / span 3; padding-top: 0.6em; }
.block__head > .t-h2 { grid-column: 4 / span 8; }
.block__head > .t-body { grid-column: 4 / span 5; }
.block--bleed .block__head { padding: 0 var(--gutter-r) 0 var(--gutter); }

/* ---------- lead: etiqueta + párrafo grande ---------- */
.lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem var(--gap); }
.lead > .t-label { grid-column: 1 / span 3; padding-top: 0.9em; }
.lead__text {
  grid-column: 4 / span 8;
  font-size: var(--fs-lead);
  line-height: 1.28;
  letter-spacing: -0.012em;
  font-weight: 400;
}
.lead__text em { font-family: var(--font-serif); color: var(--color-accent); }

/* ---------- numbers: número + concepto ---------- */
/* El bloque numbers hereda el padding-top de .block (--space-l); se recorta
   un poco (arriba y en el bloque que le sigue) porque con números cortos
   ("01/02/03") ese aire se siente excesivo. */
.block.numbers { padding-top: calc(var(--space-l) * 0.7); }
.numbers + .block { padding-top: calc(var(--space-l) * 0.7); }

.numbers__list { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-s) var(--gap); }
.numbers__item { display: grid; gap: 1rem; align-content: start; padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.numbers__value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 9.5rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
}
.numbers__item:first-child .numbers__value { color: var(--color-accent); }
.numbers__item .t-body { max-width: 28ch; }

/* Cifras más largas (4 columnas) necesitan una escala menor para no desbordar */
.numbers__list[data-cols="4"] .numbers__value { font-size: clamp(2.75rem, 4.6vw, 4.5rem); line-height: 0.9; }

/* ---------- editorial: galería asimétrica de 3 ---------- */
.editorial__items {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.editorial__items > :nth-child(1) { grid-column: 1 / span 6; grid-row: 1; }
.editorial__items > :nth-child(2) { grid-column: 8 / span 5; grid-row: 1; margin-top: var(--space-l); }
.editorial__items > :nth-child(3) { grid-column: 4 / span 7; grid-row: 2; margin-top: var(--space-m); }
.editorial__note { grid-column: 1 / span 3; grid-row: 2; align-self: end; display: grid; gap: 1rem; }

/* ---------- split: imagen + texto ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.split__text { display: grid; gap: 1.4rem; padding-bottom: var(--space-s); }
.split--left .split__media { grid-column: 1 / span 7; grid-row: 1; }
.split--left .split__text { grid-column: 9 / span 4; grid-row: 1; }
.split--right .split__media { grid-column: 6 / -1; grid-row: 1; }
.split--right .split__text { grid-column: 1 / span 4; grid-row: 1; align-self: start; padding-top: var(--space-m); }

/* Variante angosta: foto ~mitad de ancho, texto ocupa el resto (retratos, perfiles). */
.split--narrow.split--left .split__media { grid-column: 1 / span 4; }
.split--narrow.split--left .split__text { grid-column: 6 / span 7; }
.split--narrow.split--right .split__media { grid-column: 9 / -1; }
.split--narrow.split--right .split__text { grid-column: 1 / span 7; }

/* ---------- grid: 2 / 3 / 4 columnas ---------- */
.grid__items { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid--stagger .grid__item:nth-child(even) { margin-top: clamp(48px, 12vw, 200px); }
.grid__cap { display: flex; gap: 0.75rem; margin-top: 0.9rem; color: var(--ink-muted); }
.grid__cap b { color: var(--ink); font-weight: 500; }

/* ---------- full: imagen a sangre completa ---------- */
.full__caption {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gutter-r) 0 var(--gutter);
  color: var(--ink-muted);
}

/* ---------- overlay: texto sobre imagen ---------- */
.overlay {
  position: relative;
  min-height: clamp(560px, 94vh, 1040px);
  display: flex; align-items: flex-end;
  margin-top: var(--space-l);
  padding: var(--space-m) var(--gutter-r) var(--space-m) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  background: var(--color-black);
}
.chapter__body > .overlay:first-child { margin-top: 0; }
.overlay > .media--fill { z-index: -2; }
.overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--color-scrim) 0%, transparent 62%);
  pointer-events: none;
}
.overlay--right { justify-content: flex-end; }
.overlay--center { justify-content: center; text-align: center; }
.overlay__content { display: grid; gap: 1.4rem; max-width: 36rem; }
.overlay--center .overlay__content { justify-items: center; }
.overlay__content .t-body { color: color-mix(in srgb, var(--color-white) 82%, transparent); }
.overlay__content .t-label { color: var(--color-accent); }

/* ---------- statement: texto grande sobre fondo sólido ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
.statement > .t-label { grid-column: 1 / span 3; padding-top: 1em; }
.statement__text {
  grid-column: 4 / -1;
  max-width: 21ch;
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.statement__text em { color: var(--color-accent); }
.statement--accent .statement__text em { color: var(--color-white); }
.statement__sign { grid-column: 4 / -1; color: var(--ink-muted); }

/* ---------- steps: proceso paso a paso ---------- */
.steps__list { display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: var(--space-s) var(--gap); }
.steps__item { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.steps__num { font-family: var(--font-display); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: var(--color-accent); }
.steps__title { font-family: var(--font-label); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.steps__item .t-body { max-width: 30ch; }

/* ---------- beforeAfter: comparador ---------- */
.ba__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}
.ba__stage .media { position: absolute; inset: 0; aspect-ratio: auto; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 1px; background: var(--color-white);
  pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-white); color: var(--color-black);
}
.ba__knob svg { width: 22px; height: 22px; }
.ba__tag {
  position: absolute; bottom: 1rem; z-index: 2;
  padding: 0.45rem 0.7rem;
  background: var(--color-black); color: var(--color-white);
  pointer-events: none;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after { right: 1rem; background: var(--color-accent); color: var(--color-black); }
.ba__range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.ba__range:focus-visible + .ba__focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ba__focus { position: absolute; inset: 0; pointer-events: none; }

/* ---------- download: enlace a un archivo adjunto (PDF, etc.) ---------- */
.download__link {
  display: inline-flex; align-items: center; gap: 0.3em;
  margin-top: 0.4rem;
  transition: color var(--dur-fast) ease;
}
.download__link svg { width: 0.55em; height: 0.55em; stroke-width: 1.4; transform: rotate(90deg); transition: transform var(--dur) var(--ease-out); }
.download__link:hover { color: var(--color-accent); }
.download__link:hover svg { transform: rotate(90deg) translateX(0.15em); }

/* ---------- video (16:9 por defecto, o vertical con --ratio) ---------- */
.video__stage { position: relative; aspect-ratio: var(--ratio, 16 / 9); background: var(--color-black); }
.video__stage .media { position: absolute; inset: 0; aspect-ratio: auto; }
.video__stage iframe, .video__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Video vertical: angosto y centrado en vez de a todo lo ancho del bloque. */
.video--portrait .video__stage { width: min(100%, 420px); margin-inline: auto; }
.video--portrait .video__cap { width: min(100%, 420px); margin-inline: auto; }
.video__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: clamp(72px, 8vw, 116px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-accent); color: var(--color-black);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease;
}
.video__play svg { width: 34%; height: 34%; margin-left: 8%; }
.video__play:hover, .video__play:focus-visible { transform: scale(1.07); }
.video__play[aria-disabled="true"] { cursor: default; background: var(--color-white); }
.video__play[aria-disabled="true"]:hover { transform: none; }
.video__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--ink-muted); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .grid--4 .grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--left .split__media { grid-column: 1 / span 7; }
  .split--left .split__text { grid-column: 8 / -1; padding-left: var(--gap); }
  .split--right .split__text { grid-column: 1 / span 5; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .block__head, .lead, .statement, .split, .editorial__items { grid-template-columns: minmax(0, 1fr); }
  .block__head > *, .lead > *, .statement > * { grid-column: 1 / -1 !important; }
  .block__head { margin-bottom: var(--space-s); }

  .split { row-gap: 1.75rem; }
  .split .split__media, .split .split__text { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .split__text { padding: 0 !important; }
  .split--right .split__media { order: -1; }

  .numbers__list, .steps__list { grid-template-columns: minmax(0, 1fr); }
  .numbers__item { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; }
  .numbers__item .t-body { grid-column: 1 / -1; }
  .numbers__value { font-size: clamp(4rem, 22vw, 6rem); }

  /* Cifras largas (4 columnas, p. ej. "+$670 mil"): apilar en vez de forzar
     número + etiqueta en la misma fila, y achicar para que no se rompa. */
  .numbers__list[data-cols="4"] .numbers__item { grid-template-columns: minmax(0, 1fr); }
  .numbers__list[data-cols="4"] .numbers__value { grid-column: 1 / -1; font-size: clamp(2.6rem, 13vw, 3.75rem); white-space: nowrap; }
  .numbers__list[data-cols="4"] .t-label:not(.t-label--muted) { grid-column: 1 / -1; }

  .editorial__items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .editorial__items > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .editorial__items > :nth-child(2) { grid-column: 1 / span 3; grid-row: auto; margin-top: 0; }
  .editorial__items > :nth-child(3) { grid-column: 4 / span 3; grid-row: auto; margin-top: 18vw; }
  .editorial__note { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-s); }

  /* Grid de 3 en mobile: carrusel horizontal nativo con snap */
  .grid--3 .grid__items {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .grid--3 .grid__items::-webkit-scrollbar { display: none; }
  .grid--3 .grid__item { scroll-snap-align: start; }
  .grid--stagger .grid__item:nth-child(even) { margin-top: 18vw; }

  .overlay { min-height: 82vh; min-height: 82svh; }
  .overlay::before { background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim-soft) 45%, transparent 80%); }
  .overlay--right, .overlay--center { justify-content: flex-start; text-align: left; }
  .overlay--center .overlay__content { justify-items: start; }

  .statement__text { max-width: none; }

  .ba__stage { aspect-ratio: 4 / 5; }
  .ba__knob { width: 44px; height: 44px; }
  .video__cap, .full__caption { flex-direction: column; gap: 0.25rem; }
}