/**
 * Paleta de la pantalla del niño. FUENTE ÚNICA.
 *
 * Estaba repartida entre el CSS de tres páginas y las constantes de
 * cara-plana.js. Ese reparto es justo lo que produjo los dos bugs de contrato
 * de este proyecto: algo declarado en un lado y consumido en otro, sin nada
 * que comprobara que coincidían.
 *
 * Pastel apagado a propósito: el ritmo rápido y los colores saturados están
 * asociados a peor concentración en niños pequeños, y esta pantalla aparece
 * justo cuando el niño tiene que pensar y responder.
 */
:root {
  /* --- fondo: claro, con manchas de luz que derivan despacio --- */
  --fondo-base: #eef2f8;
  --blob-1: #ffd8a4;   /* cálido, arriba a la izquierda */
  --blob-2: #a9c9ff;   /* frío, abajo a la derecha */
  --blob-3: #ffc4d8;   /* rosa muy tenue, para que no se vea corporativo */
  --blob-op: .62;

  /* --- la gata --- */
  --gata-pelo:   #8FAFD4;
  --gata-hocico: #E8F0F8;
  --gata-oreja:  #E4B4C2;
  --gata-nariz:  #D08FA0;
  --gata-boca:   #B8697F;
  --gata-lengua: #E8A0B4;
  --gata-rubor:  #F2A9BE;   /* un rosa apagado sobre azul lee gris */
  --gata-pupila: #2E323C;   /* no negro puro: sube el contraste donde no conviene */
  --gata-ojo:    #FFFFFF;
  --gata-bigote: #FFFFFF;

  /* --- lo que se le muestra al niño ---
     `--tinta` NO puede ser blanca: sobre el fondo claro las letras
     desaparecen. Era el color heredado de cuando la pantalla era negra. */
  --tinta:  #3E4657;
  --guia:   rgba(62, 70, 87, .14);   /* letra fantasma detrás del trazo */
  --punta:  #D08FA0;                 /* el lapicito, en el rosa de la nariz */
  --ficha:  #8FAFD4;                 /* puntos, en el azul de la gata */
  --marco:  rgba(62, 70, 87, .18);   /* marco de diez */

  /* --- chrome: controles del adulto, no del niño --- */
  --texto:        #231f1b;
  --chrome:       rgba(255, 255, 255, .72);
  --chrome-edge:  rgba(35, 31, 27, .10);
  --boton:        rgba(255, 255, 255, .75);
  --boton-hover:  #ffffff;
  --muted:        #7b7269;
  --muted-strong: #3d372f;
  --acento:       #e0a23f;

  --ui: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
        "Segoe UI", system-ui, sans-serif;
}

/* Manchas de luz. Blur alto y movimiento lento es lo que las vuelve
   relajantes en vez de llamativas: si se nota que se mueven, es demasiado. */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fondo-base) }
.fondo i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: var(--blob-op);
}
.fondo i:nth-child(1) { width: 80vmax; height: 80vmax; left: -28vmax; top: -32vmax; background: var(--blob-1); animation: deriva1 52s ease-in-out infinite alternate }
.fondo i:nth-child(2) { width: 70vmax; height: 70vmax; right: -26vmax; bottom: -30vmax; background: var(--blob-2); animation: deriva2 64s ease-in-out infinite alternate }
.fondo i:nth-child(3) { width: 52vmax; height: 52vmax; right: -14vmax; top: 22vmax;  background: var(--blob-3); animation: deriva3 78s ease-in-out infinite alternate }

@keyframes deriva1 { to { transform: translate(9vmax, 7vmax) scale(1.12) } }
@keyframes deriva2 { to { transform: translate(-8vmax, -6vmax) scale(1.08) } }
@keyframes deriva3 { to { transform: translate(-6vmax, 9vmax) scale(.92) } }

@media (prefers-reduced-motion: reduce) {
  .fondo i { animation: none !important }
}