/* S6 Roshi. El aura es el único degradado permitido en toda la web. */

.roshi {
  position: relative;
  padding: 24px 0;

  /* El raíl de la página: igual que en el diseño,
     max(clamp(20, 5.5%, 80), (ancho - 1280) / 2). */
  --rail: max(clamp(20px, 5.5cqi, 80px), calc((100cqi - 1280px) / 2));
  --gi: 20px;

  /* Lo mueve el scroll desde JavaScript. Sin JavaScript el panel sale ya
     abierto, que es el estado final. */
  --abierto: 1;
  --m: 0px;

  /* Lo que el panel se come por los lados y el interior devuelve. */
  --sangria: max(0px, calc(var(--rail) - var(--m)));
}

/* El panel azul. Se estrecha por los márgenes mientras la sangría interior
   crece lo mismo, así que el contenido no se mueve al abrirse. */
.roshi__panel {
  position: relative;
  overflow: hidden;
  background: #03081b;
  margin-left: var(--m);
  margin-right: var(--m);
  border-radius: calc(31.9px * (1 - var(--abierto)));
}

.roshi__aura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20%;
  height: 60%;
  background: radial-gradient(
    ellipse 55% 70% at 50% 100%,
    rgba(0, 194, 255, 0.22),
    rgba(46, 111, 224, 0.12) 45%,
    rgba(3, 8, 27, 0) 75%
  );
  pointer-events: none;
}

/* Raíles de la rejilla, dentro del panel */
/* Las secciones azules no llevan guías: ni raíles ni cruces. El panel
   dibujaba los suyos y se veía la rejilla dentro del color. */


