/* ==========================================================================
   Cristiano Bittencourt — Landing IA & Automação (Fase 1)
   Design system: dark premium tech, humano e comercial.
   Paleta ink/navy + accent ciano-menta (controle/IA) + âmbar (dinheiro).
   2026-05-30
   ========================================================================== */

:root {
  /* superfícies */
  --ink:      #06080f;
  --bg:       #0a0e1a;
  --panel:    #10141f;
  --panel-2:  #141a28;
  --line:     rgba(231,236,246,.09);
  --line-2:   rgba(231,236,246,.16);

  /* texto */
  --text:     #e7ecf6;
  --mute:     #8b97af;
  --soft:     rgba(231,236,246,.62);

  /* accents */
  --cyan:      #34e5c4;   /* controle / IA — accent dominante */
  --cyan-deep: #15b9a0;
  --cyan-glow: rgba(52,229,196,.30);
  --amber:     #f5b53e;   /* dinheiro / caixa — uso parcimonioso */
  --amber-glow:rgba(245,181,62,.22);
  --red:       #ff6f6f;   /* dor */

  /* tipografia */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --max: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.6rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Regra do sistema: site não-copiável — bloqueia seleção, arraste e callout de toque.
   Só as interações (links/botões) ficam ativas; o resto não é selecionável. (2026-05-31) */
body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
img, svg, canvas, picture { -webkit-user-drag: none; }
/* campos de formulário permanecem utilizáveis se forem adicionados no futuro */
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* fundo ambiente: vinheta + dois focos de luz fria/quente bem sutis */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 78% -5%,  rgba(52,229,196,.10), transparent 60%),
    radial-gradient(50% 45% at 10% 8%,   rgba(60,110,255,.08), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(245,181,62,.05), transparent 60%),
    var(--bg);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: 600; }

/* grão de filme — quebra o "liso digital" e dá textura premium */
.fx-grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.hl       { color: var(--cyan); }
.hl--amber{ color: var(--amber); }
.hl--red  { color: var(--red); }

/* ============ REVEAL (scroll-triggered) ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; }
}

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--body); font-weight: 600; font-size: .96rem;
  letter-spacing: .01em;
  padding: .82em 1.4em; border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: normal; text-align: center; min-width: 0;   /* permite quebrar no mobile sem estourar a margem */
}
.btn--lg { padding: 1em 1.7em; font-size: 1.02rem; }

.btn--primary {
  color: #04221c;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  box-shadow: 0 8px 30px -8px var(--cyan-glow), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px var(--cyan-glow), inset 0 1px 0 rgba(255,255,255,.5); }

.btn--ghost {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.btn__arr { transition: transform .25s var(--ease); }
.btn--ghost:hover .btn__arr { transform: translateY(3px); }

.btn--pill {
  font-size: .88rem; padding: .62em 1.15em;
  border-color: var(--line-2); background: rgba(255,255,255,.03);
  white-space: nowrap;   /* pill do nav fica sempre em uma linha */
}
.btn--pill:hover { border-color: var(--cyan); color: var(--cyan); }

/* ============ TOPBAR ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(.8rem, 1.6vw, 1.1rem) var(--gutter);
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8,11,20,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
}
.nav__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 0 var(--cyan-glow);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--cyan-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(52,229,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,229,196,0); }
}
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-size: .92rem; color: var(--soft); position: relative; padding: .2em 0;
  transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--cyan); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }

/* ============ TRILHO LATERAL ============ */
.rail {
  position: fixed; left: clamp(10px, 1.4vw, 22px); top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.rail__line { width: 1px; height: 140px; background: var(--line-2); position: relative; overflow: hidden; }
.rail__line i { position: absolute; inset: 0 0 auto 0; height: 0%; background: var(--cyan); transition: height .2s linear; }
.rail__num { font-family: var(--mono); font-size: .72rem; color: var(--mute); letter-spacing: .1em; }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(7rem, 14vh, 11rem) 0 clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  right: -8vw; top: 0;
  background: radial-gradient(circle, var(--cyan-glow), transparent 65%);
  filter: blur(30px); opacity: .55;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.chip {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .01em;   /* saudação em caixa normal — soa humano, não gritado */
  color: var(--soft); padding: .5em .95em; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.025);
  max-width: 100%;   /* nunca ultrapassa a largura da tela */
}
.chip__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex-shrink: 0; }
/* cursor da animação de escrita do chip */
.chip__type { white-space: normal; }   /* quebra dentro da margem no mobile (não usar nowrap) */
.chip__cursor { display: inline-block; width: 2px; height: .95em; margin-left: 2px; background: var(--cyan); vertical-align: -.12em; animation: caret .9s steps(1) infinite; }
.chip__cursor--off { opacity: 0; animation: none; }
@keyframes caret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

.hero__h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 5.3vw, 4.15rem); line-height: 1.04;
  letter-spacing: -.025em; margin: 1.4rem 0 0;
}
.hero__h1 span.reveal { display: block; }

