/* ==========================================================================
   HOME · no desenho da insany.com.br (v2, 10/11/2026)
   Camada separada do brilho.css: e intervencao de layout na home, nao
   paleta. Tudo aqui vale so com body.pagina-home.

   Medido la, com a janela em 1530x880, e trazido para ca:
     - pagina clara #f5f5f5; o escuro vira ilha, nao faixa
     - caixas escuras #0d0d0d, raio 25px, a 6px da borda da janela
     - cards brancos #fff sobre o claro, cinzas de apoio #ececec e #dedede
     - header chapado no claro, acima da caixa do hero, fixo ao rolar
     - uma familia so, Inter, com tracking de -0,04em no texto e -0,06em
       no display
   O que fica nosso: o menu aberto (la e hamburguer no topo), a paleta neon
   dentro das caixas escuras e o conteudo de cada dobra.

   O X da v1 saiu a pedido do Claudio. A divisoria lima entre dobras escuras
   tambem: com as dobras virando caixas soltas, nao existe mais a linha.
   ========================================================================== */

body.pagina-home {
  /* altura do header chapado: a insany usa 70px */
  --home-topo: 72px;
  /* respiro entre a caixa e a borda da janela, e entre caixas */
  --home-vao: 6px;
  --home-raio: 25px;
  --insany-claro: #f5f5f5;
  --insany-escuro: #0d0d0d;
  /* No fim da pagina o globais.js liga html.fim-verde, que pinta o body com
     var(--sage-claro) para a cena 3D do X ficar sobre o salvia. Trocado aqui,
     o fim da home fica no mesmo claro da referencia. */
  --sage-claro: #f5f5f5;

  /* a fonte da referencia, carregada pelo mu-plugin so na home. Todos os
     tokens de fonte apontam para ela, entao titulo, corpo, rotulo e botao
     trocam juntos, sem caçar regra por regra. */
  --f-txt: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-disp: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-shield: "Inter", ui-sans-serif, system-ui, sans-serif;

  background: var(--insany-claro);
  background-image: none;
  /* o header e fixo e agora opaco: a pagina comeca abaixo dele */
  padding-top: var(--home-topo);
  letter-spacing: -.02em;
}

/* ==========================================================================
   1. Header chapado, acima da caixa
   ========================================================================== */
