/* ==========================================================================
   THE ELITE AGENCY — sistema visual
   Linguagem "keynote": preto/branco puros, tipografia de sistema enorme,
   secções cheias alternando claro/escuro, grandes telas cinematográficas
   no lugar de fotografia de stock. Um mundo visual único, fixo por desenho.
   ========================================================================== */

:root{
  --black:      #000;
  --white:      #fff;
  --ink:        #1d1d1f;   /* texto quase-preto sobre fundos claros */
  --mist:       #f5f5f7;   /* cinza muito claro — secções "tint" */
  --card-light: #ffffff;
  --card-tint:  #ececec;
  --grey-on-l:  #6e6e73;   /* texto secundário sobre claro */
  --grey-on-l-2:#86868b;
  --grey-on-d:  #a1a1a6;   /* texto secundário sobre escuro */
  --grey-on-d-2:#8a8a8e;
  --card-dark:  #1d1d1f;

  --bronze:      #b6874a;  /* bronze base */
  --bronze-soft: #d3a874;  /* bronze claro — legível sobre preto */
  --bronze-deep: #8a6234;  /* bronze escuro — legível sobre branco */
  --bronze-glow: 214,163,105; /* rgb, para gradientes e vidros */

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --content: 1240px;
  --gutter: clamp(1.4rem, 5vw, 4rem);
  --pad-section: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 22px;
  --radius-s: 14px;
  --radius-pill: 980px;

  /* tokens de tema por omissão (cabeçalho/rodapé, fora de <section>) — escuro */
  --bg: var(--black); --fg: var(--white);
  --fg-dim: var(--grey-on-d); --fg-mute: var(--grey-on-d-2);
  --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.32);
  --surface: var(--card-dark); --surface-2: #2a2a2c;
  --btn-fg: #1b1409; --btn-bg: var(--bronze-soft);
  --accent-c: var(--bronze-soft);
}

*,*::before,*::after{ box-sizing: border-box; }

html{ background: var(--black); }

body{
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--white); color: var(--black); }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* — layout primitives — */
.wrap{ max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
main{ display: block; }

/* — secções: cada uma declara o seu próprio tema local — */
section{ position: relative; padding-block: var(--pad-section); background: var(--bg); color: var(--fg); }

section.on-dark{
  --bg: var(--black); --fg: var(--white);
  --fg-dim: var(--grey-on-d); --fg-mute: var(--grey-on-d-2);
  --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.32);
  --surface: var(--card-dark); --surface-2: #2a2a2c;
  --btn-fg: #1b1409; --btn-bg: var(--bronze-soft);
  --accent-c: var(--bronze-soft);
}
section.on-light{
  --bg: var(--white); --fg: var(--ink);
  --fg-dim: var(--grey-on-l); --fg-mute: var(--grey-on-l-2);
  --line: rgba(0,0,0,.1); --line-strong: rgba(0,0,0,.24);
  --surface: var(--mist); --surface-2: #fff;
  --btn-fg: #fff; --btn-bg: var(--bronze-deep);
  --accent-c: var(--bronze-deep);
}
section.on-tint{
  --bg: var(--mist); --fg: var(--ink);
  --fg-dim: var(--grey-on-l); --fg-mute: var(--grey-on-l-2);
  --line: rgba(0,0,0,.1); --line-strong: rgba(0,0,0,.24);
  --surface: var(--card-tint); --surface-2: #fff;
  --btn-fg: #fff; --btn-bg: var(--bronze-deep);
  --accent-c: var(--bronze-deep);
}
.section-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); max-width: 44rem; }
.section-head.wide{ max-width: 60rem; }
.section-head.center{ margin-inline:auto; align-items:center; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color: var(--fg-dim);
}
.eyebrow::before{ content:""; width:1.3em; height:1px; background: var(--accent-c); display:inline-block; }

h1,h2,h3,h4{ font-family: var(--font); color: var(--fg); margin:0; text-wrap: balance; letter-spacing:-.015em; }
h1{ font-size: clamp(2.8rem, 4vw + 2rem, 6.4rem); line-height: 1.02; font-weight: 600; letter-spacing:-.03em; }
h2{ font-size: clamp(2.1rem, 2.6vw + 1.3rem, 3.6rem); line-height: 1.06; font-weight: 600; letter-spacing:-.025em; }
h3{ font-size: clamp(1.2rem, .7vw + 1rem, 1.5rem); line-height:1.3; font-weight:600; letter-spacing:-.01em; }
h4{ font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color: var(--fg-dim); }

.accent{ color: var(--accent-c); font-weight: 600; }

p{ margin:0; }
.lede{ font-size: clamp(1.1rem, .5vw + 1rem, 1.5rem); line-height:1.5; color: var(--fg-dim); max-width: 40rem; font-weight: 400; }
.section-head.center .lede{ margin-inline:auto; }
.body-col{ max-width: 36rem; color: var(--fg-dim); font-size: 1.02rem; }
.body-col strong{ color: var(--fg); font-weight:600; }

.stack{ display:flex; flex-direction:column; }
.g-xs{ gap:.5rem;} .g-s{ gap:1rem;} .g-m{ gap:1.75rem;} .g-l{ gap:3rem; }

