/* =======================================================================
   WebModeling — site institucional (folha unica das 4 paginas)

   ESTA FOLHA E COMPARTILHADA. index.html, produtos.html, trabalhos.html e
   como-trabalhamos.html carregam este mesmo arquivo (desde 11/09/2026:
   agendamento.html virou trabalhos.html e contratar.html saiu). Nao ha
   build: o que existe de comum entre as paginas mora aqui, e o que muda mora
   no HTML de cada uma. Mexeu aqui, mexeu nas quatro.

   REDESENHO DE 11/09/2026 — direcao "CIANOTIPIA" (ver README, secao
   "Redesenho — 11/09/2026", e as tres direcoes em _design/direcoes/).
   O navy + ciano do pitch ja e, literalmente, a cor de uma copia heliografica
   (blueprint). A vitrine assume isso e vira PRANCHA: grade de desenho tecnico,
   cotas (na capa, sobre o nome, escrita "sob medida"; em Nossos trabalhos, a
   medida de verdade — 390 e 1440, as larguras em que os prints foram
   tirados), marcas de corte e os colchetes da marca fechando no botao.
   "Sob medida" deixa de ser adjetivo e vira desenho cotado.
   A paleta continua a do pitch (negocio/gerar_pitch.py), papel por papel; o
   que entrou foram tons de APOIO (--tinta, --traco, --grade), nenhum no lugar
   de outro.

   FONTE: Archivo (Omnibus-Type, licenca OFL), self-hosted em assets/fontes/,
   variavel em peso (400-800) E largura (100-125%). Cortada com fontTools para
   so esse intervalo: 57,8 KB, um arquivo so. A largura trabalha: o titulo abre
   para 122% no desktop e fecha para 102-106% no celular, onde "WebModeling"
   precisa caber em 288px. Nenhuma requisicao para fora continua sendo regra.

   RESPONSIVO NA MESMA CONVENCAO DO MOTOR (agenda-base/assets/style.css):
     - largura util em vw, nao em px:  max-width:94vw + padding em clamp();
     - escala de texto por clamp(min,vw,max) no proprio elemento, raiz fixa;
     - quebras em 640/560/480 (+900 so do cabecalho).
   As medidas em rem sao equivalentes fixos (raiz = 17px).
   ======================================================================= */
@font-face{
  font-family:"Archivo WM";
  src:url(fontes/archivo.woff2) format("woff2");
  font-weight:400 800;font-stretch:100% 125%;font-display:swap;
}
:root{
  /* as cores do pitch, literalmente */
  --fundo:#0A162E;   --fundo2:#0D1C38;  --cartao:#122446;  --linha:#1E3660;
  --azul:#2E7CF6;    --ciano:#35D0D8;   --verde:#3DD68C;   --roxo:#8B7CF6;
  --branco:#F2F6FC;  --cinza:#9CAFC9;
  /* tons de APOIO (11/09): nenhum substitui papel do pitch.
     --tinta  um passo abaixo do fundo: rodape e moldura do aparelho
     --traco  linha de cota e de corte; mais claro que --linha para existir
     --grade  malha da prancha, quase invisivel de proposito */
  --tinta:#060E1F;   --traco:#2B4A80;
  --grade:rgba(92,140,224,.075); --grade2:rgba(92,140,224,.15);
  /* fundo por tras do numero da cota: muda na faixa --fundo2 */
  --sob:var(--fundo);
  --fonte:"Archivo WM","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* saida rapida e pouso macio: o mesmo easing em tudo que se move */
  --ease:cubic-bezier(.2,.7,.2,1);
  --raio:4px;                      /* RAIO = 0.022 do deck: canto quase reto */
  --lim:94vw;
  --pad:clamp(16px,2.5vw,40px);
  --secao:clamp(3.4rem,5.6vw,7.4rem);
}
html{font-size:17px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fundo);color:var(--branco);
  font:400 1rem/1.6 var(--fonte);font-stretch:100%;
  -webkit-font-smoothing:antialiased;
}
.lim{width:100%;max-width:var(--lim);margin-inline:auto;padding:0 var(--pad)}
/* titulo em largura 112%: um pouco aberto, desenho de prancha, sem virar
   letra de cartaz. Nada condensado: letra clara condensada sobre navy e o
   pior caso de franja do ClearType no Windows. */
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:720;font-stretch:112%}
p{margin:0}
a{color:inherit}
section{position:relative;padding:var(--secao) 0;scroll-margin-top:4rem}
section + section{border-top:1px solid var(--linha)}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

/* ---------------- topo ----------------
   Barra de uma linha; abaixo de 900px os 4 links viram um painel que DESCE
   abaixo da barra, aberto por um <details> nativo — nenhuma linha de JS e
   requisito. Painel que desce e nao cobre: o WhatsApp e o unico CTA presente
   na tela inteira, e tem que continuar a vista (ver README, "O menu"). */
