/* =====================================================================
   EsquadrIAs PRO  ·  esquadriaspro.com  ·  v3
   Design system fechado em 01/set/2026, etapa por etapa, com o Henrique.
   Origem dos numeros: o Figma dele (ESQUADR[IA]S / WEBSITE / Desktop - 1)
   medido com get_design_context, calibrado pelo _workflow/servicos/
   sistema-visual.md. Nada aqui e estimativa.
   Registro das decisoes: context/decisoes.md
   ===================================================================== */

/* ---------- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
figure, h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- fonte ---------------------------------------------------- */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===== 1. COR ===================================================== */
  --navy:      #16224C;              /* ancora de matiz da marca, nao e fundo */
  /* o chao desceu em 02/set: com o #16224C de fundo os planos davam 1.20:1
     e os cards sumiam. O deck tem base em 9%; a escada inteira desce junto. */
  --fundo:     hsl(227 50% 11%);
  --verde:     #55BE72;              /* acento em TEXTO sobre o navy */
  --verde-sup: #138634;              /* acento em SUPERFICIE, com texto branco */
  --alerta:    #BD1B16;              /* SUPERFICIE: fundo do selo, icone no card branco */
  --alerta-txt: hsl(2 78% 64%);      /* TEXTO vermelho sobre o navy: 4.66:1 */
  --check:     #00BA00;
  --card:      #FFFFFF;
  --tinta:     #011453;              /* qualquer texto dentro do card branco */

  /* neutros derivados do matiz 227 da marca, nunca cinza puro */
  --branco:  #FFFFFF;
  --micro:   hsl(227 20% 94%);
  --corpo:   hsl(227 16% 86%);
  --apagado: hsl(227 14% 64%);

  /* ===== 2. SUPERFICIE: tres degraus escuros + o card branco ======== */
  --sup-0: var(--fundo);
  --sup-1: hsl(227 45% 18%);
  --sup-2: hsl(227 38% 26%);
  --borda: hsl(227 38% 26%);
  --linha: hsl(227 30% 100% / .14);

  /* ===== 3. TIPOGRAFIA: 7 degraus, teto atingido em 1400 ============ */
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-display:  clamp(2.5rem,   1.545rem + 3.96vw, 5rem);      /* 40 -> 80 */
  --t-titulo:   clamp(1.75rem,  1.171rem + 2.38vw, 3.25rem);   /* 28 -> 52 */
  --t-destaque: clamp(1.5rem,   1.114rem + 1.58vw, 2.5rem);    /* 24 -> 40 */
  --t-item:     clamp(1.25rem,  1.057rem + 0.79vw, 1.75rem);   /* 20 -> 28 */
  --t-lead:     clamp(1.125rem, 1.038rem + 0.35vw, 1.375rem);  /* 18 -> 22 */
  --t-corpo:    clamp(1rem,     0.957rem + 0.17vw, 1.125rem);  /* 16 -> 18 */
  --t-eyebrow:  clamp(0.75rem,  0.707rem + 0.17vw, 0.875rem);  /* 12 -> 14 */

  /* rag: medida de leitura por nivel. Nenhuma linha infinita. */
  --m-display: 26ch; --m-titulo: 20ch; --m-destaque: 26ch;
  --m-item: 34ch;    --m-lead: 46ch;   --m-corpo: 64ch;

  /* ===== 4. ESPACO: duas escalas separadas ========================== */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  --sec-s: clamp(48px, 32px + 4.10vw, 80px);      /* faixa/tira */
  --sec-m: clamp(64px, 36.4px + 7.06vw, 120px);   /* DEFAULT, 15 secoes */
  --sec-l: clamp(80px, 49.1px + 7.92vw, 160px);   /* virada de capitulo */

  /* ===== 5. GRID ==================================================== */
  --container: 1200px;
  --pad:    clamp(20px, 12.6px + 1.90vw, 32px);
  --gutter: clamp(16px, 13px + 0.79vw, 24px);

  --h-compacto:40px; --h-padrao:48px; --h-destaque:56px;
  --r-painel:12px; --r-card:8px; --r-chip:6px; --r-botao:6.5px;

  --sombra-objeto: drop-shadow(0 18px 40px hsl(227 60% 6% / .55));
  --sombra-caixa:  0 2px 8px hsl(227 60% 6% / .30), 0 8px 24px hsl(227 60% 6% / .22);

  /* ===== 6. MOVIMENTO: tres duracoes, tres curvas =================== */
  --dur-micro:.15s; --dur-ui:.3s; --dur-reveal:.5s;
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.4, 0, .2, 1);
  --ease-sign: cubic-bezier(.625, .05, 0, 1);
}

/* =====================================================================
   BASE
   ===================================================================== */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.55;
  color: var(--branco);
  background: var(--sup-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* registro EDITORIAL: peso 400 pede tracking bem negativo e entrelinha
   sub-1, senao o titulo vira linhas soltas em vez de um bloco */
.display {
  font-size: var(--t-display); line-height: .95; font-weight: 400;
  letter-spacing: -.045em; max-width: var(--m-display); text-wrap: balance;
}
h2, .titulo {
  font-size: var(--t-titulo); line-height: 1; font-weight: 400;
  letter-spacing: -.04em; max-width: var(--m-titulo); text-wrap: balance;
}
.destaque {
  font-size: var(--t-destaque); line-height: 1.05; font-weight: 400;
  letter-spacing: -.035em; max-width: var(--m-destaque); text-wrap: balance;
}
h3, .item {
  font-size: var(--t-item); line-height: 1.2; font-weight: 500;
  letter-spacing: -.02em; max-width: var(--m-item); text-wrap: balance;
}
.lead {
  font-size: var(--t-lead); line-height: 1.35; font-weight: 400;
  letter-spacing: -.01em; color: var(--corpo);
  max-width: var(--m-lead); text-wrap: pretty;
}
.prosa {
  font-size: var(--t-corpo); line-height: 1.55; color: var(--corpo);
  max-width: var(--m-corpo); text-wrap: pretty;
}

/* a segunda voz: peso 700 dentro de tracking apertado cola as letras,
   entao ela devolve um pouco do ar */
.v2 { color: var(--verde); font-weight: 700; letter-spacing: -.02em; }

/* quebra de linha decidida na mao; no mobile os spans voltam a fluir */
@media (min-width: 760px) { .ln { display: block; } }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sec { padding-block: var(--sec-m); position: relative; }
.sec--s { padding-block: var(--sec-s); }
.sec--l { padding-block: var(--sec-l); }

/* grid mobile-first: 6 colunas embaixo, 12 em cima. Os spans do desktop
   moram DENTRO do breakpoint, senao vazam para o mobile. */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; }
  .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; }
  .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; }
  .c-12 { grid-column: span 12; }
}

/* o ritmo do bloco de texto: o espaco diz o que pertence a que.
   Em grid as margens nao colapsam, entao zerar antes de aplicar. */
.bloco { display: grid; align-content: start; justify-items: start; }
.bloco > *                 { margin-block: 0; }
.bloco > * + *             { margin-top: var(--s-5); }  /* 24 padrao        */
.bloco > .titulo           { margin-top: var(--s-3); }  /* 12 cola no eyebrow */
.bloco > .prosa + .prosa   { margin-top: var(--s-4); }  /* 16 mesmo assunto */
.bloco > .btn, .bloco > .btn-row { margin-top: var(--s-7); } /* 48 a acao se separa */

.skip {
  position: absolute; left: -9999px; top: var(--s-3); z-index: 100;
  background: var(--verde-sup); color: var(--branco);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-chip);
}
.skip:focus { left: var(--s-3); }

/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* ---------- eyebrow: o colchete da marca virando moldura ------------- */
.eyebrow {
  display: inline-block; position: relative; padding: 6px 11px;
  font-size: var(--t-eyebrow); line-height: 1.2; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
  /* sem nowrap: `OBRAS, MEDIÇÕES E PRODUÇÃO COORDENADOS` tem 38 caracteres
     e estoura os 353px do mobile. Em duas linhas o colchete continua
     emoldurando a caixa inteira. */
  color: var(--micro);
}
.eyebrow::before, .eyebrow::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1.7px solid var(--verde);
}
.eyebrow::before { top: 0; left: 0; border-right: 0; border-bottom: 0;
                   border-top-left-radius: 2px; }
.eyebrow::after  { bottom: 0; right: 0; border-left: 0; border-top: 0;
                   border-bottom-right-radius: 2px; }
.eyebrow--neg { color: var(--alerta); }
.eyebrow--pos { color: var(--verde); }

/* ---------- botao: hover A, o colchete fecha em volta ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; min-height: var(--h-destaque);
  min-width: clamp(180px, 19.2vw, 224px); padding: 0 var(--s-6);
  border: 0; border-radius: var(--r-botao);
  background: var(--verde-sup); color: var(--branco);
  font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-io),
              border-color var(--dur-micro) var(--ease-io),
              background var(--dur-micro) var(--ease-io);
}
/* o fundo NAO muda no hover: ele esta em 4.68:1 com o branco e clarear
   derruba para 4.19, abaixo do gate. O gesto mora no colchete. */
.btn::before, .btn::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 2px solid var(--verde); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-io),
              transform var(--dur-ui) var(--ease-out);
}
.btn::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0;
               border-top-left-radius: 3px; transform: translate(7px, 7px); }
.btn::after  { bottom: -7px; right: -7px; border-left: 0; border-top: 0;
               border-bottom-right-radius: 3px; transform: translate(-7px, -7px); }
.btn:hover::before, .btn:hover::after,
.btn:focus-visible::before, .btn:focus-visible::after { opacity: 1; transform: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

.btn--ghost {
  background: transparent; color: var(--branco); font-weight: 400;
  border: 1px solid var(--branco);
}
.btn--ghost:hover { border-color: var(--verde); background: hsl(137 45% 54% / .10); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- link com traco que entra pela direita e sai pela esquerda - */
.lk { text-decoration: none; position: relative; padding-bottom: 2px; }
.lk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--verde); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-out);
}
.lk:hover::after, .lk:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- selo: ROTULO, nao controle ------------------------------- */
.selo {
  display: inline-flex; align-items: center; height: var(--h-compacto);
  padding: 0 var(--s-5); border-radius: var(--r-chip);
  font-size: var(--t-eyebrow); font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: .14em; color: var(--branco);
}
.selo--pos { background: var(--verde-sup); }
.selo--neg { background: var(--alerta); }

/* ---------- pilula da esteira ---------------------------------------- */
.pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: var(--h-compacto); padding: 0 var(--s-5);
  border: 1px solid color-mix(in srgb, var(--verde) 60%, transparent);
  border-radius: 9999px; font-size: var(--t-corpo); font-weight: 400;
  color: var(--branco); background: transparent;
}

/* ---------- superficies ---------------------------------------------- */
.card {
  background: var(--card); color: var(--tinta);
  border-radius: var(--r-card); padding: var(--s-5) var(--s-6);
}
.card .prosa, .card .lead { color: var(--tinta); }
.card .v2 { color: var(--verde-sup); }
.painel {
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); padding: var(--s-5) var(--s-6);
}
/* a conta da secao 04 usa a mesma moldura de colchetes dos outros
   destaques (09, 12). Era uma caixa de borda branca, a unica da pagina. */
.faixa { display: grid; justify-items: center; text-align: center; }
.faixa__in { display: grid; justify-items: center; gap: var(--s-3); }
.moldura {
  display: inline-block; position: relative; padding: var(--s-5) var(--s-6);
}
.moldura::before, .moldura::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--verde);
}
.moldura::before { top: 0; left: 0; border-right: 0; border-bottom: 0;
                   border-top-left-radius: 4px; }
.moldura::after  { bottom: 0; right: 0; border-left: 0; border-top: 0;
                   border-bottom-right-radius: 4px; }

/* objeto recortado: drop-shadow segue o alfa, box-shadow denunciaria
   o retangulo */
.objeto { filter: var(--sombra-objeto); }
.shot { border-radius: var(--r-card); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- listas ---------------------------------------------------- */
/* o vetor de check/cross e o exportado do Figma, 21x21 */
.checks { display: grid; gap: var(--s-4); }
.checks li {
  display: grid; grid-template-columns: 21px 1fr; gap: var(--s-3);
  align-items: start; line-height: 1.55; color: var(--corpo);
}
.checks svg { width: 21px; height: 21px; margin-top: .28em; color: var(--check); }
.checks--neg svg { color: var(--alerta); }

.passos { display: grid; gap: var(--s-5); }
.passos .n { display: block; margin-bottom: var(--s-1); }

/* ---------- campo ----------------------------------------------------- */
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--t-corpo); color: var(--corpo); }
.campo input, .campo select, .campo textarea {
  height: var(--h-padrao); background: var(--sup-1); color: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--r-chip);
  padding: 0 14px; width: 100%;
}
.campo textarea { height: auto; padding: 12px 14px; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px; border-color: transparent;
}