.hero__sub {
  margin-top: 1.5rem; max-width: 40ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--soft); line-height: 1.62;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero__stamps {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.2rem;
  list-style: none; font-family: var(--mono); font-size: .82rem; color: var(--mute);
}
.hero__stamps b { color: var(--cyan); font-weight: 700; margin-right: .15em; }
.hero__stamps li:nth-child(2) b { color: var(--cyan); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll span {
  width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent);
  animation: scrolly 2s var(--ease) infinite;
}
@keyframes scrolly { 0%{transform:scaleY(.2);transform-origin:top;opacity:.3} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3} }

/* indicador de rolagem por seção — mesma linguagem do hero (linha animada + "rolar"), aponta p/ a próxima (2026-05-31) */
.sec__scroll {
  position: absolute; left: 50%; bottom: clamp(1rem, 2.2vh, 1.6rem); transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  transition: color .25s var(--ease);
}
.sec__scroll:hover { color: var(--cyan); }
.sec__scroll span {
  width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent);
  animation: scrolly 2s var(--ease) infinite;
}
/* mobile: rolar é ação natural no toque — esconde o texto "rolar" e deixa só a linha
   (indício sutil de conteúdo abaixo) no hero e em todas as seções (2026-05-31) */
@media (max-width: 900px) {
  .sec__scroll, .hero__scroll { font-size: 0; gap: 0; }
}

/* ---- hero stage: telefone WhatsApp + ping ---- */
.hero__stage { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.phone {
  position: relative; border-radius: 36px; padding: 12px;
  background: linear-gradient(160deg, #1b2336, #0c1018);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 0 0 14px 14px; background: #0c1018; z-index: 3;
}
.wa {
  border-radius: 26px; overflow: hidden; background: #0b141a;
  height: 540px; display: flex; flex-direction: column;   /* proporção mais próxima de um celular real */
}
.wa__top {
  display: flex; align-items: center; gap: .6rem; padding: .75rem .8rem;
  background: #11212b; border-bottom: 1px solid rgba(255,255,255,.05); padding-top: 1.6rem;
}
.wa__back { color: var(--cyan); font-size: 1.3rem; line-height: 1; }
.wa__ava {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cyan-deep), #0c5c50); color: #03110d;
  font-weight: 700; font-size: .72rem; font-family: var(--mono);
}
.wa__id { flex: 1; line-height: 1.2; }
.wa__id strong { font-size: .82rem; }
.wa__id em { font-style: normal; font-size: .68rem; color: var(--cyan); }
.wa__bot {
  font-family: var(--mono); font-size: .6rem; color: var(--cyan);
  border: 1px solid var(--cyan); border-radius: 5px; padding: .15em .4em;
}
.wa__thread {
  flex: 1; padding: 1rem .85rem 2.8rem; display: flex; flex-direction: column; gap: .55rem;   /* respiro no fim p/ a última msg não ficar sob o card */
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;   /* rola p/ a última msg sem mostrar barra */
  background:
    radial-gradient(circle at 20% 10%, rgba(52,229,196,.05), transparent 40%),
    #0b141a;
}
.wa__thread::-webkit-scrollbar { display: none; }
.bubble {
  max-width: 82%; padding: .55rem .72rem; border-radius: 14px; font-size: .82rem; line-height: 1.4;
  opacity: 0; transform: translateY(8px) scale(.98);
  animation: pop .4s var(--ease) forwards;
}
@keyframes pop { to { opacity: 1; transform: none; } }
.bubble--in  { align-self: flex-start; background: #1d2b33; border-bottom-left-radius: 4px; }
.bubble--out { align-self: flex-end; background: #114b41; color: #d9fff6; border-bottom-right-radius: 4px; }
.bubble small { display: block; margin-top: .25rem; font-size: .58rem; color: rgba(255,255,255,.4); font-family: var(--mono); }
.bubble--out small { text-align: right; color: rgba(217,255,246,.5); }
.bubble--typing { display: inline-flex; gap: 4px; padding: .7rem .8rem; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); opacity: .5; animation: typing 1.2s infinite; }
.bubble--typing i:nth-child(2){ animation-delay:.2s } .bubble--typing i:nth-child(3){ animation-delay:.4s }
@keyframes typing { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }

.ping {
  position: absolute; right: -8px; bottom: -16px; z-index: 4;   /* vaza ABAIXO do telefone — não cobre as mensagens */
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: 14px;
  background: rgba(16,20,31,.94); border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.ping.is-in { opacity: 1; transform: none; animation: pingPop .5s var(--ease); }  /* surge ao fim da conversa */
@keyframes pingPop { 0%{transform:translateY(16px) scale(.96)} 60%{transform:translateY(-3px) scale(1.02)} 100%{transform:none} }
.ping__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); flex-shrink: 0; }
.ping small { display: block; font-family: var(--mono); font-size: .6rem; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.ping strong { font-size: .82rem; }

/* ============ SEÇÕES — base ============ */
.sec { padding: clamp(4.5rem, 11vh, 8.5rem) 0; position: relative; scroll-margin-top: 72px; }
.sec__head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__idx {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); display: inline-block; margin-bottom: 1rem;
}
.sec__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.85rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
}
.sec__lead { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--soft); max-width: 56ch; }
/* parágrafo-promessa: destaque com filete accent à esquerda */
.sec__note { margin-top: 1.2rem; padding-left: 1rem; border-left: 2px solid var(--cyan); color: var(--soft); font-size: clamp(.98rem, 1.3vw, 1.08rem); max-width: 60ch; }

