/* Home r57 (24/10/2026): a linguagem do laboratório aplicada à Home, com os menus do site intactos.
   Topo com a cabeça do iSol Expert viva sobre a onda de luz, Expert inteiro e organograma Human + AI no Command,
   títulos que acendem com a rolagem, blocos que entram ao aparecer, passos dos processos que acendem em sequência,
   trilha de capítulos e cursor em anel no desktop. Movimento de 180 a 700 ms; nada se move sozinho com
   prefers-reduced-motion. */
:root { --r57-ease: cubic-bezier(.22, 1, .36, 1); --r57-c: #45e9f5; --r57-c2: #1fb6d1; --r57-dim: #3c4c59; }

/* ── Topo ─────────────────────────────────────────────── */
#inicio.r16-hero { overflow: hidden; padding-top: clamp(20px, 4vh, 44px); padding-bottom: 72px; }
#inicio .r57-topo { position: relative; z-index: 3; text-align: center; }
#inicio .r57-topo .eyebrow { justify-content: center; }
#inicio .r57-topo .hero-title { max-width: 14ch; margin-inline: auto; font-size: clamp(2.4rem, 8.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.035em; }
#inicio .r57-topo .r20-hero-tri { margin-inline: auto; }
#inicio .r57-roda-l { margin: 14px auto 0; font: 400 clamp(1.05rem, 3.6vw, 1.45rem)/1.35 var(--f-display); color: var(--on-dark-soft); }
/* palavra que alterna: caixa com a altura exata da linha e alinhada pelo topo (no Safari, inline-grid com overflow
   escondido subia a palavra e cortava); a palavra que sai fica absoluta, então só a atual ocupa espaço */
#inicio .r57-roda { position: relative; display: inline-block; vertical-align: top; height: 1.35em; line-height: 1.35em; overflow: hidden; }
#inicio .r57-roda b { display: block; font-weight: 600; line-height: 1.35em; color: var(--white); white-space: nowrap; }
#inicio .r57-roda b.sai { position: absolute; left: 0; top: 0; }
#inicio .r57-roda b.sai { animation: r57Sai .45s var(--r57-ease) forwards; }
#inicio .r57-roda b.entra { animation: r57Entra .55s var(--r57-ease) both; }
@keyframes r57Sai { to { transform: translateY(-110%); opacity: 0; filter: blur(3px); } }
@keyframes r57Entra { from { transform: translateY(110%); opacity: 0; filter: blur(3px); } }

#inicio .r57-palco { position: relative; z-index: 2; height: clamp(290px, 42vh, 430px); margin-top: 0; }
@supports (height: 42svh) { #inicio .r57-palco { height: clamp(290px, 42svh, 430px); } }
#inicio .r57-palco::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 92%, rgba(52, 195, 240, .2), transparent 70%); pointer-events: none; }
#inicio .xh-grid { position: relative; z-index: 3; margin-top: 44px; }

/* Robô: um componente, dois formatos */
.r57-bot { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.r57-fig { position: relative; display: block; transform-style: preserve-3d; will-change: transform; }
.r57-fig img { position: absolute; inset: 0 0 auto; width: 100%; height: auto; max-width: none; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.r57-bot-cabeca { position: absolute; left: 50%; bottom: 25%; width: min(104vw, 700px); transform: translateX(-50%); }
.r57-bot-cabeca .r57-fig { aspect-ratio: 960 / 436; overflow: hidden; transform-origin: 50% 100%; }
.r57-bot-inteiro { width: min(66vw, 340px); margin: 0 auto; perspective: 900px; }
.r57-bot-inteiro .r57-fig { aspect-ratio: 960 / 1251; transform-origin: 50% 92%; }
.r57-bot-inteiro .r57-fig img { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 40px rgba(52, 195, 240, .14)); }
/* visor: a área escura dentro do aro prateado, medida na arte de 960 x 1251 do iSol Expert (x 294 a 696, y 129 a 340) */
.r57-visor { position: absolute; left: 30.6%; width: 41.9%; border-radius: 17% / 33%; background: radial-gradient(70% 70% at 50% 22%, #2a3449 0%, #1d2536 52%, #151b28 100%); box-shadow: inset 0 0 16px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .04); }
.r57-bot-cabeca .r57-visor { top: 29.6%; height: 48.4%; }
.r57-bot-inteiro .r57-visor { top: 10.31%; height: 16.87%; }
.r57-olho { position: absolute; top: 49%; width: 23.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #0c3c48 0 47%, #7ff9ff 53%, #3ee4ef 64%, rgba(62, 228, 239, 0) 71%); filter: drop-shadow(0 0 8px rgba(69, 233, 245, .75)); transition: transform .09s ease-in; }
.r57-olho-e { left: 30.4%; }
.r57-olho-d { left: 75.6%; }
.r57-olho i { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; border-radius: 50%; transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))); background: radial-gradient(circle at 50% 55%, #0a2a34 0 60%, #11495a 100%); }
.r57-olho i::after { content: ""; position: absolute; right: 16%; top: 14%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #e9feff; box-shadow: 0 0 6px #e9feff; }
.r57-olho.pisca { transform: translate(-50%, -50%) scaleY(.08); }
.r57-boca { position: absolute; left: 53%; top: 73%; width: 17%; height: 13%; transform: translate(-50%, -50%); border-bottom: 3px solid #5ff1fb; border-radius: 0 0 50% 50% / 0 0 100% 100%; filter: drop-shadow(0 0 6px rgba(69, 233, 245, .8)); transition: width .3s var(--r57-ease), height .3s var(--r57-ease); }
.r57-bot-cabeca .r57-boca { border-bottom-width: max(3px, .55vw); }
.r57-bot.feliz .r57-olho { background: none; }
.r57-bot.feliz .r57-olho::before { content: ""; position: absolute; inset: 24% 8% 30%; border-top: 4px solid #7ff9ff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.r57-bot-cabeca.feliz .r57-olho::before { border-top-width: max(4px, .85vw); }
.r57-bot.feliz .r57-olho i { opacity: 0; }
.r57-bot.feliz .r57-boca { width: 22%; height: 20%; }
.r57-bot.pula .r57-fig { animation: r57Pula .7s var(--r57-ease); }
@keyframes r57Pula { 30% { translate: 0 -7%; } 60% { translate: 0 0; } 78% { translate: 0 -1.5%; } }
.r57-peito { position: absolute; left: 34%; top: 38.6%; width: 34%; height: 29.4%; border-radius: 16%; background: radial-gradient(60% 60% at 50% 50%, rgba(95, 241, 251, .45), transparent 70%); mix-blend-mode: screen; opacity: .3; animation: r57Peito 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes r57Peito { 50% { opacity: .9; } }
.r57-sombra { display: block; width: 62%; height: 18px; margin: -6px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 195, 240, .4), transparent); filter: blur(3px); }
.r57-bot:focus-visible { outline: 2px solid var(--r57-c); outline-offset: 6px; border-radius: 24px; }

#inicio .r57-onda { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: 40%; display: block; pointer-events: none; background: radial-gradient(130% 75% at 50% 112%, #46f0fb 0%, #18a9c4 42%, rgba(9, 70, 92, .7) 62%, transparent 76%); }
#inicio .r57-onda.gl { background: none; }
#inicio .r57-palco::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 22%; background: linear-gradient(transparent, var(--bg-0, #05070a)); pointer-events: none; }
.r57-ola { position: absolute; z-index: 4; left: 50%; bottom: 14%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 99px; background: #02050a; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 40px rgba(0, 0, 0, .55); color: #fff; text-decoration: none; font: 500 16px var(--f-body, inherit); white-space: nowrap; transition: box-shadow .3s, transform .3s var(--r57-ease); }
.r57-ola:hover { box-shadow: 0 14px 44px rgba(52, 195, 240, .35); transform: translateX(-50%) translateY(-2px); }
.r57-ola-o { display: inline-flex; gap: 4px; }
.r57-ola-o i { width: 5px; height: 11px; border-radius: 3px; background: var(--r57-c); transform: skewX(-8deg); animation: r57Pisca 4.6s infinite; }
@keyframes r57Pisca { 0%, 92%, 100% { transform: skewX(-8deg) scaleY(1); } 95% { transform: skewX(-8deg) scaleY(.15); } }
.r57-balao { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); width: min(300px, 84vw); margin: 0; padding: 12px 16px; border-radius: 16px; background: rgba(8, 18, 28, .95); border: 1px solid rgba(69, 233, 245, .3); color: var(--white); font-size: 14.5px; line-height: 1.45; text-align: center; animation: r57Balao .4s var(--r57-ease); }
#inicio .r57-balao { top: 2%; }
.r57-equipe-fig .r57-balao { top: -4%; }
@keyframes r57Balao { from { opacity: 0; translate: 0 8px; } }

/* ── Organograma Human + AI (no Command) ──────────────── */
#command .r57-equipe { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(48px, 8vh, 80px); border-top: 1px solid var(--line-exec); }
.r57-equipe-cab { display: grid; gap: 28px; align-items: center; }
.r57-equipe-fig { position: relative; padding-top: 20px; }
.r57-k { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--r57-c); }
.r57-k::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.r57-h3 { margin: 0 0 16px; font: 600 clamp(1.8rem, 4.6vw, 3rem)/1.08 var(--f-display); letter-spacing: -.03em; color: var(--white); }
.r57-ciano { color: var(--r57-c); }
.r57-p { max-width: 58ch; color: var(--on-dark-soft); }
.r57-dica { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r57-c); }
.r57-org { display: grid; gap: 22px; margin-top: 40px; }
.r57-org-mapa { display: grid; gap: 14px; justify-items: center; }
.r57-org-n { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; }
.r57-org-n + .r57-org-n::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: rgba(69, 233, 245, .35); }
.r57-org-no { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 14px; border: 1px solid var(--line-exec); background: rgba(10, 20, 30, .75); color: var(--white); cursor: pointer; font: 500 15px var(--f-body, inherit); transition: border-color .25s, background .25s, transform .25s var(--r57-ease); }
.r57-org-no img { width: 34px; height: auto; }
.r57-org-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.r57-org-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.r57-org-h { color: #ffd9a0; }
.r57-org-no:hover { transform: translateY(-2px); border-color: rgba(69, 233, 245, .4); }
.r57-org-no[aria-selected="true"] { border-color: var(--r57-c); background: rgba(69, 233, 245, .1); box-shadow: 0 0 30px rgba(69, 233, 245, .14); }
.r57-org-ficha { padding: 22px; border-radius: 22px; border: 1px solid rgba(69, 233, 245, .28); background: linear-gradient(160deg, rgba(14, 28, 40, .85), rgba(8, 16, 24, .85)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.r57-org-ficha.troca { animation: r57Ficha .45s var(--r57-ease); }
@keyframes r57Ficha { from { opacity: .3; translate: 0 8px; } }
.r57-org-ficha h4 { margin: 2px 0 14px; font: 600 26px var(--f-display); color: var(--white); }
.r57-org-ficha dl { margin: 0; display: grid; gap: 12px; }
.r57-org-ficha dt { font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); }
.r57-org-ficha dd { margin: 3px 0 0; color: var(--white); }

/* ── Linguagem de rolagem ─────────────────────────────── */
.r57-acende .w { color: var(--r57-dim); transition: color .35s; }
.r57-acende .w.on { color: inherit; }
html.r57-js .r57-rev { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .7s var(--r57-ease), transform .7s var(--r57-ease), filter .7s var(--r57-ease); }
html.r57-js .r57-rev.r57-vis { opacity: 1; transform: none; filter: none; }
.r57-capn { display: block; margin: 0 0 10px; font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--r57-c); }
.section-light .r57-capn { color: #0b7fa6; }
/* passos dos processos acendem em sequência */
.r57-passos > li { transition: opacity .45s var(--r57-ease), filter .45s, transform .45s var(--r57-ease); }
html.r57-js .r57-passos > li { opacity: .3; filter: saturate(.3); }
html.r57-js .r57-passos > li.r57-on { opacity: 1; filter: none; }
html.r57-js .r57-passos > li.r57-agora { transform: translateY(-2px); }

/* Trilha de capítulos (desktop) */
.r57-trilha { position: fixed; z-index: 30; right: 16px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 2px; }
.r57-trilha a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 4px 0; text-decoration: none; color: #4a5a66; font: 500 11px var(--f-mono); letter-spacing: .08em; }
.r57-trilha a span { position: absolute; right: calc(100% + 10px); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(6, 12, 18, .8); opacity: 0; transform: translateX(6px); transition: opacity .25s var(--r57-ease), transform .25s var(--r57-ease); text-transform: uppercase; color: var(--on-dark-soft); }
.r57-trilha a::after { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: width .3s var(--r57-ease); }
.r57-trilha a:hover span, .r57-trilha a:focus-visible span { opacity: 1; transform: none; }
.r57-trilha a.on { color: var(--r57-c); }
.r57-trilha a.on::after { width: 28px; }

/* Cursor em anel (desktop com mouse) */
.r57-cursor { position: fixed; z-index: 9999; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(69, 233, 245, .7); pointer-events: none; opacity: 0; transition: width .25s var(--r57-ease), height .25s var(--r57-ease), margin .25s var(--r57-ease), opacity .3s, background .25s; }
.r57-cursor.vis { opacity: 1; }
.r57-cursor.sobre { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(69, 233, 245, .08); }

@media (max-width: 760px) {
  #inicio .r57-topo .eyebrow { display: block; font-size: 11.5px; letter-spacing: .1em; }
  #inicio .r57-topo .eyebrow::before { display: none; }
  #inicio .r57-topo .r20-hero-tri { font-size: 1.02rem; }
  #inicio .r57-roda-l { margin-top: 10px; }
}
/* a trilha só aparece quando cabe ao lado do conteúdo (container de 1180 px); abaixo disso ela cobria o texto */
@media (min-width: 1400px) { .r57-trilha { display: flex; } }
@media (min-width: 900px) {
  #inicio .r57-palco { height: clamp(360px, 48vh, 560px); }
  .r57-bot-cabeca { bottom: 20%; width: min(48vw, 700px); }
  #inicio .r57-onda { height: 34%; }
  .r57-ola { left: auto; right: max(24px, calc(50% - 560px)); bottom: 12%; transform: none; }
  .r57-ola:hover { transform: translateY(-2px); }
  .r57-equipe-cab { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .r57-bot-inteiro { width: min(100%, 380px); }
  .r57-org { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .r57-fig, .r57-roda b, .r57-ola-o i, .r57-peito, .r57-bot.pula .r57-fig { animation: none !important; transition: none !important; }
  .r57-acende .w { color: inherit; }
  html.r57-js .r57-rev, html.r57-js .r57-passos > li { opacity: 1; transform: none; filter: none; }
  .r57-cursor { display: none; }
}

/* ── Motor do Expert (expert-vivo.js): olhos e boca em SVG ── */
.r57-visor.ev-on > .r57-olho, .r57-visor.ev-on > .r57-boca { display: none; }
.ev-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ev-zz { position: absolute; right: 18%; top: -2%; display: flex; gap: 4px; pointer-events: none; font: 700 22px var(--f-display); color: #9ff6ff; opacity: 0; transition: opacity .6s; }
.r57-bot-inteiro .ev-zz { top: -6%; right: 10%; }
.ev-zz.on { opacity: 1; }
.ev-zz i { font-style: normal; animation: evZ 2.4s ease-in-out infinite; }
.ev-zz i:nth-child(2) { animation-delay: .5s; font-size: .8em; }
.ev-zz i:nth-child(3) { animation-delay: 1s; font-size: .62em; }
@keyframes evZ { 0% { opacity: 0; transform: translate(0, 8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -22px); } }
.r57-balao.ev-pop { animation: r57Balao .4s var(--r57-ease); }
.r57-balao span { display: block; }
.r57-balao a { display: block; margin-top: 6px; color: var(--r57-c); font-weight: 600; }
.r57-bot { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.r57-bot-inteiro .r57-fig { cursor: grab; }
.r57-bot-inteiro:active .r57-fig { cursor: grabbing; }
/* o motor controla o movimento: a animação de pulo do CSS sai */
.r57-bot.pula .r57-fig { animation: none; }

/* Título palavra por palavra */
#inicio .r57-pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
#inicio .r57-pal > span { display: inline-block; animation: r57Pal .9s var(--r57-ease) both; }
@keyframes r57Pal { from { transform: translateY(105%); opacity: 0; filter: blur(4px); } }

/* Botões magnéticos e cartões que inclinam */
.r57-mag { transition: translate .25s var(--r57-ease), box-shadow .3s, background .3s, transform .3s var(--r57-ease); }
.r57-tilt { transition: transform .35s var(--r57-ease); transform-style: preserve-3d; position: relative; }
.r57-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(120, 240, 255, .1), transparent 60%); opacity: 0; transition: opacity .3s; }
.r57-tilt:hover::after { opacity: 1; }
#inicio .r57-palco { transition: opacity .2s linear; }
@media (prefers-reduced-motion: reduce) { #inicio .r57-pal > span { animation: none; } }

/* ── Monte sua equipe (no Command): área → rotina → crachá ── */
#command .r57-monte { margin-top: clamp(56px, 9vh, 96px); padding-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--line-exec); }
.r57-monte-grid { display: grid; gap: 24px; margin-top: 26px; }
.r57-monte-q { margin: 18px 0 10px; font: 600 15px var(--f-display); color: var(--white); }
.r57-monte-q:first-child { margin-top: 0; }
.r57-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r57-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 14px; border: 1px solid var(--line-exec); background: rgba(10, 20, 30, .75); color: var(--white); font: 500 14.5px var(--f-body, inherit); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--r57-ease); }
.r57-chip img { width: 30px; height: auto; }
#r57Rotinas .r57-chip { padding-left: 14px; }
.r57-chip:hover { transform: translateY(-2px); border-color: rgba(69, 233, 245, .4); }
.r57-chip.on { border-color: var(--r57-c); background: rgba(69, 233, 245, .12); }
.r57-cracha { position: relative; min-height: 220px; padding: 22px; border-radius: 22px; border: 1px dashed rgba(69, 233, 245, .3); background: rgba(8, 16, 24, .6); }
.r57-cracha.cheio { border-style: solid; background: radial-gradient(90% 70% at 100% 0, rgba(69, 233, 245, .12), transparent 60%), linear-gradient(170deg, #0d1a28, #070d15); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.r57-cracha.cheio::before { content: ""; position: absolute; left: 50%; top: -10px; width: 64px; height: 12px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #1f2b3d; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08); }
.r57-cracha-vazio { margin: 70px 0 0; text-align: center; color: var(--on-dark-soft); font-size: 14px; }
.r57-cr-entra { animation: r57Cr .55s var(--r57-ease); }
@keyframes r57Cr { from { opacity: 0; transform: translateY(14px) rotate(-1.2deg) scale(.98); } }
.r57-cr-topo { display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--r57-c); }
.r57-cr-id { display: flex; gap: 14px; align-items: center; margin: 14px 0 10px; }
.r57-cr-masc { width: 84px; height: auto; flex: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.r57-cr-cargo { margin: 0; font: 700 21px/1.2 var(--f-display); color: var(--white); }
.r57-cr-area { margin: 4px 0 0; font-size: 13.5px; color: var(--on-dark-soft); }
.r57-cr-missao { margin: 0 0 14px; font-size: 14.5px; color: var(--on-dark); }
.r57-cr-col { display: grid; gap: 12px; }
.r57-cr-k { margin: 0 0 4px; font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r57-c); }
.r57-cr-k-h { color: #ffd27a; }
.r57-cr-col ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--on-dark); }
.r57-cr-col li + li { margin-top: 3px; }
.r57-cr-lim, .r57-cr-kpi { margin: 12px 0 0; font-size: 13px; color: var(--on-dark-soft); }
.r57-cr-lim b, .r57-cr-kpi b { color: var(--white); font-weight: 600; }
.r57-monte-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.r57-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--on-dark-soft); opacity: .85; }
@media (min-width: 900px) {
  .r57-monte-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
  .r57-cr-col { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .r57-cr-entra { animation: none; } }

/* ── Caos → Operação (no #processo): a pessoa como ponte entre os sistemas, e o redesenho com o agente ── */
.r57-ponte { margin: 8px 0 34px; padding: 22px; border: 1px solid var(--line-exec); border-radius: 24px; background: linear-gradient(170deg, rgba(14, 26, 38, .8), rgba(6, 12, 18, .8)); }
.r57-ponte [data-modo-txt="isol"] { display: none; }
.r57-ponte[data-modo="isol"] [data-modo-txt="isol"] { display: inline; }
.r57-ponte[data-modo="isol"] [data-modo-txt="hoje"] { display: none; }
.r57-ponte-t { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 8px; font: 600 clamp(18px, 3vw, 24px)/1.25 var(--f-display); color: var(--white); }
.r57-ponte-cena { position: relative; height: 360px; margin: 6px 0 12px; }
.r57-ponte-fios { position: absolute; inset: 0; width: 100%; height: 100%; }
.r57-ponte-fios path { fill: none; stroke: rgba(255, 140, 120, .55); stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; animation: r57Fio 1.4s linear infinite; opacity: .25; transition: opacity .5s; }
.r57-ponte-fios path.on { opacity: 1; }
.r57-ponte[data-modo="isol"] .r57-ponte-fios path { stroke: rgba(69, 233, 245, .7); stroke-dasharray: none; animation: none; opacity: 1; }
@keyframes r57Fio { to { stroke-dashoffset: -24; } }
.r57-no { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--line-exec); background: #0a141e; color: var(--white); font-size: 14px; white-space: nowrap; }
.r57-no svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.r57-no-s { opacity: .35; transition: opacity .5s var(--r57-ease), border-color .5s; }
.r57-no-s.on { opacity: 1; border-color: rgba(255, 140, 120, .5); }
.r57-ponte[data-modo="isol"] .r57-no-s { opacity: 1; border-color: rgba(69, 233, 245, .35); }
.r57-no-c { padding: 14px 18px; border-radius: 18px; font-weight: 600; border-color: rgba(255, 140, 120, .6); box-shadow: 0 0 40px rgba(255, 140, 120, .15); }
.r57-no-c > span { align-items: center; gap: 10px; }
.r57-ponte[data-modo="hoje"] .r57-no-c > [data-modo-txt="hoje"], .r57-ponte[data-modo="isol"] .r57-no-c > [data-modo-txt="isol"], .r57-ponte[data-modo="isol"] .r57-no[data-modo-txt="isol"] { display: inline-flex; }
.r57-no-c img { width: 32px; height: auto; }
.r57-ponte[data-modo="isol"] .r57-no-c { border-color: var(--r57-c); box-shadow: 0 0 40px rgba(69, 233, 245, .22); }
.r57-fila { position: absolute; right: -12px; top: -12px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; background: #ff7a66; color: #1a0603; font: 700 14px/30px var(--f-mono); text-align: center; box-shadow: 0 6px 18px rgba(255, 122, 102, .45); transition: background .4s, transform .25s var(--r57-ease); }
.r57-ponte[data-modo="isol"] .r57-fila { background: #ffd27a; box-shadow: 0 6px 18px rgba(255, 210, 122, .4); }
.r57-fila.bate { transform: scale(1.18); }
.r57-no-aprova { font-size: 13px; color: var(--r57-c); border-color: rgba(69, 233, 245, .35); }
.r57-ponte-leg { margin: 0 0 14px; color: var(--on-dark-soft); }
.r57-troca { padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(69, 233, 245, .45); background: rgba(69, 233, 245, .08); color: var(--white); cursor: pointer; font: 600 15px var(--f-body, inherit); transition: background .25s; }
.r57-troca[aria-pressed="true"] { background: rgba(69, 233, 245, .18); }
@media (max-width: 760px) { .r57-no { font-size: 12.5px; padding: 7px 10px; } .r57-ponte-cena { height: 330px; } }
@media (prefers-reduced-motion: reduce) { .r57-ponte-fios path { animation: none; opacity: 1; } .r57-no-s { opacity: 1; } }

/* ── Onde dói?: número de cada dor e entrada em sequência ── */
#areas .r16-dores { counter-reset: dor; }
#areas .r16-dores > li { counter-increment: dor; position: relative; }
#areas .r16-dores > li > a::after { content: counter(dor, decimal-leading-zero) " / 07"; position: absolute; top: 18px; right: 18px; font: 500 11px var(--f-mono); letter-spacing: .1em; color: var(--r57-c); opacity: .75; pointer-events: none; }
html.r57-js #areas .r57-dor { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--r57-ease), transform .6s var(--r57-ease); }
html.r57-js #areas .r57-dor.r57-vis { opacity: 1; transform: none; }

/* ── Ambientes: exemplo de conversa ── */
.r57-wpd { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-exec); background: linear-gradient(160deg, #0d1a26, #070e16); }
.r57-wpd-c { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font: 500 11.5px var(--f-mono); color: var(--on-dark-soft); }
.r57-msg { max-width: 92%; margin: 0 0 8px; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--white); }
.r57-msg-h { margin-left: auto; background: #1b2a38; border-bottom-right-radius: 4px; }
.r57-msg-a { display: flex; gap: 8px; align-items: flex-start; background: rgba(69, 233, 245, .1); border: 1px solid rgba(69, 233, 245, .28); border-bottom-left-radius: 4px; }
.r57-msg-a img { width: 24px; height: auto; flex: none; }
.r57-msg-in { animation: r57Msg .5s var(--r57-ease) both; }
.r57-msg-in.r57-msg-a { animation-delay: .4s; }
@keyframes r57Msg { from { opacity: 0; transform: translateY(8px); } }

/* ── Perímetro: a opção apontada acende o caminho ── */
#perimetro .p19-opt { transition: border-color .3s, box-shadow .3s, opacity .3s, transform .3s var(--r57-ease); }
#perimetro [data-p19="onsite"] .p19-opt[data-evento="select_onsite"], #perimetro [data-p19="cloud"] .p19-opt[data-evento="select_private_cloud"] { border-color: var(--r57-c); box-shadow: 0 0 34px rgba(69, 233, 245, .2); transform: translateY(-2px); }
#perimetro [data-p19="onsite"] .p19-opt[data-evento="select_private_cloud"], #perimetro [data-p19="cloud"] .p19-opt[data-evento="select_onsite"] { opacity: .45; }
#perimetro [data-p19="onsite"] .p19-per, #perimetro [data-p19="cloud"] .p19-per { box-shadow: 0 0 40px rgba(69, 233, 245, .18); }
.r57-p19-fr { margin: 10px 2px 0; min-height: 3em; font-size: 13.5px; line-height: 1.5; color: var(--on-dark-soft); }
@media (prefers-reduced-motion: reduce) { html.r57-js #areas .r57-dor { opacity: 1; transform: none; } .r57-msg-in { animation: none; } }

/* ── Oferta da Home: estagiário treinado, 1 + 1 + 1 = amostra e o que não precisa (26/10/2026) ── */
.r57-ofx { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 30px }
.r57-ofx-lead { margin: 0; max-width: 70ch; font-size: 17px; line-height: 1.55; color: var(--on-dark) }
.r57-ofx-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.3fr; gap: 10px; align-items: stretch }
.r57-ofx-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 12px; border-radius: 16px; border: 1px solid var(--line-exec); background: rgba(10, 20, 30, .6) }
.r57-ofx-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(52, 195, 240, .12); color: var(--cyan) }
.r57-ofx-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.r57-ofx-c b { font: 700 17px/1.2 var(--f-display); color: var(--white) }
.r57-ofx-c span { font-size: 13.5px; color: var(--on-dark-soft) }
.r57-ofx-op { align-self: center; font: 700 26px var(--f-display); color: var(--cyan) }
.r57-ofx-r { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #0f3550, #0b2236); border: 1px solid rgba(52, 195, 240, .45) }
.r57-ofx-r b { font: 700 18px/1.2 var(--f-display); color: #6fdcf7 }
.r57-ofx-r span { font-size: 14px; color: #cfe2ef; line-height: 1.45 }
.r57-ofx-no { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-radius: 14px; background: rgba(240, 107, 85, .08); border: 1px solid rgba(240, 107, 85, .35); font-size: 15px; color: var(--on-dark) }
.r57-ofx-no b { color: #ff9a86 }
.r57-ofx-no > span { display: inline-flex; align-items: center; gap: 6px }
.r57-ofx-no svg { width: 18px; height: 18px; fill: none; stroke: #ff8a75; stroke-width: 2.2; stroke-linecap: round }
.r57-ofx-mais { margin: 0; font-size: 14.5px; color: var(--on-dark-soft) }
@media (max-width: 760px) {
  .r57-ofx-eq { grid-template-columns: 1fr; gap: 4px }
  .r57-ofx-c { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; text-align: left; align-items: center; padding: 10px 14px }
  .r57-ofx-ic { grid-row: span 2 }
  .r57-ofx-op { justify-self: center; font-size: 20px; line-height: 1 }
}