/* =====================================================================
   MOVIMENTO
   O conteudo NASCE visivel: motion melhora a entrada, nao a produz.
   ===================================================================== */
.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
  }
  .rv[data-in="true"] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- camadas de movimento (polimento, 02/set) -------------------
   Quatro camadas, aprovadas em 02/set (na aprovacao eram ligaveis por
   `?anim=`; o andaime saiu). Tudo dentro de no-preference: com
   reduced-motion nada disto existe.
   1 hero        entrada na carga, unico momento sem rolagem
   2 cadencia    o .rv por lote (main.js); aqui so o que e CSS
   3 assinatura  o colchete se fecha em volta (eyebrow e moldura) e a
                 midia abre. Mesmo gesto do hover do botao: e a marca.
   4 hover       os cards escuros respondem ao ponteiro
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1 · hero. So CSS: roda sem JS. */
  @keyframes entrar {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  .hero__marca, .hero .lead, .hero .btn-row, .hero .display {
    animation: entrar var(--dur-reveal) var(--ease-out) both;
  }
  .hero__marca      { animation-delay: .05s; }
  .hero .display    { animation-delay: .15s; }
  .hero .lead       { animation-delay: .42s; }
  .hero .btn-row    { animation-delay: .54s; }
  /* em tela larga cada linha do h1 entra por si: o .ln e block a partir
     de 760 e so block aceita transform */
  @media (min-width: 760px) {
    .hero .display { animation: none; }
    .hero .display > .ln { animation: entrar var(--dur-reveal) var(--ease-out) both; }
    .hero .display > .ln:nth-child(1) { animation-delay: .15s; }
    .hero .display > .ln:nth-child(2) { animation-delay: .24s; }
    .hero .display > .ln:nth-child(3) { animation-delay: .33s; }
  }

  /* 3 · assinatura: o colchete do eyebrow vem de dentro, como no botao */
  .eyebrow::before,
  .eyebrow::after {
    transition: opacity var(--dur-ui) var(--ease-io) .25s,
                transform .7s var(--ease-sign) .25s;
  }
  .rv:not([data-in="true"]) .eyebrow::before {
    opacity: 0; transform: translate(10px, 8px);
  }
  .rv:not([data-in="true"]) .eyebrow::after {
    opacity: 0; transform: translate(-10px, -8px);
  }

  /* a moldura fecha em volta do destaque, mais lenta: e 22px de colchete */
  .moldura::before,
  .moldura::after {
    transition: opacity var(--dur-ui) var(--ease-io) .3s,
                transform .9s var(--ease-sign) .3s;
  }
  .rv:not([data-in="true"]) .moldura::before {
    opacity: 0; transform: translate(28px, 22px);
  }
  .rv:not([data-in="true"]) .moldura::after {
    opacity: 0; transform: translate(-28px, -22px);
  }

  /* a midia abre: foto/tela recortada por dentro (clip), objeto recortado
     so assenta (o drop-shadow segue o alfa e um clip cortaria a sombra) */
  [data-midia] {
    transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out),
                opacity .6s var(--ease-out);
  }
  /* o fim precisa ser inset(0), nao none: none nao interpola com inset() */
  [data-midia="abre"] { clip-path: inset(0); }
  :is(.rv:not([data-in="true"]) [data-midia="abre"],
                                    .rv[data-midia="abre"]:not([data-in="true"])) {
    clip-path: inset(7%); transform: scale(1.04);
  }
  :is(.rv:not([data-in="true"]) [data-midia="objeto"],
                                    .rv[data-midia="objeto"]:not([data-in="true"])) {
    opacity: 0; transform: translateY(24px) scale(.97);
  }
  /* o .rv da midia ja sobe 18px; o clip/scale vai por cima. Quando a
     midia E o .rv, a transicao de opacidade/transform do .rv manda no
     transform e o clip entra pela regra acima. */

  /* 4 · hover nos cards escuros: borda acorda, sem subir. Subir promete
     clique, e estes cards nao sao links. */
  :is(.passo:not(.passo--res), .ve__item, .fi__i, .ob__c, .ob__ex, .crm__painel) {
    transition: border-color var(--dur-micro) var(--ease-io),
                background var(--dur-micro) var(--ease-io);
  }
  :is(.passo:not(.passo--res), .ve__item, .fi__i, .ob__c, .ob__ex, .crm__painel):hover {
    border-color: hsl(227 30% 40%);
    background: hsl(227 45% 20%);
  }
}

/* =====================================================================
   01 · HERO  (wireframe seção 01 · slide 2 · Figma 125:367)
   ===================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 900px);
  display: grid; align-content: center;
  /* o espaco extra embaixo e o corredor da esteira, que e absoluta */
  padding-block: var(--sec-l) calc(var(--sec-m) + 72px);
  text-align: center; overflow: clip;
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
/* servem à hero e ao fundo da /links: e o mesmo video, com o mesmo
   poster por baixo e a mesma troca por opacidade quando ele fica pronto */
.hero__fundo > *,
.links__fundo > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__fundo video,
.links__fundo video { opacity: 0; transition: opacity .6s var(--ease-out); }
.hero__fundo video[data-pronto="true"],
.links__fundo video[data-pronto="true"] { opacity: 1; }

/* o veu deixa o video aparecer no centro e fecha no navy na base */
.hero__veu {
  position: absolute; inset: 0; z-index: -1;
  /* o LINEAR vem primeiro, ou seja, por cima: ele fecha em navy opaco na
     base e emenda com a seção seguinte. Com o radial por cima, a base
     ficava 62% mais escura que o navy e a costura aparecia. */
  background:
    linear-gradient(180deg, hsl(227 55% 9% / .45) 0%, transparent 30%,
                    transparent calc(100% - 220px), var(--sup-0) 100%),
    radial-gradient(120% 85% at 50% 40%, transparent 0%,
                    hsl(227 55% 9% / .35) 62%, hsl(227 55% 9% / .62) 100%);
}

.hero__in { display: grid; justify-items: center; position: relative; z-index: 1; }
.hero__marca {
  width: clamp(200px, 22vw, 300px); height: auto;
  margin-bottom: clamp(24px, 12.4px + 2.97vw, 46px);
}
.hero .display {
  max-width: min(920px, 100%);
  margin-bottom: clamp(16px, 11.8px + 1.06vw, 30px);
}
.hero .lead { max-width: min(var(--m-lead), 92%); text-align: center; }
.hero .btn-row { margin-top: clamp(32px, 20.1px + 3.05vw, 56px); }
/* empilhados, os dois botoes precisam da MESMA largura: dois retangulos
   de tamanhos diferentes um sobre o outro sao o que denuncia o mobile */
@media (max-width: 559px) {
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 100%; min-width: 0; }
}

/* ---------- esteira: o unico loop da pagina -------------------------- */
.esteira {
  --vel: 46s;
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 3.3vw, 48px);
  z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.esteira__trilho {
  /* o padding-right compensa o gap que falta na emenda: sem ele o loop
     salta meio gap a cada volta */
  display: flex; width: max-content; gap: var(--s-3); padding-right: var(--s-3);
  animation: correr var(--vel) linear infinite;
}
.esteira:hover .esteira__trilho { animation-play-state: paused; }
.esteira .pill { flex: 0 0 auto; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .esteira__trilho { animation: none; }
}

/* =====================================================================
   02 · AS 11, NUMERADAS  (wireframe seção 02 · slide 3)
   Cartões com espaço de imagem, ancorando cada um na sua seção.
   A trilha corre SO NOS VAOS entre os cartões, nunca por tras deles.
   ===================================================================== */
.trilha { position: relative; }
.trilha__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.trilha__svg path {
  fill: none; stroke: var(--verde); stroke-width: 1.5; opacity: .38;
  stroke-linecap: round; stroke-linejoin: round;
}

.cartoes {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
}

.cartao {
  display: grid; align-content: start; height: 100%;
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); overflow: hidden;
  text-decoration: none; color: var(--branco);
  transition: border-color var(--dur-ui) var(--ease-io),
              transform var(--dur-ui) var(--ease-out);
}
.cartao:hover, .cartao:focus-visible {
  border-color: var(--verde); transform: translateY(-3px);
}
.cartao:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* placeholder: o tracejado por dentro diz que ainda nao e a imagem final.
   Quando a foto real entrar, o <svg> vira <img> e o tracejado sai. */
/* .ph e o placeholder de imagem, usado onde a arte final ainda nao chegou:
   superficie, tracejado por dentro e o icone do assunto no meio. Quando a
   foto entrar, o <svg> vira <img> e o tracejado sai junto. */
.ph {
  display: grid; place-items: center; position: relative;
  background: var(--sup-2); color: var(--apagado);
}
.ph::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed hsl(227 30% 100% / .22); border-radius: 4px;
}
.ph > svg {
  width: 40px; height: 40px;
  transition: color var(--dur-ui) var(--ease-io), transform var(--dur-ui) var(--ease-out);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }

.cartao__midia { aspect-ratio: 16 / 10; overflow: hidden; }
.cartao__midia img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-ui) var(--ease-out);
}
.cartao:hover .cartao__midia img { transform: scale(1.04); }
.cartao:hover .cartao__midia > svg { color: var(--verde); transform: scale(1.06); }

.cartao__pe {
  display: grid; justify-items: center; text-align: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.cartao__n {
  font-size: var(--t-eyebrow); font-weight: 500; line-height: 1;
  letter-spacing: .14em; color: var(--apagado);
  transition: color var(--dur-ui) var(--ease-io);
}
.cartao:hover .cartao__n { color: var(--verde); }
.cartao__r {
  font-size: var(--t-corpo); font-weight: 500; line-height: 1.25;
  letter-spacing: -.01em; text-wrap: balance;
}
/* No mobile o cartao ocupa a largura toda e a foto tem 220px de altura:
   o rotulo em 16px e o numero em 12px ficavam pequenos DEMAIS para a
   caixa, e o pe do cartao lia como legenda de imagem em vez de titulo.
   Os degraus vem da escala: --t-lead no rotulo, e o numero no topo da
   escala do eyebrow (14px), que ele so alcanca no desktop. */
@media (max-width: 767px) {
  .cartao__n { font-size: .875rem; }
  .cartao__r { font-size: var(--t-lead); }
}

@media (min-width: 560px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 6 colunas para poder centrar a ultima fileira de 2 em meia coluna:
   cada cartao ocupa 2 colunas (= 384px), e a fileira final comeca na 2. */
@media (min-width: 768px) {
  .cartoes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); }
  .cartoes > * { grid-column: span 2; }
  .cartoes > :nth-child(10) { grid-column: 2 / span 2; }
}

/* =====================================================================
   02.5 · O VÍDEO INSTITUCIONAL  (entrou em 04/set, sem frame no Figma)
   Cartaz clicavel, nao player carregado. O <video> nasce sem <source>:
   o JS injeta no clique, entao os 31MB so saem do servidor para quem
   pediu. Ate la a seçao pesa 67KB de WebP.
   `aspect-ratio` fixo nos dois estados (cartaz e player) para o CLS
   continuar 0,00 quando a troca acontece.
   ===================================================================== */
.vid {
  position: relative; display: block; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-painel); overflow: hidden;
  background: var(--sup-1); box-shadow: var(--sombra-caixa);
  /* o convite e o circulo se medem pelo CARTAZ, nao pela janela: em 393px
     o cartaz tem 353 de largura e um texto de 16px comia 30% dele. */
  container-type: inline-size;
}
/* ⚠️ O contorno verde e uma SOBREPOSICAO, nao `box-shadow: inset` nem
   `border`. Motivo de cada descarte:
   · `inset` e pintado no fundo do elemento, ATRAS do conteudo: o cartaz
     cobre a figura inteira e engolia a linha. Ela existia no estilo
     computado e nao aparecia na tela.
   · `border` cresceria a caixa 2px e o `aspect-ratio` deixaria de bater
     redondo com o frame do video.
   `pointer-events: none` porque o botao cobre o cartaz inteiro por baixo
   desta camada e ela nao pode roubar o clique. */
.vid::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  border: 1px solid hsl(137 45% 54% / .72);
  border-radius: inherit;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.vid:has(.vid__play:hover)::after,
.vid:has(.vid__play:focus-visible)::after { border-color: var(--verde); }
.vid__cartaz, .vid__player { width: 100%; height: 100%; object-fit: cover; }

