/* Remi, la mascota de Rém.

   Vive en su propio archivo desde el 14 de septiembre porque Marcelo lo quiere
   en TODAS partes, y «todas partes» incluye la portada, que es otra página. Una
   mascota copiada y pegada en dos sitios es una mascota que se arregla en uno.

   El giro y el aterrizaje los escribe el motor en variables CSS y no en
   `transform`, porque `:hover` y `:active` también transforman y el último en
   escribir gana. */
/* ── Remi ─────────────────────────────────────────────────────────────────
   La montaña de Rém con patas, y es el trazo del logo sin retocar: el mismo
   `d` y la misma transformación que `favicon.svg`, con degradado para que tenga
   volumen y un filtro de grano para que de cerca sea piedra. No es un adorno,
   es la puerta de la guía.

   Desde el 2 de octubre vive en la columna de la izquierda: camina, salta entre
   pestañas, trepa por la raya de la navegación y baila. El columpio y su cuerda
   se quitaron porque Marcelo dijo que se volvía «overwhelming» (ver la cabecera
   de remi.js). El giro y el aterrizaje los escribe el motor en variables CSS, no en
   `transform`, porque `:hover` y `:active` también transforman y el último en
   escribir gana. Al pincharlo baja, se para y se pone a hablar. */
#remi{position:fixed;top:0;left:300px;z-index:28;cursor:pointer;
      width:58px;height:67px;touch-action:none;user-select:none;
      filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
      will-change:transform,left,top}
/* El giro lo pone el motor en el atributo `style`, así que aquí no puede haber
   un `transform` que se lo pise: el `hover` levanta con una variable y el
   motor la respeta. */
/* El giro pivota en la bandera. Era por la cuerda, que ya no existe; se deja
   porque el motor calcula con este punto dónde caen los pies cuando trepa por
   la raya de la navegación, y moverlo aquí sin moverlo allí lo saca de la zona. */
#remi{transform:translateY(var(--salto,0px)) rotate(var(--giro,0deg)) scale(var(--chafa,1));
      transform-origin:52% 11%}
#remi:hover{--salto:-4px}
#remi:active{--chafa:.97}
#remi.duerme{position:absolute;width:46px;height:53px;--salto:0px;--chafa:1;z-index:1;
  filter:drop-shadow(0 2px 3px #0005)}
#remi>svg{display:block;width:100%;height:100%}
#remi.visita{z-index:32;--salto:0px;--chafa:1}
#guia.remi-chat{height:min(420px,55vh);max-height:55vh;box-sizing:border-box;display:flex;flex-direction:column}
#guia.remi-chat.plegada{display:none}
#guia.remi-chat .cuerpo{flex:1;min-height:0;max-height:none}
#guia.remi-chat .pieg{flex-shrink:0}
/* Los párpados quedan cerrados; la respiración no desplaza el icono de Inicio. */
#remi .parpados{opacity:0}
#remi.duerme .ojos{opacity:0;transform:scaleY(.08);animation:remi-cierra-ojos 4.8s ease-in-out infinite}
#remi.duerme .parpados{opacity:1;animation:remi-duerme-parpados 4.8s ease-in-out infinite}
#remi.duerme .cuerpo{transform-box:fill-box;transform-origin:center bottom;
  animation:remi-respira 3.6s ease-in-out infinite}
@keyframes remi-cierra-ojos{0%,12%,100%{opacity:1;transform:scaleY(.65)}
  24%,88%{opacity:0;transform:scaleY(.08)}}
@keyframes remi-duerme-parpados{0%,12%,100%{opacity:0}24%,88%{opacity:1}}
@keyframes remi-respira{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-.5px) scale(1.025,1.045)}}
/* Sustituye el logo junto al nombre; el texto mantiene su propio espacio. */
#remi-dormitorio{position:relative;display:inline-block;width:46px;height:53px;
  flex:0 0 46px;vertical-align:middle;isolation:isolate}
#remi-dormitorio[hidden]{display:none}
#remi-dormitorio .remi-ronquido{position:absolute;left:27px;top:-3px;z-index:2;
  visibility:hidden;
  padding:1px 3px;border-radius:5px;background:var(--s1,#0d1011);color:var(--teal,#4fd1c5);
  font:italic 700 14px/1.1 'Comic Sans MS',cursive;white-space:nowrap;
  transform:rotate(-12deg);pointer-events:none}
