/* ============================================================================
   BASE — reset, elementos y utilidades estructurales
   ========================================================================== */

@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul[class], ol[class] {
    list-style: none;
    padding: 0;
  }

  a { color: inherit; text-decoration: none; }

  /* Sin desbordamiento horizontal en ningún ancho (QA: 320–1920) */
  body { overflow-x: clip; }
}

@layer base {

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-400);
    line-height: var(--leading-body);
    background: var(--surface-paper);
    color: var(--on-paper);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Skip link: primero en el orden de tabulación */
  .u-skip {
    position: absolute;
    left: var(--margin);
    top: -100px;
    z-index: 100;
    padding: var(--sp-3) var(--sp-4);
    background: var(--paper-100);
    color: var(--ink-900);
    font-family: var(--font-data);
    font-size: var(--fs-200);
    letter-spacing: var(--tracking-data);
    text-transform: uppercase;
    border: 1px solid var(--ink-900);
    transition: top 180ms var(--ease);
  }
  .u-skip:focus { top: var(--sp-4); }

  /* Foco visible: nunca se elimina (DA-21) */
  :where(a, button, summary, [tabindex]):focus-visible {
    outline: var(--focus);
    outline-offset: var(--focus-offset);
  }

  /* ------------------------------------------------------------ tipografía */

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  strong { font-weight: 600; }

  /* ----------------------------------------------------------------- roles */

  .t-display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    font-size: var(--fs-900);
  }

  .t-h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    font-size: var(--fs-700);
    line-height: 1.02;
  }

  .t-lede {
    font-size: var(--fs-500);
    line-height: 1.45;
    max-width: var(--measure);
  }

  .t-body { font-size: var(--fs-400); line-height: var(--leading-body); max-width: var(--measure); }

  /* Rol de datos: cifras, etiquetas, folios. Versalita espaciada y cifras
     tabulares — sin monoespaciada (verADR-17 en el plan maestro). */
  .t-data {
    font-family: var(--font-data);
    font-size: var(--fs-200);
    font-weight: var(--fw-data);
    letter-spacing: var(--tracking-data);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }

  .t-label {
    font-family: var(--font-data);
    font-size: var(--fs-100);
    font-weight: var(--fw-data);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
}

@layer layout {

  .u-wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--margin);
  }

  /* Retícula de 12 columnas. Los bloques deciden cuántas ocupan. */
  .u-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--grid));
    gap: var(--gutter);
  }

  .u-rule {
    border: 0;
    border-top: 1px solid var(--line-light);
    width: 100%;
  }

  .u-rule--dark { border-top-color: var(--line-dark); }
}

@layer utilities {

  /* El peso del rol de datos se declara una sola vez y gana sobre los
     componentes: así no hay que repetirlo en cada pieza. */
  .c-btn,
  .c-nav__link,
  .c-menubtn,
  .c-lang,
  .c-eyebrow,
  .c-caption,
  .c-rail__folio,
  .c-menu__num,
  .c-datastrip__num,
  .c-datastrip__label {
    font-weight: var(--fw-data);
    font-variant-numeric: tabular-nums;
  }

  /* Grano de impresión: unifica material fotográfico heterogéneo (DA-14) */
  .u-grain { position: relative; isolation: isolate; }

  .u-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: var(--grain-src);
    opacity: 0.05;
    mix-blend-mode: overlay;
  }

  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .u-tabular { font-variant-numeric: tabular-nums; }

  /* Reveal: Wipe por defecto; se anula con prefers-reduced-motion */
  .u-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--dur-2) var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .u-reveal.is-in { clip-path: inset(0 0 0 0); }

  .u-fade {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .u-fade.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .u-reveal {
      clip-path: none;
      opacity: 0;
      transition: opacity 200ms linear;
    }
    .u-reveal.is-in { opacity: 1; }

    .u-fade { transform: none; transition: opacity 200ms linear; }
  }

  /* Intensidad de movimiento elegida en el panel. El sistema operativo manda:
     si la persona pide reducir movimiento, esta regla coincide con la de
     prefers-reduced-motion y no se nota la diferencia. */
  [data-motion="0"] .u-reveal {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms linear;
  }

  [data-motion="0"] .u-reveal.is-in { opacity: 1; }
  [data-motion="0"] .u-fade { transform: none; }
  [data-motion="0"] .b-hero__scroll::after { animation: none; }
  [data-motion="0"] .c-card:hover .c-card__media img { transform: none; }
}