/* o veu escurece o cartaz para o botao branco nao brigar com a cena.
   Some junto com o cartaz quando o video entra. */
.vid__veu {
  position: absolute; inset: 0;
  background: hsl(227 50% 11% / .38);
  transition: background var(--dur-ui) var(--ease-io);
}

.vid__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; align-content: center; justify-items: center;
  background: none; border: 0; padding: var(--s-4); cursor: pointer;
  color: var(--tinta);
}
.vid__circ {
  display: grid; place-items: center;
  width: clamp(52px, 7.4cqw, 88px); height: clamp(52px, 7.4cqw, 88px);
  background: var(--branco); border-radius: 50%;
  box-shadow: var(--sombra-caixa);
  transition: transform var(--dur-ui) var(--ease-out),
              background-color var(--dur-ui) var(--ease-io),
              color var(--dur-ui) var(--ease-io);
}
.vid__circ svg {
  width: 40%; height: 40%;
  /* ⚠️ NAO deslocar. Medido no path pintado: ele ja nasce torto para a
     direita dentro do viewBox de 24 (vai de x=8 a x=20,79, centro em
     14,39 e nao 12), o que da +18,7% da largura do triangulo. A regra
     otica de um triangulo apontando para a direita e centrar o CENTROIDE,
     nao a caixa, e o centroide pede exatamente +16,7% (w/6). Ou seja, o
     desenho ja vem corrigido. O `translate: 8%` que estava aqui somava
     por cima e jogava o glifo para 33,6%, visivelmente fora do meio. */
}

/* o convite nasce escondido E FORA DO FLUXO (position: absolute), senao
   o `gap` do grid reservaria a altura dele e o circulo ficaria deslocado
   para cima quando o texto esta invisivel. */
.vid__convite {
  position: absolute; top: calc(50% + clamp(40px, 5.2cqw, 62px)); left: 50%;
  font-size: clamp(0.8125rem, 1.5cqw, 1.125rem);
  font-weight: 500; color: var(--branco);
  letter-spacing: -.01em; white-space: nowrap;
  opacity: 0; translate: -50% 8px;
  transition: opacity var(--dur-ui) var(--ease-out),
              translate var(--dur-ui) var(--ease-out);
}

/* HOVER e FOCO andam juntos: quem navega por teclado ve o mesmo convite.
   `:focus-visible` no botao, nao `:focus`, para o clique de mouse nao
   deixar o anel aceso depois. */
.vid__play:hover .vid__circ,
.vid__play:focus-visible .vid__circ {
  transform: scale(1.08);
  /* verde de SUPERFICIE (o mesmo do botao da pagina), glifo branco por
     cima: 4,68:1. O --verde, que e verde de TEXTO, reprovaria aqui. */
  background: var(--verde-sup); color: var(--branco);
}
.vid__play:hover .vid__convite,
.vid__play:focus-visible .vid__convite { opacity: 1; translate: -50% 0; }
.vid:has(.vid__play:hover) .vid__veu { background: hsl(227 50% 11% / .52); }
.vid__play:focus-visible { outline: 2px solid var(--verde); outline-offset: -4px; }

.vid__dur {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  /* acima do botao, que cobre o cartaz inteiro, mas sem roubar o clique */
  z-index: 2; pointer-events: none;
  font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--branco);
  /* pilula escura: o cartaz por baixo muda de tom conforme o frame */
  background: hsl(227 50% 11% / .72); padding: 2px var(--s-3);
  border-radius: var(--r-chip);
}

/* estado inicial: o player nao existe na tela. Ao tocar, o JS poe
   data-tocando no <figure> e a troca acontece sem mexer na altura. */
.vid__player { display: none; }
.vid[data-tocando="true"] .vid__cartaz,
.vid[data-tocando="true"] .vid__veu,
.vid[data-tocando="true"] .vid__dur,
.vid[data-tocando="true"] .vid__play { display: none; }
.vid[data-tocando="true"] .vid__player { display: block; }

@media (prefers-reduced-motion: reduce) {
  .vid, .vid__veu, .vid__circ, .vid__convite { transition: none; }
  /* sem movimento o convite fica SEMPRE visivel: escondido e sem
     animacao para revelar, ele simplesmente nunca apareceria. */
  .vid__convite { opacity: 1; translate: -50% 0; }
  .vid__play:hover .vid__circ,
  .vid__play:focus-visible .vid__circ { transform: none; }
}

/* sem hover (celular, tablet): o convite fica de pe o tempo todo, porque
   ali nao existe o gesto que o revelaria. */
@media (hover: none) {
  .vid__convite { opacity: 1; translate: -50% 0; }
}

/* =====================================================================
   03 · SEM DEPENDER DA SUA MEMÓRIA  (wireframe 03 · Figma 125:151/125:150)
   O par: duas colunas com a mídia sangrando até a borda da janela.
   As trilhas 1fr das pontas valem EXATAMENTE a margem externa do .wrap,
   então texto e container ficam na mesma grade vertical, e nada disso
   usa vw (que conta a barra de rolagem e desalinharia).
   ===================================================================== */
.par {
  --vao: clamp(32px, 13.3px + 4.77vw, 80px);   /* 32 -> 80, teto em 1400 */
  --cA: calc((var(--container) - var(--vao)) * .5);
  --cB: calc(var(--container) - var(--vao) - var(--cA));
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7); align-items: center;
  padding-inline: var(--pad);
}
.par + .par { margin-top: var(--sec-s); }
/* a coluna de texto do 3b é mais estreita, como no Figma (449 contra 990) */
.par--estreito-e { --cA: calc((var(--container) - var(--vao)) * .38); }

@media (min-width: 900px) {
  .par {
    grid-template-columns:
      [borda-e] minmax(var(--pad), 1fr)
      [cont-e]  minmax(0, var(--cA)) [a-fim]
      var(--vao)
      [b-ini]   minmax(0, var(--cB)) [cont-d]
      minmax(var(--pad), 1fr) [borda-d];
    column-gap: 0; padding-inline: 0;
  }
  .par__midia--e { grid-column: borda-e / a-fim; }
  .par__midia--d { grid-column: b-ini / borda-d; }
  .par--foto      .bloco { grid-column: b-ini / cont-d; }
  .par--estreito-e .bloco { grid-column: cont-e / a-fim; }
}

/* no mobile a mídia vaza os 20px do padding e encosta nas duas bordas */
.par__midia { margin-inline: calc(-1 * var(--pad)); }
@media (min-width: 900px) { .par__midia { margin-inline: 0; } }

/* foto: caixa de altura controlada, o recorte fica por conta do cover */
.par--foto .par__midia {
  height: clamp(240px, 15.1rem + 19.9vw, 520px);
  border-radius: var(--r-card); overflow: hidden;
}
.par--foto .par__midia img { width: 100%; height: 100%; object-fit: cover; }

/* painel + mascote: objetos recortados, sombra que segue o alfa.
   O mascote NAO herda height:100% (foi assim que ele esticou no v2). */
.composta { position: relative; }
/* a foto entra emoldurada, nao solta: solta, o drop-shadow do `.objeto`
   desenharia a sombra de um retangulo e denunciaria o corte. */
.composta__fundo {
  width: 100%; height: auto;
  border-radius: var(--r-card); box-shadow: var(--sombra-caixa);
}
/* o mascote pisa FORA da moldura, na quina: dentro dela ele viraria
   figurinha colada na cena e ainda tapava o primeiro palete. */
.composta__frente {
  position: absolute; left: -7%; bottom: -5%;
  width: 30%; height: auto;
}
@media (max-width: 899px) {
  /* no mobile ele NAO sai pela esquerda: a folga transparente do arquivo
     e de 2,8% e o corte comia 5px do proprio boneco. */
  .composta__frente { width: 38%; left: 0; bottom: -4%; }
}

/* a lista do 3b: vão maior que o padrão porque cada item tem duas linhas */
.par--painel .checks { gap: var(--s-5); }

/* =====================================================================
   04 · OTIMIZAÇÃO DE CORTES POR IA  (wireframe 04 · Figma 125:299)
   Quatro blocos dentro de uma seção só. O respiro entre eles é --sec-s,
   metade do que separa duas seções: eles são um assunto.
   ===================================================================== */
.q + .q { margin-top: var(--sec-s); }

.bloco--centro { justify-items: center; text-align: center; }
.bloco--centro > * { margin-inline: auto; }

/* eyebrow sem colchete: dentro da faixa a moldura já existe na borda */
.eyebrow--limpo { padding: 0; }
.eyebrow--limpo::before, .eyebrow--limpo::after { content: none; }

.forte { font-weight: 500; }   /* <strong> herda 700 do navegador; o teto aqui é 500 */

/* ---------- 4a · antes e depois ------------------------------------- */
.ad {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6);
}
@media (min-width: 768px) { .ad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }

/* o cartão é uma pilha de duas placas: a foto e o corpo branco, com um
   fio de navy entre elas. O 1fr faz os dois corpos fecharem na mesma
   altura mesmo com número diferente de itens. */
.ad__c { display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); }
.ad__foto { position: relative; aspect-ratio: 586 / 361.6; overflow: hidden; }
.ad__foto img { width: 100%; height: 100%; object-fit: cover; }
.ad__foto .selo { position: absolute; top: 0; left: 0; }
.ad__corpo { padding: var(--s-7); }
.ad__corpo .checks li { color: var(--tinta); }
.checks--forte li { font-size: var(--t-item); line-height: 1.3; gap: var(--s-4); }

/* ---------- 4b · o número, com o mascote --------------------------- */
.cartao-num { padding: var(--s-7) var(--s-7) 0; display: grid; gap: var(--s-6); }
.cartao-num .titulo, .cartao-num .lead { color: var(--tinta); }
.cartao-num .titulo { max-width: 24ch; }
/* SEM recorte: a caixa do Figma (307x499) e mais estreita que a arte
   (380x579) e o cover comia os bracos. O mascote aparece inteiro e apoia
   no pe do cartao, que tem padding-bottom zero. */
.cartao-num__mascote { align-self: end; }
.cartao-num__mascote img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .cartao-num {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--s-7); align-items: center;
  }
}
/* 48px de respiro num cartao de 353 come metade da linha: no mobile cai
   para 24 nos dois cartoes brancos */
@media (max-width: 767px) {
  .cartao-num { padding: var(--s-5) var(--s-5) var(--s-6); }
  .cartao-num__mascote { width: 60%; justify-self: center; }
  .ad__corpo { padding: var(--s-5); }
  /* com o mascote centralizado em cima, texto alinhado a esquerda embaixo
     deixava o cartao torto. O `.bloco` nasce `justify-items: start`, entao
     nao basta o `text-align`: sem isto a caixa do titulo tem o tamanho do
     texto e o centro dela nao e o centro do cartao. */
  .cartao-num .bloco { justify-items: center; text-align: center; }
}

/* ---------- 4c · o exemplo, quatro passos e o resultado ------------
   Cartoes ligados pela mesma trilha da secao 02: o traco so ocupa o vao
   entre eles. Aqui ele vale TAMBEM no mobile (data-sempre), porque a
   sequencia e o conteudo, nao enfeite. */
.exemplo { margin-top: var(--s-6); }
.exemplo__passos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
}
@media (min-width: 768px) {
  .exemplo__passos {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(200px, 248px);
    gap: var(--gutter); align-items: stretch;
  }
}
.passo {
  display: grid; gap: var(--s-2); align-content: start;
  justify-items: center; text-align: center;
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-5);
}
/* o icone ilustra, o numero ordena: so um dos dois carrega o verde */
.passo__ico { display: block; margin-bottom: var(--s-2); color: var(--corpo); }
.passo__ico svg { width: 32px; height: 32px; }
.passo__n {
  font-size: var(--t-destaque); line-height: 1; font-weight: 400;
  letter-spacing: -.035em; color: var(--verde);
}
.passo__r { font-size: var(--t-corpo); line-height: 1.3; color: var(--corpo); text-wrap: balance; }

/* o resultado nao e um passo: e superficie verde cheia, com texto branco.
   O par --verde-sup + branco e o unico que passa no gate (4.68:1). */
.passo--res {
  align-content: center;
  background: var(--verde-sup); border-color: var(--verde-sup);
}
.passo--res .passo__r {
  font-size: var(--t-lead); line-height: 1.25; font-weight: 500; color: var(--branco);
}
.passo--res .passo__check { display: block; color: var(--branco); }
.passo--res .passo__check svg { width: 28px; height: 28px; }

/* ---------- 4d · a conta ------------------------------------------- */
.faixa .destaque { margin-inline: auto; margin-block: 0; }

