/* ============================================================
   BIOWELLNESS · UTILITIES
   Clases pequeñas y componibles. Última capa: le ganan a los
   componentes (pero no a tu CSS sin capa).
   ============================================================ */

@layer utilities{

  /* ----- Voz tipográfica -----
     La voz técnica ya no es monoespaciada: es Montserrat en
     mayúsculas, Medium/SemiBold y con tracking. El peso importa:
     Montserrat Regular en cuerpos chicos se afina mucho más que
     IBM Plex Mono, y sin el bump la microtipografía se pierde. */
  .mono{font-family:var(--ff-mono);font-weight:500;letter-spacing:.04em}

  .display{
    font-family:var(--ff-display);
    font-weight:var(--fw-display);
    line-height:1.04;
    letter-spacing:-.02em;
    /* Reparte las líneas en vez de dejar una huérfana. Montserrat
       ExtraBold es más ancha que la serif que reemplaza, así que los
       títulos que antes entraban en dos líneas ahora cortan en
       lugares raros — sobre todo en el celular. */
    text-wrap:balance;
  }

  /* El acento del título: el degradado metálico recortado al texto.
     Va en redonda aunque el marcado sea <em>, porque el acento lo da
     el degradado y no la inclinación: la itálica de Montserrat no
     llega al peso del título y el acento aparecería más fino que el
     resto de la línea. */
  .grad-text{
    font-style:normal;
    background:var(--metal-tx);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }

  .eyebrow{
    font-family:var(--ff-mono);
    font-size:.72rem;
    font-weight:var(--fw-tech);
    letter-spacing:.22em;
    text-transform:uppercase;
    /* flex-start y no center: los kickers largos wrapean a tres o
       cuatro líneas en el celular, y centrado la rayita quedaba
       flotando en el medio del bloque. */
    display:inline-flex;align-items:flex-start;gap:.65rem;
  }
  /* La línea del kicker: metálica, como los hovers y las reglas. */
  .eyebrow::before{
    content:"";width:26px;height:2px;border-radius:2px;
    background:var(--metal);flex:none;margin-top:.52em;
  }

  /* ----- Texto ----- */
  .tx-mut{color:var(--tx-mut)}
  .ta-c{text-align:center}

  /* ----- Animación de aparición on-scroll (requiere js/main.js) ----- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}
  .reveal.d4{transition-delay:.32s}

  /* ----- Accesibilidad ----- */
  .visually-hidden{
    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:-100%;z-index:100;
    background:var(--accent);color:var(--ink);font-weight:600;
    padding:.7rem 1.1rem;border-radius:0 0 10px 10px;
    transition:top .3s var(--ease);
  }
  .skip-link:focus-visible{top:0}

  /* ----- Movimiento reducido ----- */
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
    .track .opt{transition:none}
  }
}