/* Dois detalhes suaves por seção, sem substituir as cores de fundo. */
:is(
  main > .sobre-section,
  main > .planos-section,
  main > .servicos-section,
  main > .barbeiros-section,
  main > .clientes-section,
  main > .avaliacoes-section,
  main > .precos-section,
  main > .planos-duvidas-section,
  main > .localizacao-section,
  .footer-studio
) {
  background-image: var(--decor-icone), var(--decor-forma), var(--decor-luz);
  background-position: var(--decor-icone-pos), var(--decor-forma-pos), center;
  background-size: var(--decor-icone-size) auto, var(--decor-forma-size) auto, 100% 100%;
  background-repeat: no-repeat;
}

/* Alternância contínua: preto puro e um preto quente, sem seções cinzas. */
:root {
  --fundo-secao-preto: #000;
  --fundo-secao-escuro: #0c0b0a;
}

:is(
  main > .sobre-section,
  main > .servicos-section,
  main > .clientes-section,
  main > .precos-section,
  main > .localizacao-section
) {
  background-color: var(--fundo-secao-preto);
}

:is(
  main > .planos-section,
  main > .barbeiros-section,
  main > .avaliacoes-section,
  main > .planos-duvidas-section,
  .footer-studio
) {
  background-color: var(--fundo-secao-escuro);
}

main > .sobre-section {
  --decor-icone: url("./galeria/decoracao/poste.svg");
  --decor-forma: url("./galeria/decoracao/aros.svg");
  --decor-luz: radial-gradient(ellipse 38% 42% at 100% 100%, rgba(255,255,255,.026), transparent 78%);
  --decor-icone-pos: left -52px top 42px;
  --decor-forma-pos: right -125px bottom -135px;
  --decor-icone-size: 250px;
  --decor-forma-size: 400px;
}

main > .planos-section {
  --decor-icone: url("./galeria/decoracao/tesoura.svg");
  --decor-forma: url("./galeria/decoracao/curvas.svg");
  --decor-luz: radial-gradient(ellipse 40% 32% at 100% 88%, rgba(255,255,255,.026), transparent 76%);
  --decor-icone-pos: right -90px bottom 55px;
  --decor-forma-pos: left -105px top -90px;
  --decor-icone-size: 310px;
  --decor-forma-size: 390px;
}

main > .servicos-section {
  --decor-icone: url("./galeria/decoracao/navalha.svg");
  --decor-forma: url("./galeria/decoracao/aros.svg");
  --decor-luz: radial-gradient(ellipse 38% 40% at 95% 100%, rgba(255,255,255,.03), transparent 76%);
  --decor-icone-pos: left -88px top 24px;
  --decor-forma-pos: right -122px bottom -135px;
  --decor-icone-size: 315px;
  --decor-forma-size: 385px;
}

main > .barbeiros-section {
  --decor-icone: url("./galeria/decoracao/pente.svg");
  --decor-forma: url("./galeria/decoracao/curvas.svg");
  --decor-luz: radial-gradient(ellipse 40% 35% at 98% 86%, rgba(255,255,255,.025), transparent 75%);
  --decor-icone-pos: right -76px bottom 42px;
  --decor-forma-pos: left -105px top -100px;
  --decor-icone-size: 300px;
  --decor-forma-size: 390px;
}

