/* ==========================================================================
   Product mock-ups (decorative, aria-hidden). Fictitious data.
   ========================================================================== */

.mock {
  overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-white); box-shadow: var(--shadow-md);
  font-size: var(--t-small); color: var(--c-ink);
}
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-paper); }
.mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--c-sand-deep); }
.mock__bar p { margin-left: 10px; font-weight: 600; color: var(--c-ink-soft); }

.mock__kpis { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--c-line); }
@media (min-width: 560px) { .mock__kpis { grid-template-columns: repeat(4, 1fr); } }
.mock__kpis div { padding: 14px 16px; border-right: 1px solid var(--c-line); }
.mock__kpis small { display: block; color: var(--c-muted); font-size: var(--t-label); }
.mock__kpis b { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.mock__kpis .warn b { color: var(--c-red); }
.mock em { font-style: normal; font-size: var(--t-label); font-weight: 600; margin-left: 4px; }
.mock em.up { color: var(--c-green); }
.mock em.down { color: var(--c-red); }

.mock__table { width: 100%; border-collapse: collapse; }
.mock__table th { padding: 10px 16px; text-align: left; font-weight: 500; font-size: var(--t-label); color: var(--c-muted); background: var(--c-paper); }
.mock__table td { padding: 12px 16px; border-top: 1px solid var(--c-line); white-space: nowrap; }
.mock__table td:first-child { white-space: normal; font-weight: 600; }
.mock__table td:last-child { display: flex; align-items: center; gap: 8px; }
.mock__table td i { position: relative; width: 46px; height: 6px; border-radius: 3px; background: var(--c-sand); overflow: hidden; }
.mock__table td i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c-green); }
.mock__table tr.flag { background: #FFF8F6; }
.mock__table tr.flag td i::after { background: var(--c-red); }
.mock .pill { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-red-soft); color: var(--c-red); font-size: var(--t-label); font-weight: 600; }
@media (max-width: 560px) { .mock__table th:nth-child(2), .mock__table td:nth-child(2) { display: none; } }

/* Insights */
.insights { display: grid; gap: 16px; padding: 18px; }
.insights__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.insights__score small { width: 100%; color: var(--c-muted); }
.insights__score b { font-size: 2.08rem; line-height: 1; font-weight: 600; color: var(--c-purple); }
.insights__score span { color: var(--c-muted); }
.insights__summary { padding: 14px; border-radius: var(--r-md); background: var(--c-paper); color: var(--c-ink-soft); }
.insights__themes { display: flex; flex-wrap: wrap; gap: 8px; }
.insights__themes li { padding: 6px 12px; border-radius: var(--r-pill); font-weight: 500; }
.insights__themes li b { margin-left: 4px; }
.insights__themes .pos { background: var(--c-green-soft); color: #145F3E; }
.insights__themes .neg { background: var(--c-red-soft); color: #8E2D1F; }
.insights__action { padding: 14px; border: 1px dashed var(--c-purple-glow); border-radius: var(--r-md); background: var(--c-purple-soft); }
.insights__action b { display: block; color: var(--c-purple); }

/* Widget */
.mock--widget { padding: 20px; background: var(--c-paper); }
.widget__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.widget__head > b { font-size: 2.08rem; font-weight: 600; line-height: 1; }
.widget__head small { display: block; color: var(--c-muted); }
.widget__cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .widget__cards { grid-template-columns: repeat(3, 1fr); } }
.widget__cards article { padding: 14px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); }
.widget__cards header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.widget__cards header small { display: block; color: var(--c-muted); font-size: var(--t-label); }
.widget__cards p { margin-top: 8px; color: var(--c-ink-soft); }
.av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-purple-soft); color: var(--c-purple); font-weight: 600; font-size: var(--t-label); }
.av--2 { background: var(--c-green-soft); color: var(--c-green); }
.av--3 { background: var(--c-sand-deep); color: var(--c-ink); }