/* a trilha do exemplo e mais legivel que a da 02: ali ela e um fio que
   costura, aqui ela E a explicacao. Opacidade maior e seta na ponta. */
.exemplo .trilha__svg path { opacity: .62; marker-end: url(#seta-fluxo); }
.exemplo .trilha__svg marker path { fill: var(--verde); opacity: 1; stroke: none; }

/* =====================================================================
   05 · O CLIENTE VÊ ANTES  (wireframe 05 · Figma 125:366)
   ===================================================================== */
/* cabeçalho: título em 7 colunas (690px, o mesmo do Figma) e o apoio em 4,
   os dois alinhados pelo PÉ, como no desenho */
.ve__topo { align-items: end; }
.ve__apoio { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .ve__apoio { grid-column: 9 / span 4; }
}

/* mídia + promessa: 663 e 514 com 12 de vão, a proporção do Figma */
.ve__faixa {
  margin-top: var(--sec-s);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
}
@media (min-width: 900px) {
  .ve__faixa { grid-template-columns: minmax(0, 663fr) minmax(0, 514fr); align-items: stretch; }
}
.ve__midia { aspect-ratio: 663 / 360.5; border-radius: var(--r-card); overflow: hidden; }
.ve__midia img { width: 100%; height: 100%; object-fit: cover; }
.ve__promessa {
  display: grid; align-content: center; gap: var(--s-5);
  padding: var(--s-8) clamp(var(--s-6), 5.5vw, 82px);
}
.ve__promessa .destaque { color: var(--tinta); max-width: 18ch; }
/* precisa estar aqui: .card .v2 do sistema tem a MESMA especificidade que
   a regra de cor acima e vem antes no arquivo, entao perderia. Sem isto a
   frase sai em --tinta (contraste 17:1, mas azul escuro) em vez de verde. */
.ve__promessa .v2 { color: var(--verde-sup); }

/* os dois recursos, cada um numa faixa de superfície */
.ve__itens { margin-top: var(--s-5); display: grid; gap: var(--s-5); }
/* lado a lado a partir de 900: cada item tem tres linhas de texto e, em
   1200 de largura, metade do card ficava vazia */
@media (min-width: 900px) {
  .ve__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve__item { padding: var(--s-6); }
  .ve__item .item { max-width: none; }   /* `02 Leitura Automática de Planta` numa linha */
  .ve__ico { width: clamp(72px, 6.8vw, 96px); }
}
.ve__item {
  display: grid; gap: var(--s-6); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); padding: var(--s-7);
}
.ve__ico { width: clamp(88px, 10.4vw, 148px); height: auto; }
.ve__n { color: var(--verde); }
/* o .bloco nasce `justify-items: start`. No card empilhado isso da ao <h3>
   uma caixa do tamanho do texto, encostada na esquerda, e o
   `text-align: center` centraliza DENTRO dessa caixa curta: o titulo saia
   22px fora do eixo do resto do card. O paragrafo nao denunciava porque
   quebra em duas linhas e ja ocupa a coluna inteira. */
.ve__item .bloco { justify-items: center; }
@media (min-width: 768px) {
  .ve__item .bloco { justify-items: start; }
  .ve__item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-6);
    justify-items: start; text-align: left;
  }
}

/* =====================================================================
   06 · BRAÇO DIREITO NO WHATSAPP  (wireframe 06 · Figma 125:437)
   ===================================================================== */
/* a quebra do titulo e decidida na mao: com 20ch o "novo" caia na segunda
   linha e o verde comecava no meio dela */
.tit--largo { max-width: 34ch; }

.wpp {
  margin-top: var(--sec-s);
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6); align-items: center;
  padding: clamp(var(--s-6), 4.6vw, 60px);
}
@media (min-width: 900px) {
  .wpp {
    grid-template-columns: minmax(0, 315fr) minmax(0, 712fr);
    gap: clamp(var(--s-5), 2.6vw, 40px);
    padding: 0 clamp(var(--s-6), 5.6vw, 73px);
  }
  /* o mascote apoia no pé do painel, como no Figma */
  .wpp__mascote { align-self: end; margin-top: var(--s-8); }
  .wpp__lado { padding-block: clamp(var(--s-7), 5.9vw, 76px); }
}
/* `block` para o <img> nao deixar a folga de linha de base embaixo: e ela
   que abriria um vao entre o pe do mascote e a borda do painel */
.wpp__mascote img { width: 100%; height: auto; display: block; }
/* no mobile o mascote sai de dentro do painel e fica em pe SOBRE ele,
   com o pe encostado na borda de cima (mesma ancoragem da .ind__mascote:
   `bottom: 100%`, pelo PE, para acompanhar o painel se ele crescer).
   Como absoluto nao reserva espaco, a margem de cima soma a altura exata
   da figura: largura x 706/420 = largura x 1.681. A largura mora numa
   variavel para os dois nunca saírem de sincronia, e o teto de 240px
   segura a figura em tablet, onde 46vw ja passaria de 400px. */
@media (max-width: 899px) {
  .wpp {
    position: relative; --masc-w: min(46vw, 240px);
    margin-top: calc(var(--sec-s) + var(--masc-w) * 1.681);
  }
  .wpp__mascote {
    position: absolute; bottom: 100%; left: 0; right: 0;
    margin-inline: auto; width: var(--masc-w);
  }
}

.wpp__intro { color: var(--branco); max-width: 26ch; }
.wpp__perguntas { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.wpp__perguntas li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s-5);
  align-items: start;
  font-size: var(--t-item); line-height: 1.25; letter-spacing: -.02em;
}
/* a lupa é o vetor exportado do Figma, 26,42px */
.wpp__lupa { width: 26px; height: 26px; margin-top: .2em; color: var(--branco); flex: 0 0 auto; }

/* cursor de digitação: só aparece enquanto o JS esta escrevendo aquela
   pergunta (main.js marca `data-digitando` no <li>). ::after, nao um
   <span> extra, porque o texto muda de tamanho a cada tecla e o cursor
   tem que seguir a ponta sem virar item novo do grid de 2 colunas. */
@media (prefers-reduced-motion: no-preference) {
  .wpp__perguntas li[data-digitando="true"] .wpp__q::after {
    content: ''; display: inline-block; width: 2px; height: .95em;
    margin-left: 2px; margin-bottom: -.15em;
    background: var(--verde); animation: cursor-pisca 1s step-end infinite;
  }
}
@keyframes cursor-pisca { 50% { opacity: 0; } }

/* =====================================================================
   07 · ATENDIMENTO TREINADO 24h  (wireframe 07 · Figma 125:461/125:483)
   ===================================================================== */
.at {
  margin-top: var(--sec-s);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7); align-items: center;
}
@media (min-width: 900px) {
  /* 7a: coluna estreita de texto e as telas largas, a proporção do Figma */
  .at { grid-template-columns: minmax(0, 324fr) minmax(0, 675fr); gap: var(--s-7); }
  /* 7b: o celular no tamanho nativo, o método ocupa o resto */
  .at--metodo { grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
                gap: clamp(var(--s-7), 5.6vw, 73px); align-items: start; }
}
.at__telas img, .at__fone img { width: 100%; height: auto; }
/* no mobile o celular do metodo sai: empilhado ele vira uma tela de altura
   inteira antes do titulo, e as cinco fases sao o assunto de 7b */
@media (max-width: 899px) { .at__fone { display: none; } }
.at__lado .destaque { max-width: none; }

/* a negativa: vermelho de TEXTO, que é outro tom do vermelho de superfície */
.at__nao {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-destaque); line-height: 1.05; letter-spacing: -.035em;
  color: var(--alerta-txt);
}
.at__nao svg { width: .9em; height: .9em; flex: 0 0 auto; }

/* as cinco fases: só texto, sem caixa, como no Figma */
.fases { margin-top: var(--s-7); display: grid; gap: var(--s-6); }
.fase { display: grid; gap: var(--s-2); }
.fase__t {
  font-size: var(--t-lead); line-height: 1.25; font-weight: 500;
  letter-spacing: -.01em; color: var(--branco); max-width: none;
}
.fase__d {
  font-size: var(--t-corpo); line-height: 1.5; color: var(--corpo);
  max-width: var(--m-corpo); text-wrap: pretty;
}

/* =====================================================================
   08 · PROSPECÇÃO 24 HORAS  (wireframe 08 · sem frame no Figma)
   Imagem à esquerda e a escada dos cinco passos à direita, distribuída
   para o passo 01 encostar no topo da imagem e o 05 no pé dela.
   ===================================================================== */
.pr__par {
  margin-top: var(--sec-s);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7);
  /* a escada nao estica para casar com a arte: vao fixo, e ela se centra
     na altura. Esticada, os vaos saiam 146/120/146/119. */
  align-items: center;
}
@media (min-width: 900px) {
  .pr__par { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
}
.pr__midia { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; }
.pr__midia img { width: 100%; height: 100%; object-fit: cover; }

/* space-between encosta o primeiro no topo e o último no pé: é o que
   alinha a escada com a imagem. O filete é UM só, atrás de tudo, porque
   com espaçamento distribuído não dá para costurar item a item. */
.pr__escada {
  position: relative; display: grid; align-content: start;
  gap: var(--s-6);
}
.pr__escada::before {
  content: ""; position: absolute; left: 17.5px; top: 20px; bottom: 20px;
  width: 1px; background: var(--linha);
}
.pr__escada li { position: relative; padding-left: 60px; }
/* acende ao rolar: so o circulo do numero, nao a linha inteira (Henrique
   pediu para tirar o fundo verde do texto). Mesmo gatilho do .rv
   (data-in), so que aqui vira cor em vez de fade. */
.pr__n {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--verde); border-radius: 50%;
  background: var(--sup-0);         /* opaco: o círculo tapa o filete */
  font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .1em;
  color: var(--verde);
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out);
}
.pr__escada li[data-in="true"] .pr__n {
  background: var(--verde-sup); border-color: var(--verde-sup); color: var(--branco);
}
/* o texto ganha o mesmo peso dos subtitulos do metodo concierge (.fase__t,
   secao anterior): maior e branco, sem fundo. */
.pr__t {
  font-size: var(--t-lead); line-height: 1.35; font-weight: 500;
  letter-spacing: -.01em; color: var(--branco);
  max-width: 52ch; text-wrap: pretty; padding-top: 4px;
}

/* =====================================================================
   09 · SUA EMPRESA NA PALMA DA MÃO  (wireframe 09 · sem frame no Figma)
   Cartão branco grande, celular apoiado no pé dele.
   ===================================================================== */
.ind {
  position: relative;
  margin-top: var(--sec-s);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7); align-items: center;
  padding: var(--s-6) var(--s-6) 0;
}
/* o mascote acena ACIMA do cartao, sem sobrepor: posicionado fora do
   grid (absolute nao entra na grade) e ancorado pelo PE (bottom:100%),
   nao pelo topo -- assim ele sobe junto se o cartao crescer, sem
   recalcular, e o pe sempre bate exatamente na borda de cima. */
.ind__mascote {
  position: absolute; z-index: 1; right: clamp(20px, 5vw, 56px);
  bottom: 100%;                     /* pe encostado no topo do cartao, sem sobrepor */
  width: clamp(180px, 22.5vw, 285px); height: auto;
}
@media (min-width: 900px) {
  .ind {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(var(--s-7), 5vw, 72px);
    padding: var(--s-8) clamp(var(--s-7), 5vw, 72px) 0;
  }
  .ind__fone { align-self: end; }
}
/* o print do deck já vem cortado no meio da conversa, sem moldura embaixo.
   A esmaecida faz o corte ler como "a conversa continua" e derrete o pé do
   celular dentro do branco do cartão. */
.ind__fone img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
@media (max-width: 899px) { .ind__fone { width: 74%; justify-self: center; } }

.ind__lado .destaque { max-width: none; }   /* as quebras são fixas */
.ind__lado .prosa { color: var(--tinta); opacity: .78; }
/* dentro do cartão branco o colchete usa o verde de SUPERFÍCIE: o de texto
   dá 2.33:1 no branco e reprova como componente de interface */
.ind__realce { margin-top: var(--s-7); font-size: var(--t-lead); line-height: 1.35;
               letter-spacing: -.01em; color: var(--tinta); max-width: none; }
.ind__realce::before, .ind__realce::after { border-color: var(--verde-sup); }
/* no mobile o mascote sai (com o cartao estreito ele cobria o titulo) e a
   seção inteira passa a ler centralizada. O realce precisa de duas coisas
   aqui: `balance` para as linhas sairem parelhas, senao o canto de baixo
   fica pendurado longe da ultima linha curta, e menos padding, que em
   353px o vao entre o colchete e o texto virava um buraco. */
