/* ============================================================
   Smartphone realista + reseñas — sección "con y sin Círculo IA"
   Vive dentro de .sim-band (banda oscura navy).
   ============================================================ */

.ph-body{
  display:grid;gap:28px;margin-top:26px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .ph-body{grid-template-columns:1fr 240px;align-items:start}
}

.ph-stage{
  position:relative;
  display:flex;justify-content:center;align-items:flex-start;
  gap:20px;flex-wrap:wrap;
  min-height:560px;
}

/* ---------- el dispositivo ---------- */
.ph-device{
  position:relative;flex:none;
  width:290px;height:600px;
  border-radius:46px;
  background:linear-gradient(160deg,#3a4656,#131c28 40%,#05090f);
  padding:10px;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 1px rgba(255,255,255,.22);
}
/* botones laterales */
.ph-device::before{
  content:"";position:absolute;right:-2.5px;top:130px;width:3px;height:64px;
  border-radius:2px;background:linear-gradient(180deg,#4a5768,#1a2431);
}
.ph-device::after{
  content:"";position:absolute;left:-2.5px;top:110px;width:3px;height:96px;
  border-radius:2px;background:linear-gradient(180deg,#4a5768,#1a2431);
}
.ph-notch{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:86px;height:24px;border-radius:14px;background:#000;z-index:5;
  box-shadow:inset 0 0 3px rgba(255,255,255,.12);
}
.ph-notch::after{
  content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2c3a58, #060a12 70%);
  box-shadow:inset 0 0 2px rgba(120,160,255,.5);
}
.ph-screen{
  position:relative;width:100%;height:100%;
  border-radius:38px;overflow:hidden;
  background:#0b141a;
  display:flex;flex-direction:column;
}
/* barra de estado */
.ph-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 6px;font-size:.68rem;font-weight:600;color:#e7edf1;
  background:#1f2c34;
}
.ph-status-icons{display:flex;gap:5px;align-items:center;color:#e7edf1}
/* cabecera del chat */
.ph-wahead{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px 10px;background:#1f2c34;color:#e7edf1;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.ph-ava{
  width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;
  background:#fff;display:grid;place-items:center;
}
.ph-ava img{width:82%;height:82%;object-fit:contain}
.ph-who{flex:1;min-width:0;line-height:1.15}
.ph-who b{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-who small{font-size:.64rem;color:#9db4c0}
.ph-who small.online{color:#4ad38a}
/* fondo del chat estilo doodle */
.ph-chat{
  flex:1;overflow:hidden;position:relative;
  padding:12px 10px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;
  background:
    linear-gradient(rgba(8,17,24,.93),rgba(8,17,24,.93)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
}
.ph-day{
  align-self:center;font-size:.6rem;color:#9db4c0;
  background:#182229;border-radius:7px;padding:3px 9px;margin-bottom:2px;
}
.ph-msg{
  max-width:82%;padding:7px 10px 5px;border-radius:10px;
  font-size:.76rem;line-height:1.4;color:#e7edf1;position:relative;
  opacity:0;transform:translateY(9px) scale(.98);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.ph-msg.show{opacity:1;transform:none}
.ph-msg.in{align-self:flex-start;background:#1f2c34;border-top-left-radius:3px}
.ph-msg.out{align-self:flex-end;background:#134d37;border-top-right-radius:3px}
.ph-msg time{
  display:inline-block;float:right;margin:6px 0 0 8px;
  font-size:.58rem;color:rgba(231,237,241,.55);
}
.ph-msg .ticks{margin-left:3px;font-size:.6rem;letter-spacing:-2px}
.ph-msg .ticks.sent{color:rgba(231,237,241,.5)}
.ph-msg .ticks.read{color:#53bdeb}
.ph-typing{
  align-self:flex-start;background:#1f2c34;border-radius:10px;border-top-left-radius:3px;
  padding:10px 13px;display:inline-flex;gap:4px;
  opacity:0;transform:translateY(9px);transition:opacity .3s,transform .3s;
}
.ph-typing.show{opacity:1;transform:none}
.ph-typing i{
  width:5.5px;height:5.5px;border-radius:50%;background:#9db4c0;
  animation:phTyp 1.1s ease-in-out infinite;
}
.ph-typing i:nth-child(2){animation-delay:.15s}
.ph-typing i:nth-child(3){animation-delay:.3s}
@keyframes phTyp{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
/* chips de resultado dentro del chat */
.ph-flag{
  align-self:center;font-size:.66rem;font-weight:700;letter-spacing:.02em;
  border-radius:9px;padding:6px 12px;display:inline-flex;gap:6px;align-items:center;
  opacity:0;transform:translateY(9px);transition:opacity .35s,transform .35s;
}
.ph-flag.show{opacity:1;transform:none}
.ph-flag.bad{background:rgba(224,73,73,.16);border:1px solid rgba(224,73,73,.55);color:#ff9b9b}
.ph-flag.good{background:rgba(30,142,90,.18);border:1px solid rgba(30,142,90,.6);color:#7fd7ac}
.ph-inputbar{
  display:flex;align-items:center;gap:7px;padding:8px 10px;background:#1f2c34;
}
.ph-input{
  flex:1;background:#2a3942;border-radius:999px;padding:8px 14px;
  font-size:.72rem;color:#9db4c0;
}
.ph-send{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:#00a884;display:grid;place-items:center;color:#0b141a;
}

/* ---------- ventanas de reseñas ---------- */
.rev-pops{
  display:flex;flex-direction:column;gap:10px;
  width:250px;max-width:100%;
  align-self:center;
}
.rev-pop{
  background:#fff;border-radius:14px;padding:12px 14px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.65);
  opacity:0;transform:translateX(26px) scale(.96);
  transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.3,1);
  border-left:3px solid #C9A227;
}
.rev-pop.show{opacity:1;transform:none}
.rev-pop .rp-top{display:flex;align-items:center;gap:8px}
.rev-pop .rp-av{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#0D1C30;
  background:linear-gradient(135deg,#e8c766,#C9A227);
}
.rev-pop b{font-size:.74rem;color:#101b2b}
.rev-pop .rp-when{font-size:.62rem;color:rgba(13,28,48,.5);margin-left:auto}
.rev-pop .rp-stars{color:#f5a623;font-size:.68rem;letter-spacing:2.5px;margin:4px 0 3px}
.rev-pop p{font-size:.72rem;line-height:1.45;color:rgba(13,28,48,.8)}
.rev-pop .rp-src{
  display:flex;align-items:center;gap:5px;margin-top:7px;
  font-size:.6rem;font-weight:600;color:rgba(13,28,48,.45);
  text-transform:uppercase;letter-spacing:.08em;
}
/* estado vacío del panel de reseñas en modo SIN */
.rev-empty{
  border:1.5px dashed rgba(255,255,255,.22);border-radius:14px;
  padding:18px 16px;text-align:center;color:rgba(255,255,255,.55);
  font-size:.76rem;line-height:1.5;
  opacity:0;transform:translateX(26px);transition:opacity .45s,transform .45s;
}
.rev-empty.show{opacity:1;transform:none}

@media(max-width:640px){
  .ph-stage{min-height:0}
  .rev-pops{width:100%;max-width:290px}
}
@media(prefers-reduced-motion:reduce){
  .ph-msg,.ph-typing,.ph-flag,.rev-pop,.rev-empty{transition:none}
  .ph-typing i{animation:none}
}