/* ===== Complementos do clone estático (modal + carrossel) ===== */

/* Modal de downsell */
.ds-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:ds-fade .2s ease-out;
}
.ds-overlay[hidden]{display:none;}
.ds-modal{
  position:relative;
  width:100%; max-width:28rem;
  background:#fff; color:#101C28;
  border:2px solid var(--accent, #22c55e);
  border-radius:16px;
  padding:28px 22px 22px;
  text-align:center;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.45);
  animation:ds-pop .22s cubic-bezier(.16,1,.32,1);
  max-height:92vh; overflow-y:auto;
}
.ds-close{
  position:absolute; top:8px; right:12px;
  font-size:28px; line-height:1;
  color:#9ca3af; background:none; border:0; cursor:pointer;
}
.ds-close:hover{color:#374151;}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
body.ds-open{overflow:hidden;}

/* Carrossel de depoimentos (autoplay contínuo) */
#tst-track{
  transition:transform .6s cubic-bezier(.25,.8,.5,1);
  will-change:transform;
}
#tst-track.no-anim{transition:none;}
#tst-viewport{cursor:grab;}
#tst-viewport.dragging{cursor:grabbing;}

/* Reveal: garante estado final quando o JS roda */
.reveal-in{opacity:1;}

/* Sem JS (ou JS com erro): nada pode ficar invisível */
html.no-js .reveal{opacity:1 !important; animation:none !important;}

/* ===== Blocos de habilidades (10 áreas do material) ===== */
.areas-intro{
  max-width:46rem; margin:-18px auto 22px; text-align:center;
  color:#4b5563; font-size:15px; line-height:1.6;
}
.areas-intro strong{color:#101C28;}
.areas-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; max-width:56rem; margin:0 auto 40px; padding:0 4px;
}
.area-chip{
  display:inline-flex; align-items:center;
  background:#fff; color:#101C28;
  border:1px solid var(--border, #e5e7eb);
  border-radius:999px;
  padding:9px 16px;
  font-size:13.5px; font-weight:700; line-height:1.2;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.area-chip::before{
  content:"✓"; color:#1e9343; font-weight:900;
  margin-right:7px; font-size:12px;
}
@media (max-width:480px){
  .area-chip{font-size:12.5px; padding:8px 13px;}
  .areas-grid{gap:8px;}
}