/* O fundo exposto pelos cantos arredondados acompanha a seção de planos. */
body { background-color: #000; }
#localizacao .contato-card { background: #000; }

/* Formas de canto inspiradas nas referências. Cores de fundo originais. */
#planos, #espaco, #localizacao, #footer {
  --decor-rgb: 255, 255, 255;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#planos, #footer { --decor-rgb: 229, 35, 49; }
#planos, #faq, #footer { background: #000; }
#espaco, #localizacao { background: #0a0a0a; }
#planos > .container, #espaco > .container,
#localizacao > .container, #footer > .container {
  position: relative;
  z-index: 3;
}
/* Camadas locais, sem grades, pontos ou textura sobre a seção inteira. */
#planos::before, #espaco::before, #localizacao::before, #footer::before,
#planos::after, #espaco::after, #localizacao::after, #footer::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  inset: auto;
  transform: none;
  opacity: 1;
  background: none;
  border: 1px solid rgba(var(--decor-rgb), .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 36px rgba(var(--decor-rgb), .035),
    0 0 0 76px rgba(var(--decor-rgb), .016);
  pointer-events: none;
  z-index: 0;
}
/* Círculo amplo no alto, como na terceira referência. */
#planos::after { top: 130px; right: -320px; }
#planos::before {
  width: 160px;
  height: 160px;
  top: 48%;
  left: -115px;
  opacity: .45;
}
/* Forma arredondada inclinada, como nos cantos da segunda e quarta. */
#espaco::before {
  width: 250px;
  height: 250px;
  top: 160px;
  left: -200px;
  border-radius: 54px;
  transform: rotate(-28deg);
}
#espaco::after {
  width: 180px;
  height: 180px;
  bottom: 125px;
  right: -125px;
  opacity: .65;
}
#localizacao::after {
  width: 290px;
  height: 290px;
  top: 190px;
  right: -235px;
  border-radius: 64px;
  transform: rotate(26deg);
}
#localizacao::before {
  width: 330px;
  height: 330px;
  top: 110px;
  left: -285px;
  opacity: .5;
}
#footer::before {
  width: 210px;
  height: 210px;
  top: 38%;
  left: -205px;
  border-radius: 45px;
  transform: rotate(-28deg);
  opacity: .7;
}
#footer::after {
  width: 300px;
  height: 300px;
  top: 130px;
  right: -245px;
}

/* Linha divisória original, agora presa à parte inferior do banner. */
#banner {
  isolation: isolate;
  border-radius: 0 0 40px 40px;
}

/* Acabamento dos planos: mantém as artes e seus preços intactos. */
#planos .plano-card-simplificado,
#planos .plano-mobile-card-simplificado {
  border: 1px solid rgba(229, 35, 49, .40);
  background: #000;
  transition: border-color .2s ease, box-shadow .2s ease, translate .2s ease;
}
/* Decoração atrás dos PNGs: substitui o brilho central por arcos de canto. */
#planos .plano-card-simplificado::before,
#planos .plano-mobile-card-simplificado::before,
#planos .plano-card-simplificado::after,
#planos .plano-mobile-card-simplificado::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 180px;
  height: 180px;
  transform: none;
  border: 1px solid rgba(229, 35, 49, .16);
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 18px rgba(229, 35, 49, .025),
    0 0 0 19px rgba(229, 35, 49, .08),
    0 0 0 38px rgba(229, 35, 49, .015);
  pointer-events: none;
  z-index: 0;
}
#planos .plano-card-simplificado::before,
#planos .plano-mobile-card-simplificado::before {
  top: -115px;
  left: -110px;
}
#planos .plano-card-simplificado::after,
#planos .plano-mobile-card-simplificado::after {
  width: 140px;
  height: 140px;
  right: -105px;
  bottom: 72px;
  opacity: .65;
}
#planos .plano-card-simplificado.plano-destaque::before,
#planos .plano-mobile-card-simplificado.plano-destaque::before {
  top: -115px;
  left: auto;
  right: -110px;
}
#planos .plano-card-simplificado.plano-destaque,
#planos .plano-mobile-card-simplificado.plano-destaque {
  border-color: #ff233b;
  box-shadow: 0 0 0 1px rgba(255, 35, 59, .24),
    0 0 10px rgba(229, 9, 20, .18);
}
#planos .btn-selecionar-plano,
#planos .btn-selecionar-plano-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  background: linear-gradient(115deg, #f50925, #d90820);
  border-top: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: filter .2s ease;
}
/* Seta decorativa em CSS, sem alterar o texto acessível do botão. */
#planos .btn-selecionar-plano::after,
#planos .btn-selecionar-plano-mobile::after {
  content: "";
  width: 15px;
  height: 12px;
  flex: 0 0 15px;
  background: currentColor;
  clip-path: polygon(0 42%, 73% 42%, 44% 12%, 55% 0,
    100% 50%, 55% 100%, 44% 88%, 73% 58%, 0 58%);
}
#planos .btn-selecionar-plano::before,
#planos .btn-selecionar-plano-mobile::before,
#planos .tarja-destaque::before,
#planos .tarja-destaque-mobile::before {
  content: none;
}
#planos .tarja-destaque,
#planos .tarja-destaque-mobile {
  top: 12px;
  right: -30px;
  padding: 5px 30px;
  font-size: .6rem;
  letter-spacing: .7px;
  background: linear-gradient(135deg, #ed1530, #bb0c22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
#planos .btn-selecionar-plano:focus-visible,
#planos .btn-selecionar-plano-mobile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}
@media (hover: hover) and (pointer: fine) {
  #planos .plano-card-simplificado:hover,
  #planos .plano-mobile-card-simplificado:hover {
    translate: 0 -4px;
    border-color: #ff233b;
    box-shadow: 0 0 10px rgba(229, 9, 20, .2);
  }
  #planos .btn-selecionar-plano:hover,
  #planos .btn-selecionar-plano-mobile:hover {
    filter: brightness(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #planos .plano-card-simplificado,
  #planos .plano-mobile-card-simplificado {
    animation: none;
    transition: none;
    translate: none;
  }
  #planos .plano-card-simplificado:hover,
  #planos .plano-mobile-card-simplificado:hover { translate: none; }
}
#banner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%,
    rgba(229, 9, 20, .3) 10%, #ff000a 30%, #ff000a 70%,
    rgba(229, 9, 20, .3) 90%, transparent 100%);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  opacity: .8;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 768px) {
  #planos::before, #espaco::before, #localizacao::before, #footer::before {
    display: none;
  }
  #planos::after, #espaco::after, #localizacao::after, #footer::after {
    width: 260px;
    height: 260px;
    opacity: .65;
    box-shadow: 0 0 0 24px rgba(var(--decor-rgb), .035),
      0 0 0 50px rgba(var(--decor-rgb), .016);
  }
  #planos::after { top: 210px; right: -220px; }
  #espaco::after { bottom: auto; top: 170px; right: auto; left: -225px; }
  #localizacao::after { top: 290px; right: -225px; }
  #footer::after { top: 42%; right: -220px; }
  #banner { border-radius: 0 0 24px 24px; }
}