/* =====================================================
   Home — banner ícones (bordô #291212, Doe lateral, 3 colunas)
   Layout: Bootstrap row (intro + 3 colunas) a partir de lg — sem empilhar título em 1200–1399px
   ===================================================== */

.home-banner-icones {
  position: relative;
  background-color: #291212;
  min-height: clamp(28rem, 50vw, 36.2rem);
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

.home-banner-icones__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem)
    clamp(5rem, 12vw, 6.5rem);
}

/* Desktop (≥992px): Doe fixo na lateral */
@media (min-width: 992px) {
  .home-banner-icones__doe-wrap {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 998;
    width: 30px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-50%);
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .home-banner-icones__doe-wrap {
    left: 0;
    width: 30px;
    height: 120px;
  }

  .home-banner-icones__doe {
    width: 120px;
    height: 30px;
    font-size: 16px;
    line-height: 19px;
  }
}

.home-banner-icones__doe {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 120px;
  height: 30px;
  margin: 0;
  padding: 0;
  background-color: #fc2e36;
  color: #f5f2f2 !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.home-banner-icones__doe:hover,
.home-banner-icones__doe:focus-visible {
  background-color: #d9222a;
  color: #f5f2f2 !important;
}

/* Linha Bootstrap: sem CSS Grid — intro + bloco de 3 colunas permanecem na mesma linha ≥lg */
.home-banner-icones__layout {
  min-width: 0;
}

.home-banner-icones__cols {
  min-width: 0;
}

.home-banner-icones__intro {
  max-width: 37rem;
}

@media (min-width: 992px) {
  .home-banner-icones__intro {
    max-width: min(37rem, 100%);
    padding-right: clamp(0.75rem, 2vw, 1.5rem);
  }
}

.home-banner-icones__title {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 2.55vw + 0.45rem, 3.35rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #f5f2f2;
}

/* Duas linhas Figma: cada <span class="home-banner-icones__line"> = uma linha sem reembolso extra */
@media (min-width: 992px) {
  .home-banner-icones__title .home-banner-icones__line {
    white-space: nowrap;
  }
}

.home-banner-icones__lead {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8125rem, 0.92vw + 0.42rem, 1.0625rem);
  font-weight: 600;
  line-height: 1.5;
  color: #f5f2f2;
}

/* Botão Conheça a Ação — Figma ~283×63, #FC2E36 (anula .btn global: uppercase, width 100%, height fixo) */
.home-banner-icones__cta {
  background-color: #fc2e36 !important;
  border: none !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500 !important;
  font-size: clamp(0.95rem, 1.2vw + 0.45rem, 1.45rem) !important;
  line-height: 1.2;
  text-transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-banner-icones__cta:hover,
.home-banner-icones__cta:focus-visible {
  background-color: #d9222a !important;
  color: #fff !important;
}

.home-banner-icones__line {
  display: block;
}

.home-banner-icones__col {
  min-height: 0;
  padding-left: clamp(0.65rem, 1.8vw, 1.25rem);
}

@media (min-width: 768px) {
  .home-banner-icones__col {
    border-left: 1px solid #cfbfa6;
    padding-left: clamp(0.75rem, 1.5vw, 1.1rem);
  }

  .home-banner-icones__col-title {
    font-size: clamp(1.05rem, 1.25vw + 0.55rem, 1.875rem);
    line-height: 1.25;
  }

  .home-banner-icones__col-text {
    font-size: clamp(0.85rem, 0.9vw + 0.5rem, 1.125rem);
    line-height: 1.55;
  }

  .home-banner-icones__col-img {
    width: clamp(110px, 14vw, 200px);
    max-width: 100%;
  }
}

.home-banner-icones__col-title {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.15rem, 2vw + 0.35rem, 1.875rem);
  line-height: 1.25;
  color: #fc2e36;
  text-align: left;
}

.home-banner-icones__col-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.88rem, 1.2vw + 0.45rem, 1.125rem);
  line-height: 1.55;
  color: #f5f2f2;
  flex: 0 0 auto;
  text-align: left;
}

