/* Black Friday CROMNI: camada sobre previa-hero.css (a v4 sem campanha segue em previa-hero.html como referência).
   Preto mais fundo, branco e laranja em blocos: assinatura + oferta na abertura, faixa tipográfica em movimento lento
   nas duas transições, campo laranja forte enquadrando o Kanban, bloco de anúncios com o percurso da informação.
   Movimento só nas faixas e nas linhas do fluxo; oferta, formulário e textos ficam parados. */
:root { --preto: #0B0908; }
.topo, .hero, .ciclo { background-color: var(--preto); }

/* ---------- Abertura: linha 1 = campanha (assinatura | oferta), linha 2 = promessa + CTA | formulário ---------- */
.hero { padding-top: calc(var(--topo-h) + clamp(32px, 4.5vw, 60px)); }
.hero-grade { container-type: inline-size; row-gap: clamp(32px, 4vw, 52px); }
.bf-assina {
  --col: calc(100cqi - 430px - clamp(40px, 6vw, 96px));   /* largura da coluna da esquerda */
  align-self: end; display: grid; gap: .1em;
  font: 700 min(112px, calc(var(--col) / 7.3))/.86 var(--f-titulo); letter-spacing: -.04em; text-transform: uppercase; color: #FFFDFB;
}
.bf-assina > span:first-child { white-space: nowrap; }
.bf-logo { display: block; width: auto; height: .74em; aspect-ratio: 1451.43 / 313.75; color: #FFFDFB; }

/* oferta: bloco laranja; "Até" grande e colado no 50%.
   Com os benefícios ele ficou mais alto: cresce para cima, no respiro do topo, e o CTA da abertura fica onde estava */
.bf-oferta { align-self: end; margin-top: calc(-1 * clamp(16px, 2vw, 28px)); padding: clamp(16px, 1.5vw, 20px) clamp(20px, 2.4vw, 30px); border-radius: 22px; background: var(--marca); color: var(--preto); }
.bf-of { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: .1em; font: 700 clamp(72px, 8vw, 112px)/.84 var(--f-titulo); letter-spacing: -.045em; text-transform: uppercase; }
.bf-ate { font-size: .42em; line-height: 1; letter-spacing: -.02em; }
.bf-de { grid-column: 1 / -1; margin-top: .14em; font-size: .3em; line-height: 1; letter-spacing: -.01em; }
/* benefícios cumulativos: parte do mesmo bloco, abaixo do desconto, que segue protagonista; um por linha (são três) */
.bf-mais { display: grid; justify-items: start; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid rgba(11, 9, 8, .2); }
.bf-mais li { display: flex; align-items: center; gap: 8px; font: 700 15px/1.1 var(--f-titulo); letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.bf-mais i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--preto); color: var(--marca); font: 700 16px/1 var(--f-texto); font-style: normal; }
.bf-cond { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: rgba(11, 9, 8, .8); }
.bf-cond a { color: var(--preto); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.bf-cond a:hover { text-decoration-thickness: 2.5px; }
.bf-cond a:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; border-radius: 3px; }
/* links da nota de privacidade do formulário (fundo escuro) */
.form-card .f-nota a { color: var(--marfim); text-decoration: underline; text-underline-offset: 2px; }
.form-card .f-nota a:hover { color: var(--realce); }
.form-card .f-nota a:focus-visible { outline: 2px solid var(--realce); outline-offset: 2px; border-radius: 3px; }

.hero h1 { margin-top: 22px; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.04; }
/* telas baixas (notebook 768, celular até 860): só os vãos da abertura encolhem, para o CTA caber inteiro com respiro abaixo */
@media (min-width: 980px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--topo-h) + 44px); }
  .hero-grade { row-gap: 32px; }
  .hero h1 { margin-top: 16px; }
  .hero .lead { margin-top: 18px; }
  .hero .hero-acoes { margin-top: 24px; }
}
@media (max-width: 559px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--topo-h) + 20px); }
  .hero-grade { row-gap: 28px; }
  .hero h1 { margin-top: 16px; }
  .hero .lead { margin-top: 16px; }
  .hero .hero-acoes { margin-top: 24px; }
}
@media (max-width: 559px) and (max-height: 860px) {
  /* oferta com três benefícios: o bloco laranja aperta por dentro (o 50% e a assinatura não mudam) */
  .bf-oferta { padding-block: 12px; }
  .bf-mais { margin-top: 8px; padding-top: 8px; gap: 4px; }
  .bf-mais i { width: 18px; height: 18px; font-size: 15px; }
  .bf-cond { margin-top: 6px; }
}
@media (max-width: 559px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--topo-h) + 12px); }
  .hero-grade { row-gap: 24px; }
  .hero h1, .hero .lead { margin-top: 10px; }
  .hero .hero-acoes { margin-top: 16px; }
  .hero .bf-cond { font-size: 12px; }   /* condição numa linha só até 360 px */
}
/* notebook de até 780 de altura: a oferta tem três benefícios, então os vãos encolhem mais um passo */
@media (min-width: 980px) and (max-height: 780px) {
  .hero { padding-top: calc(var(--topo-h) + 36px); }
  .hero-grade { row-gap: 24px; }
  .bf-oferta { padding-block: 14px; }
  .bf-mais { margin-top: 10px; padding-top: 8px; gap: 4px; }
  .bf-cond { margin-top: 6px; }
  .hero h1 { margin-top: 12px; }
  .hero .lead { margin-top: 12px; }
  .hero .hero-acoes { margin-top: 18px; }
}

