/* Formação de Registros Akáshicos 2026 — refinamento visual isolado. */

.formacao-page {
  background-image:
    radial-gradient(48rem 38rem at -8% 24%, oklch(0.83 0.14 86 / 0.035), transparent 72%),
    radial-gradient(42rem 34rem at 108% 48%, oklch(0.83 0.14 86 / 0.045), transparent 72%),
    linear-gradient(180deg, oklch(0.085 0.042 300), oklch(0.065 0.032 302));
}

/* A referência original usa dourado como único destaque tipográfico. */
.formacao-page .text-magenta-gradient {
  background: linear-gradient(100deg, var(--gold), var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.formacao-page .text-magenta {
  color: var(--gold) !important;
}

.formacao-page [class*="border-magenta"] {
  border-color: oklch(0.83 0.14 86 / 0.34) !important;
}

.formacao-page [class*="bg-magenta"] {
  background-color: oklch(0.83 0.14 86 / 0.075) !important;
}

.formacao-page > section:not(:first-of-type) {
  position: relative;
  isolation: isolate;
}

.formacao-page > section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  left: -10rem;
  width: 25rem;
  height: 25rem;
  border-radius: 9999px;
  background: radial-gradient(circle, oklch(0.83 0.14 86 / 0.045), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.formacao-page > section:nth-of-type(3n)::before {
  left: auto;
  right: -11rem;
}

.formacao-page > section:first-of-type {
  overflow: hidden;
  background-color: oklch(0.075 0.04 300);
  background-image:
    linear-gradient(90deg, oklch(0.055 0.025 300 / 0.58) 0%, oklch(0.07 0.035 302 / 0.22) 48%, oklch(0.055 0.025 300 / 0.34) 100%),
    linear-gradient(180deg, transparent 52%, oklch(0.055 0.025 300 / 0.97) 100%),
    url("https://akashic-soul-flow.lovable.app/formacao/hero-background-desktop.webp");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  box-shadow: inset 0 -1px 0 oklch(0.83 0.14 86 / 0.2);
}

.formacao-page > section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 16%, oklch(0.95 0.09 100 / 0.015) 33%, oklch(0.83 0.14 86 / 0.075) 43%, transparent 58%);
  transform: translate3d(-75%, 0, 0);
  animation: formacao-hero-light-sweep 12s ease-in-out infinite;
  will-change: transform;
}

.formacao-page > section:first-of-type img[alt^="Michelle Gil, mentora"] {
  animation: formacao-portrait-breathe 7s ease-in-out infinite;
  transform-origin: 50% 70%;
}

.formacao-page > section:first-of-type span:first-child {
  box-shadow:
    inset 0 1px 0 oklch(0.95 0.09 100 / 0.12),
    0 8px 28px -16px oklch(0.83 0.14 86 / 0.7);
}

.formacao-page .surface-card {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(160deg, oklch(0.22 0.055 72 / 0.76), oklch(0.105 0.04 300 / 0.94)) !important;
  border-color: oklch(0.83 0.14 86 / 0.34) !important;
  box-shadow:
    0 20px 50px -30px oklch(0.83 0.14 86 / 0.24),
    inset 0 1px 0 oklch(0.95 0.09 100 / 0.07) !important;
}

.formacao-page .surface-card::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -28%;
  width: 17%;
  transform: translate3d(-220%, 0, 0) rotate(13deg);
  background: linear-gradient(90deg, transparent, oklch(0.95 0.09 100 / 0.09), transparent);
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.formacao-page .surface-card:hover::after {
  transform: translate3d(760%, 0, 0) rotate(13deg);
}

.formacao-page .halo::before {
  background: radial-gradient(closest-side, oklch(0.83 0.14 86 / 0.18), transparent 70%) !important;
}

.formacao-page .cta-gold {
  isolation: isolate;
  animation: formacao-cta-breathe 3.25s ease-in-out infinite;
  box-shadow:
    0 18px 45px -18px oklch(0.83 0.14 86 / 0.55),
    0 0 0 1px oklch(0.95 0.09 100 / 0.09);
}

.formacao-page .cta-gold::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.42),
    inset 0 -7px 18px oklch(0.62 0.12 70 / 0.09);
}

