/* Cinema editorial. Cinco familias: palco existente, abertura, tipografia,
   contexto existente e microinteracoes. Sem biblioteca ou cursor customizado. */
:root{--elite-noir:#0E0D0C;--elite-ivory:#F4ECDE;--elite-wine:#7B2437;--elite-gold:#C9A55E;--elite-sage:#A9B9A2;--elite-muted:#CFC3AF;--elite-line:rgba(201,165,94,.24)}
html{scroll-padding-top:84px}
[data-screen-label="Canvas conversacional"] h1{font-size:clamp(3.5rem,6.6vw,6.4rem)!important;line-height:.96!important;letter-spacing:-.035em!important;flex-basis:550px!important;max-width:800px;text-wrap:balance}
[data-screen-label="Canvas conversacional"] h1 i{font-weight:500}
section[data-screen-label]{scroll-margin-top:64px}
section[data-screen-label] h2{font-size:clamp(2.5rem,5.4vw,4.8rem)!important;line-height:1!important;letter-spacing:-.025em;max-width:900px!important}
section[data-screen-label] h2 i,section[data-screen-label] h2 em{font-weight:400}
#como{padding-top:88px!important}
#como h2{max-width:800px!important}
#cockpit{background:var(--elite-noir)!important}
#cockpit .bg-vivo{opacity:.3}
#rafaela{background:linear-gradient(130deg,var(--elite-wine),#32151F 75%)!important}
#rafaela h2{font-size:clamp(2.7rem,4.8vw,4.6rem)!important}
#prova,[data-screen-label="Perguntas"]{background:var(--elite-ivory)!important;color:var(--elite-noir)!important;--marfim:var(--elite-noir)!important;--m2:#51443C!important;--m3:#67564A!important;--ouro:var(--elite-wine)!important;--ouro2:var(--elite-wine)!important;--linha:rgba(14,13,12,.18)!important;--linha2:rgba(14,13,12,.22)!important}
#prova .bg-vivo,[data-screen-label="Perguntas"] .bg-vivo{display:none}
#prova a{color:var(--elite-wine)!important}
#prova h2{max-width:840px!important}
.elite-film{position:relative;isolation:isolate;margin:0 0 54px;min-height:360px;overflow:hidden;border:1px solid var(--elite-line);border-radius:4px;background:var(--elite-noir);color:var(--elite-ivory);display:flex;align-items:flex-end;aspect-ratio:2/1}
.elite-film-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,13,12,.3),rgba(14,13,12,.8)),url('/assets/v6/particulas-poster.jpg') center/cover}
.elite-film-art i{position:absolute;inset:9% 12% 9% 55%;border:1px solid var(--elite-line);background:linear-gradient(125deg,rgba(244,236,222,.15),transparent);transform:skewY(-8deg)}
.elite-film-art i:nth-child(2){inset:18% 20% 18% 46%}.elite-film-art i:nth-child(3){inset:28% 28% 28% 37%}
.elite-film-art>span{position:absolute;right:7%;top:2%;font:italic 300 clamp(8rem,20vw,18rem)/1 'Cormorant Garamond',Georgia,serif;color:var(--elite-gold);opacity:.16}
.elite-film figcaption{padding:clamp(24px,4vw,54px);max-width:700px;background:linear-gradient(90deg,rgba(14,13,12,.92),transparent);box-sizing:border-box}
.elite-film small,.elite-eyebrow{display:block;font:500 .65rem/1.7 'JetBrains Mono',monospace;letter-spacing:.15em;color:var(--elite-muted)}
.elite-film strong{display:block;margin-top:30px;font:400 clamp(2rem,3.8vw,3.6rem)/1.03 'Cormorant Garamond',Georgia,serif;text-wrap:balance}
.elite-film p{font-size:.9rem;line-height:1.6;color:var(--elite-muted);max-width:360px;margin:18px 0 0}
.elite-film-v2{min-height:180px;aspect-ratio:4/1;margin:32px 0;border-radius:28px 28px 28px 0}.elite-film-v2 strong{font-size:2rem;margin-top:12px}.elite-film-v2 .elite-film-art i{inset:50% 8% auto 8%;height:1px;background:var(--elite-gold);border:0;transform:none}.elite-film-v2 .elite-film-art i:nth-child(2){top:55%;opacity:.3}.elite-film-v2 .elite-film-art i:nth-child(3){top:60%;opacity:.15}
.elite-film-v3{aspect-ratio:3/1;min-height:250px}.elite-film-v3 .elite-film-art i{inset:45% 8% auto 48%;height:2px;background:var(--elite-wine);border:0;transform:none}.elite-film-v3 .elite-film-art i:nth-child(2){left:10%;right:52%;background:none;border-top:1px dashed var(--elite-gold)}.elite-film-v3 .elite-film-art i:nth-child(3){left:47%;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--elite-gold)}
.elite-method{color:var(--elite-muted);font:italic 400 1.45rem/1.2 'Cormorant Garamond',Georgia,serif;padding-bottom:22px;border-bottom:1px solid var(--elite-line);margin:0 0 24px}
.elite-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 0 12px}
.elite-actions a,.elite-actions button{min-height:48px;padding:14px 24px;border-radius:40px;font:500 .92rem/1.4 'Instrument Sans',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:18px;border:1px solid var(--elite-line);background:transparent;color:var(--elite-ivory);cursor:pointer}
.elite-actions .elite-primary{background:var(--elite-ivory);color:var(--elite-noir);border-color:var(--elite-ivory)}
.elite-actions a:hover,.elite-actions button:hover{transform:translateY(-2px)}
.elite-actions :focus-visible{outline:3px solid var(--elite-gold);outline-offset:4px}
.elite-ready [data-reveal]{clip-path:inset(6% 6% 6% 6% round 20px);transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1)}
.elite-ready [data-reveal].elite-in{clip-path:inset(0 round 4px)}
.elite-ready section h2{transition:translate .7s ease}.elite-ready section h2.elite-in{translate:0 0}
html[data-elite-paused] *,html[data-elite-paused] *::before,html[data-elite-paused] *::after{animation-play-state:paused!important;transition-duration:0s!important;scroll-behavior:auto!important}
html[data-elite-paused] [data-reveal]{clip-path:none!important}
@media(max-width:759px){
 [data-screen-label="Canvas conversacional"] h1{font-size:clamp(3.2rem,12.4vw,4.6rem)!important;flex-basis:auto!important}
 section[data-screen-label] h2{font-size:clamp(2.3rem,10vw,3.3rem)!important}
 .elite-film{min-height:330px;aspect-ratio:4/5;margin-bottom:32px;border-radius:4px}
 .elite-film figcaption{padding:24px}.elite-film small{font-size:.58rem;letter-spacing:.08em}
 .elite-film-art i{inset:8% 12% 42% 18%}.elite-film-art i:nth-child(2){inset:15% 18% 35% 25%}.elite-film-art i:nth-child(3){inset:22% 25% 28% 32%}
 .elite-film strong{font-size:2.5rem;margin-top:20px}.elite-film p{font-size:.87rem}
 .elite-film-v2{aspect-ratio:auto;min-height:200px}.elite-film-v2 strong{font-size:2rem}
 .elite-film-v3{aspect-ratio:1;min-height:280px}.elite-film-v3 strong{font-size:2.3rem}
 .elite-actions{padding:0 20px}.elite-actions a,.elite-actions button{width:100%;justify-content:center;box-sizing:border-box}
 .elite-ready [data-reveal]{clip-path:none}
}
/* "Reduzir movimento" (30/09, N3): ja nao apaga tudo. Sai o que desloca, gira ou amplia; fica o que so aparece (opacidade, cor, brilho, letras).
   Transicoes: so as de aparecer continuam (as de transform/translate/scale/rotate/clip-path/tamanho passam a ser instantaneas).
   Animacoes de keyframes: o elite.js tira de cada keyframe a parte que move (transform, translate, rotate, scale, top/left/margin...).
   A pausa da pessoa (html[data-elite-paused]) continua parando TUDO. */
