/* ============================================================
   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 ----- */
  .mono{font-family:var(--ff-mono);font-weight:400}

  .display{
    font-family:var(--ff-display);
    font-weight:400;
    line-height:1.02;
    letter-spacing:-.015em;
    font-optical-sizing:auto;
  }

  .grad-text{
    background:var(--spectrum);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }

  .eyebrow{
    font-family:var(--ff-mono);
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    display:inline-flex;align-items:center;gap:.65rem;
  }
  .eyebrow::before{
    content:"";width:26px;height:2px;border-radius:2px;
    background:var(--spectrum);flex:none;
  }

  /* ----- 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(--red);color:#fff;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}
  }
}