/* ============================================================================
   BLOQUES — composiciones de sección
   Cada bloque tiene una composición distinta. Ninguno repite el patrón del
   anterior (DA-03, DA-04).
   ========================================================================== */

@layer blocks {

  /* =========================================================== HERO / 01
     Video a sangre, titular a la izquierda sobre 7 columnas, franja de datos
     al pie, riel a la izquierda. Sin tarjeta flotante (DA-16). */
  .b-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding-top: var(--head-h);
    overflow: hidden;
    background: var(--ink-900);
    color: var(--paper-100);
    isolation: isolate;
  }

  /* Scrim direccional: garantiza contraste medido, no un text-shadow a ojo */
  .b-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(15, 27, 25, 0.62) 0%,
      rgba(15, 27, 25, 0.16) 32%,
      rgba(15, 27, 25, 0.74) 66%,
      rgba(15, 27, 25, 0.96) 100%
    );
  }

  .b-hero__inner {
    position: relative;
    z-index: 3;
    align-self: end;
    padding-block: var(--sp-7) var(--sp-6);
  }

  .b-hero__title {
    font-size: var(--fs-900);
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
  }

  .b-hero__title .line {
    display: block;
    overflow: hidden;   /* recorta el wipe de entrada */
  }

  .b-hero__title .line__in {
    display: block;
    padding-bottom: 0.04em;
  }

  /* Línea 3 desplazada con barra coral: la asimetría con causa (DA-03) */
  .b-hero__title .line--offset {
    display: flex;
    align-items: center;
    gap: 0.42em;
    margin-left: 6%;
    margin-top: 0.06em;
  }

  .b-hero__title .line--offset::before {
    content: "";
    width: 2px;
    align-self: stretch;
    background: var(--coral-500);
    flex-shrink: 0;
  }

  .b-hero__title em {
    font-style: normal;
  }

  @media (min-width: 768px) {
    .b-hero__title .line--offset { margin-left: 12%; }
  }

  .b-hero__lede {
    max-width: var(--measure-tight);
    color: rgba(251, 247, 239, 0.86);
    font-size: var(--fs-500);
    line-height: 1.45;
    margin-bottom: var(--sp-6);
  }

  .b-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .b-hero__foot {
    position: relative;
    z-index: 3;
    padding-bottom: var(--sp-5);
  }

  .b-hero__footrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .b-hero__caption { display: none; }

  @media (min-width: 768px) {
    .b-hero__caption { display: block; }
    .b-hero__datastrip { flex: 1; max-width: 720px; }
  }

  /* Indicador de desplazamiento: vertical, discreto, sin bucle infinito
     salvo el trazo que crece una vez. */
  .b-hero__scroll {
    position: absolute;
    right: max(var(--margin), 18px);
    bottom: calc(var(--sp-5) + 44px);
    z-index: 4;
    display: none;
    align-items: center;
    gap: 0.7rem;
    writing-mode: vertical-rl;
    font-family: var(--font-data);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(251, 247, 239, 0.55);
  }

  .b-hero__scroll::after {
    content: "";
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, rgba(251, 247, 239, 0.75), transparent);
    transform-origin: top;
    animation: cue 2.4s var(--ease) infinite;
  }

  @keyframes cue {
    0%   { transform: scaleY(0.15); opacity: 0.2; }
    45%  { transform: scaleY(1);    opacity: 1; }
    100% { transform: scaleY(0.15); opacity: 0.2; }
  }

  @media (min-width: 1100px) {
    .b-hero__scroll { display: flex; }
  }

  @media (prefers-reduced-motion: reduce) {
    .b-hero__scroll::after { animation: none; }
  }

  /* ==================================================== STATEMENT / 02
     Superficie crema, regla dibujada, texto a dos columnas asimétricas.
     Existe para probar la transición de fondo oscuro a claro y el avance
     del riel. */
  .b-statement {
    background: var(--surface-paper);
    color: var(--on-paper);
    padding-block: var(--sp-8) var(--sp-9);
    position: relative;
  }

  .b-statement__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    border-top: 1px solid var(--line-light);
    padding-top: var(--sp-3);
    margin-bottom: var(--sp-7);
  }

  .b-statement__folio {
    font-family: var(--font-data);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--coral-600);
  }

  .b-statement__title {
    font-family: var(--font-data);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .b-statement__grid {
    display: grid;
    gap: var(--sp-6);
  }

  .b-statement__quote {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    max-width: 16ch;
  }

  .b-statement__body {
    display: grid;
    gap: var(--sp-4);
    max-width: var(--measure);
    color: var(--ink-muted);
  }

  .b-statement__body strong { color: var(--ink-900); }

  @media (min-width: 900px) {
    .b-statement__grid {
      grid-template-columns: 5fr 7fr;
      gap: var(--sp-8);
      align-items: start;
    }
  }

  /* ---------------------------------------------------------- videos de ficha
     Verticales, pequeñas y solo bajo demanda: la ficha ya tiene suficiente peso
     visual. Se reproducen a mano, nunca solas. */
  .b-videos {
    padding-block: var(--sp-8);
    background: var(--surface-paper);
    border-top: 1px solid var(--line-light);
  }

  .c-videostrip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }

  .c-videostrip__item { width: clamp(132px, 17vw, 168px); }

  .c-videocard {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--ink-900);
    cursor: pointer;
  }

  .c-videocard__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .c-videocard__play {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--coral-500);
    color: var(--ink-900);
    transition: transform 180ms ease;
  }

  .c-videocard__play svg { width: 16px; height: 16px; margin-left: 2px; }

  .c-videocard:hover .c-videocard__play,
  .c-videocard:focus-visible .c-videocard__play { transform: scale(1.08); }

  .c-videocard:focus-visible {
    outline: 2px solid var(--coral-500);
    outline-offset: 3px;
  }

  /* Reproductor ampliado.
     Se centra a mano: con `width: 100%` los márgenes automáticos del navegador
     no alcanzan a centrarlo y el diálogo aparece pegado a un lado.
     El ancho se calcula a partir de la orientación para que el diálogo mida
     exactamente lo que mide el video: así el botón de cerrar queda alineado
     con el borde del video y no colgando en el vacío. */
  .c-videodialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 92vw;
    max-height: 92vh;
    overflow: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* Vertical: alto 70vh de video, el ancho sale de la proporción 9:16 */
  .c-videodialog[data-orientation="vertical"] {
    width: min(92vw, 520px, calc(70vh * 9 / 16));
  }

  /* Horizontal: manda el ancho, la altura sale de 16:9 */
  .c-videodialog[data-orientation="horizontal"] {
    width: min(94vw, 960px);
  }

  .c-videodialog::backdrop { background: rgb(15 27 25 / 0.92); }

  .c-videodialog__inner { position: relative; display: grid; gap: var(--sp-3); }

  /* El escenario adopta la proporción del video: 9/16 vertical, 16/9 normal */
  .c-videodialog__stage {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
  }

  .c-videodialog__stage iframe,
  .c-videodialog__stage video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .c-videodialog__caption {
    color: var(--paper-100);
    font-size: var(--fs-100);
    text-align: center;
  }

  .c-videodialog__close {
    justify-self: end;
    background: transparent;
    border: 1px solid rgb(251 247 239 / 0.4);
    color: var(--paper-100);
    padding: 8px 14px;
    font: inherit;
    font-size: var(--fs-100);
    cursor: pointer;
  }

  .c-videodialog__close:hover { border-color: var(--coral-500); color: var(--coral-500); }
}