/* =========================================================================
   4.works — Landing page /site
   Direção de arte: editorial claro (off-white quente), tipografia display
   Inter Tight + destaques em Instrument Serif itálico, acento violeta/fúcsia
   herdado da marca. Sempre light — nunca dark mode.
   Prefixo de classe obrigatório: .s2-*
   ========================================================================= */

.s2 {
    /* Tinta */
    --s2-ink: #14101a;
    --s2-ink-2: #3c3745;
    --s2-ink-3: #6f6a78;
    --s2-ink-4: #9a95a3;

    /* Papel */
    --s2-paper: #ffffff;
    --s2-paper-2: #f8f7f4;
    --s2-paper-3: #f2f0ec;

    /* Linhas */
    --s2-line: #e5e2db;
    --s2-line-soft: #eeece7;

    /* Acento (gradiente da logo: fúcsia → violeta) */
    --s2-accent: #6d28d9;
    --s2-accent-2: #a21caf;
    --s2-accent-deep: #4c1d95;
    --s2-accent-soft: #f4efff;
    --s2-accent-line: #ddd0f7;
    --s2-grad: linear-gradient(135deg, #a21caf 0%, #6d28d9 52%, #4c1d95 100%);

    /* Semântica */
    --s2-ok: #15803d;
    --s2-ok-soft: #eefaf1;
    --s2-warn: #b45309;

    /* Métricas */
    --s2-max: 1220px;
    --s2-pad: clamp(20px, 5vw, 56px);
    --s2-r: 14px;
    --s2-r-lg: 22px;
    --s2-sh-1: 0 1px 2px rgba(20, 16, 26, .05), 0 8px 24px -12px rgba(20, 16, 26, .12);
    --s2-sh-2: 0 2px 4px rgba(20, 16, 26, .04), 0 18px 44px -18px rgba(20, 16, 26, .22);
    --s2-sh-3: 0 40px 90px -32px rgba(20, 16, 26, .34), 0 4px 10px rgba(20, 16, 26, .05);
    --s2-ease: cubic-bezier(.22, 1, .36, 1);

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.s2 {
    margin: 0;
    background: var(--s2-paper);
    color: var(--s2-ink);
    font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.s2.is-locked { overflow: hidden; }

.s2 img { max-width: 100%; height: auto; display: block; }
.s2 a { color: inherit; text-decoration: none; }
.s2 p { margin: 0; }
.s2 h1, .s2 h2, .s2 h3, .s2 h4 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.s2 ul, .s2 ol { margin: 0; padding: 0; list-style: none; }
.s2 button { font: inherit; color: inherit; }

.s2-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.s2-skip {
    position: absolute; left: 12px; top: -60px; z-index: 999;
    background: var(--s2-ink); color: #fff; padding: 10px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 600; transition: top .18s var(--s2-ease);
}
.s2-skip:focus { top: 12px; }

.s2 :focus-visible {
    outline: 2px solid var(--s2-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Serifa itálica dos destaques ------------------------------------------- */
.s2 em {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- Botões */
.s2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px; padding: 0 26px;
    border: 1px solid transparent; border-radius: 999px;
    font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer; white-space: nowrap;
    transition: transform .18s var(--s2-ease), background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
.s2-btn span { transition: transform .18s var(--s2-ease); }
.s2-btn:hover span { transform: translateX(3px); }

/* As variantes precisam de especificidade maior que `.s2 a { color: inherit }`,
   senão o link herda o preto do texto e o botão escuro fica ilegível. */
.s2 .s2-btn--ink {
    background: var(--s2-ink);
    color: #fff;
    border-color: var(--s2-ink);
    box-shadow: 0 12px 28px -14px rgba(20, 16, 26, .55);
}
.s2 .s2-btn--ink:hover {
    background: #2a2135;
    border-color: #2a2135;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -16px rgba(20, 16, 26, .5);
}

.s2 .s2-btn--ghost { background: var(--s2-paper); color: var(--s2-ink); border-color: var(--s2-line); }
.s2 .s2-btn--ghost:hover { border-color: var(--s2-accent-line); background: var(--s2-accent-soft); color: var(--s2-accent-deep); transform: translateY(-2px); }

.s2 .s2-btn--light { background: #fff; color: var(--s2-ink); border-color: #fff; }
.s2 .s2-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }

.s2 .s2-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.s2 .s2-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; transform: translateY(-2px); }

.s2-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.s2-btn--block { width: 100%; }

/* ------------------------------------------------------ Tipografia bloco */
.s2-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    color: var(--s2-ink-2);
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: 999px; padding: 7px 16px 7px 13px;
    box-shadow: var(--s2-sh-1);
}
.s2-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--s2-accent-2);
    box-shadow: 0 0 0 0 rgba(162, 28, 175, .5);
    animation: s2Pulse 2.4s infinite;
}
@keyframes s2Pulse {
    0% { box-shadow: 0 0 0 0 rgba(162, 28, 175, .45); }
    70% { box-shadow: 0 0 0 10px rgba(162, 28, 175, 0); }
    100% { box-shadow: 0 0 0 0 rgba(162, 28, 175, 0); }
}

.s2-tag {
    display: flex; align-items: center; gap: 12px;
    font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--s2-ink-3);
    margin-bottom: 22px;
}
.s2-tag span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 24px; padding: 0 8px;
    border-radius: 6px; background: var(--s2-ink); color: #fff;
    font-size: 12px; letter-spacing: .06em;
}
.s2-sechead--center .s2-tag { justify-content: center; }

.s2-display {
    font-size: clamp(2.7rem, 6.6vw, 5.4rem);
    font-weight: 620;
    line-height: .96;
    letter-spacing: -.045em;
}
.s2-display em {
    font-size: 1.06em;
    background: var(--s2-grad);
    color: var(--s2-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .s2-display em { background: none; -webkit-text-fill-color: currentColor; color: var(--s2-accent); }
}

.s2-h2 {
    font-size: clamp(1.9rem, 3.7vw, 3.05rem);
    font-weight: 620;
    letter-spacing: -.038em;
    line-height: 1.04;
}
.s2-h2 em { font-size: 1.05em; color: var(--s2-accent); }

.s2-h3 {
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 620;
    letter-spacing: -.03em;
}
.s2-h3 em { color: var(--s2-accent); }

.s2-lead {
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    color: var(--s2-ink-2);
    line-height: 1.62;
    max-width: 44ch;
}

.s2-section {
    max-width: var(--s2-max);
    margin: 0 auto;
    padding: clamp(76px, 11vw, 140px) var(--s2-pad);
}

.s2-sechead { max-width: 740px; margin-bottom: clamp(44px, 6.5vw, 76px); }
.s2-sechead--center { margin-left: auto; margin-right: auto; text-align: center; }
.s2-sechead__lead {
    margin-top: 24px;
    font-size: clamp(1rem, 1.25vw, 1.13rem);
    color: var(--s2-ink-2);
    line-height: 1.72;
}

/* Lista com marcador ----------------------------------------------------- */
.s2-ticks { display: grid; gap: 16px; }
.s2-ticks li {
    position: relative;
    padding-left: 32px;
    font-size: 15.5px;
    color: var(--s2-ink-2);
    line-height: 1.62;
}
.s2-ticks li::before {
    content: "";
    position: absolute; left: 0; top: 5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--s2-accent-soft);
    border: 1px solid var(--s2-accent-line);
}
.s2-ticks li::after {
    content: "";
    position: absolute; left: 5.4px; top: 10.6px;
    width: 6px; height: 3px;
    border-left: 1.6px solid var(--s2-accent);
    border-bottom: 1.6px solid var(--s2-accent);
    transform: rotate(-45deg);
}
@media (min-width: 760px) {
    .s2-ticks--wide { grid-template-columns: 1fr 1fr; gap: 16px 28px; }
}

/* Reveal on scroll ------------------------------------------------------- */
.s2-reveal { opacity: 0; transform: translateY(22px); }
.s2-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--s2-ease), transform .7s var(--s2-ease);
}
.s2-no-motion .s2-reveal { opacity: 1; transform: none; }

/* ================================================================ TOPBAR */
.s2-topbar {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    flex-wrap: wrap;
    padding: 10px var(--s2-pad);
    background: var(--s2-ink);
    color: #fff;
    font-size: 13.5px;
    text-align: center;
}
.s2-topbar__text { color: rgba(255, 255, 255, .74); }
.s2-topbar__text strong { color: #fff; font-weight: 600; }
.s2-topbar__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .34);
    padding-bottom: 1px;
    transition: border-color .18s, color .18s;
}
.s2-topbar__link:hover { border-color: #fff; }
@media (max-width: 700px) {
    .s2-topbar { font-size: 12.5px; gap: 10px; }
    .s2-topbar__text br { display: none; }
}

/* ================================================================ HEADER */
.s2-head {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; gap: 24px;
    padding: 16px var(--s2-pad);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: padding .25s var(--s2-ease), border-color .25s, box-shadow .25s;
}
.s2-head.is-stuck {
    padding-top: 11px; padding-bottom: 11px;
    border-bottom-color: var(--s2-line-soft);
    box-shadow: 0 10px 30px -22px rgba(20, 16, 26, .34);
}
.s2-head__brand { flex: 0 0 auto; }
.s2-head__brand img { width: 132px; height: auto; }

.s2-head__nav {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
}
.s2-head__nav a {
    padding: 8px 13px; border-radius: 999px;
    font-size: 14.5px; font-weight: 500; color: var(--s2-ink-2);
    transition: background-color .16s, color .16s;
}
.s2-head__nav a:hover { background: var(--s2-paper-3); color: var(--s2-ink); }

.s2-head__actions { display: flex; align-items: center; gap: 14px; }
.s2-head__login { font-size: 14.5px; font-weight: 600; color: var(--s2-ink-2); }
.s2-head__login:hover { color: var(--s2-accent); }

.s2-burger {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: var(--s2-paper); border: 1px solid var(--s2-line);
    border-radius: 12px; cursor: pointer;
}
.s2-burger__lines { display: grid; gap: 5px; width: 18px; }
.s2-burger__lines i {
    display: block; height: 1.8px; background: var(--s2-ink); border-radius: 2px;
    transition: transform .22s var(--s2-ease), opacity .2s;
}
.s2-burger[aria-expanded="true"] .s2-burger__lines i:first-child { transform: translateY(3.4px) rotate(45deg); }
.s2-burger[aria-expanded="true"] .s2-burger__lines i:last-child { transform: translateY(-3.4px) rotate(-45deg); }

@media (max-width: 1040px) {
    .s2-head__nav, .s2-head__actions { display: none; }
    .s2-burger { display: inline-flex; }
}

/* Drawer mobile */
.s2-drawer {
    position: fixed; inset: 0; z-index: 88;
    background: var(--s2-paper);
    padding: 92px var(--s2-pad) 32px;
    display: flex; flex-direction: column; justify-content: space-between;
    animation: s2DrawerIn .28s var(--s2-ease);
}
.s2-drawer[hidden] { display: none; }
@keyframes s2DrawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.s2-drawer__nav { display: grid; gap: 2px; }
.s2-drawer__nav a {
    display: flex; align-items: baseline; gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--s2-line-soft);
    font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 620; letter-spacing: -.035em;
}
.s2-drawer__nav a span { font-size: 12px; font-weight: 650; letter-spacing: .14em; color: var(--s2-ink-4); }
.s2-drawer__foot { display: grid; gap: 10px; margin-top: 28px; }

