/* ============================================================
   Utilitários de estrutura e animação de entrada
   ============================================================ */

.secao{
  position:relative;
  padding:var(--respiro-secao) var(--respiro-lateral);
}

/* seção que vira um bloco colorido de cantos redondos */
.faixa{
  border-radius:var(--raio-g);
  margin:0 clamp(10px,2vw,22px);
  overflow:hidden;
}
.faixa-lilas{background:var(--papel-2)}

.limite{
  max-width:var(--largura-max);
  margin:0 auto;
}

/* cabeçalho centralizado de seção */
.topo-secao{
  text-align:center;
  margin-bottom:clamp(36px,5vw,60px);
}
.topo-secao h3{
  font-size:clamp(2.4rem,6vw,4.4rem);
  margin-top:18px;
}

/* bolinhas decorativas de fim de bloco */
.filete{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:44px auto 0;
}
.filete::before,
.filete::after{
  content:"";
  width:10px;height:10px;
  border-radius:50%;
  background:currentColor;
  opacity:.45;
}
.filete::after{opacity:.85}

/* --- revelação no scroll (classe .visivel vem do JS) --- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px) scale(.98);
  transition:opacity .8s var(--ease),transform .8s var(--ease-pulo);
}
[data-reveal].visivel{opacity:1;transform:none}
[data-reveal][data-atraso="1"]{transition-delay:.09s}
[data-reveal][data-atraso="2"]{transition-delay:.18s}
[data-reveal][data-atraso="3"]{transition-delay:.27s}

/* --- fallback de imagem que não carregou --- */
.falhou{background:linear-gradient(135deg,var(--uva-leve),var(--coral-leve) 55%,var(--sol-leve))}
.falhou img{opacity:0}