/*! Box Car Club – style.css (compact) */

/* ===== Variables ===== */
:root{
  --brand:#fff000;
  --text:#fff;
  --muted:#6c757d;
  --border:#E4E4E4;
}

/* ===== Base ===== */
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
a{text-decoration:none}
.header-top{
  color:#000;
  text-transform:uppercase;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.28125rem;
}

/* ===== Spacing helpers used no layout ===== */
.padding-medium{padding-top:9rem;padding-bottom:9rem}
.padding-medium-2{padding-top:9rem;padding-bottom:9rem}
@media (max-width:768px){
  .padding-medium{padding-top:5rem;padding-bottom:0}
  .padding-medium-2{padding-top:2rem;padding-bottom:5rem}
}

/* ===== Buttons (aproveita classes do Bootstrap) ===== */
.btn{
  text-transform:uppercase;
  letter-spacing:.075rem;
  --bs-btn-padding-x:3rem;
  --bs-btn-padding-y:1.4rem;
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:8px;
}
.btn-primary{
  --bs-btn-color:#000;
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#000;
  --bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-color:#000;
  --bs-btn-active-bg:var(--brand);
  --bs-btn-active-border-color:var(--brand);
}
.btn-outline-primary{
  --bs-btn-color:#fff;
  --bs-btn-border-color:#fff;
  --bs-btn-hover-color:#000;
  --bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-color:#000;
  --bs-btn-active-bg:var(--brand);
  --bs-btn-active-border-color:var(--brand);
}

/* ===== Swiper (carrossel “Próximos temas”) ===== */
.swiper-slide{width:auto!important}
iconify-icon.icon-arrow-left,
iconify-icon.icon-arrow-right{color:#fff;font-size:70px}
@media (max-width:576px){
  .swiper-arrow{left:0}
  iconify-icon.icon-arrow-left,
  iconify-icon.icon-arrow-right{font-size:50px}
}

/* ===== Pricing (Planos) ===== */
.plan-post{border:1px solid var(--border);background:#fff;border-radius:8px}
span.price-tick{color:#000}
.price-option{min-height:250px}

/* ===== Number circle (steps) ===== */
.number-circle{
  width:50px;height:50px;border-radius:50%;
  background:var(--brand);color:#000;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700
}

/* ===== Footer ===== */
section#footer{background:#000}

/* ===== Video (lite-youtube) poster centralizado ===== */
lite-youtube{
  display:block;width:100%;
  aspect-ratio:16/9;
  background:#000;
  background-size:cover!important;
  background-position:50% 50%!important
}