/* One: ajustes próprios da página (o voice-message.css é compartilhado com o SMS e não é tocado aqui). */

/* Slot das cenas animadas: vazio não ocupa espaço. */
.cena-slot:empty { display: none; }
.cena-slot { margin-top: 36px; }

/* Hero: o vazio entre os botões, o slogan e a faixa vinha do gap de 130px aplicado também às linhas. */
.page-one .one-hero-layout { row-gap: 0; }
.page-one .page-hero .page-slogan { margin-top: 30px; }
.page-one .one-fact-line { margin-top: 26px; }
.page-one .one-fact-line p { align-content: start; }
.page-one .page-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 3.7vw, 3.4rem); line-height: 1.06; }

/* Títulos de seção mais longos que antes: tamanho único para todas as seções em duas colunas. */
.page-one .editorial-row h2 { max-width: none; font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; }
.page-one .editorial-row .page-lede { margin-top: 0; }

/* Listas de itens por seção: 4 colunas, e 3 + 2 quando são 5. */
.page-one .feature-lines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-one .feature-lines--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.page-one .feature-lines--5 > article:nth-child(-n+3) { grid-column: span 2; }
.page-one .feature-lines--5 > article:nth-child(n+4) { grid-column: span 3; }
.page-one .editorial-row + .feature-lines { margin-top: clamp(40px, 6vw, 72px); }

@media (max-width: 1100px) {
  .page-one .feature-lines--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-one .feature-lines--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-one .feature-lines--5 > article:nth-child(n) { grid-column: auto; }
}
@media (max-width: 680px) {
  .page-one .page-hero .page-slogan { display: none; }
  .page-one .one-fact-line { margin-top: 32px; }
  .page-one .feature-lines--4,
  .page-one .feature-lines--5 { grid-template-columns: 1fr; }
  .page-one .editorial-row h2 { font-size: clamp(1.6rem, 7.4vw, 1.9rem); }
  .page-one .page-hero h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
}

/* ===== Cenas animadas (A7 hero, A8 supervisão, A9 IA). Contrato: refinamento-produtos/motion-spec.md.
   O estado padrão (sem JS e com movimento reduzido) é o estado FINAL. Os estados escondidos só valem em
   no-preference com .js; o JS (js/cenas-one.js) liga a classe .on nos [data-p] passo a passo. ===== */
