/* ══════════════════════════════════════════════════════════════════════
   ORIONONE — asistente del laboratorio.

   Es el del grupo, portado tal cual. Se probó una versión propia con el
   lanzador metido en un cuadro y el panel flotando en una esquina, y no
   era eso: el cuadro convertía la marca en un botón cualquiera, y el panel
   en esquina tapaba lo que estabas leyendo.

   Lo que hace el original y aquí se conserva:
     · El hexágono flota SUELTO, sin caja. Sube y baja despacio, y gira una
       vuelta entera cuando tiene algo que decir.
     · La nubecita no es un bocadillo con pico: filete blanco a la
       izquierda —el mismo recurso editorial del sitio— y un hilo fino que
       la ata al hexágono.
     · El panel es un CAJÓN LATERAL de altura completa, y la página cede
       espacio en vez de quedar tapada: se comprime hacia la izquierda con
       padding-right, así nada se sale de pantalla ni se corta.
   ══════════════════════════════════════════════════════════════════════ */

:root { --oo-w: min(400px, 100vw); --oo-e: cubic-bezier(0.2, 0.7, 0.3, 1); }

.oo[hidden] { display: none; }

.oo {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 200;   /* por encima de la cabecera fija */
  font-family: var(--sans);
}

.oo__logo { width: auto; height: 20px; display: block; flex: none; }

/* ── Lanzador: solo el hexágono ── */
.oo__lanzador {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* SOLO LA FLOTACIÓN, y el hexágono nace visible.

     ESTO ESTUVO ROTO DOS VECES Y CONVIENE ENTENDER POR QUÉ. Primero con
     opacity:0 + una transición que encendía una clase; después con un
     keyframe de entrada. Las dos veces el hexágono quedaba invisible,
     porque una animación o transición EN MARCHA gana a cualquier regla e
     incluso a un estilo en línea — y el navegador congela las animaciones
     de las pestañas que no están a la vista, dejándola clavada en el
     fotograma 0.

     La regla que sale de ahí: que algo SE VEA nunca puede depender de que
     una animación avance. Aquí lo decide `hidden` en la raíz, que lo
     quita el guion; la flotación es solo adorno y si se congela no pasa
     nada, porque no hay nadie mirando. */
  animation: ooFlota 5s ease-in-out infinite;
}
.oo__lanzador .oo__logo {
  height: 40px;
  transition: filter 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(var(--tinta-rgb), 0.14));
}
.oo__lanzador:hover .oo__logo { filter: drop-shadow(0 0 16px rgba(var(--tinta-rgb), 0.3)); }
.oo__lanzador:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 4px; }
.oo.is-abierto .oo__lanzador { opacity: 0; pointer-events: none; }

@keyframes ooFlota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Giro: una vuelta y se queda quieto. Va por keyframes y no por transición
   —con transición el logo se DES-giraba al quitar la clase. */
.oo__lanzador.gira .oo__logo { animation: ooGira 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.oo__lanzador.gira-atras .oo__logo { animation: ooGiraAtras 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes ooGira { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ooGiraAtras { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* ── La nubecita ── */
.oo__nube {
  position: absolute;
  right: 76px;
  bottom: 9px;
  width: max-content;
  max-width: min(258px, 62vw);
  padding: 13px 17px 14px 16px;
  background: var(--space-0);
  color: var(--white);
  border: 1px solid rgba(var(--tinta-rgb), 0.08);
  border-left: 2px solid rgba(var(--tinta-rgb), 0.92);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 18px 42px -16px rgba(var(--sombra-rgb), 0.95);
  font-size: 0.85rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateX(10px);
  transform-origin: bottom right;
  transition: opacity 0.42s var(--oo-e), transform 0.42s var(--oo-e);
  pointer-events: none;
}
/* El hilo que la ata al hexágono. */
.oo__nube::after {
  content: '';
  position: absolute;
  right: -16px;
  bottom: 19px;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--tinta-rgb), 0.4), rgba(var(--tinta-rgb), 0.12));
}
.oo__nube[hidden] { display: none; }
.oo__nube.is-in { opacity: 1; transform: none; pointer-events: auto; }
/* Solo es pulsable entera cuando no trae botones propios. */
.oo__nube.is-preg { cursor: pointer; }
.oo__nube.is-preg.is-in:hover { border-color: rgba(var(--tinta-rgb), 0.2); border-left-color: rgba(var(--tinta-rgb), 0.92); }
.oo__nube-t { margin: 0; }
.oo__nube-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.oo__nube-acts[hidden] { display: none; }
.oo.is-abierto .oo__nube { opacity: 0; pointer-events: none; }

/* ── El cajón ── */
.oo__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: var(--oo-w);
  background: var(--space-0);
  border-left: 1px solid rgba(var(--tinta-rgb), 0.14);
  border-radius: 0;
  box-shadow: -30px 0 70px -30px rgba(var(--sombra-rgb), 0.95);
  overflow: hidden;
  color: var(--white);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.42s var(--oo-e), visibility 0.42s;
}
.oo.is-abierto .oo__panel { visibility: visible; transform: none; }

