/* Palace Telecom · home do protótipo "Palácio". Ordem: hero (com as operadoras e os números na linha de baixo), dor, benefícios,
   jornada da fatura à migração (palco fixo, a rolagem conduz a conversa), dor, benefícios, painel, números, planos,
   equipe (escondida até ter gente real), academia, FAQ, fecho.
   Depoimentos e história estão em stand-by: _review/standby/prototipo-depoimentos-historia/. */

.ico{width:28px;height:28px;flex:none;color:var(--text)}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--grey);margin-inline:12px;vertical-align:middle}

/* ---------- 1. Hero: mensagem à esquerda, Palácio à direita, fundido ao fundo (multiply). Um fundo só, branco, como o site no ar;
   as operadoras e os números fecham a coluna de texto, abaixo de um fio ---------- */
.hero{position:relative;padding-top:var(--nav-h);overflow:clip;background:var(--canvas)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;min-height:clamp(560px,calc(100svh - var(--nav-h)),820px)}
.hero-copy{position:relative;z-index:1;max-width:640px;padding-block:clamp(36px,6vh,72px)}
.hero h1{font-size:clamp(2rem,min(3.5vw,6.4vh),3.3rem);margin-top:22px}
.hero h1 span{display:block}
.hero-lede{margin-top:24px;font-size:clamp(1.02rem,1.22vw,1.15rem);line-height:1.65;color:var(--text-2);max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:34px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,4.4vh,44px);padding-top:22px;border-top:1px solid var(--line);font-size:.92rem;color:var(--text-2)}
.hero-ops{display:flex;align-items:center;gap:18px;flex:none}
.hero-ops img{height:24px;width:auto}   /* logos nas cores originais de cada operadora (pedido do Julio, 19/09) */
.hero-ops img[src*="claro"]{height:19px;position:relative;top:-1px}   /* a palavra Claro tem os raios em cima: sobe 1 px para a base das letras alinhar com Vivo e TIM */
.hero-nums{display:flex;align-items:center;flex:none;white-space:nowrap}
.hero-art{position:relative;align-self:stretch;pointer-events:none}
/* a moldura cresce com a altura do hero; em janela alta e estreita (1280x1024, iPad deitado) a largura é contida em 110% da coluna,
   senão a base do Palácio encosta na linha das operadoras; a arte então encolhe ancorada embaixo */
.hero-art-frame{position:absolute;right:-7%;bottom:-5%;height:114%;aspect-ratio:3/4;max-width:110%}
.hero-img,.hero-art-frame .loop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply}
/* sem animação de entrada na imagem fundida: opacidade animada + mix-blend-mode some em alguns renderizadores */

/* coluna de texto mais estreita (notebook de 1280): a linha de prova continua numa linha só */
@media (min-width:961px) and (max-width:1340px){
  .hero-proof{gap:14px 22px;font-size:.88rem}
  .hero-nums .dot{margin-inline:9px}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-block:40px 8px;max-width:none}
  .hero-lede{max-width:56ch}
  .hero-art{align-self:auto}
  .hero-art-frame{position:relative;right:auto;bottom:auto;height:auto;width:min(112%,620px);aspect-ratio:1400/1226;margin:4px calc((100% - min(112%,620px))/2) -2%}
}
@media (max-width:560px){
  .hero-cta{gap:6px 24px}
  .hero-cta .btn{width:100%}
  .hero-proof{font-size:.88rem;margin-top:24px;padding-top:18px;flex-direction:column;align-items:flex-start;gap:14px}
  .hero-nums{flex-direction:column;align-items:flex-start;gap:2px}
  .hero-nums .dot{display:none}
}

/* ---------- 3. A dor, refutada ----------
   Cada problema recebe a resposta da Palace: o título é riscado, um fio desce do ícone até um card grafite (peça grafite do
   manual, único lugar onde o azul-gelo entra) e o verbo correspondente acende na frase da esquerda, que fica presa no
   computador. O que vem primeiro é o estado FINAL, que vale sem JavaScript, com "reduzir movimento" e em navegador antigo.
   Por cima dele, a animação amarrada à rolagem (animation-timeline: view(), CSS puro, roda fora da thread principal) e, onde
   ela não existe, a mesma coreografia por transição, ligada por IntersectionObserver em home.js (classe .sem-svt no html).
   Ideia dos cards que entram com a rolagem: ScrollStack e ScrollReveal (React Bits), Sticky Scroll Reveal (Aceternity UI) e
   Blur Fade (Magic UI) serviram de referência; nenhum código deles foi copiado. Ver assets/vendor/CREDITOS-EFEITOS.md. */
.dor-grid{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(32px,6vw,96px);align-items:start}
.dor-lado{position:sticky;top:calc(var(--nav-h) + clamp(28px,9vh,104px));display:grid;gap:clamp(28px,6vh,64px)}
.dor-close{font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.3;letter-spacing:-.025em;color:var(--text-3);max-width:20ch}
.dor-close b{font-weight:500;color:var(--text);background:linear-gradient(var(--panel),var(--panel)) no-repeat 0 88%/100% 42%;border-radius:3px}
.dor-item{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:22px;row-gap:20px;padding-block:30px 34px;border-top:1px solid var(--line)}
.dor-item:last-child{border-bottom:1px solid var(--line)}
.dor-item .ico{grid-area:1/1;margin-top:1px;color:var(--grey)}
.dor-prob{grid-area:1/2}
.dor-prob h3{font-size:1.18rem;color:var(--text-3)}
.dor-prob h3 span{background:linear-gradient(currentColor,currentColor) no-repeat 0 56%/100% 1.5px}
.dor-prob p{color:var(--text-2);margin-top:8px;max-width:54ch}
/* o fio: desce pela coluna do ícone e dobra para dentro do card */
.dor-item::before{content:"";grid-area:1/1;justify-self:center;width:1px;margin-top:40px;margin-bottom:-20px;background:var(--line-strong)}
.dor-elo{grid-area:2/1;justify-self:start;align-self:start;margin-left:calc(50% - .5px);width:calc(50% + 22px);height:50%;border:solid var(--line-strong);border-width:0 0 1px 1px;border-bottom-left-radius:12px}
.dor-sol{grid-area:2/2;padding:20px 24px 22px;border-radius:var(--radius);box-shadow:0 18px 40px -22px rgba(18,21,27,.55)}
.dor-selo{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dor-selo svg{width:15px;height:15px;flex:none}
.dor-sol-t{margin-top:10px;font-weight:600;font-size:1.06rem;line-height:1.35;color:var(--text)}
.dor-sol-t+p{margin-top:6px;font-size:.94rem;line-height:1.6;color:var(--text-2);max-width:52ch}
@media (max-width:960px){
  .dor-grid{grid-template-columns:1fr;row-gap:32px}
  .dor-lado{display:contents}
  .dor-head{order:1}
  .dor-list{order:2}
  .dor-close{order:3;max-width:none}
  .dor-item{column-gap:16px;padding-block:26px 30px}
  .dor-elo{width:calc(50% + 16px)}
  .dor-sol{padding:18px 18px 20px}
}

/* a rolagem conduz: cada peça usa o próprio avanço dentro da tela; os verbos ouvem o card do seu problema (linha do tempo com nome) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dor{timeline-scope:--dor-a,--dor-b,--dor-c}
    .dor-item{view-timeline-name:--dor-li}
    .dor-item:nth-child(1){view-timeline-name:--dor-li,--dor-a}
    .dor-item:nth-child(2){view-timeline-name:--dor-li,--dor-b}
    .dor-item:nth-child(3){view-timeline-name:--dor-li,--dor-c}
    .dor-item .ico,.dor-prob h3,.dor-prob h3 span,.dor-item::before,.dor-elo,.dor-sol{animation-timeline:--dor-li;animation-timing-function:linear;animation-fill-mode:both}
    .dor-item .ico{animation-name:dorApaga;animation-range:cover 17% cover 29%}
    .dor-prob h3{animation-name:dorCala;animation-range:cover 17% cover 29%}
    .dor-prob h3 span{animation-name:dorRisco;animation-range:cover 17% cover 29%}
    .dor-item::before{animation-name:dorFio;animation-range:cover 22% cover 31%}
    .dor-elo{animation-name:dorFio;animation-range:cover 31% cover 36%}
    .dor-sol{animation-name:dorCard;animation-range:cover 19% cover 38%}
    .dor-close b{animation:dorVerbo linear both;animation-range:cover 32% cover 41%}
    .dor-close b:nth-of-type(1){animation-timeline:--dor-a}
    .dor-close b:nth-of-type(2){animation-timeline:--dor-b}
    .dor-close b:nth-of-type(3){animation-timeline:--dor-c}
  }
  @keyframes dorApaga{from{color:var(--text)}}
  @keyframes dorCala{from{color:var(--text)}}
  @keyframes dorRisco{from{background-size:0% 1.5px}}
  @keyframes dorFio{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
  @keyframes dorCard{from{opacity:0;transform:translate3d(0,34px,0) scale(.965)}}
  @keyframes dorVerbo{from{color:var(--text-3);background-size:0% 42%}}

  /* sem animation-timeline (home.js põe .sem-svt no html): a mesma coreografia por transição, uma vez, quando o card entra na tela */
  html.sem-svt .dor-item .ico{transition:color .6s var(--ease-out)}
  html.sem-svt .dor-prob h3{transition:color .6s var(--ease-out)}
  html.sem-svt .dor-prob h3 span{transition:background-size .7s var(--ease-out)}
  html.sem-svt .dor-item::before,html.sem-svt .dor-elo{transition:clip-path .6s .15s var(--ease-in-out)}
  html.sem-svt .dor-elo{transition-delay:.45s}
  html.sem-svt .dor-sol{transition:opacity .6s .5s var(--ease-out),transform .8s .5s var(--ease-out)}
  html.sem-svt .dor-close b{transition:color .5s .7s var(--ease-out),background-size .7s .7s var(--ease-out)}
  html.sem-svt .dor-item:not(.is-virada) .ico,html.sem-svt .dor-item:not(.is-virada) .dor-prob h3{color:var(--text)}
  html.sem-svt .dor-item:not(.is-virada) .dor-prob h3 span{background-size:0% 1.5px}
  html.sem-svt .dor-item:not(.is-virada)::before,html.sem-svt .dor-item:not(.is-virada) .dor-elo{clip-path:inset(0 0 100% 0)}
  html.sem-svt .dor-item:not(.is-virada) .dor-sol{opacity:0;transform:translate3d(0,34px,0) scale(.965)}
  html.sem-svt .dor:not(.v1) .dor-close b:nth-of-type(1),html.sem-svt .dor:not(.v2) .dor-close b:nth-of-type(2),html.sem-svt .dor:not(.v3) .dor-close b:nth-of-type(3){color:var(--text-3);background-size:0% 42%}
}