body.pagina-home .topo {
  height: var(--home-topo);
  background: var(--insany-claro);
  pointer-events: auto;
}
body.pagina-home .topo-in,
body.pagina-home .topo--min .topo-in,
body.pagina-home .topo--aberto .topo-in {
  margin: 0 auto;
  height: var(--home-topo);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* sem vidro: o header nao flutua mais sobre nada */
body.pagina-home .topo-in::before { display: none; }

/* o logo e branco no arquivo; no claro vira tinta, como no rodape */
body.pagina-home .topo-logo img { filter: brightness(0); }

/* menu aberto, como sempre foi aqui; o desenho do texto e o da referencia:
   Inter 600, tinta #090909 */
body.pagina-home .menu a,
body.pagina-home .menu-gatilho {
  color: #090909; opacity: 1;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
}
/* "Suporte · Contato" tem o mesmo desenho do menu: estava em 13px, peso
   500, caixa alta e cinza, e parecia outra fonte ao lado dos links */
body.pagina-home .topo-util,
body.pagina-home .topo-util a {
  color: #090909;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
  text-transform: none;
}
body.pagina-home .topo-util a:hover,
body.pagina-home .topo-util a:focus-visible { color: #090909; text-decoration: underline; text-underline-offset: 4px; }

/* o CTA do header vira a pilula preta da referencia: a lima sobre #f5f5f5
   da 1,1:1 e some. A lima fica para dentro das caixas escuras. */
body.pagina-home .topo-cta.btn--pri {
  background: #090909; color: #ffffff; box-shadow: none;
}
body.pagina-home .topo-cta.btn--pri:hover,
body.pagina-home .topo-cta.btn--pri:focus-visible {
  background: #262626; color: #ffffff; box-shadow: none;
}
body.pagina-home .topo-cta .cta-circ { background: #ffffff; color: #090909; }

/* celular: o botao do menu era fio branco sobre o escuro */
body.pagina-home .hicon { color: #090909; border-color: rgba(9, 9, 9, .18); }

/* ==========================================================================
   2. Hero dentro da caixa
   O palco do hero ja e o retangulo que fica preso na tela durante a
   sequencia. Ele vira a caixa: recua 6px das bordas, ganha o raio e comeca
   abaixo do header. A cena WebGL e absoluta dentro dele, entao acompanha.
   ========================================================================== */
/* a secao do hero pintava #080808 por tras do palco e escondia o vao claro
   e os cantos arredondados: ela fica transparente e quem pinta e a caixa */
body.pagina-home .hero-c { background: transparent; }
html body.pagina-home .hc-palco {
  margin: 0 var(--home-vao);
  border-radius: var(--home-raio);
  background: var(--insany-escuro);
  overflow: hidden;
}
@media (min-width: 1024px) {
  html:not(.movimento-reduzido) body.pagina-home .hc-palco {
    top: var(--home-topo);
    height: calc(100vh - var(--home-topo) - var(--home-vao));
    min-height: 560px;
  }
  /* o titulo pulava o header que flutuava por cima; agora o header esta fora */
  html:not(.movimento-reduzido) body.pagina-home .hc-topo { padding-top: clamp(40px, 7vh, 72px); }
}
@media (max-width: 1023px) {
  body.pagina-home .hc-topo { padding-top: 36px; }
}

/* ==========================================================================
   3. O claro distribuido pela home
   As dobras em salvia passam ao cinza claro da referencia, com os tokens de
   texto trocados por neutros (o verde-musgo do texto saiu junto com o
   salvia). Contraste sobre #f5f5f5: titulo 18,4:1, corpo 15,1:1, apoio
   9,4:1, terciario 5,1:1.
   ========================================================================== */
/* Sites e software (HOME-09) e cases (HOME-10) eram escuras e vinham logo
   depois da jornada (HOME-08), tambem escura: tres caixas pretas seguidas,
   o oposto do ritmo da referencia. As duas passam ao claro, com os mesmos
   tokens das dobras que eram salvia; os cards dos cases viram os cards
   brancos da insany. */
body.pagina-home #home-09,
body.pagina-home #home-10,
body.pagina-home .tom-claro,
body.pagina-home .rodape {
  --sage-claro: var(--insany-claro);
  --musgo: #090909;
  --txt-tit: #090909;
  --txt: #1f1f1f;
  --txt-2: #404040;
  --txt-3: #686868;
  --linha: rgba(9, 9, 9, .10);
  --linha-2: rgba(9, 9, 9, .16);
  --linha-3: rgba(9, 9, 9, .28);
  /* superficies dentro do claro: os cards brancos da referencia */
  --ink-1: #ffffff;
  --ink-2: #ececec;
  --ink-3: #dedede;
  --papel: #ffffff;
  --papel-txt: #090909;
  --papel-txt-2: #4a4a4a;
  --papel-faixa: #ececec;
  background: var(--insany-claro);
}

/* ==========================================================================
   4. O escuro vira ilha
   Cada dobra escura sai da largura cheia e vira uma caixa #0d0d0d com o
   mesmo raio e o mesmo recuo do hero. Entre duas caixas seguidas fica o vao
   claro de 6px, como la.
   ========================================================================== */
body.pagina-home .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) {
  margin: 0 var(--home-vao);
  border-radius: var(--home-raio);
  background: var(--insany-escuro);
}
body.pagina-home .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) + .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) {
  margin-top: var(--home-vao);
}
/* as duas que clarearam: o texto e o realce sobre o claro */
body.pagina-home :is(#home-09, #home-10) {
  color: var(--txt);
  --azul: #4a14b8;
  --azul-claro: #4a14b8;
  --acao: #090909;
  --acao-hi: #262626;
  --acao-ink: var(--neon-lima);
}
/* a divisoria de 1px entre dobras nao existe mais: as caixas tem borda */
body.pagina-home .secao + .secao { border-top: 0; }

/* ==========================================================================
   5. Tipografia da referencia
   Display em 600 com -0,06em; texto com -0,02em (a referencia usa -0,04em
   ate no paragrafo; aqui o texto corrido e mais longo, e -0,02em segura a
   leitura sem perder o desenho). Os titulos herdam a fonte pelos tokens.
   ========================================================================== */
:root :where(main) body.pagina-home :is(h1, h2, .h2),
body.pagina-home :is(h1, h2, .h2) {
  font-weight: 600;
  letter-spacing: -.06em;
}
:root :where(main) .hero-c .hc-h1 { font-weight: 600; }
.hero-c .hc-h1 { color: #ffffff; }

/* ==========================================================================
   6. Ilhas escuras dentro do claro (11/11/2026)
   Painel, card ou tela que nasceu escuro e mora numa dobra clara recebe de
   volta os tokens do escuro. Sem isto ele herda o texto #1f1f1f das dobras
   claras e some: foi o que aconteceu com a planta da HOME-09 (1,2:1).
   Os valores sao os neutros originais do tema (.tom-escuro), Regra 1.
   ========================================================================== */
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) {
  --txt-tit: #ffffff;
  --txt: #eceef1;
  --txt-2: #aab1bd;
  --txt-3: #858d9b;
  --linha: rgba(236, 238, 241, .08);
  --linha-2: rgba(236, 238, 241, .14);
  --linha-3: rgba(236, 238, 241, .26);
  --ink-1: #141414;
  --ink-2: #1c1c1c;
  --ink-3: #242424;
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
  color: var(--txt);
}
/* a sombra das telas escuras era musgo (24, 33, 19): vira preto neutro */
body.pagina-home .tela-escura { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .35); }

