@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

html, body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Helvetica, Arial, sans-serif;
}

:root{
  --brand-maxw: 170px;
  --soft-border: rgba(15, 23, 42, .08);
  --soft-shadow: 0 18px 50px rgba(2, 6, 23, .06);
}

.brand-logo{ max-width: var(--brand-maxw); height:auto; }
@media (max-width: 420px){ :root{ --brand-maxw: 150px; } }

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13,110,253,0.1);
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

/* Softer cards/borders */
.soft-card{ border: 1px solid var(--soft-border) !important; border-radius: 18px !important; }
.soft-border{ border: 1px solid var(--soft-border) !important; }
.soft-hr{ border-color: rgba(15, 23, 42, .07) !important; }
.soft-btn{ border-color: rgba(15,23,42,.10) !important; }
.soft-badge{ border-color: rgba(15,23,42,.10) !important; }

.icon-badge{
  width: 42px; height: 42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(13,110,253,.08); color: #0d6efd;
  border: 1px solid rgba(13,110,253,.16);
  flex: 0 0 auto;
}

/* Marquee */
.marquee-wrap{
  position: relative;
  overflow: hidden;
  /*border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.9));
  box-shadow: 0 12px 30px rgba(2,6,23,.04);*/
}
.marquee{
  width: 100%;
}
.marquee-track{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover (desktop) */
@media (hover:hover){
  .marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
}

.logo-box{
  width: 120px;
  height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  display:flex; align-items:center; justify-content:center;
  padding: 8px 10px;
}
.logo-box img{
  max-height: 24px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media (max-width: 576px){
  .logo-box{ width: 104px; height: 46px; }
  .logo-box img{ max-height: 22px; }
  .marquee-track{ animation-duration: 44s; }
}

/* Product title */
.product-title{
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  font-weight: 700;
}

/* Sticky image offset */
.top-offset{ top: 92px; }
@media (max-width: 991px){
  .top-offset{ top: 0; position: static !important; }
}

/* Overlay pill on photo */
.pill-overlay {
    position: relative;
    bottom: 0;
    background: rgb(236 244 255);
    border: 1px solid rgb(12 106 245);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #0d6efd;
    backdrop-filter: blur(6px);
    width: fit-content;
}

/* Price card */
.price-card{
  border-radius: 18px;
  border: 1px solid #5d0196;
  /*background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(255,255,255,1));*/
  padding: 16px;
  /*box-shadow: var(--soft-shadow);*/
}

div#precoPromo {
    color: #5d0196 !important;
}

.price-main{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.6px;
}

/* Partner grid */
.partner-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}
.partner-item{
  border: 1px solid rgba(15,23,42,.06);
  background:#fff;
  border-radius: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 54px;
}
.partner-item img{
  max-height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 992px){ .partner-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 420px){
  .partner-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .partner-item img{ max-height: 20px; }
}

/* Lists */
.list-steps{ padding-left: 1.25rem; margin-bottom: .5rem; }
.list-steps li{ margin-bottom: .5rem; }
.list-check{ list-style: none; padding-left: 0; margin-bottom: 0; }
.list-check li{ margin-bottom: .5rem; display:flex; align-items:flex-start; gap: .25rem; }


/* ===============================
   Carrossel (logos) - loop infinito (override)
   =============================== */
html, body { overflow-x: hidden; }

.marquee-wrap{
  overflow: hidden !important;
  max-width: 100% !important;
  position: relative;
}

.marquee{
  overflow: hidden !important;
  max-width: 100% !important;
}

.marquee-track{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: max-content !important;
  padding: 10px 18px !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: marqueeLoop 38s linear infinite !important;
}

/* IMPORTANTE: precisa do conteúdo duplicado (no HTML) */
@keyframes marqueeLoop{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

.logo-box{ flex: 0 0 auto !important; }

/* mobile um pouco mais lento */
@media (max-width: 576px){
  .marquee-track{ animation-duration: 46s !important; }
}



/* Modal tweaks */
#modalDados .modal-content{background:#fff;}