.roshi__interior {
  position: relative;
  z-index: 2;
  padding: 64px 20px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.roshi__encabezado {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roshi__titulo {
  color: #fff;
  text-wrap: balance;
}

/* A partir de 1280 el titular cabe en una línea, como en el diseño. */
@media (min-width: 1280px) {
  .roshi__titulo {
    white-space: nowrap;
  }
}

.roshi__entrada {
  font: 400 var(--fs-h3) / 1.45 var(--fb);
  color: #b6bcc6;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Flujo: lo que sabe → Roshi → quién lo usa ---- */

.roshi__flujo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.roshi__columna {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.roshi__etiqueta {
  font: 600 var(--fs-etiqueta) var(--fb);
  letter-spacing: normal;
  color: #8d95a2;
}

.roshi__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roshi__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: #03081b;
  font: 500 var(--fs-pequeno)/1.25 var(--fb);
  color: #fff;
  overflow-wrap: anywhere;
}

.roshi__chip svg {
  flex: none;
}

.roshi__centro {
  display: flex;
  align-items: center;
  justify-content: center;
}

.roshi__aura-marca {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 22%;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat;
  animation: mgAura 2.2s ease-in-out infinite;
}

@keyframes mgAura {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.roshi__grupos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roshi__grupo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.roshi__grupo-titulo {
  font: 600 var(--fs-etiqueta) var(--fb);
  letter-spacing: normal;
  color: var(--accent);
}

/* Dos por fila siempre. Antes era una fila flexible y el número de
   especialistas por línea dependía de lo largos que fueran sus nombres:
   Crea salía de uno en uno, Vende de dos en dos y Opera, dos y uno. */
.roshi__caras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roshi__cara {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 500 var(--fs-pequeno) var(--fb);
  color: #fff;
  line-height: 1.25;
}

.roshi__cara img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Los muñecos van sin fondo: sobre la banda oscura necesitan su círculo
     blanco detrás para que se lean. */
  background: #fff;
  flex: none;
}

/* Los hilos entre los chips, Roshi y los especialistas.
   Van detrás del contenido y no interceptan el ratón. */
.roshi__hilos {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.roshi__flujo > .roshi__columna,
.roshi__flujo > .roshi__centro {
  position: relative;
  z-index: 1;
}

/* ---- Capacidades ---- */

.roshi__capacidades {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  /* La rejilla se cierra por los cuatro lados, como la de ClickUp: antes
     solo tenía las líneas de arriba y de abajo y los cuadrados quedaban
     abiertos por los costados. */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.roshi__capacidad {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 24px 22px;
  color: var(--accent);
}

.roshi__capacidad:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.roshi__capacidad > svg {
  flex: none;
  color: #fff;
}

.roshi__capacidad-titulo {
  display: block;
  font: 600 var(--fs-cuerpo)/1.3 var(--fb);
  color: #fff;
  margin: 0;
}

.roshi__capacidad-texto {
  font: 400 var(--fs-pequeno)/1.5 var(--fb);
  color: #b6bcc6;
  margin: 0;
  min-height: 4.5em;
}

/* ---- Cierre ---- */

.roshi__cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.roshi__cierre-titulo {
  font: 700 var(--fs-h2) / 1.15 var(--fd);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.roshi__enlace {
  font: 600 var(--fs-pequeno) var(--fb);
  color: #fff;
}

.roshi__enlace:hover {
  color: var(--accent);
}

@media (min-width: 768px) {
  .roshi {
    --gi: 32px;
  }

  /* Las guías no van en las secciones azules: son las que tienen más aire
     a propósito (CLAUDE.md · Diseño). Antes el panel de Roshi dibujaba sus
     propios raíles blancos y se veía la rejilla dentro del color. */

  .roshi__interior {
    padding: 96px calc(var(--sangria) + var(--gi));
  }

  .roshi__capacidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roshi__capacidad {
    padding: 28px;
  }

  .roshi__capacidad:not(:nth-child(2n)) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .roshi__capacidad:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

@media (min-width: 900px) {
  .roshi__flujo {
    gap: 32px;
  }
}

@media (min-width: 1100px) {
  .roshi {
    --gi: 48px;
  }

  .roshi__hilos {
    display: block;
  }

  .roshi__flujo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: stretch;
  }

  .roshi__chips {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .roshi__chip {
    width: min(100%, 300px);
    font: 500 var(--fs-pequeno)/1.25 var(--fb);
  }

  .roshi__grupos {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
  }

  .roshi__aura-marca {
    width: 200px;
    height: 200px;
  }

  .roshi__capacidades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .roshi__capacidad:not(:nth-child(2n)) {
    border-right: none;
  }

  .roshi__capacidad:not(:nth-child(3n)) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .roshi__capacidad:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}

/* ======================================================================
   Las escenas dentro de cada capacidad. Cada una se anima al pasar el
   ratón por su celda: la celda recibe data-activa y las animaciones
   arrancan de cero. En reposo se queda el estado final.
   ====================================================================== */

.roshi__escena {
  position: relative;
  height: 180px;
  flex: none;
  box-sizing: content-box;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.roshi__ficha {
  width: min(100%, 320px);
  height: 172px;
  box-sizing: border-box;
  background: #0e1530;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}

.roshi__ficha-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 var(--fs-etiqueta) var(--fb);
  color: #b6bcc6;
  flex: none;
}

.roshi__latido {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

[data-activa] .roshi__latido {
  animation: roshiLatido 0.36s steps(1, end) 4;
}

@keyframes roshiLatido {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}

/* ---- 1 · Conoce tu negocio: entra un dato nuevo escribiéndose ---- */

.roshi__dato {
  display: flex;
  gap: 0;
  box-sizing: border-box;
  align-self: flex-start;
  max-width: 100%;
  font: 500 var(--fs-etiqueta)/1.3 "JetBrains Mono", monospace;
  color: #fff;
  padding: 6px 9px;
  border-radius: 6px;
  background: #03081b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}

/* Los datos 5 a 7 solo están en el HTML para que se lean: no se pintan. */
.roshi__dato--fuera {
  display: none;
}

/* El dato nuevo sale por arriba y empuja a los demás. */
.roshi__dato--nuevo {
  order: -1;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
}

[data-activa] .roshi__dato--nuevo {
  animation: roshiDatoEntra 0.3s cubic-bezier(0.22, 0.61, 0.25, 1) forwards;
}

@keyframes roshiDatoEntra {
  from {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
  }
  to {
    height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-width: 1px;
    opacity: 1;
  }
}

.roshi__dato--nuevo .roshi__dato-valor {
  clip-path: inset(0 100% 0 0);
}

[data-activa] .roshi__dato--nuevo .roshi__dato-valor {
  animation: roshiTeclea 1.1s steps(var(--letras)) 0.3s forwards;
}

@keyframes roshiTeclea {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---- 2 · Habla como tu marca: la conversación se reproduce ---- */

.roshi__ficha--chat {
  padding: 12px;
  gap: 8px;
}

.roshi__tono {
  align-self: flex-start;
  flex: none;
  font: 500 var(--fs-etiqueta) var(--fb);
  color: #b6bcc6;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.roshi__hilo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-height: 0;
}

/* Los puntos de «escribiendo» se montan encima del mensaje: así el turno
   mide siempre lo que mide el mensaje y nada se mueve al reproducirse. */
.roshi__turno {
  position: relative;
  display: flex;
  flex-direction: column;
}

.roshi__burbuja-fila {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.roshi__burbuja-fila--puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.roshi__burbuja-fila--puntos {
  opacity: 0;
}

.roshi__turno--mio .roshi__burbuja-fila {
  flex-direction: row-reverse;
}

.roshi__avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: #161d38;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.roshi__avatar--ventas {
  background: #fff url("/assets/img/busto-ventas.cd0c0009.jpg") 50% 35% / cover no-repeat;
}

.roshi__puntos {
  display: flex;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #161d38;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.roshi__puntos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b6bcc6;
  animation: roshiPunto 0.54s linear infinite;
}

.roshi__puntos i:nth-child(2) {
  animation-delay: 0.18s;
}

.roshi__puntos i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes roshiPunto {
  0%,
  33% {
    opacity: 1;
  }
  34%,
  100% {
    opacity: 0.3;
  }
}

.roshi__burbuja {
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 12px 12px 12px 3px;
  background: #161d38;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 400 var(--fs-etiqueta)/1.4 var(--fb);
  color: #fff;
}

.roshi__burbuja--mia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px 12px 3px 12px;
  background: #0e2a44;
  border-color: rgba(0, 194, 255, 0.35);
}

.roshi__burbuja-quien {
  font: 600 var(--fs-etiqueta) var(--fb);
  color: var(--accent);
}

/* El reloj de la escena, 3,8 s: puntos del cliente, mensaje del cliente,
   puntos de Ventas y respuesta. */
[data-activa] .roshi__turno:first-child .roshi__burbuja-fila--puntos {
  animation: roshiVisible1 3.8s linear forwards;
}

[data-activa] .roshi__turno:first-child .roshi__burbuja-fila--texto {
  animation: roshiOculta1 3.8s linear forwards;
}

[data-activa] .roshi__turno--mio .roshi__burbuja-fila--puntos {
  animation: roshiVisible2 3.8s linear forwards;
}

[data-activa] .roshi__turno--mio .roshi__burbuja-fila--texto {
  animation: roshiOculta2 3.8s linear forwards;
}

@keyframes roshiVisible1 {
  0%,
  18.3% {
    opacity: 1;
  }
  18.4%,
  100% {
    opacity: 0;
  }
}

@keyframes roshiOculta1 {
  0%,
  18.3% {
    opacity: 0;
  }
  18.4%,
  100% {
    opacity: 1;
  }
}

@keyframes roshiVisible2 {
  0%,
  36.7% {
    opacity: 0;
  }
  36.8%,
  70.9% {
    opacity: 1;
  }
  71%,
  100% {
    opacity: 0;
  }
}

@keyframes roshiOculta2 {
  0%,
  70.9% {
    opacity: 0;
  }
  71%,
  100% {
    opacity: 1;
  }
}

/* ---- 3 · Recuerda cómo trabajas: las notas se abren en abanico ---- */

.roshi__notas {
  position: relative;
  width: 100%;
  height: 180px;
}

.roshi__nota {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86%, 270px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  background: #0e1530;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  z-index: calc(3 - var(--atras));
  transform: translate(-50%, calc(-50% + var(--atras) * -9px)) scale(calc(1 - var(--atras) * 0.05));
  opacity: calc(1 - var(--atras) * 0.3);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.25, 1),
    opacity 0.3s;
}

[data-activa] .roshi__nota {
  transform: translate(-50%, calc(-50% + (var(--orden) - 1) * 58px)) rotate(calc((var(--orden) - 1) * 2deg));
  opacity: 1;
}

.roshi__nota-cabecera {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 var(--fs-etiqueta) var(--fb);
  color: #b6bcc6;
}

.roshi__nota-marca {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 22%;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat, #0e2a44;
}

.roshi__nota-texto {
  font: 500 var(--fs-etiqueta)/1.3 var(--fb);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 4 · Aprende de tu equipo: entra una regla nueva ---- */

.roshi__ficha--equipo {
  position: relative;
  gap: 4px;
}

.roshi__equipo-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex: none;
}

.roshi__pila {
  display: flex;
  flex: none;
}

.roshi__avatar--mini {
  width: 20px;
  height: 20px;
  background: var(--tono-fondo, #161d38);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.roshi__avatar--mini[style*="--tono: 0"] {
  --tono-fondo: #161d38;
}
.roshi__avatar--mini[style*="--tono: 1"] {
  --tono-fondo: #1b2340;
}
.roshi__avatar--mini[style*="--tono: 2"] {
  --tono-fondo: #141a33;
}
.roshi__avatar--mini[style*="--tono: 3"] {
  --tono-fondo: #1e2746;
}

.roshi__pila .roshi__avatar--mini + .roshi__avatar--mini {
  margin-left: -8px;
}

/* El cuarto de la pila se va cuando cae el avatar nuevo. */
.roshi__pila .roshi__avatar--mini:nth-child(4) {
  transition: opacity 0.2s;
}

[data-activa] .roshi__pila .roshi__avatar--mini:nth-child(4) {
  opacity: 0;
}

.roshi__equipo-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.roshi__equipo-linea {
  font: 500 var(--fs-etiqueta)/1.3 var(--fb);
  color: #fff;
  white-space: nowrap;
}

.roshi__cuenta {
  display: grid;
  font: 600 var(--fs-etiqueta)/1.3 var(--fb);
  color: var(--accent);
  white-space: nowrap;
}

.roshi__cuenta-antes,
.roshi__cuenta-luego {
  grid-area: 1 / 1;
}

.roshi__cuenta-luego {
  opacity: 0;
}

[data-activa] .roshi__cuenta-antes {
  animation: roshiApaga 1.3s linear forwards;
}

[data-activa] .roshi__cuenta-luego {
  animation: roshiEnciende 1.3s linear forwards;
}

@keyframes roshiApaga {
  0%,
  68.9% {
    opacity: 1;
  }
  69%,
  100% {
    opacity: 0;
  }
}

@keyframes roshiEnciende {
  0%,
  68.9% {
    opacity: 0;
  }
  69%,
  100% {
    opacity: 1;
  }
}

.roshi__reglas {
  position: relative;
  height: 96px;
  overflow: hidden;
  flex: none;
}

.roshi__regla {
  --hueco: calc(var(--orden) - 1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  transform: translateY(calc(var(--hueco) * 32px));
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.25, 1),
    opacity 0.35s;
}

[data-activa] .roshi__regla {
  --hueco: var(--orden);
}

.roshi__regla:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* En reposo la regla nueva está fuera; al activarse entra y la última sale. */
.roshi__regla:first-child {
  opacity: 0;
}

[data-activa] .roshi__regla:first-child {
  opacity: 1;
}

[data-activa] .roshi__regla:last-child {
  opacity: 0;
}

.roshi__regla-texto {
  flex: 1;
  min-width: 0;
  font: 400 var(--fs-etiqueta)/1.3 var(--fb);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roshi__visto {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(1);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.roshi__visto::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4.5px;
  width: 7px;
  height: 3.5px;
  border-left: 1.75px solid #03081b;
  border-bottom: 1.75px solid #03081b;
  transform: rotate(-45deg);
}

.roshi__regla:first-child .roshi__visto {
  transform: scale(0);
}

[data-activa] .roshi__regla:first-child .roshi__visto {
  transform: scale(1);
  transition-delay: 0.75s;
}

/* El avatar que cae a la pila al empezar. */
.roshi__avatar--cae {
  position: absolute;
  left: 50px;
  top: 20px;
  opacity: 0;
  pointer-events: none;
}

[data-activa] .roshi__avatar--cae {
  animation: roshiCae 0.45s cubic-bezier(0.22, 0.61, 0.25, 1) forwards;
}

@keyframes roshiCae {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-36px, 36px) scale(0.91);
  }
}

/* ---- 5 · Conectado a tus herramientas: los logos se iluminan ---- */

.roshi__anillo {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 180px;
}

.roshi__anillo-hilos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.roshi__anillo-hilos line {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  transition: stroke 0.25s;
}

[data-activa] .roshi__anillo-hilos line {
  stroke: var(--accent);
  transition-delay: calc(var(--orden) * 150ms);
}

.roshi__anillo-centro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 22%;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat, #0e2a44;
}

.roshi__nodo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0e1530;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition:
    opacity 0.25s,
    border-color 0.25s;
}

[data-activa] .roshi__nodo {
  opacity: 1;
  border-color: rgba(0, 194, 255, 0.6);
  transition-delay: calc(var(--orden) * 150ms);
}

.roshi__nodo-logo {
  display: block;
  width: 26px;
  height: 18px;
  background: var(--logo) center / contain no-repeat;
  filter: brightness(0) invert(1);
}

.roshi__nodo-nombre {
  font: 600 var(--fs-etiqueta)/1.1 var(--fb);
  color: #fff;
  text-align: center;
}

/* ---- 6 · Te avisa antes: entra un aviso nuevo por abajo ---- */

.roshi__avisos {
  position: relative;
  width: min(100%, 320px);
  height: 180px;
  overflow: hidden;
}

.roshi__aviso {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #0e1530;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transform: translateY(calc(128px - var(--edad) * 60px));
  opacity: calc(1 - var(--edad) * 0.2);
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.25, 1),
    opacity 0.4s;
}

/* El más viejo sale por arriba y el que acaba de entrar llega desde abajo. */
.roshi__aviso[data-edad="3"] {
  transform: translateY(-60px);
  opacity: 0;
}

.roshi__aviso[data-entrando] {
  transform: translateY(200px);
  opacity: 0;
  transition: none;
}

.roshi__aviso-icono {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.roshi__aviso-texto {
  flex: 1;
  min-width: 0;
  font: 500 var(--fs-etiqueta)/1.3 var(--fb);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roshi__aviso-hora {
  flex: none;
  font: 500 var(--fs-etiqueta) "JetBrains Mono", monospace;
  color: #8d95a2;
}

/* ---- Movimiento reducido: panel abierto y escenas en su estado final ---- */

@media (prefers-reduced-motion: reduce) {
  .roshi {
    --abierto: 1;
    --m: 0px;
  }

  .roshi__aura-marca,
  .roshi__puntos i,
  .roshi__latido {
    animation: none;
  }

  .roshi__nota,
  .roshi__regla,
  .roshi__visto,
  .roshi__nodo,
  .roshi__aviso,
  .roshi__anillo-hilos line {
    transition: none;
  }
}

/* ======================================================================
   Móvil: el flujo va de arriba abajo, como en el diseño.
   ====================================================================== */

.roshi__hilo-vertical,
.roshi__centro-nombre {
  display: none;
}

@media (max-width: 767px) {
  /* En móvil el panel va de lado a lado, con 16 px de aire arriba y abajo. */
  .roshi {
    padding: 16px 0;
  }

  .roshi__titulo {
    white-space: normal;
  }

  .roshi__flujo {
    gap: 0;
  }

  .roshi__columna {
    gap: 0;
  }

  .roshi__etiqueta {
    margin-bottom: 12px;
  }

  .roshi__chips {
    gap: 8px;
  }

  .roshi__chip {
    height: 40px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 8px;
    font: 500 var(--fs-etiqueta)/1.2 var(--fb);
  }

  .roshi__chip:last-child {
    grid-column: 1 / -1;
  }

  .roshi__chip svg {
    width: 15px;
    height: 15px;
  }

  .roshi__centro {
    flex-direction: column;
    gap: 0;
  }

  .roshi__centro-nombre {
    margin-top: 8px;
  }

  .roshi__hilo-vertical {
    display: block;
    position: relative;
    width: 12px;
    height: 44px;
  }

  .roshi__hilo-vertical::before,
  .roshi__hilo-vertical::after {
    content: "";
    position: absolute;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: roshiBaja 1.6s linear infinite;
  }

  .roshi__hilo-vertical::after {
    animation-delay: 0.8s;
  }

  .roshi__hilo-vertical:last-child::before {
    animation-delay: 0.4s;
  }

  .roshi__hilo-vertical:last-child::after {
    animation-delay: 1.2s;
  }

  @keyframes roshiBaja {
    from {
      top: -6px;
      opacity: 0;
    }
    15%,
    85% {
      opacity: 1;
    }
    to {
      top: 44px;
      opacity: 0;
    }
  }

  .roshi__aura-marca {
    width: 96px;
    height: 96px;
  }

  .roshi__centro-nombre {
    display: block;
    font: 600 var(--fs-pequeno) var(--fb);
    color: #fff;
  }

  .roshi__grupos {
    gap: 0;
  }

  .roshi__grupo {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .roshi__grupo-titulo {
    flex: none;
    width: 56px;
  }

  .roshi__caras {
    gap: 8px 12px;
  }

  .roshi__cara {
    gap: 6px;
    font-size: var(--fs-etiqueta);
  }

  .roshi__cara img {
    width: 28px;
    height: 28px;
    object-position: 50% 30%;
    border-width: 2px;
    border-color: #03081b;
  }
}