:root{
  --primary:#1E63FF;
  --primaryDark:#0D45D8;
  --accent:#17C964;

  /* Hero responsivo controlado via painel */
  --hero-width-desktop: 920px;
  --hero-height-desktop: 420px;
  --hero-width-tablet: 96%;
  --hero-height-tablet: 340px;
  --hero-width-mobile: 100%;
  --hero-height-mobile: 260px;
  --hero-banner-fit: cover;

  --hero-frame-radius: 1rem;
  --hero-frame-shadow: 0 12px 28px rgba(0,0,0,.18);
  --hero-frame-padding: 0px;
  --hero-frame-bg: transparent;

  --hero-caption-title: #ffffff;
  --hero-caption-text:  #ffffff;
  --hero-caption-bg:    rgba(0,0,0,0);

  --hero-ctrl-size: 40px;      /* área clicável */
  --hero-ctrl-icon: 16px;      /* ícone seta */
  --hero-ctrl-bg: rgba(0,0,0,.35);
  --hero-ctrl-bg-hover: rgba(0,0,0,.55);
  --hero-ctrl-icon-color:#fff;
  --hero-ctrl-offset: 38; /* % da metade do slide (distância do centro) */
}

/* Tema geral */
.hero{background:linear-gradient(135deg,var(--primary),var(--primaryDark));color:#fff}
.navbar-brand img{height:28px}
.badge-pill{background:#ecf2ff;color:#2b4cff;border-radius:999px;padding:.35rem .7rem;font-weight:600}
.plan{background:#fff;border:1px solid #e8eef8;border-radius:1rem}
.plan .price{font-size:1.6rem}

/* Hero — quadro e centralização */
.hero .hero-carousel{
  width: var(--hero-width-desktop);
  border-radius: var(--hero-frame-radius);
  overflow: hidden;
  background: var(--hero-frame-bg);
  padding: var(--hero-frame-padding);
  box-shadow: var(--hero-frame-shadow);
  margin: 0 auto;
}
@media (max-width: 991.98px){
  .hero .hero-carousel{ width: var(--hero-width-tablet); }
}
@media (max-width: 575.98px){
  .hero .hero-carousel{ width: var(--hero-width-mobile); }
}

/* Imagem do slide */
.hero-banner-img{
  width: 100%;
  height: var(--hero-height-desktop);
  object-fit: var(--hero-banner-fit);
  display: block;
}
@media (max-width: 991.98px){ .hero-banner-img{ height: var(--hero-height-tablet); } }
@media (max-width: 575.98px){ .hero-banner-img{ height: var(--hero-height-mobile); } }

/* Legenda (cores via painel) */
.carousel-caption{
  left: 2%; right: 2%; bottom: 1.25rem;
  background: var(--hero-caption-bg) !important;
  padding: .9rem 1rem; border-radius: .5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.caption-title{ color: var(--hero-caption-title); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.caption-lead{ color: var(--hero-caption-text); opacity: .95; }

/* Controles — área clicável mínima e offset controlado */
.hero .carousel-control-prev,
.hero .carousel-control-next{
  width: var(--hero-ctrl-size);
  height: var(--hero-ctrl-size);
  top: 50%; transform: translateY(-50%);
  opacity: 1 !important;
}
.hero .carousel-control-prev{ left: calc(50% - (var(--hero-ctrl-offset) * 1%)); }
.hero .carousel-control-next{ right: calc(50% - (var(--hero-ctrl-offset) * 1%)); }

/* Ícones — tamanho/cores e “encolhe” a área de clique ao tamanho do ícone */
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon{
  width: var(--hero-ctrl-icon); height: var(--hero-ctrl-icon);
  background-size: 100% 100%;
  background-color: var(--hero-ctrl-bg);
  border-radius: 50%;
  padding: calc((var(--hero-ctrl-size) - var(--hero-ctrl-icon)) / 2);
  filter: invert(1); /* deixa o ícone branco nos ícones SVG do BS */
}
.hero .carousel-control-prev:hover .carousel-control-prev-icon,
.hero .carousel-control-next:hover .carousel-control-next-icon{
  background-color: var(--hero-ctrl-bg-hover);
}

/* Indicadores */
.carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; }