/* La página cede espacio en vez de quedar tapada: se comprime hacia la
   izquierda y el contenido se recentra solo. Solo en pantallas anchas —
   en estrecho el cajón ocupa todo y comprimir no tendría sentido. */
.hdr, main, .ftr { transition: padding-right 0.42s var(--oo-e); }
@media (min-width: 1024px) {
  html.oo-empuja .hdr,
  html.oo-empuja main,
  html.oo-empuja .ftr { padding-right: var(--oo-w); }
}

.oo__cab {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(var(--tinta-rgb), 0.1);
}
.oo__logo--cab { height: 22px; }
.oo__nombre {
  margin: 0;
  margin-right: auto;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}
.oo__cerrar {
  background: none;
  border: none;
  color: rgba(var(--tinta-rgb), 0.6);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.2s ease;
}
.oo__cerrar:hover { color: var(--white); }
.oo__cerrar:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }

/* ── La conversación ── */
.oo__log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--tinta-rgb), 0.16) transparent;
}
.oo__log::-webkit-scrollbar { width: 6px; }
.oo__log::-webkit-scrollbar-thumb { background: rgba(var(--tinta-rgb), 0.16); }

.oo__turno { display: flex; gap: 9px; max-width: 100%; }
.oo__turno--user { justify-content: flex-end; }
.oo__turno--assistant { align-items: flex-start; }
.oo__ava { width: auto; height: 19px; flex: none; margin-top: 3px; opacity: 0.85; }