/* ==========================================================================
   7. A planta da HOME-09 em lima (pedido do Claudio, 11/11/2026)
   Era roxo sobre #070b10: as cotas de 10,5px davam 6,1:1, abaixo do piso de
   7:1 que a casa pede para roxo pequeno no escuro. Em lima vao a 16:1. O
   fundo azulado #070b10 vira o preto das caixas da referencia.
   ========================================================================== */
body.pagina-home .planta {
  --azul: var(--neon-lima);
  --azul-claro: var(--neon-lima-hi);
  background:
    linear-gradient(rgba(170, 255, 0, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(170, 255, 0, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--insany-escuro);
  border-color: rgba(236, 238, 241, .10);
}
body.pagina-home .pl-grade { stroke: rgba(170, 255, 0, .16); }
body.pagina-home .pl-cota { stroke: rgba(170, 255, 0, .5); }
body.pagina-home .pl-cota-txt { fill: var(--neon-lima); }
body.pagina-home .pl-contorno { stroke: var(--neon-lima); }
body.pagina-home .pl-cruz { stroke: var(--neon-lima-hi); }
body.pagina-home .pc ul,
body.pagina-home .pc a { border-color: rgba(170, 255, 0, .22); }
body.pagina-home .pc a { color: var(--txt); }
body.pagina-home .pc a::after,
body.pagina-home .pc a:hover,
body.pagina-home .pc a:focus-visible { color: var(--neon-lima); }

/* ==========================================================================
   8. Sem o cinza esverdeado
   As transparencias e sombras que ainda carregavam o salvia (239, 241, 232)
   e o musgo (24, 33, 19) passam ao cinza novo e ao preto neutro.
   ========================================================================== */
body.pagina-home .tom-claro .final-col {
  background: #ffffff;
  border-color: rgba(9, 9, 9, .08);
}

/* ==========================================================================
   9. Um vao so entre as dobras
   Medido antes: 245px na maioria das passagens, 261, 251 e 288px nas outras,
   e a HOME-08 com 69,6px em cima em vez de 122. Todas as dobras passam ao
   mesmo respiro, e o primeiro e o ultimo filho de cada uma perdem a margem
   que somava por fora dele.
   ========================================================================== */
body.pagina-home { --home-dobra: clamp(64px, 7vw, 112px); }
body.pagina-home .secao { padding-block: var(--home-dobra); }
body.pagina-home .secao > .wrap > :first-child { margin-top: 0; }
body.pagina-home .secao > .wrap > :last-child { margin-bottom: 0; }

/* ==========================================================================
   10. FAQ no desenho da insany
   Titulo grande e pesado a esquerda; a direita, cada pergunta num card
   branco proprio, 6px entre eles, e o "+" num circulo preto. O painel de
   vidro esverdeado saiu inteiro. O texto continua o nosso: a referencia tem
   um paragrafo sob o titulo, aqui nao tem, e nao foi inventado.
   ========================================================================== */
body.pagina-home #home-12 .faq-in {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 112px);
}
:root :where(main) body.pagina-home #home-12 .h2,
body.pagina-home #home-12 .h2 {
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 600;
  color: #090909;
}
body.pagina-home #home-12 .faq-lista {
  display: grid; gap: 6px;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.pagina-home #home-12 .faq-lista details {
  background: #ffffff;
  border: 0; border-radius: 14px;
  padding: 0 clamp(20px, 1.8vw, 28px);
}
body.pagina-home #home-12 .faq-lista summary {
  align-items: center;
  padding: clamp(20px, 1.7vw, 26px) 0;
  font-weight: 500; font-size: clamp(1.02rem, .9rem + .3vw, 1.2rem);
  letter-spacing: -.03em; color: #090909;
}
body.pagina-home #home-12 .faq-lista summary:hover { color: #090909; }
body.pagina-home #home-12 .faq-lista summary::after {
  width: 22px; height: 22px; margin-top: 0; border-radius: 50%;
  background:
    linear-gradient(#ffffff, #ffffff) center / 10px 1.8px no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 1.8px 10px no-repeat,
    #090909;
}
body.pagina-home #home-12 .faq-r { color: #5c5c5c; }
body.pagina-home #home-12 .faq-r > :last-child { padding-bottom: clamp(18px, 1.6vw, 24px); }