/* ---------- 4. O ciclo de atendimento + estátua com celular (a figura sangra pela base da seção) ---------- */
.solucoes{padding-bottom:0;overflow:clip}
.solucoes-grid{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);gap:clamp(24px,4vw,72px);align-items:end}
.solucoes-main{padding-bottom:clamp(72px,9vw,124px)}
.beneficios{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* a caixinha chama atenção sem barulho: um fio grafite cresce no topo, o cartão sobe 3 px (herdado de .card-hover)
   e o ícone se desenha quando a fileira entra na tela */
.beneficio{position:relative;overflow:hidden;padding:28px 28px 30px}
.beneficio::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.beneficio:hover::before,.beneficio:focus-within::before{transform:scaleX(1)}
.beneficio:hover .ico{transform:translateY(-2px)}
.beneficio .ico{width:30px;height:30px;margin-bottom:22px;transition:transform var(--dur) var(--ease-out)}
@media (prefers-reduced-motion:no-preference){
  html.js .beneficios.in .beneficio .ico{animation:tracoIcone 1.1s var(--ease-out) both}
  html.js .beneficios.in .beneficio:nth-child(2) .ico{animation-delay:.09s}
  html.js .beneficios.in .beneficio:nth-child(3) .ico{animation-delay:.18s}
  html.js .beneficios.in .beneficio:nth-child(4) .ico{animation-delay:.27s}
}
@keyframes tracoIcone{from{stroke-dasharray:180;stroke-dashoffset:180}to{stroke-dasharray:180;stroke-dashoffset:0}}
.beneficio p{color:var(--text-2);margin-top:8px;font-size:.97rem;line-height:1.6}
/* O ciclo de atendimento: as quatro etapas correm em sentido horário em volta do selo da marca, que fica onde os quatro cards
   se encontram. O kit da marca já traz o selo partido em anel e templo ("o anel gira, o templo fica parado"). O ciclo anda
   sozinho e o cursor assume quando entra no quadro (home.js). Abaixo de 641 px não há centro: os cards viram uma coluna e o
   selo sai. O que vem primeiro é o estado PARADO, que vale sem JavaScript e com "reduzir movimento": quatro cards numerados. */
.ciclo-fecho{display:flex;align-items:center;gap:10px;margin-top:clamp(22px,2.6vw,32px);font-size:.95rem;color:var(--text-2)}
.ciclo-fecho svg{width:20px;height:20px;flex:none;color:var(--text)}
.ciclo-num{font-family:var(--font-greek);font-weight:400;font-size:1.02rem;letter-spacing:.04em;line-height:1;color:inherit}
.ciclo-verbo{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.selo{position:relative;display:block;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(18,21,27,.05),0 16px 36px -16px rgba(18,21,27,.24)}
.selo img{position:absolute;left:10%;top:10%;width:80%;height:80%;max-width:none}
.cb-quadro{position:relative}
.cb-card{position:relative}
.cb-eixo{display:none}
@media (min-width:641px){
  /* sentido horário: I em cima à esquerda, II em cima à direita, III embaixo à direita, IV embaixo à esquerda */
  .cb-grade .cb-card:nth-child(1){grid-area:1/1;padding-bottom:40px}
  .cb-grade .cb-card:nth-child(2){grid-area:1/2;padding-bottom:40px}
  .cb-grade .cb-card:nth-child(3){grid-area:2/2;padding-top:40px}
  .cb-grade .cb-card:nth-child(4){grid-area:2/1;padding-top:40px}
  .cb-eixo{display:block;position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none}
  .cb-eixo::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:var(--canvas-2)}   /* o canto de dentro de cada card fica para o selo */
  .cb-eixo .selo{position:relative;width:100%}
  .cb-marca{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from -45deg,var(--text) 0 90deg,transparent 90deg 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));transform:rotate(var(--giro,315deg))}
}
@media (prefers-reduced-motion:no-preference){
  html.js .ciclo-b .cb-card{transition:background-color .55s var(--ease-out),color .55s var(--ease-out),border-color .55s var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),--luz .5s var(--ease-out)}
  html.js .ciclo-b .cb-card h3,html.js .ciclo-b .cb-card p,html.js .ciclo-b .cb-card .ico,html.js .ciclo-b .cb-card .ciclo-verbo{transition:color .55s var(--ease-out)}
  html.js .ciclo-b .cb-card.is-on{background-color:#12151B;border-color:#12151B;box-shadow:0 22px 44px -24px rgba(18,21,27,.6)}
  html.js .ciclo-b .cb-card.is-on .ico,html.js .ciclo-b .cb-card.is-on .ciclo-verbo{color:var(--accent)}
  html.js .ciclo-b .cb-card p{color:var(--text-2)}
  /* o fio grafite do topo do card vira o relógio da etapa: enche enquanto ela está acesa */
  html.js .ciclo-b .cb-card::before{background:var(--accent);transition:none}
  html.js .ciclo-b .cb-card:hover::before,html.js .ciclo-b .cb-card:focus-within::before{transform:scaleX(0)}
  html.js .ciclo-b.is-rodando .cb-card.is-on::before{transform:scaleX(1);transition:transform var(--cb-t,3400ms) linear}
  html.js .ciclo-b .cb-marca{transition:transform .9s var(--ease-in-out)}
  html.js .ciclo-b .selo-anel{transform:rotate(var(--giro,315deg));transition:transform .9s var(--ease-in-out)}
  html.js .ciclo-b.is-cursor .cb-marca,html.js .ciclo-b.is-cursor .selo-anel{transition:transform .18s linear}
}
/* Estátuas vivas: a caixa (--caixa) é a figura; a mídia (--midia) é um pouco maior, com folga branca à esquerda, à direita e no topo,
   para a borda do vídeo nunca encostar no mármore. Branco puro + multiply: some no fundo da seção. A caixa não pode virar contexto de
   empilhamento (nada de opacity/transform/filter nela nem nos pais), senão a mistura para de enxergar o fundo. */