.oo__msg {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.oo__turno--user .oo__msg {
  max-width: 86%;
  padding: 9px 12px;
  background: rgba(var(--tinta-rgb), 0.09);
  color: var(--white);
  font-weight: 500;
}
.oo__msg a { color: var(--blue-lit); text-decoration: underline; text-underline-offset: 3px; }

.oo__puntos { display: inline-flex; gap: 5px; padding-top: 6px; }
.oo__puntos i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-lit);
  animation: ooPunto 1.3s ease-in-out infinite;
}
.oo__puntos i:nth-child(2) { animation-delay: 0.16s; }
.oo__puntos i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ooPunto {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ── Preguntas para empezar y oferta de llevarte ── */
.oo__arranque, .oo__ir { flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 28px; }
.oo__ir-q { margin: 0 0 4px; font-size: 0.92rem; font-weight: 600; color: var(--white); }
.oo__ir-acts { display: flex; flex-wrap: wrap; gap: 7px; }

.oo__btn, .oo__arranque-btn {
  padding: 8px 13px;
  border: 1px solid rgba(var(--tinta-rgb), 0.22);
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.oo__btn:hover, .oo__arranque-btn:hover { border-color: rgba(var(--tinta-rgb), 0.5); color: var(--white); }
.oo__btn--si { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.oo__btn--si:hover { background: rgba(255, 255, 255, 0.85); color: #000; border-color: rgba(255, 255, 255, 0.85); }
.oo__btn:focus-visible, .oo__arranque-btn:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }

/* ── El campo ── */
.oo__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid rgba(var(--tinta-rgb), 0.1);
  transition: border-color 0.25s ease;
}
.oo__form:focus-within { border-top-color: rgba(var(--lit-rgb), 0.6); }
.oo__oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.oo__input {
  flex: 1;
  min-height: 22px;
  max-height: 128px;
  padding: 0;
  border: 0;
  background: none;
  resize: none;
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.5;
}
.oo__input::placeholder { color: var(--muted-2); }
.oo__input:focus { outline: none; }

.oo__enviar {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  background: #ffffff;
  color: #000;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.25s ease, background 0.25s ease;
}
.oo__enviar:disabled { opacity: 0.35; cursor: default; }
.oo__enviar:not(:disabled):hover { background: rgba(255, 255, 255, 0.85); }
.oo__enviar:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }

.oo__pie {
  margin: 0;
  padding: 0 16px 13px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.7;
}
.oo__pie a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.oo__pie a:hover { color: var(--blue-lit); }

@media (prefers-reduced-motion: reduce) {
  .oo__lanzador { animation: none; }
  .oo__lanzador.gira .oo__logo,
  .oo__lanzador.gira-atras .oo__logo { animation: none; }
  .oo__panel { transition: visibility 0.2s; }
  .oo__nube { transition: opacity 0.2s; transform: none; }
  .oo__puntos i { animation: none; opacity: 0.6; }
  .hdr, main, .ftr { transition: none; }
}

/* ═══ REDONDEADO, Y SOLO AQUÍ DENTRO ══════════════════════════════════
   El sitio entero va a radio cero: es una publicación, y el canto vivo es
   lo que le da el aire editorial. El chat NO es una página — es una
   superficie de aplicación que flota encima, y ahí el canto vivo se lee
   duro y anticuado. Así que el radio vuelve, pero acotado a `.oo`: nada
   de esto se escapa al resto del sitio.

   Lo que se redondea y por qué:
     · las sugerencias, en cápsula — es la forma que dice «púlsame»;
     · tu mensaje, con la esquina de abajo a la derecha marcada, que es de
       donde sale;
     · el campo, que pasa de barra pegada al borde a caja flotante;
     · el enviar, redondo;
     · el cajón, redondeado por el lado que se ve.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sugerencias y botones: cápsula. */
.oo__btn,
.oo__arranque-btn {
  border-radius: 999px;
  padding: 9px 15px;
}

/* Tu mensaje: redondo, con la esquina de abajo a la derecha marcada.
   Es el único punto de todo el sitio donde una esquina dice algo — de qué
   lado viene el mensaje. */
.oo__turno--user .oo__msg {
  border-radius: 16px 16px 5px 16px;
  padding: 10px 14px;
}

/* El campo deja de ser una barra pegada al borde y pasa a ser una caja
   que flota dentro del panel, con su propio aire alrededor. */
.oo__form {
  margin: 4px 14px 12px;
  padding: 8px 8px 8px 16px;
  align-items: center;
  border: 1px solid rgba(var(--tinta-rgb), 0.16);
  border-radius: 26px;
  background: rgba(var(--tinta-rgb), 0.04);
}
.oo__form:focus-within {
  border-color: rgba(var(--lit-rgb), 0.55);
  background: rgba(var(--tinta-rgb), 0.06);
}
.oo__input { padding-block: 4px; }

.oo__enviar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.05rem;
}

/* La nubecita conserva su filete recto a la izquierda —de ahí sale el
   hilo que la ata al hexágono— y redondea todo lo demás. */
.oo__nube { border-radius: 0 16px 16px 0; }

/* El cajón, redondeado por el borde que se ve. El derecho toca el canto de
   la pantalla, así que redondearlo no se vería y solo dejaría un hueco. */
.oo__panel { border-radius: 20px 0 0 20px; }

/* La ✕ gana una zona redonda al pasar por encima: sin ella el objetivo se
   adivina, y es el único control del panel que cierra algo. */
.oo__cerrar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.oo__cerrar:hover { background: rgba(var(--tinta-rgb), 0.08); }

/* El avatar del asistente, en su propio disco: separa el hexágono del
   texto sin meter una línea de por medio. */
.oo__ava {
  box-sizing: content-box;
  padding: 5px;
  border-radius: 50%;
  background: rgba(var(--tinta-rgb), 0.06);
  height: 16px;
}

/* ═══ LO QUE ORIONONE SEÑALA ══════════════════════════════════════════
   Cuando el asistente baja a un trozo de la página, ese trozo se marca un
   momento. Sin la marca el desplazamiento parece un salto accidental: la
   página se movió y no queda claro adónde ni por qué.

   Se marca con un filete azul a la izquierda y un baño muy leve, no con un
   recuadro: hay que decir «es esto» sin encerrarlo. Y se apaga solo a los
   2,6 s — una marca permanente dejaría el sitio pintado de conversaciones
   viejas. */