/* — cabeçalho: barra fina, sempre escura, à Apple — */
.site-header{
  position: sticky; top:0; z-index:40;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.brand{ display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; color:#fff; letter-spacing:-.01em; }
.brand .mark{ width:18px; height:18px; border:1.5px solid var(--bronze-soft); border-radius:50%; flex:none; position:relative; }
.brand .mark::after{ content:""; position:absolute; inset:5px; border-radius:50%; background: var(--bronze-soft); }
.brand .logo{ height:24px; width:auto; flex:none; display:block; }
.primary-nav{ display:flex; align-items:center; gap: clamp(1.3rem, 2vw, 2.4rem); }
.primary-nav a:not(.btn){ font-size:.82rem; font-weight:400; color: rgba(255,255,255,.8); transition: color .2s ease; white-space:nowrap; }
.primary-nav a:not(.btn):hover, .primary-nav a:not(.btn)[aria-current="page"]{ color:#fff; }
.header-actions{ display:flex; align-items:center; gap:1.1rem; }
.menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; width:36px; height:36px; border-radius:50%; align-items:center; justify-content:center; cursor:pointer; }
.menu-toggle svg{ width:15px; height:15px; }

.mobile-nav{ display:none; position:fixed; inset:0; z-index:39; background:#000; padding:6rem var(--gutter) 3rem; flex-direction:column; gap:1.5rem; }
.mobile-nav a{ font-weight:600; font-size:1.6rem; color:#fff; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:1rem; }
body.nav-open .mobile-nav{ display:flex; }
body.nav-open{ overflow:hidden; }

@media (max-width:860px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .header-actions .btn span.long{ display:none; }
}

/* — botões — */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:500; letter-spacing:-.005em;
  padding:.8rem 1.4rem; border-radius: var(--radius-pill);
  border:1px solid currentColor; white-space:nowrap;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.btn-solid{ background: var(--btn-bg, #fff); color: var(--btn-fg, #000); border-color: transparent; }
.btn-solid:hover{ opacity:.82; }
.btn-ghost{ background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--fg); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; }
.btn svg{ width:11px; height:11px; }

/* link tipo "chevron", à Apple: "Saber mais >" */
.chevron-link{ display:inline-flex; align-items:center; gap:.3rem; font-size:1.05rem; font-weight:400; color: var(--fg); transition: color .2s ease; }
.chevron-link::after{ content:"›"; font-weight:400; color: var(--accent-c); transition: transform .2s ease; }
.chevron-link:hover{ color: var(--accent-c); }
.chevron-link:hover::after{ transform: translateX(3px); }

/* — hero: cheio, tipografia enorme, arte cinematográfica ambiente — */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: clamp(6rem, 12vw, 8.5rem);
  padding-bottom: 0;
  text-align: center;
}
.hero .wrap{ position: relative; z-index: 2; }
.hero .kicker-row{ margin-inline:auto; }
.hero h1{ max-width: 16ch; margin-inline:auto; }
.hero .lede{ margin-top:1.4rem; margin-inline:auto; }
.hero .btn-row{ justify-content:center; margin-top:2.4rem; }

.cinematic-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cinematic-bg::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 55% at 50% 15%, rgba(var(--bronze-glow),.22), transparent 60%),
              radial-gradient(ellipse 60% 50% at 85% 90%, rgba(var(--bronze-glow),.1), transparent 60%),
              radial-gradient(ellipse 60% 50% at 10% 85%, rgba(var(--bronze-glow),.08), transparent 60%);
}
.cinematic-bg::after{
  content:"";
  position:absolute; inset:0;
  opacity:.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* — badge com avatares (kicker) — */
.kicker-row{
  display:inline-flex; align-items:center; gap:.85rem;
  border:1px solid rgba(var(--bronze-glow),.4); border-radius: var(--radius-pill);
  background: rgba(var(--bronze-glow),.08);
  padding:.45rem 1.15rem .45rem .45rem; margin-bottom:1.8rem;
}
.avatars{ display:flex; align-items:center; flex:none; }
.avatars span{
  width:28px; height:28px; border-radius:50%;
  background: var(--surface-2); border:1.5px solid var(--bg); outline:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; color: var(--fg); margin-left:-9px;
}
.avatars span:first-child{ margin-left:0; }
.kicker-row .kicker-text{ font-size:.85rem; color: var(--fg-dim); text-align:left; }
.kicker-row .kicker-text strong{ color: var(--fg); font-weight:700; }

/* — sistema de ícones: uma única composição, consistente em todo o site, sempre a preto — */
.hero-visual{ position:relative; z-index:1; margin-top: clamp(3rem, 7vw, 5rem); }
.hero-visual .frame{ margin-inline:auto; max-width: 1040px; }

.screen{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  border-radius: var(--radius); overflow:hidden;
  background: #000;
  border: 1px solid var(--line-strong);
  aspect-ratio: 16/9;
  isolation:isolate;
}
.screen::before{ content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(var(--bronze-glow),.12), transparent 65%); }
.screen .mark{
  position:relative; z-index:1; flex:none;
  width: clamp(40px,12%,64px); aspect-ratio:1; border-radius:50%;
  border:1.5px solid var(--bronze-soft); background: rgba(var(--bronze-glow),.08);
  display:flex; align-items:center; justify-content:center;
}
.screen .mark svg{ width:42%; height:42%; color: var(--bronze-soft); }
.screen .mark img{ width:72%; height:72%; object-fit:contain; }
.screen .label{ position:relative; z-index:1; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--fg-mute); text-align:center; }

/* — traço dourado: assinatura visual minimalista, sem fotografia — */
.gold-rule{
  position:relative; z-index:1;
  width: 58%; max-width: 320px; height:1px; margin-inline:auto;
  background: linear-gradient(90deg, transparent, var(--bronze-soft) 50%, transparent);
}
.gold-rule::after{
  content:""; position:absolute; inset:-6px 0; z-index:-1;
  background: linear-gradient(90deg, transparent, rgba(var(--bronze-glow),.55) 50%, transparent);
  filter: blur(6px);
}
.gold-rule.accent{ width:56px; max-width:56px; margin-inline:0; height:2px; margin-block:.9rem 0; }

/* — placeholder de vídeo: botão de play sobre o ecrã escuro — */
.screen .play-btn{
  position:relative; z-index:1; flex:none;
  width: clamp(56px,13%,88px); aspect-ratio:1; border-radius:50%;
  border:1.5px solid var(--bronze-soft); background: rgba(var(--bronze-glow),.12);
  display:flex; align-items:center; justify-content:center;
}
.screen .play-btn svg{ width:36%; height:36%; color: var(--bronze-soft); margin-left:6%; }

/* — mockup de portal privado: browser fictício com carteira de ativos — */
.portal-window{ position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; background:#0b0b0c; }
.portal-bar{ flex:none; display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
.portal-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); flex:none; }
.portal-url{ display:flex; align-items:center; gap:.4rem; margin-left:.6rem; padding:.32rem .8rem; border-radius: var(--radius-pill); background:rgba(255,255,255,.05); border:1px solid var(--line); min-width:0; }
.portal-url svg{ width:10px; height:10px; color: var(--bronze-soft); flex:none; }
.portal-url span{ font-size:.68rem; color: var(--fg-mute); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portal-body{ flex:1; display:flex; min-height:0; }
.portal-nav{ flex:none; width:96px; display:flex; flex-direction:column; gap:.2rem; padding:.9rem .6rem; border-right:1px solid var(--line); }
.portal-nav-item{ font-size:.64rem; color: var(--fg-mute); padding:.42rem .5rem; border-radius:8px; }
.portal-nav-item.active{ color: var(--fg); background: rgba(var(--bronze-glow),.14); }
.portal-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:.7rem; align-content:start; }
.portal-card{ aspect-ratio:4/5; border-radius:7px; overflow:hidden; background:#000; border:1px solid var(--line); }
.portal-card img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:480px){ .portal-nav{ display:none; } }

/* — filmstrip do arquivo de produções (galeria de imagens reais) — */
.archive-strip{ position:relative; z-index:1; width:100%; height:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.archive-frame{ position:relative; overflow:hidden; background:#000; }
.archive-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.94); }
@media (max-width:640px){ .archive-strip{ grid-template-columns:repeat(3,1fr); } .archive-frame:nth-child(4),.archive-frame:nth-child(5){ display:none; } }

/* — fluxo de 3 passos dentro do hero (diagnóstico → construção → lançamento) — */
.hero-flow{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:center; gap: clamp(1rem,3vw,2.4rem); width:100%; padding-inline:1.4rem; }
.hero-flow-step{ display:flex; flex-direction:column; align-items:center; gap:.7rem; flex:none; }
.hero-flow-icon{ width:clamp(48px,9%,72px); aspect-ratio:1; border-radius:50%; border:1.5px solid var(--bronze-soft); background: rgba(var(--bronze-glow),.1); display:flex; align-items:center; justify-content:center; }
.hero-flow-icon svg{ width:42%; height:42%; color: var(--bronze-soft); }
.hero-flow-icon img{ width:72%; height:72%; object-fit:contain; }
.hero-flow-label{ font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--fg-mute); white-space:nowrap; }
.hero-flow-arrow{ flex:none; width: clamp(18px,3.5vw,32px); margin-top: clamp(24px,4.5%,36px); color: var(--fg-mute); opacity:.55; }
.hero-flow-arrow svg{ width:100%; height:auto; }
@media (max-width:560px){ .hero-flow{ flex-wrap:wrap; row-gap:1.2rem; } .hero-flow-arrow{ display:none; } }