/* ---------- Faixas da campanha: correm devagar, em sentidos opostos; botão discreto pausa as duas ---------- */
.bf-faixa { --bf-fundo: var(--acao); position: relative; overflow: hidden; background: var(--bf-fundo); color: var(--preto); }
.bf-faixa-esc { --bf-fundo: var(--preto); color: #FFFDFB; }
/* duas cópias iguais: andar metade do trilho cai exatamente no começo da segunda, sem salto */
.bf-corre { display: flex; width: max-content; animation: bf-corre 110s linear infinite; }
.bf-faixa-esc .bf-corre { animation-direction: reverse; }
.bf-parado .bf-corre { animation-play-state: paused; }
@keyframes bf-corre { to { transform: translateX(-50%); } }
.bf-faixa p {
  display: flex; align-items: center; gap: .5em; padding: max(.46em, 22px - .5em) .5em max(.46em, 22px - .5em) 0;   /* faixa nunca menor que 44 px: cabe o botão */
  font: 700 clamp(18px, 2.3vw, 30px)/1 var(--f-titulo); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
}
.bf-faixa i { flex: none; width: .28em; height: .28em; border-radius: 50%; background: currentColor; }
.bf-faixa-esc i { background: var(--marca); }
/* o texto some por baixo do botão em vez de passar atrás dele */
.bf-faixa::after { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(max(var(--gutter), (100% - 1200px) / 2) + 88px); background: linear-gradient(90deg, transparent, var(--bf-fundo) 55%); pointer-events: none; }
.bf-pausa {
  position: absolute; z-index: 1; top: 50%; right: calc(max(var(--gutter), (100% - 1200px) / 2) - 6px); translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.bf-pausa::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .55; transition: opacity .2s; }
.bf-pausa:hover::before { opacity: 1; }
.bf-pausa:focus-visible { outline: 3px solid currentColor; outline-offset: -2px; }
.bf-pausa svg { width: 12px; height: 12px; fill: currentColor; }
.bf-pausa[aria-pressed="true"] .ic-pausa, .bf-pausa:not([aria-pressed="true"]) .ic-tocar { display: none; }
.recursos { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- Funil: campo laranja da campanha, Kanban em moldura preta (produto segue claro e legível) ---------- */
.rec-kb::before { background: linear-gradient(160deg, var(--marca), var(--acao)); }
.rec-kb .moldura-clara { background: var(--preto); box-shadow: 0 50px 90px -40px rgba(70, 22, 0, .6), 0 12px 24px -12px rgba(70, 22, 0, .35); }

/* ---------- 4 · Vendas e anúncios: título e benefício antes da demonstração ---------- */
.ciclo { padding: clamp(28px, 5vw, 72px); }
.ciclo::after {   /* luz localizada: atrás do atendimento e onde a informação volta */
  background:
    radial-gradient(28% 30% at 50% 58%, rgba(255, 109, 48, .13), transparent 70%),
    radial-gradient(45% 26% at 50% 88%, rgba(255, 144, 48, .16), transparent 75%);
}
.ciclo-cab { display: block; max-width: 1000px; }
.ciclo h3 { margin-top: 14px; max-width: 15em; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.035em; }
.ciclo-acento { color: var(--marca); white-space: nowrap; }
.ciclo-apoio { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; margin-top: clamp(20px, 2.4vw, 28px); }
.ciclo-ben { font-size: clamp(17px, 1.4vw, 19px); }
.ciclo-ben strong { font-weight: 600; color: #FFFDFB; }
.ciclo-cond { margin-top: 4px; }

/* fluxo: cada etapa com o título colado na peça, centradas na altura do atendimento; legenda da volta embaixo */
.fluxo {
  --gap: clamp(44px, 5.5vw, 80px); --volta-mt: clamp(52px, 5.5vw, 72px);
  position: relative; display: grid; margin-top: clamp(44px, 6vw, 80px);
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.36fr) minmax(0, .7fr); align-items: center;
  column-gap: var(--gap);
}
.fluxo-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-t { font-size: 14px; line-height: 1.45; color: rgba(251, 248, 244, .62); }
.fx-t b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--marfim); }
.fx .peca { flex: none; margin-top: 0; box-shadow: 0 0 0 1px rgba(251, 248, 244, .08), 0 0 0 7px rgba(140, 124, 110, .16), 0 40px 70px -36px rgba(0, 0, 0, .9); }
/* atendimento é a peça principal: maior, com a borda e a luz em laranja */
.fx-atend .peca { padding: 16px 18px 18px; gap: 11px; box-shadow: 0 0 0 1px rgba(255, 144, 48, .5), 0 0 0 8px rgba(255, 144, 48, .1), 0 30px 90px -30px rgba(255, 109, 48, .38), 0 40px 70px -36px rgba(0, 0, 0, .9); }
.fx-atend .p-chat .b { max-width: 84%; font-size: 14px; }
.fx-atend .pc-cab > b { font-size: 15px; }

/* anúncio: produto em cena, com a identificação de ilustração */
.app .an-img { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 10px; background: #FFE1C7; }
.app .an-img .an-foto { display: block; width: 100%; height: auto; }
.an-tag { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 253, 251, .85); font-size: 10.5px; font-weight: 600; color: var(--corpo); }

/* venda: comprovante compacto */
.p-recibo { gap: 8px; padding: 14px 16px 12px; }
.rc-ok { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--verde); }
.app .rc-ok svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--verde-bg); }
.rc-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.rc-nome b { font-size: 14px; font-weight: 600; }
.rc-val { font: 700 clamp(22px, 2vw, 26px)/1.1 var(--f-titulo); letter-spacing: -.02em; }
.rc-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 4px; padding-top: 10px; border-top: 1.5px dashed var(--linha-f); }
.rc-pe .fl-col { font-size: 12.5px; }
.rc-pe time { font-size: 11.5px; color: var(--suave); }