.estatua{position:relative;margin:0;pointer-events:none;aspect-ratio:var(--caixa)}
.estatua .loop-img,.estatua .loop-video{position:absolute;top:0;left:0;width:calc(100% + 2*var(--folga));max-width:none;height:auto;aspect-ratio:var(--midia);margin:calc(-1*var(--folga)) 0 0 calc(-1*var(--folga));object-fit:fill;mix-blend-mode:multiply}
/* largura definida: com justify-self:end a caixa encolhia até zero enquanto a imagem (lazy) não carregava */
.estatua-celular{--caixa:1116/1684;--midia:1166/1710;--folga:2.24%;align-self:end;justify-self:end;width:min(100%,470px);margin-top:calc(-1*clamp(24px,4vw,56px))}
@media (max-width:960px){
  .solucoes-grid{grid-template-columns:1fr;gap:0}
  .solucoes-main{padding-bottom:40px}
  .estatua-celular{width:min(68%,340px);margin-top:0;max-height:380px;overflow:hidden}
}
@media (max-width:560px){.beneficios{grid-template-columns:1fr}}

/* ---------- 2. Da fatura à migração: palco fixo, a rolagem conduz a conversa ----------
   Ideia própria da Palace: a seção prende um palco de tela cheia e a rolagem vira o tempo do atendimento. O título abre o palco e
   entrega a cena para o aparelho. Nada rola dentro do palco: o celular fica no centro, o ato (I, II, III) troca no mesmo lugar à esquerda, os bastidores da equipe
   à direita e uma linha do tempo com os três capítulos embaixo. Cada trecho de rolagem é uma batida: solta uma fala,
   manda as três propostas ou avança a portabilidade. Zonas invisíveis empilhadas no trilho dizem qual batida está no
   meio da tela (IntersectionObserver em home.js; nada de ouvir rolagem). A conversa tem a cara do WhatsApp no iPhone
   (pedido do Julio); as cores do WhatsApp vivem só dentro do aparelho, em variáveis --wa-*.
   O que vem primeiro aqui é o layout PARADO, que vale sem JavaScript, com "reduzir movimento" e como rede de segurança. */
.jor-zona,.jor-queda{display:none}
.jor-cena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:clamp(28px,5vw,80px);row-gap:clamp(28px,4vw,44px);align-items:start;padding-top:clamp(32px,4vw,56px)}
.jor-atos{grid-area:1/1;display:grid;gap:clamp(26px,3.5vw,40px)}
.ato-num{display:block;font-family:var(--font-greek);line-height:1;letter-spacing:.06em;color:var(--line-strong);font-size:2.4rem;margin-bottom:10px}
.ato h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.ato p{color:var(--text-2);margin-top:12px;max-width:42ch}
.jor-fone{grid-area:1/2/3/3}
.jor-bast{grid-area:2/1}
.bast-t{font-weight:600;font-size:.95rem;color:var(--text)}
.bast{margin-top:14px}
.bast::before{content:attr(data-rom);display:block;font-family:var(--font-greek);letter-spacing:.2em;font-size:.8rem;color:var(--text-3);margin-bottom:2px}
.bast li{display:flex;align-items:flex-start;gap:10px;padding-block:10px;border-top:1px solid var(--line);font-size:.95rem;line-height:1.45;color:var(--text-2)}
.bast li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--text)}
.jor-linha{display:none}