.formacao-page .cta-gold:hover {
  box-shadow:
    0 22px 52px -17px oklch(0.83 0.14 86 / 0.72),
    0 0 32px -5px oklch(0.95 0.09 100 / 0.48),
    0 0 0 1px oklch(0.95 0.09 100 / 0.16);
}

.formacao-page .divider-gold {
  position: relative;
  overflow: visible;
}

.formacao-page .divider-gold::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gold-light);
  box-shadow: 0 0 14px 4px oklch(0.83 0.14 86 / 0.52);
  transform: translate3d(-10px, -50%, 0);
  animation: formacao-divider-spark 8s ease-in-out infinite;
}

/* Robustez global dentro da página: nenhum bloco pode forçar largura maior que o viewport. */
.formacao-page,
.formacao-page section,
.formacao-page section > div,
.formacao-page img,
.formacao-page video,
.formacao-page iframe {
  max-width: 100%;
}

.formacao-page img {
  height: auto;
}

.formacao-page h1,
.formacao-page h2,
.formacao-page h3,
.formacao-page p,
.formacao-page li {
  overflow-wrap: normal;
  word-break: normal;
}

/* Desktop: ocupar melhor a primeira dobra e permitir leve sobreposição texto/foto. */
@media (min-width: 1024px) {
  .formacao-page > section:first-of-type {
    min-height: min(900px, 94svh);
    display: flex;
    align-items: center;
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .formacao-page > section:first-of-type > div:last-child {
    width: 100%;
    max-width: 86rem !important;
    grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    position: relative;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child {
    position: relative;
    z-index: 10;
    width: 114%;
    max-width: none;
    padding-right: 0;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > h1 {
    width: 100%;
    max-width: 50rem;
    font-size: clamp(3rem, 4.15vw, 4.6rem) !important;
    line-height: 1.03 !important;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > p:first-of-type {
    max-width: 38rem;
    font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
    line-height: 1.58 !important;
    margin-top: 0.9rem;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:last-child {
    margin-top: 1.35rem !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:last-child {
    position: relative;
    z-index: 4;
    width: 126%;
    max-width: none;
    margin-left: -16%;
    transform: translateX(2%);
  }

  .formacao-page > section:first-of-type > div:last-child > div:last-child > div {
    width: 100%;
    max-width: 46rem !important;
    margin-left: auto;
    margin-right: -4rem;
  }
}

@media (max-width: 767px) {
  .formacao-page {
    overflow-x: clip;
    background-image: linear-gradient(180deg, oklch(0.085 0.042 300), oklch(0.065 0.032 302));
  }

  .formacao-page > section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .formacao-page > section:not(:first-of-type) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .formacao-page > section:first-of-type {
    padding: 0.25rem 1rem 3.25rem !important;
    background-image:
      linear-gradient(180deg, oklch(0.055 0.025 300 / 0.18) 0%, oklch(0.06 0.03 300 / 0.46) 48%, oklch(0.055 0.025 300 / 0.98) 100%),
      radial-gradient(24rem 16rem at 75% 18%, oklch(0.83 0.14 86 / 0.10), transparent 72%),
      url("https://akashic-soul-flow.lovable.app/formacao/hero-background-mobile.webp");
    background-size: cover;
    background-position: center top;
  }

  .formacao-page > section:first-of-type > div:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 36rem !important;
    margin: 0 auto !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* No mobile, Michelle abre a página. */
  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:first-of-type {
    order: -4;
    width: 100% !important;
    max-width: 25rem !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 2;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:first-of-type > div {
    width: 100% !important;
    max-width: 25rem !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Selo levemente sobreposto ao rodapé da foto. */
  .formacao-page > section:first-of-type > div:last-child > div:first-child > span:first-child {
    order: -3;
    position: relative;
    z-index: 8;
    margin: -2.65rem auto 1.05rem !important;
    padding: 0.55rem 0.9rem !important;
    max-width: calc(100% - 1rem);
    white-space: normal;
    line-height: 1.35;
    letter-spacing: 0.12em !important;
    border-color: oklch(0.83 0.14 86 / 0.58) !important;
    background: oklch(0.075 0.045 300 / 0.86) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
      inset 0 1px 0 oklch(0.95 0.09 100 / 0.12),
      0 10px 26px -14px oklch(0.83 0.14 86 / 0.72) !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > h1 {
    order: -2;
    width: 100%;
    max-width: 22.5rem;
    margin: 0 auto !important;
    padding: 0;
    font-size: clamp(1.58rem, 7.25vw, 2.05rem) !important;
    line-height: 1.17 !important;
    text-wrap: balance;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > p:first-of-type {
    order: -1;
    width: 100%;
    max-width: 30rem;
    margin: 1.15rem auto 0 !important;
    padding: 0 0.25rem;
    font-size: 0.95rem !important;
    line-height: 1.62 !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:last-child {
    order: 0;
    width: 100%;
    margin-top: 1.35rem !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Centralização consistente de todos os CTAs no mobile. */
  .formacao-page .cta-gold,
  .formacao-page a[href*="api.whatsapp.com"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .formacao-page .cta-gold {
    width: min(100%, 22rem) !important;
    max-width: 22rem;
    min-height: 54px;
    padding: 0.85rem 1.05rem !important;
    white-space: normal !important;
    line-height: 1.25;
    font-size: 0.76rem;
    text-align: center;
  }

  .formacao-page h2,
  .formacao-page h3 {
    max-width: 100%;
    font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
    line-height: 1.28 !important;
    text-wrap: balance;
  }

  .formacao-page .surface-card {
    width: 100%;
    min-width: 0;
    border-radius: 1rem !important;
  }

  .formacao-page .surface-card p,
  .formacao-page .surface-card li {
    line-height: 1.55;
  }

  .formacao-page ul,
  .formacao-page ol {
    min-width: 0;
    max-width: 100%;
  }

  .formacao-page footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 390px) {
  .formacao-page > section {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .formacao-page > section:first-of-type {
    padding-top: 0 !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > h1 {
    max-width: 20.5rem;
    font-size: clamp(1.45rem, 7vw, 1.82rem) !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:first-of-type,
  .formacao-page > section:first-of-type > div:last-child > div:first-child > div:first-of-type > div {
    max-width: 22rem !important;
  }

  .formacao-page > section:first-of-type > div:last-child > div:first-child > span:first-child {
    margin-top: -2.35rem !important;
    padding-inline: 0.78rem !important;
    letter-spacing: 0.105em !important;
    font-size: 0.62rem !important;
  }

  .formacao-page .cta-gold {
    width: min(100%, 20.5rem) !important;
    max-width: 20.5rem;
    font-size: 0.72rem;
  }
}

@keyframes formacao-hero-light-sweep {
  0%, 68%, 100% { transform: translate3d(-75%, 0, 0); opacity: 0.18; }
  82% { transform: translate3d(62%, 0, 0); opacity: 0.72; }
}

@keyframes formacao-portrait-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -5px, 0) scale(1.008); }
}

@keyframes formacao-cta-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 oklch(0.83 0.14 86 / 0)); }
  50% { filter: drop-shadow(0 0 12px oklch(0.83 0.14 86 / 0.42)); }
}

@keyframes formacao-divider-spark {
  0%, 12% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  78% { opacity: 1; }
  88%, 100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .formacao-page > section:first-of-type::after,
  .formacao-page > section:first-of-type img[alt^="Michelle Gil, mentora"],
  .formacao-page .cta-gold,
  .formacao-page .divider-gold::after {
    animation: none !important;
  }
}