/* ==========================================================================
   11. HOME-03 no layout "Como trabalhamos" da insany
   Um container branco de raio 25px dentro do claro. A esquerda o titulo em
   dois tons (preto e cinza, como "Metodo claro, / adaptado ao seu
   contexto"); a direita as duas frentes viram cards pretos. O titulo ja vem
   quebrado em palavras pelo titulos-desfoque.js, entao o corte dos tons e a
   quebra de linha saem do proprio CSS, sem mexer no texto.
   ========================================================================== */
body.pagina-home #home-03 > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  background: #ffffff;
  border-radius: var(--home-raio);
  padding: clamp(28px, 4.2vw, 72px);
}
:root :where(main) body.pagina-home #home-03 h2,
body.pagina-home #home-03 h2 {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  column-gap: .24em;
  font-size: clamp(38px, 3.9vw, 62px);
  line-height: .98;
  letter-spacing: -.06em;
  color: #090909;
}
/* "Duas formas de trabalhar" em preto, quebra, "com a Digital Pixel" em cinza */
body.pagina-home #home-03 h2::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
body.pagina-home #home-03 h2 > .td-palavra:nth-child(-n+4) { order: 1; }
body.pagina-home #home-03 h2 > .td-palavra:nth-child(n+5) { order: 3; color: #8a8a8a; }

/* os dois "+" soltos no meio da coluna da esquerda, como la */
body.pagina-home #home-03 > .wrap::before,
body.pagina-home #home-03 > .wrap::after {
  content: ""; position: absolute; top: 58%;
  width: 18px; height: 18px; pointer-events: none;
  background:
    linear-gradient(#bdbdbd, #bdbdbd) center / 100% 1.4px no-repeat,
    linear-gradient(#bdbdbd, #bdbdbd) center / 1.4px 100% no-repeat;
}
body.pagina-home #home-03 > .wrap::before { left: clamp(28px, 4.2vw, 72px); }
body.pagina-home #home-03 > .wrap::after { left: calc(clamp(28px, 4.2vw, 72px) + 30%); }

body.pagina-home #home-03 .frentes-grade {
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.pagina-home #home-03 .frente {
  display: flex; flex-direction: column;
  min-height: clamp(460px, 38vw, 580px);
  background: var(--insany-escuro);
  border: 0; border-radius: 18px;
  padding: clamp(20px, 1.8vw, 28px);
}
/* o desenho fica no alto; o texto desce para o pe do card, como nos cards
   pretos da referencia */
