/* =========================================================
   2 · BASE
   Reset, tipografía, foco y utilidades de accesibilidad.
   ========================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px); /* el foco y las anclas nunca quedan bajo el header */
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font: 400 1.0625rem/1.6 var(--font);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  img { max-width: 100%; height: auto; display: block; }
  figure { margin: 0; }
  a { color: inherit; }
  p { text-wrap: pretty; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  main:focus, [tabindex="-1"]:focus { outline: none; } /* destinos de anclas: reciben el foco sin anillo */

  ::selection { background: var(--pink); color: var(--black); }
}

@layer utilities {
  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .num { font-variant-numeric: tabular-nums; }

  /* Visible solo para lectores de pantalla */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  .skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 100;
    padding: .75rem 1.1rem; border-radius: var(--r-pill);
    background: var(--white); color: var(--black); font-weight: 700; text-decoration: none;
  }
  .skip-link:focus { top: 1rem; }

  /* Foto que no carga: se muestra la S */
  .is-missing { background: var(--surface) !important; }
  .is-missing::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 24%; aspect-ratio: 560 / 421; transform: translate(-50%, -50%);
    background: var(--mark) center / contain no-repeat;
  }

  /* Modo de alto contraste de Windows */
  @media (forced-colors: active) {
    .btn, .pill, .chip-link, .contact-pill, .icon-btn, .card, .tile, .step, .channel, .lang-switch button { border: 1px solid CanvasText; }
    .pill.is-active, .lang-switch button[aria-pressed="true"] { outline: 2px solid Highlight; }
    .hero__glow, .hero__photo, .giant { display: none; }
  }
}