/* ============================================================
   Agêntica — Seções (layout + nível de seção)
   Apenas classes de seção. Tokens e componentes vêm dos
   arquivos anteriores. Mobile-first. Anima só transform/opacity.
   ============================================================ */

/* ---- 1a. Barra de promoção ---- */
.promo-bar { position: relative; z-index: var(--z-sticky); background: linear-gradient( 90deg, oklch(64% 0.2 290 / 0.18), oklch(80% 0.13 205 / 0.14), oklch(76% 0.16 162 / 0.16) ); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px) }
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding-block: 0.6rem }
.promo-bar__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); text-align: center }
.promo-bar__text strong { color: var(--gold) }
.promo-bar__sep { color: var(--faint) }
.promo-bar__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); animation: pulse 2.4s var(--ease-out) infinite }

/* ---- 1b. Header sticky ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); border-bottom: 1px solid transparent }
.site-header.is-scrolled { background: oklch(11% 0.025 280 / 0.78); backdrop-filter: blur(16px); border-bottom-color: var(--border); box-shadow: var(--shadow-sm) }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display) }
.brand__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: 800; font-size: 1.05rem; color: #fff; background: var(--grad-violet); box-shadow: var(--glow-violet) }
.brand__name { font-weight: 700; font-size: 1.15rem; letter-spacing: var(--tracking-tight); color: var(--text) }
.site-nav { display: none }
.site-nav a { font-size: 0.95rem; color: var(--muted); transition: color var(--dur) var(--ease-out) }
.site-nav a:hover { color: var(--text) }
.site-nav__cta { --btn-pad-y: 0.7rem; --btn-pad-x: 1.35rem; font-size: 0.95rem }
.site-nav__cta:hover { color: #fff }

/* hambúrguer mobile */
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer }
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out) }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
@media (min-width: 1024px) {
  .nav-toggle { display: none }
  .site-nav { display: flex; align-items: center; gap: 1.75rem }
}

/* menu mobile aberto */
@media (max-width: 1023px) {
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 1rem var(--gutter) 1.5rem; background: oklch(11% 0.025 280 / 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), visibility var(--dur) }
  .site-nav.is-open { display: flex; transform: none; opacity: 1; visibility: visible }
  .site-nav a { padding: 0.75rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--border-faint) }
  .site-nav__cta { margin-top: 0.75rem; border-bottom: none !important; justify-content: center }
}

/* ---- 2. HERO ---- */
.hero { position: relative; z-index: var(--z-base); padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); padding-bottom: var(--space-section) }
.hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 4rem); align-items: center }
.hero__copy > * + * { margin-top: var(--space-5) }
.hero__title { font-size: var(--text-h1); letter-spacing: var(--tracking-tighter) }
.hero__sub { max-width: 36ch }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem }
.hero__cta-note { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
.hero__proof { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-size: 0.9rem; color: var(--muted) }
.hero__proof li { display: inline-flex; align-items: center; gap: 0.5rem }
.hero__proof-ico { color: var(--cyan) }

/* ---- Hero visual: rede de agentes ---- */
.hero__visual { position: relative; min-height: 320px }
.agent-net { position: relative; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 8 / 9; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--grad-surface); box-shadow: var(--shadow-lg); overflow: hidden }
.agent-net::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(75% 0.05 290 / 0.16) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.5 }
.agent-net__links { position: absolute; inset: 0; width: 100%; height: 100% }
.agent-net__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 58px; padding: 0.45rem 0.7rem; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md) }
.agent-net__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-soft); text-transform: uppercase }
.agent-net__node--human { border-color: oklch(82% 0.15 80 / 0.5); background: linear-gradient(180deg, oklch(82% 0.15 80 / 0.18), var(--bg-elev)); box-shadow: var(--glow-gold) }
.agent-net__node--human .agent-net__label { color: var(--gold) }
.agent-net__node--director { border-color: oklch(64% 0.2 290 / 0.55); background: linear-gradient(180deg, oklch(64% 0.2 290 / 0.2), var(--bg-elev)); box-shadow: var(--glow-violet) }
.agent-net__node--director .agent-net__label { color: var(--violet-bright) }
.agent-net__pulse { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold); box-shadow: 0 0 0 0 oklch(82% 0.15 80 / 0.6); animation: pulse 2.6s var(--ease-out) infinite }