.cena-slot > * + * { margin-top: 28px; }
.page-one .vinheta { --c-cli: #4d7c8a; --c-ia: #32be49; --est-pausa: #c98f1d; margin: 0; padding: 22px 0 14px; border-block: 1px solid var(--page-line); }
.page-one .vinheta figcaption { margin-top: 16px; color: var(--page-muted); font-size: .8125rem; line-height: 1.5; }
.page-one .v-int { min-width: 0; }

/* barras de voz: a linguagem do One */
.v-barras { display: flex; align-items: center; justify-content: space-between; gap: var(--g, 4px); }
.v-barras i { flex: 1 1 0; min-width: 3px; max-width: var(--mx, 8px); height: var(--h, 60%); border-radius: 99px; background: var(--cor, #32be49); transform-origin: center; animation: v-nivel var(--d, 2.4s) var(--ease-in-out, cubic-bezier(.77, 0, .175, 1)) var(--a, 0s) infinite alternate; }
.v-barras i:nth-child(7n+1) { --h: 34%; } .v-barras i:nth-child(7n+2) { --h: 56%; } .v-barras i:nth-child(7n+3) { --h: 82%; }
.v-barras i:nth-child(7n+4) { --h: 100%; } .v-barras i:nth-child(7n+5) { --h: 66%; } .v-barras i:nth-child(7n+6) { --h: 90%; } .v-barras i:nth-child(7n) { --h: 44%; }
.v-barras i:nth-child(5n+1) { --d: 2.1s; } .v-barras i:nth-child(5n+2) { --d: 2.6s; } .v-barras i:nth-child(5n+3) { --d: 2.3s; } .v-barras i:nth-child(5n+4) { --d: 2.8s; } .v-barras i:nth-child(5n) { --d: 2.4s; }
.v-barras i:nth-child(4n+1) { --a: -.2s; } .v-barras i:nth-child(4n+2) { --a: -1.1s; } .v-barras i:nth-child(4n+3) { --a: -.7s; } .v-barras i:nth-child(4n) { --a: -1.6s; }
@keyframes v-nivel { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes v-anel { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
@keyframes v-rec { from { opacity: 1; } to { opacity: .3; } }
.fim .v-barras i { animation-play-state: paused; }
.fim .pc-rec { animation: none; }

/* A7: percurso da chamada (hero, sempre sobre petróleo) */
.pc { --cor: #32be49; }
.pc-barras { height: clamp(104px, 10vw, 140px); --mx: 8px; transform-origin: center; }
.pc-trilha { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; column-gap: 10px; align-items: start; margin-top: 30px; }
.pc-no { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.pc-ponto { position: relative; width: 12px; height: 12px; border: 2px solid #82c89a; border-radius: 50%; box-sizing: border-box; }
.pc-ponto::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: #82c89a; }
.pc-anel { position: absolute; inset: -2px; border: 2px solid #32be49; border-radius: 50%; opacity: 0; }
.pc[data-passo="1"] .pc-anel { animation: v-anel 1.3s var(--mo-saida, cubic-bezier(.22, 1, .36, 1)) infinite; }
.pc-no b { font-weight: 500; font-size: .9rem; color: #f7faf8; }
.pc-det { color: #b7c9c0; font-size: .78rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pc-lig { position: relative; align-self: start; margin-top: 5px; height: 2px; background: rgba(130, 200, 154, .26); }
.pc-lig::after { content: ""; position: absolute; inset: 0; background: #82c89a; transform-origin: left center; }
.pc-pe { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(233, 247, 234, .2); }
.pc-tempo { color: #f7faf8; font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pc-grav { display: inline-flex; align-items: center; gap: 8px; color: #b7c9c0; font-size: .82rem; }
.pc-rec { width: 8px; height: 8px; border-radius: 50%; background: #f2685c; animation: v-rec 1.1s ease-in-out infinite alternate; }

/* A8: supervisão */
.sup-topo { display: flex; align-items: baseline; justify-content: flex-start; margin-bottom: 18px; color: var(--page-muted); font-size: .8rem; }
.sup-n { margin-left: 10px; color: var(--page-ink); font-size: 1.6rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.sup-corpo { display: grid; grid-template-columns: minmax(104px, 140px) minmax(28px, 1fr) minmax(0, 2.6fr); align-items: stretch; }
.sup-sv { align-self: center; display: grid; gap: 4px; justify-items: start; font-size: .9rem; }
.sup-sv b { font-weight: 500; }
.sup-ic { color: var(--page-green); line-height: 0; }
.sup-modo { color: var(--page-muted); font-size: .74rem; }
.sup-lig { position: relative; align-self: center; height: 2px; }
.sup-fio { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--page-green) 0 6px, transparent 6px 11px); transform-origin: left center; }
.sup-seta { position: absolute; right: -1px; top: -5px; width: 0; height: 0; border-left: 9px solid var(--page-green); border-block: 6px solid transparent; transform-origin: left center; }
.sup-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sup-ramal { position: relative; display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--page-line); border-radius: 8px; }
.sup-ramal b { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sup-ramal .est { color: var(--page-muted); font-size: .74rem; }
.sup-ramal .est > span { display: flex; align-items: center; gap: 6px; }
.sup-ramal .est i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.sup-ramal [data-estado="1"] i { border: 1.5px solid var(--page-muted); }
.sup-ramal [data-estado="2"] i { background: var(--c-ia); }
.sup-ramal [data-estado="3"] i { background: var(--est-pausa); }
.sup-anel { position: absolute; inset: -4px; border: 2px solid var(--page-green); border-radius: 11px; pointer-events: none; }
.sup .est[data-mo="estado"] > span { white-space: nowrap; }

/* A9: agente de IA atende */
.ia-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; }
.ia-tit { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; }
.ia-tit b { font-weight: 500; }
.ia-tel { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(50, 190, 73, .14); color: var(--page-green); }
.ia-anel { position: absolute; inset: 0; border: 2px solid var(--c-ia); border-radius: 50%; opacity: 0; }
.ia[data-passo="1"] .ia-anel { animation: v-anel 1.3s var(--mo-saida, cubic-bezier(.22, 1, .36, 1)) infinite; }
.ia-quem { display: inline-flex; gap: 8px; }
.ia-quem span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--page-line); border-radius: 99px; color: var(--page-muted); font-size: .74rem; }
.ia-quem span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.ia-quem .q-c::before { background: var(--c-cli); } .ia-quem .q-i::before { background: var(--c-ia); }
.ia[data-quem="c"] .q-c, .ia[data-quem="i"] .q-i { color: var(--page-ink); border-color: var(--page-muted); }
.ia-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.ia-onda { display: grid; height: 56px; }
.ia-faixa { grid-area: 1 / 1; height: 100%; --g: 3px; --mx: 5px; opacity: 0; }
.ia-c { --cor: var(--c-cli); opacity: .3; } .ia-i { --cor: var(--c-ia); }
.ia[data-quem="c"] .ia-c, .ia[data-quem="i"] .ia-i { opacity: 1; }
.ia[data-quem="i"] .ia-c { opacity: 0; }
.ia-falas { display: grid; gap: 9px; margin-top: 16px; }
.ia-falas p { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; margin: 0; font-size: .84rem; line-height: 1.4; }
.ia-falas b { color: var(--page-muted); font-weight: 500; }
.ia-aval { display: grid; gap: 14px; align-content: start; padding-top: 2px; }
.ia-aval > div { display: grid; gap: 3px; padding-left: 14px; border-left: 2px solid var(--page-line); }
.ia-aval span { color: var(--page-muted); font-size: .76rem; }
.ia-aval b { font-size: .98rem; font-weight: 500; }
.ia-aval .ia-nota { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ia-sim { display: inline-flex; align-items: center; gap: 8px; }
.ia-sim svg { color: var(--page-green); }
.ia-sim span { color: var(--page-ink); font-size: .98rem; }
.ia-ramo { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--page-line); }
.ramo-no { padding: 6px 12px; border: 1px solid var(--page-line); border-radius: 99px; font-size: .8rem; }
.ramo-dest { border-color: var(--page-green); background: rgba(50, 190, 73, .1); }
.ramo-lig { position: relative; height: 2px; background: rgba(50, 190, 73, .22); }
.ramo-lig::after { content: ""; position: absolute; inset: 0; background: var(--page-green); transform-origin: left center; }

/* estados escondidos: só com .js e sem preferência por menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .js .v-int { transition: opacity 320ms var(--mo-troca, cubic-bezier(.65, 0, .35, 1)); }
  .js .v-int.sai { opacity: 0; }
  .js .v-int .ap:not(.on) { opacity: 0; transform: translateY(6px); }
  .js .v-int .ap.on { transition: opacity var(--mo-medio, 420ms) var(--mo-saida, cubic-bezier(.22, 1, .36, 1)), transform var(--mo-medio, 420ms) var(--mo-saida, cubic-bezier(.22, 1, .36, 1)); }
  .js .sup-seta.ap:not(.on) { transform: scaleX(.2) translateY(0); }
  .js .sup-anel.ap:not(.on) { transform: scale(.94); }
  .js .sup-anel.ap.on { transform: none; }
  /* A7 */
  .js .pc-barras:not(.on) { opacity: .4; transform: scaleY(.35); }
  .js .pc-barras.on { transition: opacity 600ms var(--mo-saida), transform 700ms var(--mo-saida); }
  .js .pc-no:not(.on) .pc-ponto::after { transform: scale(0); }
  .js .pc-no:not(.on) b { opacity: .45; }
  .js .pc-no:not(.on) .pc-det { opacity: 0; transform: translateY(4px); }
  .js .pc-no.on .pc-ponto::after { transition: transform 360ms var(--mo-saida) 480ms; }
  .js .pc-no.on b { transition: opacity 360ms var(--mo-saida) 480ms; }
  .js .pc-no.on .pc-det { transition: opacity 420ms var(--mo-saida) 560ms, transform 420ms var(--mo-saida) 560ms; }
  .js .pc-lig:not(.on)::after, .js .ramo-lig:not(.on)::after, .js .sup-fio:not(.on) { transform: scaleX(0); }
  .js .pc-lig.on::after, .js .ramo-lig.on::after, .js .sup-fio.on { transition: transform 900ms var(--mo-saida); }
  /* A9 */
  .js .ia-sim svg path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  .js .ia-aval > .on svg path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--mo-saida) 200ms; }
  .ia-faixa { transition: opacity 420ms var(--mo-troca, cubic-bezier(.65, 0, .35, 1)); }
  .sup-anel { transition: opacity var(--mo-medio, 420ms) var(--mo-saida, ease); }
}
@media (prefers-reduced-motion: reduce) {
  .v-barras i, .pc-anel, .ia-anel, .pc-rec { animation: none !important; }
  .v-barras i { transform: scaleY(.85); }
}

@media (prefers-color-scheme: dark) {
  .page-one .vinheta { --c-cli: #8fb3bf; --est-pausa: #e0b45a; }
  .sup-ramal [data-estado="1"] i { border-color: #b3c4bd; }
}

@media (max-width: 900px) {
  .ia-corpo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ia-aval { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ia-aval > div { padding-left: 10px; }
}
@media (max-width: 680px) {
  .pc-barras { height: 84px; --mx: 6px; --g: 3px; }
  /* A7 em versão vertical compacta */
  .pc-trilha { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .pc-no { display: flex; align-items: center; gap: 12px; }
  .pc-no b { min-width: 74px; }
  .pc-lig { width: 2px; height: 16px; margin: 4px 0 4px 5px; }
  .pc-lig::after { transform-origin: center top; }
  .js .pc-lig:not(.on)::after { transform: scaleY(0); }
  .pc-pe { margin-top: 16px; }
  .sup-corpo { grid-template-columns: 88px 22px minmax(0, 1fr); }
  .sup-grade { gap: 8px; }
  .sup-ramal { padding: 8px 9px; }
  .sup-sv { font-size: .82rem; }
  .sup-modo { font-size: .7rem; }
  .ia-aval { grid-template-columns: minmax(0, 1fr); }
  .ia-falas p { grid-template-columns: 52px minmax(0, 1fr); }
  .ia-ramo { grid-template-columns: auto minmax(20px, 1fr) auto; gap: 8px; }
  .ramo-no { padding: 6px 10px; font-size: .76rem; }
}
.ia-i { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .js .ramo-lig:not(.on) { background: transparent; }
}
.v-int.z *, .v-int.z *::before, .v-int.z *::after { transition: none !important; }

/* Mantenha o número: titulo e frase empilhados em largura total (a coluna direita so tinha uma linha e deixava um vazio enorme). */
.page-one .page-numbers .editorial-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-one .page-numbers .editorial-row > :first-child { position: static; }
.page-one .page-numbers .editorial-row h2 { max-width: 920px; }
.page-one .page-numbers .whatsapp-voice-row { margin-top: clamp(32px, 4vw, 44px); }

/* Numeros: texto ao lado do celular com a chamada em andamento (ramal, cronometro, gravando). Raio do site novo. */
.page-one .numeros-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.page-one .numeros-texto { min-width: 0; }
.page-one .numeros-visual { margin: 0; display: grid; justify-items: center; gap: 16px; }
.page-one .numeros-visual figcaption { color: var(--page-muted); font-size: .8125rem; line-height: 1.5; }
.page-one .ramal-fone { animation: none; border-radius: 28px; padding: 10px; background: #0a1c22; box-shadow: none; }
.page-one .ramal-fone .fone-tela.pbx-tela { height: 520px; border-radius: 19px; }
.page-one .ramal-fone .pbx-estado { padding-bottom: 150px; }
.page-one .ramal-fone .pbx-onda-voz span:nth-child(5n+1) { transform: scaleY(.45); }
.page-one .ramal-fone .pbx-onda-voz span:nth-child(5n+2) { transform: scaleY(.8); }
.page-one .ramal-fone .pbx-onda-voz span:nth-child(5n+3) { transform: scaleY(.3); }
.page-one .ramal-fone .pbx-onda-voz span:nth-child(5n+4) { transform: scaleY(.6); }
.page-one .ramal-fone .pbx-gravando { border-radius: 2px; }
.page-one .ramal-fone .pbx-btn i { border-radius: 8px; }
.page-one .ramal-fone.fim .pbx-onda-voz span, .page-one .ramal-fone.fim .pbx-ponto-rec, .page-one .ramal-fone.fim .pbx-cab-status i { animation: none !important; }
@media (max-width: 900px) {
  .page-one .numeros-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}