/* — mockup da Apollo Studio: feed de conteúdo gerado, sobre fotografia de fundo — */
.apollo-hero-screen.screen-photo::before{ z-index:1; background: linear-gradient(195deg, rgba(8,5,3,.2) 0%, rgba(8,5,3,.6) 45%, rgba(8,5,3,.93) 100%); }
.apollo-window{ position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:10px; padding: clamp(1rem,3vw,1.8rem); }
.apollo-row{ display:flex; align-items:center; gap:.9rem; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.7rem .9rem; }
.apollo-row-icon{ flex:none; width:34px; height:34px; border-radius:9px; background: rgba(var(--bronze-glow),.12); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.apollo-row-icon svg{ width:48%; height:48%; color: var(--bronze-soft); }
.apollo-row-icon img{ width:76%; height:76%; object-fit:contain; }
.apollo-row-body{ flex:1; display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.apollo-row-title{ font-size:.74rem; font-weight:600; color: var(--fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.apollo-row-bar{ display:block; height:5px; border-radius:3px; background: rgba(255,255,255,.09); width:88%; }
.apollo-tag{ flex:none; font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--fg-mute); border:1px solid var(--line-strong); border-radius: var(--radius-pill); padding:.28rem .6rem; }
.apollo-tag-accent{ color:#1b1409; background: var(--bronze-soft); border-color:transparent; }
@media (max-width:520px){ .apollo-row-title{ display:none; } }

/* — cartão de confirmação de marcação (diagnóstico) — */
.booking-card{ position:relative; z-index:1; width:min(320px,86%); background: rgba(255,255,255,.03); border:1px solid var(--line-strong); border-radius:16px; padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.booking-card-top{ display:flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--bronze-soft); }
.booking-dot{ width:7px; height:7px; border-radius:50%; background: var(--bronze-soft); flex:none; }
.booking-title{ font-size:1.05rem; color: var(--fg); text-transform:none; letter-spacing:0; font-weight:700; }
.booking-meta{ display:flex; gap:1rem; flex-wrap:wrap; }
.booking-meta span{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color: var(--fg-dim); }
.booking-meta svg{ width:13px; height:13px; color: var(--fg-mute); flex:none; }
.booking-people{ display:flex; align-items:center; gap:.4rem; padding-top:.7rem; border-top:1px solid var(--line); }
.booking-avatar{ width:26px; height:26px; border-radius:50%; background: var(--surface-2); border:1.5px solid var(--bg); outline:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color: var(--fg); margin-left:-8px; }
.booking-avatar:first-child{ margin-left:0; }
.booking-plus{ font-size:.72rem; color: var(--fg-mute); margin-left:.3rem; }

/* — checklist visual (o que cobrimos na chamada) — */
.checklist-window{ position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:12px; padding: clamp(1.2rem,3vw,1.8rem); }
.checklist-item{ display:flex; align-items:center; gap:.8rem; font-size:.82rem; color: var(--fg-mute); }
.checklist-item.checked{ color: var(--fg-dim); }
.check-box{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.checklist-item.checked .check-box{ background: var(--bronze-soft); border-color: var(--bronze-soft); }
.checklist-item.checked .check-box svg{ width:65%; height:65%; color:#1b1409; }

/* — versão miniatura, para acompanhar listas numeradas — */
.numbered.visual > li{ grid-template-columns: 4rem 92px 1fr; align-items:center; }
.numbered.visual .screen{ width:92px; aspect-ratio:1/1; border-radius: var(--radius-s); justify-self:start; flex:none; gap:0; }
.numbered.visual .screen .mark{ width:28px; }
@media (max-width:640px){ .numbered.visual > li{ grid-template-columns:1fr; } .numbered.visual .screen{ width:64px; height:64px; } .numbered.visual .screen .mark{ width:20px; } }

/* — cartão com ícone no topo (preços, setores em cartão) — */
.card.has-screen{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card.has-screen .screen{ border-radius:0; border:none; border-bottom:1px solid var(--line); aspect-ratio:16/9; }
.card.has-screen .card-body{ padding: clamp(1.6rem,2.6vw,2.2rem); }

/* — ecrã preenchido por fotografia (cartões de preço): mesma moldura do .screen, com imagem a toda a área — */
.screen.screen-photo{ background:#000; }
.screen.screen-photo::before{ z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.62) 100%); }
.screen-photo .screen-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.screen-photo .label{
  position:absolute; z-index:2; left: clamp(1.1rem,2.4vw,1.5rem); bottom: clamp(1.1rem,2.4vw,1.5rem);
  display:inline-flex; align-items:center; gap:.5rem; width:auto;
  padding: .45em .9em; border-radius: 999px;
  background: rgba(10,8,5,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--bronze-glow),.4);
  color: var(--white); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-align:left;
}

/* — ecrã-herói com fotografia de fundo atenuada: o mockup/UI existente fica por cima, legível, a foto dá-lhe profundidade — */
.screen-ambient .screen-bg{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
.screen.screen-ambient::before{ background: radial-gradient(ellipse 85% 80% at 50% 42%, rgba(12,9,5,.45), rgba(6,4,2,.82) 100%); }

/* — marca-avatar abstrata para pessoas (sem fotografia) — */
.person .avatar-mark{
  width:54px; height:54px; border-radius:50%; flex:none;
  border:1.5px solid var(--bronze-soft); background: rgba(var(--bronze-glow),.1);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.92rem; letter-spacing:.01em; color: var(--accent-c);
  margin-bottom:1.1rem;
}
.person-photo{
  width:84px; height:84px; border-radius:50%; flex:none;
  border:1.5px solid var(--bronze-soft); object-fit:cover; display:block;
}

/* tiles claros (secções brancas) — cartão de vidro fosco */
.tile-light{
  border-radius: var(--radius); background: var(--surface-2, #fff);
  border: 1px solid var(--line); overflow:hidden; position:relative;
}

/* — grelhas — */
.grid{ display:grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } .grid-5{ grid-template-columns:1fr; } }

/* — anatomia do vídeo: sequência (hook→cta) + mistura de conteúdo, um só painel — */
.anatomy{ border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(1.8rem,3vw,2.6rem); }
.anatomy-flow{ display:flex; align-items:flex-start; gap: clamp(.8rem,2vw,1.6rem); }
.flow-step{ flex:1; display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.flow-step .idx{ font-weight:700; font-size:1.1rem; color: var(--accent-c); line-height:1; }
.flow-arrow{ flex:none; width:18px; margin-top:1.65rem; color: var(--fg-mute); }
.flow-arrow svg{ width:100%; height:auto; }
.flow-icon{
  position:relative; isolation:isolate; overflow:hidden;
  width:64px; aspect-ratio:1; border-radius: var(--radius-s);
  background:#000; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; margin-bottom:.4rem;
}
.flow-icon::before{ content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 80% 70% at 50% 38%, rgba(var(--bronze-glow),.18), transparent 65%); }
.flow-icon svg{ position:relative; z-index:1; width:38%; height:38%; color: var(--bronze-soft); }
.flow-icon img{ position:relative; z-index:1; width:68%; height:68%; object-fit:contain; }
.anatomy-flow-icon .flow-arrow{ margin-top: 2.6rem; }
@media (max-width:760px){ .anatomy-flow-icon .flow-arrow{ margin-top:0; } }
.anatomy-mix{ margin-top: clamp(2rem,4vw,2.8rem); padding-top: clamp(2rem,4vw,2.8rem); border-top:1px solid var(--line); }
.mix-head{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.4rem; }
.mix-bar{ display:flex; align-items:stretch; height:14px; border-radius: var(--radius-pill); overflow:hidden; background: var(--line); gap:2px; }
.mix-seg{ display:block; height:100%; }
.mix-bar .mix-seg:nth-child(1){ background: var(--bronze-soft); }
.mix-bar .mix-seg:nth-child(2){ background: var(--bronze-deep); }
.mix-bar .mix-seg:nth-child(3){ background: #e9cfa9; }
.mix-bar .mix-seg:nth-child(4){ background: var(--bronze); }
.mix-legend{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; margin-top:1.5rem; }
.mix-item{ display:flex; align-items:center; gap:.55rem; }
.mix-swatch{ width:10px; height:10px; border-radius:50%; flex:none; }
.mix-item:nth-child(1) .mix-swatch{ background: var(--bronze-soft); }
.mix-item:nth-child(2) .mix-swatch{ background: var(--bronze-deep); }
.mix-item:nth-child(3) .mix-swatch{ background: #e9cfa9; }
.mix-item:nth-child(4) .mix-swatch{ background: var(--bronze); }
.mix-num{ font-weight:700; color: var(--fg); font-variant-numeric: tabular-nums; }
.mix-label{ color: var(--fg-dim); font-size:.92rem; }
@media (max-width:760px){
  .anatomy-flow{ flex-direction:column; gap:1.2rem; }
  .flow-arrow{ transform:rotate(90deg); width:15px; margin:0 auto; }
}

/* — pilares (tela + legenda, à Apple) — */
.pillar{ display:flex; flex-direction:column; gap:1.4rem; }
.pillar .idx{ font-size:.8rem; font-weight:700; color: var(--accent-c); letter-spacing:.02em; }
.pillar h3{ margin-top:.3rem; }

/* — itens numerados — */
.numbered{ display:flex; flex-direction:column; }
.numbered > li{ display:grid; grid-template-columns:4rem 1fr; gap: clamp(1rem,3vw,2.5rem); padding-block: clamp(1.8rem,3vw,2.4rem); border-top:1px solid var(--line); list-style:none; }
.numbered > li:last-child{ border-bottom:1px solid var(--line); }
.numbered .idx{ font-weight:700; font-size:1.5rem; color: var(--accent-c); line-height:1; }
.numbered h3{ margin-bottom:.5rem; }
@media (max-width:640px){ .numbered > li{ grid-template-columns:1fr; gap:.6rem; } }

/* — cartão — */
.card{ border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(1.6rem,2.6vw,2.2rem); }
.card h3{ margin-bottom:.6rem; }
.card .idx{ font-weight:700; font-size:1.3rem; color: var(--accent-c); display:block; margin-bottom:1rem; }

/* — estatísticas, à Apple: número gigante — */
.stat{ display:flex; flex-direction:column; gap:.5rem; }
.stat .num{ font-size: clamp(3rem, 5vw, 5.5rem); font-weight:700; color: var(--accent-c); line-height:1; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.stat .label{ font-size:1rem; color: var(--fg-dim); max-width:22ch; }

/* — comparação — */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.compare > div{ background: var(--surface); padding: clamp(1.6rem,3vw,2.4rem); }
.compare h4{ margin-bottom:1.2rem; }
.compare ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.compare li{ display:flex; gap:.7rem; font-size:.98rem; color: var(--fg-dim); line-height:1.45; }
.compare li::before{ content:"×"; color: var(--fg-mute); font-weight:700; flex:none; }
.compare .unified li::before{ content:"—"; color: var(--accent-c); }
.compare .unified li{ color: var(--fg); }
@media (max-width:720px){ .compare{ grid-template-columns:1fr; } }

/* — limites — */
.limits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.limits li{ display:grid; grid-template-columns:2rem 1fr; gap:1rem; padding-block:1.5rem; border-top:1px solid var(--line); }
.limits li:last-child{ border-bottom:1px solid var(--line); }
.limits .x{ font-weight:700; font-size:1.15rem; color: var(--accent-c); }
.limits h4{ text-transform:none; letter-spacing:0; font-size:1.04rem; color: var(--fg); font-weight:600; margin-bottom:.3rem; }
.limits p{ color: var(--fg-dim); font-size:.96rem; }

/* — planos de preço — */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.2rem,2.6vw,1.8rem); align-items:stretch; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; max-width:26rem; margin-inline:auto; } }
.plan-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(1.8rem,2.8vw,2.4rem); }
.plan-card.featured{ border-color: var(--accent-c); background: var(--surface-2); box-shadow: 0 0 0 1px var(--accent-c); }
.plan-badge{ position:absolute; top:-.8rem; left: clamp(1.8rem,2.8vw,2.4rem); background: var(--accent-c); color: var(--btn-fg); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .8rem; border-radius: var(--radius-pill); }
.plan-name{ font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); }
.plan-tagline{ margin-top:.5rem; color: var(--fg); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.plan-price{ display:flex; align-items:baseline; gap:.4rem; margin-top:1.4rem; }
.plan-price .num{ font-size: clamp(2.2rem,3vw,2.8rem); font-weight:700; color: var(--fg); line-height:1; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.plan-price .unit{ font-size:.9rem; color: var(--fg-mute); }
.plan-features{ list-style:none; margin: 1.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.plan-features li{ display:flex; gap:.7rem; font-size:.94rem; color: var(--fg-dim); line-height:1.45; }
.plan-features svg{ width:16px; height:16px; flex:none; margin-top:.15rem; color: var(--accent-c); }
.plan-card .btn{ margin-top:1.8rem; justify-content:center; width:100%; }

.plans-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap: clamp(.6rem,1.4vw,1.8rem); }
.plans-4 .plan-card{ padding: clamp(1rem,1.6vw,2.4rem); min-width:0; }
.plans-4 .plan-price .num{ font-size: clamp(1.4rem,1.8vw,2.8rem); }
.plans-4 .plan-card .btn{ padding-inline: clamp(.6rem,1.6vw,1.6rem); font-size: clamp(.78rem,1vw,.95rem); white-space:normal; }
/* abaixo de 900px, mantém as 4 numa só linha com scroll horizontal em vez de espremer o texto */
@media (max-width:900px){
  .plans-4{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(240px,78vw);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .plans-4 .plan-card{ scroll-snap-align:start; }
  .plans-4 .plan-card .btn{ font-size:.94rem; padding-inline: clamp(1rem,3vw,1.6rem); white-space:nowrap; }
  .plans-4 .plan-price .num{ font-size: clamp(2rem,5vw,2.8rem); }
}
.plan-launch-tag{ position:absolute; top:-.8rem; right: clamp(1.4rem,2.4vw,2rem); background: var(--bronze-soft); color:#1b1409; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.32rem .7rem; border-radius: var(--radius-pill); }
.plan-price .was{ font-size:1.15rem; font-weight:500; color: var(--fg-mute); text-decoration: line-through; text-decoration-thickness: 1px; }

@media (min-width:901px){
  .plans-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:52rem; margin-inline:auto; }
}

/* — FAQ — */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.5rem; font-weight:600; font-size: clamp(1.05rem,1.4vw,1.25rem); color: var(--fg); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-size:1.3rem; color: var(--fg-mute); transition: transform .25s ease; flex:none; font-weight:400; }
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-a{ padding-bottom:1.6rem; max-width:42rem; color: var(--fg-dim); }

/* — pessoas — */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.5rem,3vw,3rem); }
@media (max-width:720px){ .people{ grid-template-columns:1fr; } }
.person{ border-top:1px solid var(--line-strong); padding-top:1.6rem; }
.person .name{ font-weight:700; font-size:1.4rem; color: var(--fg); letter-spacing:-.01em; }
.person .role{ font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); margin-top:.3rem; }
.person p{ margin-top:1rem; color: var(--fg-dim); font-size:.98rem; max-width:32rem; }

/* — faixa CTA final — */
.cta-band{ text-align:center; }
.cta-band .wrap{ display:flex; flex-direction:column; align-items:center; gap:1.8rem; }
.cta-band h2{ max-width:20ch; }
.cta-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.cta-checks li{ color: var(--fg-dim); font-size:1rem; display:flex; gap:.6rem; }
.cta-checks li::before{ content:"—"; color: var(--accent-c); }

/* — rodapé — */
.site-footer{ padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h5{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-mute); margin:0 0 1.1rem; font-weight:600; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.footer-grid a{ color: var(--fg-dim); font-size:.92rem; transition: color .2s ease; }
.footer-grid a:hover{ color: var(--fg); }
.footer-brand p{ color: var(--fg-mute); font-size:.88rem; max-width:26ch; margin-top:1rem; }
.footer-bottom{ margin-top: clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color: var(--fg-mute); }

/* — caso de sucesso: barras de métricas — */
.metric-row{ display:flex; align-items:center; gap:.9rem; margin-top:1.1rem; }
.metric-row-label{ width:5.2rem; flex:none; font-size:.86rem; color: var(--fg-dim); }
.metric-row-bar{ flex:1; height:8px; border-radius: var(--radius-pill); background: var(--line); overflow:hidden; }
.metric-row-fill{ display:block; height:100%; border-radius: var(--radius-pill); background: var(--accent-c); }
.metric-row-value{ width:3rem; flex:none; text-align:right; font-weight:700; color: var(--fg); font-variant-numeric: tabular-nums; font-size:.9rem; }

/* — marcas parceiras — */
.logos-section{ padding-block: clamp(2.4rem,5vw,3.6rem); }
.logos-kicker{ text-align:center; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); margin: 0 0 1.6rem; }
.logos-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(.8rem,2vw,1.3rem); }
.logo-tile{ width:108px; height:108px; flex:none; border-radius: var(--radius-s); background: var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:.9rem; }
.logo-tile img{ width:100%; height:100%; object-fit:contain; }
.logo-tile-dark{ background: var(--card-dark); border-color: rgba(255,255,255,.12); }
@media (max-width:640px){ .logo-tile{ width:84px; height:84px; padding:.7rem; } }

.logos-marquee{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-track{
  display:flex; align-items:center; gap: clamp(.8rem,2vw,1.3rem); width:max-content;
  animation: logos-scroll 34s linear infinite;
}
.logos-marquee:hover .logos-track{ animation-play-state: paused; }
@keyframes logos-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .logos-track{ animation: none; flex-wrap:wrap; width:100%; justify-content:center; }
  .logos-track .logo-tile[aria-hidden="true"]{ display:none; }
}

/* — utilidades — */
.text-mute{ color: var(--fg-mute); }
.small{ font-size:.88rem; }
.center{ text-align:center; }
.mt-l{ margin-top:3rem; }
.mono-tag{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); border:1px solid var(--line-strong); border-radius: var(--radius-pill); padding:.35rem .8rem; display:inline-block; }

/* — conteúdo bloqueado: mostra o início, desfoca o resto atrás de um CTA — */
.strategy-locked{ position:relative; max-height: 420px; overflow:hidden; border-radius: var(--radius); margin-top: clamp(1.4rem,3vw,2.2rem); }
.strategy-locked-content{ filter: blur(7px); pointer-events:none; user-select:none; }
.strategy-locked::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 74%);
}
.strategy-unlock{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  text-align:center; padding: 0 var(--gutter) clamp(2rem,4vw,3rem);
}
.strategy-unlock .mark{ color: var(--accent-c); }
.strategy-teaser{ text-align:center; padding-bottom: clamp(1rem,2vw,1.6rem); }
.strategy-teaser .wrap{ display:flex; flex-direction:column; align-items:center; }
.strategy-teaser .eyebrow{ justify-content:center; }
.strategy-teaser h3{ margin-inline:auto; max-width:34rem; font-size: clamp(1.4rem,2vw,1.9rem); }
.strategy-teaser .lede{ margin-inline:auto; margin-top:.8rem; max-width:34rem; }