@media (max-width: 899px) {
  .ind__mascote { display: none; }
  #indicadores .bloco { justify-items: center; text-align: center; }

  /* No mobile o realce sai do quadro branco e vai para o navy, como o fecho
     da seção 12. Nenhum filho consegue desenhar fora do fundo do pai: ou o
     nó sai do container, ou o fundo deixa de ser pintado pelo container.
     Aqui é a segunda saída, porque a primeira mexeria no HTML e o desktop
     (onde o realce dentro do cartão foi aprovado) continuaria igual só na
     base de sorte. Então: `.ind__lado` vira `display: contents` (a caixa
     dele some, os três parágrafos viram itens do grid do `.ind`), o `.ind`
     fica transparente e o branco passa a ser um `::before` ocupando SÓ as
     três primeiras linhas. O realce cai na quarta, já fora do branco.
     ⚠️ Com o `::before` ocupando linhas 1-3, o auto-placement empurraria os
     itens para a linha 4 em diante: por isso cada um leva `grid-row` fixo.
     E `justify-items` passa para o `.ind`, já que quem centralizava era a
     caixa do `.ind__lado`, que agora não existe. */
  .ind {
    background: none; padding: 0; border-radius: 0; row-gap: 0;
    justify-items: center;
  }
  .ind__lado { display: contents; }
  .ind::before {
    content: ""; grid-column: 1; grid-row: 1 / 4;
    /* `place-self: stretch` nao e detalhe: com o `justify-items: center` do
       pai o pseudo vazio encolhe para 0x0 e o branco simplesmente nao
       aparece -- foi o que aconteceu na primeira tentativa. */
    place-self: stretch;
    background: var(--card); border-radius: var(--r-card);
  }
  .ind__fone { grid-column: 1; grid-row: 1; margin-top: var(--s-6); }
  .ind__lado .destaque { grid-column: 1; grid-row: 2; margin-top: var(--s-7); }
  .ind__lado .prosa    { grid-column: 1; grid-row: 3; margin-bottom: var(--s-6); }
  .ind__lado .destaque,
  .ind__lado .prosa { padding-inline: var(--s-6); }  /* o respiro lateral era do padding do cartão */
  /* sobre o navy o realce troca de paleta: texto branco e colchete no verde
     de TEXTO. O `--verde-sup` existia para dar contraste no branco, e a
     regra `.card .v2` ainda casa (o nó continua dentro do .card no HTML). */
  .ind__realce {
    grid-column: 1; grid-row: 4;
    padding: var(--s-4) var(--s-5); text-wrap: balance;
    color: var(--branco);
  }
  .ind__realce .v2 { color: var(--verde); }
  .ind__realce::before, .ind__realce::after { border-color: var(--verde); }
}

/* =====================================================================
   10 · OBRAS, MEDIÇÕES E PRODUÇÃO  (wireframe 10 · sem frame no Figma)
   Bento aprovado em 02/set: a arte manda num ladrilho alto, os tres
   passos sobem empilhados ao lado dela, e o exemplo fecha numa faixa
   unica. O exemplo virou faixa porque os dois pares de medidas, soltos
   no mosaico, nao liam como parte do `Projecao x Medicao real`.
   ===================================================================== */
.ob {
  margin-top: var(--sec-s);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter);
}
@media (min-width: 900px) {
  .ob { grid-template-columns: repeat(12, minmax(0, 1fr));
        /* 1fr iguala os tres degraus: o terceiro passo tem uma linha a
           menos de texto e sem isso a escada sai desigual */
        grid-template-rows: repeat(3, 1fr) auto; }
  /* a arte vence a altura dos tres passos: 3 x 208 + 2 x 24 = 672 */
  .ob__midia { grid-column: span 7; grid-row: 1 / span 3; }
  .ob__c     { grid-column: span 5; }
  .ob__ex    { grid-column: span 12; }
}

/* o ladrilho e o painel do sistema: mesma superficie, borda e raio */
.ob__c, .ob__ex {
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-5);
  display: grid; align-content: start; gap: var(--s-3);
}

/* no mobile a coluna e unica e a arte precisa de proporcao propria; no
   desktop ela estica com a escada dos tres passos.
   6/5 e o teto: a foto e quase quadrada (690x673) e o `cover` corta pelo
   centro, entao a partir de 1.24 a moldura verde da janela perde o lado de
   cima. Em 6/5 sobra folga de 6px e o contorno inteiro aparece. */
.ob__midia { aspect-ratio: 6 / 5; border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 900px) { .ob__midia { aspect-ratio: auto; } }

.ob__ico { display: block; color: var(--verde); margin-bottom: var(--s-2); }
.ob__ico svg { width: 30px; height: 30px; }
.ob__t {
  font-size: var(--t-lead); line-height: 1.25; font-weight: 500;
  letter-spacing: -.01em; color: var(--branco); max-width: none;
}
.ob__d { font-size: var(--t-corpo); line-height: 1.5; color: var(--corpo);
         max-width: none; text-wrap: pretty; }

/* ---- a faixa do exemplo: titulo, as duas medidas e a conclusao ------ */
.ob__ex { padding: var(--s-7) var(--s-6); gap: var(--s-6); }
@media (min-width: 900px) {
  .ob__ex { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
            column-gap: clamp(var(--s-6), 3.4vw, 48px); align-items: center; }
  .ob__ex__cab { grid-column: 1; }
  .ob__pares   { grid-column: 2; }
  .ob__fim     { grid-column: 1 / -1; }
}
.ob__ex__cab { display: grid; justify-items: start; gap: var(--s-3); }
.ob__ex__cab .destaque { max-width: none; }

.ob__pares { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
/* em 353px os dois lado a lado deixam 91px por medida e o numero quebra */
@media (min-width: 640px) { .ob__pares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob__par {
  display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--r-card);
  background: hsl(227 30% 100% / .05);
}
.ob__par--real { background: hsl(137 45% 54% / .10); }
/* min-height reserva DUAS linhas sempre: o rotulo do orcamento quebra,
   o da obra nao. Sem isso os dois .ob__num nascem em alturas diferentes
   e a comparacao lado a lado nao bate o olho na mesma linha. */
.ob__rot {
  font-size: var(--t-eyebrow); line-height: 1.35; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--apagado);
  max-width: none; display: block; min-height: calc(1.35em * 2);
}
/* o numero e o que o olho pega primeiro. Figuras tabulares para os dois
   pares alinharem virgula com virgula. */
.ob__num {
  font-size: clamp(1.75rem, 1.05rem + 2.8vw, 2.75rem); line-height: 1;
  font-weight: 400; letter-spacing: -.04em; color: var(--branco);
  font-variant-numeric: tabular-nums; max-width: none; margin-top: var(--s-2);
}
.ob__par--real .ob__num { color: var(--verde); font-weight: 700; }

/* vermelho de TEXTO: o de superficie reprovaria sobre o navy */
.ob__fim {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-4);
  align-items: start; padding: var(--s-5); border-radius: var(--r-card);
  background: hsl(2 78% 64% / .09);
  border: 1px solid color-mix(in srgb, var(--alerta-txt) 34%, transparent);
}
.ob__fim svg { width: 30px; height: 30px; color: var(--alerta-txt); }
.ob__fim p {
  font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.01em;
  color: var(--branco); max-width: none;
}

.ob__fecho {
  grid-column: 1 / -1; padding-top: var(--s-5);
  border-top: 1px solid var(--linha); color: var(--corpo); max-width: none;
}

/* =====================================================================
   11 · GESTÃO DE PRODUÇÃO E INSTALAÇÃO  (wireframe 11 · sem frame)
   Sem arte, de proposito: e a virada de capitulo da pagina. O `.ve__apoio`
   das outras secoes tem 4 colunas, apertado demais para o unico conteudo
   desta; aqui o lado direito abre para 6.
   ===================================================================== */
.pi__lado { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .pi__lado { grid-column: 7 / span 6; }
}
.pi__lado .lead, .pi__lado .prosa { max-width: none; }
.pi__lado .prosa { margin-top: var(--s-5); }

/* Larga: o conteudo e uma agenda, e tela e sempre mais larga que alta.
   `display: block` e obrigatorio aqui: e um <span>, e sem isso fica
   `inline` (o .ob__midia equivalente escapa disso so porque e item de
   grid, que blockifica sozinho; este e filho de .wrap, um bloco comum).
   Um <span> inline com <img> block dentro devolve bounding rect certo
   no getBoundingClientRect, mas o IntersectionObserver enxergava
   isIntersecting:false, ratio:0 -- a imagem existia mas nunca entrava,
   opacity travada em 0 para sempre. */
.pi__midia {
  display: block; position: relative;
  margin-top: var(--sec-s); aspect-ratio: 16 / 9;
  border-radius: var(--r-card); overflow: hidden;
}
/* o mascote fica DENTRO do quadro (o container recorta, ao contrario do
   .composta): centralizado embaixo, encostado no chao da foto (bottom:0)
   para nao dar sensacao de flutuar -- a sombra que passar do quadro, o
   overflow:hidden corta, e o efeito e o pe "pisando" na borda de baixo.
   ⚠️ Com a arte de 03/set o bone dele cobre o colchete verde de baixo do
   logo que esta dentro da imagem. Levantei isso e o Henrique decidiu
   manter assim. Nao mexer por conta propria numa proxima passada. */
.pi__mascote {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 49%; height: auto;
}
@media (min-width: 900px) {
  .pi__mascote { width: 26%; }
}

/* =====================================================================
   12 · FINANCEIRO SOB CONTROLE  (wireframe 12 · sem frame no Figma)
   Formato aprovado em 02/set (opcao A do opcoes-12.html): o video manda,
   largura inteira, e os seis itens viram uma faixa de ladrilhos embaixo
   dele. O fecho saiu de dentro do bloco e virou o 12b.
   ===================================================================== */
/* 71/32 (2,21:1) e a proporcao NATIVA da arte do Henrique. Nao da para
   forcar o 5/2 antigo aqui: a arte tem as bordas de cima e de baixo
   esmaecendo em alfa, e o `object-fit: cover` cortaria justo essa faixa,
   deixando um corte reto no meio do esmaecimento. Em 1200 de largura da
   541px de altura, mas ~40% disso e veu transparente: a mancha solida da
   arte ficou MENOR que os 480px cheios de antes. */
/* `display: block` e obrigatorio: e um <span>, e sem isso fica `inline`.
   Mesma licao da .pi__midia logo acima: o getBoundingClientRect devolve o
   retangulo certo, mas o IntersectionObserver enxerga isIntersecting:false
   e a abertura do clip-path nunca dispara. */
.fi__video {
  display: block;
  margin-top: var(--sec-s); aspect-ratio: 71 / 32;
  border-radius: var(--r-card); overflow: hidden;
}
.fi__video img { width: 100%; height: 100%; object-fit: cover; }

.fi__itens {
  margin-top: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter);
}
@media (min-width: 640px) { .fi__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fi__itens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fi__i {
  display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: var(--s-3);
  align-items: center; background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); padding: var(--s-5);
  font-size: var(--t-lead); color: var(--branco);
}
.fi__ck { display: block; color: var(--check); }
.fi__ck svg { width: 21px; height: 21px; }

/* 12b · o fecho: bloco proprio, centrado e em corpo de destaque.
   As tres quebras sao fixas; em duas as linhas ficam desiguais demais. */
.fi__fecho { margin-top: var(--sec-m); display: grid; justify-items: center;
             text-align: center; }
.fi__q {
  font-size: var(--t-destaque); line-height: 1.15; letter-spacing: -.03em;
  color: var(--branco); max-width: none;
}

/* =====================================================================
   13 · NENHUM CLIENTE ESQUECIDO (CRM)  (wireframe 13 · sem frame)
   Opcao B, aprovada em 02/set: cabecalho split, e o pipeline mais o
   fecho num painel so. O fecho desceu de 40px para 22px, e o destaque
   dele vem do fundo verde, nao do corpo da letra.
   ===================================================================== */
.crm__t { max-width: none; }   /* as quebras sao fixas */
@media (min-width: 768px) {
  .crm__apoio { grid-column: 8 / span 5; }
}
.crm__apoio .prosa { max-width: none; }
.crm__apoio .prosa + .prosa { margin-top: var(--s-4); }

/* a arte traz uma nevoa escura larga em volta. Solta no navy ela e a
   mancha borrada reprovada; dentro da caixa vira vinheta do painel. */
.crm__painel {
  margin-top: var(--sec-s);
  background: var(--sup-1); border: 1px solid var(--borda);
  border-radius: var(--r-card); overflow: hidden;
}
.crm__painel img { width: 100%; height: auto; }

