/* =========================================================================
   Komunick — folha de estilo principal
   Paleta: verde da marca + branco + tons de preto
   ========================================================================= */

:root{
  /* verde da marca, extraído do logotipo */
  --green:        #3FAE35;
  --green-bright: #5AD04C;
  --green-deep:   #23801C;   /* 5:1 sobre branco (o #268A1F dava 4,4:1, abaixo do mínimo) */
  --on-green:     #062A07;   /* 7:1 sobre o verde da marca */

  /* pretos */
  --ink-900: #060806;
  --ink-800: #0F1310;
  --ink-700: #171C18;

  /* claros */
  --white:  #FFFFFF;
  --mist:   #F5F8F5;
  --line:   #DEE5DE;

  /* texto */
  --tx-on-dark:      #FFFFFF;
  --tx-on-dark-soft: #A9B5AC;
  --tx-on-light:     #10150F;
  --tx-on-light-soft:#525B53;

  --shell: 1200px;
  /* As páginas novas (briefing, montador e assinatura) usam estes dois
     raios menores; aqui eles seguem o arredondado da casa. */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-card: 0 1px 2px rgba(6,8,6,.05), 0 12px 32px -12px rgba(6,8,6,.14);
  --shadow-lift: 0 2px 4px rgba(6,8,6,.06), 0 28px 60px -20px rgba(6,8,6,.24);
  --shadow-green: 0 12px 30px -10px rgba(63,174,53,.55);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ------------------------------- reset -------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--tx-on-light);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(63,174,53,.16);
}
img,svg,video{ display:block; max-width:100%; }
/* display de classe vence o atributo hidden do HTML; sem isto um
   elemento escondido pelo JS continua aparecendo na tela. */
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.022em; font-weight:800; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--green-bright);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:16px; top:-120px; z-index:200;
  background:var(--green); color:var(--on-green); font-weight:700;
  padding:12px 20px; border-radius:var(--r-pill);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ------------------------------- layout ------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}
.shell--narrow{ max-width:820px; }

.section{
  position:relative;
  padding-block:clamp(72px, 9vw, 128px);
}
.section--light{ background:var(--white); color:var(--tx-on-light); }
.section--dark{ background:var(--ink-900); color:var(--tx-on-dark); }

.section-head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.section-title{
  font-size:clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
  margin-bottom:18px;
}
.section-lead{
  font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color:var(--tx-on-light-soft);
  max-width:62ch;
}
.section--dark .section-lead,
.section--cta .section-lead{ color:var(--tx-on-dark-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:currentColor; opacity:.85;
}
.eyebrow--dark{ color:var(--green-deep); }

/* ------------------------------ buttons ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             box-shadow .25s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-sm{ padding:10px 18px; font-size:.9rem; }
.btn-lg{ padding:16px 32px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-primary{
  background:var(--green); color:var(--on-green);
  box-shadow:var(--shadow-green);
}
.btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(8px);
}
/* No toque o :hover fica preso depois do tap, então o realce em relevo só
   existe onde há mouse de verdade. */
@media (hover:hover){
  .btn-primary:hover{ background:var(--green-bright); transform:translateY(-2px); }
  .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
}
.btn:active{ transform:translateY(1px) scale(.985); }

/* ------------------------------- header ------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
/* .94 e não .82: com o fundo mais transparente, o desfoque sobre as seções
   brancas deixava o cabeçalho cinza em vez de preto. */
.site-header.is-stuck{
  background:rgba(6,8,6,.94);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.09);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:78px;
}

.brand{ display:flex; align-items:center; flex:0 0 auto; min-height:44px; }
.brand-logo{
  width:auto; height:30px;
}
.site-header .brand-logo{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.45)); }

/* Manrope é larga: sem proibir a quebra dentro do item, "Falar com a
   gente" quebraria em duas linhas quando a tela aperta. */
.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.nav > a:not(.btn){
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.82);
  position:relative; padding-block:6px; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green-bright); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
@media (hover:hover){
  .nav > a:not(.btn):hover{ color:#fff; }
  .nav > a:not(.btn):hover::after{ transform:scaleX(1); }
}

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:#fff;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------- fundo em vídeo -------------------------- */
.media-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--ink-900); }
.section--ia .media-bg{ background:var(--mist); }
.media-bg__poster,
.media-bg__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media-bg__video{ opacity:0; transition:opacity .8s var(--ease); }
.media-bg__video.is-live{ opacity:1; }
.media-bg__scrim{ position:absolute; inset:0; }

.media-bg__scrim--hero{
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(6,8,6,0) 0%, rgba(6,8,6,.55) 62%, rgba(6,8,6,.9) 100%),
    linear-gradient(180deg, rgba(6,8,6,.9) 0%, rgba(6,8,6,.35) 26%, rgba(6,8,6,.55) 68%, var(--ink-900) 100%);
}
.media-bg__scrim--ia{
  background:
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 40%,
                    rgba(255,255,255,.55) 62%, rgba(255,255,255,.25) 100%),
    linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,0) 16%,
                    rgba(255,255,255,0) 84%, var(--white) 100%);
}

/* -------------------------------- hero -------------------------------- */
.hero{
  position:relative;
  min-height:min(100svh, 900px);
  display:flex; align-items:center;
  padding-block:clamp(140px,17vh,190px) clamp(96px,12vh,140px);
  color:var(--tx-on-dark);
  background:var(--ink-900);
  isolation:isolate;
}
.hero-inner{ position:relative; z-index:1; max-width:900px; }
.hero-title{
  font-size:clamp(2.35rem, 1.2rem + 4.9vw, 4.5rem);
  letter-spacing:-.032em;
  margin-bottom:24px;
  text-wrap:balance;
}
.hero-title em{
  font-style:normal;
  color:var(--green-bright);
  position:relative;
  white-space:nowrap;
}
.hero-title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.1em;
  border-radius:4px;
  background:linear-gradient(90deg, var(--green) 0%, rgba(90,208,76,0) 100%);
  opacity:.55;
}
.hero-lead{
  font-size:clamp(1.06rem, 1rem + .5vw, 1.3rem);
  color:rgba(255,255,255,.8);
  max-width:60ch;
  margin-bottom:38px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }

.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-tags li{
  font-size:.86rem; font-weight:600;
  color:rgba(255,255,255,.78);
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}

.hero-scroll{
  position:absolute; left:50%; bottom:26px; z-index:1;
  transform:translateX(-50%);
  width:26px; height:42px; border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.32);
  display:grid; place-items:start center; padding-top:8px;
}
.hero-scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--green-bright);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:1; }
  55%    { transform:translateY(14px); opacity:.15; }
}

/* ------------------------------- cards -------------------------------- */
.cards{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(4,1fr); } }
.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px 34px;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:#C9D6C9; }
}
.card h3{
  font-size:1.22rem; margin-bottom:12px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.card p{ color:var(--tx-on-light-soft); font-size:.985rem; }

.card-icon{
  width:52px; height:52px; margin-bottom:22px;
  border-radius:15px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(63,174,53,.16), rgba(63,174,53,.05));
  color:var(--green-deep);
  border:1px solid rgba(63,174,53,.2);
}
.card-icon svg{ width:26px; height:26px; }

.card--accent{
  background:linear-gradient(165deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-color:rgba(63,174,53,.4);
  color:var(--tx-on-dark);
}
.card--accent p{ color:rgba(255,255,255,.76); }
.card--accent .card-icon{
  background:linear-gradient(150deg, rgba(90,208,76,.24), rgba(90,208,76,.06));
  border-color:rgba(90,208,76,.35);
  color:var(--green-bright);
}
@media (hover:hover){ .card--accent:hover{ border-color:var(--green); } }

.tag{
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(90,208,76,.16); color:var(--green-bright);
  border:1px solid rgba(90,208,76,.3);
}

/* --------------------------- seção de IA ------------------------------ */
.section--ia{
  background:var(--white);
  color:var(--tx-on-light);
  isolation:isolate;
  overflow:hidden;
}
.ia-inner{ position:relative; z-index:1; }
.ia-copy{ max-width:640px; }
.ia-list{ display:grid; gap:20px; margin:36px 0 40px; }
.ia-list li{
  position:relative;
  padding-left:42px;
  color:var(--tx-on-light-soft);
  font-size:.99rem;
}
.ia-list strong{
  display:block;
  color:var(--tx-on-light);
  font-size:1.06rem; font-weight:700;
  margin-bottom:4px; letter-spacing:-.015em;
}
.ia-list li::before{
  content:""; position:absolute; left:0; top:3px;
  width:26px; height:26px; border-radius:50%;
  background:var(--green);
  box-shadow:0 6px 16px -6px rgba(63,174,53,.7);
}
.ia-list li::after{
  content:""; position:absolute; left:8.5px; top:11px;
  width:9px; height:5px;
  border-left:2.2px solid #fff; border-bottom:2.2px solid #fff;
  transform:rotate(-45deg);
}

/* ------------------------------- passos ------------------------------- */
.steps{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  counter-reset:step;
}
.step{
  position:relative;
  padding:30px 26px 32px;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
@media (hover:hover){ .step:hover{ transform:translateY(-4px); background:var(--white); } }
.step-num{
  display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:20px;
  border-radius:13px;
  background:var(--ink-900); color:var(--green-bright);
  font-weight:800; font-size:1.05rem;
}
.step h3{ font-size:1.12rem; margin-bottom:10px; }
.step p{ color:var(--tx-on-light-soft); font-size:.95rem; }

/* ------------------------------ motivos ------------------------------- */
.section--dark{ position:relative; overflow:hidden; }
.section--dark::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 12% 0%, rgba(63,174,53,.16) 0%, transparent 60%),
    radial-gradient(50% 55% at 92% 100%, rgba(63,174,53,.11) 0%, transparent 62%);
  pointer-events:none;
}
.section--dark .shell{ position:relative; z-index:1; }

