/* ==========================================================================
   Memorias que Viven QR — tokens base
   Paleta: "anochecer + latón". Fondo tinta cálida (no negro puro, no cremita)
   y un único acento de latón, que es el metal de la placa física.
   ========================================================================== */

:root {
  /* Superficies */
  --tinta:        #12141A;
  --tinta-honda:  #0B0C11;
  --penumbra:     #1B1E26;
  --niebla:       #262A34;
  --linea:        rgba(239, 233, 222, 0.13);
  --linea-fuerte: rgba(239, 233, 222, 0.26);

  /* Acento: latón de placa */
  --laton:        #C3A05C;
  --laton-claro:  #E0C68C;
  --laton-honda:  #6E5A34;

  /* Texto */
  --hueso:        #EFE9DE;
  --tenue:        #9C968A;
  --tenue-honda:  #6B675F;

  /* Tipografía */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texto:   "Karla", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Ritmo */
  --r1: 0.5rem;  --r2: 0.875rem; --r3: 1.5rem;
  --r4: 2.5rem;  --r5: 4rem;     --r6: 6.5rem;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  --ancho: 74rem;
}

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

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

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 0;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* Etiquetas pequeñas en versalitas: la "voz de servicio" de la marca */
.rotulo {
  font-family: var(--texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--laton);
}

:focus-visible {
  outline: 2px solid var(--laton-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--laton-honda); color: var(--hueso); }

@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;
  }
}