header{position:sticky;top:0;z-index:20;background:rgba(10,22,46,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topo{position:relative;display:flex;align-items:center;gap:.8rem;height:4rem}
/* min-height 44: a marca e o link para a home — media 26px de altura */
.marca{display:flex;align-items:center;gap:.65rem;min-height:44px;text-decoration:none;font-size:1.13rem;font-weight:720;font-stretch:114%;letter-spacing:-.02em;margin-right:auto}
.marca .simbolo{display:block;width:1.45rem;height:1.45rem;flex:none;fill:var(--cinza)}
/* a barra do meio e a unica coisa colorida da marca — ver _marca/MANUAL.md */
.marca .simbolo .miolo{fill:var(--azul)}
.abre,.so-menu{display:none}
.topo nav{display:flex;align-items:center;gap:1.7rem}
.topo nav a{text-decoration:none;color:var(--cinza);font-size:.9rem;padding:.7rem 0;transition:color .2s var(--ease),box-shadow .2s var(--ease)}
/* traco do hover em --cinza (8,6:1), e nao em --traco (1,9:1): indicador de
   estado tambem passa pelo piso de 3:1 de nao-texto */
.topo nav a:hover{color:var(--branco);box-shadow:inset 0 -2px 0 var(--cinza)}
/* o gancho de estilo da pagina atual E o aria-current: sem classe paralela.
   box-shadow e nao border para o traco nao empurrar o layout 2px. */
.topo nav a[aria-current=page]{color:var(--branco);box-shadow:inset 0 -2px 0 var(--ciano)}
.topo .bt{padding:.62rem 1.05rem;font-size:.87rem;min-height:44px}

/* 900 e nao 640: medido em Chrome, com marca + 4 links + botao o header so
   para de estourar a partir de ~800px. */
@media(max-width:900px){
  .abre{display:block;order:3;margin-right:-.45rem}
  .abre>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
                border-radius:var(--raio);cursor:pointer;list-style:none}
  .abre>summary::-webkit-details-marker{display:none}
  .abre .tracos{position:relative;display:block;width:1.2rem;height:2px;background:var(--branco)}
  .abre .tracos::before,.abre .tracos::after{content:"";position:absolute;left:0;display:block;
                width:1.2rem;height:2px;background:var(--branco);transition:transform .2s var(--ease),top .2s var(--ease)}
  .abre .tracos::before{top:-.4rem}
  .abre .tracos::after{top:.4rem}
  .abre[open]>summary{background:var(--cartao)}
  .abre[open] .tracos{background:transparent}
  .abre[open] .tracos::before{top:0;transform:rotate(45deg)}
  .abre[open] .tracos::after{top:0;transform:rotate(-45deg)}

  /* O <details> fica VAZIO, so como botao, e quem aparece e o <nav> IRMAO.
     Nao da para por o <nav> dentro dele e forcar aberto no desktop: o Chrome
     esconde o conteudo por ::details-content{content-visibility:hidden}, que
     display no filho nao vence — a tela sai vazia mesmo assim. */
  .so-menu{display:flex}
  .topo nav{display:none;position:absolute;left:0;right:0;top:100%;
            background:var(--fundo2);border-bottom:1px solid var(--linha);
            padding:0 var(--pad) .8rem;box-shadow:0 16px 32px rgba(0,0,0,.5)}
  .abre[open] ~ nav{display:block}
  .topo nav a{display:flex;align-items:center;min-height:52px;font-size:1.02rem;
              color:var(--branco);border-top:1px solid var(--linha);padding:0 0 0 .8rem}
  .topo nav a:hover{box-shadow:none}
  /* a barra vertical de 3px e a mesma linguagem da barra azul da capa */
  .topo nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--ciano);color:var(--ciano);font-weight:600}
  .topo nav a:active{background:rgba(255,255,255,.055)}
  .topo .bt{padding:.8rem 1rem;font-size:.85rem}
}

/* ---------------- botoes ----------------
   Os dois L em cantos opostos sao a MESMA geometria do simbolo (superior-
   esquerdo e inferior-direito). Parados, ficam a 6px do botao; no hover andam
   ate encostar — o gesto de enquadrar antes de cortar. Hover e movimento, nao
   so troca de cor. Cinza, nunca coloridos: colchete nao tem cor (MANUAL). */
