/* manera.css · v8 · constructor 1 · section#manera.claro: «Así es hablar con ella.» (brief 6, 7, 13, 14).
   Solo selectores que empiezan por #manera. .chat y .burbuja son de base.css: aquí solo se colocan.
   El lienzo de los osos va al borde inferior de la banda clara (sin padding abajo): caen y se quedan
   sobre la línea donde empieza el viaje. Altura reservada desde el primer pintado (CLS cero). */

#manera{padding-bottom:0;overflow:hidden}
#manera .wrap{display:grid;gap:40px}
@media(min-width:861px){#manera .wrap{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:center}}
#manera .lead{margin-bottom:0}

/* el chat: la conversación real al azar (chat.js) o, sin JS, el arranque 0 (noscript) */
#manera .chat{width:100%;max-width:440px;min-height:300px;align-content:start;justify-self:end}
@media(max-width:860px){#manera .chat{justify-self:start;max-width:100%}}
#manera .hilo{display:grid;gap:10px}
/* la semilla: el arranque 0 escrito por el armado. chat.js la quita al arrancar; si chat.js no llega
   aparece sola a los 5 s, y sin JS, de una. Así el chat nunca queda vacío. */
#manera .semilla{opacity:0;animation:manera-salva .48s var(--orbe) 5s both}
@keyframes manera-salva{to{opacity:1}}
@media(scripting:none){#manera .semilla{opacity:1;animation:none}}
#manera .burbuja .rotulo{font-family:var(--f-cuerpo)}

/* «escribiendo…»: los tres puntos de WhatsApp, del lado de Aurora, mientras llega su burbuja */
#manera .escribiendo{display:inline-flex;gap:5px;align-items:center;padding:14px 16px;border-radius:16px;
  width:fit-content;background:var(--superficie);border:1px solid rgba(127,227,220,.35);box-shadow:0 0 0 3px rgba(127,227,220,.10)}
#manera .escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--tinta-2);animation:manera-punto 1.1s ease-in-out infinite}
#manera .escribiendo i:nth-child(2){animation-delay:.15s}
#manera .escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes manera-punto{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* «otra conversación»: un enlace chiquito, Ceniza, nunca un botón Rosa (el único acento es «Escribile») */
#manera .otra{justify-self:start;margin-top:4px;padding:6px 0;border:0;background:none;cursor:pointer;
  font-size:13px;color:var(--tinta-2);background-image:linear-gradient(var(--tinta-2),var(--tinta-2));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s var(--cromo)}
#manera .otra:hover,#manera .otra:focus-visible{background-size:100% 1px}
#manera .otra[hidden]{display:none}

/* la lluvia de osos (osos.js): el lienzo mide min(56svh, 480px), nunca vh */
#manera .gravedad{position:relative;width:100%;height:min(56svh,480px);min-height:300px;margin-top:40px;cursor:grab}
#manera .gravedad:active{cursor:grabbing}
#manera .gravedad canvas{width:100%;height:100%;display:block;touch-action:pan-y}