/* ================================================================== HERO */
.s2-hero {
    position: relative;
    padding: clamp(48px, 7vw, 84px) 0 clamp(60px, 8vw, 96px);
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(162, 28, 175, .07), transparent 62%),
        radial-gradient(700px 460px at 8% 4%, rgba(109, 40, 217, .05), transparent 60%),
        var(--s2-paper);
    overflow: hidden;
}
.s2-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(90deg, var(--s2-line-soft) 0 1px, transparent 1px 25%);
    opacity: .32;
    pointer-events: none;
    /* As linhas somem antes de chegar nos CTAs e nos números, senão elas cortam
       o botão escuro e são confundidas com separadores da lista de prova. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
}
.s2-hero__inner {
    position: relative;
    max-width: var(--s2-max);
    margin: 0 auto;
    padding: 0 var(--s2-pad);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.s2-hero__text { max-width: 620px; }
.s2-hero .s2-display { margin: 22px 0 20px; }
.s2-hero .s2-lead { max-width: 46ch; }
.s2-hero__cta {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: 30px;
}
.s2-hero__cta .s2-btn { min-height: 52px; }

.s2-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 64px; padding-top: 24px;
    border-top: 1px solid var(--s2-line);
}
.s2-hero__proof li {
    display: grid; gap: 4px;
    padding: 2px 18px;
}
.s2-hero__proof li:first-child { padding-left: 0; }
/* Separadores explícitos: o alinhamento não depende mais das linhas de fundo. */
.s2-hero__proof li + li { border-left: 1px solid var(--s2-line-soft); }
.s2-hero__proof strong {
    font-size: clamp(1.25rem, 2.4vw, 1.45rem); font-weight: 650; letter-spacing: -.035em;
    line-height: 1.1;
}
.s2-hero__proof span { font-size: 13px; color: var(--s2-ink-3); line-height: 1.35; }

.s2-hero__visual { position: relative; }

/* Janela de produto ----------------------------------------------------- */
.s2-shot {
    margin: 0;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    overflow: hidden;
    box-shadow: var(--s2-sh-3);
}
.s2-shot__chrome {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: var(--s2-paper-2);
    border-bottom: 1px solid var(--s2-line-soft);
}
.s2-shot__dots { display: flex; gap: 6px; }
.s2-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9d5cd; }
.s2-shot__dots i:first-child { background: #e3c2c8; }
.s2-shot__url {
    font-size: 12px; color: var(--s2-ink-3); letter-spacing: -.01em;
    background: var(--s2-paper); border: 1px solid var(--s2-line-soft);
    border-radius: 999px; padding: 3px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-shot img { width: 100%; }

/* ======================= CAMADA OTTO IA (envolve o orbital) ============= */
/* O wrapper representa a Otto IA como camada superior: ela "contém" a
   plataforma inteira (o diagrama orbital fica inteiro dentro dela). */
.s2-ail {
    position: relative;
    isolation: isolate;
    padding: clamp(30px, 4vw, 44px) clamp(16px, 2.6vw, 30px) clamp(20px, 2.6vw, 28px);
    border-radius: clamp(24px, 3vw, 34px);
    /* background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(250, 248, 255, .5)); */
    /* box-shadow:
        0 40px 90px -46px rgba(60, 30, 110, .3),
        inset 0 1px 0 rgba(255, 255, 255, .9); */
}
/* Borda em gradiente (a "membrana" da camada de IA) */
.s2-ail::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* background: linear-gradient(140deg,
        rgba(109, 40, 217, .48) 0%,
        rgba(162, 28, 175, .3) 34%,
        rgba(162, 28, 175, .06) 58%,
        rgba(109, 40, 217, .34) 100%); */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.s2-ail__aura {
    position: absolute; inset: -6% -5%;
    border-radius: inherit;
    /* background:
        radial-gradient(60% 46% at 50% 0%, rgba(162, 28, 175, .16), transparent 70%),
        radial-gradient(52% 44% at 8% 92%, rgba(109, 40, 217, .12), transparent 68%); */
    filter: blur(14px);
    animation: s2AilBreathe 7s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes s2AilBreathe {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}

/* Cantos em "L": reforçam a leitura de moldura/camada */
.s2-ail__corners { position: absolute; inset: 10px; pointer-events: none; z-index: 3; }
.s2-ail__corners i {
    position: absolute;
    width: 18px; height: 18px;
    border: 1.5px solid rgba(109, 40, 217, .42);
}
.s2-ail__corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.s2-ail__corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.s2-ail__corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.s2-ail__corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

/* Etiqueta da camada, montada sobre a borda superior */
.s2-ail__badge {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, #6d28d9, #a21caf);
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 12px 30px -14px rgba(109, 40, 217, .7);
}
.s2-ail__badge i {
    font-style: normal;
    font-size: 12px;
    opacity: .9;
}
.s2-ail__badge b {
    font-size: 13px; font-weight: 650; letter-spacing: -.01em;
}
.s2-ail__badge span {
    font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .28);
}
.s2-ail__note {
    position: relative; z-index: 4;
    margin: clamp(6px, 1.4vw, 14px) auto 0;
    max-width: 46ch;
    text-align: center;
    font-size: 13px; line-height: 1.5;
    color: var(--s2-ink-3);
}

/* Dentro da camada, o diagrama fica centralizado (nada mais muda nele). */
.s2-ail .s2-orbit { margin-left: auto; margin-right: auto; }

/* =========================================== DIAGRAMA ORBITAL (HERO) ==== */
.s2-orbit {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    isolation: isolate;
}

/* Halo de fundo */
.s2-orbit__glow {
    position: absolute; inset: -12%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 46%, rgba(162, 28, 175, .11), transparent 58%),
        radial-gradient(circle at 62% 70%, rgba(109, 40, 217, .09), transparent 60%);
    filter: blur(2px);
    z-index: -1;
}

/* Anéis concêntricos */
.s2-orbit__ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(109, 40, 217, .18);
}
.s2-orbit__ring--out {
    width: 98%; height: 98%;
    border-style: solid;
    border-color: rgba(109, 40, 217, .1);
    background: radial-gradient(circle, rgba(255, 255, 255, .5) 38%, rgba(243, 240, 255, .38) 100%);
}
.s2-orbit__ring--mid { width: 66%; height: 66%; }

/* Anel varrido (gradiente cônico girando) */
.s2-orbit__sweep {
    position: absolute; top: 50%; left: 50%;
    width: 66%; height: 66%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(162, 28, 175, 0) 0deg,
        rgba(162, 28, 175, .5) 52deg,
        rgba(109, 40, 217, 0) 116deg,
        rgba(162, 28, 175, 0) 360deg);
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px));
    mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1.5px));
    animation: s2Sweep 9s linear infinite;
    opacity: .85;
}
@keyframes s2Sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Fios de ligação */
.s2-orbit__wires {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    z-index: 1;
}
.s2-orbit__flow line {
    stroke-dasharray: 5 78;
    stroke-dashoffset: 83;
    animation: s2Flow 3.6s linear infinite;
    opacity: .75;
}
.s2-orbit__flow line:nth-child(2) { animation-delay: .55s; }
.s2-orbit__flow line:nth-child(3) { animation-delay: 1.15s; }
.s2-orbit__flow line:nth-child(4) { animation-delay: 1.8s; }
.s2-orbit__flow line:nth-child(5) { animation-delay: 2.5s; }
@keyframes s2Flow { to { stroke-dashoffset: 0; } }

/* Núcleo */
.s2-orbit__core {
    position: absolute; top: 50%; left: 50%;
    width: 41%; height: 41%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 6% 9%;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(109, 40, 217, .12);
    box-shadow:
        0 22px 60px -18px rgba(60, 30, 110, .3),
        0 4px 14px -4px rgba(60, 30, 110, .12),
        inset 0 0 0 7px rgba(248, 246, 255, .9);
}
.s2-orbit__logo {
    width: clamp(84px, 44%, 132px);
    height: auto;
    margin-bottom: 2px;
}
.s2-orbit__core strong {
    font-size: clamp(14px, 1.5vw, 16.5px);
    font-weight: 650;
    letter-spacing: -.028em;
    color: var(--s2-ink);
}
.s2-orbit__core > span {
    font-size: clamp(11px, 1.05vw, 12.5px);
    line-height: 1.4;
    color: var(--s2-ink-3);
    max-width: 20ch;
}
.s2-orbit__seal {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px;
    font-size: 10.5px; font-weight: 620; letter-spacing: .04em;
    text-transform: uppercase;
    color: #7c2fa8;
    background: rgba(162, 28, 175, .08);
    border-radius: 999px;
    padding: 4px 10px;
}
.s2-orbit__seal i { font-style: normal; font-size: 11px; }

/* Cards dos módulos */
.s2-mod {
    --s2-mod-c: #6d28d9;
    --s2-mod-bg: #f3f0ff;
    --x: 0%;
    --y: 0%;
    position: absolute;
    z-index: 4;
    top: calc(50% + var(--y));
    left: calc(50% + var(--x));
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    width: max-content;
    max-width: 204px;
    padding: 12px 16px 12px 12px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--s2-line);
    border-radius: 16px;
    box-shadow: 0 16px 34px -20px rgba(40, 26, 70, .28), 0 2px 6px -2px rgba(40, 26, 70, .08);
    transition: transform .28s var(--s2-ease), box-shadow .28s ease, border-color .28s ease;
    animation: s2Bob 8s ease-in-out infinite;
}
.s2-mod__ico {
    grid-row: 1 / span 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    color: var(--s2-mod-c);
    background: var(--s2-mod-bg);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .12);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s2-mod-c) 14%, transparent);
}
.s2-mod__ico svg { width: 20px; height: 20px; }
.s2-mod b {
    font-size: 14px; font-weight: 650; letter-spacing: -.025em;
    color: var(--s2-ink);
    line-height: 1.2;
}
.s2-mod em {
    font-family: inherit; font-style: normal;
    font-size: 11.5px; line-height: 1.3;
    color: var(--s2-ink-3);
}
.s2-mod:hover {
    transform: translate(-50%, -50%) scale(1.04);
    animation-play-state: paused;
    border-color: var(--s2-mod-c);
    border-color: color-mix(in srgb, var(--s2-mod-c) 34%, var(--s2-line));
    box-shadow: 0 22px 44px -20px rgba(40, 26, 70, .34), 0 3px 8px -3px rgba(40, 26, 70, .1);
    box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--s2-mod-c) 42%, transparent), 0 3px 8px -3px rgba(40, 26, 70, .1);
}

/* Anima a propriedade `translate` (não `transform`) para o hover poder
   aplicar scale sem que o keyframe sobreponha o transform de centragem. */
@keyframes s2Bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