body.pagina-home #home-03 .frente-desenho { margin: 0 0 0 auto; width: min(100%, 200px); height: auto; }
body.pagina-home #home-03 .frente-rot { margin-top: auto; color: var(--txt-2); }
body.pagina-home #home-03 .frente-txt { color: #ffffff; font-size: clamp(1.05rem, .9rem + .45vw, 1.3rem); }
body.pagina-home #home-03 .frente-links { border-top-color: var(--linha-2); }
body.pagina-home #home-03 .frente-links a { color: var(--txt); border-color: var(--linha-2); }
body.pagina-home #home-03 .frente-links a::after,
body.pagina-home #home-03 .frente-links a:hover { color: var(--neon-lima); }
body.pagina-home #home-03 .frente .btn--sec { color: #ffffff; border-color: rgba(255, 255, 255, .28); background: transparent; }

@media (max-width: 1023px) {
  body.pagina-home #home-03 > .wrap { grid-template-columns: 1fr; }
  body.pagina-home #home-03 > .wrap::before,
  body.pagina-home #home-03 > .wrap::after { display: none; }
  body.pagina-home #home-12 .faq-in { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.pagina-home #home-03 .frentes-grade { grid-template-columns: 1fr; }
  body.pagina-home #home-03 .frente { min-height: 0; }
}

/* Duas dobras claras seguidas somavam os dois respiros (214px de claro
   vazio), enquanto entre o claro e uma caixa escura ficava um so (107px):
   era essa a diferenca de vao que se via. Quando uma dobra clara vem logo
   depois de outra, ela perde o respiro de cima, e todo vao entre blocos
   vira um --home-dobra. O reel nao entra na regra: e um palco de tela
   cheia com o respiro dele. Entre duas caixas escuras o vao e o de 6px da
   referencia, que ja vem do bloco 4. */
body.pagina-home :is(.secao.tom-claro, #home-09, #home-10) + :is(.secao.tom-claro, #home-09, #home-10) {
  padding-top: 0;
}
/* o rodape vem depois do FAQ, claro sobre claro: mesmo caso */
body.pagina-home .rodape { padding-top: 0; }

/* Dentro de uma ilha escura que mora numa dobra clara, o botao principal
   herdava a pilula quase preta das dobras claras (brilho.css) e sumia sobre
   o card #0d0d0d, sobrando so o rotulo lima. Volta a ser a pilula lima com
   o halo, como em todas as caixas escuras. */
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri {
  background: var(--neon-lima); color: var(--void);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(170, 255, 0, .50),
              0 0 20px rgba(170, 255, 0, .30), 0 0 56px rgba(155, 92, 255, .40);
}
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri:hover,
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri:focus-visible {
  background: var(--neon-lima-hi); color: var(--void);
}

/* Os cards pretos da HOME-03 sao ilhas escuras criadas aqui (nao tem a
   classe .tela-escura): mesmo roxo do escuro. Regra separada da do bloco 6
   porque ali o :is() com #home-03 pesa (1,2,1) e passaria por cima da lima
   da planta. */
body.pagina-home #home-03 .frente {
  --azul: var(--neon-roxo);
  --azul-claro: var(--neon-roxo-hi);
}
/* as linhas do desenho de "Sites e software" tinham opacidade de traco .7:
   no card preto davam 2,97:1, logo abaixo do piso de 3:1 de elemento
   grafico. Cheias, vao a 5,1:1. */
body.pagina-home #home-03 .frente-desenho--grade .fd-linha { stroke-opacity: 1; }