/* divisória superior sutil entre seções */
.sec + .sec, .sec--dor { border-top: 1px solid var(--line); }

/* ============ 02 · DOR ============ */
.sec--dor .sec__title .hl--red { font-style: italic; }
.dor__grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.dor__item {
  background: var(--panel); padding: 1.5rem 1.35rem; font-size: .95rem; color: var(--soft);
  line-height: 1.5; transition: background .3s;
}
.dor__item:hover { background: var(--panel-2); }
.dor__tag {
  display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .6rem;   /* área da operação (transformação), não alarme */
}

/* ============ 03 · PROMESSAS ============ */
.promessas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }
.promessa {
  position: relative; padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); overflow: hidden;
}
.promessa::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--amber), transparent);
}
.promessa--mobile::before { background: linear-gradient(90deg, var(--cyan), transparent); }
.promessa__kicker {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber);
}
.promessa__kicker--cyan { color: var(--cyan); }
.promessa h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.12; margin: .7rem 0 .9rem; letter-spacing: -.015em; }
.promessa p { color: var(--soft); font-size: .98rem; }
.promessa p + p { margin-top: .85rem; }   /* respiro entre parágrafos do bloco (2026-05-31) */
.promessa__list { list-style: none; margin-top: 1.3rem; display: grid; gap: .55rem; }
.promessa__list li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--text); }
.promessa__list li::before { content: "→"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }

/* Seção 3: o texto surge escalonado e orgânico quando o card entra (o card segue animando como bloco).
   Cada elemento — etiqueta, título, parágrafos e cada bullet — sobe com leve fade em cascata. (2026-05-31) */
.promessa.reveal .promessa__kicker,
.promessa.reveal h3,
.promessa.reveal p,
.promessa.reveal .promessa__list li { opacity: 0; transform: translateY(8px); }
.promessa.is-in .promessa__kicker,
.promessa.is-in h3,
.promessa.is-in p,
.promessa.is-in .promessa__list li { animation: promoText .6s var(--ease) both; }
.promessa.is-in .promessa__kicker { animation-delay: .04s; }
.promessa.is-in h3               { animation-delay: .12s; }
.promessa.is-in p                { animation-delay: .20s; }
.promessa.is-in p + p            { animation-delay: .28s; }
.promessa.is-in .promessa__list li:nth-child(1) { animation-delay: .34s; }
.promessa.is-in .promessa__list li:nth-child(2) { animation-delay: .41s; }
.promessa.is-in .promessa__list li:nth-child(3) { animation-delay: .48s; }
.promessa.is-in .promessa__list li:nth-child(4) { animation-delay: .55s; }
.promessa.is-in .promessa__list li:nth-child(5) { animation-delay: .62s; }
.promessa.is-in .promessa__list li:nth-child(6) { animation-delay: .69s; }
@keyframes promoText { to { opacity: 1; transform: none; } }

/* Bloco 02 "premium": o CARD inteiro recebe borda animada + glow sutil — sem dashboard/indicadores (2026-05-31) */
@property --promo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.promessa--mobile {
  border-color: transparent;                                  /* a borda vira o anel de luz animado */
  box-shadow: 0 0 0 1px rgba(52,229,196,.16), 0 24px 70px -34px var(--cyan-glow);
  animation: promoGlow 4.5s var(--ease) infinite;
}
.promessa--mobile::after {                                    /* anel de luz que percorre a borda do card */
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px;
  background: conic-gradient(from var(--promo-angle), transparent 0deg, transparent 205deg, var(--cyan) 300deg, rgba(52,229,196,0) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: promoBorder 4.5s linear infinite;
}
@keyframes promoBorder { to { --promo-angle: 360deg; } }
@keyframes promoGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(52,229,196,.12), 0 22px 60px -34px var(--cyan-glow); }
  50%      { box-shadow: 0 0 0 1px rgba(52,229,196,.30), 0 26px 80px -28px var(--cyan-glow); }
}
.promessa--mobile:hover { transform: translateY(-3px); transition: transform .3s var(--ease); }