/* aparelho: iPhone com o WhatsApp aberto */
.fone{--wa-fundo:#EFE9E0;--wa-sai:#D9FDD3;--wa-entra:#fff;--wa-texto:#111B21;--wa-meta:#667781;--wa-visto:#53BDEB;--wa-verde:#1DAA61;--wa-verde-t:#0B7A43;--wa-barra:#F6F6F6;--wa-fio:rgba(17,27,33,.1);
  width:min(332px,100%);margin-inline:auto;height:min(72svh,640px);display:flex;padding:10px;border-radius:46px;background:#0B0D12;box-shadow:inset 0 0 0 1.5px #2B303B,var(--shadow-2)}
.fone-vidro{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;border-radius:37px;overflow:hidden;background:var(--wa-fundo);color:var(--wa-texto)}
.fone-ilha{position:absolute;top:9px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0B0D12;z-index:2}
.fone-ios{display:flex;align-items:center;justify-content:space-between;height:40px;padding:4px 22px 0 28px;background:var(--wa-barra);font-weight:600;font-size:.8rem;letter-spacing:-.01em}
.fone-ios span{display:flex;align-items:center;gap:5px}
.fone-ios svg{height:10.5px;width:17px}
.fone-ios svg.bat{width:24px;height:11px}
.fone-top{display:flex;align-items:center;gap:8px;padding:3px 14px 9px 6px;background:var(--wa-barra);border-bottom:1px solid var(--wa-fio)}
.fone-volta{width:22px;height:22px;flex:none}
.fone-selo{width:34px;height:34px;flex:none;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--wa-fio);display:grid;place-items:center}
.fone-selo img{width:20px;height:20px;opacity:.8}
.fone-quem{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.fone-quem b{font-weight:600;font-size:.9rem}
.fone-quem small{font-size:.72rem;color:var(--wa-meta)}
.fone-ic{width:21px;height:21px;flex:none;margin-left:14px}
.fone-quem+.fone-ic{margin-left:auto}
.fone-tela{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:10px 6px 8px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
.fio{display:flex;flex-direction:column}
.fone-aviso{display:none}   /* aviso de criptografia: só existe no palco fixo, enquanto a conversa ainda é curta */
.fone-barra{display:flex;align-items:center;gap:8px;padding:7px 10px 5px;background:var(--wa-barra);border-top:1px solid var(--wa-fio)}
.fone-barra>svg{width:24px;height:24px;flex:none}
.fone-campo{flex:1;min-width:0;padding:6px 12px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--wa-fio);font-size:.82rem;color:var(--wa-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fone-campo.is-rascunho{color:var(--wa-texto)}
.fone-campo.is-rascunho::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--wa-verde);animation:cursor 1s steps(2,jump-none) infinite}
@keyframes cursor{to{opacity:0}}
.fone-acoes{display:flex;gap:12px;flex:none}
.fone-acoes svg{width:23px;height:23px}
.fone-envia{display:none;width:31px;height:31px;flex:none;border-radius:50%;background:var(--wa-verde);color:#fff;place-items:center}
.fone-envia svg{width:16px;height:16px;margin-left:2px}
.fone-barra.is-rascunho .fone-acoes{display:none}
.fone-barra.is-rascunho .fone-envia{display:grid}
.fone-home{height:19px;background:var(--wa-barra);display:grid;place-items:center}
.fone-home::after{content:"";width:104px;height:4px;border-radius:4px;background:#111B21;opacity:.85}
.fone-nota{margin-top:12px;text-align:center;font-size:.78rem;color:var(--text-3)}

.fala{display:grid;grid-template-rows:1fr;margin-top:6px}
.fala:first-child{margin-top:0}
.fala-in{overflow:hidden;min-height:0;display:flex;padding-bottom:2px}
.fala-dig{display:none}
.dia{margin:2px auto;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.94);box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:.7rem;line-height:1.2;color:var(--wa-meta)}
.msg{position:relative;display:block;max-width:86%;padding:6px 9px 7px;border-radius:9px;font-size:.84rem;line-height:1.4;color:var(--wa-texto);box-shadow:0 1px .5px rgba(11,20,26,.13)}
.msg-out{margin-left:auto;margin-right:8px;background:var(--wa-sai)}
.msg-in{margin-right:auto;margin-left:8px;background:var(--wa-entra)}
.msg.rabo::before{content:"";position:absolute;top:0;width:8px;height:12px;background:inherit}
.msg-in.rabo{border-top-left-radius:0}
.msg-in.rabo::before{left:-7px;clip-path:polygon(100% 0,0 0,100% 100%)}
.msg-out.rabo{border-top-right-radius:0}
.msg-out.rabo::before{right:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.hora{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px 0 -3px 10px;font-size:.66rem;line-height:1;color:var(--wa-meta);white-space:nowrap}
.hora svg{width:16px;height:11px;color:var(--wa-visto)}
.doc{display:flex;align-items:center;gap:9px;padding:8px 9px;margin:-1px -4px 6px;border-radius:7px;background:rgba(17,27,33,.06)}
.doc-ico{width:28px;height:34px;flex:none;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px var(--wa-fio);display:grid;place-items:center;font-size:.54rem;font-weight:700;letter-spacing:.02em;color:#E5322D}
.doc b{display:block;font-weight:600;font-size:.8rem;line-height:1.3}
.doc small{display:block;font-size:.68rem;color:var(--wa-meta)}

/* cada proposta é um balão: logo da operadora, valor por mês e economia; a recomendada ganha o anel verde */
.prop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center;width:86%;padding:9px 10px 7px}
.prop-logo{width:44px;height:44px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--wa-fio);display:grid;place-items:center}
.prop-logo img{width:auto;height:auto;max-width:32px;max-height:17px}
.prop-t{min-width:0;line-height:1.3}
.prop-t b{display:block;font-weight:600;font-size:.84rem}
.prop-t small{display:block;font-size:.76rem;color:var(--wa-meta)}
.prop-t small .num{font-weight:600;color:var(--wa-texto)}
.prop-rec{display:block;font-style:normal;font-weight:600;font-size:.68rem;color:var(--wa-verde-t);margin-top:1px}
.prop-pct{align-self:start;padding:2px 8px;border-radius:99px;background:rgba(29,170,97,.15);color:var(--wa-verde-t);font-size:.74rem;font-weight:600}
.prop .hora{grid-column:1/-1;justify-self:end;float:none;margin:3px 0 0}
.prop.is-rec{box-shadow:0 0 0 1.5px var(--wa-verde),0 1px .5px rgba(11,20,26,.13)}

.cartao{width:86%;padding:10px 10px 7px}
.migra-t{font-weight:600;font-size:.84rem;margin-bottom:9px}
.migra-bar{height:7px;border-radius:99px;background:rgba(17,27,33,.09);overflow:hidden;margin-bottom:11px}
.migra-bar span{display:block;height:100%;background:var(--wa-verde);border-radius:99px;transform-origin:left;transform:scaleX(.77);transition:transform .9s var(--ease-out)}
.migra[data-fase="0"] .migra-bar span{transform:scaleX(.06)}
.migra[data-fase="2"] .migra-bar span{transform:scaleX(1)}
.migra ul{display:grid;gap:7px}
.migra li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--wa-meta);transition:color var(--dur) var(--ease-out)}
.migra li svg,.migra li i{width:15px;height:15px;flex:none}
.migra li svg{display:none;color:var(--wa-verde)}
.migra li i{border-radius:50%;border:1.5px solid rgba(17,27,33,.22)}
.migra li.is-indo{color:var(--wa-texto)}
.migra li.is-indo i{border-top-color:var(--wa-verde);animation:giro 1.4s linear infinite}
.migra li.is-ok{color:var(--wa-texto)}
.migra li.is-ok svg{display:block}
.migra li.is-ok i{display:none}
.migra .st{font-style:normal}
.migra .st::after{content:"na fila"}
.migra li.is-indo .st::after{content:"em andamento"}
.migra li.is-ok .st::after{content:"portadas"}
.cartao .hora{float:none;display:flex;justify-content:flex-end;margin:6px 0 0}
@keyframes giro{to{transform:rotate(1turn)}}
.dig{display:inline-flex;align-items:center;gap:5px;padding:11px 13px}
.dig i{width:6px;height:6px;border-radius:50%;background:#9AA6AE;animation:digita 1.3s var(--ease-in-out) infinite}
.dig i:nth-child(2){animation-delay:.16s}
.dig i:nth-child(3){animation-delay:.32s}
@keyframes digita{0%,65%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.como-cta{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(40px,5vw,64px)}

@media (max-width:860px){
  .jor-cena{grid-template-columns:1fr}
  .jor-fone{grid-area:auto;order:-1}
  .jor-atos,.jor-bast{grid-area:auto}
  .fone{height:min(66svh,560px)}
}

/* --- PALCO FIXO: só com JavaScript, sem "reduzir movimento" e enquanto o observador responde --- */
@media (prefers-reduced-motion:no-preference){
  /* abertura: o título mora DENTRO do palco, centralizado, e o aparelho espera logo abaixo dele, cortado pela dobra. Na
     primeira batida o título sobe e some no mesmo gesto em que o aparelho sobe para o centro (mesma distância, mesma curva):
     é o texto que entrega a cena para a conversa. Dois fios de meandro descem pelas laterais, na linha da página (a mesma do
     logo e do botão do menu), e somem quando a conversa começa. A distância --desce é medida em home.js, nunca na rolagem. */
  html.js .jornada:not(.is-estatica){padding-top:clamp(16px,2.5vw,40px)}
  html.js .jornada:not(.is-estatica) .jor-abre{--abre-fator:.5;position:absolute;z-index:2;top:var(--nav-h);left:0;right:0;min-height:calc(var(--abre-fator)*100% - var(--nav-h));display:grid;align-content:end;justify-items:center;padding-block:clamp(16px,3.5vh,40px) clamp(26px,6vh,58px);text-align:center;opacity:0;transform:translateY(calc(-1*var(--desce,26svh)));pointer-events:none;transition:opacity .4s var(--ease-out),transform .95s var(--ease-in-out)}
  html.js .jornada.is-abertura:not(.is-estatica) .jor-abre{opacity:1;transform:none;pointer-events:auto;transition:opacity .7s .2s var(--ease-out),transform .95s var(--ease-in-out)}
  html.js .jornada:not(.is-estatica) .jor-cabeca{max-width:none;margin-bottom:0}
  html.js .jornada:not(.is-estatica) .jor-cabeca h2{max-width:21ch;margin-inline:auto;font-size:clamp(1.7rem,3.2vw,2.9rem);text-wrap:balance}
  html.js .jornada:not(.is-estatica) .jor-cabeca .lede{max-width:54ch;margin-inline:auto;text-wrap:balance}
  html.js .jornada:not(.is-estatica) .jor-queda{display:block;position:absolute;z-index:0;inset:var(--nav-h) 0 0 0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out);--fio-l:18px;--fio-p:22px;--fio-x:max(var(--gutter),calc(50% - var(--container-wide)/2))}
  html.js .jornada.is-abertura:not(.is-estatica) .jor-queda{opacity:1;transition:opacity .9s .2s var(--ease-out)}
  html.js .jornada:not(.is-estatica) .jor-queda i{position:absolute;top:0;left:var(--fio-x);width:var(--fio-l);height:min(88%,760px);overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 46%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 46%,transparent 100%)}
  html.js .jornada:not(.is-estatica) .jor-queda i+i{left:auto;right:var(--fio-x);transform:scaleX(-1)}
  html.js .jornada:not(.is-estatica) .jor-queda i::before{content:"";position:absolute;inset:calc(-1*var(--fio-p)) 0 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath d='M1 0V14H17V4H7V10H11' fill='none' stroke='%239AA1AB' stroke-width='1.1'/%3E%3C/svg%3E") repeat-y 0 0/var(--fio-l) var(--fio-p);animation:queda 3s linear infinite}
  html.js .jornada:not(.is-estatica):not(.is-abertura) .jor-queda i::before{animation-play-state:paused}
  @keyframes queda{to{transform:translateY(var(--fio-p))}}
  html.js .jornada.is-abertura:not(.is-estatica) .jor-fone{transform:translate(var(--centra,0px),var(--desce,26svh))}
  html.js .jornada:not(.is-estatica) .jor-atos,html.js .jornada:not(.is-estatica) .jor-bast{transition:opacity .6s .4s var(--ease-out),visibility 0s}
  /* a linha do tempo e a legenda do aparelho só entram quando ele já chegou: no caminho a legenda passa por cima da linha */
  html.js .jornada:not(.is-estatica) .jor-linha,html.js .jornada:not(.is-estatica) .fone-nota{transition:opacity .5s .75s var(--ease-out),visibility 0s}
  html.js .jornada.is-abertura:not(.is-estatica) .jor-atos,html.js .jornada.is-abertura:not(.is-estatica) .jor-bast,html.js .jornada.is-abertura:not(.is-estatica) .jor-linha,html.js .jornada.is-abertura:not(.is-estatica) .fone-nota{opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),visibility 0s .25s}

  html.js .jornada:not(.is-estatica) .jor-trilho{position:relative;height:350svh}
  html.js .jornada:not(.is-estatica) .jor-zona{display:block;position:absolute;left:0;width:1px;top:calc(var(--t)*1svh);height:calc(var(--h)*1svh);visibility:hidden;pointer-events:none}
  html.js .jornada:not(.is-estatica) .jor-palco{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding-top:var(--nav-h);overflow:hidden}
  html.js .jornada:not(.is-estatica) .jor-cena{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:clamp(28px,5vw,84px);row-gap:clamp(8px,1.6vh,18px);padding-block:clamp(8px,1.6vh,20px) clamp(14px,2.6vh,28px)}

  html.js .jornada:not(.is-estatica) .jor-atos{grid-area:1/1;justify-self:end;width:min(100%,390px);gap:0}
  html.js .jornada:not(.is-estatica) .ato{grid-area:1/1;opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease-out),transform .65s var(--ease-out)}
  html.js .jornada:not(.is-estatica) .ato.is-antes{transform:translateY(-22px)}
  html.js .jornada:not(.is-estatica) .ato.is-on{opacity:1;transform:none}
  html.js .jornada:not(.is-estatica) .ato-num{font-size:clamp(3.4rem,6.2vw,5.8rem);margin-bottom:clamp(10px,2.2vh,24px)}
  html.js .jornada:not(.is-estatica) .ato h3{font-size:clamp(1.4rem,2.3vw,2rem)}
  html.js .jornada:not(.is-estatica) .ato p{max-width:36ch;margin-top:14px}

  html.js .jornada:not(.is-estatica) .jor-fone{grid-area:1/2;transition:transform .95s var(--ease-in-out)}
  html.js .jornada:not(.is-estatica) .fone{width:min(332px,82vw);height:min(68svh,640px)}

  html.js .jornada:not(.is-estatica) .jor-bast{grid-area:1/3;justify-self:start;width:min(100%,330px);display:grid}
  html.js .jornada:not(.is-estatica) .bast-t{grid-area:1/1;margin-bottom:8px}
  html.js .jornada:not(.is-estatica) .bast{grid-area:2/1;margin-top:0;opacity:0;transition:opacity .35s var(--ease-out)}
  html.js .jornada:not(.is-estatica) .bast::before{display:none}
  html.js .jornada:not(.is-estatica) .bast.is-on{opacity:1}
  html.js .jornada:not(.is-estatica) .bast li{padding-block:12px;opacity:0;transform:translateX(14px);transition:opacity .5s var(--ease-out),transform .65s var(--ease-out)}
  html.js .jornada:not(.is-estatica) .bast.is-on li{opacity:1;transform:none;transition-delay:calc(var(--i)*110ms + 200ms)}

  /* linha do tempo: três capítulos, o fio de cada um enche conforme as batidas do seu ato */
  html.js .jornada:not(.is-estatica) .jor-linha{grid-area:2/1/3/4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);width:min(100%,960px);margin-inline:auto}
  .jl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:12px;align-items:baseline;padding:6px 0 4px;text-align:left;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--text-3);transition:color var(--dur) var(--ease-out)}
  .jl .roman{font-size:.8rem;color:inherit}
  .jl-fio{grid-column:1/-1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
  .jl-fio i{display:block;height:100%;background:var(--text);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .7s var(--ease-out)}
  .jl:hover{color:var(--text-2)}
  .jl.is-on,.jl.is-feito{color:var(--text)}

  /* dentro do aparelho: cada fala entra abrindo espaço, sem pulo de layout; as três propostas chegam em cascata */
  html.js .jornada:not(.is-estatica) .fala{grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows var(--dur-slow) var(--ease-out),opacity var(--dur) var(--ease-out),margin-top var(--dur-slow) var(--ease-out)}
  html.js .jornada:not(.is-estatica) .fala.is-on{grid-template-rows:1fr;opacity:1;margin-top:6px;transition-delay:var(--atraso,0ms)}
  html.js .jornada:not(.is-estatica) .fala:first-child.is-on{margin-top:0}
  html.js .jornada:not(.is-estatica) .fala-dig{display:grid}
  html.js .jornada:not(.is-estatica) .fone-aviso{display:flex;align-items:flex-start;gap:5px;position:absolute;z-index:1;top:96px;left:50%;width:min(84%,250px);margin:0;padding:6px 10px 7px;border-radius:8px;background:#FEF4C5;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:.66rem;line-height:1.35;text-align:center;color:#54656F;opacity:0;transform:translate(-50%,-6px);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
  html.js .jornada:not(.is-estatica) .fone-aviso.is-on{opacity:1;transform:translate(-50%,0)}
  html.js .jornada:not(.is-estatica) .fone-aviso svg{flex:none;width:10px;height:10px;margin-top:2px}
  html.js .jornada:not(.is-estatica) .fala.is-on .prop-pct{animation:selo .5s calc(var(--atraso,0ms) + 600ms) var(--ease-out) both}
  @keyframes selo{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:no-preference) and (max-width:1279px){
  html.js .jornada:not(.is-estatica) .jor-linha{padding-right:76px}   /* o botão verde do WhatsApp mora nesse canto */
}
@media (prefers-reduced-motion:no-preference) and (max-width:1100px){
  /* sem a terceira coluna: os bastidores descem para baixo do ato e o aparelho vai para a direita (na abertura ele espera no
     centro, embaixo do título: home.js mede o desvio em --centra) */
  html.js .jornada:not(.is-estatica) .jor-cena{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;column-gap:clamp(24px,4vw,56px)}
  html.js .jornada:not(.is-estatica) .jor-atos{grid-area:1/1;justify-self:start;align-self:end;width:min(100%,420px)}
  html.js .jornada:not(.is-estatica) .jor-bast{grid-area:2/1;align-self:start;margin-top:clamp(12px,2.5vh,28px);width:min(100%,380px)}
  html.js .jornada:not(.is-estatica) .jor-fone{grid-area:1/2/3/3}
  html.js .jornada:not(.is-estatica) .jor-linha{grid-area:3/1/4/3}
  html.js .jornada:not(.is-estatica) .fone{width:min(310px,40vw)}
  html.js .jornada:not(.is-estatica) .ato-num{font-size:clamp(2.6rem,5vw,3.6rem);margin-bottom:10px}
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  /* celular: aparelho em cima e no centro, ato embaixo, linha do tempo só com os numerais; na abertura os fios correm pela
     margem da tela, fora da coluna de texto */
  html.js .jornada:not(.is-estatica) .jor-abre{--abre-fator:.4;padding-inline:12px;padding-block:14px 18px}
  html.js .jornada:not(.is-estatica) .jor-cabeca h2{font-size:clamp(1.45rem,6.4vw,1.9rem)}
  html.js .jornada:not(.is-estatica) .jor-cabeca .lede{font-size:.98rem;line-height:1.55}
  html.js .jornada:not(.is-estatica) .jor-queda{--fio-l:14px;--fio-p:17.11px;--fio-x:calc((var(--gutter) - var(--fio-l))/2)}
  html.js .jornada:not(.is-estatica) .jor-cena{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(8px,1.6vh,14px);padding-block:8px 14px}
  html.js .jornada:not(.is-estatica) .jor-fone{grid-area:1/1;order:0}
  html.js .jornada:not(.is-estatica) .fone{width:min(300px,80vw);height:min(52svh,460px);padding:8px;border-radius:38px}
  html.js .jornada:not(.is-estatica) .fone-vidro{border-radius:31px}
  html.js .jornada:not(.is-estatica) .fone-nota{margin-top:6px;font-size:.72rem}
  html.js .jornada:not(.is-estatica) .jor-atos{grid-area:2/1;align-self:start;justify-self:stretch;width:auto}
  html.js .jornada:not(.is-estatica) .ato{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  html.js .jornada:not(.is-estatica) .ato-num{font-size:1.5rem;margin:0}
  html.js .jornada:not(.is-estatica) .ato h3{font-size:1.2rem}
  html.js .jornada:not(.is-estatica) .ato p{grid-column:1/-1;max-width:none;margin-top:8px;font-size:.95rem}
  html.js .jornada:not(.is-estatica) .jor-bast{display:none}
  html.js .jornada:not(.is-estatica) .jor-linha{grid-area:3/1;padding-right:70px;column-gap:10px}
  .jl{grid-template-columns:1fr;row-gap:8px}
  .jl-t{display:none}
}
@media (max-width:560px){
  .msg{font-size:.8rem}
}

/* ---------- 5. Painel Palace + estátua com notebook ---------- */
.painel{padding-bottom:0;overflow:clip}
.painel-grid{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);gap:clamp(32px,4vw,72px);align-items:stretch}
.painel-copy{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.painel-copy .lede{margin-top:var(--s4)}
.painel-pontos{display:grid;gap:10px;margin-top:26px}
.painel-pontos li{display:flex;align-items:flex-start;gap:10px;font-size:.97rem}
.painel-pontos svg{width:18px;height:18px;flex:none;margin-top:3px}
.painel-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:32px}
.estatua-notebook{--caixa:1321/1688;--midia:1380/1718;--folga:2.195%;width:min(100%,350px);margin-left:-3%;max-height:345px;overflow:hidden}
.painel-demo{min-width:0;padding-bottom:clamp(72px,9vw,124px)}
.ptabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ptabs::-webkit-scrollbar{display:none}
.ptab{min-height:40px;padding:0 16px;border-radius:var(--radius-pill);font-size:.88rem;font-weight:600;color:var(--text-2);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.ptab:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.ptab[aria-selected="true"]{background:var(--text);color:#fff;box-shadow:none}
.app{--app-soft:var(--canvas-2);--app-track:var(--panel);--app-hi:var(--text);--app-warn-bg:#F5EDDD;background:var(--canvas);border-radius:16px;box-shadow:var(--shadow-2);overflow:hidden}
/* mockup em grafite: painéis um tom acima do fundo, trilhos translúcidos, azul-gelo nos destaques */
.app.grafite{--app-soft:#181C24;--app-track:rgba(229,233,238,.10);--app-hi:#8FB9F2;--app-warn-bg:rgba(232,194,122,.14);--warn:#E8C27A;--danger:#F08A8A;box-shadow:0 2px 4px rgba(18,21,27,.10),0 32px 72px rgba(18,21,27,.28)}
.app.grafite .chip{background:rgba(229,233,238,.08);color:var(--text-2)}
.app-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.82rem}
.app-dots{display:flex;gap:6px}
.app-dots i{width:9px;height:9px;border-radius:50%;background:var(--app-track)}
.app-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-demo{margin-left:auto;font-size:.7rem}
.app-body{display:grid;grid-template-columns:184px minmax(0,1fr);min-height:556px}
.app-side{display:grid;gap:2px;align-content:start;padding:14px 10px;border-right:1px solid var(--line);font-size:.83rem}
.app-side span{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text-2);white-space:nowrap}
.app-side svg{width:16px;height:16px;flex:none}
.app-side .on{background:var(--app-soft);color:var(--text);font-weight:600}
.app-main{padding:20px;min-width:0}
.pane{animation:paneIn .35s var(--ease-out)}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{padding:12px 14px;border-radius:12px;background:var(--app-soft)}
.kpi small{display:block;font-size:.74rem;color:var(--text-2);white-space:nowrap}
.kpi b{display:block;margin-top:2px;font-size:1.08rem;font-weight:600;white-space:nowrap}
.kpi.is-warn b{color:var(--warn)}
.pane-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-top:14px}
.box{border:1px solid var(--line);border-radius:12px;padding:14px}
.box-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;font-size:.84rem;margin-bottom:14px}
.box-h small{font-weight:400;color:var(--text-2);font-size:.74rem}
.bars{display:flex;align-items:flex-end;gap:6px;height:124px}
.bars i{flex:1;height:calc(var(--h)*100%);border-radius:4px 4px 0 0;background:var(--app-track)}
.bars i.now{background:var(--app-hi)}
.opbars{display:grid;gap:14px;font-size:.83rem}
.opbars li{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:10px;align-items:center}
.opbars i{height:8px;border-radius:99px;background:linear-gradient(to right,var(--app-hi) calc(var(--p)*100%),var(--app-track) 0)}
.opbars b{font-weight:600;text-align:right}
.recentes{margin-top:14px}
.recentes li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:.83rem}
.recentes li:first-child{border-top:0;padding-top:0}
.recentes li:last-child{padding-bottom:0}
.recentes small{color:var(--text-2);font-size:.76rem;white-space:nowrap}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{text-align:left;font-weight:600;font-size:.74rem;color:var(--text-3);padding:4px 10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--app-soft);font-size:.74rem;font-weight:600;color:var(--text-2)}
.tag-ok{background:var(--app-track);color:var(--text)}
.tag-warn{background:var(--app-warn-bg);color:var(--warn)}
.uso li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.uso li:last-child{border-bottom:0}
.uso small{display:block;color:var(--text-2);font-size:.74rem}
.uso i{height:8px;border-radius:99px;background:linear-gradient(to right,var(--c,var(--app-hi)) calc(var(--p)*100%),var(--app-track) 0)}
.uso i.is-high{--c:var(--danger)}
.uso b{font-weight:600;font-size:.8rem;white-space:nowrap}
.alertas li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.alertas li:last-child{border-bottom:0}
.alertas b{display:block;font-weight:600}
.alertas div span{color:var(--text-2)}
.alertas em{font-style:normal;font-weight:600;font-size:.76rem;padding:3px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line-strong);white-space:nowrap}
.sev{width:8px;height:8px;border-radius:50%;background:var(--grey);margin-top:7px}
.sev-high{background:var(--danger)}
@media (max-width:1080px){.app-body{grid-template-columns:minmax(0,1fr)}.app-side{display:none}}
@media (max-width:960px){
  .painel-grid{display:flex;flex-direction:column;gap:36px}
  .painel-copy{display:contents}
  .painel-copy>.rv{order:1}
  .painel-demo{order:2;padding-bottom:0}
  .estatua-notebook{order:3;width:min(64%,320px);margin:0 0 0 auto;max-height:300px;overflow:hidden}
}
@media (max-width:620px){
  .app-demo{display:none}
  .app-main{padding:14px}
  .kpis{grid-template-columns:1fr 1fr}
  .pane-cols{grid-template-columns:1fr}
  .hide-sm{display:none}
  .tbl{font-size:.8rem}
  .tbl th,.tbl td{padding-inline:6px}
  .uso li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .uso i{grid-column:1/-1;order:3}
  .alertas li{grid-template-columns:10px minmax(0,1fr)}
  .alertas em{grid-column:2;justify-self:start}
}