.botoes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.1rem}
.bt{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;
    font:650 .96rem/1 var(--fonte);font-stretch:108%;padding:.95rem 1.45rem;min-height:48px;
    border-radius:2px;border:1px solid transparent;white-space:nowrap;
    transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.bt::before,.bt::after{content:"";position:absolute;width:.6rem;height:.6rem;border:1.5px solid var(--cinza);
    pointer-events:none;transition:transform .28s var(--ease)}
.bt::before{left:-6px;top:-6px;border-right:0;border-bottom:0}
.bt::after{right:-6px;bottom:-6px;border-left:0;border-top:0}
.bt:hover::before,.bt:focus-visible::before{transform:translate(4px,4px)}
.bt:hover::after,.bt:focus-visible::after{transform:translate(-4px,-4px)}
/* no topo nao ha folga para o colchete: ele encostaria no hamburguer */
.topo .bt::before,.topo .bt::after{display:none}
/* #1F63D6 e nao var(--azul): sobre o azul do deck o texto branco da 3,94:1.
   O token --azul nao muda — tarjas, numeros e barras seguem na cor do pitch.
   O hover ESCURECE (5,97:1) em vez de clarear: clarear derrubaria o rotulo. */
.bt-1{background:#1F63D6;color:#fff}
.bt-1:hover{background:#1A58C2}
.bt-1:active{background:#164EAC}
/* secundario: contorno #5874A3 da 3,6:1 contra o fundo — a borda do botao
   passa no piso de 3:1 de nao-texto, coisa que o cartao escuro de antes nao
   fazia (1,3:1) */
.bt-2{background:transparent;border-color:#5874A3;color:var(--branco)}
.bt-2:hover{background:rgba(46,124,246,.12);border-color:var(--cinza)}
.bt-2:active{background:rgba(46,124,246,.2);border-color:var(--cinza)}

/* ---------------- resposta ao toque ----------------
   No celular nao existe :hover. Sem :active, todo clique parece nao ter
   registrado. O realce padrao do Android e preto a 18%, invisivel no navy. */
a,button,summary{-webkit-tap-highlight-color:transparent}
.bt:active{transform:scale(.97)}
.topo nav a:active,footer a:active{color:var(--branco)}
.func li:active{background:rgba(255,255,255,.055)}

/* ---------------- a prancha: grade de desenho tecnico ----------------
   Duas malhas, como papel de desenho: fina a cada 1,4rem e grossa a cada 7rem.
   Mascarada em elipse, para existir so embaixo da "luz" e sumir nas bordas —
   sem mascara ela vira papel de parede. Custa zero byte de imagem. */
.prancha{overflow:hidden}
.prancha::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grade2) 1px,transparent 1px),linear-gradient(90deg,var(--grade2) 1px,transparent 1px),
    linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);
  background-size:7rem 7rem,7rem 7rem,1.4rem 1.4rem,1.4rem 1.4rem;
  background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 45%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 80% at 70% 45%,#000 30%,transparent 78%)}
.prancha > .lim{position:relative;z-index:1}
/* nas paginas internas a prancha fica so no canto de cima, atras do titulo */
.prancha.abertura::before{
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 88% 0,#000 20%,transparent 72%);
          mask-image:radial-gradient(ellipse 60% 70% at 88% 0,#000 20%,transparent 72%)}

/* ---------------- cotas ----------------
   Linha de cota de desenho tecnico: dois tracos de chamada nas pontas, a linha
   no meio e o numero cortando a linha. O numero e a medida REAL da tela em
   que o print foi tirado — nunca enfeite. Numero na fonte do corpo com
   tabular-nums (regra de PADROES.md para numero). */
.cota{position:absolute;color:var(--ciano);font:600 .76rem/1 var(--fonte);font-stretch:100%;
      font-variant-numeric:tabular-nums;letter-spacing:.02em;pointer-events:none}
.cota::before{content:"";position:absolute;background:currentColor;opacity:.75}
.cota span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.1rem .45rem;background:var(--sob)}
.cota-h{left:0;right:0;height:.7rem;border-inline:1px solid currentColor}
.cota-h::before{left:0;right:0;top:50%;height:1px}
.cota-v{top:0;bottom:0;width:.7rem;border-block:1px solid currentColor}
.cota-v::before{top:0;bottom:0;left:50%;width:1px}
.cota-v span{transform:translate(-50%,-50%) rotate(-90deg)}

/* ---------------- marcas de corte ----------------
   So em dois cantos, os mesmos do simbolo (sup-esq e inf-dir). */
.corte{position:absolute;width:1.5rem;height:1.5rem;pointer-events:none;z-index:1;
  background:linear-gradient(var(--traco),var(--traco)) 0 0/100% 1px no-repeat,
             linear-gradient(var(--traco),var(--traco)) 0 0/1px 100% no-repeat}
.corte.ie{left:var(--pad);top:1.6rem}
.corte.id{right:var(--pad);bottom:1.6rem;transform:rotate(180deg)}

/* ---------------- capa ---------------- */
/* CAPA TIPOGRAFICA (revisao do Edu, 11/09): "aqui tem que ser sobre mim e nao
   sobre um demo". Nada a direita: o nome ocupa a largura, com uma cota em cima
   escrita "sob medida" (a mesma do og.png). Embaixo, duas colunas — o que a
   gente faz a esquerda, a promessa e os botoes a direita. Escolhida entre tres
   opcoes renderizadas (_design/capa/): o carimbo repetia o texto da esquerda e
   a cadeia de passos duplicava como-trabalhamos. */
.capa{padding:calc(var(--secao)*1.05) 0 var(--secao)}
.capa-texto{position:relative;padding-left:clamp(1.35rem,2vw,2.1rem)}
/* a barra da capa continua sendo a barra SOZINHA — o fragmento, nao o simbolo */
.capa .barra{position:absolute;left:0;top:.4rem;width:.36rem;height:clamp(6rem,14vw,12.5rem);background:var(--azul)}
/* a cota mede o nome: inline-block, entao ela tem exatamente a largura do H1 */
.h1-cotado{position:relative;display:inline-block;max-width:100%;padding-top:2.1rem}
.h1-cotado .cota{top:0}
.capa h1{font-size:clamp(2.3rem,9.2vw,9.2rem);font-weight:780;font-stretch:122%;letter-spacing:-.045em;line-height:.92}
.capa-baixo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin-top:1rem}
.capa-baixo .botoes{margin-top:1.4rem}
.capa .tag{color:var(--ciano);font-size:clamp(1.14rem,2.3vw,1.62rem);font-weight:500;font-stretch:108%;
           margin-top:.9rem;letter-spacing:-.01em;line-height:1.25}
.capa .sub{font-size:clamp(1rem,1.45vw,1.17rem);margin-top:1.5rem;max-width:50ch;color:#DCE5F2}
.capa .oferta{margin-top:1rem;color:var(--cinza);font-size:.9rem;max-width:56ch}
.capa .oferta b{color:var(--branco);font-weight:600}

/* ---------------- aparelho e janela ---------------- */
.fone{position:relative;width:min(100%,17.5rem);border:.45rem solid #050C1B;border-radius:2rem;overflow:hidden;background:#050C1B;
  box-shadow:0 0 0 1px #274677,0 50px 90px -40px rgba(0,0,0,.9),0 30px 60px -30px rgba(46,124,246,.35)}
.fone img{display:block;width:100%;height:auto}
/* janela de navegador, com o ENDERECO de verdade na barra: e o dado que diz
   "isto esta no ar", sem precisar de frase explicando */
.janela{position:relative;display:block;border-radius:6px;overflow:hidden;background:#050C1B;text-decoration:none;
  box-shadow:0 0 0 1px #274677,0 60px 100px -50px rgba(0,0,0,.95),0 30px 70px -40px rgba(46,124,246,.4);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.janela .url{display:flex;align-items:center;gap:.6rem;height:1.9rem;padding:0 .8rem;background:#0F1F3D;border-bottom:1px solid #1B3462;
  font-size:.76rem;color:var(--cinza);white-space:nowrap;overflow:hidden}
.janela .url::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#2B4A80;
  box-shadow:.85rem 0 0 #2B4A80,1.7rem 0 0 #2B4A80;margin-right:1.8rem}
.janela img{display:block;width:100%;height:auto}
.janela:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--traco),0 70px 110px -50px rgba(0,0,0,.95),0 34px 80px -40px rgba(46,124,246,.5)}
.janela:active{transform:translateY(-1px)}
/* janela que NAO e link (trabalho sem site para abrir): nao sobe no hover */
div.janela:hover,div.janela:active{transform:none;box-shadow:0 0 0 1px #274677,0 60px 100px -50px rgba(0,0,0,.95),0 30px 70px -40px rgba(46,124,246,.4)}

/* ---------------- nossos trabalhos ----------------
   Secao da home, depois de "Software sob medida" e antes do fecho (revisao do
   Edu, 11/09: "pode ficar na pagina inicial, mas nao necessariamente na
   primeira tela"). Um <article class="trab"> por trabalho; o segundo entra
   como irmao e herda tudo. O primeiro e a Barbearia Ivan Velho — nao e cliente
   pagante, entao nada de "cliente", depoimento ou numero de resultado. */
.trabalhos{--sob:var(--fundo2);background:var(--fundo2)}
.trabalhos.prancha::before{
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 64% 55%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 85% at 64% 55%,#000 25%,transparent 75%)}
.trabalhos + section{border-top:0}
.trab + .trab{margin-top:var(--secao);padding-top:var(--secao);border-top:1px solid var(--linha)}

/* ---- pagina Nossos trabalhos (trabalhos.html) ----
   Pedido do Edu: "imagens das principais funcionalidades do site e o botao
   para acessar o site, de forma simples". Cada tela e uma figura com legenda
   de UMA linha (titulo e dado). Celular para o que o cliente ve, janela de
   computador para a area do dono. Colunas FIXAS, contadas: 4 telas de
   celular fecham 4 ou 2x2, 3 do dono fecham 3 ou 1 — nunca sobra uma. */
.trab-telas.trab-inicio{margin:0;padding-bottom:0}
.telas figure{margin:0}
.trab-inicio figcaption,.telas figcaption{margin-top:.9rem;font-size:.9rem;line-height:1.45}
.trab-inicio figcaption b,.telas figcaption b{display:block;font-weight:650;font-stretch:108%;color:var(--branco)}
.trab-inicio figcaption span,.telas figcaption span{display:block;color:var(--cinza)}
.telas-tit{display:flex;align-items:center;gap:.8rem;margin:clamp(2.6rem,5vw,4.2rem) 0 1.3rem;
  font-size:1.15rem;font-weight:650;font-stretch:110%;letter-spacing:-.005em;color:var(--branco)}
.telas-tit::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--traco),transparent)}
.telas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.1rem,2.4vw,2rem)}
.telas-cel{grid-template-columns:repeat(4,minmax(0,1fr))}
.telas-dono{grid-template-columns:repeat(3,minmax(0,1fr))}
.telas .fone{width:100%;border-width:.35rem;border-radius:1.5rem}
/* aqui a janela e figura, nao link: ela nao sobe no hover */
.telas .janela:hover{transform:none}
.trab-pagina .trab-nota{margin-top:clamp(1.8rem,3vw,2.6rem)}
.telas picture{display:block}
/* ATE 900px entra o RECORTE (o <source> do <picture>): so o trecho que
   interessa, tirado em 390px, para o texto dentro do print ter tamanho de
   leitura. Achado do avaliador de cliente em 11/09: com a tela inteira em
   miniatura, em 360px o celular tinha 87x188px e nada dentro se lia.
   O recorte nao e um aparelho — perde a moldura grossa e vira uma chapa com
   o mesmo fio da janela. */
