:root {
  --font-sans: "DM Sans";
  --font-serif: "Lora";
  --blue: #2abbff;
  --blue-deep: #087cb4;
  --blue-ink: #07577d;
  --pale: #eefaff;
  --white: #ffffff;
  --ink: #153746;
  --muted: #527080;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-sans), sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 84px; padding: 0 clamp(24px, 5vw, 82px); display: flex; align-items: center;
  justify-content: space-between; gap: 32px; background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(42,187,255,.18); position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--blue); font-family: var(--font-serif); font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: var(--font-serif); color: var(--blue-ink); font-size: 16px; }
.brand small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
nav { display: flex; gap: 32px; font-size: 14px; color: var(--muted); }
nav a { transition: color .2s; }
nav a:hover { color: var(--blue-deep); }
.header-cta, .primary-button, .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.header-cta { color: white; background: var(--blue-deep); padding: 13px 19px; border-radius: 999px; font-size: 13px; }
.header-cta:hover, .primary-button:hover, .cta-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8,124,180,.22); }
.arrow { font-size: 17px; line-height: 1; }

.patterned { position: relative; overflow: hidden; }
.patterned::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: radial-gradient(circle at center, currentColor 1px, transparent 1.4px); background-size: 28px 28px; mask-image: linear-gradient(90deg, black, transparent 34%, transparent 66%, black); }
main > section {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, .92);
}

.psychology-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--white);
  opacity: .15;
  pointer-events: none;
  overflow: hidden;
}
.psych-symbol { position: absolute; font-family: var(--font-serif), serif; line-height: 1; }
.psych-symbol-psi { font-size: clamp(120px, 18vw, 280px); right: -2%; top: 7%; }
.psych-symbol-mind { font-size: clamp(180px, 28vw, 430px); left: -8%; bottom: -20%; }
.psych-symbol-heart { font-size: clamp(90px, 13vw, 190px); right: 18%; bottom: 7%; }
.psych-symbol-growth { font-size: clamp(65px, 9vw, 130px); left: 44%; top: 10%; }
.psych-connection {
  position: absolute;
  width: min(48vw, 650px);
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 48% 52% 61% 39% / 40% 37% 63% 60%;
  right: -13%;
  bottom: -38%;
  transform: rotate(18deg);
}
.psych-connection::before,
.psych-connection::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed currentColor;
  border-radius: inherit;
  transform: rotate(24deg);
}
.psych-connection::after { inset: 31%; transform: rotate(-35deg); }
.psychology-overlay-how { transform: scaleX(-1); }
.psychology-overlay-benefits .psych-symbol-psi { top: 54%; right: 2%; }
.psychology-overlay-about .psych-symbol-heart { right: 4%; bottom: 12%; }
.psychology-overlay-cta .psych-symbol-mind { left: 50%; bottom: -34%; transform: translateX(-50%); }
.psychology-overlay-cta .psych-connection { right: 50%; bottom: -40%; transform: translateX(50%) rotate(18deg); }

