/* ============================================================
   CÍRCULO IA — Experiencia conversacional (home)
   Fondo papel, tinta navy, oro. No es un clon de WhatsApp:
   es una conversación editorial con momentos tipográficos.
   ============================================================ */

.convo-stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(201,162,39,.10), transparent 60%),
    var(--paper, #FCFBF8);
  overflow:hidden;
}
.convo-stage .hero-grid-bg{position:absolute;inset:0;pointer-events:none}

.convo-wrap{
  position:relative;
  width:100%;
  max-width:680px;
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:96px 20px 20px;
}
@media(min-width:640px){.convo-wrap{padding-top:112px}}

/* barra de presencia */
.convo-presence{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.8);
  border:1px solid var(--line, rgba(13,28,48,.12));
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px -18px rgba(13,28,48,.35);
}
.convo-presence .avatar{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:#fff;
  border:1px solid rgba(201,162,39,.4);
}
.convo-presence .avatar img{width:100%;height:100%;object-fit:contain}
.convo-presence b{font-size:.92rem}
.convo-presence small{display:block;font-size:.74rem;color:var(--green,#1e8e5a)}
.convo-presence small::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green,#1e8e5a);margin-right:6px;
  animation:convoPulse 2s ease-in-out infinite;
}
@keyframes convoPulse{0%,100%{opacity:1}50%{opacity:.4}}
.convo-skip{
  margin-left:auto;font-size:.78rem;font-weight:600;
  color:var(--ink-55, rgba(13,28,48,.55));text-decoration:none;
  border-bottom:1px dashed currentColor;padding-bottom:1px;
}
.convo-skip:hover{color:var(--gold-deep,#8a6d12)}

/* flujo de mensajes */
.convo-feed{
  flex:1;
  display:flex;flex-direction:column;gap:14px;
  padding:26px 4px 18px;
}
.cmsg{
  max-width:86%;
  opacity:0;transform:translateY(10px);
  animation:cmsgIn .45s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cmsgIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .cmsg{animation:none;opacity:1;transform:none}
}

.cmsg.bot{align-self:flex-start}
.cmsg.user{align-self:flex-end}

.cmsg .bubble{
  padding:13px 17px;border-radius:18px;
  font-size:.96rem;line-height:1.55;
}
.cmsg.bot .bubble{
  background:#fff;color:var(--ink,#101b2b);
  border:1px solid var(--line, rgba(13,28,48,.12));
  border-bottom-left-radius:6px;
  box-shadow:0 6px 24px -16px rgba(13,28,48,.35);
}
.cmsg.user .bubble{
  background:linear-gradient(135deg,#16283f,#0D1C30);
  color:#fff;border-bottom-right-radius:6px;
}
.cmsg .bubble b{color:inherit}
.cmsg.bot .bubble .gold-i{color:var(--gold-deep,#8a6d12);font-style:italic;font-family:var(--display,"Playfair",serif)}

/* momento tipográfico: cifra grande dentro del flujo */
.cmoment{
  align-self:stretch;text-align:center;padding:26px 10px;
  opacity:0;animation:cmsgIn .5s .1s forwards;
}
.cmoment .big{
  font-family:"Playfair","Inter",serif;
  font-size:clamp(2.4rem,8vw,4rem);line-height:1.05;
  color:var(--ink,#101b2b);
}
.cmoment .big em{
  font-style:italic;
  background:linear-gradient(135deg,#8a6d12,#C9A227 55%,#8a6d12);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cmoment small{display:block;margin-top:8px;font-size:.85rem;color:var(--ink-55,rgba(13,28,48,.55))}

/* indicador escribiendo */
.ctyping{
  align-self:flex-start;display:inline-flex;gap:5px;align-items:center;
  background:#fff;border:1px solid var(--line, rgba(13,28,48,.12));
  border-radius:18px;border-bottom-left-radius:6px;padding:14px 18px;
}
.ctyping i{
  width:7px;height:7px;border-radius:50%;background:rgba(13,28,48,.35);
  animation:ctyp 1.1s ease-in-out infinite;
}
.ctyping i:nth-child(2){animation-delay:.15s}
.ctyping i:nth-child(3){animation-delay:.3s}
@keyframes ctyp{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}

/* opciones del visitante */
.copts{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;
  align-self:flex-end;max-width:100%;
  opacity:0;animation:cmsgIn .4s .05s forwards;
}
.copt{
  border:1.5px solid rgba(13,28,48,.25);background:#fff;
  color:var(--ink,#101b2b);border-radius:999px;
  padding:11px 18px;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:transform .12s, border-color .15s, background .15s, color .15s;
}
.copt:hover{border-color:var(--gold,#C9A227);transform:translateY(-1px)}
.copt.primary{
  background:linear-gradient(135deg,#d6b443,#C9A227,#b8901f);
  border-color:transparent;color:#0D1C30;
  box-shadow:0 10px 26px -12px rgba(201,162,39,.65);
}

/* tarjetas dentro del chat */
.ccard{
  align-self:flex-start;width:100%;max-width:440px;
  background:#fff;border:1px solid var(--line, rgba(13,28,48,.12));
  border-radius:18px;border-bottom-left-radius:6px;
  padding:20px;box-shadow:0 14px 40px -22px rgba(13,28,48,.4);
  opacity:0;animation:cmsgIn .45s forwards;
}
.ccard .tag{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep,#8a6d12);
}
.ccard h4{font-family:"Playfair","Inter",serif;font-size:1.25rem;margin:6px 0 2px}
.ccard .price{font-family:"Playfair","Inter",serif;font-size:1.9rem}
.ccard .price small{font-size:.8rem;color:var(--ink-55,rgba(13,28,48,.55));font-family:Inter,sans-serif}
.ccard ul{margin:12px 0 0;display:grid;gap:7px}
.ccard li{display:flex;gap:8px;font-size:.86rem;align-items:flex-start}
.ccard li svg{flex:none;margin-top:2px;color:var(--gold-deep,#8a6d12)}
.ccard .btn{width:100%;margin-top:14px;justify-content:center}

/* mini-simulación de WhatsApp dentro del chat */
.csim{
  align-self:stretch;background:#0D1C30;border-radius:20px;
  padding:16px;display:grid;gap:9px;
  opacity:0;animation:cmsgIn .45s forwards;
  border:1px solid rgba(201,162,39,.35);
}
.csim .row{display:flex}
.csim .in,.csim .out{
  font-size:.84rem;line-height:1.45;padding:9px 13px;border-radius:13px;max-width:82%;
  opacity:0;transform:translateY(8px);
}
.csim .row.show .in,.csim .row.show .out{
  animation:cmsgIn .35s forwards;
}
.csim .in{background:#1f2c33;color:#fff;border-bottom-left-radius:4px}
.csim .row.r .out{margin-left:auto}
.csim .out{
  background:linear-gradient(135deg,#e8c766,#C9A227 60%,#b8901f);
  color:#0D1C30;border-bottom-right-radius:4px;font-weight:500;
}
.csim .stamp{
  text-align:center;font-size:.7rem;color:rgba(255,255,255,.45);
  padding:2px 0;
}
.csim .win{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:rgba(30,142,90,.16);border:1px solid rgba(30,142,90,.5);
  color:#7fd7ac;font-size:.82rem;font-weight:600;
  border-radius:11px;padding:9px;opacity:0;
}
.csim .win.show{animation:cmsgIn .4s forwards}

/* reseñas dentro del chat */
.crev{
  align-self:flex-start;width:100%;max-width:400px;display:grid;gap:9px;
}
.crev .rv{
  background:#fff;border:1px solid var(--line, rgba(13,28,48,.12));
  border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;
  opacity:0;transform:translateY(8px);
  box-shadow:0 8px 26px -18px rgba(13,28,48,.4);
}
.crev .rv.show{animation:cmsgIn .4s forwards}
.crev .rv .av{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#0D1C30;
  background:linear-gradient(135deg,#e8c766,#C9A227);
}
.crev .rv b{font-size:.8rem}
.crev .rv small{font-size:.68rem;color:var(--ink-55,rgba(13,28,48,.55));margin-left:6px}
.crev .rv p{font-size:.8rem;line-height:1.45;margin-top:2px}
.crev .stars{color:#C9A227;font-size:.7rem;letter-spacing:2px}

/* ancla para el sitio clásico */
.convo-more{
  text-align:center;padding:14px 0 26px;
}
.convo-more a{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.78rem;font-weight:600;color:var(--ink-55,rgba(13,28,48,.55));
  text-decoration:none;
}
.convo-more a:hover{color:var(--gold-deep,#8a6d12)}
.convo-more svg{animation:convoDown 1.6s ease-in-out infinite}
@keyframes convoDown{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){
  .convo-more svg,.convo-presence small::before{animation:none}
}