/* legenda da volta: em cima do traço, legível, com o laranja do caminho */
.fx-volta {
  position: relative; z-index: 1; grid-column: 1 / -1; justify-self: center; margin-top: var(--volta-mt);
  display: grid; justify-items: center; gap: 3px; padding: 12px 22px; border-radius: 16px; text-align: center;
  background: var(--preto); border: 1px solid rgba(255, 144, 48, .6); box-shadow: 0 18px 44px -20px rgba(255, 109, 48, .5);
}
.fx-volta > b { display: inline-flex; align-items: center; gap: 9px; font: 600 clamp(16px, 1.5vw, 18px)/1.3 var(--f-texto); color: #FFFDFB; }
.fx-volta > b svg { width: 20px; height: 20px; flex: none; color: var(--marca); }
.fx-volta > span { font-size: 13.5px; line-height: 1.45; color: rgba(251, 248, 244, .7); }
.fx-volta > span b { font-weight: 700; color: var(--marca); }

/* linhas: o trilho apagado mostra o fluxo inteiro; o traço aceso percorre uma vez anúncio → atendimento → venda → anúncios */
.fl-base, .fl-viva { fill: none; }
.fl-base { stroke: rgba(255, 144, 48, .3); stroke-width: 2; }
.fl-viva { stroke: var(--marca); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(255, 144, 48, .55)); transition: stroke-dashoffset .55s cubic-bezier(.5, 0, .2, 1); }
.fl-viva.fl-2 { transition-delay: .7s; }
.fl-base.fl-3 { stroke-width: 3; }
.fl-viva.fl-3 { stroke-width: 4; transition-duration: 1.5s; transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
.fl-ponta { fill: rgba(255, 144, 48, .4); transition: fill .25s; }
.fl-ponta.fl-1 { transition-delay: .5s; }
.fl-ponta.fl-2 { transition-delay: 1.2s; }
.fl-ponta.fl-3 { transition-delay: 1.45s; }
.fl-ori { fill: rgba(255, 144, 48, .4); transition: fill .25s; }
.aceso .fl-viva.fl-1, .aceso .fl-viva.fl-2, .aceso-volta .fl-viva.fl-3 { stroke-dashoffset: 0; }
.aceso .fl-ponta.fl-1, .aceso .fl-ponta.fl-2, .aceso-volta .fl-ponta.fl-3, .aceso-volta .fl-ori { fill: var(--marca); }

/* sem JavaScript: o mesmo fluxo desenhado em CSS, parado e aceso. As peças se alinham pela base para as setas
   de ida (a 64 px do pé) e as pernas da volta acharem as bordas; colunas .84/1.36/.7 = 2,9 fr. */
.fluxo:not(.fluxo-js) { --c1: calc((100% - 2 * var(--gap)) * .42 / 2.9); --c3: calc((100% - 2 * var(--gap)) * .35 / 2.9); align-items: end; }
.fluxo:not(.fluxo-js) :is(.fx-atend, .fx-venda)::before { content: ""; position: absolute; right: calc(100% + 10px); bottom: 63px; width: calc(var(--gap) - 26px); height: 2.5px; background: var(--marca); }
.fluxo:not(.fluxo-js) :is(.fx-atend, .fx-venda)::after { content: ""; position: absolute; right: calc(100% + 6px); bottom: 58px; border-block: 6px solid transparent; border-left: 11px solid var(--marca); }
.fluxo:not(.fluxo-js)::after {   /* U: desce da venda, passa atrás da legenda e sobe até o anúncio */
  content: ""; position: absolute; left: var(--c1); right: var(--c3); bottom: 36px; height: calc(var(--volta-mt) + 26px);
  border: 4px solid var(--marca); border-top: 0; border-radius: 0 0 22px 22px;
}
.fluxo:not(.fluxo-js)::before { content: ""; position: absolute; left: calc(var(--c1) - 8px); bottom: calc(36px + var(--volta-mt) + 26px); border-inline: 10px solid transparent; border-bottom: 13px solid var(--marca); }

/* fechamento do próprio bloco: divisória discreta e CTA compacto dentro do painel escuro */
.ciclo-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid rgba(251, 248, 244, .12); }
.ciclo-fim-nota { font-size: 13px; line-height: 1.5; color: rgba(251, 248, 244, .6); }
/* transição curta até Agenda e métricas: o vão é este fim de seção somado ao topo de .am */
.recursos { padding-bottom: clamp(48px, 5vw, 72px); }

/* ==========================================================================
   Seções 5–9 (rodada de acabamento, 30/10). Cada seção tem prefixo próprio (am-, cc-, eq-, pf-, fe-) e toda regra
   começa pela classe da seção: nada daqui alcança as demonstrações aprovadas acima. A colisão de `.quem` com o
   rótulo dos balões do robô aconteceu duas vezes; não reutilizar nomes genéricos nem classes de interface da base.
   ========================================================================== */

/* ---------- 2b · Prova social: título à esquerda, dois depoimentos em vídeo vertical (9:16) em moldura clara.
   A seção nasce hidden; quem mostra é js/previa-bf.js. Nada de display aqui, para o hidden valer ---------- */
.ps { padding: 0 var(--gutter) clamp(64px, 8vw, 104px); }
.ps .ps-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--linha-f); }
.ps h2 { max-width: 11em; font-size: clamp(32px, 3.9vw, 50px); line-height: 1.04; letter-spacing: -.03em; }
.ps .ps-sub { margin-top: 16px; max-width: 26em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--corpo); }
.ps .ps-lista { display: flex; justify-content: flex-end; gap: clamp(16px, 2.4vw, 28px); }
.ps .ps-card { flex: 0 1 270px; min-width: 0; }
/* tela do vídeo: raio interno concêntrico ao da moldura (26 − 8) */
.ps .ps-tela > video, .ps .ps-espera { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: var(--carvao); object-fit: cover; }
/* quadro de espera (só com ?prova=1): carvão, play laranja e o aviso */
.ps .ps-espera { display: grid; place-content: center; justify-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: rgba(251, 248, 244, .72); }
.ps .ps-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--marca); color: var(--preto); box-shadow: 0 0 0 6px rgba(255, 144, 48, .18); }
.ps .ps-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.ps .ps-leg { display: grid; justify-items: start; gap: 6px; margin-top: 14px; font-size: 14px; }
.ps .ps-leg b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ps .ph { color: var(--lar-txt); }