/* ---- VSL ---- */
.hero__vsl-wrap { margin-top: clamp(3rem, 2rem + 4vw, 5rem) }
.vsl { max-width: 920px; margin-inline: auto }
.vsl__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: radial-gradient(120% 120% at 50% 0%, var(--bg-elev), var(--bg-deep)); box-shadow: var(--shadow-lg), var(--glow-violet); display: grid; place-items: center; overflow: hidden }
.vsl__frame::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(75% 0.05 290 / 0.12) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.4 }
.vsl__play { position: relative; display: grid; place-items: center; width: clamp(64px, 12vw, 92px); height: clamp(64px, 12vw, 92px); border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.3); background: var(--grad-cta); color: #fff; cursor: pointer; box-shadow: 0 18px 50px -12px oklch(62% 0.22 290 / 0.7); transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out) }
.vsl__play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.2); animation: pulse 2.8s var(--ease-out) infinite }
.vsl__play:hover { transform: scale(1.06); filter: brightness(1.08) }
.vsl__badge { position: absolute; top: 1rem; left: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--cyan); padding: 0.35rem 0.7rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: oklch(11% 0.025 280 / 0.6); backdrop-filter: blur(6px) }
.vsl__caption { margin-top: 1.25rem; text-align: center; font-size: 0.95rem; color: var(--muted); max-width: 60ch; margin-inline: auto }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr }
  .agent-net { max-width: 100% }
}

/* ---- 3. Mecanismo / quebra de crença ---- */
.mechanism { position: relative; z-index: var(--z-base); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-block: 1px solid var(--border-faint); background: linear-gradient(180deg, transparent, oklch(64% 0.2 290 / 0.04), transparent) }
.mechanism .eyebrow { display: block; margin-bottom: var(--space-4) }
.mechanism__q { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text); text-wrap: balance }
.mechanism__old { color: var(--muted); font-style: italic; font-weight: 600 }
.mechanism__sub { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--muted); max-width: 56ch; margin-inline: auto; line-height: 1.5 }

/* ---- Cabeçalho de seção compartilhado ---- */
.build__head, .org-section__head, .nights__head, .compare-section__head, .offer__head, .audience__head, .faq__head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem) }
.build__head .eyebrow, .org-section__head .eyebrow, .nights__head .eyebrow, .compare-section__head .eyebrow, .offer__head .eyebrow, .audience__head .eyebrow, .faq__head .eyebrow { display: block; margin-bottom: var(--space-4) }
.build__head h2, .org-section__head h2, .nights__head h2, .compare-section__head h2, .offer__head h2, .audience__head h2, .faq__head h2 { font-size: var(--text-h2); margin-bottom: var(--space-4) }
.build__intro, .org-section__intro { max-width: 58ch }

/* ---- 4. O que você vai construir ---- */
.build-grid { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); grid-template-columns: 1fr }
.build-card { display: flex; flex-direction: column; gap: 0.75rem }
.build-card .check-circle { margin-bottom: 0.25rem }
.build-card__title { font-size: var(--text-h3); font-weight: 600 }
.build-card__desc { color: var(--muted); font-size: 0.97rem; line-height: 1.5 }
.build-card--cta { background: linear-gradient(160deg, oklch(64% 0.2 290 / 0.12), var(--surface-1)); border-color: oklch(64% 0.2 290 / 0.32) }
.build-card__plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; color: var(--violet-bright); background: oklch(64% 0.2 290 / 0.14); border: 1px solid oklch(64% 0.2 290 / 0.4) }
.build-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--violet-bright); transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out) }
.build-card__link:hover { gap: 0.7rem; color: var(--text) }
@media (min-width: 600px) {
  .build-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 960px) {
  .build-grid { grid-template-columns: repeat(3, 1fr) }
}

/* ---- 5. Organograma (seção assinatura) ---- */
.org-section { position: relative }
.org-wrap { position: relative; max-width: 940px; margin-inline: auto; padding: clamp(1.5rem, 1rem + 3vw, 3rem); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--grad-surface); box-shadow: var(--shadow-lg) }
.org-wrap::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, oklch(76% 0.16 162 / 0.5), transparent 45%, oklch(64% 0.2 290 / 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6 }
.org-section__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; max-width: 720px; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; font-size: 0.97rem; color: var(--muted) }

/* ---- 6. As 2 noites ---- */
.nights-grid { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 1.75rem); grid-template-columns: 1fr }
.night-card { display: flex; flex-direction: column; gap: 1.5rem }
.night-card__head { display: flex; flex-direction: column; gap: 0.75rem }
.night-card__tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); padding: 0.4rem 0.85rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-1) }
.night-card__tag--live { color: var(--violet-bright); border-color: oklch(64% 0.2 290 / 0.4); background: oklch(64% 0.2 290 / 0.12) }
.night-card__title { font-size: var(--text-h3) }
.night-card__list { display: flex; flex-direction: column; gap: 0.9rem }
.night-card__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.97rem; color: var(--text-soft); line-height: 1.45 }
.night-card__list .check-circle { width: 24px; height: 24px; margin-top: 1px }
.night-card--featured { border-color: oklch(64% 0.2 290 / 0.4); background: linear-gradient(165deg, oklch(64% 0.2 290 / 0.1), var(--surface-1)) }
@media (min-width: 820px) {
  .nights-grid { grid-template-columns: repeat(2, 1fr) }
}