/* WhatsApp request */
.mock-request {
  display: grid; gap: 10px; max-width: 460px; padding: 18px; border-radius: var(--r-lg);
  background: #ECE5DD; font-size: var(--t-small);
}
.bubble { max-width: 85%; padding: 10px 12px; border-radius: 10px; background: var(--c-white); box-shadow: var(--shadow-sm); color: var(--c-ink); }
.bubble span { display: block; text-align: right; font-size: var(--t-label); color: var(--c-muted); }
.bubble u { color: #0B7D6E; font-weight: 600; }
.bubble--out { justify-self: end; background: #D9FDD3; }
.bubble--choice { display: flex; gap: 8px; background: transparent; box-shadow: none; padding: 0; }
.bubble--choice span { padding: 8px 12px; border-radius: 10px; background: var(--c-white); color: #0B7D6E; font-weight: 600; font-size: var(--t-small); text-align: center; }

/* AI answers: four assistants, rotating every 4s */
.mock--ai { padding: 20px; display: grid; gap: 14px; background: var(--c-night-2); border-color: var(--c-night-line); color: var(--c-white); }
.ai-q { justify-self: end; max-width: 88%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--c-purple); }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tabs span {
  padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--t-label); font-weight: 600;
  color: #CFC6DF; background: rgba(255,255,255,.06);
  animation: ai-tab 16s infinite;
}
.ai-tabs span:nth-child(2) { animation-delay: 4s; }
.ai-tabs span:nth-child(3) { animation-delay: 8s; }
.ai-tabs span:nth-child(4) { animation-delay: 12s; }
.ai-answers { display: grid; }
.ai-a {
  grid-area: 1 / 1; padding: 16px; border-radius: 16px 16px 16px 4px;
  background: var(--c-night); border: 1px solid var(--c-night-line); color: #DDD6E8; line-height: 1.55;
  opacity: 0; animation: ai-panel 16s infinite;
}
.ai-a:nth-child(2) { animation-delay: 4s; }
.ai-a:nth-child(3) { animation-delay: 8s; }
.ai-a:nth-child(4) { animation-delay: 12s; }
.ai-a b { color: var(--c-white); }
.ai-a__who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; color: var(--c-white); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--gpt { background: #10A37F; }
.dot--gemini { background: linear-gradient(135deg, #4796E3, #9177C7); }
.dot--google { background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.dot--pplx { background: #20B8CD; }
.ai-a__sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-a__sources li { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #E6E0F0; font-size: var(--t-label); }

@keyframes ai-panel {
  0%, 2% { opacity: 0; transform: translateY(6px); }
  5%, 23% { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ai-tab {
  0%, 2% { background: rgba(255,255,255,.06); color: #CFC6DF; }
  5%, 23% { background: var(--c-white); color: var(--c-ink); }
  26%, 100% { background: rgba(255,255,255,.06); color: #CFC6DF; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-a, .ai-tabs span { animation: none; }
  .ai-a:first-child { opacity: 1; }
  .ai-tabs span:first-child { background: var(--c-white); color: var(--c-ink); }
}

/* Review filter */
.filter { display: grid; gap: 14px; padding: 18px; }
.filter__form { padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); text-align: center; }
.filter__q { font-weight: 600; font-size: 1.05rem; }
.filter__stars { margin-top: 6px; font-size: 1.28rem; letter-spacing: 4px; color: var(--c-gold); }
.filter__chip { justify-self: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-white); font-size: var(--t-label); font-weight: 600; }
.filter__routes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.filter__route { padding: 14px; border-radius: var(--r-md); border: 1.5px solid; }
.filter__route b { display: block; }
.filter__route span { display: block; margin: 2px 0 10px; color: var(--c-ink-soft); font-size: var(--t-label); }
.filter__route ul { display: flex; flex-wrap: wrap; gap: 6px; }
.filter__route li { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-white); font-size: var(--t-label); font-weight: 500; }
.filter__route--pos { border-color: var(--c-green); background: var(--c-green-soft); }
.filter__route--neg { border-color: var(--c-line); background: var(--c-paper); }
@media (max-width: 480px) { .filter__routes { grid-template-columns: 1fr; } }