/* ── compare.css — slider antes/depois (carrossel + cortina arrastável) ── */

.cmp {
  display: flex; flex-direction: column; gap: 24px;
  margin: 8px 0;
}

/* ── carrossel: abas com o nome de cada tela ── */
.cmp-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cmp-tab {
  border: 1px solid rgba(7,2,4,0.15); background: transparent;
  padding: 6px 14px; border-radius: 4px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: #070204; cursor: pointer; line-height: 1.5;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cmp-tab:hover { border-color: #070204; }
.cmp-tab[aria-selected="true"] {
  background: #070204; border-color: #070204; color: #05ff00;
}

/* ── painéis ── */
.cmp-pane { display: none; flex-direction: column; gap: 20px; }
.cmp-pane.is-active { display: flex; }

.cmp-stage { display: flex; justify-content: center; }

/* moldura de telefone */
.cmp-device {
  background: #1f1b1d; border-radius: 42px; padding: 10px;
  box-shadow: 0 24px 60px rgba(7,2,4,0.28);
  width: min(390px, 100%);
}
.cmp-window {
  position: relative; overflow: hidden;
  border-radius: 32px; background: #fff;
  aspect-ratio: var(--ar, 390 / 844);
  touch-action: pan-y;               /* deixa a página rolar na vertical */
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
}
.cmp-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
}
/* o "antes" fica por cima, recortado até a posição da cortina */
.cmp-shot--before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* as telas são recortes de telas mais longas: o esmaecimento na base
   deixa claro que o conteúdo continua, em vez de parecer corte errado */
.cmp-window::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.92));
  pointer-events: none;
}

/* divisor + alça */
.cmp-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(7,2,4,0.25);
  pointer-events: none;
}
.cmp-handle {
  position: absolute; top: 50%; left: var(--pos, 50%);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(7,2,4,0.15);
  box-shadow: 0 4px 16px rgba(7,2,4,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; padding: 0;
}
.cmp-handle svg { width: 20px; height: 20px; color: #070204; }
.cmp-handle:focus-visible { outline: 3px solid #05ff00; outline-offset: 2px; }

/* etiquetas antes/depois */
.cmp-chip {
  position: absolute; top: 12px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(7,2,4,0.82); color: #fff;
  pointer-events: none; transition: opacity 0.2s;
}
.cmp-chip--before { left: 12px; }
.cmp-chip--after  { right: 12px; }
/* some com a etiqueta quando o lado dela está quase fechado */
.cmp-window[data-pos-low="true"]  .cmp-chip--before { opacity: 0; }
.cmp-window[data-pos-high="true"] .cmp-chip--after  { opacity: 0; }

/* legenda de cada par */
.cmp-caption {
  max-width: 620px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.cmp-caption h4 {
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--text-black);
}
.cmp-caption p { font-size: 15px; line-height: 1.6; color: #555; }

.cmp-hint {
  text-align: center; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cmp-hint svg { width: 16px; height: 16px; }

/* animação de apresentação: a cortina varre uma vez ao entrar na tela */
@media (prefers-reduced-motion: reduce) {
  .cmp-window { scroll-behavior: auto; }
}

@media (max-width: 600px) {
  .cmp-device { border-radius: 32px; padding: 8px; }
  .cmp-window { border-radius: 24px; }
  .cmp-tab { font-size: 12px; padding: 5px 10px; }
}