/* Sofía · diseño «Mensaje» (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{
  --negro:#000; --globo:#262626; --raya:#262626;
  --blanco:#f5f5f5; --gris:#a8a8a8; --gris2:#737373;
  --verde:#22c55e; --verde2:#15803d;
  --ancho:460px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--negro)}
body{
  color:var(--blanco);-webkit-font-smoothing:antialiased;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
.charla{max-width:var(--ancho);margin:0 auto;min-height:100svh}

/* Cabecera como la de un chat de Instagram */
.arriba-chat{
  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(--raya);
}
.cara{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:0 0 auto}
.ella{min-width:0}
.nombre{margin:0;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:5px}
.verif{width:15px;height:15px;color:#3897f0;flex:0 0 auto}
.linea-estado{margin:1px 0 0;color:var(--gris);font-size:.78rem}

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

/* Fotos «enviadas» con candado: abren lo mismo que el botón */
.globo-fotos{padding:6px;width:78%;max-width:320px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.miniatura{position:relative;display:block;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:#1a1a1a}
.miniatura:first-child{border-top-left-radius:6px}
.miniatura 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,.6))}
.lock-tag{display:none}
.trio-pie{margin:7px 8px 3px;color:var(--gris);font-size:.8rem}

/* Donde iría la caja de escribir va el botón */
.caja-abajo{
  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%);
}
.caja-abajo > *{max-width:calc(var(--ancho) - 32px);margin-left:auto;margin-right:auto}
.botonera{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(--verde),var(--verde2));
  box-shadow:0 10px 30px -10px rgba(34,197,94,.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{background:var(--globo);box-shadow:none}
.letra-bajo{margin:9px 0 0;text-align:center;color:var(--gris);font-size:.78rem}

.socials{display:flex;gap:9px;justify-content:center;margin:0 0 10px}
.socials a{color:var(--gris);text-decoration:none;font-size:.84rem;padding:8px 15px;border:1px solid var(--raya);border-radius:999px}
.piecera{margin:0;padding:0 16px 24px;color:var(--gris2);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:fundido .2s ease both}
.age-box{
  width:100%;max-width:var(--ancho);text-align:center;background:#121212;
  border:1px solid var(--raya);border-bottom:0;border-radius:26px 26px 0 0;
  padding:26px 22px calc(18px + env(safe-area-inset-bottom));animation:sube .28s cubic-bezier(.2,.9,.3,1) both;
}
.age-cara{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0 auto 12px;display:block;border:2px solid var(--verde)}
.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(--gris);margin:0 0 18px;font-size:.95rem;line-height:1.4}
.age-actions{display:flex;flex-direction:column;gap:4px}
.age-actions .ghost{border:0;padding:12px;font-size:.9rem}
.age-box .age-nota{margin:6px 0 0;color:var(--gris2);font-size:.72rem}
.ghost{appearance:none;background:transparent;color:var(--gris);font-family:inherit;border:1px solid var(--raya);border-radius:999px;padding:15px 22px;font-size:1rem;cursor:pointer}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes fundido{from{opacity:0}to{opacity:1}}

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