/* ---- 7. Comparativo ---- */
.compare-section__x { color: var(--faint); font-weight: 700; margin-inline: 0.15em }
.compare { max-width: 900px; margin-inline: auto }
.compare-section__result { max-width: 760px; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; text-align: center }
.compare-section__verdict { font-size: var(--text-lg); color: var(--text-soft); margin-bottom: 1rem }
.compare-section__anchor { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1rem + 2vw, 2.1rem); letter-spacing: var(--tracking-tight); line-height: 1.2 }

/* ---- 8. Oferta ---- */
.offer-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) }
.offer-list { display: flex; flex-direction: column }
.offer-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding-block: 1rem; border-bottom: 1px solid var(--border-faint) }
.offer-item:last-child { border-bottom: none }
.offer-item__text { font-size: 1rem; color: var(--text-soft); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem }
.offer-item__price { font-family: var(--font-mono); font-size: 0.9rem; color: var(--faint); text-decoration: line-through; text-decoration-color: oklch(66% 0.2 18 / 0.7); white-space: nowrap }
.offer-item--bonus { margin-top: 0.25rem; padding-inline: 1rem; border-radius: var(--r); background: oklch(82% 0.15 80 / 0.06); border: 1px solid oklch(82% 0.15 80 / 0.22) }
.offer-item--bonus .offer-item__text { color: var(--text) }
.offer-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--border-strong) }
.offer-total__label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted) }
.offer-total__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.5vw, 2.25rem); color: var(--faint); text-decoration: line-through; text-decoration-color: oklch(66% 0.2 18 / 0.6) }

/* ---- 9. Preço ---- */
.pricing-card { text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 3.25rem); border-color: oklch(64% 0.2 290 / 0.35); background: radial-gradient(130% 100% at 50% 0%, oklch(64% 0.2 290 / 0.12), var(--surface-1)); box-shadow: var(--shadow-lg), var(--glow-violet) }
.pricing-card__lote { margin-bottom: var(--space-5) }
.pricing-card__title { font-size: var(--text-lg); font-weight: 600; color: var(--muted); margin-bottom: 0.5rem }
.price { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 0.5rem }
.price__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 1.5rem + 8vw, 5.5rem); line-height: 1; letter-spacing: var(--tracking-tighter); background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent }
.price__cents { font-size: 0.45em; -webkit-text-fill-color: var(--text-soft); color: var(--text-soft) }
.pricing-card__note { font-size: 0.92rem; color: var(--muted); margin-bottom: var(--space-6) }
.pricing-card__anchor { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.25rem }
.pricing-card__anchor s { color: var(--coral); text-decoration-thickness: 2px; font-weight: 600 }
.pricing-card__guarantee { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.9rem; color: var(--emerald) }
.pricing-card__echo { margin-top: var(--space-4); font-size: 0.86rem; color: var(--muted); max-width: 44ch; margin-inline: auto; line-height: 1.5 }
.pricing-card__echo strong { color: var(--text-soft) }
.pricing-card__cta { margin-block: var(--space-6) var(--space-5) }
.pricing-card .countdown { margin-bottom: var(--space-2) }
.pricing-card__trust { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-faint) }

/* ---- 10. Para quem é ---- */
.audience-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; max-width: 900px; margin-inline: auto }
.audience-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.35rem; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-1); font-size: 0.97rem; color: var(--text-soft); line-height: 1.45; transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out) }
.audience-item:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--surface-2) }
.audience-item__ico { flex: 0 0 auto; font-size: 0.7rem; line-height: 1.6; background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent }
@media (min-width: 700px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr) }
}