/* o pe: verde de SUPERFICIE, o unico que passa com texto branco (4.68:1).
   O de texto (--verde) daria 2.33:1 e reprovaria. */
.crm__pe {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3);
  align-items: center; padding: var(--s-5) var(--s-6);
  background: var(--verde-sup); color: var(--branco);
  font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.01em;
  max-width: none;
}
.crm__pe svg { width: 20px; height: 20px; }

/* =====================================================================
   14 · CONVERSÃO  (wireframe 14 · sem frame no Figma)
   A unica acao do site. O cartao e BRANCO porque e o momento de decisao
   e precisa ser a coisa mais clara da tela; isso obriga uma versao clara
   dos campos, que mora aqui e nao no sistema (e o unico lugar que usa).
   ===================================================================== */
.conv__t { max-width: none; }   /* as quatro quebras sao fixas */

/* Opcao A, aprovada em 02/set: a coluna da esquerda leva o argumento
   INTEIRO (eyebrow, titulo, os dois paragrafos e os tres passos) e o
   formulario fica ao lado. Os passos ficam grudados no formulario, que
   e onde a duvida de entregar o telefone aparece. */
.conv { align-items: start; }
@media (min-width: 900px) {
  .conv__lado { grid-column: 1 / span 5; }
  .conv__card { grid-column: 7 / span 6; }
}
.conv__lado { display: grid; align-content: start; justify-items: start; }
.conv__lado > * { margin: 0; }
/* em 486px o titulo de 52px quebra em seis linhas */
.conv__lado .titulo { margin-top: var(--s-3); font-size: var(--t-destaque);
                      letter-spacing: -.035em; }
.conv__lado .lead  { margin-top: var(--s-6); max-width: none; }
.conv__lado .prosa { margin-top: var(--s-4); max-width: none; }

.conv__passos {
  width: 100%; margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: 1px solid var(--linha);
}
.conv__passos__r {
  display: block; font-size: var(--t-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--apagado);
}
.conv__passos__l { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.conv__passos__l li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--s-4); align-items: start;
}
.conv__n {
  grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--verde); border-radius: 50%;
  font-size: var(--t-corpo); color: var(--verde);
}
.conv__pt { font-size: var(--t-lead); line-height: 1.3; font-weight: 500;
            letter-spacing: -.01em; color: var(--branco); }
.conv__pd { font-size: var(--t-corpo); line-height: 1.5; color: var(--corpo);
            margin-top: 2px; }

.conv__card { width: 100%; padding: var(--s-6) var(--s-5); }
/* em 393px os 48px de folga dos dois lados deixam o campo com 257px.
   O respiro generoso so entra quando ha largura para ele. */
@media (min-width: 560px) { .conv__card { padding: var(--s-7) var(--s-7); } }
.conv__chamada {
  font-size: var(--t-item); line-height: 1.25; font-weight: 500;
  letter-spacing: -.02em; color: var(--tinta); max-width: none;
  margin-bottom: var(--s-6);
}
.conv__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

/* ---------- etapas [24/set] --------------------------------------------
   O formulario virou qualificacao (pedido do Israel): 8 perguntas em tres
   etapas. A grade de duas colunas mudou do <form> para cada etapa, porque
   agora e a etapa que segura os campos. */
.etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.etapas__barra { height: 4px; border-radius: 2px; background: hsl(227 30% 90%);
                 transition: background var(--dur-ui) var(--ease-io); }
.etapas__barra[data-feito="true"] { background: var(--verde-sup); }
.etapas__conta {
  margin-top: calc(var(--s-5) * -1 + var(--s-3)); max-width: none;
  font-size: var(--t-eyebrow); font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; color: var(--tinta); opacity: .68;
}

.etapa, .grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.etapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.etapa[hidden] { display: none; }
@media (min-width: 560px) {
  .etapa { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .etapa > *:not(.campo--meio) { grid-column: 1 / -1; }
  /* as perguntas do Israel sao longas e quebram em alturas diferentes:
     o campo desce para a base da linha, e as caixas ficam alinhadas */
  .etapa > .campo--meio { align-self: end; }
}
/* legend de fieldset nao e item de grade: o espaco ate o primeiro campo
   sai da margem dele, nao do gap */
.etapa__t {
  float: left; width: 100%; padding: 0; margin-bottom: 0;
  font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em; color: var(--tinta);
}
.etapa__t + * { clear: both; }

.grupo { display: grid; gap: var(--s-3); }
.grupo > legend {
  float: left; width: 100%; padding: 0; margin-bottom: var(--s-3);
  font-size: var(--t-corpo); color: var(--tinta); opacity: .78;
}
.grupo > legend + * { clear: both; }
.grupo__ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.op {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-padrao);
  padding: 10px 14px; border: 1px solid hsl(227 18% 58%); border-radius: var(--r-chip);
  background: hsl(227 30% 97%); color: var(--tinta); font-size: var(--t-corpo); line-height: 1.35;
  cursor: pointer; transition: border-color var(--dur-micro) var(--ease-io),
                               background var(--dur-micro) var(--ease-io);
}
.op input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--verde-sup); }
.op:has(input:checked) { border-color: var(--verde-sup); background: hsl(137 45% 30% / .08); }
.op:has(input:focus-visible) { outline: 2px solid var(--verde-sup); outline-offset: 2px; }
.grupo[data-erro="true"] .op { border-color: var(--alerta); }
.grupo__erro { font-size: var(--t-eyebrow); color: var(--alerta); max-width: none; }

.campo[hidden] { display: none; }
.campo__opc { opacity: .72; }
.campo__ajuda { font-size: var(--t-eyebrow); line-height: 1.45; color: var(--tinta); opacity: .68; }
/* opcoes de frase inteira nao cabem duas por linha sem quebrar */
.grupo__ops--1 { grid-template-columns: minmax(0, 1fr); }

.etapa__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5);
              margin-top: var(--s-2); }
.etapa__nav .btn { flex: 1 1 auto; margin-top: 0; }
.etapa__volta {
  flex: none; min-height: var(--h-padrao); padding: 0 var(--s-2);
  background: none; border: 0; color: var(--tinta); font-size: var(--t-corpo);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.etapa__volta:focus-visible { outline: 2px solid var(--verde-sup); outline-offset: 2px; }

/* campos claros: o `.campo` do sistema e feito para o navy */
.conv__card .campo label { color: var(--tinta); opacity: .78; }
.conv__card .campo input,
.conv__card .campo select {
  background: hsl(227 30% 97%); color: var(--tinta);
  /* a borda precisa de 3:1 com o branco do cartao para passar como
     componente de interface. hsl(227 18% 58%) da 3.14:1. */
  border: 1px solid hsl(227 18% 58%);
}
.conv__card .campo input::placeholder { color: var(--tinta); opacity: .5; }
.conv__card .campo input:focus-visible,
.conv__card .campo select:focus-visible {
  outline: 2px solid var(--verde-sup); outline-offset: 2px; border-color: transparent;
}
.conv__card .campo input:user-invalid,
.conv__card .campo select:user-invalid,
.conv__card .campo [data-invalido="true"] { border-color: var(--alerta); }

.conv__btn { margin-top: var(--s-2); }
.conv__consent {
  font-size: var(--t-eyebrow); line-height: 1.45; color: var(--tinta);
  opacity: .68; max-width: none;
}

/* a isca fica fora da tela sem `display:none`: campo escondido assim
   ainda e preenchido por robo, que e exatamente o que queremos medir */
.conv__isca {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.conv__aviso {
  display: none; font-size: var(--t-corpo); line-height: 1.45;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-chip); max-width: none;
}
.conv__aviso[data-show="true"] { display: block; }
.conv__aviso--ok  { background: hsl(137 45% 30% / .12); color: var(--tinta); }
.conv__aviso--ok .lk { color: var(--verde-sup); font-weight: 500; }
.conv__aviso--ok .lk::after { background: var(--verde-sup); }
.conv__aviso--err { background: hsl(2 78% 45% / .10); color: var(--alerta); }

/* =====================================================================
   15 · FECHO  (wireframe 15 · slide 22 · sem frame no Figma)
   A ultima. A hierarquia entre as duas frases E o argumento: a primeira
   e o estado de hoje, apagada; a segunda e a virada, grande e verde.
   ===================================================================== */
/* mesmo video da hero ao fundo: entra so quando a secao se aproxima da
   tela (main.js), nao no carregamento da pagina -- ela e o fim do
   scroll, boa parte de quem abre nunca chega la. */
.fim { isolation: isolate; overflow: clip; }
.fim__fundo { position: absolute; inset: 0; z-index: -2; }
.fim__fundo > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.fim__fundo video { opacity: 0; transition: opacity .6s var(--ease-out); }
.fim__fundo video[data-pronto="true"] { opacity: 1; }
/* fecha em --sup-0 nas duas pontas (em cima E embaixo, ao contrario do
   veu da hero, que so fecha embaixo): aqui o video esta cercado pela
   pagina dos dois lados. */
.fim__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--sup-0) 0%, transparent 24%,
                    transparent 76%, var(--sup-0) 100%),
    hsl(227 55% 9% / .6);
}
.fim .wrap { display: grid; justify-items: center; text-align: center; position: relative; z-index: 1; }
.fim__marca { width: clamp(140px, 13vw, 196px); height: auto; margin-bottom: var(--s-6); }
.fim__hoje {
  font-size: var(--t-item); line-height: 1.35; font-weight: 400;
  letter-spacing: -.01em; color: var(--apagado); max-width: none;
}
.fim__virada {
  margin-top: var(--s-6);
  font-size: var(--t-titulo); line-height: 1.1; font-weight: 400;
  letter-spacing: -.04em; color: var(--branco); max-width: none;
}
.fim__cta { margin-top: var(--s-7); }   /* texto -> botao: 48, a escada do sistema */

/* =====================================================================
   MOLDURA: nav, rodape e o atalho do WhatsApp
   Nao sao secoes do wireframe. Sao a casca da pagina.
   ===================================================================== */

/* ---------- nav ------------------------------------------------------
   Opcao C, aprovada em 02/set: sem caixa nenhuma. Sobre a hero ela e
   invisivel; ao rolar aparece so um filete e um degrade leve atras, o
   suficiente para o texto nao brigar com o conteudo que passa. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-ui) var(--ease-io),
              border-color var(--dur-ui) var(--ease-io);
}
.nav[data-scrolled="true"] {
  border-bottom-color: var(--linha);
  background: linear-gradient(hsl(227 50% 11% / .92), hsl(227 50% 11% / .72));
  /* o pe do degrade deixa passar 28% do que esta atras; o desfoque
     impede que texto de fundo apareca legivel debaixo dos links */
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nav__in {
  display: flex; align-items: center; gap: var(--s-7);
  width: 100%; max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto; padding: var(--s-5) var(--pad);
}

/* a nav e fixa: sem isso o clique numa ancora do indice para com o
   eyebrow da secao escondido embaixo dela */
:where(section, header, nav)[id] { scroll-margin-top: 88px; }

.nav__logo { display: block; }
.nav__logo img { width: clamp(132px, 11.4vw, 164px); height: auto; }
.nav__logo:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px;
                           border-radius: var(--r-chip); }

.nav__links { display: flex; gap: var(--s-5); margin-left: auto; }
.nav__links a {
  font-size: var(--t-corpo); color: var(--corpo); text-decoration: none;
  white-space: nowrap; transition: color var(--dur-micro) var(--ease-io);
}
.nav__links a:hover { color: var(--branco); }
.nav__links a:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px;
                              border-radius: var(--r-chip); }

.btn--sm {
  min-height: 40px; min-width: 0;
  padding: 0 var(--s-5); font-size: var(--t-corpo);
}
@media (max-width: 719px) {
  /* em 393px a marca, dois links e o botao nao cabem. Os links caem: o
     indice da secao 02 ja e o menu de funcionalidades, e o botao e a
     unica coisa aqui que o resto da tela nao repete. */
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__in { padding-block: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__links a { transition: none; }
}


/* ---------- rodape --------------------------------------------------- */
.rodape { border-top: 1px solid var(--linha); padding-block: var(--sec-s); }
.rodape__in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7);
}
@media (min-width: 768px) {
  .rodape__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
    column-gap: var(--gutter);
  }
  .rodape__meta { grid-column: 1 / -1; }
}
.rodape__marca img { width: 180px; height: auto; }
.rodape__tag {
  margin-top: var(--s-4); font-size: var(--t-corpo); line-height: 1.5;
  color: var(--apagado); max-width: 34ch;
}
.rodape__r {
  font-size: var(--t-eyebrow); line-height: 1.2; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--apagado);
  max-width: none; margin-bottom: var(--s-4);
}
.rodape__col ul { display: grid; gap: var(--s-3); }
.rodape__col a { font-size: var(--t-corpo); color: var(--corpo); }
.rodape__col a:hover { color: var(--branco); }
.rodape__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--linha);
  font-size: var(--t-eyebrow); color: var(--apagado);
}