/* ============ 04 · VITRINE DE SOLUÇÕES (cards expansíveis) ============ */
.shelf { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.solu {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.solu:hover { border-color: var(--cyan); background: var(--panel-2); transform: translateY(-4px); }
.solu.is-open { border-color: var(--cyan); background: var(--panel-2); transform: none; box-shadow: 0 0 0 1px rgba(52,229,196,.18), 0 24px 60px -34px var(--cyan-glow); }
/* cabecalho clicavel = estado fechado (vende sozinho) */
.solu__head { display: grid; gap: 0; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 1.4rem 1.35rem; }
.solu__kick { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .55rem; }
.solu__n { color: var(--cyan); font-weight: 600; }
.solu__tag { color: var(--mute); }
.solu__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; }
.solu__pain { font-size: .92rem; color: var(--soft); line-height: 1.5; }
.solu__hint { font-size: .86rem; color: var(--mute); line-height: 1.45; margin-top: .5rem; }
.solu__more { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.solu__more-ic { position: relative; width: 11px; height: 11px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.solu__more-ic::before, .solu__more-ic::after { content: ""; position: absolute; background: currentColor; }
.solu__more-ic::before { left: 0; top: 5px; width: 11px; height: 1px; }
.solu__more-ic::after { left: 5px; top: 0; width: 1px; height: 11px; }
.solu.is-open .solu__more-ic { transform: rotate(45deg); }
.solu.is-open .solu__more { color: var(--mute); }
/* painel expansivel sem salto: grid-template-rows 0fr -> 1fr */
.solu__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.solu.is-open .solu__panel { grid-template-rows: 1fr; }
.solu__panelin { overflow: hidden; min-height: 0; }
.solu__body { display: grid; gap: .7rem; padding: 1.1rem 1.35rem 1.4rem; border-top: 1px solid var(--line); }
.solu__dor { font-size: .9rem; color: var(--soft); line-height: 1.55; }
.solu__fix { font-size: .92rem; color: var(--text); line-height: 1.55; }
.solu__what-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.solu__what { list-style: none; display: grid; gap: .4rem; }
.solu__what li { position: relative; padding-left: 1.4rem; font-size: .88rem; color: var(--text); line-height: 1.4; }
.solu__what li::before { content: "->"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.solu__cta { margin-top: .5rem; justify-self: start; }

/* Capstone: fechamento full-width (textual + borda/glow premium; sem dashboard/dados) */
.capstone {
  position: relative; margin-top: clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(2rem, 4.5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem); border-radius: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(70% 120% at 50% 0%, rgba(52,229,196,.08), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(52,229,196,.16), 0 26px 80px -34px var(--cyan-glow);
  animation: promoGlow 4.5s var(--ease) infinite;
}
.capstone::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px;
  background: conic-gradient(from var(--promo-angle), transparent 0deg, transparent 205deg, var(--cyan) 300deg, rgba(52,229,196,0) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  animation: promoBorder 4.5s linear infinite;
}
.capstone__kick { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
/* asterisco do "100%": menor que o texto do kicker — ressalva (escopo das propostas). (2026-06-06) */
.capstone__ast { font-size: .62em; vertical-align: super; line-height: 0; margin-left: .1em; opacity: .85; }
.capstone__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; margin: .8rem 0 0; }
.capstone__text { color: var(--soft); max-width: 56ch; margin: 1rem auto 1.7rem; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .solu__panel { transition: none; } }

/* ============ 05 · STEPS ============ */
.steps { list-style: none; display: grid; gap: 0; max-width: 880px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
  padding: 1.7rem 0; border-bottom: 1px solid var(--line); position: relative;
}
.step:first-child { border-top: 1px solid var(--line); }
.step__n {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: transparent; -webkit-text-stroke: 1px var(--line-2); line-height: 1; letter-spacing: -.02em;
  transition: -webkit-text-stroke-color .4s, color .4s;
}
.step.is-in .step__n { -webkit-text-stroke-color: var(--cyan); }
.step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.01em; margin-bottom: .3rem; }
.step p { color: var(--soft); font-size: .96rem; max-width: 52ch; }
/* Nota discreta ao fim do fluxo (§5): tom consultivo, separador acima. (2026-06-01) */
.steps__note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
  max-width: 70ch; font-size: .86rem; color: var(--mute); line-height: 1.6;
}
.step::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--cyan); transition: width .6s var(--ease); transition-delay: .1s; }
.step.is-in::after { width: 100%; }

/* ============ 06 · DIAGNÓSTICO GUIADO (§7) ============ */
.sec--lab { background: linear-gradient(180deg, transparent, rgba(52,229,196,.03), transparent); }

/* Painel do pré-diagnóstico — chat preenchido por site.js contra /api/prediagnostico. (2026-06-09) */
.dx { display: block; margin-top: clamp(1.4rem, 3vw, 2rem); }
.dx__in {
  position: relative; border-radius: 20px; overflow: hidden;
  padding: clamp(1.6rem, 3.5vw, 2.8rem) clamp(1.3rem, 3.5vw, 2.6rem);
  background: radial-gradient(70% 120% at 50% 0%, rgba(52,229,196,.08), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 0 1px rgba(52,229,196,.16), 0 26px 80px -34px var(--cyan-glow);
}
.dx__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.dx__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
/* chat do pré-diagnóstico — substitui o quiz front-only (2026-06-09) */
.dx__thread { display: flex; flex-direction: column; gap: .7rem; max-height: 46vh; overflow-y: auto; padding-right: .3rem; margin-bottom: 1.2rem; }
.dx__msg { max-width: 88%; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line-2); }
.dx__msg--bot { align-self: flex-start; background: var(--panel-2); border-top-left-radius: 4px; }
.dx__msg--me { align-self: flex-end; background: rgba(52,229,196,.10); border-color: rgba(52,229,196,.28); border-top-right-radius: 4px; }
.dx__msgtext { margin: 0; color: var(--text); font-size: clamp(.95rem, 1.3vw, 1.04rem); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dx__msg--typing .dx__dots { display: inline-flex; gap: 5px; align-items: center; }
.dx__msg--typing .dx__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); display: inline-block; animation: dxBlink 1.2s infinite ease-in-out; }
.dx__msg--typing .dx__dots i:nth-child(2) { animation-delay: .18s; }
.dx__msg--typing .dx__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dxBlink { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dx__msg--typing .dx__dots i { animation: none; opacity: .5; } }