/* ---- 11. Mentor ---- */
.mentor-card { display: flex; flex-direction: column; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); align-items: center; text-align: center }
.mentor__photo { flex: 0 0 auto; width: clamp(150px, 36vw, 240px); aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; border-radius: var(--r-lg); border: 1px solid oklch(64% 0.2 290 / 0.45); box-shadow: var(--glow-violet), var(--shadow-md) }
.mentor__body .eyebrow { display: block; margin-bottom: 0.75rem }
.mentor__name { font-size: var(--text-h2); margin-bottom: 0.85rem }
.mentor__bio { color: var(--muted); line-height: 1.6; max-width: 56ch; margin-inline: auto }
.mentor__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 1rem + 3vw, 3rem); margin-top: 1.75rem }
.stat { display: flex; flex-direction: column; gap: 0.25rem }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem); line-height: 1 }
.stat__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
@media (min-width: 720px) {
  .mentor-card { flex-direction: row; text-align: left; align-items: flex-start }
  .mentor__bio, .mentor__stats { margin-inline: 0; justify-content: flex-start }
}

/* ---- 12. FAQ ---- */
.faq__list { max-width: 760px; margin-inline: auto }

/* ---- 13. CTA final ---- */
.final-cta { position: relative; border-top: 1px solid var(--border-faint); background: radial-gradient(120% 80% at 50% 100%, oklch(64% 0.2 290 / 0.1), transparent 70%) }
.final-cta .eyebrow { display: block; margin-bottom: var(--space-4) }
.final-cta h2 { font-size: var(--text-h1); letter-spacing: var(--tracking-tighter); margin-bottom: var(--space-5) }
.final-cta__lead { max-width: 54ch; margin-bottom: var(--space-7) }
.final-cta__countdown { margin-bottom: var(--space-7) }
.final-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem }

/* ---- 14. Footer ---- */
.site-footer { position: relative; z-index: var(--z-base); border-top: 1px solid var(--border); background: var(--bg-deep); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) }
.site-footer__cols { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start }
.site-footer__tagline { margin-top: 0.85rem; font-size: 0.92rem; color: var(--muted); max-width: 36ch }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem }
.site-footer__nav a { font-size: 0.92rem; color: var(--muted); transition: color var(--dur) var(--ease-out) }
.site-footer__nav a:hover { color: var(--text) }
.site-footer__base { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.82rem; color: var(--faint) }
.site-footer__disclaimer { font-style: italic }
@media (min-width: 768px) {
  .site-footer__cols { flex-direction: row; align-items: center; justify-content: space-between }
  .site-footer__base { flex-direction: row; align-items: center; justify-content: space-between }
}

/* ---- 5b. Integrações ---- */
.integra__intro { max-width: 60ch }
.integra__hub { max-width: 940px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) }
.integra__center { position: relative; display: inline-flex; align-items: center; gap: 0.85rem; padding: 1rem 1.6rem; border-radius: var(--r-pill); border: 1px solid oklch(72% 0.17 150 / 0.5); background: linear-gradient(180deg, oklch(72% 0.17 150 / 0.14), var(--bg-elev)); box-shadow: 0 0 50px -10px oklch(72% 0.17 150 / 0.5), var(--shadow-md) }
.integra__center-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: oklch(80% 0.17 150); background: oklch(72% 0.17 150 / 0.16); border: 1px solid oklch(72% 0.17 150 / 0.4) }
.integra__center-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text) }
.integra__center-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: oklch(80% 0.15 150) }
.integra__center::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: clamp(1.25rem, 2vw, 2rem); background: linear-gradient(180deg, oklch(72% 0.17 150 / 0.6), transparent); transform: translateX(-50%); animation: orgFlow 2.6s var(--ease-out) infinite }
.integra-grid { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.1rem); grid-template-columns: 1fr; width: 100% }
.integra-chip { --chip: var(--cyan); display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.25rem; border-radius: var(--r); border: 1px solid var(--border); border-left: 3px solid var(--chip); background: var(--surface-1); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out) }
.integra-chip:hover { transform: translateY(-3px); background: var(--surface-2) }
.integra-chip__ico { color: var(--chip) }
.integra-chip__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text) }
.integra-chip__role { font-size: 0.86rem; color: var(--muted) }
.integra-chip--gmail { --chip: oklch(63% 0.21 25) }
.integra-chip--cal { --chip: oklch(62% 0.17 250) }
.integra-chip--ig { --chip: oklch(66% 0.22 12) }
.integra-chip--in { --chip: oklch(58% 0.13 245) }
.integra-chip--tt { --chip: oklch(78% 0.13 195) }
.integra-chip--more { --chip: var(--violet-bright) }
.integra-chip--more { border-style: dashed }
.integra__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; max-width: 760px; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; font-size: 0.97rem; color: var(--muted) }
@media (min-width: 600px) { .integra-grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 960px) { .integra-grid { grid-template-columns: repeat(3, 1fr) } }

/* ---- Guarda anti-overflow horizontal ---- */
.hero, .mechanism, .org-section, .compare-section, .integra { overflow-x: clip }