/* ══════════════════════════════════════════════
   ROUND — Cross-promo (conteúdo + imagem, 50vh)
══════════════════════════════════════════════ */

.round-section {
    background: var(--bege-claro) url('../assets/imagens/background-bege.webp')
    center / cover no-repeat fixed;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;

}

.round-section::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  height: clamp(90px, 16vh, 170px);
  background: linear-gradient(
    to bottom,
    rgba(var(--white-rgb), 0) 0%,
    rgba(var(--white-rgb), 0.55) 55%,
    var(--white) 100%
  );
  pointer-events: none;
}

.round-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* ── Coluna de conteúdo ─────────────────────── */
.round-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 3.75rem);
  padding-left: max(clamp(1.5rem, 5vw, 4rem), calc((100vw - var(--max-w)) / 2));
}

.round-content .section-eyebrow {
  margin-bottom: clamp(0.6rem, 1.6vh, 0.9rem);
}

.round-logo {
  width: clamp(110px, 10vw, 140px);
  height: auto;
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.round-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--verde-profundo);
  margin-bottom: clamp(0.6rem, 1.6vh, 1rem);
}

.round-headline-accent {
  display: block;
  color: var(--terracota-medio);
}

.round-sub {
  font-size: clamp(0.92rem, 1.15vw, 1rem);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 40rem;
  text-wrap: pretty;
  margin-bottom: clamp(1rem, 2.6vh, 1.6rem);
}

.round-sub:has(+ .round-sub) {
  margin-bottom: 0.75rem;
}

.round-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.round-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--verde-profundo);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--transition);
}

.round-link:hover {
  color: var(--terracota-medio);
}

.round-link [class^="fa-"] {
  font-size: 1.05rem;
}


/* ── Coluna visual (imagem full-bleed, altura*/
.round-visual {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.round-visual img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* O véu tinha piso de 10% de opacidade até a borda direita — nunca
   chegava a `transparent` de verdade, então uma neblina bege ficava
   sobre a foto inteira, não só na costura, e lavava a cor dela.
   Agora o mask zera por volta de 45%, então metade direita da foto
   fica limpa e só a faixa perto do texto recebe o esmaecimento. */
.round-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bege-claro) url('../assets/imagens/background-bege.webp')
    center / cover no-repeat fixed;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0, 0, 0, 0.88) 8%,
    rgba(0, 0, 0, 0.6) 18%,
    rgba(0, 0, 0, 0.3) 28%,
    rgba(0, 0, 0, 0.1) 38%,
    transparent 46%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0, 0, 0, 0.88) 8%,
    rgba(0, 0, 0, 0.6) 18%,
    rgba(0, 0, 0, 0.3) 28%,
    rgba(0, 0, 0, 0.1) 38%,
    transparent 46%
  );
  pointer-events: none;
}



/* ── Responsivo ────────────────────────────────── */

@media (min-width: 901px) and (max-height: 700px) {



  .round-logo {
    width: clamp(88px, 8vw, 110px);
  }

  .round-headline {
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  }

  .round-sub {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

@media (max-width: 900px) {
  /* Sem isto, o grid de 2 colunas do desktop continuava ativo no celular
     — texto e imagem espremidos lado a lado — e a altura fixa de 100vh
     (sem overflow) deixava o conteúdo empilhado vazar por baixo da
     seção. Essas duas regras tinham sido apagadas numa edição manual. */
  .round-section {
    height: auto;
    min-height: 0;
  }

  .round-section::after {
    height: 60px;
  }

  .round-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .round-content {
    align-items: center;
    text-align: center;
    padding-right: clamp(1.5rem, 5vw, 4rem);
  }

  .round-sub {
    max-width: 42ch;
    margin-inline: auto;
    margin-bottom: 1.75rem;
  }

  .round-actions {
    justify-content: center;
  }

  .round-visual {
    order: -1;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .round-visual::before {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 54%,
      rgba(0, 0, 0, 0.1) 62%,
      rgba(0, 0, 0, 0.3) 72%,
      rgba(0, 0, 0, 0.6) 82%,
      rgba(0, 0, 0, 0.88) 92%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 54%,
      rgba(0, 0, 0, 0.1) 62%,
      rgba(0, 0, 0, 0.3) 72%,
      rgba(0, 0, 0, 0.6) 82%,
      rgba(0, 0, 0, 0.88) 92%,
      #000 100%
    );
  }
}

@media (max-width: 480px) {
  .round-headline {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }

  .round-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}