/* ==========================================================================
   Menu principal em Montserrat (10/11/2026)
   Pedido do gestor, com o Claudio de acordo: so o menu principal volta para
   a fonte de antes, a do desenho original e a do site no ar. O resto segue
   em Inter. Volta o desenho original do texto (500, .92rem, .005em): o
   -0,04em era medido para a Inter e aperta a Montserrat. A cor fica #090909,
   que e o que le no header claro. "Suporte · Contato" acompanha o menu
   (pedido de 10/11), e o menu do celular tambem, que e o mesmo menu.
   A Montserrat ja vem carregada (400 a 800), nao custa fonte nova.
   ========================================================================== */
body.pagina-home :is(.menu a, .menu-gatilho, .topo-util, .topo-util a) {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; font-size: .92rem; letter-spacing: .005em;
}
body.pagina-home :is(.mm-gatilho, .mm-links a, .mm-painel a) {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .005em;
}

/* ==========================================================================
   "pessoas" e "IA" no titulo do hero (10/11/2026)
   "pessoas" saia em lilas quase branco (#e6e2ff) na homologacao e nao se
   distinguia do resto do titulo: "esse lilas e nada e a mesma coisa". O
   Claudio pediu roxo e verde. No titulo, "pessoas" vai ao roxo eletrico
   (#9b5cff, 5,0:1 em corpo de 75px ou mais) e "IA" a lima (#aaff00,
   16:1). Na legenda pequena da cena o roxo e o claro (#bfa0ff, 8,9:1),
   pelo piso de 7:1 para roxo pequeno no escuro. Vale igual na producao,
   onde "pessoas" usava o roxo claro e "IA" o ciano.
   ========================================================================== */
body.pagina-home .hc-pessoas.on { color: var(--neon-roxo); }
body.pagina-home .hc-ia.on { color: var(--neon-lima); }
body.pagina-home .hc-cap-frase .cor-pessoa { color: var(--neon-roxo-hi); }
body.pagina-home .hc-cap-frase .cor-ia { color: var(--neon-lima); }

/* ==========================================================================
   Frases da cena do hero no peso dos titulos (10/11/2026)
   "Os processos de hoje foram desenhados..." e as outras oito frases da
   cena (.hc-cap-frase) tinham corpo de titulo (36 a 65px) e peso 400, e ao
   lado dos H1 e H2 em 600 pareciam outra fonte. O Claudio pediu o padrao:
   600 e -0,06em, como todo titulo do site.
   ========================================================================== */
body.pagina-home .hc-cap-frase { font-weight: 600; letter-spacing: -.06em; }

/* ==========================================================================
   Titulo do hero: "sua empresa" na linha de baixo e corpo maior (10/11/2026)
   Na producao a segunda linha e "a operacao da sua empresa" (11,8em). Ela
   invadia o card VENDEDOR da cena em cinco de seis tamanhos de janela
   medidos (210px de sobreposicao em 1920x1080). O Claudio pediu para descer
   o "sua empresa" e aumentar a fonte.

   A quebra e por largura: 7em fica entre "a operacao da" (6,06em) e
   "a operacao da sua" (7,81em), entao a linha parte sempre depois do "da",
   em qualquer corpo, sem tocar no HTML. Com cinco linhas a mais larga passa
   a ser "trabalharem juntas" (7,98em) e o limite vira o card PLANILHA,
   embaixo. Com min(6,6vw, 10vh) o corpo sobe 16% (76 -> 88px em 1530x880)
   e sobra pelo menos 16px ate o card em 1280x720, 1366x768, 1440x900,
   1530x880, 1904x880 e 1920x1080. Com 10,4vh a sobra caia para 4px.
   No celular o corpo nao muda; a quebra la ja era a mesma.
   ========================================================================== */
body.pagina-home .hc-h1 .h1-a > .hc-linha:nth-child(2) { max-width: 7em; }
@media (min-width: 1024px) {
  body.pagina-home .hero-c .hc-h1 { font-size: clamp(40px, min(6.6vw, 10vh), 104px); }
}