/* paginas novas da loja (prefixo lsp-): area do cliente, renovacao, download, blog */

.lsp-nb{white-space:nowrap}

/* ---------- breadcrumb ---------- */
.lsp-crumbs{background:#fff;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}
.lsp-crumbs ol{display:flex;align-items:center;gap:8px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap;list-style:none;margin:0 auto}
.lsp-crumbs li{display:inline-flex;align-items:center;gap:8px}
.lsp-crumbs a{color:var(--ink-2)}
.lsp-crumbs a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.lsp-crumbs b{color:var(--ink);font-weight:600}
.lsp-crumbs svg{width:12px;height:12px;stroke:var(--ink-3);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.lsp-hero{background:#0C1B33;color:#fff;padding:62px 0 66px}
.lsp-hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.lsp-hero--solo .lsp-hero__in{grid-template-columns:1fr}
.lsp-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:13px}
.lsp-hero h1{color:#fff;font-size:43px;font-weight:800;letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
/* medido: o texto natural do H1 do blog tem 892px em 43px bold, e 30ch na Open Sans
   davam so 504px, forcando 3 linhas com a do meio curta. 720px deixa o text-wrap:balance
   resolver em 2 linhas equilibradas. */
.lsp-hero--solo h1{max-width:720px}
/* 62ch dava 620px e cortava no meio a frase "Aqui voce chega ao painel da sua
   assinatura do SketchUp e ao atendimento de pos-venda", que mede 735px. Como cada
   frase ja e um bloco (.ls-sentences), quebrar dentro dela e quebra a toa. */
.lsp-hero--solo .lsp-hero__sub{max-width:760px}
.lsp-hero__sub{font-size:17.5px;color:#C9D2E2;line-height:1.65;margin:16px 0 26px;max-width:56ch}
.lsp-hero__cta{display:flex;gap:13px;flex-wrap:wrap}
.lsp-hero__trust{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:26px;padding:0;list-style:none;font-size:14px;color:#C9D2E2}
.lsp-hero__trust li{display:inline-flex;align-items:center;gap:8px}
.lsp-hero__trust svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- secoes ---------- */
.lsp-sec{padding:62px 0}
.lsp-sec--alt{background:var(--lav)}
.lsp-sec__head{max-width:660px;margin-bottom:38px}
.lsp-sec__head h2{font-size:32px;letter-spacing:-.01em}
.lsp-sec__head p{font-size:16.5px;color:var(--ink-2);line-height:1.68;margin:13px 0 0}

/* Intro de secao que e uma FRASE SO por linha (o <span> de .ls-sentences ja e block).
   Em 660px a frase mais longa da hub media 933px e quebrava em duas, virando tres
   linhas onde deviam ser duas — o texto "pulava linha" sem motivo. 960px cabe a maior
   (medido, nao estimado) e ainda sobra folga dentro do container de 1200px. */
.lsp-sec__head--wide{max-width:960px}
/* Subtitulo em UMA linha, usando o container inteiro.
   Medido na /areas-de-atuacao: o cabecalho estava preso em 960px dentro de um container
   de 1200px — 240px de largura livre sobrando — e as frases quebravam em 2 e 3 linhas
   (a mais longa precisa de 932px). Sem o teto, cada frase cabe numa linha so e o espaco
   deixa de ficar vazio a direita.
   So se aplica onde a frase E curta o bastante para virar UMA linha: paragrafo de varias
   linhas continua com teto, senao a medida de linha estoura (>85 caracteres cansa a leitura). */
.lsp-sec__head--linha-unica{max-width:none}
.lsp-sec__head--center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- cards genericos ---------- */
.lsp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lsp-cards--2{grid-template-columns:repeat(2,1fr)}
.lsp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.lsp-card__t{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;margin-bottom:11px}
.lsp-card__t h3{font-size:17.5px}
.lsp-card__t svg{width:23px;height:23px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lsp-card p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.68}
.lsp-card__link{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-weight:700;font-size:14.5px;color:var(--blue)}
.lsp-card__link:hover{text-decoration:underline;text-underline-offset:3px}
.lsp-card__link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- passos ---------- */
.lsp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:p}
/* numero AO LADO do titulo, nunca acima : empilhado, o
   circulo virava um elemento solto e o titulo perdia o vinculo com o numero. */
.lsp-step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:26px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.lsp-step__n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:15px;flex:none}
.lsp-step h3{font-size:17px;margin:0}
.lsp-step p{grid-column:1/-1;margin:12px 0 0;font-size:15px;color:var(--ink-2);line-height:1.68}

/* ---------- painel de acesso (area do cliente) ---------- */
/* com 4 cards a grade virou 2x2: sem stretch, a dupla de cada linha termina em
   alturas diferentes e o bloco fica esfarrapado. O ultimo filho (botao ou canais)
   desce para a base, entao os pares fecham na mesma linha. */
.lsp-access{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lsp-access__box{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.lsp-access__box>:last-child{margin-top:auto}
.lsp-access__box .ls-btn{align-self:flex-start}
.lsp-access__box h3{font-size:19px;margin-bottom:10px}
.lsp-access__box p{font-size:15px;color:var(--ink-2);line-height:1.68;margin:0 0 18px}
.lsp-note{background:var(--blue-soft);border-left:3px solid var(--blue);border-radius:var(--radius-sm);padding:15px 17px;font-size:14.5px;color:var(--ink-2);line-height:1.66;margin-top:22px}

/* ---------- formulario ---------- */
.lsp-form{display:grid;gap:15px}
.lsp-field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
/* MESMA classe de defeito da .lse-field (varrida em 2026-07-29): #CBD5E1 dava 1,90:1
   contra o branco e o contorno do campo era imperceptivel. WCAG 1.4.11 pede 3:1 para o
   limite visual que identifica o componente. #7C8598 = 3,70:1. Vale para os formularios
   de area-do-cliente, renovar e download, que usam este mesmo bloco. */
.lsp-field input,.lsp-field select,.lsp-field textarea{width:100%;font-family:var(--font);font-size:15.5px;color:var(--ink);background:#fff;border:1.5px solid #7C8598;border-radius:var(--radius-sm);padding:12px 14px}
.lsp-field input::placeholder,.lsp-field textarea::placeholder{color:#767D8A;opacity:1}
.lsp-field input:focus,.lsp-field select:focus,.lsp-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,99,163,.16)}
.lsp-field--err input,.lsp-field--err select{border-color:var(--err,#C0392B)}
.lsp-err{display:block;margin-top:5px;font-size:13px;color:#A3320F}
.lsp-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.lsp-consent input{width:17px;height:17px;margin-top:2px}
.lsp-formcard{background:#fff;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-lg);color:var(--ink)}
.lsp-formcard h2{font-size:22px;margin-bottom:7px}
.lsp-formcard__sub{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 0 20px}
.lsp-ok{display:none;text-align:center;padding:14px 4px}
.lsp-ok svg{width:52px;height:52px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.lsp-ok h3{font-size:20px;margin-bottom:9px}
.lsp-ok p{font-size:15px;color:var(--ink-2);line-height:1.66;margin:0}

/* ---------- blog ---------- */
.lsp-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lsp-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.lsp-post:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* MESMO defeito que a capa do artigo (.lsp-artigo__capa, mais abaixo neste arquivo) — a correcao tinha sido aplicada la e o
   card da grade ficou para tras. Os atributos width="640" height="360" da tag viram hint
   `height:360px`, e com ALTURA explicita o navegador IGNORA o aspect-ratio: a caixa saia
   366x360 (quase quadrada) numa capa 16/9. Medido: object-fit:cover ampliava para preencher
   e comia 42,8% da LARGURA em 1440px e 52% em 1024px — como o titulo vem desenhado dentro da
   arte da capa, ele era cortado no meio da palavra.
   `height:auto` devolve o comando ao aspect-ratio. E `contain` no lugar de `cover` porque a
   capa e uma PECA GRAFICA com texto, nao uma foto: cortar borda de foto e aceitavel, cortar
   titulo nao. Nas capas 16/9 (11 de 12 medidas) contain e cover dao o mesmo resultado, sem
   barra nenhuma; a diferenca so aparece na capa fora de proporcao, e ai a barra e melhor que
   o corte. O fundo da barra e o mesmo tom do placeholder, entao le como moldura. */
.lsp-post__img{aspect-ratio:16/9;width:100%;height:auto;object-fit:contain;background:#fff}
.lsp-post__body{display:flex;flex-direction:column;flex:1;padding:20px 21px 22px}
.lsp-post__tag{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.lsp-post h3{font-size:17.5px;line-height:1.34;margin-bottom:10px}
.lsp-post p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.lsp-post__meta{margin-top:auto;padding-top:15px;font-size:13px;color:var(--ink-3)}
.lsp-empty{text-align:center;padding:52px 20px;color:var(--ink-2);font-size:16px}
.lsp-skel{border-radius:var(--radius);background:linear-gradient(90deg,#EEF0F3 25%,#F7F8FA 50%,#EEF0F3 75%);background-size:400% 100%;animation:lsp-sh 1.3s ease-in-out infinite;min-height:300px}
@keyframes lsp-sh{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.lsp-skel{animation:none}}

/* ---------- artigo ---------- */
.lsp-artigo{padding:52px 0 64px}
.lsp-artigo__in{max-width:760px;margin:0 auto}
.lsp-artigo h1{font-size:38px;letter-spacing:-.01em;margin-bottom:14px}
.lsp-artigo__meta{font-size:14px;color:var(--ink-3);margin-bottom:28px}
/* A capa tinha so width:100%. Como a tag carrega os atributos width="1200" height="675",
   o navegador usava 675px como ALTURA FIXA e esticava a imagem: medido 41% de distorcao no
   desktop e 73% no mobile (327x675 numa foto 16:9). height:auto sozinho resolveria a
   distorcao, mas capa de proporcao diferente deixaria o topo do artigo saltando de tamanho.
   aspect-ratio + object-fit:cover mantem todas iguais e RECORTA em vez de deformar. */
.lsp-artigo__cap{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:var(--radius);margin:0 auto 30px}
.lsp-conteudo{font-size:17px;line-height:1.78;color:#2B3138}
.lsp-conteudo p{margin:0 0 20px}
.lsp-conteudo h2{font-size:26px;margin:38px 0 14px}
.lsp-conteudo h3{font-size:20px;margin:30px 0 12px}
.lsp-conteudo ul,.lsp-conteudo ol{margin:0 0 20px;padding-left:22px}
.lsp-conteudo li{margin-bottom:8px}
/* imagem do corpo: nunca ultrapassa a coluna, fica centralizada e nao estica.
   O height:auto anula o atributo height que vem do WordPress; o max-width segura
   foto grande dentro da coluna de leitura. Uma regra so, para nao repetir a colisao
   de cascata que ja aconteceu no H1 do blog (duas regras de mesma forca e a de baixo
   apagando a de cima). */
.lsp-conteudo img{display:block;max-width:100%;height:auto;border-radius:var(--radius-sm);margin:8px auto 22px}
.lsp-conteudo a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.lsp-conteudo blockquote{margin:0 0 22px;padding:4px 0 4px 20px;border-left:3px solid var(--gold);color:var(--ink-2);font-style:italic}
.lsp-fonte{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);line-height:1.66}
.lsp-fonte a{color:var(--blue)}

/* ---------- faixa de conversao ---------- */
.lsp-cta{background:#0C1B33;color:#fff;padding:56px 0;text-align:center}
.lsp-cta h2{color:#fff;font-size:29px;max-width:22ch;margin:0 auto 12px}
.lsp-cta p{color:#C9D2E2;font-size:16.5px;line-height:1.66;max-width:56ch;margin:0 auto 26px}

/* ---------- FAQ ---------- */
.lsp-faq{max-width:820px;margin:0 auto}
.lsp-faq__item{border-bottom:1px solid var(--line);padding:4px 0}
.lsp-faq__item summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:700;font-size:16.5px;position:relative}
.lsp-faq__item summary::-webkit-details-marker{display:none}
.lsp-faq__item summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s ease}
.lsp-faq__item[open] summary::after{transform:rotate(-135deg)}
.lsp-faq__a{padding:0 0 20px}
.lsp-faq__a p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.72}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .lsp-hero__in{grid-template-columns:1fr;gap:34px}
  .lsp-hero h1{font-size:34px;max-width:none}
  .lsp-cards,.lsp-steps,.lsp-posts,.lsp-access{grid-template-columns:1fr}
  .lsp-cards--2{grid-template-columns:1fr}
  .lsp-sec{padding:48px 0}
  .lsp-sec__head h2{font-size:26px}
  .lsp-artigo h1{font-size:29px}
  .lsp-conteudo{font-size:16.5px}
}
@media (max-width:680px){
  .lsp-hero{padding:44px 0 48px}
  .lsp-hero h1{font-size:29px}
  .lsp-hero__sub{font-size:16px}
  .lsp-formcard{padding:24px 20px}
  .lsp-cta h2{font-size:24px}
}

/* estado de erro do LojaForms (classe .is-err) */
.lsp-field input.is-err,.lsp-field select.is-err{border-color:var(--err,#C0392B);background:#FEF6F4}
.lsp-consent input.is-err{outline:2px solid var(--err,#C0392B);outline-offset:2px}

/* ---------- paginacao do blog ---------- */
.lsp-pag{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:42px;flex-wrap:wrap}
.lsp-pag a,.lsp-pag__at{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-sm);font-weight:700;font-size:15px}
.lsp-pag a{border:1px solid var(--line);color:var(--ink-2);background:#fff}
.lsp-pag a:hover{border-color:var(--blue);color:var(--blue)}
.lsp-pag__at{background:var(--blue);color:#fff}

/* anti-viuva (2a camada, alem do &nbsp; do gerador) */
.lsp-card p,.lsp-step p,.lsp-faq__a p,.lsp-hero__sub,.lsp-sec__head p,.lsp-note,
.lsp-conteudo p,.lsp-conteudo li,.lsp-post p,.lsp-formcard__sub,.lsp-cta p,.lsp-fonte{text-wrap:pretty}


/* canais de suporte tecnico (e-mail e telefone) na area do cliente */
.lsp-canais{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0}
.lsp-canais a{display:inline-flex;align-items:center;font-weight:700;font-size:15px;color:var(--blue)}
.lsp-canais a:hover{text-decoration:underline;text-underline-offset:3px}

/* card de artigo sem imagem: em vez de um retangulo cinza vazio, uma faixa navy
   com a marca. Acontece quando o post nao tem imagem destacada nem imagem no corpo. */
.lsp-post__img--vazia{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0C1B33 0%,#16243C 100%)}
.lsp-post__img--vazia img{width:auto;height:34px;opacity:.9}

/* ================================================================
   CROQUI no topo escuro (blog e download) — 2026-07-28
   O lado direito do hero era navy chapado. Entra line-art arquitetural
   branco, seguindo o padrao de croqui: contain (nunca cover,
   que distorce), jogado para a direita, com fade radial nas bordas para
   nao virar um retangulo seco, e opacidade baixa para o texto continuar
   legivel. Nao e ilustracao decorativa: e desenho tecnico de verdade.
   ================================================================ */
.lsp-hero--croqui{position:relative;overflow:hidden}
.lsp-hero--croqui::before{
  content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:min(56%,720px);height:150%;
  background-repeat:no-repeat;background-position:right -16px center;background-size:contain;
  opacity:.34;pointer-events:none;z-index:0;
  /* o fade come so a ESQUERDA, onde o desenho encontra o texto. Comer tambem a direita
     cortava as torres no meio e o croqui virava um borrao pela metade. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
}
/* malha de prancha tecnica por baixo do croqui, bem discreta */
.lsp-hero--croqui::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
}
.lsp-hero--croqui>*{position:relative;z-index:1}
/* Este hero ja gasta os DOIS pseudo-elementos: `.ls-bp::before` desenha a grade e
   `.ls-headmark::after` desenha o losango. Empilhar uma classe de croqui que tambem usa
   ::before/::after nao cria pseudo-elemento novo — as declaracoes MESCLAM: o croqui entrou
   no ::before da grade, herdou a posicao dela e foi parar a ESQUERDA, e a malha extra do
   ::after tomou o lugar do losango, que sumiu. Por isso o croqui e ELEMENTO REAL, pelo
   mecanismo `.ls-hero__art` que ja existe em store.css. */
.lsp-hero--com-croqui{position:relative;overflow:hidden}
.lsp-hero--croqui-torres::before{background-image:url("../img/croqui-torres-linhas.png")}
.lsp-hero--croqui-oslo::before{background-image:url("../img/croqui-oslo-linhas.png")}
.lsp-hero--croqui-scan::before{background-image:url("../img/croqui-scan-linhas.png")}

@media (max-width:900px){
  /* no celular o croqui passa por tras do texto: derruba a opacidade e encolhe */
  .lsp-hero--croqui::before{width:70%;opacity:.11}
  .lsp-hero--croqui::after{background-size:36px 36px;opacity:.7}
}

/* Variante BASE: hero de 2 colunas (texto a esquerda, card de formulario a direita).
   Aqui o croqui nao pode ir para a direita — ficaria escondido atras do card branco.
   Entao ele corre pela BASE, largo, com fade para cima: preenche a faixa navy vazia
   sem encostar no texto nem no formulario. */
.lsp-hero--croqui-base::before{
  top:auto;bottom:0;right:0;left:0;
  /* ESPELHADO: no arquivo, a fachada fica a direita e a nuvem de pontos a esquerda.
     Sem inverter, o que sobra a vista (fora de tras do card do formulario) e justamente
     a nuvem de pontos, que le como sujeira em vez de arquitetura. */
  transform:scaleX(-1);
  width:100%;height:82%;
  background-position:right bottom;background-size:auto 100%;
  opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 52%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 52%,#000 100%);
}
@media (max-width:900px){
  .lsp-hero--croqui-base::before{height:44%;opacity:.15;background-size:auto 100%}
}

/* ============================================================================
   /entrar — acesso do cliente com a pegada de uma tela de login.
   NAO e a tela da Trimble: e o acesso NA TOTALCAD, que capta o contato e encaminha
   ao gerenciador de licenca da Trimble. Sem pedir senha (a senha e so na Trimble).
   ============================================================================ */
/* min-height de 100vh-220 esticava a secao em telas altas e sobrava navy morto. A altura
   agora vem do conteudo, com respiro generoso. `overflow:hidden` contem o croqui. */
.lse-wrap{position:relative;overflow:hidden;background:#0C1B33;padding:64px 0 76px}
/* Croqui de fundo pelo mesmo mecanismo das outras paginas (.ls-hero__art existe em
   store.css). Sem ele, o lado direito era navy chapado — o "vazio" que o Michael via. */
/* a mascara antiga so desvanecia a ESQUERDA; a direita o desenho terminava reto na borda
   da viewport e lia como asset cortado, nao como fundo. Agora some dos dois lados. */
.lse-wrap>.ls-hero__art{position:absolute;z-index:0;pointer-events:none;top:0;right:0;bottom:0;width:min(560px,42vw);opacity:.20;-webkit-mask-image:linear-gradient(95deg,transparent 0,#000 55%,#000 86%,transparent 100%);mask-image:linear-gradient(95deg,transparent 0,#000 55%,#000 86%,transparent 100%)}
.lse-wrap>.ls-container{position:relative;z-index:1}
/* align-items:center deixava a coluna da direita (301px) boiando no meio de um card de
   720px: 209px de vao morto ACIMA e outros 209 ABAIXO, medido. Duas colunas de alturas
   muito diferentes nao se centralizam — elas se alinham pelo topo, e a diferenca de altura
   vira respiro embaixo, que o olho aceita. O padding-top da lateral existe para o titulo
   dela nascer na mesma linha do titulo do card, e nao na borda do card. */
/* 420px de card dentro de 1200px deixava a pagina "boiando" em tela larga: 360px de
   margem morta de cada lado em 1920. O container proprio de 980px junta as duas colunas
   e o card sobe para 460px, que e a largura confortavel de um formulario de 3 campos. */
/* align-items:start (nao stretch): as duas colunas tem alturas naturais diferentes e
   esticar a da direita so servia para o `margin-top:auto` da nota abrir vao morto. */
.lse-grid{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:56px;align-items:start;max-width:1080px;margin:0 auto}
.lse-card{background:#fff;border-radius:16px;padding:36px 36px 30px;box-shadow:0 24px 60px rgba(3,10,26,.34)}
.lse-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.lse-logo{height:32px;width:auto}
/* nowrap: em 375 o rotulo quebrava em 2 linhas (45px de altura) e, como o head e
   align-items:center, a logo de 30px ficava boiando no meio do badge de 45 — o topo do
   card lia torto. Em telas estreitas o badge sai (ver @media abaixo). */
.lse-badge{flex:none;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:6px 11px;border-radius:var(--pill)}
/* 25px nao dominava nada: a distancia para o H2 da coluna direita (19px) era de 6px e a
   pagina inteira lia como um bloco de texto sem titulo. */
.lse-t{font-size:30px;line-height:1.18;letter-spacing:-.015em;margin:0 0 10px;color:var(--ink)}
.lse-sub{font-size:15px;color:var(--ink-2);line-height:1.62;margin:0 0 24px}
.lse-form{display:flex;flex-direction:column;gap:15px}
.lse-field{display:flex;flex-direction:column;gap:6px}
.lse-field label{font-size:13.5px;font-weight:700;color:var(--ink)}
/* MEDIDO: a borda `var(--line)` (#E2E4E8) dava 1,27:1 contra o card branco e o fundo
   #F8FAFC dava 1,05:1 — o campo simplesmente nao tinha contorno perceptivel, e a pagina
   lia como tres retangulos fantasma (foi o "feio/mal formatado" apontado).
   WCAG 2.1 SC 1.4.11 (Non-text Contrast) exige 3:1 para o limite visual que IDENTIFICA
   o componente. #7C8598 da 3,70:1 contra o branco — passa com folga, sem virar caixa preta.
   Fundo branco (nao o tint 1,05:1): quem define o campo passa a ser a borda, de verdade. */
.lse-field input{font-family:var(--font);font-size:15.5px;padding:12px 14px;border:1.5px solid #7C8598;border-radius:9px;background:#fff;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
.lse-field input::placeholder{color:#767D8A;opacity:1}/* 4,58:1 contra branco: dica legivel, sem competir com o valor digitado */
.lse-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,99,163,.18)}
.lse-field input.is-err{border-color:#B3261E;background:#FEF6F5}
.lse-err{font-size:13px;color:#D14343;font-weight:600}
.lse-btn{width:100%;margin-top:3px;padding:13px 20px;font-size:15px}
.lse-hint{font-size:12px;color:#6F757F;line-height:1.55;margin:2px 0 0}
.lse-hint a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.lse-alt{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.lse-alt__l{font-size:13.5px;color:var(--ink-2)}
.lse-alt__wa{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.lse-alt__wa:hover{text-decoration:underline}
.lse-side{display:flex;flex-direction:column;color:#fff;padding:6px 0 0}
.lse-side__t{font-size:22px;letter-spacing:-.012em;margin:0 0 18px;color:#fff}
.lse-side__list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
/* cada item ganha superficie OPACA propria: sobre o croqui, item translucido deixava o
   desenho atravessar o texto (REGRA 14). #16243C = branco 4% ja composto sobre o navy. */
.lse-side__list li{display:flex;gap:13px;align-items:flex-start;background:#16243C;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:15px 16px}
.lse-side__ic{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.lse-side__ic svg{width:20px;height:20px;fill:none;stroke:#F1986C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lse-side__list b{display:block;font-size:15px;margin-bottom:2px}
/* ESCOPADO em `div span` de proposito. Escrito como `.lse-side__list span` (0,2,1), ele
   vencia a `.lse-side__ic` (0,1,0) e trocava o display:flex do ICONE por block — com isso
   align-items/justify-content viravam enfeite e o SVG colava no canto superior esquerdo da
   caixa de 38px (medido: folga 0/0 em cima e a esquerda, 18/18 embaixo e a direita, ou seja
   9px fora do centro nos dois eixos). O span da descricao vive dentro de um <div>; o do
   icone e filho direto do <li>. O `div` separa os dois sem precisar de !important. */
.lse-side__list div span{display:block;font-size:13.5px;color:#C9D2E2;line-height:1.55}
/* sem margin-top:auto: com align-items:start a coluna nao estica mais, e o `auto` so
   servia para empurrar a nota para a base de uma coluna esticada — era ele que abria os
   259px de vao morto medidos entre o 3o card e a nota em 1024/1440/1920. */
.lse-side__note{font-size:12.5px;color:#A9B6CC;line-height:1.6;margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:860px){
  .lse-grid{grid-template-columns:1fr;gap:26px;max-width:470px;margin:0 auto}
  .lse-side{order:2;padding:0}
  .lse-wrap>.ls-hero__art{width:78%;opacity:.10}
  .lse-wrap{padding:34px 0 48px}
  .lse-t{font-size:27px}
  .lse-side__t{font-size:20px}
}
@media (max-width:520px){
  /* MEDIDO em 375: o rotulo do CTA quebrava em 2 linhas (botao com 61px de altura). O
     .ls-btn global e uppercase com letter-spacing .08em — e o espacamento, nao o corpo da
     fonte, que estoura os 259px uteis do card. Reduzir os dois devolve UMA linha. */
  .lse-btn{font-size:13.5px;letter-spacing:.04em;padding-left:14px;padding-right:14px}
  .lse-card{padding:26px 22px 24px}
  /* o badge repete o que a navegacao e o titulo ja dizem; em tela estreita ele so competia
     com a logo pelo topo do card. Sai no mobile em vez de quebrar em 2 linhas. */
  .lse-badge{display:none}
  .lse-t{font-size:25px}
}