/* ---------- o atalho do WhatsApp -------------------------------------
   Fiel ao app, por decisao do Henrique em 02/set: glifo oficial (balao
   com rabicho e fone) em branco sobre o verde do proprio WhatsApp,
   #25D366, e nao o verde da marca. E um simbolo de terceiro: as pessoas
   reconhecem pela cor antes de ler qualquer coisa.
   `env(safe-area-inset)` para nao sentar na barra do iPhone. */
.wa {
  position: fixed; z-index: 55;
  right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: #25D366; color: #FFFFFF;
  box-shadow: var(--sombra-caixa);
  transition: transform var(--dur-micro) var(--ease-io);
}
.wa svg { width: 32px; height: 32px; }
.wa:hover { transform: translateY(-2px); }
.wa:active { transform: translateY(0); }
.wa:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } }

/* =====================================================================
   PÁGINA LEGAL  (/privacidade)
   Coluna única de leitura. Nao inventa componente: usa os mesmos tokens,
   so define o ritmo de um texto corrido longo, que a home nao tem.
   ===================================================================== */
.legal { max-width: 68ch; margin-top: var(--sec-m); }
.legal > * + * { margin-top: var(--s-5); }
/* --t-item, nao --t-destaque: o h1 desta pagina e --t-titulo (52px no
   desktop) e o destaque da 40px. Um degrau de 1,3x entre o unico h1 e os
   nove h2 nao le como hierarquia, le como dois titulos do mesmo tamanho.
   Em 28px a escada aparece. (hierarquia por tamanho, nao por peso) */
.legal h2 {
  margin-top: var(--s-8);
  font-size: var(--t-item); line-height: 1.2; font-weight: 500;
  letter-spacing: -.02em; max-width: 26ch; color: var(--branco);
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--corpo); text-wrap: pretty; }
.legal ul { display: grid; gap: var(--s-3); padding-left: var(--s-5); }
.legal li { list-style: disc; }
.legal li::marker { color: var(--verde); }
.legal__data {
  display: block; margin-top: var(--s-5);
  font-size: var(--t-eyebrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--apagado);
}

/* =====================================================================
   PÁGINA DE LINKS  (/links)
   Destino do link da bio do Instagram e do material da FESQUA. Coluna
   única, curta, feita para o polegar, sobre o mesmo vídeo da hero.
   Nao inventa componente novo: os quatro botoes sao um so componente
   (`.links__item`), e o do WhatsApp muda de cor, nao de tamanho.
   ===================================================================== */
.links {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-content: center;
  /* svh, nao vh: no celular o `vh` conta a barra do navegador que nao
     esta la, e a coluna centralizada nasce empurrada para baixo */
  min-height: 100svh;
  /* padding curto de proposito: com `align-content: center` ele so entra
     na conta quando o conteudo passa da tela, e e ai que ele decide se a
     pagina rola ou nao. Em 1440x900 o --sec-s (80px em cima e embaixo)
     era o que empurrava o rodape para fora da dobra. */
  padding-block: var(--s-6);
  text-align: center;
}
/* `fixed`, nao `absolute`: se a coluna crescer e a pagina rolar (tela
   baixa, fonte grande), o fundo fica parado em vez de rolar junto e
   descobrir o navy embaixo */
.links__fundo { position: fixed; inset: 0; z-index: -2; }
/* o veu tem uma tarefa so: segurar o contraste do titulo branco e do
   verde sobre um video que muda de brilho o tempo todo. Por isso ele e
   mais forte no topo e na base, e abre no meio, onde ficam os botoes,
   que ja tem fundo proprio. */
.links__veu {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, hsl(227 55% 9% / .88) 0%, hsl(227 55% 9% / .58) 45%,
                    hsl(227 55% 9% / .88) 100%),
    radial-gradient(120% 80% at 50% 42%, transparent 0%,
                    hsl(227 55% 9% / .35) 65%, hsl(227 55% 9% / .62) 100%);
}

/* 460px e medida de alcance do polegar, nao de leitura: no desktop a
   pagina continua sendo a mesma coluna, so centrada em mais ar */
.links__in {
  max-width: calc(460px + 2 * var(--pad));
  display: grid; justify-items: center;
}

.links__topo { display: grid; justify-items: center; }
.links__perfil { width: clamp(120px, 32vw, 160px); height: auto; }
.links__titulo { margin-top: var(--s-5); max-width: 16ch; }
.links__tag {
  margin-top: var(--s-5); max-width: 34ch;
  color: var(--corpo); text-wrap: balance;
}

.links__lista {
  display: grid; gap: var(--s-3);
  /* --s-7 fixo, e nao --sec-s: o respiro de secao cresce com a largura
     da tela, e aqui o que aperta e a ALTURA. Em 1440x900 o rodape caia
     para fora da dobra so por causa desses dois vaos. */
  width: 100%; margin-top: var(--s-7);
}
/* os quatro botoes: mesma altura, mesma borda, mesmo raio, mesmo corpo
   de letra. So a cor separa a acao principal das outras tres. */
.links__item {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--h-destaque); padding: 0 var(--s-5);
  border: 1px solid var(--borda); border-radius: var(--r-botao);
  background: var(--sup-1); color: var(--branco);
  font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; text-align: center;
  transition: border-color var(--dur-micro) var(--ease-io),
              background var(--dur-micro) var(--ease-io),
              transform var(--dur-micro) var(--ease-io);
}
/* o verde de SUPERFICIE, o mesmo do .btn da home: o de texto reprova
   como fundo de botao com letra branca */
.links__item--cta { background: var(--verde-sup); border-color: var(--verde-sup); }
.links__item:hover { border-color: var(--verde); background: var(--sup-2); }
.links__item--cta:hover { background: var(--verde-sup); border-color: var(--verde); }
.links__item:active { transform: translateY(1px); }
.links__item:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
/* o icone e verde nos tres de baixo e branco no CTA: sobre o verde de
   superficie, verde em cima de verde nao se le */
.links__ico { width: 22px; height: 22px; flex: 0 0 22px; color: var(--verde); }
.links__item--cta .links__ico { color: currentColor; }

.links__marca { width: clamp(150px, 38vw, 190px); margin-top: var(--s-7); }

.links__pe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--t-eyebrow); color: var(--apagado);
}

@media (prefers-reduced-motion: reduce) { .links__item { transition: none; } }

/* =====================================================================
   LIGHTBOX DO VÍDEO  (/links)
   O <dialog> nativo vem com estilo de agente do usuario que precisa ser
   desmontado: largura de conteudo, `max-width: calc(100% - 6px - 2em)`,
   margem automatica, borda solida e fundo branco. Sem zerar tudo isso
   ele nasce como uma caixinha branca no meio da tela.
   ===================================================================== */
.lb {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: var(--s-5); border: 0; background: transparent;
  display: grid; place-items: center; overflow: hidden;
  color: var(--branco);
}
.lb:not([open]) { display: none; }

/* o mesmo veu da pagina, so que chapado: aqui nao ha texto para proteger,
   ha uma peca para isolar do fundo */
.lb::backdrop { background: hsl(227 55% 9% / .88); }

.lb__player {
  width: min(100%, 1100px); height: auto; aspect-ratio: 16 / 9;
  display: block; border-radius: var(--r-painel);
  /* preto, nao --sup-1: e a moldura de um video, e barra preta ao lado de
     video e o que o olho espera. O contorno verde e o mesmo da home. */
  background: #000;
  box-shadow: 0 0 0 1px hsl(137 45% 54% / .72), var(--sombra-caixa);
}

/* ⚠️ Fora do fluxo e ancorado no DIALOG, nao no video: no celular deitado
   o video ocupa quase a tela toda e um botao acima dele sairia do campo.
   `position: fixed` porque o dialog modal ja vive na top layer. */
.lb__fechar {
  position: fixed; top: var(--s-5); right: var(--s-5);
  display: grid; place-items: center;
  width: 44px; height: 44px;            /* alvo de toque minimo */
  padding: 10px; border: 0; border-radius: 50%;
  background: hsl(227 50% 11% / .72); color: var(--branco);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-io);
}
.lb__fechar svg { width: 100%; height: 100%; }
.lb__fechar:hover { background: var(--verde-sup); }
.lb__fechar:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* o dialog modal ja deixa o resto da pagina inerte, mas o Chrome continua
   rolando o fundo atras dele */
html:has(.lb[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .lb__fechar { transition: none; } }

/* =====================================================================
   POP-UP DO FORMULÁRIO  (home e /links) [24/set]
   Mesmo desmonte do <dialog> que o lightbox. O que vai dentro é o
   `.conv__card` de sempre, com os campos claros que ele já tem.
   ⚠️ `margin: auto` na caixa e não `place-items: center` no dialog: com
   centro de grade, a parte de cima de um formulário mais alto que a tela
   fica fora de alcance da rolagem.
   ===================================================================== */
.pop {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: var(--s-5); border: 0; background: transparent;
  display: grid; overflow-y: auto; overscroll-behavior: contain;
}
.pop:not([open]) { display: none; }
.pop::backdrop { background: hsl(227 55% 9% / .88); }

.pop__caixa { position: relative; width: min(100%, 640px); margin: auto; outline: none; }
.pop .conv__card { box-shadow: var(--sombra-caixa); }
.pop__t {
  font-size: var(--t-item); line-height: 1.25; font-weight: 500;
  letter-spacing: -.02em; color: var(--tinta); max-width: none;
  margin-bottom: var(--s-6); padding-right: var(--s-7);
}
.pop .conv__chamada { padding-right: var(--s-7); }

.pop__fechar {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px;            /* alvo de toque minimo */
  padding: 10px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: background var(--dur-micro) var(--ease-io);
}
.pop__fechar svg { width: 100%; height: 100%; }
.pop__fechar:hover { background: hsl(227 30% 93%); }
.pop__fechar:focus-visible { outline: 2px solid var(--verde-sup); outline-offset: 2px; }

html:has(.pop[open]) { overflow: hidden; }

/* celular: tela cheia, subindo de baixo. Três etapas e até onze perguntas
   não cabem numa caixinha no meio. */
@media (max-width: 559px) {
  .pop { padding: 0; }
  .pop__caixa { width: 100%; min-height: 100%; margin: 0; }
  .pop .conv__card { min-height: 100dvh; border-radius: 0; box-shadow: none;
                     padding-top: var(--s-6); }
}
@media (prefers-reduced-motion: no-preference) {
  .pop[open] .pop__caixa { animation: pop-entra var(--dur-ui) var(--ease-out); }
  @media (max-width: 559px) {
    .pop[open] .pop__caixa { animation-name: pop-sobe; }
  }
}
@keyframes pop-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop-sobe  { from { transform: translateY(100%); } }

/* =====================================================================
   CALCULADORA DE ITENS  (/calculadora) [28/set/2026]
   Pagina escondida (noindex, fora do menu): o vendedor abre com o cliente
   ao lado, no fim da 1a reuniao, e clica no que ele quer contratar.
   Reaproveita o sistema quase inteiro (.painel, .campo, .op, .btn, .card,
   .grid, .wrap, .sec, .selo, .conv__isca); novo aqui e so o carrinho:
   o item com preco (.calc-item), o contador (.stepper) e o resumo que
   vira PDF por window.print(), sem biblioteca nenhuma.
   ===================================================================== */
.calc__cab .lead { max-width: var(--m-lead); }
/* mesmo motivo do #calc-final: "Editar a selecao" rola de volta pra ca,
   e e uma div, fora da regra global de section/header/nav com id */
#calc-interativo { scroll-margin-top: var(--s-6); }

/* /calculadora: cabecalho so com a marca, sem links, e que rola junto
   (absolute no lugar do fixed); sem barra fixa, os sticky sobem */
.nav.nav--so-marca, .nav.nav--so-marca[data-scrolled] {
  position: absolute; background: none; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.calc__layout { display: grid; gap: var(--gutter); align-items: start; margin-top: var(--sec-s); }
@media (min-width: 900px) {
  .calc__layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.calc__miolo { display: grid; gap: var(--s-6); min-width: 0; }

/* ---------- contato e tipo: paineis escuros, campos e op de sempre ---- */
.calc-contato__t, .calc-tipo__legenda {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--s-4);
  font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em; color: var(--branco);
}
/* fieldset: a legenda nasce em cima da borda, fora do quadro. O float a
   devolve pra dentro do painel; margem e min-width zeram o recuo de 2px
   que o navegador da ao fieldset e desalinhava o quadro dos outros. */
.calc-tipo, .calc-grupo { margin: 0; min-width: 0; }
.calc-tipo__legenda, .calc-grupo__legenda { float: left; }
.calc-tipo > legend + *, .calc-grupo > legend + * { clear: both; }
/* `.campo__ajuda` nasce escura, pensada pro cartao branco do formulario;
   aqui, no painel escuro, precisa do par claro */
/* tres perfis lado a lado; no celular, um embaixo do outro. "PVC e Alumínio"
   segue a regra do PVC (lista completa, preco cheio: Israel, 29/set) */
.calc-tipo .grupo__ops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .calc-tipo .grupo__ops { grid-template-columns: minmax(0, 1fr); }
}
/* o .op do sistema nasce claro, pensado pro cartao branco do formulario;
   aqui ele mora direto no fundo escuro da pagina */
.calc-tipo .op { background: var(--sup-1); color: var(--branco); border-color: var(--borda); }
.calc-tipo .op:has(input:checked) {
  border-color: var(--verde-sup); background: hsl(137 45% 30% / .14);
}

/* ---------- essencial: fixo, com o contador de usuario extra ---------- */
.calc-essencial__cab { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.calc-essencial__nome {
  font-size: var(--t-item); font-weight: 500; letter-spacing: -.01em;
  color: var(--branco); max-width: none;
}
.calc-essencial__preco {
  margin-top: var(--s-2); font-size: var(--t-lead); font-weight: 500;
  color: var(--verde); max-width: none;
}
.calc-essencial__cheio {
  font-size: var(--t-corpo); font-weight: 400; color: var(--alerta-txt);
  margin-right: var(--s-1);
}
.calc-essencial__desc { margin-top: var(--s-3); max-width: none; }
.calc-essencial__extra { margin-top: var(--s-5); max-width: 260px; }

.stepper { display: inline-flex; align-items: center; gap: var(--s-3); }
.stepper__btn {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-chip);
  border: 1px solid var(--borda); background: var(--sup-1); color: var(--branco);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-io);
}
.stepper__btn:hover { border-color: var(--verde); }
.stepper__btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.stepper input { width: 64px; height: 40px; text-align: center; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- itens: linha inteira clicavel, com preco e descricao ------ */
.calc-itens { display: grid; gap: var(--s-5); }
.calc-grupo__legenda {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--s-3);
  font-size: var(--t-corpo); font-weight: 500; color: var(--branco);
}
.calc-grupo__desc { margin: 0 0 var(--s-3); color: var(--corpo); max-width: none; }
.calc-grupo__ops { display: grid; gap: var(--s-3); }