#remi-dormitorio.dormido .remi-ronquido{visibility:visible}
.marca.remi-con-sueno>img{display:none}
.marca.remi-con-sueno{align-items:center;gap:9px}
.marca.remi-con-sueno b{min-width:0}
/* El logo y Rémi comparten medidas para que el nombre no salte al dormirse. */
nav .marca{min-height:71px}
nav .marca>img{flex:0 0 22px;margin-left:12px;margin-right:12px}
nav .marca>b{flex-shrink:0;white-space:nowrap;font:400 19px/1 var(--display);letter-spacing:.2px}
nav .nav-tira .marca{min-height:53px}
.remi-cerrar{border:1px solid var(--line2,#233);border-radius:6px;background:transparent;
  color:var(--text,#dde6e5);padding:5px 8px;cursor:pointer;font:inherit;white-space:nowrap}
#remi.colocado{display:block;--salto:0px;--chafa:1;cursor:grab}
#remi.colocado:active{cursor:grabbing}
#remi:focus-visible,#remi-ajustes :focus-visible{outline:2px solid #4fd1c5;outline-offset:3px}
#remi-ajustes{position:fixed;z-index:100;padding:6px;box-sizing:border-box;overflow-y:auto;
  border:1px solid var(--line2,#233);border-radius:10px;background:var(--s1,#0d1011);
  box-shadow:0 8px 28px #0007;color:var(--text,#dde6e5);font:400 12px/1.5 Inter,system-ui,sans-serif}
#remi-ajustes[hidden]{display:none}
#remi-ajustes button{display:block;min-height:44px;width:100%;padding:8px 10px;
  border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
#remi-ajustes button:hover,#remi-ajustes button:focus-visible{background:var(--s2,#121617)}
#remi-ajustes button[aria-checked="true"]{color:var(--teal,#4fd1c5);background:var(--s2,#121617)}
#remi-aviso:empty{display:none}
#remi .pata{fill:#6d7c7a}
#remi.anda .cuerpo{animation:remi-bota .54s ease-in-out infinite}
#remi.anda .pata.i{animation:remi-pata .54s ease-in-out infinite}
#remi.anda .pata.d{animation:remi-pata .54s ease-in-out infinite -.27s}
#remi.anda .cuerpo,#remi.anda .pata{animation-duration:.77s}
#remi.anda .pata.d{animation-delay:-.385s}
#remi .pata{transform-box:fill-box;transform-origin:50% 8%}
/* En el aire y trepando, las patas cuelgan: se mecen solas y más despacio que
   andando, que es la diferencia entre pesar y pedalear. La bandera ya no tiene animación propia
   porque ya no es una pieza suelta, va dentro del trazo del logo. */
#remi.cuelga .pata.i{animation:remi-cuelga 1.5s ease-in-out infinite}
#remi.cuelga .pata.d{animation:remi-cuelga 1.5s ease-in-out infinite -.5s}
#remi .ojos{transform-box:fill-box;transform-origin:center;
            animation:remi-parpadeo 6.5s ease-in-out infinite}
#remi .pupila{transition:transform .12s ease-out}
#remi.habla .cuerpo{animation:remi-atento 2.2s ease-in-out infinite}
/* El baile. Un compás de 1,1 segundos (el mismo `COMPAS` de remi.js, que corta
   el baile siempre en un compás entero): patada de la izquierda con el cuerpo
   hacia la derecha, vuelta al centro, patada de la derecha con el cuerpo hacia
   la izquierda. Despacio a propósito: lo que pidió Marcelo es menos ruido, y un
   baile rápido en una esquina de la vista tira del ojo como una notificación.
   El cuerpo gira desde los pies y no desde el centro, que es lo que hace que
   parezca que se balancea y no que flota. */
#remi .cuerpo{transform-box:fill-box;transform-origin:50% 100%}
#remi.baila .cuerpo{animation:remi-baila 1.1s ease-in-out infinite}
#remi.baila .pata.i{animation:remi-paso-i 1.1s ease-in-out infinite}
#remi.baila .pata.d{animation:remi-paso-d 1.1s ease-in-out infinite}
#remi.baila .ojos{animation:remi-contento 1.1s ease-in-out infinite}
@keyframes remi-bota{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@keyframes remi-pata{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}
@keyframes remi-cuelga{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
@keyframes remi-baila{0%,50%,100%{transform:translateY(0) rotate(0)}
                     25%{transform:translateY(-2.6px) rotate(6deg)}
                     75%{transform:translateY(-2.6px) rotate(-6deg)}}
@keyframes remi-paso-i{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(30deg)}}
@keyframes remi-paso-d{0%,50%,100%{transform:rotate(0)}75%{transform:rotate(-30deg)}}
/* Los ojos se entornan en cada paso: es lo que distingue bailar de hacer
   ejercicio. */
@keyframes remi-contento{0%,50%,100%{transform:scaleY(1)}25%,75%{transform:scaleY(.55)}}
@keyframes remi-parpadeo{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes remi-atento{0%,100%{transform:translateY(0) rotate(0)}
                       50%{transform:translateY(-1.2px) rotate(-1.4deg)}}
@media(prefers-reduced-motion:reduce){
  #remi *{animation:none !important}}

/* ── Las burbujas de Rémi ──────────────────────────────────────────────────
   21 de septiembre de 2026. Marcelo: «falta que Rémi tenga burbujas que
   sugieran algo, como una idea o pensamiento que pueda ser una acción,
   sugerencia, tip, comentario o pregunta».

   Es un globo de pensamiento y no un tooltip: tiene su pico, se puede pinchar
   entero y se puede cerrar. El pico apunta abajo porque Rémi está debajo; si el
   globo no cabe arriba se le da la vuelta con `.abajo`.

   Desde el 2 de octubre el globo vive dentro de la navegación, como Rémi: el
   ancho lo pone remi-burbujas.js con el de la zona, y el pico ya no va al
   centro sino a donde está la montaña (`--pico`), porque un globo arrimado a
   un borde con el pico en medio señala al vacío.

   El color dice el tipo sin tener que leer la etiqueta: turquesa lo que hay que
   hacer, hueso lo que hay que contestar, gris lo que sólo cuenta algo. Es la
   misma promesa que en el resto del producto (turquesa se midió, hueso lo
   dedujo el Cortex) y no un tema nuevo. */
.remi-globo{position:fixed;z-index:29;max-width:290px;
  background:#0d1213;border:1px solid var(--line2,#233);border-radius:12px;
  padding:11px 30px 12px 13px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  font:400 13px/1.5 Inter,system-ui,sans-serif;color:#dde6e5;
  animation:globo-entra .22s cubic-bezier(.2,.9,.3,1)}
@keyframes globo-entra{from{opacity:0;transform:translateY(5px) scale(.97)}
                       to{opacity:1;transform:none}}
.remi-globo .et{display:block;font:500 9px Inter,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:#6d7d7b;margin-bottom:5px}
.remi-globo .tx{display:block}
.remi-globo .no{position:absolute;top:6px;right:9px;color:#4c5a58;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px}
.remi-globo .no:hover{color:#dde6e5}
.remi-globo.lleva{cursor:pointer}
.remi-globo.lleva:hover{border-color:#4fd1c5}
/* El pico. Dos cuadrados girados, uno del borde y otro del fondo encima, que es
   la manera de tener un pico con borde sin dibujar un SVG. */
.remi-globo:after,.remi-globo:before{content:'';position:absolute;width:10px;height:10px;
  transform:rotate(45deg);left:var(--pico,50%);margin-left:-5px}
.remi-globo:before{bottom:-6px;background:var(--line2,#233)}
.remi-globo:after{bottom:-4px;background:#0d1213}
.remi-globo.abajo:before{bottom:auto;top:-6px}
.remi-globo.abajo:after{bottom:auto;top:-4px}
.remi-globo.izquierda:before,.remi-globo.izquierda:after,
.remi-globo.derecha:before,.remi-globo.derecha:after{
  bottom:auto;top:var(--pico-y);margin-top:-5px;margin-left:0}
.remi-globo.izquierda:before{left:auto;right:-6px}
.remi-globo.izquierda:after{left:auto;right:-4px}
.remi-globo.derecha:before{left:-6px}
.remi-globo.derecha:after{left:-4px}
.remi-globo.accion{border-color:#2f8f86}
.remi-globo.accion:before{background:#2f8f86}
.remi-globo.accion .et{color:#4fd1c5}
.remi-globo.pregunta{border-color:#6b6455}
.remi-globo.pregunta:before{background:#6b6455}
.remi-globo.pregunta .et{color:#ede8df}
.remi-globo.tip .et{color:#9ab}
@media(max-width:700px){.remi-globo:not(.colocado){display:none}}