/* — versão XL: bloqueia uma página inteira atrás de um só CTA — */
.strategy-locked-xl{ margin-top:0; border-radius:0; max-height: clamp(560px, 62vw, 820px); }
.strategy-locked-xl .strategy-locked-content{ filter: blur(10px); }
.strategy-locked-xl.strategy-locked::after{ background: linear-gradient(180deg, transparent 0%, var(--bg) 62%); }
.strategy-unlock-xl{ padding-block: clamp(2.5rem,5vw,4rem) clamp(1rem,2vw,1.5rem); }
.strategy-unlock-xl .eyebrow{ margin-bottom:.6rem; }
.strategy-unlock-xl h2{ max-width: 30rem; margin-inline:auto; }

/* — assistente de chat — */
.chat-widget{ position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 60; }
.chat-bubble-btn{
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bronze-soft); color: #1b1409;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--bronze-glow),.5);
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0; transform: scale(.7) translateY(8px); pointer-events: none;
}
.chat-bubble-btn.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.chat-bubble-btn:hover{ transform: translateY(-2px); }
.chat-bubble-btn svg{ width: 24px; height: 24px; }
.chat-bubble-btn .ico-close{ display: none; }
.chat-widget.is-open .chat-bubble-btn .ico-chat{ display: none; }
.chat-widget.is-open .chat-bubble-btn .ico-close{ display: block; }
.chat-panel{
  position: absolute; right: 0; bottom: calc(100% + 16px);
  width: min(380px, calc(100vw - 2.4rem));
  height: min(560px, calc(100vh - 8rem));
  background: rgba(15,14,13,.92);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(var(--bronze-glow),.28);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: scale(.94) translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: bottom right;
}
.chat-widget.is-open .chat-panel{ opacity: 1; transform: none; pointer-events: auto; }

