/* ---------------------------------------------------------------- tokens ---
   Paleta de sala de museo a oscuras: fondos calidos muy bajos, un azul verdoso
   tomado de los nenufares como acento, y el papel de la polaroid en hueso.
   Para pasar a la marca Onlines, cambiar solo este bloque.                   */
:root {
  --tinta:        #0b0a09;
  --tinta-2:      #15130f;
  --tinta-3:      #221e18;
  --borde:        #332d24;

  --hueso:        #f4efe4;
  --hueso-tenue:  #b4ab9b;
  --hueso-debil:  #7d7466;

  --acento:       #7ba6ae;
  --acento-vivo:  #a8ccd2;
  --calido:       #d9a05b;

  --papel:        #f7f3ea;
  --papel-tinta:  #2a2520;
  --papel-tenue:  #8a8075;

  --radio:        14px;
  --sombra:       0 24px 60px -18px rgb(0 0 0 / 0.75);

  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mano: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100svh;
  /* Dos halos muy suaves: dan profundidad sin parecer un degrade de plantilla. */
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, #1b2328 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 90% 110%, #231d16 0%, transparent 55%);
  background-attachment: fixed;
}

button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.oculto { display: none !important; }

/* Respetar a quien pidio menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}