/* Posições (x/y em % do container, medidos do centro) */
.s2-mod--mkt { --x: -30%; --y: -30%; --s2-mod-c: #2563eb; --s2-mod-bg: #eaf1ff; animation-delay: 0s; }
.s2-mod--com { --x: 22%;  --y: -36%; --s2-mod-c: #d92667; --s2-mod-bg: #ffecf3; animation-delay: 1.1s; }
.s2-mod--cmn { --x: 29%;  --y: 4%;   --s2-mod-c: #ea580c; --s2-mod-bg: #fff0e6; animation-delay: 2.2s; }
.s2-mod--evt { --x: 15%;  --y: 38%;  --s2-mod-c: #7c3aed; --s2-mod-bg: #f3edff; animation-delay: 3.3s; }
.s2-mod--app { --x: -30%; --y: 30%;  --s2-mod-c: #059669; --s2-mod-bg: #e6f7f0; animation-delay: 4.4s; }

/* Hover no card acende o fio correspondente (ordem = ordem dos <line>) */
.s2-orbit:has(.s2-mod:hover) .s2-orbit__flow line { opacity: .18; }
.s2-orbit:has(.s2-mod--mkt:hover) .s2-orbit__flow line:nth-child(1),
.s2-orbit:has(.s2-mod--com:hover) .s2-orbit__flow line:nth-child(2),
.s2-orbit:has(.s2-mod--cmn:hover) .s2-orbit__flow line:nth-child(3),
.s2-orbit:has(.s2-mod--evt:hover) .s2-orbit__flow line:nth-child(4),
.s2-orbit:has(.s2-mod--app:hover) .s2-orbit__flow line:nth-child(5) {
    opacity: 1;
    stroke-width: 2;
    stroke-dasharray: 14 30;
    animation-duration: 1.5s;
}
.s2-orbit:has(.s2-mod--mkt:hover) .s2-orbit__flow line:nth-child(1) { stroke: #2563eb; }
.s2-orbit:has(.s2-mod--com:hover) .s2-orbit__flow line:nth-child(2) { stroke: #d92667; }
.s2-orbit:has(.s2-mod--cmn:hover) .s2-orbit__flow line:nth-child(3) { stroke: #ea580c; }
.s2-orbit:has(.s2-mod--evt:hover) .s2-orbit__flow line:nth-child(4) { stroke: #7c3aed; }
.s2-orbit:has(.s2-mod--app:hover) .s2-orbit__flow line:nth-child(5) { stroke: #059669; }

@media (max-width: 1240px) {
    .s2-mod { max-width: 196px; padding: 10px 14px 10px 11px; }
    .s2-mod__ico { width: 34px; height: 34px; border-radius: 11px; }
    .s2-mod__ico svg { width: 18px; height: 18px; }
    .s2-mod b { font-size: 13px; }
    .s2-mod em { font-size: 11px; }
}

@media (max-width: 1040px) {
    .s2-hero__inner { grid-template-columns: 1fr; }
    .s2-hero__text { max-width: 100%; }
    .s2-hero__visual { margin-top: 26px; }
    .s2-orbit { margin: 0 auto; max-width: 540px; }
}

/* Mobile: vira empilhamento (núcleo em cima, módulos em grade) */
@media (max-width: 720px) {
    .s2-orbit {
        aspect-ratio: auto;
        max-width: 460px;
        display: grid;
        gap: 14px;
        justify-items: center;
    }
    .s2-orbit__ring, .s2-orbit__sweep, .s2-orbit__wires { display: none; }
    .s2-orbit__glow { inset: -6% -14%; }
    .s2-orbit__core {
        position: static;
        width: min(100%, 320px); height: auto;
        transform: none;
        border-radius: 22px;
        padding: 22px 24px;
        gap: 7px;
    }
    .s2-orbit__logo { width: 118px; }
    .s2-orbit__core > span { max-width: 26ch; }
    .s2-mod {
        position: static;
        transform: none;
        animation: none;
        width: 100%;
        max-width: none;
    }
    .s2-mod:hover { transform: translateY(-3px); }
    .s2-orbit .s2-mod:nth-of-type(1) { margin-top: 4px; }
}
@media (min-width: 481px) and (max-width: 720px) {
    .s2-orbit { grid-template-columns: 1fr 1fr; }
    .s2-orbit__core { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .s2-hero::before { background-image: repeating-linear-gradient(90deg, var(--s2-line-soft) 0 1px, transparent 1px 50%); }
    .s2-hero__cta { gap: 10px; }
    .s2-hero__cta .s2-btn { width: 100%; justify-content: center; }
    .s2-hero__proof { margin-top: 48px; padding-top: 20px; }
    .s2-hero__proof li { padding: 2px 10px; }
    .s2-hero__proof strong { font-size: 1.1rem; }
    .s2-hero__proof span { font-size: 12px; }
}

/* Camada Otto IA — responsivo */
@media (max-width: 720px) {
    .s2-ail { padding: clamp(26px, 6vw, 34px) 14px 20px; }
    .s2-ail__corners { inset: 8px; }
    .s2-ail__corners i { width: 14px; height: 14px; }
}
@media (max-width: 460px) {
    .s2-ail__badge { padding: 7px 13px; gap: 6px; }
    .s2-ail__badge span { display: none; }
    .s2-ail__note { font-size: 12.5px; }
}

/* Em telas de toque o :hover fica "preso" depois do tap — neutraliza o transform */
@media (hover: none) and (min-width: 721px) {
    .s2-mod:hover { transform: translate(-50%, -50%); animation-play-state: running; }
}
@media (hover: none) and (max-width: 720px) {
    .s2-mod:hover { transform: none; }
}

/* =============================================================== MARQUEE */
.s2-marquee {
    border-top: none;
    border-bottom: none;
    background: var(--s2-grad);
    overflow: hidden;
    padding: 18px 0;
}
.s2-marquee__track {
    display: flex; align-items: center; gap: 22px;
    width: max-content;
    animation: s2Marquee 62s linear infinite;
    will-change: transform;
}
.s2-marquee__track span {
    font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; white-space: nowrap;
}
.s2-marquee__track i { color: rgba(255, 255, 255, .48); font-style: normal; }
@keyframes s2Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================ LEDGER */
.s2-ledger { background: var(--s2-paper); }
.s2-ledger__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.6vw, 30px);
    align-items: start;
}
.s2-receipt {
    background: var(--s2-paper-2);
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    padding: clamp(22px, 2.6vw, 32px);
}
/* "Depois" em gradiente da marca: o contraste com o cartão "Antes" (papel morto)
   é o próprio argumento da seção. */
.s2-receipt--good {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--s2-grad);
    border-color: transparent;
    color: #fff;
    box-shadow:
        0 2px 6px rgba(76, 29, 149, .18),
        0 34px 72px -30px rgba(76, 29, 149, .58);
}
.s2-receipt--good::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(680px 320px at 88% -14%, rgba(255, 255, 255, .30), transparent 62%),
        radial-gradient(520px 300px at 2% 110%, rgba(255, 255, 255, .14), transparent 66%);
    pointer-events: none;
}
.s2-receipt--good::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    pointer-events: none;
}
.s2-receipt__head { margin-bottom: 22px; }
.s2-receipt__label {
    display: inline-block; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--s2-ink-4);
}
.s2-receipt--good .s2-receipt__label {
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    letter-spacing: .14em;
    color: #fff;
}
.s2-receipt__head h3 { font-size: 1.4rem; font-weight: 620; letter-spacing: -.03em; }
.s2-receipt--good .s2-receipt__head h3 { color: #fff; }

.s2-receipt__list { display: grid; }
.s2-receipt__list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--s2-line);
    font-size: 14.8px;
}
.s2-receipt__list li span { color: var(--s2-ink-2); }
.s2-receipt__list li b {
    flex: 0 0 auto;
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--s2-ink-4); white-space: nowrap;
}
.s2-receipt--good .s2-receipt__list li { border-bottom-color: rgba(255, 255, 255, .2); }
.s2-receipt--good .s2-receipt__list li span { color: rgba(255, 255, 255, .9); }
.s2-receipt--good .s2-receipt__list li b {
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.s2-receipt__total {
    display: grid; gap: 5px;
    margin-top: 22px; padding-top: 20px;
    border-top: 2px solid var(--s2-ink);
}
.s2-receipt__total span {
    font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--s2-ink-4);
}
.s2-receipt__total strong { font-size: 1.05rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.35; }
.s2-receipt__total--bad { border-top-color: var(--s2-line); }
.s2-receipt__total--bad strong { color: var(--s2-ink-3); }
.s2-receipt--good .s2-receipt__total { border-top-color: rgba(255, 255, 255, .44); }
.s2-receipt--good .s2-receipt__total span { color: rgba(255, 255, 255, .74); }
.s2-receipt--good .s2-receipt__total strong { color: #fff; }

@media (max-width: 860px) {
    .s2-ledger__grid { grid-template-columns: 1fr; }
}

/* ================================================================== TOUR */
.s2-tour { background: var(--s2-paper); }
.s2-tour__grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.s2-tour__aside {
    position: sticky; top: 104px;
    --s2-ch-accent: var(--s2-accent);
    --s2-ch-accent-deep: var(--s2-accent-deep);
    --s2-ch-soft: var(--s2-accent-soft);
    --s2-ch-line: var(--s2-accent-line);
}
.s2-tour__aside[data-tone="purple"] {
    --s2-ch-accent: #7c3aed;
    --s2-ch-accent-deep: #5b21b6;
    --s2-ch-soft: #f5f0ff;
    --s2-ch-line: #e4d9ff;
}
.s2-tour__aside[data-tone="green"] {
    --s2-ch-accent: #16a34a;
    --s2-ch-accent-deep: #15803d;
    --s2-ch-soft: #ecfdf5;
    --s2-ch-line: #c6f0d6;
}
.s2-tour__aside[data-tone="orange"] {
    --s2-ch-accent: #ea580c;
    --s2-ch-accent-deep: #c2410c;
    --s2-ch-soft: #fff7ed;
    --s2-ch-line: #fed7aa;
}
.s2-tour__aside[data-tone="red"] {
    --s2-ch-accent: #dc2626;
    --s2-ch-accent-deep: #b91c1c;
    --s2-ch-soft: #fef2f2;
    --s2-ch-line: #fecaca;
}
.s2-tour__index { display: grid; gap: 4px; }
.s2-tour__item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 15px 16px 16px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: background-color .2s, border-color .2s, transform .2s var(--s2-ease), color .2s;
}
.s2-tour__item:hover { background: var(--s2-paper-2); }
.s2-tour__item.is-active {
    background: var(--s2-ch-soft);
    border-color: var(--s2-ch-line);
}
.s2-tour__num {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 650; letter-spacing: .1em;
    color: var(--s2-ink-4);
    padding-top: 3px;
}
.s2-tour__item.is-active .s2-tour__num { color: var(--s2-ch-accent); }
.s2-tour__label { display: grid; gap: 5px; }
.s2-tour__label strong { font-size: 16px; font-weight: 620; letter-spacing: -.02em; line-height: 1.25; }
.s2-tour__label em {
    font-family: inherit; font-style: normal;
    font-size: 13px; color: var(--s2-ink-3); line-height: 1.5;
}
.s2-tour__item.is-active .s2-tour__label strong { color: var(--s2-ch-accent-deep); }

/* Tom permanente no número de cada item (mesmo inativo) */
.s2-tour__item--purple .s2-tour__num { color: #7c3aed; }
.s2-tour__item--green .s2-tour__num { color: #16a34a; }
.s2-tour__item--orange .s2-tour__num { color: #ea580c; }
.s2-tour__item--red .s2-tour__num { color: #dc2626; }
.s2-tour__item--purple:hover { background: #f5f0ff; }
.s2-tour__item--green:hover { background: #ecfdf5; }
.s2-tour__item--orange:hover { background: #fff7ed; }
.s2-tour__item--red:hover { background: #fef2f2; }
.s2-tour__item--purple.is-active {
    --s2-ch-accent: #7c3aed; --s2-ch-accent-deep: #5b21b6;
    --s2-ch-soft: #f5f0ff; --s2-ch-line: #e4d9ff;
}
.s2-tour__item--green.is-active {
    --s2-ch-accent: #16a34a; --s2-ch-accent-deep: #15803d;
    --s2-ch-soft: #ecfdf5; --s2-ch-line: #c6f0d6;
}
.s2-tour__item--orange.is-active {
    --s2-ch-accent: #ea580c; --s2-ch-accent-deep: #c2410c;
    --s2-ch-soft: #fff7ed; --s2-ch-line: #fed7aa;
}
.s2-tour__item--red.is-active {
    --s2-ch-accent: #dc2626; --s2-ch-accent-deep: #b91c1c;
    --s2-ch-soft: #fef2f2; --s2-ch-line: #fecaca;
}

.s2-tour__bar {
    margin-top: 20px; height: 3px; border-radius: 999px;
    background: var(--s2-line);
    overflow: hidden;
}
.s2-tour__bar i {
    display: block; height: 100%; width: 0;
    background: var(--s2-ch-accent, var(--s2-accent));
    transition: width .25s var(--s2-ease), background-color .25s var(--s2-ease);
}

.s2-tour__panels { display: grid; gap: clamp(54px, 8vw, 108px); }
.s2-chapter { scroll-margin-top: 108px; }

/* Capítulos coloridos (marketing/roxo, comercial/verde, comunidade/laranja, eventos/vermelho) */
.s2-chapter--tone {
    --s2-ch-accent: var(--s2-accent);
    --s2-ch-accent-deep: var(--s2-accent-deep);
    --s2-ch-soft: var(--s2-accent-soft);
    --s2-ch-line: var(--s2-accent-line);
    padding: clamp(26px, 3.6vw, 44px);
    border-radius: calc(var(--s2-r-lg) + 4px);
    border: 1px solid var(--s2-ch-line);
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--s2-ch-accent) 16%, transparent) 0%, transparent 55%),
        linear-gradient(165deg, var(--s2-ch-soft) 0%, #fff 58%, #fff 100%);
}
.s2-chapter--purple {
    --s2-ch-accent: #7c3aed;
    --s2-ch-accent-deep: #5b21b6;
    --s2-ch-soft: #f5f0ff;
    --s2-ch-line: #e4d9ff;
}
.s2-chapter--green {
    --s2-ch-accent: #16a34a;
    --s2-ch-accent-deep: #15803d;
    --s2-ch-soft: #ecfdf5;
    --s2-ch-line: #c6f0d6;
}
.s2-chapter--orange {
    --s2-ch-accent: #ea580c;
    --s2-ch-accent-deep: #c2410c;
    --s2-ch-soft: #fff7ed;
    --s2-ch-line: #fed7aa;
}
.s2-chapter--red {
    --s2-ch-accent: #dc2626;
    --s2-ch-accent-deep: #b91c1c;
    --s2-ch-soft: #fef2f2;
    --s2-ch-line: #fecaca;
}
.s2-chapter--tone .s2-chapter__eyebrow { color: var(--s2-ch-accent); }
.s2-chapter--tone .s2-ticks li::before {
    background: color-mix(in srgb, var(--s2-ch-accent) 14%, #fff);
    border-color: color-mix(in srgb, var(--s2-ch-accent) 32%, #fff);
}
.s2-chapter--tone .s2-ticks li::after {
    border-left-color: var(--s2-ch-accent);
    border-bottom-color: var(--s2-ch-accent);
}
.s2-chapter--tone .s2-liveblock__btn {
    background: var(--s2-ch-accent);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--s2-ch-accent) 70%, transparent);
}
.s2-chapter--tone .s2-liveblock__btn:hover {
    background: var(--s2-ch-accent-deep);
}

.s2-chapter__eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--s2-accent);
    margin-bottom: 18px;
}
.s2-chapter__eyebrow span {
    font-family: "Instrument Serif", Georgia, serif; font-style: italic;
    font-size: 22px; letter-spacing: 0; color: var(--s2-ink);
    text-transform: none;
}
.s2-chapter .s2-h3 { line-height: 1.16; }
.s2-chapter__text {
    margin: 20px 0 34px;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--s2-ink-2); line-height: 1.72;
    max-width: 58ch;
}
.s2-chapter .s2-shot--flat { margin-top: 38px; box-shadow: var(--s2-sh-2); }

/* Mosaico de imagens do capítulo Eventos -------------------------------- */
.s2-evmosaic {
    margin-top: 38px;
    display: grid;
    gap: 12px;
}
.s2-evmosaic__hero,
.s2-evmosaic__thumb {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--s2-ch-line, var(--s2-line));
    background: var(--s2-paper);
    box-shadow: var(--s2-sh-1);
}
.s2-evmosaic__hero img,
.s2-evmosaic__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s2-evmosaic__hero {
    aspect-ratio: 16 / 9;
}
.s2-evmosaic__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.s2-evmosaic__thumb {
    aspect-ratio: 16 / 10;
}

/* Blocos vivos (API pública) -------------------------------------------- */
.s2-liveblock {
    margin-top: 36px;
    display: grid;
    gap: 18px;
}
.s2-liveblock__head { display: grid; gap: 6px; max-width: 56ch; }
.s2-liveblock__title {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--s2-ink);
}
.s2-liveblock__sub {
    font-size: 14.5px;
    color: var(--s2-ink-3);
    line-height: 1.55;
}
.s2-liveblock__status {
    font-size: 13.5px;
    color: var(--s2-ink-4);
}
.s2-liveblock__status.is-error { color: #b91c1c; }
.s2-liveblock__status[hidden],
.s2-liveblock__btn[hidden] { display: none !important; }
.s2-liveblock__more {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}
.s2-liveblock__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--s2-accent);
    color: #fff;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: transform .18s var(--s2-ease), filter .18s var(--s2-ease), background .18s var(--s2-ease);
}
.s2-liveblock__btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.s2-liveblock__btn:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

/* Cards de eventos públicos --------------------------------------------- */
.s2-evcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.s2-evcards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.s2-evcard {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--s2-ch-line, var(--s2-line)) 80%, #fff);
    box-shadow: 0 1px 2px rgba(20, 16, 26, .04), 0 14px 32px -20px rgba(20, 16, 26, .28);
    transition: transform .2s var(--s2-ease), box-shadow .2s var(--s2-ease), border-color .2s var(--s2-ease);
    color: inherit;
}
.s2-evcard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--s2-ch-accent, var(--s2-accent)) 35%, var(--s2-line));
    box-shadow: 0 8px 28px -16px color-mix(in srgb, var(--s2-ch-accent, var(--s2-accent)) 55%, transparent);
}
.s2-evcard__cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--s2-ch-accent, #dc2626) 70%, #0f172a) 0%, #0f172a 100%);
    overflow: hidden;
}
.s2-evcard__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.s2-evcard__cover-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .55);
}
.s2-evcard__cover-ph svg { width: 36px; height: 36px; }
.s2-evcard__date {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: grid;
    justify-items: center;
    min-width: 52px;
    padding: 8px 10px 7px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--s2-ink);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .45);
    line-height: 1;
}
.s2-evcard__date-day {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.04em;
}
.s2-evcard__date-mon {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s2-ch-accent, #dc2626);
}
.s2-evcard__body {
    display: grid;
    gap: 10px;
    padding: 16px 16px 18px;
    align-content: start;
}
.s2-evcard__type {
    display: inline-flex;
    align-self: start;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--s2-ch-accent-deep, #b91c1c);
    background: color-mix(in srgb, var(--s2-ch-accent, #dc2626) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--s2-ch-accent, #dc2626) 22%, #fff);
}
.s2-evcard__title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--s2-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s2-evcard__meta {
    font-size: 12.5px;
    color: var(--s2-ink-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s2-evcard__cta {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 650;
    color: var(--s2-ch-accent, #dc2626);
}

/* Previews de sites (moldura de navegador) ------------------------------ */
.s2-sites {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.s2-siteprev {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 36px -22px rgba(15, 23, 42, .28);
    transition: transform .2s var(--s2-ease), box-shadow .2s var(--s2-ease), border-color .2s var(--s2-ease);
    color: inherit;
}
.s2-siteprev:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--s2-ch-accent, #7c3aed) 28%, #e2e8f0);
    box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--s2-ch-accent, #7c3aed) 45%, transparent);
}
.s2-siteprev__chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
}
.s2-siteprev__dots {
    display: inline-flex;
    gap: 5px;
}
.s2-siteprev__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}
.s2-siteprev__dots i:nth-child(1) { background: #ff5f57; }
.s2-siteprev__dots i:nth-child(2) { background: #febc2e; }
.s2-siteprev__dots i:nth-child(3) { background: #28c840; }
.s2-siteprev__url {
    min-width: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 11px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s2-siteprev__ext {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: #64748b;
}
.s2-siteprev__ext svg { width: 14px; height: 14px; }
.s2-siteprev__viewport {
    position: relative;
    aspect-ratio: 3 / 2;
    background: #f1f5f9;
    overflow: hidden;
}
.s2-siteprev__viewport iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 333.334%;
    height: 333.334%;
    border: 0;
    transform-origin: top left;
    transform: scale(0.3);
    pointer-events: none;
    background: #fff;
}
.s2-siteprev__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 13px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}
.s2-siteprev__slug {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--s2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s2-siteprev__date {
    flex: 0 0 auto;
    font-size: 12px;
    color: #94a3b8;
}
.s2-siteprev__hover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 14px 16px;
    height: 46%;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, .55) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    opacity: 0;
    transition: opacity .18s var(--s2-ease);
    pointer-events: none;
}
.s2-siteprev:hover .s2-siteprev__hover { opacity: 1; }

@media (max-width: 1100px) {
    .s2-evcards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .s2-evcards,
    .s2-evcards--4,
    .s2-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .s2-chapter--tone { padding: 22px 16px; }
    .s2-evmosaic__row { grid-template-columns: 1fr; }
    .s2-evcards,
    .s2-evcards--4,
    .s2-sites { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .s2-tour__grid { grid-template-columns: 1fr; }
    .s2-tour__aside { position: static; }
    .s2-tour__index {
        display: flex; gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        margin: 0 calc(var(--s2-pad) * -1);
        padding-left: var(--s2-pad); padding-right: var(--s2-pad);
        scrollbar-width: none;
    }
    .s2-tour__index::-webkit-scrollbar { display: none; }
    .s2-tour__index li { flex: 0 0 auto; }
    .s2-tour__item {
        flex-direction: column; gap: 4px;
        min-width: 158px;
        background: var(--s2-paper-2);
        border-color: var(--s2-line-soft);
    }
    .s2-tour__label em { display: none; }
    .s2-tour__bar { display: none; }
}

/* Mockup do painel de evento (capítulo "Eventos") ------------------------ */
.s2-evm {
    padding: 20px;
    display: grid; gap: 16px;
    background: var(--s2-paper-2);
    font-size: 13px;
}
.s2-evm__head {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 14px; align-items: center;
    padding: 14px;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line-soft);
    border-radius: 14px;
}
.s2-evm__cover {
    display: grid; place-content: center; justify-items: center;
    width: 56px; height: 56px; border-radius: 12px;
    background: linear-gradient(160deg, var(--s2-accent) 0%, var(--s2-accent-deep) 100%);
    color: #fff;
}
.s2-evm__cover-day { font-size: 21px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.s2-evm__cover-mon { font-size: 9.5px; font-weight: 650; letter-spacing: .12em; opacity: .82; }
.s2-evm__titles { display: grid; gap: 3px; min-width: 0; }
.s2-evm__kicker {
    font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
    color: var(--s2-accent);
}
.s2-evm__title {
    font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; color: var(--s2-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-evm__meta { font-size: 12px; color: var(--s2-ink-4); }
.s2-evm__pill {
    align-self: start;
    padding: 5px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 650;
    color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0;
}
.s2-evm__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.s2-evm__kpi {
    display: grid; gap: 4px;
    padding: 13px 14px;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line-soft);
    border-radius: 13px;
    border-top: 3px solid var(--s2-line);
}
.s2-evm__kpi--ok { border-top-color: #16a34a; }
.s2-evm__kpi--warn { border-top-color: #ea580c; }
.s2-evm__kpi--info { border-top-color: #2563eb; }
.s2-evm__kpi--money { border-top-color: var(--s2-accent); }
.s2-evm__kpi-v { font-size: 20px; font-weight: 700; letter-spacing: -.035em; color: var(--s2-ink); line-height: 1.1; }
.s2-evm__kpi-l { font-size: 10.8px; color: var(--s2-ink-4); line-height: 1.35; }
.s2-evm__cols { display: grid; grid-template-columns: 1.12fr 1fr; gap: 12px; }
.s2-evm__card {
    padding: 15px;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line-soft);
    border-radius: 14px;
}
.s2-evm__card-h {
    font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
    color: var(--s2-ink-4);
    padding-bottom: 11px; margin-bottom: 13px;
    border-bottom: 1px solid var(--s2-line-soft);
}
.s2-evm__tickets { display: grid; gap: 13px; }
.s2-evm__tickets li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name price" "bar seats";
    gap: 4px 10px; align-items: center;
}
.s2-evm__t-name {
    grid-area: name;
    font-size: 12.6px; font-weight: 620; color: var(--s2-ink); letter-spacing: -.01em;
}
.s2-evm__t-name em {
    font-family: inherit; font-style: normal; font-weight: 500;
    color: var(--s2-ink-4);
}
.s2-evm__t-price {
    grid-area: price;
    font-size: 12.6px; font-weight: 650; color: var(--s2-accent-deep);
    font-variant-numeric: tabular-nums;
}
.s2-evm__t-bar {
    grid-area: bar;
    height: 5px; border-radius: 999px; background: var(--s2-line-soft); overflow: hidden;
}
.s2-evm__t-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--s2-accent) 0%, var(--s2-accent-deep) 100%);
}
.s2-evm__t-seats {
    grid-area: seats;
    font-size: 10.8px; color: var(--s2-ink-4); font-variant-numeric: tabular-nums;
}
.s2-evm__notes { display: grid; gap: 11px; }
.s2-evm__notes li { display: flex; gap: 11px; align-items: flex-start; }
.s2-evm__n-ico {
    flex: 0 0 auto;
    display: grid; place-content: center;
    width: 29px; height: 29px; border-radius: 9px;
    background: var(--s2-accent-soft);
    border: 1px solid var(--s2-accent-line);
    color: var(--s2-accent-deep);
}
.s2-evm__n-ico svg { width: 15px; height: 15px; }
.s2-evm__n-txt { display: grid; gap: 2px; min-width: 0; }
.s2-evm__n-txt strong { font-size: 12.6px; font-weight: 620; color: var(--s2-ink); letter-spacing: -.01em; }
.s2-evm__n-txt em { font-family: inherit; font-style: normal; font-size: 11.2px; color: var(--s2-ink-4); line-height: 1.4; }

@media (max-width: 720px) {
    .s2-evm { padding: 14px; gap: 12px; }
    .s2-evm__head { grid-template-columns: 48px 1fr; }
    .s2-evm__cover { width: 48px; height: 48px; }
    .s2-evm__pill { display: none; }
    .s2-evm__kpis { grid-template-columns: 1fr 1fr; }
    .s2-evm__cols { grid-template-columns: 1fr; }
}

/* ================================================================== OTTO
   Bloco de destaque da Otto IA. Continua claro (a LP nunca é dark), mas usa
   glows violeta, grid técnico ao fundo e um "console" que mostra o pedido em
   texto virando entregas reais. A faixa do MCP usa o gradiente da marca. */
.s2-otto {
    position: relative;
    isolation: isolate;
    max-width: none;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% -20%, #fbf7ff 0%, rgba(251, 247, 255, 0) 62%),
        var(--s2-paper-2);
    border-top: 1px solid var(--s2-line);
    border-bottom: 1px solid var(--s2-line);
}
.s2-otto__glow {
    position: absolute; z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
}
.s2-otto__glow--a {
    top: -8%; left: -6%;
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    background: radial-gradient(circle, rgba(162, 28, 175, .16) 0%, rgba(162, 28, 175, 0) 70%);
}
.s2-otto__glow--b {
    right: -10%; bottom: -14%;
    width: 52vw; height: 52vw; max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(109, 40, 217, .15) 0%, rgba(109, 40, 217, 0) 70%);
}
.s2-otto__grid {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(20, 16, 26, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 16, 26, .055) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
.s2-otto__inner {
    position: relative; z-index: 1;
    max-width: var(--s2-max);
    margin: 0 auto;
}

/* ---- Console: pedido em texto → entregas ---- */
.s2-console {
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    box-shadow: var(--s2-sh-2);
    overflow: hidden;
}
.s2-console__bar {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    background: var(--s2-paper-2);
    border-bottom: 1px solid var(--s2-line);
}
.s2-console__lights { display: inline-flex; gap: 6px; }
.s2-console__lights i {
    width: 9px; height: 9px; border-radius: 50%;
    background: #dcd7e4;
}
.s2-console__lights i:first-child { background: #e7c5d6; }
.s2-console__lights i:nth-child(2) { background: #ded0f2; }
.s2-console__path {
    font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--s2-ink-4);
}
.s2-console__body {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.s2-console__ask {
    padding: clamp(24px, 3vw, 38px);
    border-right: 1px solid var(--s2-line-soft);
}
.s2-console__out { padding: clamp(24px, 3vw, 38px); }
.s2-console__cap {
    font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--s2-ink-4);
    margin-bottom: 16px;
}
.s2-console__bubble {
    position: relative;
    margin: 0;
    padding: 20px 22px;
    background: var(--s2-accent-soft);
    border: 1px solid var(--s2-accent-line);
    border-radius: 18px 18px 18px 6px;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-style: italic;
    line-height: 1.42;
    color: var(--s2-accent-deep);
    letter-spacing: -.01em;
}
.s2-console__caret {
    display: inline-block;
    width: 2px; height: 1em; margin-left: 3px;
    vertical-align: -.14em;
    background: var(--s2-accent);
    animation: s2Caret 1.05s steps(1) infinite;
}
@keyframes s2Caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.s2-console__status {
    display: flex; align-items: center; gap: 10px;
    margin-top: 20px;
    font-size: 13.4px; font-weight: 550;
    color: var(--s2-ink-3);
}
.s2-console__pulse {
    position: relative;
    width: 9px; height: 9px; flex: 0 0 9px;
    border-radius: 50%;
    background: var(--s2-accent);
}
.s2-console__pulse::after {
    content: ""; position: absolute; inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--s2-accent);
    opacity: 0;
    animation: s2Ping 1.9s var(--s2-ease) infinite;
}
@keyframes s2Ping {
    0% { transform: scale(.5); opacity: .7; }
    100% { transform: scale(1.35); opacity: 0; }
}

.s2-outs { display: grid; gap: 8px; }
.s2-outs__i {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--s2-paper-2);
    border: 1px solid var(--s2-line-soft);
    border-radius: 12px;
    transition: border-color .2s, background .2s, transform .2s var(--s2-ease);
}
.s2-outs__i:hover {
    background: var(--s2-paper);
    border-color: var(--s2-accent-line);
    transform: translateX(3px);
}
.s2-outs__ico {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    color: var(--s2-accent);
}
.s2-outs__ico svg { width: 17px; height: 17px; }
.s2-outs__txt { display: grid; gap: 2px; min-width: 0; }
.s2-outs__txt strong { font-size: 14.6px; font-weight: 600; letter-spacing: -.01em; }
.s2-outs__txt em {
    font-style: normal;
    font-size: 12.6px; color: var(--s2-ink-4);
    font-variant-numeric: tabular-nums;
}
.s2-outs__ok {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--s2-ok-soft); color: var(--s2-ok);
    animation: s2OutPop .5s var(--s2-ease) both;
    animation-delay: var(--s2-d, 0s);
}
.s2-outs__ok svg { width: 12px; height: 12px; }
@keyframes s2OutPop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ---- Fluxo em 4 passos ---- */
.s2-flow {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
    margin-top: clamp(30px, 4vw, 48px);
}
.s2-flow__i { position: relative; padding-top: 26px; }
.s2-flow__i::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--s2-line);
}
.s2-flow__i:first-child::before { background: var(--s2-grad); }
.s2-flow__i:nth-child(2)::before { background: linear-gradient(90deg, #6d28d9 0%, #ded0f2 100%); }
.s2-flow__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-bottom: 14px;
    border-radius: 8px;
    background: var(--s2-ink); color: #fff;
    font-size: 12.4px; font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.s2-flow__i h3 { font-size: 1.04rem; font-weight: 620; margin-bottom: 9px; line-height: 1.3; }
.s2-flow__i p { font-size: 14px; color: var(--s2-ink-3); line-height: 1.62; }

/* ---- Capacidades ---- */
.s2-caps {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 1.8vw, 20px);
    margin-top: clamp(30px, 4vw, 48px);
}
.s2-cap {
    display: flex; flex-direction: column;
    padding: clamp(22px, 2.4vw, 30px);
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    transition: transform .24s var(--s2-ease), box-shadow .24s, border-color .24s;
}
.s2-cap:hover {
    transform: translateY(-4px);
    box-shadow: var(--s2-sh-2);
    border-color: var(--s2-accent-line);
}
.s2-cap--wide {
    background:
        radial-gradient(120% 130% at 0% 0%, #faf6ff 0%, rgba(250, 246, 255, 0) 58%),
        var(--s2-paper);
}
.s2-cap__ico {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-bottom: 18px;
    border-radius: 13px;
    background: var(--s2-grad); color: #fff;
    box-shadow: 0 8px 20px -10px rgba(109, 40, 217, .6);
}
.s2-cap__ico svg { width: 21px; height: 21px; }
.s2-cap h3 { font-size: 1.14rem; font-weight: 620; margin-bottom: 10px; }
.s2-cap p { font-size: 14.6px; color: var(--s2-ink-3); line-height: 1.66; }
.s2-cap__tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: auto; padding-top: 20px;
}
.s2-cap__tags li {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--s2-paper-2);
    border: 1px solid var(--s2-line);
    font-size: 12.2px; font-weight: 550;
    color: var(--s2-ink-3);
}