.dx__form { display: flex; gap: .6rem; align-items: flex-end; }
.dx__field { flex: 1; resize: none; min-height: 46px; max-height: 140px; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); color: var(--text); font: inherit; font-size: .98rem; line-height: 1.4; }
.dx__field:focus { outline: none; border-color: var(--cyan); }
.dx__field:disabled { opacity: .5; }
.dx__send { flex: 0 0 auto; }
.dx__send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

.dx__chat { max-width: 640px; margin: 0 auto; width: 100%; }
.dx__start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; max-width: 520px; margin: 0 auto; }
.dx__startlead { margin: 0; color: var(--soft); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; max-width: 52ch; }
.dx__startalt { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); transition: color .2s; }
.dx__startalt:hover { color: var(--cyan); }

.dx__racts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.dx__note { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.dx__notetext { margin: 0; color: var(--soft); font-size: .98rem; line-height: 1.55; max-width: 52ch; }
.dx__note--err .dx__notetext { color: var(--text); }
.dx__walink { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.dx__walink:hover { text-decoration: underline; }
.dx__noscript { color: var(--soft); line-height: 1.6; }
.dx__noscript a { color: var(--cyan); }

/* fechamento do diagnóstico — card claro no próprio widget (CP-4.1, 2026-06-09) */
.dx__final { max-width: 560px; margin: 1rem auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
.dx__finaltitle { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; margin: 0; color: var(--text); }
.dx__finaltext { margin: 0; color: var(--soft); font-size: clamp(.98rem, 1.4vw, 1.08rem); line-height: 1.6; max-width: 48ch; }
.dx__finalacts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: .5rem; }

/* card OFICIAL de encerramento por mau uso (Fase 4.2) — borda/fundo + selo, tom neutro */
.dx__encerrado { gap: 1rem; padding: clamp(1.4rem, 3.5vw, 2.1rem); border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 50px -32px rgba(0,0,0,.65); }
.dx__encerrado .dx__finaltext { max-width: 46ch; }
.dx__enckicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.dx__enckicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); box-shadow: 0 0 0 3px rgba(144,144,168,.14); }

/* agenda — fluxo guiado em 2 etapas (escolher dia → escolher horário). Flexbox + animações orgânicas. (Fase 4, 2026-06-10) */
.dx__ag { display: flex; flex-direction: column; gap: 1.1rem; }
.dx__aglead { margin: 0; color: var(--soft); font-size: clamp(.98rem, 1.4vw, 1.08rem); line-height: 1.55; max-width: 54ch; }

/* ETAPA 1 — cards de dias (accordion) */
.dx__diaslista { display: flex; flex-direction: column; gap: .8rem; }
@media (min-width: 600px) {
  .dx__diaslista:not(.has-open) { flex-direction: row; flex-wrap: wrap; }
  .dx__diaslista:not(.has-open) .dx__diacard { flex: 1 1 180px; }
}
.dx__diacard {
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(52,229,196,.05), transparent 60%), var(--panel-2);
  transition: max-height .42s var(--ease), opacity .3s, margin .3s, border-color .25s, box-shadow .25s;
  max-height: 320px; animation: dxFade .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.dx__diacard:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(52,229,196,.18); }