.chat-head{
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1);
  flex: none;
}
.chat-head .ring{ width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bronze-soft); position: relative; flex: none; }
.chat-head .ring::after{ content:""; position:absolute; inset: 9px; border-radius: 50%; background: var(--bronze-soft); }
.chat-head .who{ display: flex; flex-direction: column; line-height: 1.25; }
.chat-head .who strong{ color: #fff; font-size: .92rem; font-weight: 700; }
.chat-head .who span{ color: rgba(255,255,255,.55); font-size: .74rem; }

.chat-log{
  flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.chat-msg{ display: flex; }
.chat-msg.from-user{ justify-content: flex-end; }
.chat-msg .bubble{
  max-width: 84%; padding: .65rem .95rem; border-radius: 16px;
  font-size: .89rem; line-height: 1.5; white-space: pre-wrap;
}
.chat-msg.from-bot .bubble{ background: rgba(255,255,255,.07); color: #f1efec; border-bottom-left-radius: 4px; }
.chat-msg.from-user .bubble{ background: var(--bronze-soft); color: #1b1409; border-bottom-right-radius: 4px; }
.chat-msg.is-thinking .bubble{ color: rgba(255,255,255,.5); font-style: italic; }
.chat-msg .bubble a{ color: var(--bronze-soft); text-decoration: underline; }
.chat-msg.from-user .bubble a{ color: #1b1409; }

.chat-note{ padding: .5rem 1.2rem; font-size: .72rem; color: rgba(255,255,255,.4); text-align: center; flex: none; }
.chat-note a{ color: rgba(255,255,255,.6); }

.chat-form{ display: flex; gap: .6rem; padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.1); flex: none; }
.chat-form textarea{
  flex: 1; resize: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; color: #fff; font: inherit; font-size: .88rem; padding: .6rem .75rem;
  max-height: 90px; font-family: var(--font);
}
.chat-form textarea:focus{ outline: none; border-color: var(--bronze-soft); }
.chat-form button{
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--bronze-soft);
  color: #1b1409; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: opacity .2s ease;
}
.chat-form button:disabled{ opacity: .4; cursor: default; }
.chat-form button svg{ width: 15px; height: 15px; }

@media (max-width: 480px){
  .chat-panel{ width: calc(100vw - 1.6rem); }
}

/* — diagramas (pirâmide 80/20, círculos da essência) — */
.diagram{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; margin: 0 auto clamp(2.8rem,5vw,4.5rem); max-width: 30rem; }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram-caption{ text-align:center; color: var(--fg-dim); font-size:1.05rem; font-style:italic; max-width:30rem; }

/* — página interna: cabeçalho de página — */
.page-hero{ padding-top: clamp(3rem,6vw,4.5rem); padding-bottom: clamp(2.4rem,4vw,3.2rem); text-align:center; }
.page-hero h1{ max-width:19ch; margin-inline:auto; }
.page-hero .lede{ margin-inline:auto; margin-top:1.2rem; }
.breadcrumb{ font-size:.82rem; color: var(--fg-mute); margin-bottom:1.2rem; }
.breadcrumb span{ color: var(--fg); }

/* — revelar ao scroll: as coisas aparecem devagar, à medida que se desce — */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; opacity: 1; transform: none; }
}

/* — formulário de diagnóstico — */
.diag-form{ display:flex; flex-direction:column; gap:1.3rem; text-align:left; }
.form-row{ display:flex; flex-direction:column; gap:.5rem; }
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form-row.two > div{ display:flex; flex-direction:column; gap:.5rem; }
@media (max-width:560px){ .form-row.two{ grid-template-columns:1fr; } }
.diag-form label{ font-size:.82rem; font-weight:600; color: var(--fg-dim); }
.diag-form input, .diag-form select, .diag-form textarea{
  font: inherit; font-size:.96rem; color: var(--fg);
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-s);
  padding:.8rem 1rem; width:100%; appearance:none;
}
.diag-form select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position: right 1rem center; background-size:14px; padding-right:2.6rem;
}
.diag-form textarea{ resize:vertical; min-height:5.5rem; }
.diag-form input:focus, .diag-form select:focus, .diag-form textarea:focus{ outline:none; border-color: var(--accent-c); }
.diag-form input::placeholder, .diag-form textarea::placeholder{ color: var(--fg-mute); }
.diag-form .form-note{ text-align:center; margin-top:.9rem; }