/* ---- Faixa MCP (gradiente da marca) ---- */
.s2-mcp {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(30px, 4vw, 48px);
    padding: clamp(26px, 3.2vw, 40px);
    border-radius: var(--s2-r-lg);
    background: var(--s2-grad);
    color: #fff;
    box-shadow: 0 30px 70px -34px rgba(76, 29, 149, .7);
}
.s2-mcp::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%);
}
.s2-mcp__txt { position: relative; z-index: 1; }
.s2-mcp__kicker {
    display: inline-flex; align-items: center; gap: 9px;
    margin-bottom: 14px;
    padding: 5px 13px 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    font-size: 11.6px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
}
.s2-mcp__kicker-ico {
    width: 15px; height: 15px; flex: 0 0 15px;
    background: #fff;
    -webkit-mask: var(--s2-ico) center / contain no-repeat;
    mask: var(--s2-ico) center / contain no-repeat;
}
.s2-mcp__txt h3 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 620;
    margin-bottom: 12px;
}
.s2-mcp__txt h3 em {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic; font-weight: 400;
    letter-spacing: -.01em;
}
.s2-mcp__txt p {
    font-size: 15px;
    line-height: 1.68;
    color: rgba(255, 255, 255, .84);
    max-width: 58ch;
}
.s2-mcp__clients {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.s2-mcp__clients li {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 13.6px; font-weight: 600;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}
.s2-mcp__clients li:hover {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .34);
}
.s2-mcp__logo {
    width: 17px; height: 17px; flex: 0 0 17px;
    background: #fff;
    -webkit-mask: var(--s2-ico) center / contain no-repeat;
    mask: var(--s2-ico) center / contain no-repeat;
}
.s2-mcp__prompt {
    position: relative; z-index: 1;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
}
.s2-mcp__prompt-cap {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 11px; font-weight: 650;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.s2-mcp__prompt-q {
    margin: 0;
    padding: 16px 18px 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    border-left: 3px solid rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.s2-mcp__prompt-q p {
    margin: 0;
    font-family: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
    font-style: normal;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -.005em;
    color: #fff;
    max-width: none;
}

@media (max-width: 1000px) {
    .s2-caps { grid-template-columns: 1fr 1fr; }
    .s2-cap--wide { grid-column: 1 / -1; }
    .s2-flow { grid-template-columns: 1fr 1fr; row-gap: 26px; }
    .s2-mcp { grid-template-columns: 1fr; }
    .s2-mcp__clients { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
    .s2-console__body { grid-template-columns: 1fr; }
    .s2-console__ask { border-right: 0; border-bottom: 1px solid var(--s2-line-soft); }
}
@media (max-width: 620px) {
    .s2-flow { grid-template-columns: 1fr; }
    .s2-caps { grid-template-columns: 1fr; }
    .s2-mcp__clients { grid-template-columns: 1fr 1fr; }
    .s2-otto__grid { background-size: 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .s2-console__caret,
    .s2-console__pulse::after,
    .s2-outs__ok { animation: none; }
    .s2-outs__ok { opacity: 1; transform: none; }
    .s2-outs__i:hover, .s2-cap:hover { transform: none; }
}

/* =============================================================== EVENTOS */
.s2-events__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(34px, 6vw, 76px);
    align-items: center;
}
.s2-events__text .s2-btn { margin-top: 32px; }
.s2-events__text .s2-ticks { margin-top: 30px; }
.s2-events__visual { position: relative; display: flex; justify-content: center; }
.s2-events__live {
    margin-top: clamp(48px, 7vw, 80px);
    padding-top: clamp(36px, 5vw, 56px);
    border-top: 1px solid var(--s2-line-soft);
}
.s2-events__live .s2-liveblock__btn {
    background: var(--s2-ink);
    color: #fff;
}
.s2-events__live .s2-liveblock__btn:hover {
    filter: brightness(1.08);
}

.s2-ticket {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 116px;
    width: 100%; max-width: 440px;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: 18px;
    box-shadow: var(--s2-sh-3);
    overflow: hidden;
    transform: rotate(-1.4deg);
}
.s2-ticket::before,
.s2-ticket::after {
    content: "";
    position: absolute; right: 116px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    transform: translateX(50%);
    z-index: 2;
}
.s2-ticket::before { top: -11px; }
.s2-ticket::after { bottom: -11px; }

.s2-ticket__main { padding: 26px 24px 24px; }
.s2-ticket__eyebrow {
    font-size: 11px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase;
    color: var(--s2-accent-2);
    margin-bottom: 14px;
}
.s2-ticket__title { font-size: 1.6rem; font-weight: 620; letter-spacing: -.035em; line-height: 1.06; }
.s2-ticket__meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
    margin: 24px 0 0;
}
.s2-ticket__meta dt {
    font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--s2-ink-4); margin-bottom: 3px;
}
.s2-ticket__meta dd { margin: 0; font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.s2-ticket__meta dd.is-ok { color: var(--s2-ok); }

.s2-ticket__stub {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 20px 14px;
    border-left: 1px dashed var(--s2-line);
    background: var(--s2-paper-2);
}
.s2-ticket__stub p {
    font-size: 10.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--s2-ink-4);
}
.s2-ticket__qr {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    width: 62px; height: 62px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--s2-line);
    border-radius: 8px;
}
.s2-ticket__qr span { background: var(--s2-ink); border-radius: 2px; }
.s2-ticket__qr span:nth-child(2),
.s2-ticket__qr span:nth-child(4),
.s2-ticket__qr span:nth-child(8) { background: var(--s2-accent); }
.s2-ticket__qr span:nth-child(5) { background: transparent; }

