/* ============================================================
   STANDWAY — Centro Educacional Visão
   Overrides exclusivos do cliente. Carrega DEPOIS de standway.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Paleta do cliente — laranja vibrante / âmbar
   ------------------------------------------------------------ */
:root {
  --gold: #FF4D00;                          /* destaque principal do cliente */
  --gold-soft: rgba(255, 77, 0, 0.55);
  /* degradê reservado para destaques pontuais */
  --riviera-grad: linear-gradient(135deg, #FF4D00 0%, #EA9E1A 100%);
}

/* Aurora dourada de fundo: recolore para a paleta laranja */
.aurora::before {
  background: radial-gradient(circle, rgba(255, 77, 0, 0.22), transparent 65%);
}
.aurora::after {
  background: radial-gradient(circle, rgba(234, 158, 26, 0.16), transparent 65%);
}
.hero__glow {
  background: radial-gradient(circle, rgba(255, 77, 0, 0.18) 0%, transparent 60%);
}
.hero__logo {
  /* logo deste cliente tem proporção mais quadrada (~4:3) — reduzimos
     a largura máxima para que a altura não fique excessiva */
  width: clamp(120px, 18vw, 200px);
  filter: drop-shadow(0 4px 24px rgba(255, 77, 0, 0.22));
}

/* ------------------------------------------------------------
   2. Centralização global de títulos e textos
   ------------------------------------------------------------ */

.section__title,
.section__title--wide {
  text-align: center;
  max-width: 100%;
  margin-inline: auto;
}
.section__lead,
.section__text {
  text-align: center;
  margin-inline: auto;
  max-width: var(--maxw-text);
}

.bullets {
  margin-inline: auto;
  justify-items: center;
  max-width: 760px;
}

.timeline {
  max-width: 640px;
  margin-inline: auto;
}

.op-card {
  align-items: center;
  text-align: center;
}

.deliver-card { text-align: left; }

/* ------------------------------------------------------------
   3. Remover as accent-lines acima dos títulos
   ------------------------------------------------------------ */
.accent-line { display: none; }

.section__title { margin-top: var(--space-2); }

/* ------------------------------------------------------------
   4. Degradê em destaques pontuais
   ------------------------------------------------------------ */
.invest__price,
.closing__subtitle {
  background: var(--riviera-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ------------------------------------------------------------
   5. Botões — animação de borda (linha percorrendo o perímetro)
   ------------------------------------------------------------ */
.btn--primary {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 77, 0, 0.55);
}

.btn--primary::before,
.btn--primary::after {
  content: "";
  position: absolute;
  background: var(--riviera-grad);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.12s linear;
}
.btn--primary::before {
  top: 0; left: 0;
  height: 1px;
  width: 0;
}
.btn--primary::after {
  top: 0; right: 0;
  width: 1px;
  height: 0;
}

.btn--primary:hover::before,
.btn--primary:hover::after {
  opacity: 1;
  background: linear-gradient(90deg, #FFFFFF, #FFD9B5);
  box-shadow: 0 0 8px rgba(255, 217, 181, 0.55);
}

.btn--primary:hover::before {
  animation: btn-edge-h 1.4s linear infinite;
}
.btn--primary:hover::after {
  animation: btn-edge-v 1.4s linear infinite;
  animation-delay: 0.35s;
}

@keyframes btn-edge-h {
  0%   { left: 0;    width: 0;    top: 0;    right: auto; bottom: auto; }
  25%  { left: 0;    width: 100%; top: 0;    right: auto; bottom: auto; }
  50%  { left: 100%; width: 0;    top: 0;    right: auto; bottom: auto; }
  51%  { left: auto; right: 0;    width: 0;    top: auto; bottom: 0; }
  75%  { left: auto; right: 0;    width: 100%; top: auto; bottom: 0; }
  100% { left: auto; right: 100%; width: 0;    top: auto; bottom: 0; }
}
@keyframes btn-edge-v {
  0%   { top: 0;    height: 0;    right: 0;    left: auto; bottom: auto; }
  25%  { top: 0;    height: 100%; right: 0;    left: auto; bottom: auto; }
  50%  { top: 100%; height: 0;    right: 0;    left: auto; bottom: auto; }
  51%  { top: auto; bottom: 0;    height: 0;    left: 0; right: auto; }
  75%  { top: auto; bottom: 0;    height: 100%; left: 0; right: auto; }
  100% { top: auto; bottom: 100%; height: 0;    left: 0; right: auto; }
}

/* hover preenche o botão na cor do cliente */
.btn--primary:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover::before,
  .btn--primary:hover::after { animation: none; opacity: 0; }
}

/* ------------------------------------------------------------
   6. Centralização do eyebrow do Cronograma
   ------------------------------------------------------------ */
#cronograma > .container { text-align: center; }
#cronograma .schedule { text-align: left; }

/* ------------------------------------------------------------
   7. text-wrap balance/pretty — quebras de linha mais elegantes
   ------------------------------------------------------------ */
h1, h2, h3, h4,
.section__title, .section__title--wide,
.section__eyebrow,
.hero__title, .hero__subtitle, .hero__eyebrow,
.stepper__title, .stepper__eyebrow,
.schedule__title,
.invest__title, .closing__title, .closing__subtitle {
  text-wrap: balance;
}

p,
.section__lead, .section__text,
.stepper__desc, .invest__sub, .closing__text {
  text-wrap: pretty;
}