/* Noctra v2 — el quiz.

   Dos referencias cruzadas a propósito: la estructura de los botones y los
   emojis viene del embudo que queremos batir, y el fondo es la noche de
   Noctra. La idea es que se sienta conocido y que igual sea nuestro.

   Todo lo que se mueve dura 120–200 ms. Por encima de eso, en un embudo de
   nueve pantallas, la persona empieza a esperar al sitio en vez de al revés. */

:root{
  --ink:#F4EFFF;
  --suave:#B9AEDC;

  /* La noche. Fija al viewport: si el fondo hace scroll con el contenido,
     el degradé se corta y se ve como una pantalla partida. */
  --noche:
    radial-gradient(1100px 620px at 50% -10%, rgba(140,92,214,.42), transparent 62%),
    radial-gradient(760px 520px at 88% 22%, rgba(74,72,190,.34), transparent 60%),
    linear-gradient(176deg,#151233 0%,#1B1A47 38%,#241C55 68%,#161335 100%);

  /* El botón. El mismo salmón→magenta de la referencia. */
  --pill:linear-gradient(96deg,#F6849F 0%,#EE6BB8 46%,#D94BE8 100%);
  --pill-glow:0 0 22px rgba(224,88,208,.34), 0 6px 18px rgba(0,0,0,.34);

  --r:22px;
  --font:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{background:#151233}
body{
  margin:0; min-height:100dvh;
  background:none;
  color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:0 16px calc(10px + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
}

/* Un polvo de estrellas muy tenue. Son sombras, no imágenes: cuesta cero
   pedidos y no retrasa el primer pintado, que es lo único que decide si la
   persona se queda. */
/* El fondo va en una capa fija propia (no background-attachment:fixed, que
   en iPhone repinta toda la pantalla en cada frame del scroll y la traba). */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  transform:translateZ(0); will-change:transform;
  background-color:#151233;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.6px 1.6px at 62% 34%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.2px 1.2px at 28% 52%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.2px 1.2px at 42% 78%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.3px 1.3px at 8% 88%, rgba(255,255,255,.26), transparent),
    var(--noche);
}

#app{position:relative; z-index:1; max-width:520px; margin:0 auto}

/* ── barra superior ─────────────────────────────────────────────── */

.top{display:flex; align-items:center; gap:12px; padding:8px 0 12px}

.volver{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--ink); cursor:pointer;
  transition:background .12s, transform .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.volver:active{background:rgba(255,255,255,.18); transform:scale(.92)}

.prog{flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden}
.prog i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#FFD166 0%,#FF9E52 52%,#FF5E8A 100%);
  transition:width .28s cubic-bezier(.22,.9,.3,1);
}

/* ── pantalla ───────────────────────────────────────────────────── */

.pant{animation:entra .16s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pant{animation:none}
  .prog i{transition:none}
  .op,.sg,.volver{transition:none}
}

/* La tarjeta que envuelve la pregunta, como en la referencia. */
.tarjeta{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px; padding:26px 18px 24px;
}

h1,h2{margin:0 0 10px; text-align:center; font-weight:800; letter-spacing:-.01em}
h1{font-size:27px; line-height:1.2; text-transform:uppercase}
h2{font-size:22px; line-height:1.3}

/* El título en dorado→salmón, igual que la referencia. */
h1,h2{
  background:linear-gradient(94deg,#FFD98A 0%,#FFB070 48%,#FF8E86 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nota{margin:0 0 20px; text-align:center; font-size:14px; color:#E9D58C}

.paso{margin:22px 0 16px; text-align:center; font-size:20px; font-weight:800; color:#fff}

.badge{
  margin:0 auto; padding:13px 16px; max-width:460px;
  border-radius:16px; text-align:center;
  font-size:15px; font-weight:700; line-height:1.35; color:#fff;
  background:linear-gradient(96deg,#C24BE8,#E05CD0);
  box-shadow:0 6px 20px rgba(180,70,220,.32);
}

.portada h1{margin-bottom:18px; padding-top:10px}

/* ── botones de respuesta ───────────────────────────────────────── */

.ops{display:flex; flex-direction:column; gap:14px; margin-top:22px}

.op{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; min-height:62px; padding:15px 22px;
  border:0; border-radius:99px;
  background:var(--pill); box-shadow:var(--pill-glow);
  color:#fff; font:inherit; font-weight:700; font-size:17px; text-align:left;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.3,1.3,.5,1), box-shadow .12s, filter .12s;
}
/* Textos largos: más aire y el renglón centrado en el alto. */
.ops.largo .op{min-height:66px; align-items:center}
.op .em{font-size:21px; line-height:1; flex:none}
.op .tx{flex:1}

.op:active{transform:scale(.975); filter:brightness(1.06)}
.op.sel{
  transform:scale(.975);
  box-shadow:0 0 0 3px rgba(255,255,255,.72), 0 0 30px rgba(233,95,215,.55);
}

/* ── grilla de signos ───────────────────────────────────────────── */

.grilla{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}

.sg{
  display:flex; flex-direction:column; padding:0; border:0; overflow:hidden;
  /* Radio chico: la carta ya trae sus propias esquinas redondeadas en la
     ilustración, y uno grande acá se las comería. */
  border-radius:9px; background:rgba(255,255,255,.055);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  color:#fff; font:inherit; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.3,1.3,.5,1), box-shadow .12s;
}
.sg:active{transform:scale(.96)}
.sg.sel{box-shadow:0 0 0 3px rgba(255,255,255,.8), 0 0 26px rgba(224,88,208,.6)}

/* 2:3 es el recorte exacto de las cartas: la grilla reserva el alto
   definitivo antes de que baje una sola imagen y no salta al cargarlas. */
.sgart{
  position:relative; display:grid; place-items:center;
  aspect-ratio:2/3; width:100%;
  background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}
.sgart img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* El símbolo sostiene la tarjeta mientras la ilustración baja, y se apaga
   cuando llega. Si nunca llega, se queda: se lee como una decisión de
   diseño y no como una imagen rota. */
.glifo{font-style:normal; font-size:40px; line-height:1; color:#E9C6FF; opacity:.92}
.sg.con-img .glifo{display:none}

/* El nombre ya viene impreso dentro de la carta. Este cartel queda de
   respaldo: solo aparece si la ilustración no llegó. */
.sgn{
  display:none;
  padding:9px 4px; font-size:14px; font-weight:700;
  background:linear-gradient(96deg,#C24BE8,#E05CD0);
}
.sg.sin-img .sgn{display:block}

@media (max-width:360px){
  h1{font-size:24px}
  h2{font-size:20px}
  .op{font-size:16px; padding:14px 18px}
  .glifo{font-size:34px}
}

/* ── prueba social: carrusel ────────────────────────────────────── */

.badge.chico{font-size:14px; padding:11px 14px; font-weight:600; margin-bottom:18px}
.prueba h2{margin-bottom:14px}

/* Scroll-snap nativo: el deslizar es el del sistema, con su inercia y su
   rebote. Una animación propia acá se siente pegajosa en cuanto el teléfono
   no es de gama alta. */
.carru{
  display:flex; gap:0; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  border-radius:18px; -webkit-overflow-scrolling:touch;
}
.carru::-webkit-scrollbar{display:none}

.slide{
  position:relative; flex:0 0 100%; scroll-snap-align:center;
  aspect-ratio:1/1.24; border-radius:18px; overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  display:grid; place-items:center;
}
.slide img{width:100%; height:100%; object-fit:cover; display:block}
/* El nombre del archivo, visible sólo mientras la foto no exista. Es para
   nosotros: dice exactamente qué archivo falta y dónde va. */
.slide .ph{display:none; font-size:13px; color:var(--suave); letter-spacing:.04em}
.slide.falta .ph{display:block}
.slide.falta img{display:none}

.puntos{display:flex; justify-content:center; gap:9px; margin:16px 0 20px}
.puntos i{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.28); transition:background .18s, transform .18s;
}
.puntos i.on{background:#E05CD0; transform:scale(1.15)}

.cta{
  width:100%; min-height:62px; padding:16px; border:0; border-radius:99px;
  background:var(--pill); box-shadow:var(--pill-glow);
  color:#fff; font:inherit; font-weight:800; font-size:18px;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.3,1.3,.5,1), filter .12s;
}
.cta:active{transform:scale(.975); filter:brightness(1.06)}

/* ── la nota ────────────────────────────────────────────────────── */

/* La pantalla es sólo la pieza y el botón. Sin la imagen, el hueco
   sostiene el alto definitivo y nombra el archivo que falta: así el botón
   queda donde va a quedar y no salta cuando la foto llegue. */
/* Título centrado y aviso chico, como en la referencia. */
.ntit{margin:18px 0 10px; text-align:center; font-size:26px; line-height:1.25}
.nbadge{margin:0 0 16px; text-align:center; font-size:15px; font-weight:700; color:#F3ECFF}
/* El hueco reserva 4:5 desde el primer momento, no sólo cuando falla: si
   la imagen pesa y tarda, el botón igual queda abajo del pliegue en vez de
   aparecer arriba y saltar cuando llega. Con una imagen más alta que 4:5
   el hueco crece a su medida. */
.nimg{
  display:block; margin:0 0 22px; border-radius:18px; overflow:visible;
  aspect-ratio:4/5;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.nimg img{width:100%; height:auto; display:block; border-radius:18px}
.nimg .ph{display:none}
.nimg.falta{
  aspect-ratio:4/5; display:grid; place-items:center; padding:20px;
  border:1px dashed rgba(255,255,255,.26);
  background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:var(--suave); font-size:13px; text-align:center; letter-spacing:.04em;
}
.nimg.falta img{display:none}
.nimg.falta .ph{display:block; font-style:normal}

/* Acá el botón no flota: vive debajo de la pieza. */
.nimg + .cta{margin-bottom:8px}

/* ── la espera ──────────────────────────────────────────────────── */

/* Todo gira con transform: el navegador lo manda a la GPU y sigue fluido
   aunque el hilo principal esté ocupado. Animar width o top acá se traba
   justo cuando la persona está mirando la pantalla fija. */
.carga{
  min-height:82vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}

.orbita{position:relative; width:180px; height:180px; margin-bottom:34px}
.aro{
  position:absolute; inset:0; border-radius:50%;
  border:3px solid transparent; animation:gira 3s linear infinite;
}
.a1{border-top-color:rgba(255,255,255,.34); border-left-color:rgba(255,255,255,.34);
    animation-duration:5.5s}
.a2{inset:6px; border-top-color:#E05CD0; border-right-color:#E05CD0;
    animation-duration:2.6s; animation-direction:reverse;
    filter:drop-shadow(0 0 6px rgba(224,92,208,.65))}
.a3{inset:6px; border-bottom-color:#FFD166; border-left-color:#FFD166;
    animation-duration:3.4s; filter:drop-shadow(0 0 6px rgba(255,209,102,.6))}
@keyframes gira{to{transform:rotate(360deg)}}

.nucleo{
  position:absolute; inset:0; margin:auto; width:22px; height:22px;
  border-radius:50%; background:#fff;
  box-shadow:0 0 14px 6px rgba(255,214,140,.85), 0 0 46px 22px rgba(255,180,90,.28);
  animation:latir 2.2s ease-in-out infinite;
}
@keyframes latir{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.9}}

.ctit{
  font-size:26px; background:none; color:#FFE9A8; -webkit-text-fill-color:#FFE9A8;
  text-shadow:0 0 22px rgba(255,220,130,.45); margin-bottom:8px;
}
.csub{
  margin:0; font-size:15px; letter-spacing:.14em;
  color:#B9AEDC; text-transform:uppercase;
}

/* Quien pidió menos animación ve el círculo quieto, y la pantalla avanza
   igual porque el salto lo maneja un temporizador, no la animación. */
@media (prefers-reduced-motion:reduce){
  .aro,.nucleo{animation:none}
}

/* ── resultado ──────────────────────────────────────────────────── */

.res{padding-top:10px}
.brilla{
  font-size:34px; line-height:1.12; margin-bottom:22px;
  text-shadow:0 0 30px rgba(255,190,110,.42);
}
.rcard{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; padding:20px 18px; margin:0 0 34px;
  font-size:17px; line-height:1.5; color:#F2ECFF;
}

/* El campo con borde magenta encendido: en una pantalla oscura el input
   tiene que gritar dónde se escribe, o la persona toca el botón sin
   escribir nada y se frustra.

   17px de fuente y no menos: por debajo de 16, iOS hace zoom al enfocar y
   descuadra la pantalla entera justo cuando aparece el teclado. */
.txt{
  display:block; width:100%; min-height:62px; padding:16px 18px;
  margin:0 0 18px; border-radius:99px;
  font:inherit; font-size:17px; font-weight:600;
  color:var(--ink); -webkit-appearance:none;
  border:2px solid #C24BE8; background:rgba(255,255,255,.07);
  box-shadow:0 0 18px rgba(194,75,232,.28); text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
.txt::placeholder{color:#9D90C4; font-weight:500}
.txt:focus{outline:none; border-color:#E05CD0; box-shadow:0 0 24px rgba(224,92,208,.42)}
.txt.mal{border-color:#FF6B8A; box-shadow:0 0 18px rgba(255,107,138,.3)}
.msgmal{margin:-10px 0 16px; font-size:14px; color:#FF9FB2}

.cta.verde{
  background:linear-gradient(96deg,#63E6A4 0%,#45DCC0 100%);
  color:#0B2A22; text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 0 26px rgba(80,225,175,.40), 0 6px 18px rgba(0,0,0,.34);
}

/* ── conectado ──────────────────────────────────────────────────── */

.aviso{
  background:linear-gradient(96deg,#F97A4D,#FF9A5B);
  border-radius:18px; padding:16px 14px; margin:6px 0 26px;
  box-shadow:0 0 30px rgba(255,150,80,.7), 0 8px 26px rgba(249,122,77,.34);
  border:2px solid rgba(255,255,255,.35); will-change:transform;
  animation:avisoPulso 1.3s ease-in-out .75s infinite, avisoCae .7s cubic-bezier(.2,.9,.3,1.25) backwards;
}
.aviso b{display:block; font-size:21px; font-weight:800; color:#fff; margin-bottom:10px; animation:avisoTemblor 2.2s ease-in-out infinite}
@keyframes avisoPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
/* Cae desde arriba de la pantalla y frena con un rebote corto. */
@keyframes avisoCae{from{opacity:0; transform:translateY(-140%)}60%{opacity:1}to{opacity:1; transform:none}}
@keyframes avisoTemblor{0%,80%,100%{transform:none}84%{transform:translateX(-3px)}88%{transform:translateX(3px)}92%{transform:translateX(-2px)}96%{transform:translateX(2px)}}
.cupo{
  display:block; background:rgba(255,255,255,.22); border-radius:12px;
  padding:9px 12px; font-size:15px; font-weight:700; color:#fff;
}

h2.multi{font-size:23px; line-height:1.34; margin-bottom:30px}

/* Tarjeta de contacto, minimalista: foto, nombre, "En línea" y el punto
   verde. Nada más; la ficha larga distraía del "tocá para hablar". */
.persona{
  display:flex; align-items:center; gap:16px; text-align:left;
  background:#fff; border-radius:24px; padding:16px 20px 16px 16px; margin:0 0 22px;
  box-shadow:0 12px 30px rgba(0,0,0,.30);
}
.pav{position:relative; flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden}
.pav img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block}
.pav .ph{display:none}
.pav.falta{background:linear-gradient(150deg,#EAE5F6,#CFC5E8); display:grid; place-items:center}
.pav.falta img{display:none}
.pav.falta .ph{display:block; font-size:9px; font-style:normal; color:#6B6288; text-align:center; padding:2px}

.pinfo{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.pinfo b{font-size:21px; font-weight:800; color:#15131f; letter-spacing:-.01em}
.pest{font-style:normal; font-size:16px; font-weight:700; color:#2FB86F}
.psobre{display:none}

.ppunto{
  flex:none; width:13px; height:13px; border-radius:50%; background:#3ED47E;
  box-shadow:0 0 0 4px rgba(62,212,126,.22);
}

/* ── el chat ────────────────────────────────────────────────────── */

/* Estética propia, no la de WhatsApp. Aparte de lo obvio —clonar la
   interfaz de otro producto es hacerse pasar por él—, sobre la noche de
   Noctra se ve mejor y no compite con la marca. Lo que convierte es el
   ritmo, no el verde. */

/* El chat es la pantalla entera y queda clavado: lo único que se desplaza
   es la conversación. Si la página también se desplazara (como pasaba en
   el iPhone, por el relleno de abajo del body), el encabezado se escondía
   arriba y el botón quedaba flotando con un hueco abajo. */
body.en-chat{padding:0; height:100dvh; overflow:hidden}
/* En el chat el fondo va liso: las estrellitas del cielo, al lado de una
   burbuja, se leen como puntos o rayitas sueltas. */
body.en-chat::before{background-image:var(--noche)}
.chat{
  position:fixed; inset:0; margin:0;
  display:flex; flex-direction:column;
}

.chead{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:calc(4px + env(safe-area-inset-top,0px)) 12px 6px;
  background:#14112e;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cav{position:relative; flex:none; width:42px; height:42px; border-radius:50%; overflow:hidden}
.cav img{width:100%; height:100%; object-fit:cover; display:block}
.cav .ph{display:none}
.cav.falta{background:linear-gradient(150deg,#4B3B7A,#2C2350); display:grid; place-items:center}
.cav.falta img{display:none}
.cav.falta .ph{display:block; font-size:8px; font-style:normal; color:#B9AEDC; text-align:center}
.cinfo{display:flex; flex-direction:column; line-height:1.25}
.cinfo b{font-size:16px; font-weight:800; color:#fff}
.cinfo i{font-style:normal; font-size:13px; color:#6FE3A8}

.hilo{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:10px 12px 6px; display:flex; flex-direction:column; gap:8px;
  scroll-behavior:smooth;
}

.msg{
  position:relative; max-width:84%; padding:11px 14px 18px;
  border-radius:16px; font-size:16px; line-height:1.42;
  animation:entramsg .18s ease-out;
}
@keyframes entramsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .msg{animation:none} .hilo{scroll-behavior:auto} }

/* Él: vidrio oscuro. Ella: magenta, el mismo de los botones, para que la
   conversación se lea como parte del embudo y no como un injerto. */
.msg.el{
  align-self:flex-start; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10); color:#F2ECFF;
  border-bottom-left-radius:5px;
}
.msg.ella{
  align-self:flex-end; background:linear-gradient(96deg,#B845DE,#E05CD0);
  color:#fff; font-weight:600; border-bottom-right-radius:5px;
}
.msg .h{
  position:absolute; right:12px; bottom:5px;
  font-size:10.5px; opacity:.55; letter-spacing:.02em;
}

/* "escribiendo…" — con la cara al lado.
   Sin la foto, los tres puntos son un spinner. Con la foto, es alguien del
   otro lado escribiendo. */
.fescr{
  align-self:flex-start; display:flex; align-items:flex-end; gap:8px;
  animation:entramsg .18s ease-out;
}
.mini{
  flex:none; width:28px; height:28px; border-radius:50%; overflow:hidden;
  margin-bottom:2px;
}
.mini img{width:100%; height:100%; object-fit:cover; display:block}
.mini.falta{background:linear-gradient(150deg,#6B55A8,#3A2E68)}
.mini.falta img{display:none}

.fescr .msg.escr{align-self:auto}
.msg.escr{padding:14px 16px; display:flex; gap:5px; align-items:center}
.msg.escr i{
  width:7px; height:7px; border-radius:50%; background:#C9BCEB;
  animation:punto 1.25s infinite ease-in-out;
}
.msg.escr i:nth-child(2){animation-delay:.16s}
.msg.escr i:nth-child(3){animation-delay:.32s}
@keyframes punto{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
/* "Grabando audio…": micrófono con el puntito rojo latiendo. */
.msg.escr.grab{gap:7px; padding:10px 14px; font-size:14px; color:#C9BCEB}
.msg.escr.grab .mic{display:flex; color:#E05CD0}
.msg.escr.grab .rec{width:8px; height:8px; border-radius:50%; background:#FF4D6D; animation:rec 1s infinite ease-in-out}
@keyframes rec{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.8)}}

/* ── audio ──────────────────────────────────────────────────────
   La onda se llena con el audio real, no con un temporizador: si el
   archivo tarda en bajar o el teléfono se traba, la barra se queda donde
   está la voz en vez de correr sola y terminar antes que el audio. */

.msg.audio{display:flex; align-items:center; gap:11px; width:250px; padding-right:52px}

.msg.audio .play{
  flex:none; width:38px; height:38px; border-radius:50%; border:0; padding:0;
  background:var(--pill); display:grid; place-items:center;
  color:#fff; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 0 14px rgba(224,88,208,.28);
  transition:transform .12s;
}
.msg.audio .play:active{transform:scale(.92)}

.msg.audio .onda{
  position:relative; flex:1; height:24px; cursor:pointer;
  /* las barras apagadas: lo que falta escuchar */
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.26) 0 2px, transparent 2px 5px);
}
/* las barras encendidas, recortadas hasta donde va la voz.
   clip-path y no width: así el patrón de barras queda anclado al mismo
   origen que el de abajo y no "camina" al avanzar. */
.msg.audio .onda i{
  position:absolute; inset:0; display:block;
  background:repeating-linear-gradient(90deg,
    #F0D2FF 0 2px, transparent 2px 5px);
  clip-path:inset(0 100% 0 0);
}
/* el puntito que marca dónde va */
.msg.audio .onda b{
  position:absolute; top:50%; left:0; width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:#fff; opacity:0; transition:opacity .15s;
  box-shadow:0 0 8px rgba(255,255,255,.5);
}
.msg.audio.suena .onda b{opacity:1}

.msg.audio .dur{font-size:12px; opacity:.72; font-variant-numeric:tabular-nums}
.msg.audio audio{display:none}

/* Sin el archivo, el botón se apaga en vez de no hacer nada: un play que
   no responde se lee como sitio roto. */
.msg.audio.falta .play{background:rgba(255,255,255,.12); box-shadow:none; opacity:.55}
.msg.audio.falta .onda{opacity:.4}

/* foto */
/* Ancho fijo y no "lo que ocupe el contenido": mientras la foto no existe,
   el hueco tiene que ocupar el mismo lugar que va a ocupar la foto, o al
   cargarla se mueve toda la conversación. */
.msg.foto{padding:5px 5px 18px; width:76%; max-width:76%}
/* Alto reservado (4:5, el de las fotos): así el hilo no crece después de
   haber bajado y el último mensaje no queda escondido. */
.fi{display:block; width:100%; aspect-ratio:4/5; border-radius:12px; overflow:hidden}
.fi img{width:100%; height:100%; object-fit:cover; display:block}
.fi .ph{display:none}
.fi.falta{
  aspect-ratio:3/4; display:grid; place-items:center;
  background:linear-gradient(150deg,#4B3B7A,#2C2350);
}
.fi.falta img{display:none}
.fi.falta .ph{display:block; font-style:normal; font-size:12px; color:#C9BCEB}

/* ── el pie: sugerencias + barra de escribir ─────────────────────

   Las respuestas van como sugerencias arriba de la barra, no como botones
   grandes. La diferencia no es estética: un botón gigante corta la
   conversación y se lee como formulario, y una sugerencia se lee como algo
   que el chat te ofrece mientras seguís charlando. */

.pie{
  flex:none; display:flex; flex-direction:column; gap:10px;
  padding:0 10px calc(6px + env(safe-area-inset-bottom,0px));
}

.sugs{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.sugs.con{padding-top:4px}

/* Las respuestas son botones de verdad, con el mismo degradé y el mismo
   brillo que los del quiz: tienen que verse desde lejos y pedir el dedo. */
.sug{
  padding:10px 16px; border-radius:99px; border:0;
  background:var(--pill); box-shadow:var(--pill-glow);
  color:#fff; font:inherit; font-weight:700; font-size:14px;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.3,1.3,.5,1), filter .14s;
  animation:sube .22s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.sug:active{transform:scale(.95); filter:brightness(1.08)}
@keyframes sube{from{opacity:0; transform:translateY(10px) scale(.94)}to{opacity:1; transform:none}}

/* La barra de escribir. Decorativa: no es un input, así que tocarla no
   abre el teclado para tapar media pantalla sin que pase nada. */
.entrada{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:99px; padding:9px 9px 9px 14px;
}
.entrada .mas{font-size:21px; line-height:1; color:#9D90C4; flex:none}
.entrada .campo{
  flex:1; font-size:15px; color:#8B7FB0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.entrada .enviar{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; color:#fff;
  background:var(--pill); box-shadow:0 0 14px rgba(224,88,208,.3);
}

/* Cuando llega el botón de compra, la barra ya se fue y queda él solo.
   Dorado y latiendo despacio: es lo único que hay para tocar y tiene que
   verse como lo único que hay para tocar. */
.sugs.solo-cta{display:block; padding-top:6px}
.sugs .cta{
  margin:0; text-transform:uppercase; letter-spacing:.02em;
  background:linear-gradient(96deg,#FFD25A 0%,#FFB12E 100%);
  color:#2A1600;
  box-shadow:0 0 44px rgba(255,190,70,.9), 0 0 0 3px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.34);
  font-size:18px; padding:18px 20px; will-change:transform;
  animation:lateoro 1.1s ease-in-out infinite, entracta .5s cubic-bezier(.2,.9,.3,1.3) backwards;
}
.sugs .cta.yendo{filter:brightness(1.15); transform:scale(.97); animation:none}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes entracta{from{opacity:0; transform:translateY(16px) scale(.9)}to{opacity:1; transform:none}}
@keyframes lateoro{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* La aclaración chica de él ("Escribí SI para continuar"). */
.msg.el.pista{font-size:14px; padding:9px 60px 16px 13px; opacity:.92}

/* La barra, cuando pide la fecha. */
.entrada.pide{border-color:rgba(255,210,90,.6); box-shadow:0 0 18px rgba(255,190,70,.25)}
.entrada .fechtxt{
  display:block; font-size:15px; line-height:24px; color:#FFD25A;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.entrada .fechtxt.con{color:#fff; font-size:17px; font-weight:700}
.entrada .fechtxt.mal{color:#FF8E86}
.entrada.pide .enviar{cursor:pointer; opacity:.55; transition:opacity .2s, transform .2s}
/* Con la fecha completa el botón de enviar se enciende y late: es el paso
   que falta y tiene que gritarlo. */
.entrada.lista .enviar{opacity:1; animation:late 1.4s ease-in-out infinite; box-shadow:0 0 22px rgba(224,88,208,.7)}

/* Las tres ruedas de la fecha, arriba de la barra. */
.sugs .fecha{
  width:100%; padding:12px 12px 10px; border-radius:18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,210,90,.35);
  animation:sube .22s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.fechalab{margin:0 0 10px; font-size:14px; font-weight:800; color:#FFD25A; text-align:center}
.fechasel{display:grid; grid-template-columns:1fr 1.5fr 1.1fr; gap:8px}
.fsel{
  width:100%; min-width:0; padding:12px 26px 12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background-color:rgba(20,12,50,.85);
  color:#fff; font:inherit; font-size:16px; font-weight:700;
  -webkit-appearance:none; appearance:none; outline:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23FFD25A' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
.fsel:focus{border-color:rgba(255,210,90,.7)}
.fsel option{color:#111; background:#fff}

@media (prefers-reduced-motion:reduce){ .sug{animation:none} .sugs .cta{animation:none} }