.s2-events__badge {
    position: absolute; left: 0; bottom: -14px;
    display: grid; place-items: center; gap: 0;
    padding: 14px 18px;
    background: var(--s2-ink); color: #fff;
    border-radius: 14px;
    box-shadow: var(--s2-sh-2);
}
.s2-events__badge strong { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.s2-events__badge span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

@media (max-width: 900px) {
    .s2-events__grid { grid-template-columns: 1fr; }
    .s2-events__visual { order: -1; margin-bottom: 8px; }
    .s2-events__badge { left: 4px; bottom: -6px; }
}
@media (max-width: 420px) {
    .s2-ticket { grid-template-columns: minmax(0, 1fr) 92px; }
    .s2-ticket::before, .s2-ticket::after { right: 92px; }
    .s2-ticket__meta { grid-template-columns: 1fr; }
}

/* =================================================================== APP */
.s2-app {
    max-width: none;
    background: var(--s2-paper-2);
    border-top: 1px solid var(--s2-line);
    border-bottom: 1px solid var(--s2-line);
}
.s2-app__grid {
    max-width: var(--s2-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(34px, 6vw, 80px);
    align-items: center;
}
.s2-app__phone { display: flex; justify-content: center; }
.s2-app__text .s2-ticks { margin-top: 30px; }

/* Mockup interativo do webapp (app/site_parts/_mock_app.php).
   Espelha o design system "Aurora" do app real (app/webapp/assets/app.css),
   por isso o acento aqui é o teal padrão do webapp e não o violeta da landing. */
.s2-wa {
    --wa-p: #0891b2;
    --wa-p-deep: #0e7490;
    --wa-p-soft: #e6f6fa;
    --wa-canvas: #f2f4f8;
    --wa-surface: #fff;
    --wa-ink: #0d1220;
    --wa-ink-2: #4a5468;
    --wa-ink-3: #7c869a;
    --wa-line: #e4e8f0;

    display: grid; justify-items: center; gap: 18px;
    width: 100%;
}
.s2-wa__device {
    position: relative;
    width: 100%; max-width: 312px;
    padding: 11px;
    background: #0b0b10;
    border-radius: 44px;
    box-shadow: var(--s2-sh-3), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.s2-wa__island {
    position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
    width: 74px; height: 20px; border-radius: 999px;
    background: #0b0b10; z-index: 4;
}
.s2-wa__screen {
    position: relative;
    display: flex; flex-direction: column;
    height: 546px; overflow: hidden;
    background: var(--wa-canvas);
    border-radius: 34px;
    font-size: 13px; line-height: 1.45;
    color: var(--wa-ink);
}

/* header */
.s2-wa__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 34px 16px 10px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--wa-line);
    flex: none;
}
.s2-wa__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.s2-wa__mono {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: none;
    border-radius: 9px;
    background: var(--wa-p); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: -.01em;
}
.s2-wa__brand-name {
    font-size: 13px; font-weight: 650; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-wa__head-end { display: flex; align-items: center; gap: 4px; flex: none; }
.s2-wa__ico {
    position: relative;
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 10px;
    color: var(--wa-ink-2);
}
.s2-wa__ico svg { width: 17px; height: 17px; }
.s2-wa__ico--bell i {
    position: absolute; top: 5px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #e11d48; border: 1.5px solid rgba(255, 255, 255, .9);
}

/* área de telas */
.s2-wa__views { position: relative; flex: 1 1 auto; overflow: hidden; }
.s2-wa__view {
    position: absolute; inset: 0;
    display: none;
    padding: 14px 14px 86px;
    overflow: hidden;
}
.s2-wa__view.is-on { display: block; animation: s2WaIn .28s var(--s2-ease) both; }
@keyframes s2WaIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.s2-wa__vtitle {
    margin: 2px 0 12px;
    font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em;
}

/* hero da home */
.s2-wa__hero {
    padding: 15px 15px 13px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--wa-p) 0%, var(--wa-p-deep) 58%, #0f3f56 100%);
    color: #fff;
    box-shadow: 0 12px 30px -14px rgba(8, 145, 178, .6);
}
.s2-wa__hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.s2-wa__hero-greet { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.s2-wa__hero-name { margin: 2px 0 0; font-size: 1.42rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.s2-wa__hero-meta { margin: 3px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .68); }
.s2-wa__hero-av {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 12px; font-weight: 700;
}
.s2-wa__hero-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.s2-wa__stat { display: grid; gap: 1px; min-width: 0; }
.s2-wa__stat-k { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.s2-wa__stat-v {
    font-size: 12px; font-weight: 650; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* seções */
.s2-wa__sec { margin-top: 16px; }
.s2-wa__sec-h {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: 0 2px 9px;
}
.s2-wa__sec-h--tight { margin-top: 14px; }
.s2-wa__sec-h span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wa-ink-3); }
.s2-wa__sec-h em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--wa-p); }