/* ---------- 6. Prova por números (peça grafite) ---------- */
.numeros{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,8vw,108px)}
/* trama de meandro: a ideia do Dot Pattern (Magic UI, MIT) e do Grid and Dot Backgrounds (Aceternity UI), com o gancho de meandro
   da marca no lugar dos pontinhos. Um SVG de 36x40 repetido, quase transparente, que some para a esquerda e para baixo, onde
   ficam o título e os números. CSS puro, parado: custo zero no celular e nada a desligar no "reduzir movimento" */
.numeros::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='40' viewBox='0 0 36 40'%3E%3Cpath d='M10 9V23H26V13H16V19H20' fill='none' stroke='%23E5E9EE' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E") 0 0/36px 40px;
  -webkit-mask-image:radial-gradient(120% 130% at 100% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);mask-image:radial-gradient(120% 130% at 100% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%)}
.numeros-title{font-size:clamp(1.25rem,1.9vw,1.7rem);max-width:32ch;line-height:1.3}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(36px,4.5vw,60px) 0 0}
.stat{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:26px 20px 0 0;border-top:1px solid var(--line-strong)}
.stat::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--ice)}
.stat dd{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(2.1rem,4.3vw,3.7rem);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.stat dt{margin-top:14px;color:var(--text-2);font-size:.95rem;max-width:18ch}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr;gap:36px 20px}}