.reasons{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.reason{
  background:var(--ink-900);
  padding:32px 30px 34px;
  transition:background-color .3s var(--ease);
}
@media (hover:hover){ .reason:hover{ background:var(--ink-800); } }
.reason h3{
  font-size:1.08rem; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.reason h3::before{
  content:""; flex:0 0 auto;
  width:8px; height:8px; border-radius:50%;
  background:var(--green-bright);
  box-shadow:0 0 0 4px rgba(90,208,76,.16);
}
.reason p{ color:var(--tx-on-dark-soft); font-size:.94rem; }

/* ---------------------------- super página ---------------------------- */
.motivos-lp{
  display:grid; gap:20px;
  grid-template-columns:1fr;
  margin-bottom:clamp(40px,5vw,60px);
}
/* explícito em vez de auto-fit: com três itens o auto-fit criava uma quarta
   coluna vazia e o cálculo estourava a largura do contêiner */
@media (min-width:860px){ .motivos-lp{ grid-template-columns:repeat(3,1fr); } }
.motivos-lp li{
  position:relative;
  padding:22px 24px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.035);
  color:var(--tx-on-dark-soft);
  font-size:.95rem;
}
.motivos-lp strong{
  display:block; margin-bottom:8px;
  color:#fff; font-size:1.02rem; font-weight:700; letter-spacing:-.015em;
}

.lp-galeria{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:660px){ .lp-galeria{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .lp-galeria{ grid-template-columns:repeat(3,1fr); } }

.lp-card{ margin:0; }

/* moldura de navegador: o print é entendido na hora como "site no ar" */
.lp-janela{
  border-radius:14px; overflow:hidden;
  background:var(--ink-800);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-barra{
  display:flex; align-items:center; gap:6px;
  height:28px; padding-inline:12px;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lp-barra i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26); }
.lp-janela img{
  width:100%; height:auto; aspect-ratio:1440/900; object-fit:cover; object-position:top center;
  background:var(--ink-700);
}
@media (hover:hover){
  .lp-card:hover .lp-janela{
    transform:translateY(-5px);
    border-color:rgba(90,208,76,.55);
    box-shadow:0 26px 54px -22px rgba(0,0,0,.95);
  }
}

.lp-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:18px 26px; text-align:center;
  margin-top:clamp(40px,5vw,60px);
  padding-top:clamp(32px,4vw,44px);
  border-top:1px solid rgba(255,255,255,.1);
}
.lp-cta p{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); font-weight:600; color:#fff; }
/* A frase ocupa a linha inteira e os dois botões ficam juntos embaixo:
   antes, frase e botões dividiam a mesma linha e o segundo botão caía
   sozinho na linha de baixo. */
.lp-cta p{ flex:1 1 100%; }
.lp-cta__botoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

@media (max-width:640px){
  .motivos-lp{ gap:12px; margin-bottom:34px; }
  .motivos-lp li{ padding:18px 20px 20px; }
  .lp-galeria{ gap:18px; }
  .lp-cta{ margin-top:34px; padding-top:28px; }
  .lp-cta__botoes{ width:100%; }
  .lp-cta .btn{ width:100%; }
}

.sem-quebra{ white-space:nowrap; }

/* -------------------------------- FAQ --------------------------------- */
.faq{ display:grid; gap:12px; }
.faq details{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq details[open]{ background:var(--white); border-color:rgba(63,174,53,.4); box-shadow:var(--shadow-card); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:20px 58px 20px 24px;
  font-weight:700; font-size:1.03rem; letter-spacing:-.015em;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.4px solid var(--green-deep);
  border-bottom:2.4px solid var(--green-deep);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-body{ padding:0 24px 22px; }
.faq-body p{ color:var(--tx-on-light-soft); font-size:.97rem; }

/* ------------------------------ contato ------------------------------- */
.section--cta{
  color:var(--tx-on-dark);
  background:
    radial-gradient(75% 90% at 8% 8%, rgba(63,174,53,.28) 0%, transparent 58%),
    radial-gradient(65% 80% at 100% 100%, rgba(38,138,31,.3) 0%, transparent 60%),
    var(--ink-900);
}
.contato-inner{
  display:grid; gap:clamp(36px,5vw,64px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .contato-inner{ grid-template-columns:1fr minmax(430px,.9fr); }
}
.contato-links{ display:grid; gap:12px; margin-top:36px; }
.contato-link{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
@media (hover:hover){
  .contato-link:hover{ border-color:var(--green-bright); background:rgba(255,255,255,.09); transform:translateX(4px); }
}
.contato-link__ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(90,208,76,.16); color:var(--green-bright);
}
.contato-link__ico svg{ width:22px; height:22px; }
.contato-link span:last-child{ display:flex; flex-direction:column; font-size:.9rem; color:var(--tx-on-dark-soft); line-height:1.4; }
.contato-link strong{ font-size:1rem; color:#fff; letter-spacing:-.015em; }

.form-wrap{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,36px);
  backdrop-filter:blur(14px);
}
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.field label{ font-size:.88rem; font-weight:600; color:rgba(255,255,255,.85); }
.field .opt{ color:var(--tx-on-dark-soft); font-weight:500; }

.field input,
.field textarea,
.field select{
  width:100%;
  padding:13px 16px;
  background:rgba(6,8,6,.5);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  font-size:1rem;              /* 16px: abaixo disso o iOS dá zoom ao focar */
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.46); }
.field input:focus,
.field textarea:focus,
.field select:focus{ border-color:var(--green-bright); background:rgba(6,8,6,.72); }
.field select option{ background:var(--ink-800); color:#fff; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; padding-right:44px; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:18px; top:50%; margin-top:-5px;
  width:9px; height:9px;
  border-right:2.2px solid var(--green-bright);
  border-bottom:2.2px solid var(--green-bright);
  transform:rotate(45deg); pointer-events:none;
}

.field-error{ font-size:.82rem; color:#FF8E7A; min-height:0; }
.field.is-invalid input{ border-color:#FF8E7A; }
.form-note{ font-size:.82rem; color:var(--tx-on-dark-soft); text-align:center; }
.form-status{
  padding:12px 16px; border-radius:12px; font-size:.92rem; font-weight:600;
  background:rgba(90,208,76,.14); border:1px solid rgba(90,208,76,.35); color:var(--green-bright);
}

/* ------------------------------- rodapé ------------------------------- */
.site-footer{
  background:var(--ink-900);
  color:var(--tx-on-dark);
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:clamp(52px,6vw,76px);
}
.footer-inner{
  display:grid; gap:44px;
  grid-template-columns:1fr;
  padding-bottom:44px;
}
@media (min-width:840px){ .footer-inner{ grid-template-columns:1.1fr 1.6fr; } }
.footer-brand .brand{ min-height:0; }
.footer-brand .brand-logo{ height:28px; margin-bottom:18px; }
.footer-brand p{ color:var(--tx-on-dark-soft); font-size:.94rem; max-width:38ch; }

.footer-nav{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.footer-nav h4{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:16px; font-weight:700;
}
.footer-nav a{
  display:block; font-size:.94rem; color:var(--tx-on-dark-soft);
  padding-block:10px; transition:color .2s var(--ease);
}
@media (hover:hover){ .footer-nav a:hover{ color:#fff; } }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.86rem; color:var(--tx-on-dark-soft);
}
.footer-made{ color:rgba(255,255,255,.45); }

/* ------------------------- página de briefing ------------------------- */
/* Nas páginas internas o cabeçalho entra no fluxo e fica escuro o tempo
   todo: o main.js tira a classe .is-stuck no topo da rolagem, e sobre a
   seção clara isso deixaria o menu branco invisível. */
.pagina-interna .site-header{
  position:sticky;
  background:rgba(6,8,6,.96) !important;
  border-bottom-color:rgba(255,255,255,.09) !important;
  backdrop-filter:blur(14px) saturate(140%);
}
.interna-topo{ padding-top:clamp(56px, 7vw, 96px); padding-bottom:clamp(48px,6vw,72px); }
.brief-passos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.brief-passos li{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.86rem; font-weight:500; letter-spacing:-.02em;
  color:var(--tx-on-light-soft);
  padding:9px 14px 9px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--mist);
}
.brief-passos span{
  display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-xs);
  background:var(--ink-900); color:var(--green-bright); font-size:.8rem;
}
.brief-ver{ margin-top:22px; font-size:.95rem; color:var(--tx-on-light-soft); }
.brief-ver a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; }

.brief .form-wrap{ max-width:880px; margin-inline:auto; }
.brief-grupo{ border:0; padding:0; margin:0 0 14px; min-width:0; }
.brief-grupo + .brief-grupo{ padding-top:30px; border-top:1px solid rgba(255,255,255,.12); }
.brief-grupo legend{
  display:flex; align-items:center; gap:12px;
  font-size:1.18rem; font-weight:600; letter-spacing:-.02em; color:#fff;
  margin-bottom:22px; padding:0;
}
.brief-num{
  display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--green); color:var(--on-green);
  font-family:var(--font-mono); font-size:.9rem; font-weight:500;
}
.brief-grupo .field + .field{ margin-top:18px; }
.label-chips{ display:block; font-size:.88rem; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:9px; }

/* chips: caixas de marcar e opções únicas com cara de botão, alvo de 44px */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
  background:rgba(6,8,6,.5); color:rgba(255,255,255,.85); font-size:.95rem;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip input:checked + span{ background:var(--green); border-color:var(--green); color:var(--on-green); font-weight:600; }
.chip input:focus-visible + span{ outline:3px solid var(--green-bright); outline-offset:2px; }
@media (hover:hover){ .chip input:not(:checked):hover + span{ border-color:rgba(255,255,255,.4); } }

@media (max-width:640px){
  .interna-topo{ padding-top:44px; }
  .brief-passos{ gap:8px; }
  .brief-passos li{ font-size:.8rem; padding:8px 12px 8px 8px; }
  .brief-grupo + .brief-grupo{ padding-top:24px; }
  .chip span{ padding:10px 14px; font-size:.92rem; }
}

/* ------------------------- montador de Super Página ------------------- */
/* A página é um formulário em cinco passos com uma prévia ao lado. No
   desktop a prévia fica grudada na tela; no celular ela sobe para o topo e
   fica presa lá, porque ver a página mudando é o que sustenta a escolha. */

.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* Agora o montador é a primeira seção da página: o topo dele encosta no
   cabeçalho, então ganha um pouco mais de respiro em cima. */
.montador{ padding-block:clamp(46px,5.5vw,76px) clamp(56px,7vw,88px); }
.montador-grade{
  display:grid; gap:clamp(24px,3vw,40px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:1000px){
  .montador-grade{ grid-template-columns:minmax(0,1fr) minmax(400px,.92fr); }
}
.mont-painel{ min-width:0; }

.mont-retomado{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-bottom:18px; padding:11px 14px;
  border:1px solid rgba(90,208,76,.32); border-radius:var(--r-sm);
  background:rgba(63,174,53,.1);
  font-size:.88rem; color:rgba(255,255,255,.85);
}
/* O mesmo aviso, no formulário de proposta: ali o espaço entre os itens já
   vem do gap da grade do formulário. */
.form > .mont-retomado{ margin-bottom:0; }

/* O cabeçalho das páginas internas fica preso no topo. Quando o formulário
   de proposta rola até a etapa seguinte ou até a revisão (scrollIntoView no
   assinatura.js), o começo delas parava escondido atrás dele. */
#orcCampos, #orcRevisao{ scroll-margin-top:96px; }

/* ------------------------------- trilha ------------------------------- */
.mont-trilha{ display:flex; gap:6px; margin-bottom:26px; }
.mont-trilha li{ flex:1 1 0; min-width:0; }
.mont-trilha button{
  display:block; width:100%; text-align:left;
  padding:9px 0 10px; background:none; border:0; cursor:default;
  border-top:3px solid rgba(255,255,255,.16);
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:-.02em;
  color:rgba(255,255,255,.4);
  transition:color .2s var(--ease), border-color .2s var(--ease);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mont-trilha .is-liberado button{ cursor:pointer; color:rgba(255,255,255,.72); border-top-color:rgba(90,208,76,.45); }
.mont-trilha .is-atual button{ color:#fff; border-top-color:var(--green-bright); }
.mont-trilha b{ font-weight:500; }
.mont-trilha span{ margin-left:5px; }
@media (hover:hover){ .mont-trilha .is-liberado button:hover{ color:#fff; } }

/* ------------------------------- etapas ------------------------------- */
.mont-etapa{ display:none; border:0; padding:0; margin:0; min-width:0; }
.mont-etapa.is-ativa{ display:block; animation:montEntra .32s var(--ease) both; }
@keyframes montEntra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.mont-etapa h2{
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  color:#fff; margin-bottom:8px;
}
.mont-etapa h2:focus:not(:focus-visible){ outline:none; }
.mont-dica{ color:var(--tx-on-dark-soft); font-size:.95rem; margin-bottom:24px; max-width:52ch; }
.mont-campo + .mont-campo{ margin-top:26px; }
.mont-rotulo{
  display:block; font-size:.88rem; font-weight:600; color:rgba(255,255,255,.85);
  margin-bottom:10px;
}
.field.mont-campo .mont-rotulo{ margin-bottom:0; }
.mont-rotulo .opt{ color:var(--tx-on-dark-soft); font-weight:500; }
.mont-ajuda{ font-size:.8rem; color:var(--tx-on-dark-soft); }

/* ------------------------ cartões de escolha -------------------------- */
.opcoes{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:560px){
  .opcoes--2{ grid-template-columns:repeat(2,1fr); }
  .opcoes--3{ grid-template-columns:repeat(3,1fr); }
}
.opcao{ position:relative; display:block; }
.opcao input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.opcao > span{
  display:flex; align-items:center; gap:14px;
  min-height:66px; height:100%; padding:13px 15px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
  background:rgba(6,8,6,.5);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.opcao-texto{ flex:1 1 auto; min-width:0; }
.opcao b{ display:block; font-size:.98rem; font-weight:600; color:#fff; letter-spacing:-.015em; }
.opcao i{ display:block; font-style:normal; font-size:.83rem; color:var(--tx-on-dark-soft); line-height:1.4; margin-top:3px; }
.opcao input:checked + span{ border-color:var(--green); background:rgba(63,174,53,.14); }
.opcao input:focus-visible + span{ outline:3px solid var(--green-bright); outline-offset:2px; }
@media (hover:hover){ .opcao input:not(:checked):hover + span{ border-color:rgba(255,255,255,.4); } }

/* amostra de letra: mostra o estilo antes de marcar */
.opcao-amostra{
  flex:0 0 auto; width:48px; height:44px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:1.15rem; letter-spacing:-.03em;
}
.amostra-limpo{ border-radius:4px; font-weight:600; }
.amostra-moderno{ border-radius:10px; font-weight:700; }
.amostra-elegante{ border-radius:0; font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.amostra-alegre{ border-radius:14px; font-weight:700; }

/* diagrama do topo: três montagens em miniatura */
.opcao-fig{
  flex:0 0 auto; width:48px; height:44px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  display:grid; gap:4px; padding:6px; align-content:start; overflow:hidden;
}
.opcao-fig i{ display:block; height:4px; margin:0; border-radius:1px; background:rgba(255,255,255,.34); }
.fig-foto i:first-child{ height:15px; border-radius:2px; background:var(--green); }
.fig-lado{ grid-template-columns:18px 1fr; grid-template-rows:auto auto; column-gap:5px; align-content:center; }
.fig-lado i:first-child{ grid-row:1 / 3; height:20px; border-radius:2px; background:var(--green); }
.fig-centro{ align-content:center; justify-items:center; }
.fig-centro i{ width:76%; }
.fig-centro i:first-child{ width:52%; height:6px; background:var(--green); }

/* cores da página */
.paletas{ display:flex; flex-wrap:wrap; gap:10px; }
.paleta{ position:relative; }
.paleta input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.paleta > span{
  display:flex; align-items:center; gap:10px;
  min-height:48px; padding:7px 14px 7px 7px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
  background:rgba(6,8,6,.5); color:rgba(255,255,255,.85); font-size:.9rem;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.paleta-bolas{ display:flex; flex:0 0 auto; }
.paleta-bolas i{ display:block; width:18px; height:32px; border-radius:2px; border:1px solid rgba(0,0,0,.3); }
.paleta-bolas i + i{ margin-left:-5px; }
.paleta input:checked + span{ border-color:var(--green); background:rgba(63,174,53,.14); color:#fff; font-weight:600; }
.paleta input:focus-visible + span{ outline:3px solid var(--green-bright); outline-offset:2px; }
@media (hover:hover){ .paleta input:not(:checked):hover + span{ border-color:rgba(255,255,255,.4); } }

/* --------------------- blocos que entram na página -------------------- */
.blocos{ display:grid; gap:8px; }
.bloco-item{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);
  background:rgba(6,8,6,.45);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.bloco-item.is-on{ border-color:rgba(90,208,76,.45); background:rgba(63,174,53,.1); }
.bloco-marca{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:44px; min-width:0; cursor:pointer;
}
.bloco-marca input{ position:absolute; left:0; top:50%; margin:-14px 0 0; width:28px; height:28px; opacity:0; cursor:pointer; }
.bloco-caixa{
  flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r-xs);
  background:rgba(6,8,6,.6);
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
.bloco-caixa::after{
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:2.4px solid var(--on-green); border-bottom:2.4px solid var(--on-green);
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.bloco-marca input:checked + .bloco-caixa{ background:var(--green); border-color:var(--green); }
.bloco-marca input:checked + .bloco-caixa::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.bloco-marca input:focus-visible + .bloco-caixa{ outline:3px solid var(--green-bright); outline-offset:2px; }
.bloco-texto{ min-width:0; }
.bloco-texto b{ display:block; font-size:.96rem; font-weight:600; color:#fff; letter-spacing:-.015em; }
.bloco-texto i{ display:block; font-style:normal; font-size:.82rem; color:var(--tx-on-dark-soft); }
.bloco-mover{ display:flex; gap:4px; }
.bloco-mover button{
  width:36px; height:36px; padding:0; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-xs); color:rgba(255,255,255,.7);
  display:grid; place-items:center;
  transition:background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.bloco-mover button::after{
  content:""; width:8px; height:8px;
  border-left:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(45deg); margin-top:3px;
}
.bloco-mover button[data-dir="baixo"]::after{ transform:rotate(-135deg); margin-top:-3px; }
.bloco-mover button:disabled{ opacity:.28; cursor:default; }
@media (hover:hover){
  .bloco-mover button:not(:disabled):hover{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
}

/* ------------------------- navegação dos passos ----------------------- */
.mont-passos-nav{
  display:flex; align-items:center; gap:12px;
  margin-top:30px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
}
.mont-passos-nav .btn-primary{ flex:1 1 auto; }
.mont-conta{
  order:3; margin-left:auto; flex:0 0 auto;
  font-family:var(--font-mono); font-size:.78rem; color:var(--tx-on-dark-soft);
}
#montEnvio:not(:empty){ margin-top:16px; }
.montador .form-note{ margin-top:16px; }

/* ------------------------------- resumo ------------------------------- */
.mont-resumo{ margin-bottom:26px; border-top:1px solid rgba(255,255,255,.1); }
.mont-resumo > div{
  display:grid; grid-template-columns:minmax(78px,auto) 1fr auto; gap:6px 14px;
  align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.92rem;
}
.mont-resumo span:first-child{ color:var(--tx-on-dark-soft); }
.mont-resumo strong{ color:#fff; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.mont-editar{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--font-mono); font-size:.76rem; color:var(--green-bright);
  text-decoration:underline; text-underline-offset:3px;
}

/* --------------------- ficha e saída para conversa --------------------- */
/* Antes de mandar, o cliente lê o texto exato que vai chegar. É o que tira
   a sensação de caixa-preta de um formulário que escreve por você. */
.mont-ficha{
  margin:0 0 26px; padding:0 0 2px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  background:rgba(6,8,6,.4);
}
.mont-ficha summary{
  list-style:none; cursor:pointer;
  padding:14px 16px; min-height:44px;
  font-family:var(--font-mono); font-size:.8rem; color:rgba(255,255,255,.8);
  display:flex; align-items:center; gap:9px;
}
.mont-ficha summary::-webkit-details-marker{ display:none; }
.mont-ficha summary::before{
  content:""; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid var(--green-bright); border-bottom:2px solid var(--green-bright);
  transform:rotate(-45deg); transition:transform .2s var(--ease);
}
.mont-ficha[open] summary::before{ transform:rotate(45deg); }
.mont-ficha pre{
  margin:0; padding:0 16px 14px;
  max-height:280px; overflow:auto;
  font-family:var(--font-mono); font-size:.78rem; line-height:1.6;
  color:rgba(255,255,255,.72); white-space:pre-wrap; overflow-wrap:anywhere;
}
.mont-ficha .btn{ margin:0 16px 16px; }

.mont-atalho{
  margin-top:16px; text-align:center;
  font-size:.86rem; color:var(--tx-on-dark-soft);
}
.mont-atalho button{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  color:var(--green-bright); font-size:.86rem;
  text-decoration:underline; text-underline-offset:3px;
}

/* ------------------------------- prévia ------------------------------- */
@media (min-width:1000px){
  .mont-previa{ position:sticky; top:96px; }
}
.previa-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap; margin-bottom:12px;
}
.previa-titulo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:-.02em;
  color:var(--green-bright);
}
.previa-titulo::before{ content:""; width:8px; height:8px; background:currentColor; }
.previa-selo{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-on-dark-soft);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-xs);
  padding:3px 7px;
}
.previa-ferramentas{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.previa-dispositivo{
  display:flex; border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm); overflow:hidden;
}
.previa-dispositivo button{
  min-height:36px; padding:6px 13px; cursor:pointer;
  background:transparent; border:0; color:rgba(255,255,255,.6);
  font-family:var(--font-mono); font-size:.75rem;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.previa-dispositivo button[aria-pressed="true"]{ background:var(--green); color:var(--on-green); }
.previa-alternar{
  display:none; min-height:36px; padding:6px 12px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm); color:rgba(255,255,255,.75);
  font-family:var(--font-mono); font-size:.75rem;
}

.previa-janela{
  border-radius:var(--r-sm); overflow:hidden; margin-inline:auto;
  border:1px solid rgba(255,255,255,.16);
  background:var(--ink-800);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.95);
  transition:max-width .3s var(--ease);
}
.previa-janela.e-celular{ max-width:290px; }
.previa-barra{
  display:flex; align-items:center; gap:6px;
  height:30px; padding-inline:12px;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.previa-barra i{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26); }
.previa-barra span{
  flex:1 1 auto; min-width:0; margin-left:8px;
  font-family:var(--font-mono); font-size:.66rem; color:rgba(255,255,255,.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.previa-rolagem{
  height:min(60vh,520px); overflow:auto; overscroll-behavior:contain;
  background:#fff; scrollbar-width:thin;
}
.previa-janela.e-celular .previa-rolagem{ height:min(56vh,470px); }
.previa-nota{ margin-top:12px; font-size:.8rem; color:var(--tx-on-dark-soft); text-align:center; }
.mont-previa.esta-fechada .previa-janela,
.mont-previa.esta-fechada .previa-nota{ display:none; }

/* ---------------- a Super Página em miniatura (tema do cliente) ------- */
/* Tudo aqui dentro usa só as variáveis --pv-*, trocadas pelo JS conforme a
   paleta e o estilo escolhidos. Nenhuma cor da Komunick entra na prévia. */
.pv{
  --pv-fundo:#FFFFFF; --pv-tinta:#121A14; --pv-suave:#5A6A5E;
  --pv-cor:#2E9E4F; --pv-sobre-cor:#04220C; --pv-linha:#E2E9E4; --pv-caixa:#F4F8F5;
  --pv-raio:4px; --pv-titulo:600; --pv-espaco:20px; --pv-fonte:var(--font);
  background:var(--pv-fundo); color:var(--pv-tinta);
  font-family:var(--pv-fonte); font-size:11px; line-height:1.5;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.pv-secao{ padding:var(--pv-espaco) 18px; }
.pv-secao + .pv-secao{ border-top:1px solid var(--pv-linha); }
.pv-secao--caixa{ background:var(--pv-caixa); }
.pv h3{
  font-size:13px; font-weight:var(--pv-titulo); letter-spacing:-.02em;
  line-height:1.25; margin-bottom:8px; color:var(--pv-tinta);
}
.pv p{ color:var(--pv-suave); font-size:10px; }
.pv-abaixo{ margin-top:8px; }
.pv-etiqueta{
  display:inline-block; margin-bottom:6px;
  font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pv-cor); font-weight:700;
}

.pv-menu{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 18px; background:var(--pv-fundo);
  border-bottom:1px solid var(--pv-linha);
}
.pv-marca{ font-size:11px; font-weight:700; letter-spacing:-.02em; color:var(--pv-tinta); }
.pv-menu-botao{
  padding:5px 9px; border-radius:var(--pv-raio);
  background:var(--pv-cor); color:var(--pv-sobre-cor);
  font-size:8px; font-weight:700; white-space:nowrap;
}

.pv-topo{ padding:26px 18px; }
.pv-topo h2{
  font-size:19px; line-height:1.15; letter-spacing:-.03em;
  font-weight:var(--pv-titulo); margin-bottom:8px; color:inherit;
}
.pv-topo p{ font-size:10.5px; margin-bottom:12px; }
.pv-acoes{ display:flex; flex-wrap:wrap; gap:6px; }
.pv-botao{
  display:inline-block; padding:7px 13px; border-radius:var(--pv-raio);
  background:var(--pv-cor); color:var(--pv-sobre-cor); font-size:9px; font-weight:700;
}
.pv-botao--vazio{ background:transparent; color:var(--pv-tinta); border:1px solid var(--pv-linha); }
.pv-topo--foto{ position:relative; }
.pv-topo--foto::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--pv-cor) 0%, var(--pv-tinta) 100%);
  opacity:.92;
}
.pv-topo--foto > *{ position:relative; }
.pv-topo--foto h2{ color:#fff; }
.pv-topo--foto p{ color:rgba(255,255,255,.86); }
.pv-topo--foto .pv-botao{ background:#fff; color:#14181C; }
.pv-topo--foto .pv-botao--vazio{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.pv-topo--lado{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:center; }
.pv-topo--centro{ text-align:center; }
.pv-topo--centro .pv-acoes{ justify-content:center; }
.pv-foto{
  display:block; min-height:78px; border-radius:var(--pv-raio);
  background:linear-gradient(140deg, var(--pv-cor) 0%, var(--pv-tinta) 130%);
  opacity:.85;
}

.pv-lista{ display:grid; gap:8px; }
.pv-lista--3{ grid-template-columns:repeat(3,1fr); }
.pv-cartao{
  padding:10px; border:1px solid var(--pv-linha); border-radius:var(--pv-raio);
  background:var(--pv-fundo);
}
.pv-cartao b{ display:block; margin-bottom:4px; font-size:10px; color:var(--pv-tinta); }
.pv-cartao span{ display:block; font-size:9px; color:var(--pv-suave); }
.pv-ponto{ display:block; width:16px; height:16px; margin-bottom:7px; border-radius:var(--pv-raio); background:var(--pv-cor); opacity:.9; }

.pv-imagens{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pv-imagens i{ display:block; aspect-ratio:1/1; border-radius:var(--pv-raio); background:var(--pv-caixa); border:1px solid var(--pv-linha); }
.pv-imagens i:nth-child(2){ background:linear-gradient(140deg, var(--pv-cor), transparent 120%); opacity:.7; }

.pv-depo{ display:grid; gap:8px; }
.pv-depo > div{ padding:10px; border-left:2px solid var(--pv-cor); background:var(--pv-caixa); border-radius:0 var(--pv-raio) var(--pv-raio) 0; }
.pv-depo p{ font-size:9.5px; font-style:italic; }
.pv-depo b{ display:block; margin-top:5px; font-size:9px; color:var(--pv-tinta); }

.pv-preco{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pv-preco > div{ padding:10px; text-align:center; border:1px solid var(--pv-linha); border-radius:var(--pv-raio); }
.pv-preco > div:nth-child(2){ border-color:var(--pv-cor); }
.pv-preco strong{ display:block; font-size:13px; letter-spacing:-.02em; color:var(--pv-tinta); }
.pv-preco span{ display:block; font-size:8.5px; color:var(--pv-suave); }

.pv-sobre{ display:grid; grid-template-columns:.8fr 1.2fr; gap:14px; align-items:center; }
.pv-sobre .pv-foto{ min-height:66px; }

.pv-duvida{ display:grid; gap:5px; }
.pv-duvida > div{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border:1px solid var(--pv-linha); border-radius:var(--pv-raio);
  font-size:9.5px; color:var(--pv-tinta);
}
.pv-duvida em{ font-style:normal; font-weight:700; color:var(--pv-cor); }

.pv-form{ display:grid; gap:6px; }
.pv-form i{ display:block; height:26px; border:1px solid var(--pv-linha); border-radius:var(--pv-raio); background:var(--pv-fundo); }

.pv-mapa{
  position:relative; height:70px; overflow:hidden;
  border:1px solid var(--pv-linha); border-radius:var(--pv-raio); background:var(--pv-caixa);
}
.pv-mapa::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-11px 0 0 -7px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pv-cor);
}

.pv-final{ text-align:center; }
.pv-final p{ margin-bottom:10px; }
.pv-final .pv-acoes{ justify-content:center; }

.pv-rodape{ padding:14px 18px; background:var(--pv-tinta); color:rgba(255,255,255,.7); font-size:8.5px; }
.pv-rodape b{ display:block; margin-bottom:4px; color:#fff; font-size:10px; }
.pv-vazio{ padding:40px 22px; text-align:center; color:var(--pv-suave); font-size:10px; }

/* pisca quando um bloco entra, para o cliente ver o efeito da escolha */
.pv-novo{ animation:pvNovo .5s var(--ease) both; }
@keyframes pvNovo{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* --------------------------- telas estreitas -------------------------- */
@media (max-width:999px){
  /* A prévia sobe para o topo e fica presa lá: no celular ela precisa estar
     visível enquanto o dedo escolhe as opções logo abaixo. */
  .montador-grade{ grid-template-columns:minmax(0,1fr); }
  .mont-painel{ order:0; }
  .mont-previa{ order:-1;
    position:sticky; top:78px; z-index:6;
    margin-inline:calc(clamp(20px,5vw,40px) * -1);
    padding:10px clamp(20px,5vw,40px) 12px;
    background:rgba(6,8,6,.94); backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  /* No toque tudo isso vira alvo de dedo, então sobe para os 44px que o
     resto do site usa. No computador 36px com o mouse já bastam. */
  .previa-alternar{ display:inline-flex; align-items:center; min-height:44px; }
  .previa-dispositivo button{ min-height:44px; }
  .bloco-mover button{ width:44px; height:44px; }
  .previa-rolagem{ height:min(34vh,260px); }
  .previa-janela.e-celular{ max-width:240px; }
  .previa-janela.e-celular .previa-rolagem{ height:min(32vh,240px); }
  .previa-nota{ display:none; }
}
@media (max-width:640px){
  .montador{ padding-block:30px 48px; }
  .mont-trilha{ gap:4px; margin-bottom:20px; }
  .mont-trilha button{ font-size:.7rem; padding-top:8px; }
  .mont-etapa h2{ font-size:1.28rem; }
  .mont-dica{ font-size:.92rem; margin-bottom:18px; }
  .mont-campo + .mont-campo{ margin-top:22px; }
  .opcao > span{ padding:12px 14px; gap:12px; min-height:60px; }
  .previa-topo{ margin-bottom:9px; }
  .previa-rolagem{ height:min(31vh,230px); }
  .mont-passos-nav{ flex-wrap:wrap; margin-top:24px; padding-top:18px; }
  .mont-conta{ order:-1; width:100%; margin-left:0; }
  .mont-resumo > div{ grid-template-columns:1fr auto; }
  .mont-resumo strong{ grid-column:1 / -1; }
}
@media (max-width:440px){
  /* Abaixo disso o rótulo do passo não cabe inteiro e ficava cortado no
     meio da palavra. Fica só o número, e o título do passo aparece logo
     abaixo, em tamanho grande. */
  .mont-trilha span{ display:none; }
  .mont-trilha button{ text-align:center; font-size:.78rem; }
}
@media (max-height:560px) and (max-width:999px){
  .previa-rolagem,
  .previa-janela.e-celular .previa-rolagem{ height:150px; }
}

/* ---------------- página do serviço de assinatura --------------------- */
/* Topo: texto de um lado, demonstração do outro. A demonstração reaproveita
   as classes .pv do montador, então a página de venda mostra exatamente o
   mesmo desenho que o cliente vê ao montar a dele. */
.produto-topo{ padding-block:clamp(44px,6vw,84px) clamp(56px,7vw,96px); }
.produto-topo__grade{
  display:grid; gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:1000px){
  .produto-topo__grade{ grid-template-columns:minmax(0,1fr) minmax(430px,.95fr); }
}
.produto-topo .section-title{ margin-bottom:20px; }
.produto-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.produto-selo{
  display:inline-flex; align-items:flex-start; gap:9px;
  margin-top:24px; max-width:46ch;
  font-size:.88rem; color:var(--tx-on-dark-soft);
}
.produto-selo::before{
  content:""; flex:0 0 auto; width:8px; height:8px; margin-top:8px;
  background:var(--green-bright);
}

/* ------------------------- demonstração visual ------------------------ */
.demo{ position:relative; padding-bottom:26px; }
/* A etiqueta fica acima da moldura, não em cima dela: colada no topo ela
   tapava o endereço falso da barra do navegador. */
.demo-etiqueta{
  display:inline-block; margin-bottom:10px;
  padding:5px 11px; border-radius:var(--r-xs);
  background:var(--green); color:var(--on-green);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
}
.demo-janela{
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:var(--ink-800);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.demo-barra{
  display:flex; align-items:center; gap:6px;
  height:30px; padding-inline:12px;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.demo-barra i{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26); }
.demo-barra span{
  flex:1 1 auto; min-width:0; margin-left:8px;
  font-family:var(--font-mono); font-size:.66rem; color:rgba(255,255,255,.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* A tela é cortada de propósito: é uma amostra, não a página inteira. */
.demo-tela{ position:relative; max-height:376px; overflow:hidden; background:#fff; }
.demo-tela::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
}
.demo-fone{
  position:absolute; right:-6px; bottom:-4px; z-index:2;
  width:158px; padding:9px 7px;
  border-radius:20px;
  background:#0B0E0B;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.95);
}
.demo-fone__topo{
  display:block; width:44px; height:4px; margin:0 auto 7px;
  border-radius:3px; background:rgba(255,255,255,.28);
}
.demo-tela--fone{ max-height:238px; border-radius:13px; }
.demo-tela--fone::after{ height:44px; }

@media (max-width:999px){
  /* A janela e o celular continuam formando uma única demonstração. No
     mobile, só reduzimos a escala para preservar a composição do desktop. */
  .demo{ display:block; padding-bottom:18px; }
  .demo-janela{ max-width:560px; margin-inline:auto; }
  .demo-fone{ position:absolute; margin:0; }
}
@media (max-width:640px){
  .demo{ padding-bottom:10px; }
  .demo-tela{ max-height:280px; }
  .demo-fone{ right:-3px; bottom:-3px; width:112px; padding:6px 5px; border-radius:15px; }
  .demo-fone__topo{ width:32px; height:3px; margin-bottom:5px; }
  .demo-tela--fone{ max-height:168px; border-radius:10px; }
  .demo-tela--fone::after{ height:32px; }
  .produto-acoes .btn{ flex:1 1 100%; }
}

/* --------------------- cinco benefícios sem órfão --------------------- */
/* Com cinco cartões a última linha ficava com um buraco; o quinto ocupa as
   colunas que sobram e a grade fecha certinho nos dois pontos de corte. */
@media (min-width:640px){
  .cards--beneficios{ grid-template-columns:repeat(2,1fr); }
  .cards--beneficios li:last-child{ grid-column:span 2; }
}
@media (min-width:1100px){
  .cards--beneficios{ grid-template-columns:repeat(3,1fr); }
  .cards--beneficios li:last-child{ grid-column:span 2; }
}

/* ------------------------------- planos ------------------------------- */
.planos{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:860px){ .planos{ grid-template-columns:repeat(2,1fr); gap:22px; } }

.plano{
  display:flex; flex-direction:column;
  padding:clamp(24px,3vw,34px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.plano.is-escolhido{ border-color:var(--green); background:rgba(63,174,53,.12); }
@media (hover:hover){ .plano:hover{ border-color:rgba(255,255,255,.3); } }

.plano-topo h3{ font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem); color:#fff; }
.plano-linha{
  margin-top:6px;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:-.02em;
  color:var(--green-bright);
}
.plano-preco{
  display:flex; flex-direction:column; gap:4px;
  margin:22px 0 20px; padding:16px 0;
  border-block:1px solid rgba(255,255,255,.12);
}
.plano-valor{ font-size:1.85rem; font-weight:600; letter-spacing:-.03em; color:#fff; line-height:1.15; }
/* Enquanto não há preço, o texto ocupa o lugar do número sem fingir que é um. */
.plano-valor--consulta{ font-size:1.02rem; font-weight:600; color:rgba(255,255,255,.9); }
.plano-periodo{ font-family:var(--font-mono); font-size:.82rem; color:var(--tx-on-dark-soft); }
.plano-taxa{ font-size:.84rem; color:var(--tx-on-dark-soft); }

.plano-itens{ display:grid; gap:12px; margin-bottom:20px; }
.plano-itens li{
  position:relative; padding-left:28px;
  font-size:.95rem; color:var(--tx-on-dark-soft);
}
.plano-itens li::before{
  content:""; position:absolute; left:0; top:6px;
  width:11px; height:6px;
  border-left:2.2px solid var(--green-bright); border-bottom:2.2px solid var(--green-bright);
  transform:rotate(-45deg);
}
/* O item que separa os planos precisa saltar aos olhos: é a decisão inteira. */
.plano-item--chave{
  padding:12px 14px 12px 38px;
  border:1px solid rgba(90,208,76,.4); border-radius:var(--r-sm);
  background:rgba(63,174,53,.12);
  color:#fff; font-weight:600;
}
.plano-item--chave::before{ left:14px; top:19px; }
.plano-para{
  margin-bottom:20px; margin-top:auto;
  font-size:.9rem; color:rgba(255,255,255,.6);
}
.planos-nota{
  max-width:70ch; margin:clamp(28px,3.5vw,40px) auto 0;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.88rem; color:var(--tx-on-dark-soft); text-align:center;
}

/* --------------------------- orçamento -------------------------------- */
#orcCampos{ display:grid; gap:18px; }
.orc-progresso{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.orc-progresso span{
  height:5px; border-radius:var(--r-pill); background:rgba(255,255,255,.16);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.orc-progresso span.is-atual{ background:var(--green-bright); transform:scaleY(1.35); }
.orc-progresso span.is-concluida{ background:var(--green); }
.orc-etapa-status{
  margin:-8px 0 0; font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-bright);
}
.orc-etapa{ display:grid; gap:18px; animation:orcEtapaEntra .24s var(--ease) both; }
@keyframes orcEtapaEntra{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
.orc-etapa__titulo{ margin:0; color:#fff; font-size:1.25rem; }
.orc-etapa__ajuda{ margin:-8px 0 0; color:var(--tx-on-dark-soft); font-size:.9rem; line-height:1.55; }
.orc-grupo{ border:0; padding:0; margin:0; min-width:0; }
.orc-grupo + .field, .field + .orc-grupo{ margin-top:4px; }
.orc-grupo legend{ padding:0; }
.orc-ajuda{ margin:-2px 0 14px; font-size:.84rem; color:var(--tx-on-dark-soft); }
.orc-tenho + .orc-tenho{ margin-top:16px; }
.orc-tenho__rotulo{
  display:block; margin-bottom:8px;
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.82);
}

.orc-revisao__titulo{
  font-size:1.2rem; color:#fff; margin-bottom:16px;
}
.orc-revisao__titulo:focus:not(:focus-visible){ outline:none; }
.orc-resumo{ border-top:1px solid rgba(255,255,255,.12); margin-bottom:22px; }
.orc-resumo > div{
  display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:6px 16px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.93rem;
}
.orc-resumo span{ color:var(--tx-on-dark-soft); }
.orc-resumo strong{ color:#fff; font-weight:600; overflow-wrap:anywhere; }
.orc-revisao__acoes{ display:flex; flex-wrap:wrap; gap:12px; }
.orc-revisao__acoes .btn-primary{ flex:1 1 220px; }
.orc-acoes{ align-items:center; }
.orc-acoes #orcVoltar{ flex:0 0 auto; }
.orc-acoes #orcContinuar,
.orc-acoes #orcRevisar{ flex:1 1 240px; }
#orcEnvio:not(:empty){ margin-top:16px; }

@media (max-width:640px){
  .orc-progresso{ gap:5px; }
  .orc-etapa__titulo{ font-size:1.14rem; }
  .plano-preco{ margin:18px 0 16px; }
  .plano-item--chave{ padding:11px 12px 11px 34px; }
  .plano-item--chave::before{ left:12px; top:18px; }
  .orc-resumo > div{ grid-template-columns:1fr; gap:2px; padding:10px 0; }
  .orc-revisao__acoes .btn{ flex:1 1 100%; }
}

/* ---------------- montador como seção do meio de uma página ------------- */
/* Desde 08/10/2026 o montador também mora na página da Super Página, logo
   depois de "Como fica" (de 07 a 08/10 ficou na home). Ali ele é uma seção
   do meio: volta ao respiro das outras seções e ganha uma linha em cima para
   não emendar em "Como fica", que também é escura. Os dois seletores juntos
   vencem .section e .montador em qualquer ordem do arquivo. */
.montador.montador--secao{
  padding-block:clamp(72px, 9vw, 128px);
  border-top:1px solid rgba(255,255,255,.08);
}
@media (max-width:640px){
  .montador.montador--secao{ padding-block:56px; }
}

/* ------------------------- animação de entrada ------------------------ */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* --------------------------- responsividade --------------------------- */
/* Desde 07/10/2026 o menu tem só dois itens (Super Página e Falar com a
   gente), que cabem ao lado do logotipo até em tablet. O sanduíche fica só
   para o celular; o main.js usa o mesmo ponto de corte. */
@media (max-width:640px){
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(6,8,6,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:8px 20px 26px;
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100svh - 78px); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav > a:not(.btn){
    padding:16px 4px; font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav > a:not(.btn)::after{ display:none; }
  .nav-cta{ margin-top:20px; justify-content:center; padding:15px 24px; font-size:1rem; }
  .nav-toggle{ display:flex; }
}

@media (max-width:900px){
  /* Cobrindo a seção inteira, o recorte vertical deixa o chip no meio do
     texto — e o véu branco que o texto precisa acaba apagando o vídeo. Numa
     faixa no topo o chip aparece inteiro e o texto fica sobre branco puro. */
  .section.section--ia{
    --faixa-ia:clamp(320px, 92vw, 520px);
    padding-top:calc(var(--faixa-ia) - 26px);
  }
  .section--ia .media-bg{ inset:0 0 auto 0; height:var(--faixa-ia); }
  .media-bg__scrim--ia{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.05) 50%,
      rgba(255,255,255,.52) 78%,
      var(--white) 100%);
  }
}

@media (max-height:760px) and (min-width:641px){
  .hero{ min-height:auto; padding-block:124px 76px; }
  .hero-actions{ margin-bottom:36px; }
}

/* --------------------------------- celular ---------------------------- */
@media (max-width:640px){
  /* Ritmo vertical mais curto: a página encolhe quase 3 mil pixels sem
     perder respiro, porque no celular a rolagem é o custo principal. */
  .section{ padding-block:56px; }
  .section-head{ margin-bottom:28px; }
  .section-title{ margin-bottom:14px; }

  .hero{ min-height:auto; padding-block:104px 60px; }
  .hero-scroll{ display:none; }
  .hero-title{ margin-bottom:18px; }
  .hero-lead{ margin-bottom:26px; }
  .hero-actions{ margin-bottom:32px; gap:12px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-tags{ gap:8px; }
  .hero-tags li{ font-size:.8rem; padding:6px 13px; }

  /* Cartões com o ícone ao lado do título, não empilhado acima dele. */
  .cards{ gap:14px; }
  .card{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; align-items:center;
    padding:20px;
  }
  .card-icon{ width:42px; height:42px; margin:0; border-radius:12px; }
  .card-icon svg{ width:22px; height:22px; }
  .card h3{ grid-column:2; font-size:1.1rem; }
  .card p{ grid-column:1 / -1; margin-top:12px; }
  .tag{ font-size:.64rem; padding:3px 9px; }

  .ia-list{ gap:16px; margin:26px 0 30px; }
  .ia-list li{ padding-left:38px; }

  /* Os quatro passos viram uma linha do tempo — mesma informação, metade
     da altura, e a sequência fica mais óbvia que em cartões soltos. */
  .steps{ gap:0; }
  .step{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:15px; align-items:start;
    background:none; border:0; border-radius:0;
    padding:0 0 24px;
  }
  .step::after{
    content:""; position:absolute; left:18px; top:46px; bottom:0;
    width:2px; border-radius:2px;
    background:linear-gradient(180deg, rgba(63,174,53,.5), rgba(63,174,53,0));
  }
  .step:last-child{ padding-bottom:0; }
  .step:last-child::after{ display:none; }
  .step-num{ width:38px; height:38px; margin:0; border-radius:11px; font-size:.98rem; }
  .step h3{ grid-column:2; font-size:1.06rem; margin-bottom:6px; padding-top:7px; }
  .step p{ grid-column:2; }

  .reason{ padding:20px 22px 22px; }
  .reason h3{ font-size:1.02rem; margin-bottom:7px; }

  .faq{ gap:10px; }
  .faq summary{ padding:16px 46px 16px 18px; font-size:.98rem; }
  .faq summary::after{ right:18px; }
  .faq-body{ padding:0 18px 18px; }

  .contato-links{ margin-top:26px; gap:10px; }
  .contato-link{ padding:14px 16px; gap:13px; }
  .contato-link__ico{ width:38px; height:38px; border-radius:11px; }
  .form-wrap{ padding:22px 18px 24px; }
  .form{ gap:15px; }

  .site-footer{ padding-top:44px; }
  .footer-inner{ gap:30px; padding-bottom:30px; }
  .footer-brand p{ font-size:.9rem; }
  .footer-nav{ gap:24px 18px; }
  .footer-nav h4{ margin-bottom:6px; }
  .footer-nav a{ padding-block:9px; font-size:.9rem; }
  .footer-bottom{ justify-content:flex-start; padding-block:20px; }
}

/* ------------------- barra de ação fixa (só no celular) ---------------- */
/* Num site de captação, o WhatsApp precisa estar sempre a um toque de
   distância — no desktop os botões do topo já cumprem esse papel. */
.acao-fixa{
  position:fixed; z-index:90;
  left:0; right:0; bottom:0;
  display:none; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,8,6,.9);
  backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.acao-fixa.is-visible{ transform:none; }
.acao-fixa .btn{ flex:1 1 0; padding:14px 12px; font-size:.95rem; white-space:nowrap; }
.acao-fixa .btn-ghost{ flex:0 0 auto; padding-inline:20px; }
/* Em telas bem estreitas o rótulo encurta em vez de quebrar em duas linhas. */
@media (max-width:359px){
  .acao-fixa__longo{ display:none; }
  .acao-fixa{ padding-inline:12px; gap:8px; }
  .acao-fixa .btn{ font-size:.9rem; }
  .acao-fixa .btn-ghost{ padding-inline:16px; }
}

@media (max-width:640px){
  .acao-fixa{ display:flex; }
  body.tem-acao-fixa{ padding-bottom:76px; }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .acao-fixa{ transition:none; }
}

/* Celular deitado: sobra pouca altura, então o topo encolhe mais ainda. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero{ padding-block:96px 48px; }
  .hero-tags{ display:none; }
  .acao-fixa{ display:none; }
  body.tem-acao-fixa{ padding-bottom:0; }
}

/* ------------------------ preferências do sistema --------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.hero-scroll,.media-bg,.form-wrap{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; }
}

/* ------------- demonstração dentro do formulário de orçamento --------- */
/* O formulário é o caminho principal. A demonstração fica ao lado, num
   botão discreto, e só abre se a pessoa pedir. */
.orc-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; }
.orc-acoes .btn-primary{ flex:1 1 240px; }
.orc-espiar{
  flex:0 0 auto; padding:10px 4px; min-height:44px;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-mono); font-size:.82rem; color:var(--green-bright);
  text-decoration:underline; text-underline-offset:4px;
  transition:color .18s var(--ease);
}
@media (hover:hover){ .orc-espiar:hover{ color:#fff; } }

.orc-previa{
  margin-top:22px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid; gap:14px;
  animation:orcPreviaEntra .32s var(--ease) both;
}
@keyframes orcPreviaEntra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.orc-previa__topo{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 16px;
}
.orc-previa__titulo{ font-size:1.12rem; color:#fff; }
.orc-previa__titulo:focus:not(:focus-visible){ outline:none; }
.orc-previa__acoes{ display:flex; gap:8px; }
.orc-previa__btn{
  min-height:44px; padding:8px 14px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill); color:rgba(255,255,255,.82);
  font-family:var(--font-mono); font-size:.76rem;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
@media (hover:hover){ .orc-previa__btn:hover{ background:rgba(255,255,255,.14); color:#fff; } }
.orc-previa__modelo{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--green-bright);
}
/* a tela da demonstração rola, porque a página montada é mais alta que ela */
.demo-tela--rola{
  max-height:min(58vh, 460px); overflow-y:auto; overscroll-behavior:contain;
}
.demo-tela--rola::after{ content:none; }
.orc-previa__aviso{
  font-size:.86rem; color:var(--tx-on-dark-soft);
  border-left:3px solid var(--green); padding:2px 0 2px 14px;
}
.orc-previa__aviso strong{ color:#fff; }

@media (max-width:640px){
  .orc-acoes{ gap:10px; }
  .orc-acoes #orcVoltar{ flex:1 1 100%; order:3; }
  .orc-acoes .btn-primary{ flex:1 1 100%; }
  .orc-espiar{ flex:1 1 100%; text-align:center; }
  .demo-tela--rola{ max-height:min(52vh, 380px); }
}

/* ================== Super Página: seções novas (23/09/2026) ================ */
/* A página comercial passou a responder em sequência: o que é, o que vem,
   para quem, por que assinatura, quanto custa, como funciona, como fica.
   Tudo aqui reaproveita os componentes da casa (cartões, cápsulas, passos,
   perguntas); só entram as peças que não existiam. */

/* ---- topo: linhas de prova embaixo dos botões ---- */
.produto-provas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.produto-provas li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.86rem; font-weight:600;
  color:rgba(255,255,255,.8);
  padding:8px 16px 8px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.produto-provas li::before{
  content:""; flex:0 0 auto; width:10px; height:5px; margin-top:-3px;
  border-left:2px solid var(--green-bright); border-bottom:2px solid var(--green-bright);
  transform:rotate(-45deg);
}

/* ---- o que você recebe: oito cartões, sem órfão nos dois pontos de corte ---- */
.cards--entregas .card h3{ font-size:1.12rem; }
.cards--entregas .card p{ font-size:.95rem; }

/* ---- por que assinatura: duas colunas lado a lado ---- */
.comparacao{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:860px){ .comparacao{ grid-template-columns:repeat(2,1fr); gap:22px; } }
.comparacao__lado{
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--mist);
}
.comparacao__lado--nos{
  background:var(--white);
  border-color:rgba(63,174,53,.45);
  box-shadow:var(--shadow-card);
}
.comparacao__rotulo{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-on-light-soft);
}
.comparacao__lado--nos .comparacao__rotulo{ color:var(--green-deep); }
.comparacao__lado h3{ font-size:1.35rem; margin-bottom:18px; }
.comparacao__lado ul{ display:grid; gap:12px; }
.comparacao__lado li{
  position:relative; padding-left:30px;
  font-size:.97rem; color:var(--tx-on-light-soft);
}
.comparacao__lado--nos li{ color:var(--tx-on-light); }
.comparacao__lado li::before{
  content:"\00d7"; position:absolute; left:0; top:-3px;
  font-size:1.35rem; font-weight:700; line-height:1.3;
  color:#B0453A;
}
.comparacao__lado--nos li::before{
  content:""; left:2px; top:7px;
  width:12px; height:6px;
  border-left:2.4px solid var(--green-deep); border-bottom:2.4px solid var(--green-deep);
  transform:rotate(-45deg);
}
.comparacao-nota{
  max-width:64ch; margin:clamp(24px,3vw,32px) auto 0;
  text-align:center; font-size:.95rem; color:var(--tx-on-light-soft);
}

/* ---- planos: selo, "para quem" no alto, adesão, item riscado, caixas ---- */
.plano{ position:relative; }
.plano-selo{
  position:absolute; top:-15px; left:clamp(20px,3vw,30px);
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--green); color:var(--on-green);
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:var(--shadow-green);
}
.plano--destaque{ border-color:rgba(90,208,76,.45); }
.plano-para{ margin:12px 0 0; font-size:.93rem; color:rgba(255,255,255,.7); }
.plano .btn{ margin-top:auto; }
.plano-itens{ margin-bottom:24px; }
.plano-item--riscado{ color:rgba(255,255,255,.45); }
/* o risco fica só no texto principal: a etiqueta "Só no Premium" continua legível */
.plano-item--riscado > span{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); }
.plano-item--riscado::before{
  content:"\00d7"; border:0; transform:none; top:-4px; left:3px;
  width:auto; height:auto;
  font-size:1.2rem; font-weight:700; color:rgba(255,255,255,.4);
}
.plano-item--riscado small{
  display:block; margin-top:2px;
  font-size:.82rem; color:rgba(255,255,255,.5);
}
.plano-incluso{
  margin-top:clamp(22px,3vw,30px);
  padding:clamp(20px,2.6vw,26px) clamp(20px,3vw,30px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(255,255,255,.035);
}
.plano-incluso h3{
  margin-bottom:12px;
  font-family:var(--font-mono); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-bright);
}
.plano-incluso ul{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.plano-incluso li{
  position:relative; padding-left:20px;
  font-size:.93rem; color:rgba(255,255,255,.82);
}
.plano-incluso li::before{
  content:""; position:absolute; left:0; top:8px;
  width:10px; height:5px;
  border-left:2px solid var(--green-bright); border-bottom:2px solid var(--green-bright);
  transform:rotate(-45deg);
}
.planos-caixas{
  display:grid; gap:14px; margin-top:18px;
  grid-template-columns:1fr;
}
@media (min-width:860px){ .planos-caixas{ grid-template-columns:repeat(2,1fr); } }
.plano-caixa{
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(255,255,255,.035);
}
.plano-caixa h3{ font-size:1rem; color:#fff; margin-bottom:6px; }
.plano-caixa p{ font-size:.92rem; color:var(--tx-on-dark-soft); }

/* ---- como funciona: quem faz o quê ---- */
.quem-faz{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  margin-top:clamp(40px,5vw,56px);
}
@media (min-width:860px){ .quem-faz{ grid-template-columns:repeat(3,1fr); } }
.quem-faz__col{
  padding:26px 26px 28px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--shadow-card);
}
.quem-faz__col--nos{ background:var(--ink-900); color:var(--tx-on-dark); border-color:rgba(63,174,53,.4); }
.quem-faz__col h3{ font-size:1.08rem; margin-bottom:14px; }
.quem-faz__col ul{ display:grid; gap:9px; }
.quem-faz__col li{
  position:relative; padding-left:24px;
  font-size:.95rem; color:var(--tx-on-light-soft);
}
.quem-faz__col--nos li{ color:rgba(255,255,255,.82); }
.quem-faz__col li::before{
  content:""; position:absolute; left:0; top:8px;
  width:10px; height:5px;
  border-left:2px solid var(--green-deep); border-bottom:2px solid var(--green-deep);
  transform:rotate(-45deg);
}
.quem-faz__col--nos li::before{ border-color:var(--green-bright); }
.quem-faz-titulo{
  margin-top:clamp(48px,6vw,72px);
  font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);
  margin-bottom:8px;
}
.quem-faz-lead{ color:var(--tx-on-light-soft); max-width:60ch; }

/* ---- chamada final ---- */
.final-inner{ max-width:760px; margin-inline:auto; text-align:center; }
.final-inner .section-lead{ margin-inline:auto; }
.final-acoes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:30px;
}

@media (max-width:640px){
  .produto-provas{ gap:8px; margin-top:22px; }
  .produto-provas li{ font-size:.8rem; padding:6px 13px 6px 11px; }
  .segmentos{ gap:8px; }
  .segmentos li{ font-size:.82rem; padding:7px 13px; }
  .comparacao__lado{ padding:20px; }
  .plano-selo{ top:-13px; font-size:.66rem; padding:5px 11px; }
  .plano-incluso ul{ gap:8px 16px; }
  .quem-faz__col{ padding:20px; }
  .final-acoes .btn{ flex:1 1 100%; }
}

/* ================ Como fica: exemplos navegáveis (23/09/2026) ============== */
/* Uma moldura de navegador com a página real dentro. Os chips escolhem o
   tipo de negócio; os botões trocam entre computador e celular; "Tela
   cheia" abre a mesma página num diálogo. */
.ex-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,3vw,28px); }
.ex-chip{
  display:inline-flex; align-items:center; min-height:40px;
  padding:8px 16px;
  font-size:.9rem; font-weight:600; letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
@media (hover:hover){ .ex-chip:hover{ border-color:rgba(255,255,255,.42); transform:translateY(-1px); } }
.ex-chip[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:var(--on-green); }
.ex-chip--voce{ color:var(--green-bright); border-color:rgba(90,208,76,.5); background:rgba(63,174,53,.12); }

.ex-barra{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; margin-bottom:12px;
}
.ex-legenda{ font-size:.95rem; font-weight:600; color:#fff; }
.ex-controles{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ex-modos{ display:inline-flex; padding:3px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); }
.ex-modo, .ex-cheia{
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:6px 14px;
  font-size:.84rem; font-weight:700; color:rgba(255,255,255,.8);
  border:1px solid transparent; border-radius:var(--r-pill); background:transparent;
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.ex-modo svg, .ex-cheia svg{ width:15px; height:15px; flex:0 0 auto; }
.ex-modo[aria-pressed="true"]{ background:var(--green); color:var(--on-green); }
.ex-cheia{ border-color:rgba(255,255,255,.22); }
@media (hover:hover){
  .ex-modo:not([aria-pressed="true"]):hover{ color:#fff; }
  .ex-cheia:hover{ border-color:var(--green-bright); color:#fff; }
}

.ex-janela{
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:var(--ink-800);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.ex-tela{
  position:relative; height:clamp(440px, 58vw, 660px);
  background:#fff; overflow:hidden;
}
.ex-tela iframe{
  position:absolute; left:0; top:0; border:0; display:block;
  transform-origin:0 0; background:#fff;
}
/* modo celular: a página fica no tamanho de um telefone, centralizada */
.ex-janela.is-cel .ex-tela{ display:flex; justify-content:center; background:var(--ink-700); }
.ex-janela.is-cel .ex-tela iframe{ position:static; border-inline:1px solid rgba(255,255,255,.14); }

.ex-carregando{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:linear-gradient(110deg, #F5F8F5 25%, #E8EEE8 45%, #F5F8F5 65%);
  background-size:220% 100%;
  animation:exBrilho 1.6s linear infinite;
  color:var(--tx-on-light-soft); font-size:.92rem; font-weight:600;
}
@keyframes exBrilho{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.ex-dica{ margin-top:14px; font-size:.9rem; color:var(--tx-on-dark-soft); max-width:70ch; }
.ex-dica strong{ color:#fff; font-weight:600; }

/* ---- diálogo de tela cheia ---- */
.ex-dialogo{
  width:min(1440px, 96vw); height:min(94vh, 1000px);
  max-width:none; max-height:none;
  padding:0; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md);
  background:var(--ink-900); color:#fff; overflow:hidden;
}
.ex-dialogo::backdrop{ background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.ex-dialogo__cabecalho{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:56px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ex-dialogo__titulo{ font-size:.95rem; font-weight:700; margin:0; }
.ex-dialogo__acoes{ display:flex; align-items:center; gap:8px; }
.ex-dialogo__corpo{
  position:relative; height:calc(100% - 56px);
  display:flex; justify-content:center;
  background:#fff; overflow:hidden;
}
.ex-dialogo__corpo iframe{ width:100%; height:100%; border:0; display:block; }
.ex-dialogo.is-cel .ex-dialogo__corpo{ background:var(--ink-700); }
.ex-dialogo.is-cel .ex-dialogo__corpo iframe{ width:390px; border-inline:1px solid rgba(255,255,255,.14); }
.ex-fechar{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer;
}
@media (hover:hover){ .ex-fechar:hover{ background:rgba(255,255,255,.12); } }

@media (max-width:640px){
  .ex-chips{ gap:6px; }
  .ex-chip{ min-height:36px; padding:6px 12px; font-size:.82rem; }
  .ex-tela{ height:min(72vh, 600px); }
  .ex-modo, .ex-cheia{ min-height:34px; padding:6px 11px; font-size:.8rem; }
  .ex-dialogo{ width:100vw; height:100dvh; border-radius:0; border:0; }
  .ex-dialogo__titulo{ font-size:.85rem; }
}

/* ============ demonstração com tema e fotos do Commons (23/09/2026) ========= */
/* A demonstração "Veja como pode ficar" reconhece o tema do negócio e puxa
   fotos de exemplo do Wikimedia Commons. Cada lugar de foto recebe a
   variável --pv-foto e a classe tem-foto; sem foto, fica o degradê. */
.pv-topo--foto.tem-foto::before{
  background:linear-gradient(180deg, rgba(8,10,8,.38) 0%, rgba(8,10,8,.72) 100%), var(--pv-foto) center/cover no-repeat;
}
.pv-foto.tem-foto{ background:var(--pv-foto) center/cover no-repeat; }
.pv-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pv-galeria span{
  display:block; aspect-ratio:4/3; border-radius:var(--pv-raio);
  background:linear-gradient(140deg, var(--pv-caixa), var(--pv-linha));
  border:1px solid var(--pv-linha);
}
.pv-galeria span.tem-foto{ background:var(--pv-foto) center/cover no-repeat; border-color:transparent; }
.pv-servicos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pv-servico{
  border:1px solid var(--pv-linha); border-radius:var(--pv-raio); overflow:hidden;
  background:var(--pv-fundo);
}
.pv-servico__foto{
  display:block; height:52px;
  background:linear-gradient(140deg, var(--pv-cor) 0%, var(--pv-tinta) 140%);
  opacity:.9;
}
.pv-servico__foto.tem-foto{ background:var(--pv-foto) center/cover no-repeat; opacity:1; }
.pv-servico b{ display:block; padding:7px 9px 2px; font-size:10px; color:var(--pv-tinta); }
.pv-servico span{ display:block; padding:0 9px 8px; font-size:8.5px; color:var(--pv-suave); }

/* cabeçalho da demonstração: escolha do tema ao lado dos botões */
.orc-previa__tema{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--tx-on-dark-soft);
}
.orc-previa__tema select{
  min-height:34px; padding:5px 30px 5px 10px;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill);
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B5AC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
  color:#fff; font-size:.8rem; font-weight:600;
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.orc-previa__tema select option{ color:#111; }
.orc-previa__creditos{
  margin-top:8px; font-size:.74rem; line-height:1.5;
  color:var(--tx-on-dark-soft);
}
.orc-previa__creditos a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.orc-previa__creditos:empty{ display:none; }