.s2-wa__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.s2-wa__tile {
    display: grid; justify-items: center; gap: 6px;
    padding: 11px 4px;
    background: var(--wa-surface);
    border: 1px solid var(--wa-line);
    border-radius: 16px;
}
.s2-wa__tile-ico {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 11px;
    background: var(--wa-p-soft); color: var(--wa-p-deep);
}
.s2-wa__tile-ico svg { width: 16px; height: 16px; }
.s2-wa__tile-l { font-size: 10px; font-weight: 620; letter-spacing: -.01em; color: var(--wa-ink-2); }

.s2-wa__stack { display: grid; gap: 9px; }
.s2-wa__stack--sm { gap: 7px; margin-top: 12px; }

/* cards de evento */
.s2-wa__ev {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) 14px;
    align-items: center; gap: 11px;
    padding: 11px;
    background: var(--wa-surface);
    border: 1px solid var(--wa-line);
    border-radius: 18px;
}
.s2-wa__ev-cover {
    display: grid; place-items: center; align-content: center;
    width: 42px; height: 46px;
    border-radius: 13px;
    background: var(--wa-p-soft); color: var(--wa-p-deep);
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
}
.s2-wa__ev-cover b { font-size: 16px; letter-spacing: -.02em; }
.s2-wa__ev-cover--alt { background: #fef3e2; color: #b45309; }
.s2-wa__ev-cover--alt2 { background: #f1eefe; color: #5b21b6; }
.s2-wa__ev-body { display: grid; gap: 2px; min-width: 0; }
.s2-wa__ev-when { font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-p); }
.s2-wa__ev-name {
    font-size: 12.8px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-wa__ev-meta {
    font-size: 11px; color: var(--wa-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-wa__tag {
    justify-self: start;
    margin-top: 4px; padding: 3px 8px;
    border-radius: 999px;
    background: #f1f4f9; color: var(--wa-ink-2);
    font-size: 9.5px; font-weight: 650;
}
.s2-wa__tag--ok { background: #e8f7ee; color: #15803d; }
.s2-wa__chev { display: grid; place-items: center; color: #b8c0cf; }
.s2-wa__chev svg { width: 14px; height: 14px; }

/* assinatura */
.s2-wa__memb {
    display: grid; gap: 2px;
    padding: 14px 15px;
    border-radius: 18px;
    background: linear-gradient(140deg, #17131f 0%, #241a33 100%);
    color: #fff;
}
.s2-wa__memb-eyebrow { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.s2-wa__memb-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.025em; }
.s2-wa__memb-foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.s2-wa__memb-foot em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.s2-wa__memb-foot b { font-size: 12px; font-weight: 620; }
.s2-wa__memb-foot i {
    font-style: normal; padding: 4px 9px; border-radius: 999px;
    background: rgba(52, 211, 153, .16); color: #6ee7b7;
    font-size: 10px; font-weight: 650;
}

/* chips e busca */
.s2-wa__chips { display: flex; gap: 6px; margin-bottom: 12px; }
.s2-wa__chip {
    padding: 6px 12px; border-radius: 999px;
    background: var(--wa-surface); border: 1px solid var(--wa-line);
    font-size: 11px; font-weight: 620; color: var(--wa-ink-2);
}
.s2-wa__chip.is-on { background: var(--wa-ink); border-color: var(--wa-ink); color: #fff; }
.s2-wa__search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px; margin-bottom: 4px;
    background: var(--wa-surface); border: 1px solid var(--wa-line);
    border-radius: 14px;
    font-size: 11.5px; color: var(--wa-ink-3);
}
.s2-wa__search svg { width: 15px; height: 15px; flex: none; }

/* membros */
.s2-wa__match { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s2-wa__mcard {
    display: grid; justify-items: center; gap: 4px;
    padding: 12px 6px;
    background: var(--wa-surface); border: 1px solid var(--wa-line);
    border-radius: 16px; text-align: center;
}
.s2-wa__av {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 50%; color: #fff;
    font-size: 11px; font-weight: 680;
}
.s2-wa__av--a { background: linear-gradient(140deg, #0891b2, #0e7490); }
.s2-wa__av--b { background: linear-gradient(140deg, #7c3aed, #4c1d95); }
.s2-wa__av--c { background: linear-gradient(140deg, #db2777, #9d174d); }
.s2-wa__mcard-n {
    font-size: 10.5px; font-weight: 650; letter-spacing: -.01em;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-wa__mcard-t { font-size: 9.5px; color: var(--wa-ink-3); }
.s2-wa__mini {
    margin-top: 2px; padding: 4px 8px; border-radius: 999px;
    background: var(--wa-p-soft); color: var(--wa-p-deep);
    font-size: 9.5px; font-weight: 680;
}

.s2-wa__row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px;
    align-items: center; gap: 11px;
    padding: 10px 12px;
    background: var(--wa-surface); border: 1px solid var(--wa-line);
    border-radius: 16px;
}
.s2-wa__row-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 12px;
    background: #f1f4f9; color: var(--wa-ink-2);
}
.s2-wa__row-ico svg { width: 16px; height: 16px; }
.s2-wa__row-body { display: grid; gap: 1px; min-width: 0; }
.s2-wa__row-t {
    font-size: 12.5px; font-weight: 650; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-wa__row-s {
    font-size: 10.5px; color: var(--wa-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* perfil */
.s2-wa__prof {
    display: grid; justify-items: center; gap: 4px;
    padding: 20px 16px 18px;
    background: var(--wa-surface); border: 1px solid var(--wa-line);
    border-radius: 22px; text-align: center;
}
.s2-wa__prof-av {
    display: grid; place-items: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(140deg, var(--wa-p), var(--wa-p-deep));
    color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
.s2-wa__prof-n { margin-top: 6px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.025em; }
.s2-wa__prof-e { font-size: 11px; color: var(--wa-ink-3); }
.s2-wa__prof-badges { display: flex; gap: 6px; margin-top: 8px; }
.s2-wa__prof-badges i {
    font-style: normal; padding: 4px 10px; border-radius: 999px;
    background: var(--wa-p-soft); color: var(--wa-p-deep);
    font-size: 9.5px; font-weight: 680;
}

/* dock */
.s2-wa__dock {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; padding: 7px 6px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--wa-line);
    border-radius: 24px;
    box-shadow: 0 10px 28px -12px rgba(13, 18, 32, .28);
    z-index: 3;
}
.s2-wa__dock-i {
    display: grid; justify-items: center; gap: 3px;
    padding: 7px 2px 6px;
    border: 0; border-radius: 17px;
    background: transparent; color: var(--wa-ink-3);
    font: inherit; font-size: 9.5px; font-weight: 620; letter-spacing: -.01em;
    cursor: pointer;
    transition: background .18s var(--s2-ease), color .18s var(--s2-ease);
    -webkit-tap-highlight-color: transparent;
}
.s2-wa__dock-i svg { width: 18px; height: 18px; }
.s2-wa__dock-i:hover { color: var(--wa-ink-2); }
.s2-wa__dock-i.is-active { background: var(--wa-p-soft); color: var(--wa-p-deep); }
.s2-wa__dock-i:focus-visible { outline: 2px solid var(--wa-p); outline-offset: 2px; }

.s2-wa__hint {
    display: flex; align-items: center; gap: 7px;
    margin: 0;
    font-size: 12.5px; color: var(--s2-ink-4);
}
.s2-wa__hint svg { width: 15px; height: 15px; color: var(--s2-accent); }

@media (prefers-reduced-motion: reduce) {
    .s2-wa__view.is-on { animation: none; }
}

@media (max-width: 900px) {
    .s2-app__grid { grid-template-columns: 1fr; }
    .s2-app__phone { order: -1; }
}

/* ================================================================ PLANOS */
.s2-plans__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 20px);
    align-items: stretch;
}
.s2-plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(24px, 2.4vw, 30px);
    background: var(--s2-paper);
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    transition: transform .22s var(--s2-ease), box-shadow .22s;
}
.s2-plan:hover { transform: translateY(-4px); box-shadow: var(--s2-sh-2); }
.s2-plan.is-featured {
    border-color: var(--s2-accent);
    box-shadow: 0 30px 70px -34px rgba(109, 40, 217, .45);
}
.s2-plan__badge {
    position: absolute; top: -11px; left: clamp(24px, 2.4vw, 30px);
    padding: 4px 12px; border-radius: 999px;
    background: var(--s2-grad); color: #fff;
    font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.s2-plan__name { font-size: 1.22rem; font-weight: 620; letter-spacing: -.03em; }
.s2-plan__tagline {
    margin-top: 6px; min-height: 42px;
    font-size: 13.4px; color: var(--s2-ink-3); line-height: 1.45;
}
.s2-plan__price {
    display: flex; align-items: baseline; gap: 5px;
    margin: 18px 0 4px;
}
.s2-plan__price strong {
    font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.s2-plan__price span { font-size: 13.5px; color: var(--s2-ink-4); }
.s2-plan__hint {
    min-height: 20px;
    font-size: 12.5px; color: var(--s2-ink-4);
    padding-bottom: 20px; border-bottom: 1px solid var(--s2-line-soft);
}
.s2-plan__list { display: grid; gap: 10px; padding: 20px 0 24px; }
.s2-plan__list li {
    position: relative; padding-left: 20px;
    font-size: 13.8px; color: var(--s2-ink-2); line-height: 1.45;
}
.s2-plan__list li::before {
    content: "";
    position: absolute; left: 0; top: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--s2-accent-line);
}
.s2-plan.is-featured .s2-plan__list li::before { background: var(--s2-accent); }
.s2-plan .s2-btn { margin-top: auto; min-height: 46px; font-size: 14.5px; }

.s2-plans__foot {
    margin-top: clamp(24px, 3vw, 34px);
    text-align: center;
    font-size: 13.8px; color: var(--s2-ink-3);
}
.s2-plans__foot a { color: var(--s2-accent); font-weight: 600; border-bottom: 1px solid var(--s2-accent-line); }
.s2-plans__foot a:hover { border-color: var(--s2-accent); }

.s2-plan__price--custom strong {
    font-size: clamp(1.35rem, 1.9vw, 1.65rem);
    letter-spacing: -.03em;
}
.s2-plan.is-custom {
    background: linear-gradient(180deg, #fafafa 0%, var(--s2-paper) 42%);
}

/* ---- Comparação completa (#planos-comparacao) ---- */
.s2-plans__compare {
    margin-top: clamp(40px, 5vw, 64px);
    display: grid;
    gap: 0;
    justify-items: center;
}
.s2-plans__compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--s2-line);
    background: var(--s2-paper);
    color: var(--s2-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 16, 26, .04);
    transition: border-color .15s var(--s2-ease), background .15s var(--s2-ease), transform .15s var(--s2-ease), box-shadow .15s var(--s2-ease);
}
.s2-plans__compare-btn span {
    font-size: 13px;
    opacity: .55;
    transition: transform .2s var(--s2-ease);
}
.s2-plans__compare-btn:hover {
    border-color: color-mix(in srgb, var(--s2-accent) 40%, var(--s2-line));
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -16px rgba(20, 16, 26, .35);
}
.s2-plans__compare-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--s2-accent) 55%, transparent);
    outline-offset: 3px;
}
.s2-plans__compare-btn[aria-expanded="true"] {
    border-color: var(--s2-ink);
    background: var(--s2-ink);
    color: #fff;
}
.s2-plans__compare-btn[aria-expanded="true"] span {
    opacity: .8;
    transform: rotate(180deg);
}
.s2-cmp[hidden] { display: none !important; }
.s2-cmp {
    width: 100%;
    margin-top: clamp(28px, 4vw, 40px);
    padding-top: clamp(28px, 3.5vw, 40px);
    border-top: 1px solid var(--s2-line);
}
.s2-cmp__head {
    max-width: 560px;
    margin: 0 auto clamp(28px, 3.5vw, 40px);
    text-align: center;
}
.s2-cmp__kicker {
    margin: 0 0 10px;
    font-size: 12px; font-weight: 650;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--s2-accent);
}
.s2-cmp__title {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    font-weight: 650; letter-spacing: -.035em;
    color: var(--s2-ink);
}
.s2-cmp__lead {
    margin: 0;
    font-size: 14.5px; line-height: 1.55;
    color: var(--s2-ink-3);
}

.s2-cmp__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--s2-line);
    border-radius: var(--s2-r-lg);
    background: var(--s2-paper);
    box-shadow: 0 18px 50px -36px rgba(15, 23, 42, .28);
}
.s2-cmp__scroll:focus-visible {
    outline: 2px solid var(--s2-accent);
    outline-offset: 3px;
}

.s2-cmp__table {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.6px;
}
.s2-cmp__table thead th {
    position: sticky; top: 0; z-index: 3;
    padding: 18px 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--s2-line);
    text-align: center;
    vertical-align: bottom;
}
.s2-cmp__th-feat {
    position: sticky; left: 0; z-index: 4 !important;
    width: 28%; min-width: 200px;
    text-align: left !important;
    font-size: 11.5px; font-weight: 650;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--s2-ink-4);
    background: #f8fafc;
    box-shadow: 1px 0 0 var(--s2-line);
}
.s2-cmp__th-plan { width: 18%; }
.s2-cmp__th-name {
    display: block;
    font-size: 14px; font-weight: 650;
    letter-spacing: -.02em; color: var(--s2-ink);
}
.s2-cmp__th-price {
    display: block;
    margin-top: 4px;
    font-size: 12.5px; font-weight: 500;
    color: var(--s2-ink-4);
    font-variant-numeric: tabular-nums;
}
.s2-cmp__th-plan.is-highlight {
    background: linear-gradient(180deg, color-mix(in srgb, var(--s2-accent) 10%, #fff) 0%, #f8fafc 100%);
}
.s2-cmp__th-plan.is-highlight .s2-cmp__th-name { color: var(--s2-accent); }
.s2-cmp__th-plan.is-custom .s2-cmp__th-price {
    font-style: italic;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 14px;
    color: var(--s2-ink-2);
}

.s2-cmp__section td {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--s2-cmp-sec, #0ea5e9) 9%, #fff);
    border-top: 1px solid color-mix(in srgb, var(--s2-cmp-sec, #0ea5e9) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--s2-cmp-sec, #0ea5e9) 14%, transparent);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--s2-cmp-sec, #0ea5e9);
}
.s2-cmp__sec-dot {
    display: inline-block;
    width: 7px; height: 7px; margin-right: 8px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.s2-cmp__row th,
.s2-cmp__row td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--s2-line-soft);
    vertical-align: middle;
}
.s2-cmp__row:last-child th,
.s2-cmp__row:last-child td { border-bottom: 0; }
.s2-cmp__row:hover th,
.s2-cmp__row:hover td { background: #fafbfc; }

.s2-cmp__feat {
    position: sticky; left: 0; z-index: 2;
    text-align: left;
    font-weight: 500; color: var(--s2-ink-2);
    background: var(--s2-paper);
    box-shadow: 1px 0 0 var(--s2-line-soft);
}
.s2-cmp__row:hover .s2-cmp__feat { background: #fafbfc; }

.s2-cmp__cell {
    text-align: center;
    font-weight: 550;
    color: var(--s2-ink);
    font-variant-numeric: tabular-nums;
}
.s2-cmp__cell.is-highlight {
    background: color-mix(in srgb, var(--s2-accent) 4%, transparent);
}
.s2-cmp__row:hover .s2-cmp__cell.is-highlight {
    background: color-mix(in srgb, var(--s2-accent) 7%, #fafbfc);
}

.s2-cmp__yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, #16a34a 14%, #fff);
    color: #15803d;
}
.s2-cmp__no {
    color: var(--s2-ink-4);
    font-weight: 400;
}

@media (max-width: 1080px) { .s2-plans__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
    .s2-plans__grid { grid-template-columns: 1fr; gap: 22px; }
    .s2-plan__tagline, .s2-plan__hint { min-height: 0; }
    .s2-cmp__head { text-align: left; margin-left: 0; margin-right: 0; }
}

/* =================================================================== FAQ */
.s2-faq__list { display: grid; border-top: 1px solid var(--s2-line); }
.s2-faq__item { border-bottom: 1px solid var(--s2-line); }
.s2-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    padding: 24px 4px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.02rem, 1.5vw, 1.24rem); font-weight: 620; letter-spacing: -.025em;
    transition: color .18s;
}
.s2-faq__item summary::-webkit-details-marker { display: none; }
.s2-faq__item summary:hover { color: var(--s2-accent); }
.s2-faq__item summary i {
    position: relative; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--s2-line);
    transition: background-color .2s, border-color .2s, transform .25s var(--s2-ease);
}
.s2-faq__item summary i::before,
.s2-faq__item summary i::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 10px; height: 1.6px; border-radius: 2px;
    background: var(--s2-ink);
    transform: translate(-50%, -50%);
    transition: transform .25s var(--s2-ease), background-color .2s;
}
.s2-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.s2-faq__item[open] summary { color: var(--s2-accent-deep); }
.s2-faq__item[open] summary i { background: var(--s2-accent-soft); border-color: var(--s2-accent-line); transform: rotate(180deg); }
.s2-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.s2-faq__item[open] summary i::before,
.s2-faq__item[open] summary i::after { background: var(--s2-accent); }
.s2-faq__answer { padding: 0 60px 26px 4px; }
.s2-faq__answer p { font-size: 15.4px; color: var(--s2-ink-2); line-height: 1.68; max-width: 74ch; }
@media (max-width: 560px) { .s2-faq__answer { padding-right: 12px; } }

/* ============================================================= CTA FINAL */
.s2-final {
    padding: clamp(72px, 10vw, 128px) var(--s2-pad);
    background:
        radial-gradient(720px 420px at 20% 0%, rgba(162, 28, 175, .34), transparent 62%),
        radial-gradient(680px 420px at 84% 96%, rgba(76, 29, 149, .42), transparent 60%),
        #14101a;
    color: #fff;
    text-align: center;
}
.s2-final__inner { max-width: 720px; margin: 0 auto; }
.s2-final__logo { width: 168px; height: auto; margin: 0 auto 34px; }
.s2-final__title {
    font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 620; letter-spacing: -.04em; line-height: 1.04;
}
.s2-final__title em { font-size: 1.05em; color: #e9d5ff; }
.s2-final__lead {
    margin: 22px auto 0; max-width: 54ch;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: rgba(255, 255, 255, .72); line-height: 1.62;
}
.s2-final__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.s2-final__micro {
    margin-top: 22px;
    font-size: 13px; color: rgba(255, 255, 255, .5);
}

/* ================================================================ LIGHTBOX */
body.s2 img:not(.s2-lb__img):not([data-s2-no-lb]) {
    cursor: zoom-in;
}
.s2-lb {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(56px, 8vh, 72px) clamp(16px, 4vw, 40px) clamp(20px, 4vh, 40px);
    background: rgba(15, 23, 42, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s var(--s2-ease, ease), visibility .22s;
}
.s2-lb[hidden] { display: none !important; }
.s2-lb.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.s2-lb__img {
    display: block;
    max-width: min(96vw, 1280px);
    max-height: calc(100vh - 96px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
    transform: scale(.96);
    transition: transform .22s var(--s2-ease, ease);
    cursor: default;
}
.s2-lb.is-open .s2-lb__img { transform: scale(1); }
.s2-lb__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 1;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.s2-lb__close:hover {
    background: rgba(255, 255, 255, .22);
    transform: scale(1.04);
}
.s2-lb__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
body.s2-lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .s2-lb, .s2-lb__img { transition: none; }
    .s2-lb.is-open .s2-lb__img { transform: none; }
}

/* ================================================================ FOOTER */
.s2-foot {
    background: var(--s2-paper);
    border-top: 1px solid var(--s2-line);
    padding: clamp(52px, 7vw, 78px) var(--s2-pad) 26px;
    overflow: hidden;
}
.s2-foot__top {
    max-width: var(--s2-max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(32px, 5vw, 64px);
}
.s2-foot__brand img { width: 128px; height: auto; margin-bottom: 18px; }
.s2-foot__brand p { font-size: 14.5px; color: var(--s2-ink-3); line-height: 1.62; max-width: 40ch; }

.s2-foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.s2-foot__cols > div { display: grid; gap: 10px; align-content: start; }
.s2-foot__cols h3 {
    font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
    color: var(--s2-ink-4); margin-bottom: 4px;
}
.s2-foot__cols a { font-size: 14.5px; color: var(--s2-ink-2); transition: color .16s; }
.s2-foot__cols a:hover { color: var(--s2-accent); }

.s2-foot__word {
    max-width: var(--s2-max); margin: clamp(46px, 6vw, 72px) auto 0;
    font-size: clamp(4rem, 17vw, 15rem);
    font-weight: 650; letter-spacing: -.06em; line-height: .8;
    color: var(--s2-paper-3);
    user-select: none;
}
@supports (-webkit-text-stroke: 1px currentColor) {
    .s2-foot__word {
        color: transparent;
        -webkit-text-stroke: 1px var(--s2-line);
    }
}

.s2-foot__legal {
    max-width: var(--s2-max); margin: 26px auto 0;
    padding-top: 22px; border-top: 1px solid var(--s2-line-soft);
    display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
    font-size: 13px; color: var(--s2-ink-4);
}

@media (max-width: 860px) {
    .s2-foot__top { grid-template-columns: 1fr; }
    .s2-foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .s2-foot__cols { grid-template-columns: 1fr; gap: 22px; }
}

/* ================================================== Motion reduzida/print */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .s2 *, .s2 *::before, .s2 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .s2-reveal { opacity: 1 !important; transform: none !important; }
    .s2-orbit__flow line { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .28; }
    .s2-orbit__sweep { display: none; }
    .s2-ail__aura { animation: none; opacity: 1; }
}

@media print {
    .s2-head, .s2-topbar, .s2-drawer, .s2-marquee, .s2-burger { display: none !important; }
    .s2-final { background: #fff !important; color: #000 !important; }
}