/* ---------- 5 · Agenda e métricas: agenda em moldura carvão sobre campo pêssego; painel compacto em moldura preta ---------- */
.am { padding: clamp(32px, 3.5vw, 48px) var(--gutter) clamp(64px, 8vw, 104px); overflow-x: clip; }
/* explicação logo abaixo do título, em largura de leitura */
.am .am-cab { max-width: 780px; }
.am h2 { margin-top: 18px; font-size: clamp(32px, 4vw, 54px); line-height: 1.03; letter-spacing: -.035em; }
.am .am-ben { margin-top: 16px; max-width: 36em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--corpo); }
.am .am-palco { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; margin-top: clamp(36px, 4.5vw, 56px); }
.am .am-leg { font-size: 14px; line-height: 1.45; color: var(--suave); }
.am .am-leg b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--carvao); }

/* campo pêssego do tamanho da agenda, deslocado para baixo e para a direita: enquadra e dá profundidade */
.am .am-quadro { position: relative; isolation: isolate; margin-top: 18px; padding: 0 clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px) 0; }
.am .am-quadro::before {
  content: ""; position: absolute; z-index: -1; inset: clamp(36px, 4vw, 56px) 0 0 clamp(24px, 3vw, 44px); border-radius: 28px;
  background: linear-gradient(150deg, var(--lar-bg), var(--pessego) 45%, var(--pessego-b)); box-shadow: inset 0 0 0 1px rgba(181, 60, 8, .08);
}
/* moldura carvão: o cabeçalho mora no escuro, com detalhes laranja; o interior segue claro */
.am .am-moldura {
  padding: 0 7px 7px; border-radius: 24px; background: var(--carvao); font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 0 0 1px rgba(11, 9, 8, .9), 0 44px 80px -38px rgba(31, 26, 23, .6), 0 12px 24px -14px rgba(31, 26, 23, .3);
}
.am .am-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 13px 10px 12px 14px; color: #FFFDFB; }
.am .am-barra > b { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; font: 600 17px/1.2 var(--f-texto); letter-spacing: -.01em; }
.am .am-barra > b svg { width: 20px; height: 20px; flex: none; color: var(--marca); }
.am .am-abas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(251, 248, 244, .08); box-shadow: inset 0 0 0 1px rgba(251, 248, 244, .1); font-size: 12px; color: rgba(251, 248, 244, .7); }
.am .am-abas span { padding: 4px 10px; border-radius: 7px; }
.am .am-abas .am-on { background: var(--marca); color: var(--preto); font-weight: 600; }
.am .am-novo { padding: 7px 12px; border-radius: 9px; background: var(--acao); color: var(--carvao); font-size: 12px; font-weight: 600; white-space: nowrap; }
.am .am-app { border-radius: 18px; font-size: 13.5px; }
.am .am-pend { margin: 14px 16px 0; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.am .am-pend-t { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.am .am-pend-t b { margin-right: auto; font-weight: 600; }
.am .am-pend-t span { min-width: 22px; padding: 1px 6px; border-radius: 6px; background: var(--lar-bg); color: var(--lar-ind); font-size: 11.5px; font-weight: 600; text-align: center; }
.am .am-pend-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; }
.am .am-pend-l p { display: grid; }
.am .am-pend-l b { font-size: 13.5px; font-weight: 600; }
.am .am-pend-l p span { font-size: 12px; color: var(--suave); }
.am .am-bts { display: flex; gap: 6px; }
.am .am-bt { padding: 5px 10px; border: 1px solid var(--linha-f); border-radius: 8px; background: #fff; font-size: 12px; color: var(--corpo); white-space: nowrap; }
.am .am-sim { border-color: #B7DFC6; color: var(--verde); }
.am .am-dia { padding: 16px 16px 18px; }
/* o dia em destaque: filete laranja, data maior e a contagem em etiqueta */
.am .am-dia-t { display: flex; align-items: center; gap: 10px; padding: 2px 0 2px 12px; border-left: 4px solid var(--acao); }
.am .am-dia-t b { font: 700 17px/1.2 var(--f-titulo); letter-spacing: -.01em; }
.am .am-dia-t span { padding: 2px 9px; border-radius: 999px; background: var(--lar-bg); color: var(--lar-ind); font-size: 11.5px; font-weight: 600; }
.am .am-evs { display: grid; gap: 8px; margin-top: 10px; }
/* evento como na agenda real: cor de fundo pelo estado, horário, nome e duração */
.am .am-ev { position: relative; display: grid; grid-template-columns: 50px auto auto; justify-content: start; align-items: center; gap: 6px 14px; min-height: 56px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.am .am-ev time { font-size: 13px; font-weight: 600; }
.am .am-ev > p { display: grid; min-width: 0; }
.am .am-ev > p b { font-size: 14px; font-weight: 600; }
.am .am-ev > p span { font-size: 12px; color: var(--suave); }
.am .am-ok { border-color: #9FD0B2; background: #EEF7F1; }
.am .am-lemb { border-color: #EBCB6E; background: #FFF7E0; }
.am .am-livre { border-style: dashed; background: transparent; }
/* agendamento da Ana em destaque: anel e filete laranja, horário na cor da marca */
.am .am-foco { z-index: 1; grid-template-columns: 50px max-content max-content minmax(0, 1fr); padding-left: 16px; box-shadow: 0 0 0 2px var(--acao), 0 18px 34px -18px rgba(181, 60, 8, .55); }
.am .am-foco::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--acao); }
.am .am-foco time { color: var(--lar-txt); }
.am .am-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.am .am-chip-ok { background: #D7EEDF; color: var(--verde); }
.am .am-chip-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.am .am-chip-lemb { background: #FCE9B5; color: #7A5600; }
/* lembrete + resposta: dentro do agendamento da Ana, ao lado do status, ligado a ele por um traço curto
   que sai de um ponto no chip. Não cobre horários nem controles */
.am .am-conf {
  --liga: 44px; position: relative; grid-column: 4; justify-self: start; width: min(calc(100% - var(--liga)), 264px); margin: 2px 0 2px var(--liga);
  display: grid; gap: 7px; padding: 11px 12px 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(181, 60, 8, .2), 0 14px 28px -16px rgba(120, 45, 8, .45);
}
.am .am-conf::before { content: ""; position: absolute; top: 50%; right: 100%; width: calc(var(--liga) + 10px); height: 2px; background: var(--acao); }
.am .am-conf::after { content: ""; position: absolute; top: calc(50% - 4px); right: calc(100% + var(--liga) + 6px); width: 9px; height: 9px; border-radius: 50%; background: var(--acao); box-shadow: 0 0 0 3px rgba(255, 109, 48, .2); }
.am .am-conf-t { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--suave); }
.am .am-conf-t svg { width: 15px; height: 15px; color: #1F9D5B; }
.am .am-b { max-width: 92%; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
.am .am-out { justify-self: end; border: 1px solid #F6D2B8; border-bottom-right-radius: 4px; background: var(--pessego); }
.am .am-in { justify-self: start; border-bottom-left-radius: 4px; background: #F1ECE6; }
.am .am-conf-ok { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--linha-f); font-size: 12px; font-weight: 600; color: var(--verde); }
.am .am-conf-ok svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--verde-bg); }

/* métricas: contraponto compacto, moldura preta; um número principal, o gráfico e o resto como apoio */
.am .am-mt .am-leg { margin-bottom: 18px; }
.am .am-mold-esc { background: var(--preto); box-shadow: 0 0 0 1px rgba(11, 9, 8, .9), 0 44px 80px -38px rgba(31, 26, 23, .6), 0 12px 24px -14px rgba(31, 26, 23, .3); }
.am .am-mapp { padding: 14px 18px 16px; font-size: 13px; }
.am .am-m-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am .am-m-cab b { font-size: 15px; font-weight: 600; }
.am .am-m-cab span { padding: 3px 10px; border-radius: 999px; background: var(--acao); color: #fff; font-size: 11.5px; font-weight: 600; }
.am .am-kpi { margin-top: 14px; }
.am .am-kpi small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.am .am-kpi b { display: block; margin-top: 2px; font: 700 clamp(46px, 4.6vw, 60px)/1 var(--f-titulo); letter-spacing: -.04em; }
.am .am-graf { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.am .am-g-grade { fill: none; stroke: rgba(30, 27, 23, .08); stroke-width: 1; }
.am .am-g-area { fill: rgba(255, 109, 48, .12); }
.am .am-g-ant { fill: none; stroke: #EBCFBA; stroke-width: 2; }
.am .am-g-linha { fill: none; stroke: var(--acao); stroke-width: 2.6; stroke-linecap: round; }
.am .am-g-ponto { fill: var(--acao); stroke: #fff; stroke-width: 2; }
.am .am-g-sem { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--suave); }
.am .am-g-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 11.5px; color: var(--corpo); }
.am .am-g-leg span { display: inline-flex; align-items: center; gap: 6px; }
.am .am-g-leg i { width: 14px; height: 3px; border-radius: 2px; background: var(--acao); }
.am .am-g-leg .am-i-ant { background: #EBCFBA; }
.am .am-apoio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--linha-f); }
.am .am-apoio div { display: grid; grid-template-rows: 1fr auto; }
.am .am-apoio dt { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; color: var(--suave); }
.am .am-apoio dd { margin: 3px 0 0; font: 700 17px/1.1 var(--f-titulo); letter-spacing: -.01em; white-space: nowrap; }

/* ---------- 6 · Como começa: painel editorial; à direita, entrada (01) → centro carvão (02) → saída (03) em diagonal ---------- */
.cc { padding: clamp(64px, 8vw, 104px) var(--gutter); }
.cc .cc-grade { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cc h2 { margin-top: 18px; max-width: 11em; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
.cc .cc-lead { margin-top: 16px; max-width: 26em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--corpo); }
/* duas colunas: 01 à esquerda, 02 atravessa as duas, 03 à direita. Traços curtos ligam um momento ao seguinte */
.cc .cc-mapa { --cc-liga: 34px; --cc-x: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-liga) 20px; }
.cc .cc-et {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; min-width: 0;
  padding: 20px 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 26px 44px -32px rgba(120, 45, 8, .4);
}
.cc .cc-e1 { grid-column: 1; }
.cc .cc-e2 { grid-column: 1 / -1; }
.cc .cc-e3 { grid-column: 2; }
.cc :is(.cc-e1, .cc-e2)::after {   /* ligação: desce até o próximo momento e termina num ponto */
  content: ""; position: absolute; top: 100%; left: var(--cc-x); width: 10px; height: var(--cc-liga);
  background: linear-gradient(var(--acao), var(--acao)) center top / 2px calc(100% - 8px) no-repeat, radial-gradient(circle, var(--acao) 4px, transparent 4.5px) center bottom / 10px 10px no-repeat;
}
.cc .cc-e2::after { left: calc(50% + 10px + var(--cc-x)); }   /* 03 começa na segunda coluna */
.cc .cc-n { font: 700 clamp(44px, 4.2vw, 58px)/.84 var(--f-titulo); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--acao); }
.cc h3 { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.25; letter-spacing: -.015em; }
.cc .cc-c > p:not([class]) { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--corpo); }
.cc .cc-bolha { justify-self: start; width: fit-content; max-width: 100%; margin-top: 14px; padding: 8px 11px; border-radius: 13px 13px 13px 4px; background: #F1ECE6; font-size: 13px; line-height: 1.4; }
/* centro: a configuração com a equipe, em carvão, com o benefício da Black Friday preso à etapa */
.cc .cc-e2 { padding: 24px 26px 0; background: var(--carvao); color: var(--marfim); box-shadow: 0 0 0 1px rgba(11, 9, 8, .9), 0 44px 80px -40px rgba(31, 26, 23, .7); }
.cc .cc-e2 .cc-n { font-size: clamp(76px, 7.6vw, 108px); color: var(--marca); }
.cc .cc-e2 h3 { font-size: clamp(21px, 1.9vw, 26px); color: #FFFDFB; }
.cc .cc-e2 .cc-c > p:not([class]) { max-width: 40em; color: rgba(251, 248, 244, .74); }
.cc .cc-cfg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 600; color: #FFFDFB; }
.cc .cc-cfg li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(251, 248, 244, .08); box-shadow: inset 0 0 0 1px rgba(251, 248, 244, .12); }
.cc .cc-cfg i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: var(--preto); }
.cc .cc-cfg svg { width: 13px; height: 13px; }
.cc .cc-cfg-wa i { background: #25B868; color: #fff; }
.cc .cc-bf {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 22px -26px 0; padding: 13px 26px; border-radius: 0 0 22px 22px;
  background: var(--marca); color: var(--preto); font: 700 15px/1.2 var(--f-titulo); letter-spacing: -.005em; text-transform: uppercase;
}
.cc .cc-bf i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--preto); color: var(--marca); font: 700 17px/1 var(--f-texto); font-style: normal; }
/* saída: o primeiro contato real chegando no funil */
.cc .cc-lead-novo { display: grid; gap: 8px; margin-top: 14px; }
.cc .cc-novo { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 12px; background: #FFFDFB; font-size: 12.5px; line-height: 1.4; color: var(--corpo); }
.cc .cc-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pessego); color: var(--lar-txt); font-size: 12px; font-weight: 600; }
.cc .cc-nm { display: grid; min-width: 0; }
.cc .cc-nm b { font-size: 13px; font-weight: 600; color: var(--carvao); }
.cc .cc-novo time { align-self: start; font-size: 11px; color: var(--suave); }
.cc .cc-etapa { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: #F3EEE8; font-size: 11.5px; font-weight: 600; }
.cc .cc-etapa i { width: 7px; height: 7px; border-radius: 50%; background: #9A8B7E; }

/* ---------- 7 · Quem está por trás: foto grande, texto alinhado ao centro dela, credenciais organizadas ---------- */
.eq { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 9vw, 120px) var(--gutter); background: var(--preto); color: var(--marfim); color-scheme: dark; }
.eq::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(42% 50% at 28% 40%, rgba(255, 109, 48, .14), transparent 72%); }
.eq .eq-grade { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.eq .eq-foto { margin: 0; }
.eq .eq-foto img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(251, 248, 244, .1), 0 0 0 8px rgba(140, 124, 110, .14), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.eq .eq-foto figcaption { margin-top: 16px; font-size: 13px; color: rgba(251, 248, 244, .6); }
.eq h2 { margin-top: 20px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.035em; color: #FFFDFB; }
.eq .lead { margin-top: 18px; }
.eq .eq-cred { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid rgba(251, 248, 244, .12); }
.eq .eq-g-t { font: 600 13px/1.3 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.eq .eq-g ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.eq .eq-g li { display: grid; align-content: start; gap: 12px; }
.eq .eq-placa { display: grid; place-items: center; height: 96px; padding: 14px 18px; border-radius: 16px; background: #FFFDFB; }
.eq .eq-placa img { display: block; width: auto; height: var(--h, 48px); max-width: 100%; object-fit: contain; }
.eq .eq-placa-txt { align-content: center; gap: 2px; color: var(--carvao); font: 600 13px/1.2 var(--f-texto); text-align: center; }
.eq .eq-placa-txt b { font: 700 18px/1.1 var(--f-titulo); letter-spacing: -.01em; }
.eq .eq-leg { font-size: 14px; line-height: 1.45; color: rgba(251, 248, 244, .8); }
.eq .eq-cred .hn-nota { grid-column: 1 / -1; margin-top: 0; }

/* ---------- 8 · Perguntas frequentes: linhas largas, a linha inteira abre; aberta ganha fundo e filete da marca ---------- */
.pf { padding: clamp(64px, 8vw, 104px) var(--gutter); }
.pf .pf-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
/* painel de apoio: carvão, título branco, filete laranja e o convite para perguntar no WhatsApp; ocupa a altura das perguntas */
.pf .pf-cab {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px);
  border-radius: 22px; background: var(--carvao); color: var(--marfim); color-scheme: dark;
}
.pf .pf-cab::before { content: ""; flex: none; width: 36px; height: 4px; margin-bottom: 20px; border-radius: 2px; background: var(--marca); }
.pf .pf-cab::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 100% 100%, rgba(255, 109, 48, .2), transparent 72%); }
.pf h2 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.06; letter-spacing: -.03em; color: #FFFDFB; }
.pf .pf-sub { margin-top: 12px; max-width: 16em; font-size: 16px; line-height: 1.55; color: rgba(251, 248, 244, .74); }
.pf .pf-acao { margin-top: auto; padding-top: 28px; }
.pf .pf-bt { min-height: 48px; padding: 10px 20px 10px 16px; font-size: 15px; }
.pf .pf-nota { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(251, 248, 244, .58); }
.pf .pf-lista { display: grid; align-content: start; gap: 10px; }
.pf details { border: 1px solid var(--linha); border-radius: 16px; background: #FFFDFB; transition: background-color .25s var(--mola), border-color .25s var(--mola); }
.pf details:hover { border-color: var(--linha-f); }
.pf details[open] { border-color: rgba(255, 109, 48, .4); background: #FFF3E8; box-shadow: inset 4px 0 0 var(--acao); }
.pf summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 16px 20px 16px 26px; border-radius: 16px; font: 600 clamp(18px, 1.55vw, 21px)/1.35 var(--f-texto); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.pf summary::-webkit-details-marker { display: none; }
.pf summary::after {   /* + vira − ao abrir */
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background-color: var(--pessego);
  background-image: linear-gradient(var(--lar-txt), var(--lar-txt)), linear-gradient(var(--lar-txt), var(--lar-txt));
  background-position: center; background-repeat: no-repeat; background-size: 13px 2px, 2px 13px;
}
.pf details[open] summary::after { background-color: var(--acao); background-image: linear-gradient(#fff, #fff), none; background-size: 13px 2px, 0 0; }
.pf summary:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; }
.pf .pf-resp { max-width: 62ch; padding: 0 26px 24px; font-size: 17px; line-height: 1.65; color: var(--corpo); }
.pf .pf-resp a { color: var(--lar-txt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pf .pf-resp a:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; border-radius: 3px; }

/* ---------- 9 · Fechamento: curto, uma coluna centrada (sem buraco ao lado); WhatsApp e link de volta ao formulário ---------- */
.fe { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(72px, 9vw, 120px); background: var(--preto); color: var(--marfim); color-scheme: dark; }
.fe .fe-in { display: grid; justify-items: center; max-width: 820px; text-align: center; }
.fe h2 { margin-top: 22px; max-width: 14em; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.02; letter-spacing: -.035em; color: #FFFDFB; }
.fe .fe-txt { margin-top: 20px; max-width: 36em; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: rgba(251, 248, 244, .72); }
.fe .hero-acoes { justify-content: center; margin-top: 32px; }
.fe .fe-form { margin-top: 18px; font-size: 15px; line-height: 1.5; }
.fe .fe-form a { color: var(--marfim); text-decoration: underline; text-decoration-color: rgba(255, 144, 48, .7); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fe .fe-form a:hover { color: var(--marca); }
.fe .fe-form a:focus-visible { outline: 3px solid var(--realce); outline-offset: 3px; border-radius: 4px; }

/* ---------- Rodapé ---------- */
.rodape { padding: 28px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); border-top: 1px solid rgba(251, 248, 244, .08); background: var(--preto); color: rgba(251, 248, 244, .62); font-size: 13px; }
.rodape-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rodape .logo { height: 20px; color: var(--tinta); }
.rodape-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-left: auto; }
/* link e botão de cookies com a mesma cara; o botão nasce hidden e quem o mostra é js/consentimento.js */
.rodape-links a, .rodape .link-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: rgba(251, 248, 244, .3); text-underline-offset: 3px; cursor: pointer; }
.rodape-links a:hover, .rodape .link-cookies:hover { color: var(--marfim); text-decoration-color: currentColor; }
.rodape-links a:focus-visible, .rodape .link-cookies:focus-visible { outline: 2px solid var(--realce); outline-offset: 3px; border-radius: 3px; }
.rodape .link-cookies[hidden] { display: none; }

/* ---------- Empilhado ---------- */
/* sem largura para o lembrete ao lado do status: ele desce para baixo do nome, ligado por um traço vertical curto */
@media (max-width: 1179px) {
  .am .am-foco { grid-template-columns: 50px max-content max-content; }
  .am .am-conf { grid-column: 2 / -1; width: auto; max-width: 340px; margin: 16px 0 2px; }
  .am .am-conf::before { top: auto; bottom: 100%; right: auto; left: 26px; width: 2px; height: 18px; }
  .am .am-conf::after { top: -22px; right: auto; left: 22px; }
}
/* como começa: o título vai para cima e a composição ocupa a largura toda */
@media (max-width: 1079px) {
  .cc .cc-grade { grid-template-columns: minmax(0, 1fr); }
  .cc h2 { max-width: 16em; }
}
@media (max-width: 979px) {
  .bf-assina { --col: 100cqi; font-size: min(96px, calc(var(--col) / 7.3)); }
  .bf-oferta { max-width: 560px; margin-top: 0; }
  .eq .eq-grade, .ps .ps-grade { grid-template-columns: minmax(0, 1fr); }
  .ps .ps-lista { justify-content: flex-start; }
  .eq .eq-txt { order: -1; max-width: 640px; }
  .pf .pf-grade { grid-template-columns: minmax(0, 1fr); }
  .pf .pf-sub { max-width: none; }
}
/* fluxo em coluna: setas descem entre as etapas; a volta sobe pela margem esquerda até o anúncio */
@media (max-width: 899px) {
  .ciclo-apoio { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fluxo { grid-template-columns: minmax(0, 1fr); row-gap: 60px; max-width: 560px; padding-left: 36px; }
  .fx { gap: 12px; }
  .fx-venda .peca { align-self: flex-start; width: min(100%, 300px); }
  .fx-volta { grid-column: auto; justify-self: start; justify-items: start; margin-top: 0; padding: 12px 16px; text-align: left; }
  /* sem JavaScript, em coluna: setas descem no vão; a volta sai da legenda e sobe pela margem até o anúncio */
  .fluxo:not(.fluxo-js) { align-items: stretch; }
  .fluxo:not(.fluxo-js) :is(.fx-atend, .fx-venda)::before { right: auto; left: 50%; bottom: calc(100% + 10px); width: 2.5px; height: 32px; }
  .fluxo:not(.fluxo-js) :is(.fx-atend, .fx-venda)::after { right: auto; left: calc(50% - 5px); bottom: calc(100% + 6px); border: 0; border-inline: 6px solid transparent; border-top: 11px solid var(--marca); }
  .fluxo:not(.fluxo-js)::after { left: 12px; right: auto; top: 140px; bottom: 34px; width: 24px; height: auto; border: 4px solid var(--marca); border-right: 0; border-radius: 16px 0 0 16px; }
  .fluxo:not(.fluxo-js)::before { left: 32px; top: 134px; bottom: auto; border: 0; border-block: 8px solid transparent; border-left: 12px solid var(--marca); }
  /* agenda e métricas empilhadas */
  .am .am-palco { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .am .am-ag { max-width: 640px; }
  .am .am-mt { width: min(100%, 460px); }
}
@media (max-width: 759px) {
  /* como começa no celular: sequência vertical simples, mesma ligação entre os momentos */
  .cc .cc-mapa { --cc-liga: 28px; --cc-x: 44px; grid-template-columns: minmax(0, 1fr); }
  .cc :is(.cc-e1, .cc-e2, .cc-e3) { grid-column: 1; }
  .cc .cc-e2::after { left: var(--cc-x); }
  .cc .cc-et { column-gap: 14px; padding: 18px; }
  .cc .cc-e2 { padding: 20px 20px 0; }
  .cc .cc-e2 .cc-n { font-size: 64px; }
  .cc .cc-bf { margin-inline: -20px; padding-inline: 20px; }
  .pf summary { padding-left: 20px; }
  .pf .pf-resp { padding: 0 20px 22px; }
}
@media (max-width: 559px) {
  /* celular: benefícios mais justos e vãos menores em volta da oferta, para o CTA seguir na primeira tela */
  .bf-oferta { margin-block: -14px; border-radius: 18px; }
  .bf-mais { gap: 5px; }
  .bf-mais li { font-size: 14px; white-space: normal; }
  .bf-cond { font-size: 13px; }
  .ciclo-fim .btn-grande, .fe .btn-grande { width: 100%; justify-content: flex-start; }
  .rodape-links { margin-left: 0; }
  .am .am-ev, .am .am-foco { grid-template-columns: 44px minmax(0, 1fr); }
  .am .am-ev > .am-chip { grid-column: 2; justify-self: start; }
  .am .am-novo { display: none; }
  .eq .eq-cred { grid-template-columns: minmax(0, 1fr); }
  .fe .fe-in { justify-items: start; text-align: left; }
  .fe .hero-acoes { justify-self: stretch; }
  .ps .ps-lista { gap: 12px; }
  .ps .ps-tela > video, .ps .ps-espera { border-radius: 14px; }   /* moldura do celular: 20 − 6 */
  .ps .ps-leg b { font-size: 15px; }
  .ps .ps-leg { font-size: 13px; }
}
@media (max-width: 259px) {
  .bf-assina > span:first-child { white-space: normal; }
  .bf-oferta { padding: 14px; }
  .bf-of { display: block; font-size: 40px; }
  .bf-of > span { display: block; }
  .bf-ate { font-size: .6em; }
  .bf-mais { display: flex; flex-direction: column; align-items: flex-start; }
  .bf-mais li { flex-direction: column; align-items: flex-start; white-space: normal; overflow-wrap: anywhere; }
  .ciclo { padding: 14px; }
  .fluxo { padding-left: 20px; }
  .fx .peca, .fx-atend .peca { padding: 10px; }
  .fx-atend .p-chat .b { max-width: 100%; }
  .ciclo-acento, .fx-volta > b { white-space: normal; }
  .fx-volta, .rc-val, .rc-nome b { min-width: 0; overflow-wrap: anywhere; }
  .fluxo:not(.fluxo-js)::after { left: 6px; width: 14px; }
  .fluxo:not(.fluxo-js)::before { left: 16px; }
  .am .am-ev, .am .am-foco { grid-template-columns: minmax(0, 1fr); }
  .am .am-ev > .am-chip { grid-column: auto; }
  .am .am-bts, .am .am-abas { flex-wrap: wrap; }
  .am .am-chip, .am .am-bt, .am .am-apoio dd { white-space: normal; overflow-wrap: anywhere; }
  .am .am-apoio { grid-template-columns: minmax(0, 1fr); }
  .cc .cc-et { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .cc .cc-e2 { padding: 14px 14px 0; }
  .cc .cc-bf { margin-inline: -14px; padding-inline: 14px; }
  .cc .cc-n, .cc .cc-e2 .cc-n { font-size: 36px; }
  .cc .cc-novo { grid-template-columns: minmax(0, 1fr); }
  .cc .cc-av { display: none; }
  .cc .cc-cfg li, .cc .cc-bf { overflow-wrap: anywhere; }
  .am .am-conf { min-width: 0; }
  .eq .eq-g ul { grid-template-columns: minmax(0, 1fr); }
  .fe .fe-form, .ps .ps-leg { overflow-wrap: anywhere; }
  .ps .ps-lista { flex-direction: column; }
  .pf summary { gap: 10px; padding: 12px 12px 12px 14px; font-size: 16px; overflow-wrap: anywhere; }
  .pf summary::after { width: 28px; height: 28px; }
  .pf .pf-resp { padding: 0 14px 18px; font-size: 15px; }
}

/* movimento reduzido: faixas paradas e alinhadas à coluna, sem botão; o fluxo aparece completo e aceso */
@media (prefers-reduced-motion: reduce) {
  .bf-corre { animation: none; padding-left: max(var(--gutter), (100% - 1200px) / 2); }
  .bf-pausa, .bf-faixa::after { display: none; }
  .fl-viva, .fl-ponta, .fl-ori { transition: none; }
}