@media(max-width:900px){
  .telas .fone{border:0;border-radius:10px}
  .telas-cel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .telas-dono{grid-template-columns:1fr;max-width:24rem}
}
/* no celular: UM por linha, na largura util inteira (pedido de 11/09) */
@media(max-width:640px){
  .telas-cel,.telas-dono{grid-template-columns:1fr;max-width:none}
}
/* link discreto da home para a pagina de trabalhos: sublinhado em vez de
   borda (a borda cairia no pe da caixa de 44px, longe do texto) */
.leva.mais{display:inline-flex;align-items:center;min-height:44px;margin-top:.3rem;border-bottom:0;
  text-decoration:underline;text-decoration-color:rgba(53,208,216,.45);text-underline-offset:4px}
.leva.mais:hover,.leva.mais:active{text-decoration-color:var(--ciano)}
.trab-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2rem,5vw,5rem);
  grid-template-areas:"cab telas" "corpo telas";grid-template-rows:auto 1fr}
.trab-cab{grid-area:cab;align-self:end}
.trab-corpo{grid-area:corpo}
.trab-cab h3{font-size:clamp(1.7rem,3.3vw,2.6rem);font-stretch:118%;letter-spacing:-.035em;line-height:1}
.trab-onde{color:var(--ciano);margin-top:.6rem;font-weight:500}
.trab-dados{margin:1.8rem 0 0;border-top:1px solid var(--linha)}
.trab-dados div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linha)}
.trab-dados dt{color:var(--cinza);font-size:.88rem}
.trab-dados dd{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.trab-nota{margin-top:1.3rem;color:var(--cinza);font-size:.85rem;max-width:46ch}

.trab-telas{grid-area:telas;align-self:center;position:relative;z-index:0;padding:2.2rem 0 5rem}
.trab-telas > .cota-janela{top:0}
.fone-p{position:absolute;right:-1.5%;bottom:1.9rem;width:27%;border-width:.35rem;border-radius:1.4rem;
  transition:transform .45s var(--ease)}
/* hover no conjunto: o celular desliza para fora da janela — mostra que sao
   duas pecas, a mesma pagina em duas medidas */
.trab-telas:hover .fone-p{transform:translate(6px,-10px)}
.trab-telas > .cota-p{top:auto;bottom:.2rem;right:-1.5%;left:auto;width:27%}
.trab-telas::after{content:"";position:absolute;inset:0 -10% -10% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(46,124,246,.16),transparent)}

