/* ═══════════════════════════════════════════════════════════
   Lo que usamos — índice de las herramientas propias.

   Cada burbuja lleva arriba una vista previa dibujada en HTML y
   SVG, no una captura. Pesa nada, se ve nítida en cualquier
   pantalla, hereda los colores del tema y se puede animar más
   adelante sin rehacerla. Una página sobre herramientas visuales
   sin una sola imagen no vendía nada.
   ═══════════════════════════════════════════════════════════ */

.lqu-lista{display:grid;gap:20px;margin-top:12px}
@media (min-width:820px){ .lqu-lista{grid-template-columns:repeat(2,1fr)} }

.lqu-burbuja{
  position:relative;display:flex;flex-direction:column;
  padding:16px 16px 20px;
  border:1px solid var(--line);border-radius:22px;
  background:var(--ink-2);
  transition:border-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.lqu-burbuja.viene{border-style:dashed;opacity:.72}

@media (hover:hover) and (pointer:fine){
  a.lqu-burbuja:hover{border-color:var(--gold);transform:translateY(-2px)}
}
a.lqu-burbuja:active{transform:translateY(0) scale(.995)}

/* ── La vista previa ────────────────────────────────────────────────────── */
.lqu-vista{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(240,180,41,.06), transparent 62%),
    var(--ink);
  margin-bottom:18px;
}
.lqu-cuerpo{padding:0 8px}

/* ── Vista: el bot contestando ──────────────────────────────────────────── */
.v-chat{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.v-chat b{
  max-width:78%;padding:8px 11px;border-radius:13px;font-size:.72rem;
  font-weight:400;line-height:1.35;
}
.v-chat .entra{align-self:flex-start;background:var(--ink-3);color:var(--cream);border-bottom-left-radius:4px}
.v-chat .sale{align-self:flex-end;background:var(--gold);color:var(--ink);border-bottom-right-radius:4px}
.v-chat .escribiendo{
  align-self:flex-end;display:flex;gap:4px;align-items:center;
  padding:10px 12px;border-radius:13px;border-bottom-right-radius:4px;
  background:var(--ink-3);
}
.v-chat .escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--cream-dim)}
.v-chat .marca-hora{
  position:absolute;right:12px;top:10px;font-family:var(--tech);
  font-size:.54rem;letter-spacing:.14em;color:var(--gold);
}