.oo-senalado {
  animation: ooSenal 2.6s var(--e-out) both;
}
@keyframes ooSenal {
  0%   { box-shadow: inset 3px 0 0 var(--blue-lit), inset 0 0 0 100vmax rgba(var(--lit-rgb), 0.09); }
  70%  { box-shadow: inset 3px 0 0 var(--blue-lit), inset 0 0 0 100vmax rgba(var(--lit-rgb), 0.09); }
  100% { box-shadow: inset 0 0 0 rgba(var(--lit-rgb), 0), inset 0 0 0 100vmax rgba(var(--lit-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .oo-senalado { animation: none; box-shadow: inset 3px 0 0 var(--blue-lit); }
}

/* ═══ CUANDO EL CAJÓN EMPUJA, LA PÁGINA SE ENCOGE ═════════════════════
   AQUÍ HAY UNA TRAMPA QUE COSTÓ VERLA. Al abrir el cajón, `main` recibe
   400 px de padding y el contenido se queda con ~685 px. Pero las
   consultas de medio del sitio miran EL ANCHO DE LA VENTANA, que sigue
   siendo 1085. Así que ninguna se activa: el laboratorio seguía sacando
   tres tarjetas en fila —de 187 px cada una—, el collage seguía a dos
   columnas y los cuatro pasos de Origin seguían en cuatro. Todo apretado,
   y desde fuera parecía que la página se había roto.

   La solución de verdad serían consultas de CONTENEDOR, pero eso obliga a
   reescribir el reparto de medio sitio. Aquí se hace lo directo: mientras
   el cajón empuja, se aplica a mano el reparto que el sitio ya usa cuando
   de verdad hay poco ancho. Una regla por rejilla rígida, y ninguna se
   escapa a otro estado. */
@media (min-width: 1024px) {
  html.oo-empuja .cards--3 { grid-template-columns: repeat(2, 1fr); }

  html.oo-empuja .pubs__collage,
  html.oo-empuja .rec__caja,
  html.oo-empuja .rec__caso { grid-template-columns: 1fr; }

  html.oo-empuja .flow { grid-template-columns: repeat(2, 1fr); }

  html.oo-empuja .puerta {
    grid-template-columns: clamp(26px, 4vw, 44px) minmax(0, 1fr) 24px;
    row-gap: 0.55em;
  }
  html.oo-empuja .puerta__d { grid-column: 2 / -1; }
  html.oo-empuja .puertas--ancha .puerta {
    grid-template-columns: clamp(80px, 9vw, 120px) minmax(0, 1fr) 24px;
  }

  html.oo-empuja .origen__grid { grid-template-columns: 1fr; }

  /* Siete entradas de menú no caben en el hueco que queda: se desliza,
     igual que en móvil. */
  html.oo-empuja .hdr .nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.oo-empuja .hdr .nav::-webkit-scrollbar { display: none; }
  html.oo-empuja .hdr .nav a { white-space: nowrap; }
}

/* ═══ EL PENSAMIENTO: EL ROMBO GIRANDO ════════════════════════════════
   Eran tres puntitos saltando, que es lo que hace cualquier aplicación de
   mensajería. El del grupo gira la marca sobre sí misma mientras piensa, y
   eso sí dice de quién es la espera. */
.oo__pensando {
  height: 24px;
  width: auto;
  display: block;
  margin: 4px 0 2px;
  animation: ooPiensa 1.5s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
  filter: drop-shadow(0 0 8px rgba(var(--tinta-rgb), 0.2));
}
@keyframes ooPiensa {
  0%   { transform: rotate(0); opacity: 0.55; }
  50%  { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .oo__pensando { animation: none; opacity: 0.7; }
}

/* ═══ EL RECORRIDO ════════════════════════════════════════════════════
   Cuando OrionOne señala varias cosas seguidas, no se atropellan: se
   listan como paradas y se van encendiendo una a una. La lista existe
   para que se sepa cuántas quedan —un recorrido a ciegas desconcierta— y
   para poder saltar a cualquiera o bajarse. */
.oo__ruta {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: 28px;
}
.oo__ruta-t {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-lit);
}
.oo__ruta-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: parada;
}
.oo__ruta-p { display: flex; }
.oo__ruta-btn {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 10px 6px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.oo__ruta-btn::before {
  counter-increment: parada;
  content: counter(parada);
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-2);
}
.oo__ruta-btn:hover { color: var(--white); background: rgba(var(--tinta-rgb), 0.06); }
.oo__ruta-btn:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }

/* La parada en la que va ahora. */
.oo__ruta-p.is-aqui .oo__ruta-btn {
  color: var(--white);
  background: rgba(var(--lit-rgb), 0.16);
}
.oo__ruta-p.is-aqui .oo__ruta-btn::before { color: var(--blue-lit); }

/* «Parar» solo tiene sentido mientras anda. */
.oo__ruta-parar { margin-top: 9px; display: none; }
.oo__ruta.is-andando .oo__ruta-parar { display: inline-block; }