main > section > :not(.psychology-overlay) { position: relative; z-index: 1; }
.hero { min-height: calc(100svh - 84px); background: linear-gradient(125deg, #f5fcff 0%, white 46%, #ddf5ff 100%); display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; padding: 30px clamp(24px, 7vw, 112px) 42px; color: var(--blue); }
.hero-copy { position: relative; z-index: 3; max-width: 700px; color: var(--ink); }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-deep); font-size: 12px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow::before, .section-kicker::before { content: ""; width: 30px; height: 2px; background: var(--blue); }
h1, h2 { font-family: var(--font-serif), serif; margin: 0; color: var(--blue-ink); line-height: 1.06; letter-spacing: -.035em; }
h1 { font-size: clamp(52px, 6.2vw, 94px); margin-top: 14px; max-width: 800px; }
h1 em, h2 em { color: var(--blue); font-weight: 500; }
.hero-copy > p { color: var(--muted); max-width: 590px; font-size: 18px; line-height: 1.65; margin: 20px 0 26px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.primary-button { background: var(--blue); color: white; border-radius: 999px; padding: 17px 25px; box-shadow: 0 12px 30px rgba(42,187,255,.23); }
.microcopy { color: #6c8793; font-family: var(--font-serif); font-style: italic; font-size: 14px; }
.hero-visual { min-height: min(510px, 65vh); position: relative; z-index: 2; }
.hero-orbit { position: absolute !important; z-index: 1; border-radius: 50%; border: 1px solid rgba(42,187,255,.22); }
.orbit-one { width: 520px; height: 520px; right: 4vw; top: 9%; }
.orbit-two { width: 340px; height: 340px; right: 10vw; top: 24%; border-style: dashed; }
.doodle-line { position: absolute; width: 100%; height: 100%; inset: 0; opacity: .45; }
.doodle-line path { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 8 12; }
.center-symbol { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.84); box-shadow: 0 25px 65px rgba(8,124,180,.14); border: 1px solid white; display: grid; place-items: center; align-content: center; backdrop-filter: blur(8px); }
.center-symbol span { font-size: 72px; color: var(--blue); line-height: 1; }
.center-symbol small { color: var(--blue-ink); font-family: var(--font-serif); font-style: italic; }
.conversation-card { position: absolute; background: rgba(255,255,255,.88); border: 1px solid rgba(42,187,255,.2); box-shadow: 0 17px 42px rgba(8,124,180,.13); padding: 12px 18px 12px 12px; border-radius: 18px; display: flex; align-items: center; gap: 10px; color: var(--blue-ink); font-size: 13px; font-weight: 700; backdrop-filter: blur(8px); }
.mini-face { background: var(--pale); color: var(--blue); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.card-a { left: 6%; top: 17%; transform: rotate(-5deg); }
.card-b { right: 0; top: 35%; transform: rotate(4deg); }
.card-c { left: 14%; bottom: 16%; transform: rotate(3deg); }
.scroll-note { position: absolute; left: clamp(24px, 7vw, 112px); bottom: 22px; display: flex; align-items: center; gap: 10px; color: #73909c; text-transform: uppercase; font-size: 9px; letter-spacing: .16em; }
.scroll-note span { width: 30px; height: 1px; background: var(--blue); }

.section { padding: 118px clamp(24px, 7vw, 112px); }
.section-heading { max-width: 760px; margin-bottom: 58px; }
.section-heading h2, .about-copy h2 { font-size: clamp(40px, 4.4vw, 67px); margin-top: 17px; }
.section-heading > p { color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 650px; }
.how { background: white; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1220px; margin: auto; }
.step-card { min-height: 345px; padding: 30px; border: 1px solid #d6eff9; border-radius: 28px; position: relative; background: linear-gradient(155deg, white, #f4fbfe); transition: transform .25s, box-shadow .25s; }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(8,124,180,.11); }
.step-number { position: absolute; right: 26px; top: 22px; color: #b7e9fb; font-family: var(--font-serif); font-size: 36px; }
.line-icon { width: 70px; height: 70px; border: 1px solid #bfe8f8; border-radius: 50%; display: grid; place-items: center; margin: 26px 0 32px; }
.line-icon span { width: 28px; height: 22px; border: 2px solid var(--blue); border-radius: 50%; position: relative; }
.line-icon span::after { content: ""; width: 12px; height: 2px; background: var(--blue); position: absolute; right: -8px; bottom: 0; transform: rotate(45deg); }
.step-card h3, .benefit-card h3 { color: var(--blue-ink); font-family: var(--font-serif); margin: 0 0 12px; font-size: 24px; }
.step-card p, .benefit-card p { color: var(--muted); line-height: 1.7; font-size: 14px; margin: 0; }
.support-note { text-align: center; color: var(--muted); margin: 38px auto 0; font-size: 13px; }
.support-note span { color: var(--blue); margin-right: 6px; }

.benefits { background: var(--blue-ink); color: white; }
.benefits::after { content: "♡    ◌    △    ◎    ◇"; position: absolute; font-family: var(--font-serif); font-size: 64px; letter-spacing: .7em; opacity: .12; right: -80px; top: 40px; transform: rotate(-8deg); }
.section-heading.light { position: relative; z-index: 2; }
.light h2 { color: white; }
.light .section-kicker { color: #9ce2ff; }
.benefits-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.benefit-card { display: flex; gap: 20px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 25px; backdrop-filter: blur(5px); }
.benefit-symbol { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(42,187,255,.17); color: #88dcff; font-size: 25px; }
.benefit-card h3 { color: white; font-size: 20px; }
.benefit-card p { color: #c5deea; }
.ethical-note { position: relative; z-index: 2; color: #9cc4d7; text-align: center; margin: 34px 0 0; font-size: 12px; }

.about { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: clamp(48px, 8vw, 120px); background: #f7fcff; }
.about-photo-wrap { position: relative; max-width: 540px; margin: auto; }
.about-photo { display: block; width: 100%; height: auto; max-height: 760px; object-fit: cover; object-position: center top; border-radius: 190px 190px 30px 30px; position: relative; z-index: 2; box-shadow: 0 30px 70px rgba(21,55,70,.18); }
.photo-accent { position: absolute; width: 92%; height: 100%; border: 2px solid var(--blue); border-radius: 190px 190px 30px 30px; left: -22px; top: 22px; z-index: 1; opacity: .45; }
.credential-badge { position: absolute; z-index: 4; right: -28px; bottom: 45px; width: 112px; height: 112px; background: var(--blue); color: white; border-radius: 50%; display: grid; place-items: center; align-content: center; box-shadow: 0 14px 35px rgba(42,187,255,.35); border: 6px solid #f7fcff; }
.credential-badge strong { font-family: var(--font-serif); font-size: 23px; }
.credential-badge span { font-size: 11px; }
.about-copy { max-width: 750px; }
.about-text { margin-top: 30px; border-left: 2px solid #ccefff; padding-left: 25px; }
.about-text p { color: var(--muted); line-height: 1.78; font-size: 14px; margin: 0 0 15px; }
.credentials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.credentials span { border: 1px solid #c4e9f8; color: var(--blue-deep); background: white; padding: 8px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }

.final-cta { min-height: 660px; background: linear-gradient(135deg, #e9f9ff, white); display: grid; place-items: center; text-align: center; color: var(--blue); }
.cta-content { position: relative; z-index: 3; max-width: 860px; }
.cta-content h2 { font-size: clamp(48px, 6vw, 84px); margin: 18px 0 26px; }
.cta-content p { color: var(--muted); max-width: 670px; margin: 0 auto 32px; line-height: 1.75; font-size: 17px; }
.cta-button { background: var(--blue-deep); color: white; padding: 20px 30px; border-radius: 999px; font-size: 16px; box-shadow: 0 16px 35px rgba(8,124,180,.23); }
.cta-content small { display: block; color: #718c98; margin-top: 17px; }
.cta-rings { position: absolute !important; z-index: 1; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(42,187,255,.24); }
.cta-rings::before, .cta-rings::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(42,187,255,.2); inset: 55px; }
.cta-rings::after { inset: 115px; border-style: solid; }
footer { background: var(--blue-ink); color: #b8d3df; min-height: 125px; padding: 30px clamp(24px, 7vw, 112px); display: flex; align-items: center; justify-content: space-between; gap: 30px; font-size: 12px; }
.footer-brand strong { color: white; }
.footer-brand small { color: #aac8d5; }

@media (max-width: 980px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 42px; }
  .hero-visual { min-height: 500px; max-width: 650px; width: 100%; margin: auto; }
  .steps-grid, .benefits-grid { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; }
  .about-photo-wrap { max-width: 470px; }
}

@media (max-width: 640px) {
  .site-header { height: 72px; padding: 0 18px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 8px; }
  .header-cta { padding: 11px 14px; font-size: 0; }
  .header-cta::before { content: "Participar"; font-size: 12px; }
  .header-cta .arrow { font-size: 15px; }
  .hero { min-height: auto; padding: 24px 20px 36px; }
  h1 { font-size: clamp(42px, 13vw, 58px); margin-top: 10px; line-height: 1.02; }
  .hero-copy > p { font-size: 15px; line-height: 1.6; margin: 16px 0 20px; }
  .hero-actions { gap: 13px; }
  .primary-button { width: 100%; padding: 15px 20px; }
  .microcopy { width: 100%; text-align: center; font-size: 13px; }
  .hero-visual { min-height: 300px; margin-top: 8px; }
  .center-symbol { width: 160px; height: 160px; }
  .center-symbol span { font-size: 55px; }
  .conversation-card { padding: 8px 11px 8px 8px; font-size: 11px; }
  .mini-face { width: 31px; height: 31px; }
  .card-a { left: 0; top: 11%; }
  .card-b { right: 0; top: 36%; }
  .card-c { left: 3%; bottom: 10%; }
  .scroll-note { display: none; }
  .section { padding: 84px 22px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .about-copy h2 { font-size: 43px; }
  .steps-grid, .benefits-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 315px; }
  .benefit-card { padding: 22px 18px; }
  .about-photo-wrap { margin: 0 15px; }
  .credential-badge { right: -18px; width: 94px; height: 94px; }
  .about-text { padding-left: 17px; }
  .cta-rings { width: 410px; height: 410px; }
  .cta-content h2 { font-size: 51px; }
  footer { flex-direction: column; text-align: center; padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Movimentos leves: dão vida ao primeiro contato sem disputar atenção com o pitch. */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes soft-float-a {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-9px) rotate(-3deg); }
}

@keyframes soft-float-b {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50% { transform: translateY(8px) rotate(2deg); }
}

@keyframes soft-float-c {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-7px) rotate(5deg); }
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes orbit-drift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.02); }
}

.hero-copy > * { opacity: 0; animation: reveal-up .7s ease-out forwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.card-a { animation: soft-float-a 6s ease-in-out infinite; }
.card-b { animation: soft-float-b 7s ease-in-out infinite; }
.card-c { animation: soft-float-c 6.5s ease-in-out infinite; }
.center-symbol { animation: breathe 6s ease-in-out infinite; }
.hero-orbit { animation: orbit-drift 12s ease-in-out infinite; transform-origin: center; }
.orbit-two { animation-delay: -4s; animation-direction: reverse; }

/* Identidade visual: cinza-claro com detalhes no azul definido pela cliente. */
:root {
  --blue: #88a9c3;
  --blue-deep: #6f92ad;
  --blue-ink: #49677d;
  --pale: #edf1f4;
  --surface: #f1f2f3;
  --surface-soft: #e9ecef;
  --ink: #33434e;
  --muted: #5f707b;
}

body,
.hero,
.how,
.benefits,
.about,
.final-cta { background: var(--surface); color: var(--ink); }

.site-header {
  background: rgba(241, 242, 243, .94);
  border-bottom-color: rgba(136, 169, 195, .35);
}

main > section { border-bottom-color: rgba(136, 169, 195, .62); }
.psychology-overlay { color: var(--blue); }
.patterned::before { opacity: .13; }

.brand strong,
h1,
h2,
.step-card h3,
.benefit-card h3,
.footer-brand strong { color: var(--blue-ink); }

.brand small,
nav,
.hero-copy > p,
.microcopy,
.scroll-note,
.section-heading > p,
.step-card p,
.benefit-card p,
.support-note,
.ethical-note,
.about-text p,
.cta-content p,
.cta-content small { color: var(--muted); }

.eyebrow,
.section-kicker,
.light .section-kicker,
h1 em,
h2 em,
.support-note span { color: var(--blue-deep); }

.section-heading.light h2 { color: var(--blue-ink); }

.eyebrow::before,
.section-kicker::before,
.scroll-note span { background: var(--blue); }

.header-cta,
.primary-button,
.cta-button {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(73, 103, 125, .2);
}

.brand-mark { background: var(--blue); color: var(--white); }

.step-card,
.benefit-card {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(136, 169, 195, .42);
  backdrop-filter: blur(8px);
}

.step-card:hover { box-shadow: 0 22px 55px rgba(73, 103, 125, .13); }
.step-number { color: rgba(136, 169, 195, .58); }
.line-icon { border-color: rgba(136, 169, 195, .55); }
.line-icon span { border-color: var(--blue); }
.line-icon span::after { background: var(--blue); }
.benefit-symbol { background: rgba(136, 169, 195, .18); color: var(--blue-deep); }

.about-text { border-left-color: rgba(136, 169, 195, .62); }
.credentials span { background: rgba(255,255,255,.68); border-color: rgba(136,169,195,.55); color: var(--blue-ink); }
.photo-accent { border-color: var(--blue); opacity: .7; }
.credential-badge { background: var(--blue); color: var(--white); border-color: var(--surface); }

.hero-orbit,
.cta-rings { border-color: rgba(136, 169, 195, .38); }
.cta-rings::before,
.cta-rings::after { border-color: rgba(136, 169, 195, .34); }
.doodle-line path { stroke: var(--blue); }

.center-symbol,
.conversation-card {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(136, 169, 195, .45);
  color: var(--blue-ink);
  box-shadow: 0 20px 55px rgba(73, 103, 125, .14);
}

.center-symbol span,
.center-symbol small { color: var(--blue-ink); }
.mini-face { background: rgba(136, 169, 195, .18); color: var(--blue-ink); }

.whatsapp-button {
  width: fit-content;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 27px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: var(--blue-ink);
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s, background-color .2s, box-shadow .2s;
}

.whatsapp-button:hover {
  transform: translateY(-2px);
  background: var(--white);
  box-shadow: 0 14px 30px rgba(73, 103, 125, .14);
}

.whatsapp-icon { font-size: 18px; color: var(--blue-deep); }

footer { background: var(--surface-soft); color: var(--muted); border-top: 1px solid rgba(136,169,195,.42); }
.footer-brand small { color: var(--muted); }

@media (max-width: 640px) {
  .whatsapp-button { width: 100%; padding: 16px 18px; }
}