/* ---------------- titulo de secao (funcao titulo() do deck) ---------------- */
.tit{margin-bottom:2.6rem}
.tit i{display:block;width:3.7rem;height:.3rem;background:var(--ciano);margin-bottom:1.15rem}
.tit i.roxo{background:var(--roxo)}
.tit i.verde{background:var(--verde)}
.tit h2{font-size:clamp(1.62rem,3.2vw,2.5rem);max-width:30ch}
/* H2 que nao esta dentro de um .tit (a banda tem um) */
.h2-solto{font-size:clamp(1.62rem,3.2vw,2.5rem)}
.tit p{color:var(--cinza);font-size:1rem;margin-top:.8rem;max-width:64ch}

/* ---------------- cartoes ----------------
   Ficha, nao "card de SaaS": um degrade de 2 tons do proprio --cartao da a
   espessura de papel, e o hover ANDA (sobe 3px e a sombra cresce) em vez de
   so trocar cor. */
.grade{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
/* 3 e 4 cartoes: colunas FIXAS por faixa. Com auto-fit o 3o cartao da home
   ficava sozinho numa linha entre 641 e ~960px (2+1), e o 4o de produtos
   entre ~1000 e 1230px (3+1). Abaixo de 561 vale a regra do cartao-linha. */
@media(min-width:901px){.grade.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.grade.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:561px) and (max-width:1100px){.grade.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* entre 561 e 900 os tres viram faixas de largura inteira, icone a esquerda */
@media(min-width:561px) and (max-width:900px){
  .grade.tres{grid-template-columns:1fr}
  .grade.tres .card{display:grid;grid-template-columns:1.9rem 1fr;column-gap:1rem;padding:1.3rem 1.4rem}
  .grade.tres .card svg{grid-row:1/3}
  .grade.tres .card h3{margin:0 0 .4rem}
}
.card{position:relative;background:linear-gradient(180deg,#14294F,#102143);border:1px solid var(--linha);border-radius:var(--raio);
      padding:1.65rem 1.55rem 1.55rem;overflow:hidden;
      transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--traco);box-shadow:0 22px 40px -24px rgba(0,0,0,.8)}
.card .tarja{position:absolute;left:0;top:0;bottom:0;width:.3rem}
.card h3{font-size:1.12rem;margin:1.1rem 0 .58rem;font-stretch:108%}
.card em{font-style:normal;color:var(--branco);font-weight:600}
.card p{color:var(--cinza);font-size:.92rem;line-height:1.62}
.card p b{color:var(--branco);font-weight:600}
.card svg{display:block;width:1.9rem;height:1.9rem}

/* ---------------- passos (sequencia de verdade: 1 a 4) ---------------- */
/* 4 passos: 4 colunas, 2x2 entre 641 e 1000, 1 abaixo. auto-fit dava 3+1 */
.passos{display:grid;gap:1.1rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:2.2rem}
@media(max-width:1000px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.passos{grid-template-columns:1fr}}
.passo{position:relative;background:linear-gradient(180deg,#14294F,#102143);border:1px solid var(--linha);border-radius:var(--raio);
       padding:1.55rem 1.3rem 1.3rem;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.passo:hover{transform:translateY(-3px);border-color:var(--traco)}
.passo::before{content:"";position:absolute;left:0;right:0;top:0;height:.24rem;background:var(--azul)}
.passo b{display:block;font:780 1.9rem/1 var(--fonte);font-stretch:118%;font-variant-numeric:tabular-nums;color:var(--azul);margin-bottom:.95rem}
.passo strong{display:block;font-size:.95rem;font-weight:650;margin-bottom:.35rem}
.passo span{color:var(--cinza);font-size:.84rem;line-height:1.5}

/* ---------------- frase-tese, fecho, texto longo ---------------- */
/* a frase de tese enquadrada pelos colchetes finos, sem cor */
.frase{position:relative;margin:3.2rem auto 0;max-width:40ch;padding:1.6rem 2rem;text-align:center;color:var(--branco);
  font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:520;font-stretch:110%;line-height:1.35;letter-spacing:-.01em}
.frase::before,.frase::after{content:"";position:absolute;width:1.3rem;height:1.3rem;border:1.5px solid var(--cinza)}
.frase::before{left:0;top:0;border-right:0;border-bottom:0}
.frase::after{right:0;bottom:0;border-left:0;border-top:0}
.fecho{text-align:center}
.fecho .tit i{margin-left:auto;margin-right:auto}
.fecho .tit h2,.fecho .tit p{margin-left:auto;margin-right:auto}
.fecho .botoes{justify-content:center}
.texto-longo{max-width:70ch;font-size:1.05rem;line-height:1.7;color:#DCE5F2}
.texto-longo b{color:var(--branco);font-weight:650}

/* ---------------- catalogo de funcionalidades ----------------
   Agrupado por FUNCAO, nao por segmento. MATRIZ DE FIOS, nao cartoes: o item
   nao tem fundo nem borda propria; a cor do grupo aparece uma vez so, no
   ponto ao lado do titulo. */
.grupos{display:grid;gap:clamp(2.2rem,4vw,3.2rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
/* cabecalho do grupo: ponto colorido + nome em caixa normal + fio ate a margem.
   Era versalete espacejado ate 11/09 — rotulo em caixa alta e um dos
   "delatores" de pagina gerada; o nome do grupo e conteudo, nao etiqueta. */
.grupo h3{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;
            font-size:1.02rem;font-weight:650;font-stretch:110%;letter-spacing:-.005em;color:var(--branco)}
.grupo h3::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--cor)}
.grupo h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--traco),transparent)}

/* Os 4 grupos sao <details> ABERTOS no HTML: sem JS a pagina fica exatamente
   como estava, que e o estado seguro. O script inline so FECHA os tres ultimos
   abaixo de 560px. No desktop nada muda. */
/* 44px tambem no desktop: medido em 11/09, o gatilho tinha 22px acima de 560 */
.grupo > summary{display:flex;align-items:center;gap:.65rem;cursor:pointer;list-style:none;padding-bottom:.15rem;min-height:44px}
.grupo > summary::-webkit-details-marker{display:none}
.grupo > summary > h3{flex:1;margin-bottom:0}
.grupo > summary::after{content:"";flex:none;width:.44rem;height:.44rem;margin:0 .18rem 0 .3rem;
                        border-right:1.7px solid var(--cinza);border-bottom:1.7px solid var(--cinza);
                        transform:translateY(-.14rem) rotate(45deg);transition:transform .25s var(--ease)}
.grupo[open] > summary::after{transform:translateY(.06rem) rotate(-135deg)}
.grupo > summary:hover > h3,.grupo > summary:active > h3{color:var(--ciano)}
.grupo[open] > summary{margin-bottom:1rem}

/* 3 colunas fixas: 6 itens por grupo fecham 2 linhas cheias sempre. */
.func{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
      border-top:1px solid var(--linha);border-left:1px solid var(--linha)}
.func li{border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);
         padding:1.05rem 1.15rem;transition:background .2s var(--ease)}
.func li:hover{background:rgba(255,255,255,.028)}
.func b{display:block;font-size:.93rem;font-weight:650;margin-bottom:.2rem;color:var(--branco)}
.func span{display:block;color:var(--cinza);font-size:.82rem;line-height:1.45;max-width:46ch}
@media (max-width:900px){ .func{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .func{grid-template-columns:1fr;border-left:0}
  .func li{border-right:0;padding:.95rem 0}
  .func li:last-child{border-bottom:0}
  .func span{max-width:none}
}
.nota{color:var(--cinza);font-size:.88rem;margin-top:2rem;max-width:70ch}

/* duas colunas texto+imagem */
.duas{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
.duas.inverte .lado-img{order:-1}
.duas .lado-img{display:flex;flex-direction:column;align-items:center}
/* a janela ocupa a coluna inteira; centrada, ela encolheria ate o tamanho
   intrinseco da imagem e estouraria a coluna */
.lado-img > .janela{align-self:stretch}
@media(max-width:900px){
  .duas{grid-template-columns:1fr;gap:2.4rem}
  .duas.inverte .lado-img{order:0}
  .capa-baixo{grid-template-columns:1fr;gap:0}
  .trab-grade{grid-template-columns:1fr;grid-template-areas:"cab" "telas" "corpo";grid-template-rows:none}
  .trab-telas{margin-top:1.6rem}
}

/* faixa de fundo alternada */
.banda{background:var(--fundo2);--sob:var(--fundo2)}
.banda + section{border-top:0}

/* lista simples, sem cartao — nem toda informacao precisa de caixa */
.marcas{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.marcas li{display:grid;grid-template-columns:1.15rem 1fr;gap:.85rem;align-items:start;font-size:.98rem}
.marcas svg{width:1.15rem;height:1.15rem;margin-top:.24rem}
.marcas b{display:block;font-weight:650}
.marcas span{color:var(--cinza);font-size:.9rem;line-height:1.5}

.legenda{color:var(--cinza);font-size:.84rem;margin-top:1rem;text-align:center;max-width:60ch;margin-inline:auto}

/* link dentro de texto corrido de cartao */
.leva{color:var(--ciano);text-decoration:none;border-bottom:1px solid rgba(53,208,216,.4);transition:border-color .2s}
.leva:hover,.leva:active{border-bottom-color:var(--ciano)}

/* ---------------- rodape ----------------
   A segunda garantia de navegacao. Em cima dele, a REGUA: tracos a cada 8px e
   maiores a cada 40px — o fim da pagina e a borda da prancha. */
footer{position:relative;background:var(--tinta);border-top:1px solid var(--linha);padding:2.6rem 0 3.1rem;color:var(--cinza);font-size:.85rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:.75rem;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,#2B4A80 0 1px,transparent 1px 40px) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,#1B3462 0 1px,transparent 1px 8px) 0 0/100% 45% no-repeat}
footer .lim{display:grid;gap:1.5rem}
footer a{color:var(--cinza)}
.mapa{display:flex;flex-wrap:wrap;gap:.1rem 1.6rem}
/* min-width: "Inicio" media 37px de largura */
.mapa a{text-decoration:none;padding:.62rem 0;min-width:44px;transition:color .2s}
.mapa a:hover,.mapa a:active{color:var(--branco)}
.mapa a[aria-current]{color:var(--branco);font-weight:650}
.assinatura{display:flex;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;align-items:center;
            border-top:1px solid var(--linha);padding-top:1.4rem}
.assinatura a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.assinatura a:hover{color:var(--branco)}
@media(max-width:560px){
  .mapa{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .mapa a{padding:.62rem 0;min-height:44px;display:flex;align-items:center}
}

/* ---------------- movimento: UM momento, na chegada ----------------
   So na capa: a linha da cota se estica sobre o nome, a partir do meio, e
   "sob medida" aparece depois. Nenhuma secao desliza ao aparecer. O resto do
   movimento e resposta ao dedo/mouse (hover, :active, abrir o <details>). */
@media (prefers-reduced-motion:no-preference){
  .h1-cotado .cota::before{--de:scaleX(0);animation:estica .9s var(--ease) .3s both}
  .h1-cotado .cota span{animation:surge .5s var(--ease) .95s both}
}
@keyframes estica{from{transform:var(--de)}}
@keyframes surge{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover,.passo:hover,.janela:hover,.trab-telas:hover .fone-p{transform:none}
  .bt:hover::before,.bt:hover::after,.bt:focus-visible::before,.bt:focus-visible::after{transform:none}
}

/* ---------------- so o que muda de FORMA, nao de tamanho ---------------- */
@media(max-width:560px){
  .botoes{flex-direction:column}
  /* `.botoes .bt`, nao `.bt`: o botao do TOPO nao pode esticar */
  .botoes .bt{width:100%}
  /* so "WhatsApp" ate 560: "Falar no WhatsApp" estoura 11px em 430 */
  .topo .bt .longo{display:none}
  /* 15px e o minimo honesto para quem tem 40-55 anos e le a noite */
  /* .89rem = 15,1px. Ate 11/09 era .88rem = 14,96px, que a medicao pega
     como abaixo de 15 */
  .func span,.passo span,.marcas span,.card p,footer,.trab-dados dt,.trab-nota,.legenda,.nota{font-size:.89rem;line-height:1.55}
  .fecho,.fecho .tit p{text-align:left}
  .fecho .tit i{margin-left:0}
}
@media(max-width:420px){
  .marca{font-size:1rem;gap:.5rem}
  .marca .simbolo{width:1.3rem;height:1.3rem}
  .topo{gap:.45rem}
  .topo .bt{padding-left:.8rem;padding-right:.8rem}
}


/* =======================================================================
   DENSIDADE NO CELULAR (rodada de 08/09, mantida no redesenho)
   Tudo aqui mora dentro de media query. O que encolhe e ESPACO, nao texto.
   Referencias medidas em 390: padding de secao Vercel 24 / Linear 40-48 /
   Cora 48 / Stripe 56; respiro sob o H2 Linear 24 / Cora 24.
   ======================================================================= */
@media(max-width:640px){
  :root{--secao:2.5rem}
  .tit{margin-bottom:1.6rem}
  .tit i{margin-bottom:.7rem}
  .tit p{margin-top:.6rem;line-height:1.5}
  .tit h2,.h2-solto{font-size:1.5rem}

  .h1-cotado{padding-top:1.7rem}
  .capa{padding:2.2rem 0 2.4rem}
  .capa h1{font-stretch:106%}
  .capa-texto{padding-left:1rem}
  .capa .tag{margin-top:.55rem}
  .capa .sub{margin-top:1rem}
  .capa .oferta{margin-top:.7rem}
  /* so a marca de cima: a de baixo cai em cima do colchete do botao */
  .corte.ie{top:.9rem}.corte.id{display:none}


  .botoes{margin-top:1.4rem;gap:.9rem}
  .bt{padding:.85rem 1.35rem}

  /* passos: numero numa coluna a esquerda, ao lado do titulo */
  .passos{margin-top:1.4rem;gap:.8rem}
  .passo{padding:1.05rem 1.1rem 1.1rem;display:grid;grid-template-columns:1.9rem 1fr;column-gap:.7rem}
  .passo b{grid-row:1;grid-column:1;font-size:1.35rem;margin:0;line-height:1.3}
  .passo strong{grid-row:1;grid-column:2;margin-bottom:0;line-height:1.3}
  .passo span{grid-row:2;grid-column:2}

  .marcas{margin-top:1.2rem;gap:.75rem}
  .grupos{gap:1.5rem;margin-top:1.6rem}
  .grupo h3{margin-bottom:.7rem}
  .frase{margin-top:1.8rem;padding:1.1rem 1.3rem;text-align:left}
  .nota{margin-top:1.3rem}
  .legenda{margin-top:.7rem}
  .texto-longo{line-height:1.6}
  .duas{gap:1.5rem}

  /* o trabalho: dados mais estreitos, celular um pouco maior sobre a janela */
  .trab-dados{margin-top:1.2rem}
  .trab-dados div{grid-template-columns:6.2rem minmax(0,1fr);padding:.7rem 0}
  .trab-telas{padding:1.9rem 0 4.2rem;margin-top:1.2rem}
  .fone-p,.trab-telas > .cota-p{width:31%}
  .fone-p{bottom:1.7rem;border-width:.28rem;border-radius:1rem}
  .trab-nota{margin-top:1rem}

  footer{padding:1.9rem 0 1.9rem}
  footer .lim{gap:1.1rem}
  .assinatura{padding-top:.6rem}
}

@media(max-width:560px){
  /* CARTAO VIRA LINHA: no celular a caixa nao paga o que custa */
  .grade{gap:0;border-top:1px solid var(--linha)}
  .card{background:none;border:0;border-bottom:1px solid var(--linha);border-radius:0;
        padding:1rem 0;display:grid;grid-template-columns:1.65rem 1fr;column-gap:.75rem;align-items:start}
  .card:hover{transform:none;box-shadow:none}
  .card svg{grid-column:1;grid-row:1;margin-top:.05rem}
  .card .tarja{position:static;grid-column:1;grid-row:1/3;width:.3rem;height:100%;justify-self:start;margin-top:.15rem}
  .card h3{grid-column:2;grid-row:1;margin:0;line-height:1.3}
  .card p{grid-column:2;grid-row:2;margin-top:.4rem}
  .func li{padding:.72rem 0}
  /* o gatilho dos 4 grupos: alvo de 44px */
  .grupo > summary{padding:.72rem 0;min-height:44px}
  .grupo[open] > summary{margin-bottom:.5rem}
  .capa .oferta{font-size:.9rem}
}

@media(max-width:420px){
  /* 320px: trilha de grid `1fr` tem min-width:auto e cresce ate caber a
     palavra mais larga — sem isto a pagina rola na horizontal */
  .duas > *,.capa-baixo > *,.trab-grade > *{min-width:0}
  /* o titulo FECHA a largura em vez de so encolher: em 320 "WebModeling"
     cabe em 102% sem descer abaixo de 35px */
  .capa h1{font-size:clamp(2.1rem,10.4vw,2.65rem);font-stretch:102%}
  /* a Archivo e mais larga que a Segoe UI: em 320 a barra estourava 12px.
     Fechar a LARGURA da letra (e nao o tamanho) devolve os pixels sem
     encolher o nome da empresa */
  .marca{font-size:.95rem;font-stretch:100%}
  .marca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topo .bt{padding-left:.7rem;padding-right:.7rem;font-size:.82rem;font-stretch:100%}
}