/* pieces.c227.css — capas + reset + tokens de marca (Ecom Selva) */
@layer reset, tokens, layout, components, utilities;

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

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

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

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

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
  }

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

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

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

  table {
    border-collapse: collapse;
    width: 100%;
  }

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

@layer tokens {
  /* tipografia autoalojada — fuentes variables, un unico archivo latin cubre
     todo el rango de pesos declarado (confirmado contra la respuesta de css2) */
  @font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/onest-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
  }

  @font-face {
    font-family: 'Tektur';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/tektur-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
  }

  :root {
    /* paleta — 60 papel / 30 tinta / 10 acentos */
    --paper: #faf7f0;
    --paper-deep: #eef0e4;
    --ink: #1c231d;
    --ink-soft: #4a5249;
    --ink-faint: #838a7f;
    --selva: #1f6b45;
    --selva-deep: #163f2c;
    --ochre: #c88a3d;
    --line: #ccd1c0;
    --line-strong: #1c231d;
    --paper-on-ink: #f0f2e7;
    --shadow-lift: 0 1.25rem 2.5rem rgba(28, 35, 29, 0.14);

    /* tipografia */
    --f-display: 'Tektur', 'Arial Narrow', sans-serif;
    --f-text: 'Onest', 'Segoe UI', sans-serif;
    --fs-h1: clamp(2.4rem, 1.55rem + 4.1vw, 5.2rem);
    --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);
    --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
    --fs-lead: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --lh-tight: 1.08;
    --lh-heading: 1.2;
    --lh-body: 1.62;

    /* ritmo — deliberadamente no monotono entre secciones */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 7.5rem;

    --container-max: 76rem;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --border-hairline: 1px solid var(--line);
    --border-thick: 3px solid var(--ink);

    --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}