.calc-item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border: 1px solid var(--borda); border-radius: var(--r-card);
  background: var(--sup-1); cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-io), background var(--dur-micro) var(--ease-io);
}
.calc-item:has(input:checked) { border-color: var(--verde-sup); background: hsl(137 45% 30% / .10); }
.calc-item:has(input:focus-visible) { outline: 2px solid var(--verde-sup); outline-offset: 2px; }
.calc-item input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--verde-sup); }
.calc-item__corpo { display: grid; gap: 4px; min-width: 0; flex: 1; }
/* item solto (fora de grupo) usa o respiro do .painel: a caixa de marcar
   cai na mesma coluna dos titulos dos grupos e do texto do Essencial */
.calc-itens > .calc-item { padding: var(--s-5) var(--s-6); }
.calc-item__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.calc-item__nome { font-size: var(--t-corpo); font-weight: 500; color: var(--branco); }
.calc-item__preco { font-size: var(--t-corpo); color: var(--verde); margin-left: auto; white-space: nowrap; }
/* preço cheio riscado (promo), mesmo vermelho do riscado do Essencial */
.calc-item__cheio { color: var(--alerta-txt); margin-right: var(--s-1); }
.calc-item__desc { font-size: var(--t-eyebrow); line-height: 1.5; color: var(--apagado); }
.calc-item[hidden] { display: none; }

/* ---------- video das funcionalidades, no fim da lista de itens ----- */
.calc-video { display: flex; margin-top: var(--s-3); }
/* secundario do painel: uma linha so, mais baixo e menor que o "Ver resumo" */
.calc-video__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%;
  min-width: 0; min-height: 48px; padding-inline: var(--s-4);
  font-size: var(--t-corpo); white-space: nowrap;
}
.calc-video__btn svg { width: 20px; height: 20px; flex: none; color: var(--verde); }

/* ---------- status do envio, na linha de baixo do titulo do resumo ---- */
.lead[data-envio="enviando"] { opacity: .7; }
.lead[data-envio="ok"] { display: flex; align-items: flex-start; gap: var(--s-3); }
.lead[data-envio="ok"] strong { color: var(--verde); font-weight: 500; }
.calc-envio__ico { width: 1.25em; height: 1.25em; flex: none; margin-top: .15em; color: var(--verde); }
.lead[data-envio="erro"] { color: var(--alerta-txt); }

/* ---------- resumo: o unico bloco branco, o mesmo cartao do formulario */
.calc__lateral { position: sticky; top: var(--s-6); }
.calc__resumo { text-align: left; }
.calc__resumo__rot {
  font-size: var(--t-eyebrow); font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; color: var(--tinta); opacity: .68; max-width: none;
}
.calc__resumo__total {
  margin-top: var(--s-2); font-size: var(--t-destaque); font-weight: 500;
  letter-spacing: -.02em; color: var(--tinta); max-width: none;
}
.calc__resumo__total span:last-child { font-size: var(--t-corpo); font-weight: 400; opacity: .68; }
.calc__resumo__nota {
  margin-top: var(--s-3); font-size: var(--t-eyebrow); line-height: 1.5;
  color: var(--tinta); opacity: .68; max-width: none;
}
.calc__resumo .btn { margin-top: var(--s-5); }

/* painel ao vivo: os itens marcados, somando ate o total */
/* o que sobra da altura da tela fica pro botao do video logo abaixo */
.calc__resumo { max-height: calc(100vh - 140px); overflow-y: auto; }
.calc__resumo__lista {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: grid; gap: var(--s-2);
}
.calc__resumo__linha {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-eyebrow); line-height: 1.4; color: var(--tinta);
}
.calc__resumo__linha--base { font-weight: 500; }
.calc__resumo__linha-nome { flex: 1; min-width: 0; }
/* verde de superficie: o --verde de texto nao tem contraste no cartao branco */
.calc__resumo__check {
  width: 16px; height: 16px; flex: none; align-self: flex-start; margin-top: 1px;
  color: var(--verde-sup);
}
.calc__resumo__linha-preco { margin-left: var(--s-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__resumo__linha.is-novo { animation: calc-entra var(--dur-ui) var(--ease-io) both; }
@keyframes calc-entra {
  from { opacity: 0; transform: translateY(-4px); background: hsl(137 45% 40% / .16); }
  to   { opacity: 1; transform: none; background: transparent; }
}
.calc__resumo__rot--total {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid hsl(227 18% 58% / .4);
}
.calc__resumo__total { font-variant-numeric: tabular-nums; }
.calc__resumo__conta { display: none; }

@media (max-width: 899px) {
  .calc__resumo {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50;
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--pad);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    border-radius: 0; box-shadow: 0 -8px 24px hsl(227 60% 6% / .28);
  }
  .calc__resumo__rot, .calc__resumo__nota, .calc__resumo__sel { display: none; }
  /* barra: total em cima da contagem, botao a direita ocupando as duas linhas */
  .calc__resumo {
    max-height: none; overflow: visible;
    display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-4); row-gap: 2px;
  }
  .calc__resumo__total { grid-column: 1; grid-row: 1; }
  .calc__resumo__conta {
    display: block; grid-column: 1; grid-row: 2; margin: 0;
    font-size: var(--t-eyebrow); color: var(--tinta); opacity: .68;
  }
  .calc__resumo .btn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .calc__resumo__total { margin: 0; font-size: var(--t-item); }
  .calc__resumo .btn { margin: 0 0 0 auto; min-width: 0; padding-inline: var(--s-5); }
  /* no celular o painel vira a barra fixa: a coluna fica so com o video,
     que cai logo depois da lista, e o respiro da barra vai pra ela */
  .calc__lateral { position: static; padding-bottom: 88px; }
  .calc-video { margin-top: 0; }
  .calc-video__btn { width: auto; }
}

/* ---------- resumo final: a tela de confirmacao, e o que vira PDF ----- */
/* a regra global de scroll-margin so cobre section/header/nav com id; o
   resumo e uma div, e sem isto o scrollIntoView encosta o topo do cartao
   embaixo da nav fixa (medido: cardTop 0 x navBottom 73) */
.calc-final-wrap { scroll-margin-top: var(--s-6); }
.calc-final-wrap[hidden] { display: none; }
.calc-final { text-align: left; padding: var(--s-7); }

.calc-final__cab {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-5); border-bottom: 1px solid hsl(227 18% 58% / .3);
}
.calc-final__logo { width: 148px; height: auto; }
.calc-final__data {
  font-size: var(--t-eyebrow); color: var(--tinta); opacity: .6; max-width: none;
  font-variant-numeric: tabular-nums;
}
.calc-final__t {
  margin-top: var(--s-6); font-size: var(--t-item); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.2; color: var(--tinta); max-width: none;
}

/* responsavel, empresa e perfil lado a lado: tres dados curtos nao pedem
   tres linhas inteiras */
.calc-final__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
  margin: var(--s-5) 0 0; padding: var(--s-5);
  background: hsl(227 40% 96%); border-radius: var(--r-chip);
}
.calc-final__meta dt {
  font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta); opacity: .6;
}
.calc-final__meta dd {
  margin: 4px 0 0; font-size: var(--t-corpo); font-weight: 500; color: var(--tinta);
  overflow-wrap: anywhere;
}

.calc-final__rot {
  margin-top: var(--s-6); font-size: var(--t-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--tinta); opacity: .68;
  max-width: none;
}
.calc-final__itens { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.calc-final__item {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-block: var(--s-3); color: var(--tinta);
}
.calc-final__item + .calc-final__item { border-top: 1px solid hsl(227 18% 58% / .2); }
.calc-final__check {
  width: 18px; height: 18px; flex: none; align-self: center; color: var(--verde-sup);
}
.calc-final__item-nome { flex: 1; min-width: 0; }
.calc-final__item-preco { white-space: nowrap; font-variant-numeric: tabular-nums; }

.calc-final__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  margin-top: var(--s-3); padding-top: var(--s-5); border-top: 2px solid var(--tinta);
  color: var(--tinta);
}
.calc-final__total > span:first-child { font-size: var(--t-corpo); font-weight: 500; }
.calc-final__total-valor {
  font-size: var(--t-destaque); font-weight: 500; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.calc-final__nota {
  margin-top: var(--s-3); font-size: var(--t-eyebrow); line-height: 1.5;
  color: var(--tinta); opacity: .68; max-width: none;
}

/* coluna das acoes: painel escuro, sticky como o total da tela anterior */
.calc-final__lado { position: sticky; top: var(--s-6); }
.calc-final__lado-t {
  font-size: var(--t-lead); font-weight: 500; color: var(--branco); max-width: none;
}
.calc-final__lado-txt {
  margin-top: var(--s-2); font-size: var(--t-eyebrow); line-height: 1.5;
  color: var(--apagado); max-width: none;
}
.calc-final__acoes { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.calc-final__erro-bloco { margin-top: var(--s-5); }
.calc-final__erro-bloco[hidden] { display: none; }
.calc-final__erro { color: var(--alerta-txt); font-size: var(--t-eyebrow); line-height: 1.5; max-width: none; }
.calc-final__erro-bloco .lk { margin-top: var(--s-2); color: var(--branco); }

@media (max-width: 899px) {
  .calc-final { padding: var(--s-5); }
  .calc-final__lado { position: static; }
}
@media (max-width: 599px) {
  .calc-final__meta { grid-template-columns: 1fr 1fr; }
  .calc-final__meta > div:first-child { grid-column: 1 / -1; }
  .calc-final__logo { width: 120px; }
}

/* ---------- impressao: so o resumo, sem cromo da pagina --------------- */
@media print {
  .nav, .rodape, .calc__cab, .no-print { display: none !important; }
  body { background: #fff; }
  .sec { padding-block: 0; }
  .calc-final-wrap { display: block; margin-top: 0; }
  .calc-final { box-shadow: none; margin-top: 0; padding: 0; }
  .calc-final__meta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}