/* ---------- 7. Planos ---------- */
.tablist{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--canvas-2);margin-bottom:28px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:92px;padding:0 20px;border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;color:var(--text-2);white-space:nowrap;transition:background-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.tab img{width:auto;height:20px;filter:grayscale(1);opacity:.6;transition:filter var(--dur-fast),opacity var(--dur-fast)}
.tab img[src*="claro"]{height:14px}
.tab img[src*="tim"]{height:16px}
.tab:hover{color:var(--text)}
.tab:hover img,.tab[aria-selected="true"] img{filter:none;opacity:1}
.tab[aria-selected="true"]{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(18,21,27,.1),0 2px 8px rgba(18,21,27,.06)}
.tabpanel{animation:paneIn .35s var(--ease-out)}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:24px 22px 22px}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin-bottom:22px}
.plan-logo{height:22px;width:auto}
.plan-logo[src*="claro"]{height:15px}
.plan-logo[src*="tim"]{height:17px}
.plan-cat{font-size:.75rem;font-weight:600;color:var(--text-2);text-align:right;line-height:1.3}
.plan-region{align-self:flex-start;margin:-10px 0 14px}
.plan-franquia{font-family:var(--font-display);font-weight:500;font-size:1.65rem;letter-spacing:-.03em;line-height:1.1}
.plan-comp{font-size:.84rem;color:var(--text-2);margin-top:6px;min-height:2.7em;line-height:1.35}
.plan-price{display:flex;align-items:baseline;gap:5px;margin-top:18px;font-weight:600;font-size:1.7rem;letter-spacing:-.02em;line-height:1}
.plan-price .cur{font-size:.9rem;font-weight:600;color:var(--text-2)}
.plan-consult{font-size:1.1rem}
.plan-unit{font-size:.8rem;color:var(--text-2);margin-top:6px}
.plan-promo{font-size:.78rem;color:var(--text-2);margin-top:4px}
.plan-gratis{display:grid;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;line-height:1.4}
.plan-gratis li{display:flex;gap:8px;align-items:flex-start}
.plan-gratis svg{width:15px;height:15px;flex:none;margin-top:2px}
.plan-cond{margin:14px 0 20px;font-size:.78rem;color:var(--text-3);line-height:1.5}
.plan-cta{margin-top:auto;width:100%}
.plan-consultivo{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:26px 24px 24px;border-radius:var(--radius)}
.plan-consultivo h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;letter-spacing:-.025em;line-height:1.2}
.plan-consultivo p{color:var(--text-2);margin-top:12px;font-size:.95rem;line-height:1.6}
.plan-consultivo .btn{width:100%;white-space:normal;text-align:center;line-height:1.3}
.plan-loading,.plan-empty{grid-column:1/-1;padding:28px 0;color:var(--text-2)}
/* apps que não descontam da franquia, em linha no card (a ideia vem dos sites das operadoras) */
.plan-franquia small{display:block;margin-top:6px;font-family:var(--font-body);font-weight:400;font-size:.8rem;letter-spacing:0;line-height:1.35;color:var(--text-2)}
.plan-gb{font-variant-numeric:tabular-nums}
.plan-apps{margin-top:16px}
.plan-apps-t{display:block;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-3)}
.plan-apps ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.plan-app{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 7px;border-radius:var(--radius-pill);background:var(--canvas-2);font-size:.76rem;font-weight:600;color:var(--text)}
/* ícones do Simple Icons (CC0), um traçado só: a cor original de cada app vem do fundo, recortado pela máscara. O Julio pediu a cor original */
.plan-app i{display:block;width:17px;height:17px;flex:none;background:var(--papp-cor,var(--text));-webkit-mask:var(--papp-ico) center/contain no-repeat;mask:var(--papp-ico) center/contain no-repeat}
.plan-app-whatsapp{--papp-cor:#25D366;--papp-ico:url("../apps/whatsapp.svg")}
.plan-app-waze{--papp-cor:#33CCFF;--papp-ico:url("../apps/waze.svg")}
.plan-app-facebook{--papp-cor:#0866FF;--papp-ico:url("../apps/facebook.svg")}
.plan-app-x{--papp-cor:#000;--papp-ico:url("../apps/x.svg")}
.plan-app-instagram{--papp-ico:url("../apps/instagram.svg")}
.plan-app-instagram i{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
/* VITRINE da home: o trilho dos planos se arrasta; o card "Não sabe qual escolher?" fica fixo ao lado e não rola com eles.
   Mecânica tomada do site da TIM Empresas como referência (arrastar para ver o próximo plano), refeita com rolagem nativa e
   scroll-snap: dedo e teclado funcionam sem JavaScript; o mouse arrasta com meia dúzia de linhas em home.js */
.plan-controles{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.plan-controles .tablist{margin-bottom:0}
.porta{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:600;font-size:.92rem;-webkit-tap-highlight-color:transparent}
.porta input{position:absolute;opacity:0;width:1px;height:1px}
.porta-trilho{position:relative;width:46px;height:26px;flex:none;border-radius:99px;background:var(--line-strong);transition:background-color var(--dur) var(--ease-out)}
.porta-trilho::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,21,27,.3);transition:transform var(--dur) var(--ease-out)}
.porta input:checked+.porta-trilho{background:var(--text)}
.porta input:checked+.porta-trilho::after{transform:translateX(20px)}
.porta input:focus-visible+.porta-trilho{outline:2px solid var(--focus);outline-offset:3px}
.porta small{margin-left:6px;font-size:.78rem;font-weight:600;color:var(--text-3)}
.porta[hidden]{display:none}
.vitrine{display:grid;grid-template-columns:minmax(0,1fr) 288px;grid-template-areas:"trilho lado" "nav .";column-gap:16px;row-gap:16px}
.vitrine-trilho{grid-area:trilho;display:flex;gap:16px;margin:-10px -4px -18px;padding:10px 4px 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;cursor:grab;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.vitrine-trilho::-webkit-scrollbar{display:none}
.vitrine-trilho.no-fim{-webkit-mask-image:none;mask-image:none}
.vitrine-trilho.is-arrastando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.vitrine-trilho.is-arrastando .plan{pointer-events:none}
.vitrine-trilho>.plan{flex:0 0 272px;scroll-snap-align:start}
.vitrine-trilho>.plan-loading,.vitrine-trilho>.plan-empty{flex:1 0 100%}
.vitrine-trilho:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--radius)}
.vitrine-lado{grid-area:lado;display:flex}
.vitrine-lado .plan-consultivo{flex:1}
.vitrine-nav{grid-area:nav;display:flex;align-items:center;gap:8px}
.vitrine-nav[hidden]{display:none}
.vitrine-barra{flex:1;max-width:220px;height:2px;margin-right:auto;border-radius:2px;background:var(--line);overflow:hidden}
.vitrine-barra i{display:block;height:100%;background:var(--text);transform-origin:left;transform:scaleX(0)}
.vitrine-seta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color var(--dur-fast),box-shadow var(--dur-fast),opacity var(--dur-fast)}
.vitrine-seta svg{width:18px;height:18px}
.vitrine-seta[data-dir="-1"] svg{transform:rotate(180deg)}
.vitrine-seta:hover:not(:disabled){background:var(--accent-muted);box-shadow:inset 0 0 0 1px var(--text)}
.vitrine-seta:disabled{opacity:.35;cursor:default}
@supports (animation-timeline:scroll()){
  .vitrine{timeline-scope:--vitrine}
  .vitrine-trilho{scroll-timeline:--vitrine inline}
  .vitrine-barra i{animation:vitrineBarra linear both;animation-timeline:--vitrine}
  @keyframes vitrineBarra{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
}
@supports not (animation-timeline:scroll()){.vitrine-barra{visibility:hidden}}
@media (prefers-reduced-motion:no-preference){
  .vitrine-trilho.troca>.plan{animation:vitrineTroca .5s var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
  @keyframes vitrineTroca{from{opacity:.35;transform:translateY(8px)}}
}
@media (max-width:960px){
  .vitrine{grid-template-columns:1fr;grid-template-areas:"trilho" "nav" "lado"}
  .vitrine-trilho{margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:12px;-webkit-mask-image:none;mask-image:none}
  .vitrine-trilho>.plan{flex-basis:min(80%,320px)}
}
.aviso{margin-top:28px;font-size:.85rem;color:var(--text-3);max-width:78ch;line-height:1.6}
.aviso+p{margin-top:14px}
@media (max-width:1080px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tablist{display:flex}.tab{flex:1;min-width:0;padding:0 10px;gap:6px;font-size:.84rem}}
@media (max-width:720px){
  .plan-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 16px;scrollbar-width:none}
  .plan-grid::-webkit-scrollbar{display:none}
  .plan-grid>*{flex:0 0 82%;max-width:340px;scroll-snap-align:center}
}

/* ---------- 8. Equipe (seção escondida até o JSON ter gente de verdade) ---------- */
.equipe{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.equipe-title{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.equipe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pessoa{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;font-size:.92rem;line-height:1.35}
.pessoa-foto{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--canvas-2);overflow:hidden}
.pessoa-foto img{width:28px;opacity:.4}
.pessoa-foto img.is-foto{width:100%;height:100%;object-fit:cover;opacity:1}
.pessoa b{font-weight:600;align-self:end}
.pessoa .small{align-self:start;font-size:.82rem}
@media (max-width:960px){.equipe{grid-template-columns:1fr;gap:24px}}
@media (max-width:720px){.equipe-grid{grid-template-columns:1fr 1fr;gap:18px 12px}}

/* ---------- 9. Academia Palace ---------- */
.academia-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:clamp(36px,4.5vw,60px)}
.academia-head .head{margin-bottom:0}
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px}
.video{display:grid;gap:12px;justify-items:start;align-content:start}
.video h3{font-size:1.02rem;line-height:1.4}
.video .chip{background:var(--panel)}
.thumb{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;border-radius:16px;background:#12151B;color:#fff;overflow:hidden}
.thumb svg{width:44px;height:44px;opacity:.92}
.thumb-cat{position:absolute;left:14px;top:12px;font-size:.74rem;font-weight:600;letter-spacing:.02em;color:#C4DAF8}
.thumb-dur{position:absolute;right:12px;bottom:10px;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.14)}
/* vídeo que ainda não existe: "Em breve" discreto na própria capa, no lugar da duração, e o play apagado para não prometer reprodução */
.thumb-breve{position:absolute;right:12px;bottom:10px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.1);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#C9D0D9}
.video.is-breve .thumb svg{opacity:.38}
.video.is-breve h3{color:var(--text-2)}
a.video-link{display:contents}
@media (max-width:860px){
  .videos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scrollbar-width:none}
  .videos::-webkit-scrollbar{display:none}
  .video{flex:0 0 78%;max-width:340px;scroll-snap-align:center}
}

/* ---------- 10. FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq .head{margin-bottom:0;position:sticky;top:calc(var(--nav-h) + 40px)}
.faq-link{margin-top:var(--s5)}
/* o item sob o cursor vira um bloco e o item aberto fica marcado: bloco, contorno e um pulso suave no clique. O bloco sangra
   20 px para os lados; o texto continua alinhado com a página. Os fios separadores são pseudo-elementos para poderem sumir
   em volta do bloco. A luz que acompanha o mouse é a mesma dos cards (.luz, posta pelo site.js em cada item) */
.acc{--acc-bloco:var(--canvas-2);--acc-pulso:var(--panel);margin-inline:-20px}
.section.alt .acc{--acc-bloco:#fff}
.acc::after{content:"";display:block;height:1px;margin-inline:20px;background:var(--line);transition:opacity .25s var(--ease-out)}
.acc-item{position:relative;padding-inline:20px;border-radius:16px;background-color:transparent;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .2s var(--ease-out),--luz .5s var(--ease-out)}
.acc-item::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--line);transition:opacity .25s var(--ease-out)}
.acc-item.open{background-color:var(--acc-bloco);box-shadow:inset 0 0 0 1px var(--line);animation:accPulso .9s var(--ease-out)}
.acc-item.open::before,.acc-item.open+.acc-item::before{opacity:0}
.acc:has(.acc-item:last-child.open)::after{opacity:0}
.acc-item:has(.acc-btn:focus-visible){background-color:var(--acc-bloco)}
.acc-item:active{transform:scale(.996)}
@media (hover:hover){
  .acc-item:hover{background-color:var(--acc-bloco)}
  .acc-item:hover::before,.acc-item:hover+.acc-item::before{opacity:0}
  .acc:has(.acc-item:last-child:hover)::after{opacity:0}
}
@keyframes accPulso{0%{background-color:var(--acc-pulso);box-shadow:inset 0 0 0 1px var(--line-strong)}100%{background-color:var(--acc-bloco);box-shadow:inset 0 0 0 1px var(--line)}}
.acc-item h3{font-size:1.05rem}
.acc-btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:22px 0;text-align:left;font-weight:600;line-height:1.4}
.acc-ico{position:relative;width:32px;height:32px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color var(--dur-fast),box-shadow var(--dur-fast)}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--text);transition:transform var(--dur) var(--ease-out),background-color var(--dur-fast)}
.acc-ico::after{transform:rotate(90deg)}
.acc-btn:hover .acc-ico{box-shadow:inset 0 0 0 1px var(--text)}
.acc-item.open .acc-ico{background:var(--text);box-shadow:none}
.acc-item.open .acc-ico::before,.acc-item.open .acc-ico::after{background:#fff}
.acc-item.open .acc-ico::after{transform:rotate(0deg)}
html.js .acc-panel{height:0;overflow:hidden}
.acc-panel p{padding:0 56px 24px 0;color:var(--text-2);max-width:64ch}
@media (max-width:960px){
  .faq-grid{grid-template-columns:1fr}
  .faq .head{position:static}
  .acc-panel p{padding-right:8px}
}

/* ---------- 11. Fecho: eco do Palácio em duas colunas que viram dados ---------- */
.fecho{position:relative;background:var(--canvas-2);overflow:clip}
.fecho-grid{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);align-items:center;min-height:clamp(520px,46vw,640px)}
.fecho-copy{position:relative;z-index:1;padding-block:clamp(72px,9vw,120px)}
.fecho-copy .lede{margin-top:var(--s5)}
.fecho-cta{margin-top:34px}
.contato-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:30px;font-size:.92rem;color:var(--text-2)}
.contato-linha a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.contato-linha a:hover{color:var(--text);text-decoration-color:currentColor}
.fecho-art{position:relative;align-self:stretch;pointer-events:none}
.fecho-frame{position:absolute;right:-3%;bottom:0;height:116%;aspect-ratio:3/4}
.fecho-frame .loop-img,.fecho-frame .loop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.loop-video{opacity:0}
.is-live .loop-video{opacity:1}
.is-live .loop-img{visibility:hidden}
@media (max-width:960px){
  .fecho-grid{grid-template-columns:1fr;min-height:0}
  .fecho-copy{padding-block:72px 0}
  .fecho-art{height:clamp(300px,84vw,480px);margin-top:12px}
  .fecho-frame{right:-4%;height:112%}
}