/* Raquel · el chat en oscuro, como el de Sofía (22-oct-2026). Clases propias:
   no repetir las de las otras webs de la casa (anti-correlación). Las de app.js
   (.cta, .age, .lock-*, .socials) son las únicas comunes, porque las pinta él. */
:root{
  --fondo:#000; --nube:#262626; --borde:#262626;
  --tinta:#f5f5f5; --apagado:#a8a8a8; --apagado2:#737373;
  --azul:#3797f0; --azul2:#1a66c9;
  --tope:460px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--fondo)}
body{
  color:var(--tinta);-webkit-font-smoothing:antialiased;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
.hoja{max-width:var(--tope);margin:0 auto;min-height:100svh}

/* Cabecera como la de un chat de Instagram, en modo claro */
.cabecera{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--borde);
}
.retrato-mini{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.quien{min-width:0}
.titulo{margin:0;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:5px}
.sello{width:15px;height:15px;color:var(--azul);flex:0 0 auto}
.estado{margin:1px 0 0;color:var(--apagado);font-size:.78rem}

/* Los mensajes */
.hilo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 190px}
.dia{align-self:center;margin:4px 0 10px;color:var(--apagado2);font-size:.72rem;font-weight:600}
.nube{
  margin:0;max-width:78%;padding:10px 14px;border-radius:22px;background:var(--nube);
  font-size:.98rem;line-height:1.35;
  animation:llega .35s ease both;animation-delay:var(--r,0s);
}
.nube + .nube{border-top-left-radius:6px}
.nube-foto{padding:0;overflow:hidden;width:60%;max-width:250px;background:#111}
.nube-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
@keyframes llega{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Fotos «enviadas» con candado: abren lo mismo que el botón */
.nube-galeria{padding:6px;width:78%;max-width:320px}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cuadro{position:relative;display:block;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:#1a1a1a}
.cuadro:first-child{border-top-left-radius:6px}
.cuadro img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.lock-layer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.18)}
.lock-ico{font-size:1.15rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.lock-tag{display:none}
.galeria-pie{margin:7px 8px 3px;color:var(--apagado);font-size:.8rem}

/* El vídeo «enviado», bloqueado: miniatura borrosa con ▶ y candado. Abre lo
   mismo que el botón (data-lock). */
.nube-video{padding:6px;width:62%;max-width:260px}
.video{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;border-top-left-radius:6px;overflow:hidden;cursor:pointer;background:#1a1a1a}
.video img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.video .lock-layer{display:none}
.play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.85)}
.play::after{content:"";position:absolute;left:22px;top:16px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}
.cerrojo{position:absolute;right:8px;top:8px;font-style:normal;font-size:.95rem;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.5)}

/* Donde iría la caja de escribir va el botón */
.zona-boton{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:14px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,0),#000 30%);
}
.zona-boton > *{max-width:calc(var(--tope) - 32px);margin-left:auto;margin-right:auto}
.botones{display:flex;flex-direction:column;gap:10px}
.cta{
  appearance:none;border:0;cursor:pointer;width:100%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:17px 22px;border-radius:999px;font-family:inherit;
  font-size:1.05rem;font-weight:800;letter-spacing:.2px;color:#fff;
  background:linear-gradient(135deg,var(--azul),var(--azul2));
  box-shadow:0 10px 30px -10px rgba(55,151,240,.7);
  transition:transform .12s ease;
}
.cta:active{transform:scale(.985)}
.cta-main{display:block}
.cta-sub{font-size:.75rem;font-weight:700;opacity:.8}
.cta-badge{display:none}
.cta-alt{color:var(--tinta);background:var(--nube);box-shadow:none}
.cierre{margin:9px 0 0;text-align:center;color:var(--apagado);font-size:.78rem}

.socials{display:flex;gap:9px;justify-content:center;margin:0 0 10px}
.socials a{color:var(--apagado);text-decoration:none;font-size:.84rem;padding:8px 15px;border:1px solid var(--borde);border-radius:999px}
.pie{margin:0;padding:0 16px 24px;color:var(--apagado2);font-size:.68rem;text-align:center}

/* Segundo paso (lo pinta app.js con los textos paso_* del Worker): una hoja
   que sube desde abajo, con su cara, como si contestara en el chat. */
.age{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);animation:aparece .2s ease both}
.age-box{
  width:100%;max-width:var(--tope);text-align:center;background:#121212;
  border:1px solid var(--borde);border-bottom:0;border-radius:26px 26px 0 0;
  padding:26px 22px calc(18px + env(safe-area-inset-bottom));animation:desliza .28s cubic-bezier(.2,.9,.3,1) both;
}
.age-cara{width:68px;height:68px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:2px solid var(--azul)}
.age-box h2{margin:0 0 6px;font-size:1.28rem;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.age-box p{color:var(--apagado);margin:0 0 18px;font-size:.95rem;line-height:1.4}
.age-actions{display:flex;flex-direction:column;gap:4px}
.ghost{appearance:none;background:transparent;color:var(--apagado);font-family:inherit;border:0;border-radius:999px;padding:12px;font-size:.9rem;cursor:pointer}
.age-box .age-nota{margin:6px 0 0;color:var(--apagado2);font-size:.72rem}
@keyframes desliza{from{transform:translateY(100%)}to{transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){ .nube,.age,.age-box{animation:none} }