/* — diagnóstico em passos — */
.diag-progress-bar{ height:3px; border-radius:2px; background: var(--line); overflow:hidden; margin-bottom:.6rem; }
.diag-progress-fill{ display:block; height:100%; width:0%; border-radius:2px; background: var(--accent-c); transition: width .35s ease; }
.diag-progress-label{ font-size:.76rem; color: var(--fg-mute); margin:0 0 1.6rem; }
.diag-step-title{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--fg-mute); margin:0 0 1.3rem; }
.diag-panel{ display:flex; flex-direction:column; gap:1.3rem; }
.diag-panel[hidden]{ display:none; }
.diag-options{ display:flex; flex-direction:column; gap:.6rem; }
.diag-option{
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 1rem; border:1px solid var(--line); border-radius: var(--radius-s);
  cursor:pointer; font-size:.94rem; color: var(--fg-dim);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.diag-option:hover{ border-color: var(--line-strong); }
.diag-option:has(input:checked){ border-color: var(--accent-c); background: var(--surface-2); color: var(--fg); }
.diag-option input{ width:16px; height:16px; accent-color: var(--accent-c); flex:none; }
.diag-result{ text-align:center; }
.diag-result .eyebrow{ justify-content:center; }
.diag-result-title{ margin-top:.6rem; }
.diag-result-text{ margin-inline:auto; margin-top:.8rem; }

/* Preços em vidro escuro (Apollo Studio) */
.plans-glass{ position:relative; isolation:isolate; }
.plans-glass .plan-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
.plans-glass .plan-card.featured{
  background: linear-gradient(180deg, rgba(184,115,51,.22), rgba(255,255,255,.03));
  border-color: rgba(184,115,51,.7);
  box-shadow: 0 0 0 1px rgba(184,115,51,.45), 0 30px 90px -20px rgba(184,115,51,.55);
}
.plans-glass .plan-card .btn-ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.plans-glass .plan-features svg{ color: var(--accent-c); }
.plans-glass .plan-price .num{ font-size: clamp(2.6rem,3.4vw,3.2rem); }
.plans-glass::before{
  content:""; position:absolute; inset:-10% 0 auto 0; height:70%; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 40%, rgba(184,115,51,.28), transparent 70%);
  filter: blur(30px);
}

