/* ══════════════════════════════════════════════════════════════════
   HARES · SISTEMA DE DISEÑO COMPARTIDO

   Cada página de HARES llevaba su propio CSS metido dentro, así que
   un cambio de diseño no salía nunca de la página donde se hacía.
   Este archivo se enlaza DESPUÉS del <style> de cada página, así que
   gana los empates y redefine el sistema entero desde un solo sitio.

   Regla de uso: aquí van decisiones de sistema (color, tipografía,
   foco, selección). La maquetación concreta de cada página se queda
   en su página.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ─── Fondo ───
     Negro con un susurro de verde, sacado del follaje del rosal de
     noche. Lo justo para que no sea un gris de fábrica. */
  --bg:#090b0a;
  --bg2:#0e100f;
  --surface:#131514;
  --surface2:#181b1a;

  /* ─── Líneas: dos pesos, ni uno más ─── */
  --border:rgba(241,238,233,.08);
  --border2:rgba(241,238,233,.17);

  /* ─── Texto ───
     --muted estaba en .44, que sobre este fondo da 3,92:1 medido. El
     mínimo legible para texto normal es 4,5:1, y buena parte del texto
     pequeño del sitio (subtítulos, filtros, enlaces de salida) usaba
     ese token. A .52 sube a 5,2:1 y deja margen. */
  --text:#f1eee9;
  --muted:rgba(241,238,233,.52);
  --dim:rgba(241,238,233,.18);

  /* ─── Acento cálido ─── */
  --accent:#c9b896;

  /* ─── El mundo de las prendas, con cuentagotas ───
     Tres colores sacados del producto real: la rosa, la sudadera y
     la luz barroca. Un acento que sale en todas partes deja de ser
     un acento, así que estos aparecen poco y a propósito. */
  --rosa:#a3132a;
  --verde:#1f4a3c;
  --laton:#9a7b45;

  /* ─── Tipografía: una pareja, no una sola cara ───
     Archivo condensada se queda con los carteles, que es lo que sabe
     hacer. Bodoni entra como voz editorial: es la tipografía de las
     casas de moda y la de los números de una baraja, y vuestras
     prendas van de cartas y filigrana. */
  --editorial:'Bodoni Moda', Didot, 'Times New Roman', serif;
}

/* ══════════════════════════════════════════════════════════════════
   LA PAREJA EN MARCHA

   El selector por atributo alcanza a .sec-title, .about-title,
   .banner-title, .look-title, .ns-title, .rules-title y .modal-title
   en todas las páginas de una vez, sin tener que ir clase por clase.
   El titular del hero queda fuera: ese es el cartel y sigue siendo
   Archivo, que es la letra con la que la marca ya se reconoce.
   ══════════════════════════════════════════════════════════════════ */
[class*="-title"]:not(.hero-title):not(.pc-title){
  font-family:var(--editorial);
  font-weight:500;
  font-stretch:normal;
  text-transform:none;
  letter-spacing:-.005em;
  line-height:1.04;
}

/* La cursiva de Bodoni remata bloques. Nunca cuerpos largos. */
[class*="-tagline"], .sec-sub{
  font-family:var(--editorial);
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
}

/* ══════════════════════════════════════════════════════════════════
   ETIQUETAS

   Las mayúsculas diminutas y superespaciadas encima de cada titular
   son el tic más reconocible de web hecha con IA. Fuera: caja normal
   y cursiva, que además encaja con la voz de la marca.
   ══════════════════════════════════════════════════════════════════ */
[class*="-eyebrow"]{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
  font-style:italic;
}

/* ══════════════════════════════════════════════════════════════════
   LO INVISIBLE QUE SE NOTA
   ══════════════════════════════════════════════════════════════════ */

/* Foco visible de verdad, en todas las páginas. Sin esto, navegar con
   teclado es ir a ciegas. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

::selection{ background:var(--rosa); color:#fff }

/* Ninguna página de HARES debería poder irse de lado. */
html, body{ overflow-x:hidden; overflow-x:clip }

/* En pantallas táctiles, nada que se pueda pulsar baja de 44px. */
@media (pointer:coarse){
  button, a.btn, [role="button"], input[type="submit"]{ min-height:44px }
}

/* Quien pide menos movimiento, recibe menos movimiento. En todas las
   páginas, no solo en la portada. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}