/* ── Vista: el día de Sincro ────────────────────────────────────────────── */
.v-dia{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.v-dia .fila{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  background:var(--ink-3);border-left:3px solid var(--gold);
}
.v-dia .fila.rutina{border-left-color:var(--cream-dim)}
.v-dia .fila.urgente{border-left-color:var(--cobalt)}
.v-dia .hora{font-family:var(--tech);font-size:.58rem;color:var(--cream-dim);min-width:44px}
.v-dia .que{font-size:.72rem;color:var(--cream);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-dia .casilla{
  width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid var(--cream-dim);
}
.v-dia .casilla.hecho{border-color:var(--ok);background:var(--ok)}

/* ── Vista: zonas seguras ───────────────────────────────────────────────── */
.v-zonas{position:absolute;inset:0;display:grid;place-items:center}
.v-zonas .movil{
  position:relative;height:84%;aspect-ratio:9/16;border-radius:9px;overflow:hidden;
  background:linear-gradient(160deg,#2a2118,#12100C);border:1px solid var(--line-hard);
}
.v-zonas .banda{position:absolute;left:0;right:0;background:rgba(229,72,77,.16)}
.v-zonas .banda.arriba{top:0;height:17%;border-bottom:1px dashed rgba(229,72,77,.5)}
.v-zonas .banda.abajo{bottom:0;height:27%;border-top:1px dashed rgba(229,72,77,.5)}
.v-zonas .segura{
  position:absolute;left:6%;right:6%;top:19%;bottom:29%;
  border:1px dashed rgba(76,195,138,.8);border-radius:4px;
}
.v-zonas .cara{
  position:absolute;left:50%;bottom:14%;width:34%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;background:#d9a982;
}
.v-zonas .hombros{
  position:absolute;left:50%;bottom:0;width:62%;height:16%;
  transform:translateX(-50%);border-radius:50% 50% 0 0;background:#d9a982;
}

/* ── Texto de la burbuja ────────────────────────────────────────────────── */
.lqu-estado{
  position:absolute;left:26px;top:26px;z-index:2;
  padding:4px 10px;border-radius:999px;
  font-family:var(--tech);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--gold);background:rgba(10,9,7,.78);
}
.lqu-estado.viene{border-color:var(--line-hard);color:var(--cream-dim)}
.lqu-estado.producto{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.lqu-burbuja h3{
  font-size:1.5rem;line-height:1.05;margin:0 0 9px;color:var(--cream);
  font-variation-settings:'wdth' 104,'wght' 600;
}
.lqu-cuerpo > p{margin:0;color:var(--cream-dim);font-size:.95rem;line-height:1.55}

/* La línea que hace verdadera la sección — presente, pero sin gritar. */
.lqu-uso{
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.5;color:var(--cream-dim);
}
.lqu-uso b{
  display:block;margin-bottom:3px;
  font-family:var(--tech);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);opacity:.7;font-weight:400;
}

.lqu-entrar{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tech);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.lqu-entrar svg{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  a.lqu-burbuja:hover .lqu-entrar svg{transform:translateX(4px)}
}

/* Volver, en la página de cada herramienta. */
.lqu-volver{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:var(--tech);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-dim);
  transition:color var(--t-ui) ease;
}
@media (hover:hover) and (pointer:fine){ .lqu-volver:hover{color:var(--gold)} }

@media (prefers-reduced-motion:reduce){
  .lqu-burbuja,.lqu-entrar svg{transition:none}
  a.lqu-burbuja:hover{transform:none}
}

/* ═══ Movimiento ═════════════════════════════════════════════
   Curvas y duraciones del manual. Sólo se anima transform y
   opacity. Todo arranca cuando la tarjeta entra en pantalla —lo
   pone .anima desde /js/lo-que-usamos.js— y se para al salir.
   ═══════════════════════════════════════════════════════════ */

/* En reposo todo está en su sitio y visible. Lo único que empieza oculto es
   el globo de «escribiendo», que sin animación no tendría sentido enseñar. */
.lqu-vista .v-chat .escribiendo{opacity:0}

@keyframes lqu-entra{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes lqu-sale{ to{opacity:0;transform:translateY(-6px)} }
@keyframes lqu-baja{ from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }
@keyframes lqu-sube{ from{opacity:0;transform:translateY(100%)}  to{opacity:1;transform:translateY(0)} }
@keyframes lqu-aparece{ from{opacity:0} to{opacity:1} }
@keyframes lqu-marcar{
  from{background:transparent;border-color:var(--cream-dim);transform:scale(1)}
  60%{transform:scale(1.35)}
  to{background:var(--ok);border-color:var(--ok);transform:scale(1)}
}
@keyframes lqu-puntos{ 0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }
/* Vaivén de la clave: entra y sale de pantalla, así que curva de
   entrada-y-salida del manual. Nunca ease-in. */
@keyframes lqu-orbita{
  from{transform:translate(160px,92px) rotate(-42deg)}
  to{transform:translate(160px,92px) rotate(56deg)}
}

.anima .v-chat > b,
.anima .v-chat .escribiendo,
.anima .v-dia .fila{
  animation:lqu-entra 280ms cubic-bezier(.23,1,.32,1) both;
}
.anima .v-chat .uno{animation-delay:60ms}
.anima .v-chat .escribiendo{animation-delay:460ms}
.anima .v-chat .sale{animation-delay:1180ms}
.anima .v-chat .dos{animation-delay:1820ms}
/* El globo de «escribiendo» se va justo cuando llega la respuesta. */
.anima .v-chat .escribiendo{
  animation:lqu-entra 280ms cubic-bezier(.23,1,.32,1) 460ms both,
            lqu-sale 200ms cubic-bezier(.23,1,.32,1) 1140ms forwards;
}
.anima .v-chat .escribiendo i{animation:lqu-puntos 1s linear infinite}
.anima .v-chat .escribiendo i:nth-child(2){animation-delay:.14s}
.anima .v-chat .escribiendo i:nth-child(3){animation-delay:.28s}

.anima .v-dia .fila:nth-child(1){animation-delay:60ms}
.anima .v-dia .fila:nth-child(2){animation-delay:180ms}
.anima .v-dia .fila:nth-child(3){animation-delay:300ms}
.anima .v-dia .casilla.hecho{
  animation:lqu-marcar 320ms cubic-bezier(.23,1,.32,1) 1100ms forwards;
}

.anima .v-zonas .banda.arriba{animation:lqu-baja 320ms cubic-bezier(.23,1,.32,1) 420ms both}
.anima .v-zonas .banda.abajo{animation:lqu-sube 320ms cubic-bezier(.23,1,.32,1) 560ms both}
.anima .v-zonas .segura{animation:lqu-aparece 300ms linear 1000ms both}

.orbita{transform-box:view-box;transform-origin:0 0;transform:translate(160px,92px) rotate(8deg)}
.anima .orbita{
  animation:lqu-orbita 5.2s cubic-bezier(.77,0,.175,1) infinite alternate;
}

/* Se apaga entero: todo queda en su sitio, sin un solo desplazamiento. */
@media (prefers-reduced-motion:reduce){
  .lqu-vista .v-chat > b,
  .lqu-vista .v-chat .escribiendo,
  .lqu-vista .v-dia .fila,
  .lqu-vista .v-zonas .banda,
  .lqu-vista .v-zonas .segura{opacity:1;transform:none;animation:none}
  .lqu-vista .v-chat .escribiendo{display:none}
  .lqu-vista .v-dia .casilla.hecho{background:var(--ok);border-color:var(--ok);animation:none}
  .orbita{animation:none}
}