@media(prefers-reduced-motion:reduce){
 .elite-ready [data-reveal]{clip-path:none!important}
 *,*::before,*::after{scroll-behavior:auto!important;transition-property:opacity,color,background-color,border-color,text-decoration-color,box-shadow,filter,fill,stroke,visibility!important}
 .elite-actions a:hover,.elite-actions button:hover{transform:none}
 .rl-fio i{animation:none!important}
 .rl-rafa:hover .rl-foto img{transform:translateX(-50%)}
}

/* refino 28/09 (Opus): 1) Perguntas legivel: o fundo vivo escuro (section[data-screen-label="Perguntas"], !important) vencia o marfim */
html body section[data-screen-label="Perguntas"]{background:var(--elite-ivory)!important}
/* 3) cada lugar de video com imagem propria (telas reais do Cockpit, dados ficticios) em vez do mesmo poster 3 vezes */
.elite-film-v2 .elite-film-art{background:linear-gradient(90deg,rgba(14,13,12,.72),rgba(14,13,12,.9)),url('/assets/media/cockpit-final/agenda-1440-escuro.webp?v=4183036d17') center 30%/cover}
.elite-film-v3 .elite-film-art{background:linear-gradient(90deg,rgba(14,13,12,.7),rgba(14,13,12,.88)),url('/assets/media/cockpit-final/conversas-1440-escuro.webp?v=c2d0963b6e') center 20%/cover}
@media(max-width:759px){
 .elite-film-v2 .elite-film-art{background-image:linear-gradient(90deg,rgba(14,13,12,.72),rgba(14,13,12,.9)),url('/assets/media/cockpit-final/agenda-390-escuro.webp?v=44631cd68d')}
 .elite-film-v3 .elite-film-art{background-image:linear-gradient(90deg,rgba(14,13,12,.7),rgba(14,13,12,.88)),url('/assets/media/cockpit-final/conversas-390-escuro.webp?v=6eedabe88f')}
}

