/* ===========================================================
   Northlane · Capa de accesibilidad y pulido (transversal)
   Cargada en todas las páginas. Solo estética / UX / a11y.
   =========================================================== */

/* 1 · Suavizado y render de fuente */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* 2 · Foco visible SOLO con teclado, coherente en todo el portal */
:where(a,button,input,textarea,select,summary,[tabindex],[role="button"],[role="tab"],[role="link"]):focus-visible{
  outline:2px solid var(--blue,#4F46E5);
  outline-offset:2px;
  border-radius:8px;
}
:where(a,button,input,textarea,select):focus:not(:focus-visible){ outline:none; }

/* 3 · Área de toque ≥44px sin alterar el tamaño visual (capa transparente) */
.hdr-btn,.modal-close,.icon-btn,.nav-item{ position:relative; }
.hdr-btn::after,.modal-close::after,.icon-btn::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.nav-item{ min-height:44px; }

/* 4 · Números tabulares en datos (no "bailan" al actualizarse) */
.tabular,[data-num],.hero-big,.hero-metric,.hero-stat-val,.stat-val,.metric-val,.count-num,td.num,.num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 5 · Utilidad skeleton con shimmer (para sustituir spinners) */
.skeleton{
  position:relative; overflow:hidden;
  background:var(--fill-tertiary,rgba(120,120,128,.14));
  border-radius:10px;
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  animation:nl-shimmer 1.4s ease-in-out infinite;
}
@keyframes nl-shimmer{ to{ transform:translateX(100%); } }

/* 6 · Respeto a "reducir movimiento" (todas las páginas) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* 7 · Texto solo para lectores de pantalla */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 8 · Tipografía moderna (mejora progresiva; degrada sin romper) */
h1,h2,h3,.sheet-title,.hero-product,.hdr-logo-name{ text-wrap:balance; }
p,.empty p{ text-wrap:pretty; }
body{ font-optical-sizing:auto; }

/* 9 · Logins: feedback al pulsar + spinner de carga */
.btn-primary:active{ transform:scale(.97); }
.spinner{ width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:nl-spin .7s linear infinite; }
@keyframes nl-spin{ to{ transform:rotate(360deg); } }