/* Color Gel Glass Collections — base compartida por los dos mundos.
   Newsreader e Inter van autoalojadas: ambas son SIL OFL, a diferencia de la
   Helvetica Neue del deck, cuya licencia no cubre uso como webfont. */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;

  --negro: #060505;
  --hueso: #f4f1ec;

  /* Cada mundo redefine estas tres. Ámbar va sobre negro y Murano sobre luz:
     son colecciones opuestas y el sitio tiene que sostener esa oposición. */
  --fondo: var(--negro);
  --tinta: var(--hueso);
  --linea: rgba(244, 241, 236, 0.12);

  /* Ámbar: la resina, no el amarillo. */
  --ambar: #d98d3e;
  --ambar-claro: #f0b969;
  --ambar-hondo: #7a3f0e;

  /* Murano: el cristal soplado. */
  --murano: #2f9fd0;
  --murano-claro: #8fd4ea;
  --murano-hondo: #123a56;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Rótulos espaciados: el recurso tipográfico que atraviesa los dos decks. */
.rotulo {
  font-size: clamp(0.67rem, 0.85vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.serif-italica {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Quien pide menos movimiento no debería marearse con una experiencia así. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}