.dx__diaslista.has-open .dx__diacard:not(.is-open) { max-height: 0; opacity: 0; margin: 0; border-color: transparent; pointer-events: none; }
.dx__diacard.is-open { max-height: 1400px; }
.dx__diahead { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; cursor: pointer; padding: .95rem 1.05rem; background: none; border: 0; color: var(--text); font: inherit; }
.dx__diadow { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.dx__diadata { font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.1; }
.dx__diaresumo { font-size: .84rem; color: var(--soft); }

/* ETAPA 2 — horários do dia aberto */
.dx__diabody { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), opacity .3s; }
.dx__diacard.is-open .dx__diabody { max-height: 1300px; opacity: 1; padding: 0 1.05rem 1.05rem; }
.dx__voltar { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); padding: .1rem 0 .8rem; transition: color .2s; }
.dx__voltar:hover { color: var(--cyan); }
.dx__slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.dx__slot {
  flex: 0 0 auto; min-width: 62px; padding: .5rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02); color: var(--text);
  font: inherit; font-size: .85rem; cursor: pointer; opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .15s, background .15s;
}
.dx__slot--indisponivel { border-style: dashed; color: var(--mute); background: rgba(255,255,255,.012); cursor: not-allowed; }
.dx__slot--solicitado { border-color: rgba(255,180,80,.45); color: var(--soft); background: rgba(255,180,80,.08); cursor: not-allowed; }   /* tomado por outro: âmbar */
.dx__diacard.is-open .dx__slot { transform: none; transition-delay: calc(var(--i, 0) * 16ms); }   /* stagger ao abrir */
.dx__diacard.is-open .dx__slot--disponivel { opacity: 1; }
.dx__diacard.is-open .dx__slot--indisponivel { opacity: .42; }
.dx__diacard.is-open .dx__slot--solicitado { opacity: .72; }
.dx__slot--disponivel:hover { border-color: var(--cyan); background: rgba(52,229,196,.12); }

.dx__vermais { align-self: flex-start; }
.dx__agfim { margin: 0; color: var(--mute); font-size: .9rem; font-style: italic; }
.dx__slotalert { background: rgba(255,180,80,.12); border: 1px solid rgba(255,180,80,.32); color: var(--text); padding: .6rem .8rem; border-radius: 9px; font-size: .9rem; line-height: 1.45; margin-bottom: .7rem; }

/* carrossel de blocos de 3 dias (Fase 4.1) */
.dx__agnav { display: flex; flex-wrap: wrap; gap: .8rem; }
.dx__diaslista--next { animation: dxSlideNext .35s var(--ease) both; }
.dx__diaslista--prev { animation: dxSlidePrev .35s var(--ease) both; }
@keyframes dxSlideNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes dxSlidePrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* complemento opcional (e-mail obrigatório p/ enviar) — Fase 4.1 */
.dx__compform { display: flex; flex-direction: column; gap: .6rem; margin: .3rem 0 .2rem; max-width: 420px; }
.dx__compmsg { resize: none; min-height: 52px; }
.dx__comperr { margin: 0; color: #ffb45a; font-size: .85rem; }
.dx__compsend { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .dx__diacard, .dx__diabody, .dx__slot, .dx__diaslista--next, .dx__diaslista--prev { animation: none !important; transition: none !important; }
  .dx__slot { transform: none; }
}

/* transição suave */
.dx__fade { animation: dxFade .35s var(--ease); }
@keyframes dxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dx { transition: none; } .dx__fade { animation: none; } }
@media (max-width: 560px) {
  .dx__head { gap: .7rem; }
  .dx__msg { max-width: 94%; }
  .dx__thread { max-height: 52vh; }
}

