/* ============================================================
   HOME
   ============================================================ */

.hero{
  min-height:min(92svh, 60rem);   /* svh: en móvil no salta cuando aparece
                                     y desaparece la barra del navegador */
  display:flex;align-items:center;
  padding-block-start:calc(var(--section-y) + var(--nav-h));
}

.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--step--1);font-weight:var(--w-medium);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:.35rem .95rem;margin:0 0 var(--space-lg);
  background:color-mix(in srgb, var(--paper) 60%, transparent);
}
.badge::before{
  content:"";width:.5rem;height:.5rem;border-radius:var(--r-pill);
  background:var(--go);
  /* Verde de "disponible", no coral: el rojo lee como alerta y aquí
     dice lo contrario. Es decorativo, así que no le aplica el mínimo
     de contraste de texto; aun así se ve claro sobre papel. */
  animation:latido 2.4s var(--ease) infinite;
}
@keyframes latido{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.45;transform:scale(.8)}
}
@media (prefers-reduced-motion:reduce){
  .badge::before{animation:none}
}

.hero__title{font-size:var(--step-6);max-width:16ch}
.hero__lede{margin-block-start:2.5rem;max-width:52ch}
.hero__actions{
  display:flex;gap:var(--space-sm);flex-wrap:wrap;
  margin-block-start:var(--space-xl);
}

/* Aire entre "Selected work" y las fichas de categoría. Antes lo daba
   el párrafo explicativo que iba en medio; al quitarlo se quedaron
   pegados. */
.cats-wrap{margin-block-start:var(--space-xl)}