main > .clientes-section {
  --decor-icone: url("./galeria/decoracao/tesoura.svg");
  --decor-forma: url("./galeria/decoracao/aros.svg");
  --decor-luz: radial-gradient(ellipse 34% 36% at 100% 100%, rgba(255,255,255,.027), transparent 77%);
  --decor-icone-pos: left -82px top 32px;
  --decor-forma-pos: right -118px bottom -142px;
  --decor-icone-size: 290px;
  --decor-forma-size: 390px;
  background-image:
    url("./galeria/decoracao/tesoura.svg"),
    url("./galeria/decoracao/poste.svg"),
    url("./galeria/decoracao/curvas.svg"),
    radial-gradient(ellipse 45% 25% at 50% 48%, rgba(202, 150, 39, .095), transparent 78%),
    radial-gradient(ellipse 38% 30% at 3% 65%, rgba(255, 255, 255, .035), transparent 78%),
    radial-gradient(ellipse 38% 30% at 97% 28%, rgba(255, 255, 255, .035), transparent 78%);
  background-position: left -65px top 13%, right -65px top 69%, center 46%, center, center, center;
  background-size: 250px auto, 230px auto, min(78vw, 880px) auto, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

main > .avaliacoes-section {
  --decor-icone: url("./galeria/decoracao/curvas.svg");
  --decor-forma: url("./galeria/decoracao/tesoura.svg");
  --decor-luz: radial-gradient(ellipse 40% 35% at 0 95%, rgba(255,255,255,.025), transparent 75%);
  --decor-icone-pos: right -110px top -90px;
  --decor-forma-pos: left -85px bottom 25px;
  --decor-icone-size: 370px;
  --decor-forma-size: 280px;
}

main > .precos-section {
  --decor-icone: url("./galeria/decoracao/poste.svg");
  --decor-forma: url("./galeria/decoracao/curvas.svg");
  --decor-luz: radial-gradient(ellipse 39% 38% at 100% 90%, rgba(255,255,255,.027), transparent 76%);
  --decor-icone-pos: right -58px bottom 48px;
  --decor-forma-pos: left -102px top -90px;
  --decor-icone-size: 245px;
  --decor-forma-size: 385px;
}

main > .planos-duvidas-section {
  --decor-icone: url("./galeria/decoracao/navalha.svg");
  --decor-forma: url("./galeria/decoracao/aros.svg");
  --decor-luz: radial-gradient(ellipse 38% 40% at 100% 100%, rgba(255,255,255,.025), transparent 76%);
  --decor-icone-pos: left -88px top 32px;
  --decor-forma-pos: right -125px bottom -145px;
  --decor-icone-size: 300px;
  --decor-forma-size: 390px;
}

main > .localizacao-section {
  --decor-icone: url("./galeria/decoracao/pente.svg");
  --decor-forma: url("./galeria/decoracao/curvas.svg");
  --decor-luz: radial-gradient(ellipse 40% 39% at 96% 88%, rgba(255,255,255,.027), transparent 76%);
  --decor-icone-pos: right -70px bottom 50px;
  --decor-forma-pos: left -105px top -90px;
  --decor-icone-size: 285px;
  --decor-forma-size: 390px;
}

.footer-studio {
  --decor-icone: url("./galeria/decoracao/tesoura.svg");
  --decor-forma: url("./galeria/decoracao/aros.svg");
  --decor-luz: radial-gradient(ellipse 34% 35% at 100% 100%, rgba(255,255,255,.022), transparent 78%);
  --decor-icone-pos: left -100px top 38px;
  --decor-forma-pos: right -125px bottom -145px;
  --decor-icone-size: 275px;
  --decor-forma-size: 390px;
}

@media (max-width: 768px) {
  :is(
    main > .sobre-section,
    main > .planos-section,
    main > .servicos-section,
    main > .barbeiros-section,
    main > .clientes-section,
    main > .avaliacoes-section,
    main > .precos-section,
    main > .planos-duvidas-section,
    main > .localizacao-section,
    .footer-studio
  ) {
    --decor-icone-size: 170px;
    --decor-forma-size: 230px;
  }

  main > .sobre-section {
    --decor-icone-pos: left -70px top 78px;
    --decor-forma-pos: right -90px bottom -88px;
  }
  main > .planos-section {
    --decor-icone-pos: right -72px bottom 60px;
    --decor-forma-pos: left -84px top -70px;
  }
  main > .servicos-section {
    --decor-icone-pos: left -76px top 74px;
    --decor-forma-pos: right -90px bottom -90px;
  }
  main > .barbeiros-section {
    --decor-icone-pos: right -72px bottom 70px;
    --decor-forma-pos: left -84px top -72px;
  }
  main > .clientes-section {
    --decor-icone-pos: left -75px top 70px;
    --decor-forma-pos: right -90px bottom -92px;
    background-position: left -75px top 15%, right -80px top 75%, center 50%, center, center, center;
    background-size: 165px auto, 150px auto, 85vw auto, 100% 100%, 100% 100%, 100% 100%;
  }
  main > .avaliacoes-section {
    --decor-icone-pos: right -80px top -66px;
    --decor-forma-pos: left -70px bottom 36px;
  }
  main > .precos-section {
    --decor-icone-pos: right -70px bottom 60px;
    --decor-forma-pos: left -85px top -74px;
  }
  main > .planos-duvidas-section {
    --decor-icone-pos: left -78px top 64px;
    --decor-forma-pos: right -88px bottom -88px;
  }
  main > .localizacao-section {
    --decor-icone-pos: right -72px bottom 70px;
    --decor-forma-pos: left -84px top -70px;
  }
  .footer-studio {
    --decor-icone-pos: left -80px top 60px;
    --decor-forma-pos: right -90px bottom -90px;
  }
}