/* Conteúdo do cartão por cima da auréola (cartão é flex: z-index funciona nos filhos) */
.plans-glass .plan-card > :not(.halo){ z-index:1; }

/* Auréola rotativa ao passar o rato: anel azul que roda à volta do retângulo; brilho exterior desfocado */
.plans-glass .halo{
  position:absolute; inset:-1px; padding:1px; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:-1;
  opacity:0; transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plans-glass .halo.brilho{ inset:-14px; padding:14px; filter: blur(18px); }
.plans-glass .halo-giro{
  position:absolute; left:50%; top:50%; width:300%; aspect-ratio:1; translate:-50% -50%;
  background: conic-gradient(from 0deg, transparent 0deg 160deg, #f97316 225deg, #fbbf24 275deg, #f97316 330deg, transparent 390deg);
  animation: halo-girar 2.6s linear infinite;
  /* Vence a regra global de "reduzir movimento" acima: é a rotação pedida no hover. */
  animation-duration: 2.6s !important; animation-iteration-count: infinite !important;
}
.plans-glass .plan-card:hover .halo{ opacity:1; }
.plans-glass .plan-card:hover .halo.brilho{ opacity:.75; }
@keyframes halo-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* — mockup "scorecard": amostra visual do Diagnóstico Estratégico — */
.scorecard-frame{ aspect-ratio:auto; max-width:24rem; margin: clamp(2rem,4vw,2.8rem) auto 0; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.scorecard-frame .portal-window{ background:#000; }
.scorecard-body{ padding: clamp(1.4rem,3vw,1.9rem) clamp(1.4rem,3vw,1.8rem); display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.scorecard-title{ font-size:1.05rem; margin-top:.3rem; }
.scorecard-gauge{ margin-top:1rem; }
.scorecard-bars{ width:100%; margin-top:.6rem; }
.scorecard-bars .metric-row{ margin-top:.65rem; }
.scorecard-bars .metric-row-label{ width:1.6rem; font-size:.74rem; color: var(--accent-c); font-weight:700; }
.scorecard-priorities{ width:100%; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.scorecard-priorities-label{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-mute); }
.scorecard-priorities ul{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.scorecard-priorities li{ display:flex; align-items:center; gap:.6rem; }
.scorecard-priorities .n{ font-size:.68rem; font-weight:700; color: var(--fg-mute); flex:none; }
.scorecard-priorities .bar-placeholder{ display:block; height:7px; border-radius: var(--radius-pill); background: var(--line-strong); }
.scorecard-caption{ margin-top:1rem; text-align:center; margin-inline:auto; }