/*
  trunk.css — fichas (custom properties), reset, base y utilidades.
  Persona: indentación 2, unidades rem, colores hex minúsculas.
  Nota: sin !important en toda la hoja (regla del proyecto).
*/

@layer reset, tokens, base, utilities;

@layer tokens {
  :root {
    /* color — mono + un único acento cobalto */
    --chalk: #f5f6f4;
    --black: #111214;
    --cobalt: #2049d0;
    --cobalt-oscuro: #163aa8;
    --grey: #787d84;
    --grey-claro: #a7abaf;
    --linea: #d9dbd7;
    --linea-oscura: #2a2c30;
    --texto-oscuro: #f2f3f1;
    --superficie: #ffffff;
    --superficie-hueso: #eceeea;

    /* tipografía */
    --fuente-display: 'Unbounded', 'Segoe UI', sans-serif;
    --fuente-texto: 'Manrope', 'Segoe UI', sans-serif;

    /* espaciado */
    --s-2xs: 0.5rem;
    --s-xs: 0.875rem;
    --s-sm: 1.25rem;
    --s-md: 2rem;
    --s-lg: 3.25rem;
    --s-xl: 5rem;
    --s-2xl: 7.5rem;

    /* forma */
    --radio-sm: 0.25rem;
    --radio-md: 0.5rem;
    --radio-lg: 1.25rem;
    --borde-fino: 1px;

    /* contenedor */
    --ancho-contenedor: 74rem;

    /* movimiento */
    --dur-rapida: 0.18s;
    --dur-media: 0.42s;
    --dur-lenta: 0.9s;
    --curva: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

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

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

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  img {
    height: auto;
  }

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

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

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

@layer base {
  body {
    font-family: var(--fuente-texto);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black);
    background: var(--chalk);
  }

  h1,
  h2,
  h3 {
    font-family: var(--fuente-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  }

  h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  }

  h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  }

  p {
    max-width: 62ch;
  }

  strong {
    font-weight: 600;
  }

  :focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 3px;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-to-content {
    position: absolute;
    top: -120px;
    left: var(--s-sm);
    z-index: 1200;
    padding: var(--s-2xs) var(--s-sm);
    background: var(--cobalt);
    color: var(--chalk);
    border-radius: var(--radio-sm);
    transition: top var(--dur-rapida) var(--curva);
  }

  .skip-to-content:focus {
    top: var(--s-sm);
  }

  .desplazable-fino {
    scrollbar-width: thin;
    scrollbar-color: var(--cobalt) transparent;
  }

  .mt-md {
    margin-top: var(--s-md);
  }

  [data-revela] {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
  }

  [data-revela].revela--pendiente {
    opacity: 0;
    transform: translateY(1.15rem);
  }

  [data-revela].revela--visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-revela] {
      transition: none;
    }

    .skip-to-content {
      transition: none;
    }
  }
}