.home-banner-icones__col-icon {
  min-height: 0;
}

.home-banner-icones__col-img {
  width: clamp(120px, 18vw, 200px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}

@media (min-width: 1400px) {
  .home-banner-icones__container {
    padding-left: max(5rem, calc(215px - 0px));
  }
}

/* Mobile / tablet < lg — coluna única + 3 blocos empilhados (Figma mobile) */
@media (max-width: 991px) {
  .home-banner-icones {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 2rem;
  }

  /* Sem position:relative aqui: o Doe (absolute) ancora na section.home-banner-icones */
  .home-banner-icones__container {
    display: block;
    max-width: 395px;
    margin: 0 auto;
    padding: 2.5rem 15px 2rem 58px;
    box-sizing: border-box;
  }

  /* Dentro da secção do banner: mesmas medidas do desktop (30×120 / 120×30), acompanha o scroll */
  .home-banner-icones__doe-wrap {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 3;
    width: 30px;
    height: 120px;
    min-width: 30px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .home-banner-icones__layout {
    min-width: 0;
  }

  .home-banner-icones__cols {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .home-banner-icones__intro {
    max-width: 331px;
    margin: 0 auto;
    padding-right: 0;
    padding-bottom: 0;
    text-align: center;
    border-bottom: none;
    grid-column: unset;
  }

  .home-banner-icones__title {
    box-sizing: border-box;
    width: 100%;
    max-width: 331px;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    padding: 0;
    /* flex + alinhamento: utilitários Bootstrap no HTML (d-flex flex-column align-items-center) */
    justify-content: center;
    font-size: clamp(1.35rem, 7.1vw, 2.2rem);
    line-height: 1.25;
    text-align: center;
  }

  /* Cada linha do título = um bloco Figma; nowrap evita 3ª linha por reembolso dentro do span */
  .home-banner-icones__title .home-banner-icones__line {
    white-space: nowrap;
    line-height: 1.25;
    max-width: 100%;
  }

  .home-banner-icones__lead {
    box-sizing: border-box;
    width: 100%;
    max-width: 330px;
    min-height: 110px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
  }

  .home-banner-icones__lead .home-banner-icones__line {
    white-space: normal;
    line-height: 25px;
  }

  .home-banner-icones__col-title .home-banner-icones__line,
  .home-banner-icones__col-text .home-banner-icones__line {
    white-space: normal;
  }

  .home-banner-icones__col {
    position: relative;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    border-left: none !important;
    border-top: none;
    padding-left: 0;
    padding-top: 1.75rem;
    text-align: center;
  }

  .home-banner-icones__cols > .home-banner-icones__col:nth-child(2)::before,
  .home-banner-icones__cols > .home-banner-icones__col:nth-child(3)::before {
    content: '';
    display: block;
    width: 220px;
    max-width: 100%;
    margin: 0 auto 1.5rem;
    border-top: 1px solid #cfbfa6;
  }

  .home-banner-icones__col-title {
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 0.65rem;
  }

  .home-banner-icones__col-text {
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .home-banner-icones__col-img {
    width: 150px;
    max-width: 100%;
  }

  .home-banner-icones__col-icon {
    justify-content: center !important;
  }
}

@media (max-width: 575px) {
  .home-banner-icones__container {
    padding-left: 52px;
    padding-right: 12px;
  }

  .home-banner-icones__intro,
  .home-banner-icones__title,
  .home-banner-icones__lead {
    max-width: 100%;
  }

  .home-banner-icones__title {
    font-size: clamp(1.3rem, 6.85vw, 2.05rem);
    line-height: 1.22;
  }

  .home-banner-icones__title .home-banner-icones__line {
    line-height: 1.22;
    white-space: nowrap;
  }

  .home-banner-icones__lead {
    font-size: 14px;
    line-height: 24px;
    min-height: 0;
  }

  .home-banner-icones__lead .home-banner-icones__line {
    line-height: 24px;
  }

  .home-banner-icones__col {
    max-width: 240px;
  }
}