/* ============ 07 · SOBRE ============ */
.sobre__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sobre__photo { position: relative; justify-self: center; max-width: 360px; width: 100%; }
.sobre__photo img {
  width: 100%; border-radius: 20px;
  filter: grayscale(.15) contrast(1.03);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.sobre__photo::before {
  content: ""; position: absolute; inset: -1px; border-radius: 20px; z-index: -1;
  background: radial-gradient(60% 60% at 50% 30%, var(--cyan-glow), transparent 70%);
  filter: blur(20px);
}
.sobre__plate {
  position: absolute; left: -10px; bottom: 26px;
  font-family: var(--display); font-weight: 800; font-size: 2rem;
  color: var(--ink); background: var(--cyan); border-radius: 12px; padding: .25em .5em; line-height: 1;
  box-shadow: 0 14px 34px -10px var(--cyan-glow);
}
.sobre__copy p { color: var(--soft); font-size: clamp(1.02rem, 1.5vw, 1.18rem); margin-top: 1rem; max-width: 54ch; }
.sobre__creds { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.sobre__creds li {
  font-family: var(--mono); font-size: .78rem; color: var(--soft);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .4em .9em;
}
/* Trajetória técnica expansível (§6) — mesmo padrão de expand da §4 (.solu__panel). (2026-06-01) */
.sobre__tech { margin-top: 1.6rem; }
.sobre__more {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: var(--mono);
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
  transition: color .25s var(--ease);
}
.sobre__more-ic { position: relative; width: 11px; height: 11px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.sobre__more-ic::before, .sobre__more-ic::after { content: ""; position: absolute; background: currentColor; }
.sobre__more-ic::before { left: 0; top: 5px; width: 11px; height: 1px; }
.sobre__more-ic::after { left: 5px; top: 0; width: 1px; height: 11px; }
.sobre__tech.is-open .sobre__more { color: var(--mute); }
.sobre__tech.is-open .sobre__more-ic { transform: rotate(45deg); }
.sobre__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.sobre__tech.is-open .sobre__panel { grid-template-rows: 1fr; }
.sobre__panelin { overflow: hidden; min-height: 0; }
.sobre__panelbody { display: grid; gap: .9rem; padding-top: 1.1rem; }
.sobre__panelbody p { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .sobre__panel { transition: none; } }

/* ============ 08 · CTA FINAL ============ */
.sec--final { text-align: center; }
.final__inner { max-width: 820px; margin-inline: auto; }
.final__h { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.025em; }
.final__p { margin: 1.4rem auto 0; max-width: 56ch; color: var(--soft); font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.final__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.4rem; }

/* ============ FOOTER ============ */
.foot { border-top: 1px solid var(--line); padding: clamp(3rem, 6vh, 4.5rem) 0 2rem; background: var(--ink); }
.foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.foot__brand { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.foot__tag { color: var(--mute); font-size: .92rem; max-width: 40ch; margin-top: .5rem; }
.foot__chan { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; }
.foot__chan a { color: var(--soft); font-size: .92rem; transition: color .2s; }
.foot__chan a:hover { color: var(--cyan); }
.foot__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .76rem; color: var(--mute);
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1080px) {
  .dor__grid { grid-template-columns: repeat(2, 1fr); }
  .shelf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .rail { display: none; }
  .nav__links { display: none; }
  /* remove o espaço morto entre o nav fixo e o chip no mobile — só o necessário p/ limpar a barra */
  .hero { min-height: auto; padding-top: 5.2rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { max-width: 300px; margin-top: 1rem; }    /* headline primeiro, telefone abaixo no mobile */
  .promessas { grid-template-columns: 1fr; }
  .sobre__grid { grid-template-columns: 1fr; }
  .sobre__photo { grid-row: 1; max-width: 280px; }
}
@media (max-width: 560px) {
  .dor__grid { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: 1fr; }
  .hero__stamps { gap: .9rem 1.2rem; }
  .btn { width: 100%; justify-content: center; }
  .nav .btn--pill { width: auto; }
  .hero__cta, .final__cta { width: 100%; }
}


/* =====================================================================
   02 · A OPERAÇÃO QUE VOCÊ NÃO ENXERGA — layout 2 colunas + "tela do dono"
   Copy à esquerda; à direita um telefone com o resumo da operação em
   tempo real (KPIs, alerta, resumo de IA e fontes de dados). (2026-05-31)
   ===================================================================== */
.sec--ops .ops{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.ops__copy{ max-width:540px; }
.ops__copy .sec__idx{ display:inline-block; }
.ops__copy .sec__title{ margin:.55rem 0 0; }
.ops__pain{
  margin:1.4rem 0 0; font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.6; color:var(--text); font-weight:500;
}
.ops__fix{
  margin:1.15rem 0 0; font-size:clamp(.98rem,1.5vw,1.1rem);
  line-height:1.65; color:var(--soft);
  padding-left:1rem; border-left:2px solid var(--cyan);
}
.ops__fix strong{ color:var(--text); }

/* coluna direita: palco + glow ambiente (mesmo espírito do hero) */
.ops__stage{ position:relative; display:flex; justify-content:center; }
.ops__stage::before{
  content:""; position:absolute; inset:-10% -6% -14% -6%; z-index:-1;
  background:radial-gradient(58% 50% at 50% 36%, var(--cyan-glow), transparent 70%);
  filter:blur(24px); opacity:.6;
}

/* moldura do telefone (isolada da do hero p/ não regredir) */
.opsphone{
  position:relative; width:300px; max-width:80vw; aspect-ratio:300/620;
  border-radius:46px; padding:13px; overflow:hidden;
  background:linear-gradient(160deg,#141a28 0%, #0a0e1a 60%);
  border:1px solid var(--line-2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
}
.opsphone__notch{
  position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:118px; height:22px; border-radius:0 0 16px 16px;
  background:#05070d; z-index:3;
}
/* sheen sutil de "fluxo de dados" em loop contínuo */
.opsphone__flow{
  position:absolute; inset:0; border-radius:46px; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, transparent 0%, rgba(52,229,196,.06) 50%, transparent 100%);
  background-size:100% 220%; animation:opFlow 7s linear infinite; mix-blend-mode:screen;
}
@keyframes opFlow{ 0%{ background-position:0 -120%; } 100%{ background-position:0 120%; } }

/* tela do telefone */
.opsui{
  position:relative; z-index:1; height:100%;
  border-radius:34px; padding:34px 16px 16px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(52,229,196,.07), transparent 55%),
    #080b14;
  display:flex; flex-direction:column; gap:11px;
}
.opsui__bar{ display:flex; align-items:center; gap:8px; padding:0 2px 6px; }
.opsui__h{ font-size:.92rem; color:var(--text); font-weight:700; letter-spacing:-.01em; }
.opsui__time{ margin-left:auto; font-family:var(--mono); font-size:.66rem; color:var(--mute); }
.opsui__live{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.6rem; font-weight:600; color:var(--cyan);
  text-transform:uppercase; letter-spacing:.06em;
}
.opsui__live i{ width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 var(--cyan-glow); animation:opPing 2.4s infinite; }
@keyframes opPing{ 0%{ box-shadow:0 0 0 0 rgba(52,229,196,.5);} 70%{ box-shadow:0 0 0 7px rgba(52,229,196,0);} 100%{ box-shadow:0 0 0 0 rgba(52,229,196,0);} }

.opsui__grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ometric{
  border:1px solid var(--line); border-radius:14px; padding:10px 11px;
  background:rgba(231,236,246,.04); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:3px;
}
.ometric b{ font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; color:var(--text); }
.ometric span{ font-size:.66rem; line-height:1.25; color:var(--mute); font-weight:600; }
.ometric--warn b{ color:#ff8f7a; }

.oalert{
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(255,143,122,.28); border-radius:12px; padding:9px 11px;
  background:linear-gradient(90deg, rgba(255,143,122,.10), rgba(255,143,122,.02));
}
.oalert__dot{ width:8px; height:8px; border-radius:50%; background:#ff8f7a; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,143,122,.6); animation:opAlert 2s infinite; }
@keyframes opAlert{ 0%{ box-shadow:0 0 0 0 rgba(255,143,122,.5);} 70%{ box-shadow:0 0 0 7px rgba(255,143,122,0);} 100%{ box-shadow:0 0 0 0 rgba(255,143,122,0);} }
.oalert__txt{ font-size:.7rem; line-height:1.3; color:var(--soft); font-weight:600; }

.oai{
  border:1px solid rgba(52,229,196,.3); border-radius:14px;
  padding:11px 12px; background:linear-gradient(135deg, rgba(52,229,196,.10), rgba(52,229,196,.02));
}
.oai__tag{ font-family:var(--mono); font-size:.6rem; font-weight:600; color:var(--cyan);
  text-transform:uppercase; letter-spacing:.06em; }
.oai p{ margin:6px 0 0; font-size:.76rem; line-height:1.4; color:var(--soft); }
.oai p strong{ color:var(--text); }

.osrc{ margin-top:auto; display:flex; flex-wrap:wrap; gap:5px; padding-top:4px; }
.osrc span{
  font-family:var(--mono); font-size:.58rem; font-weight:600; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:5px 8px;
  background:rgba(255,255,255,.02);
}
/* chips de fonte acendendo em sequência: dados chegando ao painel central */
.ops__stage.is-in .osrc span{ animation:opSrc 5.4s ease-in-out infinite; }
.osrc span:nth-child(1){ animation-delay:0s; }   .osrc span:nth-child(2){ animation-delay:.4s; }
.osrc span:nth-child(3){ animation-delay:.8s; }  .osrc span:nth-child(4){ animation-delay:1.2s; }
.osrc span:nth-child(5){ animation-delay:1.6s; } .osrc span:nth-child(6){ animation-delay:2s; }
@keyframes opSrc{
  0%,82%,100%{ color:var(--mute); border-color:var(--line); box-shadow:none; }
  88%{ color:var(--cyan); border-color:rgba(52,229,196,.45); box-shadow:0 0 10px rgba(52,229,196,.25); }
}

/* entrada escalonada dos elementos da tela quando o palco entra em cena
   (o resumo de IA aparece por último, como se a IA o gerasse) */
.ops__stage .opsui__bar,
.ops__stage .ometric,
.ops__stage .oalert,
.ops__stage .oai,
.ops__stage .osrc{ opacity:0; transform:translateY(10px); }
.ops__stage.is-in .opsui__bar,
.ops__stage.is-in .ometric,
.ops__stage.is-in .oalert,
.ops__stage.is-in .oai,
.ops__stage.is-in .osrc{ animation:opIn .7s var(--ease) both; animation-delay:calc(var(--i,0)*.12s + .15s); }
@keyframes opIn{ to{ opacity:1; transform:none; } }

@media (max-width:880px){
  .sec--ops .ops{ grid-template-columns:1fr; gap:2.6rem; }
  .ops__copy{ max-width:none; }
  .ops__stage{ order:2; }
}
@media (prefers-reduced-motion:reduce){
  .opsphone__flow,.opsui__live i,.oalert__dot,.ops__stage.is-in .osrc span{ animation:none; }
  .ops__stage .opsui__bar,.ops__stage .ometric,.ops__stage .oalert,.ops__stage .oai,.ops__stage .osrc{ opacity:1; transform:none; }
  .ops__stage.is-in .opsui__bar,.ops__stage.is-in .ometric,.ops__stage.is-in .oalert,.ops__stage.is-in .oai,.ops__stage.is-in .osrc{ animation:none; }
}