/* lote 28/09 · titulo do app com a mesma substituta da primeira tela estatica: sem salto na passagem, mesmo antes da Cormorant chegar */
#dc-root [data-screen-label="Canvas conversacional"] h1{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,serif!important}

/* lote 28/09 · Rafaela cria as Rafas: a pessoa (foto real) liga por um fio as cinco Rafas (IA); os retratos sao o seletor */
#crie .rl{display:grid;grid-template-columns:minmax(170px,208px) 64px minmax(0,1fr);align-items:stretch;margin-top:36px}
.rl-mae{position:relative;margin:0;height:380px;border-radius:18px;overflow:hidden;border:1px solid rgba(169,185,162,.5);background:#0B0809}
.rl-mae-foto{position:absolute;inset:0;display:block}
.rl-mae img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.rl-mae figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 16px 16px;background:linear-gradient(180deg,transparent,rgba(11,8,9,.94) 50%)}
.rl-mae b{display:block;margin-top:8px;font:500 1.4rem/1.1 'Cormorant Garamond',Georgia,serif;color:#F4ECDE}
.rl-mae small{display:block;margin-top:4px;font-size:.78rem;line-height:1.45;color:#CFC3AF}
.rl-tag{display:inline-block;padding:5px 9px;border-radius:99px;font:600 .58rem/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#0E0D0C;background:#A9B9A2}
.rl-fio{position:relative}
.rl-fio::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:linear-gradient(90deg,rgba(169,185,162,.8),rgba(228,192,120,.95))}
.rl-fio i{position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:#E4C078;box-shadow:0 0 12px #E4C078;animation:rlFio 3.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes rlFio{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(41px);opacity:0}}
.rl-rafas{display:flex;gap:10px;height:380px;min-width:0}
.rl-rafa{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:#F4ECDE;background:#140C10;border:1px solid rgba(244,236,222,.12);border-radius:18px;transition:flex-grow .6s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .3s}
.rl-rafa[aria-pressed="true"]{flex-grow:2.7}
.rl-foto{position:absolute;inset:0;display:block;background:#1B1418;background:radial-gradient(130% 72% at 50% 6%,color-mix(in srgb,var(--rc) 72%,#1B1418),#120A0E 80%)}
.rl-foto img{position:absolute;left:50%;top:6px;height:calc(100% - 6px);width:auto;max-width:none;transform:translateX(-50%);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.rl-v{position:absolute;left:12px;bottom:14px;writing-mode:vertical-rl;transform:rotate(180deg);font:500 1.05rem/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;white-space:nowrap;color:#F4ECDE;text-shadow:0 1px 10px rgba(11,8,9,.9);transition:opacity .3s}
.rl-txt{position:absolute;left:0;right:0;bottom:0;display:block;padding:48px 16px 16px;background:linear-gradient(180deg,transparent,rgba(11,8,9,.92) 44%);opacity:0;transition:opacity .35s .1s}
.rl-txt b{display:block;font:500 1.5rem/1.05 'Cormorant Garamond',Georgia,serif}
.rl-txt small{display:block;margin-top:6px;font:600 .58rem/1.3 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#E4C078;color:color-mix(in srgb,var(--rc) 45%,#F4ECDE)}
.rl-lim{display:block;margin-top:8px;font-size:.82rem;line-height:1.4;color:#CFC3AF}
.rl-lim strong{color:#F4ECDE;font-weight:600}
.rl-rafa[aria-pressed="true"] .rl-txt{opacity:1}
.rl-rafa[aria-pressed="true"] .rl-v{opacity:0}
.rl-rafa:focus-visible{outline:2px solid #E4C078;outline-offset:3px}
.rl-rafa::after,.rl-mae::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,30%),rgba(241,228,196,.16),transparent 65%);opacity:0;transition:opacity .35s}
@media (hover:hover) and (pointer:fine){.rl-rafa:hover::after,.rl-mae:hover::after{opacity:1}.rl-rafa:hover .rl-foto img{transform:translateX(-50%) scale(1.04)}.rl-rafa:not([aria-pressed="true"]):hover{border-color:color-mix(in srgb,var(--rc) 60%,transparent)}}
.rl-dica{margin:22px 0 0;max-width:640px;font-size:.92rem;line-height:1.6;color:#B2A693}
.cr-conv,.cr-trilha{position:relative}
.cr-conv::after,.cr-trilha::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0),rgba(228,192,120,.07),transparent 70%);opacity:0;transition:opacity .35s}
@media (hover:hover) and (pointer:fine){.cr-conv:hover::after,.cr-trilha:hover::after{opacity:1}}
/* tablet e celular: a Rafaela numa linha, as Rafas numa faixa de toque (rolagem nativa, com a proxima aparecendo) */
@media (max-width:1000px){
 #crie{--rl-sangria:40px}
 #crie .rl{grid-template-columns:minmax(0,1fr);margin-top:28px}
 .elite-ready #crie .rl[data-reveal]{clip-path:none}
 .rl-mae{height:auto;display:flex;align-items:center;gap:14px;overflow:visible;border:0;border-radius:0;background:none}
 .rl-mae-foto{position:relative;inset:auto;flex:none;width:78px;height:98px;overflow:hidden;border-radius:14px;border:1px solid rgba(169,185,162,.55)}
 .rl-mae figcaption{position:static;padding:0;background:none}
 .rl-mae::after{display:none}
 .rl-fio{height:30px}
 .rl-fio::before{left:39px;right:auto;top:2px;bottom:2px;width:1px;height:auto;background:linear-gradient(180deg,rgba(169,185,162,.8),rgba(228,192,120,.95))}
 .rl-fio i{left:36px;top:2px;margin:0;animation-name:rlFioV}
 @keyframes rlFioV{0%{transform:translateY(0);opacity:0}20%,80%{opacity:1}100%{transform:translateY(20px);opacity:0}}
 .rl-rafas{height:auto;margin:0 calc(-1 * var(--rl-sangria,18px));padding:4px var(--rl-sangria,18px) 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rl-sangria,18px);scrollbar-width:none}
 .rl-rafas::-webkit-scrollbar{display:none}
 .rl-rafa{flex:0 0 clamp(168px,34%,230px);aspect-ratio:3/4.2;scroll-snap-align:start}
 .rl-rafa[aria-pressed="true"]{flex-grow:0}
 .rl-v{display:none}
 .rl-txt{opacity:1;padding:40px 12px 12px}
 .rl-txt b{font-size:1.2rem}
}
@media (max-width:759px){#crie{--rl-sangria:18px}.rl-rafa{flex-basis:58%}}

/* lote 28/09 · ponteiro (desktop com mouse): anel dourado que acompanha o cursor; o cursor do sistema continua */
.bp-anel{position:fixed;left:0;top:0;z-index:400;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}
.bp-anel.on{opacity:1}
.bp-anel.texto{opacity:0}
.bp-anel i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(201,165,94,.8);box-shadow:0 0 0 1px rgba(14,13,12,.1);transition:transform .35s cubic-bezier(.22,.61,.36,1),background-color .35s,border-color .35s}
.bp-anel.grande i{transform:scale(1.55);background:rgba(201,165,94,.12);border-color:#E4C078}
.bp-anel.rotulo i{transform:scale(2.05);background:rgba(14,13,12,.78)}
.bp-anel b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#F1E4C4;opacity:0;transition:opacity .2s}
.bp-anel.rotulo b{opacity:1}
html[data-elite-paused] .bp-anel{display:none}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.bp-anel{display:none}}

/* lote 28/09 · a arte (imagem em CSS) dos lugares de video so baixa perto da tela: nao disputa banda com a imagem do topo */
.elite-film[data-video-slot]:not(.perto) .elite-film-art{background-image:none}
/* lote 28/09 · lugar de video pronto para o arquivo novo (ver docs/ENTRADA-DE-VIDEO.md): o video cobre a arte, a legenda fica legivel */
.elite-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.elite-film.tem-video .elite-film-art>i,.elite-film.tem-video .elite-film-art>span{display:none}
.elite-film.tem-video .elite-film-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.82),rgba(14,13,12,.18) 70%)}

/* 30/09 (N3) · pausa de animacoes (WCAG 2.2.2) sem botao flutuante no celular.
   Tres controles do mesmo estado (montados pelo elite.js): .elite-pausa = link discreto no rodape da pagina (toque e computador);
   .elite-pausa-topo = atalho invisivel, 1o item do teclado/leitor de tela, aparece so com foco; .elite-motion = botao pequeno na margem
   esquerda (so computador com mouse e janela larga, onde ha margem livre). */
.elite-pausa,.elite-pausa-topo,.elite-motion{-webkit-appearance:none;appearance:none;margin:0;font-family:'JetBrains Mono','Mono Fallback',ui-monospace,monospace;cursor:pointer}
/* simbolo desenhado (nao depende de fonte): duas barras = pausar; triangulo = retomar */
.elite-glifo{display:inline-block;flex:none;width:.72em;height:.8em;margin-right:.8em;vertical-align:-.06em;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
[data-estado="pausado"] .elite-glifo{background:currentColor;clip-path:polygon(12% 0,100% 50%,12% 100%)}
.elite-rodape{position:relative;z-index:3;display:flex;justify-content:center;background:#0B0809;border-top:1px solid rgba(244,236,222,.07);padding:2px 16px calc(8px + env(safe-area-inset-bottom,0px))}
.elite-pausa{min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:none;color:#B2A693;font-size:.72rem;line-height:1.2;letter-spacing:.07em;text-decoration:underline dotted rgba(178,166,147,.55);text-underline-offset:5px;-webkit-tap-highlight-color:transparent}
.elite-pausa:hover{color:#E4C078;text-decoration-color:currentColor}
.elite-pausa:focus-visible{outline:2px solid var(--elite-gold);outline-offset:2px}
.elite-pausa-topo{position:fixed;left:12px;top:12px;z-index:520;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0;background:var(--elite-noir);color:var(--elite-ivory)}
.elite-pausa-topo:focus{width:auto;height:auto;padding:12px 18px;clip-path:none;border:1px solid var(--elite-gold);border-radius:30px;font-size:12px;line-height:1.2;box-shadow:0 8px 28px rgba(0,0,0,.4);outline:3px solid var(--elite-gold);outline-offset:3px}
.elite-motion{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
 .elite-motion{position:fixed;left:14px;bottom:14px;z-index:80;display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:1px solid rgba(201,165,94,.35);border-radius:50%;background:rgba(14,13,12,.62);color:var(--elite-ivory);font-size:10px;line-height:1;opacity:.42;transition:opacity .2s}
 .elite-motion .elite-rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .elite-motion .elite-glifo{margin:0;width:9px;height:10px}
 .elite-motion:hover,.elite-motion:focus-visible,html[data-elite-paused] .elite-motion{opacity:.92}
 .elite-motion:focus-visible{outline:3px solid var(--elite-gold);outline-offset:3px}
}
@media print{.elite-rodape,.elite-pausa-topo,.elite-motion{display:none!important}}
/* S4 (07/10): animacao por tempo fora da tela fica parada (classe posta pelo elite.js por IntersectionObserver; volta sozinha ao aparecer) */
/* seletor reforcado de proposito: o :is(#…) da peso de id e a classe repetida vence as regras "running!important" da pagina
   (costuras .tr-live ... ::after = 0,2,2; halo da Rafa escolhida com #crie = 1,2,x). O id #elite-fora-peso nao existe: so empresta o peso. */
:root :is(#elite-fora-peso,.elite-fora).elite-fora.elite-fora,:root :is(#elite-fora-peso,.elite-fora).elite-fora.elite-fora::before,:root :is(#elite-fora-peso,.elite-fora).elite-fora.elite-fora::after{animation-play-state:paused!important}