/*
 * Camada responsiva do site público.
 * Carregada DEPOIS de site.css — apenas ajustes de adaptação,
 * sem alterar cores, marca ou o design original.
 */

/* ---------- Base fluida ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Palavras longas (títulos de campanha, e-mails) nunca estouram */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, .badge {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Containers ---------- */
.container,
.container-600 {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 576px) {
  .container,
  .container-600 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

main.app-main {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  /* espaço reduzido para os botões flutuantes de contato */
  padding-bottom: 24px !important;
}

@media (min-width: 992px) {
  main.app-main {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-600 {
    max-width: 720px;
  }
}

/* ---------- Títulos de seção (evita sobreposição título/descrição) ---------- */
.app-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.app-title .h1,
.app-title h1,
.app-title h2 {
  color: rgba(var(--incrivel-rgbaInvert), 0.9);
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  line-height: 1.25;
  margin: 0;
  padding-right: 0;
  min-width: 0;
}

.app-title .app-title-desc {
  padding-top: 0;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  line-height: 1.3;
  min-width: 0;
}

/* ---------- Carrossel de ganhadores ---------- */
.winnersCarousel_header__1FeiM {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.winnersCarousel_scroller__2Z3z1 {
  scroll-padding-left: 4px;
}

.winnersCarousel_card__37ySl {
  min-width: min(285px, 88vw);
  max-width: min(285px, 88vw);
  height: auto;
  min-height: 87px;
}

/* ---------- Campanha em destaque ---------- */
.featured-shell {
  padding-left: clamp(8px, 2.5vw, 14px);
  padding-right: clamp(8px, 2.5vw, 14px);
}

.SorteioTpl_sorteioTpl__2s2Wu.SorteioTpl_destaque__3vnWR .SorteioTpl_imagemContainer__2-pl4,
.SorteioTpl_sorteioTpl__2s2Wu.SorteioTpl_destaque__3vnWR .carousel-item,
.SorteioTpl_sorteioTpl__2s2Wu.SorteioTpl_destaque__3vnWR .SorteioTpl_imagem__2GXxI {
  height: auto !important;
  aspect-ratio: 600 / 290;
  width: 100%;
}

.SorteioTpl_sorteioTpl__2s2Wu.SorteioTpl_destaque__3vnWR .SorteioTpl_imagem__2GXxI {
  object-fit: cover;
}

.SorteioTpl_title__3RLtu,
.SorteioTplMini_title__2EpSS {
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
}

/* ---------- Cards compactos de campanha ---------- */
.SorteioTplMini_imagem__1wXOq {
  height: clamp(76px, 22vw, 96px);
  width: clamp(76px, 22vw, 96px);
  min-width: clamp(76px, 22vw, 96px);
}

.SorteioTplMini_sorteioTplMini__2O92k .d-flex.flex-column.justify-content-center {
  min-width: 0;
}

/* ---------- Área de compra ---------- */
.buy-hero-img {
  height: auto;
  aspect-ratio: 600 / 290;
}

.buy-cta {
  min-height: 56px;
}

.buy-cta-title {
  font-size: clamp(1rem, 3.8vw, 1.15rem);
}

.buy-stepper {
  height: 48px;
}

.buy-stepper-btn,
.buy-stepper-clear {
  min-width: 44px;
  min-height: 44px;
}

.buy-pacote-row {
  gap: 8px;
  min-height: 48px;
}

/* ---------- Áreas de toque ---------- */
.Header_navHorizontalHeader__2O8dU > li > a,
.nav-principal-horizontal a,
.mobile-menu-v2 a,
.mobile-menu-v2 button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.Header_appHeaderWrap__2rUwY .btn,
.txtSuporte {
  min-height: 44px;
}

/* ---------- Formulários ---------- */
.form-control,
.form-select,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    /* evita zoom automático no iOS */
    font-size: 16px;
  }

  .modal .btn,
  .btn-block-mobile {
    width: 100%;
  }
}

/* ---------- Tabelas e listas largas ---------- */
.table-responsive,
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

/* ---------- Modais em telas pequenas ---------- */
@media (max-width: 575.98px) {
  .modal-dialog:not(.mobile-menu-v2 .modal-dialog) {
    margin: 8px;
  }

  .modal-body {
    max-height: 78dvh;
    overflow-y: auto;
  }
}

/* ---------- Telas grandes / ultrawide ---------- */
@media (min-width: 1400px) {
  .floating-contacts {
    right: max(24px, calc((100vw - 1320px) / 2));
  }
}