/* Camadas e rolagem (Parte B, 25/09/2026). Só no computador (acima de 1000px) e só com o palco vivo
   (html[data-palco]); o layout é reservado antes da malha; sem WebGL o site continua como antes.
   Cada seção clara vira: interlúdio no palco (cabeçalho preso ao topo, com a forma da seção ao lado) e depois
   a placa clara (o .section-body) de largura total, com cantos arredondados (raio-janela), que sobe por cima. */
/* o logo do tema escuro só existe no computador com o palco vivo */
.site-header .brand img.logo-escuro{display:none}
@media (min-width:1001px){
/* a seção deixa de pintar o fundo: o palco aparece entre as placas */
html[data-palco] main .content-section.section-1,
html[data-palco] main .content-section.section-2,
html[data-palco] main .content-section.section-3,
html[data-palco] main .content-section.section-4,
html[data-palco] main .content-section.section-founder,
html[data-palco] main .content-section.deliverables,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-1,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-2,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-3,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-4,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-founder,
html[data-palco] main .content-section:not(#resultado):not(#conversa).deliverables{background:transparent;color:#F7F5F8;padding:0;border:0}
html[data-palco] main .section-wrap,
html[data-palco] main .delivery-wrap,
html[data-palco] main #implementacao .section-wrap{display:block;max-width:none;margin:0}

/* interlúdio: cabeçalho da seção no palco, preso ao topo enquanto a placa sobe por cima (tema escuro) */
html[data-palco] main .interludio{position:sticky;top:0;z-index:0;box-sizing:border-box;width:100%;max-width:none;min-height:90vh;margin:0;padding:96px max(5vw,24px,calc((100vw - 1240px)/2)) 64px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:0;color:#F7F5F8;transition:opacity .2s linear}
html[data-palco] main .interludio>*{width:44%;max-width:560px}
/* lado direito: a coluna de texto começa em 55% da largura e tudo alinha à esquerda dentro dela */
html[data-palco] main .interludio[data-lado="direita"]{align-items:flex-start;padding-left:55%}
html[data-palco] main .interludio[data-lado="direita"]>*{width:100%;max-width:560px}
html[data-palco] main .interludio[data-lado="centro"]{align-items:center;text-align:center}
html[data-palco] main .interludio[data-lado="centro"]>*{width:100%;max-width:760px}
/* dentro do cabeçalho de entregas a pílula e o h2 vivem num div */
html[data-palco] main .interludio>div{display:flex;flex-direction:column;align-items:flex-start;margin:0;text-align:left}
html[data-palco] main .interludio .eyebrow{width:auto;max-width:none;background:transparent;border:1px solid #F7F5F8;color:#F7F5F8}
html[data-palco] main .interludio h2{width:100%;max-width:20ch;margin:0;color:#FFFFFF;text-align:inherit}
html[data-palco] main .interludio[data-lado="centro"] h2{margin:0 auto}
html[data-palco] main .interludio>p,html[data-palco] main .delivery-heading.interludio>p{color:#DED6E0;margin:20px 0 0;max-width:62ch;text-align:inherit}
html[data-palco] main .interludio[data-lado="centro"]>p{margin:20px auto 0}
html[data-palco] main .delivery-heading.interludio h2{max-width:20ch}

/* placa: o corpo da seção, largura total, cantos arredondados, sem sombra; sobe por cima do palco e do interlúdio */
html[data-palco] main .placa{position:relative;z-index:2;box-sizing:border-box;width:100%;max-width:none;margin:0 0 12vh;padding:96px max(5vw,24px,calc((100vw - 1240px)/2)) 120px;border-radius:24px;box-shadow:none;background:#FFFFFF;color:#120B16}
html[data-palco] main .section-1 .placa,
html[data-palco] main .deliverables .placa{background:#F7F5F8}
html[data-palco] main .section-3 .placa{background:#F7F5F8;color:#120B16}
html[data-palco] main .placa>*{max-width:1240px;margin-left:auto;margin-right:auto}
html[data-palco] main .section-1 .placa>.section-note{margin-left:auto;margin-right:auto}
html[data-palco] main .placa .delivery-note{margin-top:32px}
/* a última placa antes do fechamento fica colada ao fechamento escuro */
html[data-palco] main .section-3 .placa{margin-bottom:0;border-bottom-left-radius:22px;border-bottom-right-radius:22px}

}
/* cabeçalho do site em todas as larguras (celular inclusive) */
/* cabeçalho do site: escuro e transparente sobre o palco, branco sobre placa clara (decidido por data-theme) */
html[data-palco="live"] body>header.site-header{background:transparent;color:#FFFFFF;border-bottom:1px solid transparent;transition:background-color .2s linear,color .2s linear,border-color .2s linear}
html[data-palco="live"] body>header.site-header[data-theme="claro"]{background:#FFFFFF;color:#120B16;border-bottom-color:#DED6E0}
html[data-palco="live"] body>header.site-header .brand>span,html[data-palco="live"] body>header.site-header nav a{color:inherit}
html[data-palco="live"] body>header.site-header nav a:not(.nav-contact)::after{background:#F7F5F8}
html[data-palco="live"] body>header.site-header[data-theme="claro"] nav a:not(.nav-contact)::after{background:#5C1041}
html[data-palco="live"] body>header.site-header .nav-contact,html[data-palco="live"] body>header.site-header .nav-contact:hover{background:transparent;border:1px solid rgba(247,245,248,.32);color:#F7F5F8}
html[data-palco="live"] body>header.site-header .nav-contact:hover{background:transparent;border-color:#F7F5F8;color:#F7F5F8}
html[data-palco="live"] body>header.site-header[data-theme="claro"] .nav-contact{background:transparent;border-color:rgba(18,11,22,.28);color:#120B16}
html[data-palco="live"] body>header.site-header[data-theme="claro"] .nav-contact:hover{background:transparent;border-color:#5C1041;color:#5C1041}
html[data-palco="live"] body>header.site-header:not([data-theme="claro"]) .brand img.logo-claro{display:none}
html[data-palco="live"] body>header.site-header:not([data-theme="claro"]) .brand img.logo-escuro{display:block}
/* rodapé: tema escuro e transparente sobre o palco, em todas as larguras */
html[data-palco="live"] body>footer{background:transparent;border-top:1px solid #625865;color:#DED6E0}
html[data-palco="live"] body>footer .footer-brand,html[data-palco="live"] body>footer>a.footer-phone,html[data-palco="live"] body>footer>a:last-child{color:#FFFFFF}
html[data-palco="live"] body>footer .footer-tagline{color:#DED6E0}

/* celular: ícone do menu branco e menu das seções em superficie do tema escuro */
@media (max-width:720px){
html[data-palco="live"] html.has-menu header.site-header .menu-toggle,html.has-menu[data-palco="live"] header.site-header .menu-toggle{color:#FFFFFF}
html.has-menu[data-palco="live"] header.site-header .menu-toggle:focus-visible{outline-color:#F7F5F8}
html[data-palco="live"] nav.mobile-shortcuts,html.has-menu[data-palco="live"] nav.mobile-shortcuts{background:#120B16;border-top-color:#625865;border-bottom-color:#625865}
html[data-palco="live"] nav.mobile-shortcuts a,html.has-menu[data-palco="live"] nav.mobile-shortcuts a{color:#FFFFFF;border-bottom-color:#625865}
html.has-menu[data-palco="live"] nav.mobile-shortcuts a:focus-visible{outline-color:#F7F5F8}
}

/* Celular e tablet (até 1000px): interlúdio empilhado (forma em cima, cabeçalho embaixo) e placas com cantos de 18px */
@media (max-width:1000px){
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-1,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-2,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-3,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-4,
html[data-palco] main .content-section:not(#resultado):not(#conversa).section-founder,
html[data-palco] main .content-section:not(#resultado):not(#conversa).deliverables{background:transparent;color:#F7F5F8;padding:0;border:0}
html[data-palco] main .section-wrap,html[data-palco] main .delivery-wrap,html[data-palco] main #implementacao .section-wrap,html[data-palco] main .section-1 .section-wrap{display:block;max-width:none;margin:0}
/* interlúdio: a forma ocupa os 46% de cima (padding), o texto vem embaixo, alinhado à esquerda com 20px */
html[data-palco] main .interludio,html[data-palco] main #exemplo .interludio,html[data-palco] main #continuidade .interludio,html[data-palco] main #fundador .interludio,html[data-palco] main #entregaveis .interludio,html[data-palco] main #implementacao .interludio,html[data-palco] main #diagnostico .interludio{position:sticky;top:0;z-index:0;box-sizing:border-box;width:100%;max-width:none;min-height:100vh;margin:0;padding:46vh 20px 40px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;gap:0;color:#F7F5F8;transition:opacity .2s linear}
html[data-palco] main .interludio>*,html[data-palco] main .interludio[data-lado="direita"]>*,html[data-palco] main .interludio[data-lado="centro"]>*{width:100%;max-width:none;margin-left:0;margin-right:0}
html[data-palco] main .interludio>div{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin:0}
html[data-palco] main .content-section .interludio .eyebrow{width:auto;max-width:none;align-self:flex-start;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-size:14px;margin:0 0 20px;background:transparent;border:1px solid #F7F5F8;color:#F7F5F8}
html[data-palco] main .interludio h2,html[data-palco] main .content-section .interludio h2{width:100%;max-width:20ch;margin:0;color:#FFFFFF;text-align:left;font-size:32px;line-height:1.15;letter-spacing:-.03em;text-wrap:pretty}
html[data-palco] main .interludio>p,html[data-palco] main .content-section .interludio>p{color:#DED6E0;margin:16px 0 0;max-width:none;text-align:left;font-size:16px;line-height:1.6}
/* placa: largura total, cantos de 18px, 72px de padding vertical, conteúdo com 20px de margem; palco à vista antes do próximo interlúdio */
html[data-palco] #exemplo .placa,html[data-palco] #continuidade .placa,html[data-palco] #fundador .placa,html[data-palco] #entregaveis .placa,html[data-palco] #implementacao .placa,html[data-palco] #diagnostico .placa{position:relative;z-index:2;box-sizing:border-box;width:100%;max-width:none;margin:0 0 10vh;padding:72px 20px;border-radius:18px;box-shadow:none;background:#FFFFFF;color:#120B16;text-align:left}
html[data-palco] #continuidade .placa,html[data-palco] #entregaveis .placa{background:#F7F5F8}
html[data-palco] #diagnostico .placa{background:#F7F5F8;color:#120B16;margin-bottom:0}
html[data-palco] main .placa>*{max-width:none;margin-left:0;margin-right:0}
/* fechamento: o cérebro inteiro em cima (~40% da altura), o texto embaixo */
html[data-palco] #conversa .brain-dock{height:40vh;margin:0 0 32px}
}
@media (min-width:721px) and (max-width:1000px){
/* tablet: faixa de cima da primeira tela para o cérebro (como no celular), texto embaixo */
html[data-palco] .hero{padding-top:40vh}
html[data-palco] .hero .hero-copy{margin-top:0}
}

@media (prefers-reduced-motion:reduce){html[data-palco] main .interludio{transition:none;opacity:1!important;transform:none!important}}
@media print{.interludio,.placa{position:static;background:#fff;color:#000}}