/* ============================================
   ZapTex - Componentes das landing pages
   --------------------------------------------
   Carregado DEPOIS de assets/css/main.css.
   Usa exclusivamente os tokens da home:
     --brand      #1b26c4
     --brand-grad linear-gradient(135deg,#1b26c4,#2563eb,#1b26c4)
     --bg         #f5f7fa
     Poppins (texto e, nas LPs, tambem display) / Ubuntu (home)
   Nenhuma cor nova foi introduzida. A unica troca tipografica e a
   dos titulos de display das LPs, decidida pelo cliente (ver bloco
   TIPOGRAFIA DE DISPLAY DAS LPs).
   ============================================ */

/* === HERO DAS LPs: NUNCA COLIDIR COM O HEADER FIXO ===
   O main.css tem um bloco @media (max-width:768px) que fecha cedo demais
   (linha ~1651), vazando 'margin-top: 6vh !important' de .hero--left
   .hero__content para TODAS as larguras. Com header de 81px, 6vh de 900px
   da 54px e o conteudo entra por baixo do header.

   Em vez de mexer no main.css (que e a home em producao), o hero das LPs
   passa a reservar a altura do header como padding e centraliza o conteudo
   no espaco restante. Assim funciona para qualquer altura de titulo.
   Especificidade 0,3,1 com !important vence a regra vazada (0,2,0). */
body[data-page-type="lp"] .hero {
  padding-top: 7rem;      /* 5rem do #siteHeader + 2rem de respiro */
  padding-bottom: 3rem;
}

body[data-page-type="lp"] .hero .hero__content,
body[data-page-type="lp"] .hero--left .hero__content {
  margin-top: 0 !important;
}

/* === FUNDO DAS SECOES CLARAS NAS LPs ===
   A .sobre-section da home termina em #c1c5cc. Nas faixas curtas das LPs
   esse cinza concentrava no canto direito e parecia uma sombra pesada.
   Mantemos a profundidade do gradiente, mas com transicao bem mais suave,
   sem alterar a home. */
body[data-page-type="lp"] .sobre-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 62%, #eef2f7 100%);
}

/* === DECORACOES DA HOME QUE VAZAM POR COLISAO DE ID ===
   O main.css decora quatro secoes da home por seletor de ID:
   #diferenciais, #segmentos, #orcamento e #contato (main.css:1439-1520).
   As LPs reaproveitam esses mesmos ids, entao herdam as decoracoes.

   A pior e #diferenciais::before: uma faixa de 120px no topo da secao com
   background rgba(0,0,0,.1) e backdrop-filter: blur(1px). Na home ela cobre
   um fundo de video; na LP de Eventos cobre o selo "POR QUE A ZAPTEX", que
   fica a 80-114px do topo - ou seja, literalmente atras de um blur. Era a
   causa real do texto embacado ali.

   As outras tres sao gradientes com clip-path calibrados para a sequencia
   de cores da home. Nas LPs as secoes vizinhas tem outras cores, entao a
   transicao nao faz o que foi desenhada para fazer e so lava o topo da
   secao. Neutralizadas todas, sem tocar no main.css: a home segue igual.
   O margin-top negativo e mantido, porque e ele que da o encaixe entre
   secoes que o design system usa. */
body[data-page-type="lp"] #diferenciais::before,
body[data-page-type="lp"] #segmentos::before,
body[data-page-type="lp"] #orcamento::before,
body[data-page-type="lp"] #contato::before {
  content: none;
}

/* === ANCORAS SOB O HEADER FIXO ===
   O #siteHeader e fixo e tem 5rem (80px). Sem isso, todo salto de
   ancora esconde ~81px do topo da secao atras do header.
   Escopado a body[data-page-type="lp"] para nao alterar a home. */
body[data-page-type="lp"] section[id],
body[data-page-type="lp"] footer[id],
body[data-page-type="lp"] div[id] {
  scroll-margin-top: 6rem;
}

/* === MENU MOBILE (as LPs precisam; a home segue como esta) === */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: .8rem;
  cursor: pointer;
  color: #fff;
  transition: background .3s ease, color .3s ease;
}

#siteHeader.nav-solid .nav-toggle {
  color: #1c2632;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, .15);
}

#siteHeader.nav-solid .nav-toggle:hover {
  background: rgba(27, 38, 196, .08);
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s ease;
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
  z-index: 59;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(213, 219, 227, .5);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
  display: grid;
  gap: .25rem;
  padding: 1rem 1.25rem 1.5rem;
  /* menus longos precisam rolar em telas baixas, sem arrastar a pagina atras */
  max-height: calc(100vh - 5rem);   /* fallback p/ navegadores sem dvh */
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  /* visibility tira o painel fechado da ordem de foco e dos leitores de tela */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease,
              visibility 0s linear .35s;
}

.nav-mobile.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.nav-mobile a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1c2632;
  padding: .9rem .25rem;
  border-bottom: 1px solid #eef2f6;
}

.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a:hover { color: #1b26c4; }

.nav-mobile-label {
  margin-top: .75rem;
  padding: .5rem .25rem 0;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #475569;
  border-top: 1px solid #eef2f6;
}

.nav-mobile .btn {
  margin-top: .75rem;
  border-bottom: 0;
  color: #fff;
}

@media (min-width: 768px) {
  .nav-toggle,
  .nav-mobile { display: none !important; }
}

/* === TIPOGRAFIA DE DISPLAY DAS LPs ===
   O Ubuntu Bold (700, o peso mais alto que o Google Fonts oferece para
   essa familia) tem traco bem mais fino que o Poppins Bold. Ampliado,
   o texto mostra as franjas de subpixel do Chromium; quando a tela
   aplica escala ou zoom diferente de 100%, essas franjas viram um veu
   e o titulo parece fora de foco. Traco mais denso resiste melhor a
   essa reamostragem.

   Decisao do cliente: titulos de display das 3 LPs passam a Poppins 700,
   a mesma familia dos cards, que renderiza nitida. A home continua em
   Ubuntu (main.css intocado), assim como os textos menores em Ubuntu
   (.footer-title, .lp-flow-num), que nao apresentam o problema. */
/* === ANTIALIASING EM ESCALA DE CINZA ===
   O Chromium no Windows desenha texto com antialiasing subpixel
   (ClearType), que deixa franjas laranja/ciano nas bordas das letras.
   Quando a tela aplica escala ou zoom diferente de 100%, essas franjas
   se misturam e viram um veu colorido: o texto parece fora de foco.
   Efeito pior em texto grande e em maiusculas com letter-spacing largo.

   Promover o contenedor a uma camada de composicao faz o Chrome trocar
   o subpixel por escala de cinza em TODO o texto de dentro, de uma vez,
   em vez de elemento a elemento. Sao 3 camadas por pagina.
   Seguro: header fixo, menu mobile, botao de WhatsApp e modal ficam
   todos FORA de <main>, entao nao mudam de contexto de posicionamento. */
body[data-page-type="lp"] .section-title,
body[data-page-type="lp"] .hero h1,
body[data-page-type="lp"] .lp-cta-band h2,
body[data-page-type="lp"] .lp-stat strong {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  /* Camada de composicao: troca o antialiasing subpixel por escala de
     cinza e elimina as franjas laranja/ciano que borram sob escala de
     tela. Medido neste titulo: franja -49%, nitidez igual.
     So em texto GRANDE - em texto miudo o subpixel e o que da definicao,
     e a escala de cinza deixa mole (testado no selo de secao). */
  transform: translateZ(0);
}

body[data-page-type="lp"] .section-title:not(.produtos-title) {
  color: #0d1726;
}

/* === EYEBROW / SELO DE SECAO (variacao clara do .tag-dashed) ===
   Medidas em multiplos exatos de pixel: .62rem/1.1rem/1.4rem geravam
   9.92 / 17.6 / 22.4px e empurravam o H2 seguinte para um Y fracionario,
   o que soma ao borrado do antialiasing em escala de cinza. */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(27, 38, 196, .08);
  color: #1b26c4;
  font-size: .6875rem;    /* 11px - a 10px o traco ficava com menos de
                             1px e o texto lia como borrado */
  line-height: 1.4545;    /* 16px */
  font-weight: 700;       /* era 600: em corpo pequeno o peso extra e o
                             que sustenta a definicao */
  letter-spacing: .14em;  /* era .18em: espacamento largo demais afina a
                             percepcao do conjunto */
  text-transform: uppercase;
  padding: .5rem 1.125rem;  /* 8px / 18px */
  border-radius: 2rem;
  margin-bottom: 1.5rem;    /* 24px */
}

.lp-eyebrow--onDark {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px);
}

.lp-eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-grad);
  box-shadow: 0 0 0 4px rgba(27, 38, 196, .15);
  animation: pulseDot 2.4s infinite;
}

/* === CABECALHO DE SECAO === */
.lp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.lp-section-head .section-title { margin-bottom: 1rem; }

.lp-section-head p {
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

.lp-section-head--left {
  text-align: left;
  margin-left: 0;
}

/* === FAIXA DE SELOS (abaixo da hero) === */
.lp-badges {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.lp-badge {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
}

.lp-badge svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: #1b26c4;
}

.lp-badge span {
  font-size: .85rem;
  font-weight: 600;
  color: #24313d;
  line-height: 1.35;
}

/* === CARDS DE DOR / PROBLEMA === */
.lp-pain-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.lp-pain {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 14px -6px rgba(20, 40, 60, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.lp-pain:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .1);
}

.lp-pain-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(214, 69, 69, .1);
  color: #d64545;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  margin-top: .1rem;
}

.lp-pain p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: #475569;
}

/* === CHIPS / TAGS === */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.lp-chip {
  font-size: .78rem;
  font-weight: 500;
  color: #24313d;
  background: #fff;
  border: 1px solid #d8e0e9;
  border-radius: 2rem;
  padding: .55rem 1.1rem;
  transition: border-color .25s ease, color .25s ease;
}

.lp-chip:hover {
  border-color: #1b26c4;
  color: #1b26c4;
}

.lp-chip--solid {
  background: rgba(27, 38, 196, .08);
  border-color: transparent;
  color: #1b26c4;
  font-weight: 600;
}

/* === CARD DE ATRIBUTO EM FUNDO CLARO ===
   O .diff-card-premium da home e vidro sobre video escuro (texto branco).
   Esta e a contraparte para secoes claras, com os mesmos tokens. */
.lp-feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Modificador para grades de 6 ou 9 itens: com auto-fit elas quebram em
   4+2 e 4+4+1, deixando a ultima linha orfa. Em 3 colunas fecham exatas. */
@media (min-width: 1000px) {
  .lp-feature-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-feature {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}

.lp-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.lp-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .18);
  border-color: #1b26c4;
}

.lp-feature:hover::before { transform: scaleX(1); }

.lp-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: var(--brand-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 26px -8px rgba(27, 38, 196, .45);
}

.lp-feature h3 {
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.lp-feature p {
  margin: 0;
  font-size: .9rem;
  color: #64748b;
  line-height: 1.6;
}

/* === NUMEROS / PROVA === */
.lp-stats {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}

.lp-stat strong {
  display: block;
  font: 800 clamp(2.2rem, 4vw, 3rem)/1 Ubuntu, system-ui;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-stat span {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  color: #64748b;
  line-height: 1.45;
}

/* === FLUXO 1 - 2 - 3 (terceirizacao) === */
.lp-flow {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .lp-flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
}

.lp-flow-step {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
}

.lp-flow-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: var(--brand-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.35rem/1 Ubuntu, system-ui;
  box-shadow: 0 8px 26px -6px rgba(27, 38, 196, .45);
}

.lp-flow-step h3 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
}

.lp-flow-step p {
  margin: 0;
  font-size: .9rem;
  color: #64748b;
  line-height: 1.55;
}

.lp-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1b26c4;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 899px) {
  .lp-flow-arrow { transform: rotate(90deg); }
}

/* === ABAS (terceirizacao) === */
.lp-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.lp-tab {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .9rem 1.5rem;
  border-radius: .9rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: all .3s ease;
}

.lp-tab:hover {
  border-color: #cbd5e1;
  color: #1b26c4;
}

.lp-tab[aria-selected="true"] {
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 26px -6px rgba(27, 38, 196, .45);
}

.lp-tabpanel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
}

.lp-tabpanel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lp-tabpanel li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: #475569;
}

.lp-tabpanel li::before {
  content: '\2713';
  color: #10b981;
  font-weight: 700;
}

/* === FAIXA CTA EM GRADIENTE === */
.lp-cta-band {
  background: var(--brand-grad);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 40px -18px rgba(27, 38, 196, .55);
}

.lp-cta-band h2 {
  font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.15 Ubuntu, system-ui;
  margin: 0 0 1rem;
  color: #fff;
}

.lp-cta-band p {
  margin: 0 auto 2rem;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.lp-cta-band .btn-outline {
  border-color: rgba(255, 255, 255, .7);
}

.lp-cta-band .btn-light {
  background: #fff;
  color: #1b26c4;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, .25);
}

.lp-cta-band .btn-light:hover {
  transform: translateY(-3px);
}

.lp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* === CARDS DE PRODUTO SEM MODAL ===
   Reaproveita .line-card-premium da home. Aqui apenas o CTA do rodape
   e a marcacao de destaque, que a home nao tem. */
.lp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1b26c4;
}

.lp-card-cta:hover { gap: .7rem; }

.lp-card-flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--brand-grad);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .35rem .7rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(27, 38, 196, .35);
}

/* Nas LPs os cards nao abrem modal: sem cursor de clique e sem tilt. */
.lp-catalog .line-card-premium { cursor: default; }

.lp-catalog .card-figure img {
  animation: none;                 /* sem float continuo: catalogo mais legivel */
}

.lp-catalog .line-card-premium:hover .card-figure img {
  transform: scale(1.04);
}

/* === GRADE DE PROCESSOS / BASTIDORES === */
.lp-process-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lp-process {
  margin: 0;
}

.lp-process img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1.25rem;
  border: 1px solid #d5dbe3;
  background: #f0f3f6;
}

.lp-process figcaption {
  margin-top: .75rem;
  font-size: .85rem;
  font-weight: 600;
  color: #24313d;
  text-align: center;
}

/* Placeholder honesto enquanto as fotos reais de fabrica nao existirem.
   NAO usar banco de imagens no lugar. */
.lp-process-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 220px;
  padding: 1.5rem;
  border: 2px dashed #cbd5e1;
  border-radius: 1.25rem;
  background: #f8fafc;
  color: #64748b;
  font-size: .85rem;
  text-align: center;
  line-height: 1.5;
}

/* === FORMULARIO === */
.lp-form {
  background: rgba(255, 255, 255, .92);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(27, 38, 196, .1);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}

@media (max-width: 768px) {
  .lp-form { padding: 1.5rem; }
}

.lp-form .form-grid {
  display: grid;
  gap: 1.25rem;
}

/* A media query de viewport ligava 2 colunas mesmo quando o formulario esta
   na coluna estreita do layout lg:grid-cols-2, cortando as opcoes dos selects.
   Container query mede a largura real do formulario. */
body[data-page-type="lp"] .lp-form { container-type: inline-size; }

@container (min-width: 500px) {
  body[data-page-type="lp"] .lp-form .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.lp-form label {
  display: block;
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #374151;
}

.lp-form select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.lp-form textarea.input {
  min-height: 120px;
  resize: vertical;
}

.lp-form input[type="file"].input {
  padding: .65rem 1rem;
  font-size: .8rem;
}

.lp-optiongrid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.lp-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border: 1px solid #c9d2db;
  border-radius: .75rem;
  background: #fff;
  font-size: .85rem;
  color: #24313d;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.lp-option:hover { border-color: #1b26c4; }

.lp-option input {
  accent-color: #1b26c4;
  width: 16px;
  height: 16px;
  margin: 0;
}

.lp-option:has(input:checked) {
  border-color: #1b26c4;
  background: rgba(27, 38, 196, .05);
}

.lp-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.lp-fieldset legend {
  padding: 0;
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #374151;
}

/* Status do envio - unico feedback visual do formulario */
.lp-form-status {
  margin: 0;
  padding: .9rem 1.1rem;
  border-radius: .75rem;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
}

.lp-form-status[data-status="pending"] {
  background: rgba(27, 38, 196, .06);
  color: #1b26c4;
}

.lp-form-status[data-status="success"] {
  background: rgba(16, 185, 129, .1);
  color: #047857;
}

.lp-form-status[data-status="error"] {
  background: rgba(214, 69, 69, .1);
  color: #b91c1c;
}

/* === CROSS-SELL === */
.lp-crosssell {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
}

@media (min-width: 860px) {
  .lp-crosssell { grid-template-columns: 1fr auto; }
}

.lp-crosssell h3 {
  margin: 0 0 .6rem;
  font: 700 1.25rem/1.3 Ubuntu, system-ui;
  color: #142033;
}

.lp-crosssell p {
  margin: 0;
  font-size: .92rem;
  color: #64748b;
  line-height: 1.6;
}

/* === RESPEITO A PREFERENCIA DE MOVIMENTO REDUZIDO ===
   Aplicado apenas ao escopo das LPs (body[data-page-type="lp"]),
   para nao alterar o comportamento da home. */
@media (prefers-reduced-motion: reduce) {
  body[data-page-type="lp"] *,
  body[data-page-type="lp"] *::before,
  body[data-page-type="lp"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   AJUSTES DE QA — todos escopados a body[data-page-type="lp"],
   para nao alcancar a home em producao.
   ===================================================================== */

/* Largura da coluna de texto do hero (desktop).
   main.css:378 aplica ~226px de padding lateral dentro de um max-width de
   640px (box-sizing: border-box), sobrando 414px de texto. Isso quebrava o
   H1 em 4 e ate 6 linhas, ignorando os <br> escritos. A home nao mostra o
   sintoma porque seu H1 e curto ("Vista. Divulgue. Impressione."). */
@media (min-width: 769px) {
  body[data-page-type="lp"] .hero--left .hero__content {
    max-width: 1040px !important;
  }

  body[data-page-type="lp"] .hero p {
    max-width: 52ch !important;
  }
}

/* Contraste AA em texto de apoio sobre os gradientes claros das secoes.
   #475569 ja e token do design system (main.css). */
body[data-page-type="lp"] .lp-section-head p,
body[data-page-type="lp"] .lp-stat span {
  color: #475569;
}

/* Cabecalho de secao: 720px fazia titulos longos do briefing quebrarem em
   5 linhas. O titulo respira ate 900px; o paragrafo fica na medida
   confortavel de leitura (~68 caracteres). */
body[data-page-type="lp"] .lp-section-head {
  max-width: 900px;
}

body[data-page-type="lp"] .lp-section-head p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* Cards do catalogo: .line-card ja e flex-column, mas .card-content nao
   crescia, entao a divisoria e o CTA flutuavam em alturas diferentes
   dentro da mesma linha. */
body[data-page-type="lp"] .lp-catalog .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

body[data-page-type="lp"] .lp-catalog .card-stats {
  margin-top: auto;
}

/* O cross-sell vive na coluna estreita de #orcamento (~496px uteis), mas o
   @media de 860px e do viewport: as duas colunas ligavam e sobravam 194px
   para o texto. Aqui ele fica empilhado; na home segue em duas colunas. */
body[data-page-type="lp"] #orcamento .lp-crosssell {
  grid-template-columns: 1fr;
  justify-items: start;
}

/* Abas com imagem de produto: a foto ancora visualmente a lista e mantem os
   tres paineis com a mesma altura, entao trocar de aba nao desloca a pagina. */
.lp-tabpanel-img {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-tabpanel-img img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: contain;
}

@media (min-width: 900px) {
  body[data-page-type="lp"] .lp-tabpanel {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: center;
  }

  body[data-page-type="lp"] .lp-tabpanel ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* O display:grid acima vence o display:none que o navegador aplica a [hidden],
   entao os paineis inativos precisam ser escondidos explicitamente. */
body[data-page-type="lp"] .lp-tabpanel[hidden] {
  display: none;
}

/* === ULTIMA LINHA SEM BURACO ===
   Quando o numero de itens nao fecha a grade (11 dores, 7 dores, 10 cards),
   o grid alinha a ultima linha a esquerda e sobra um vazio que parece
   conteudo faltando. Com flex + justify-content:center a ultima linha fica
   centralizada e a sobra vira respiro simetrico.
   O flex-basis mantem a mesma contagem por linha da grade original. */
body[data-page-type="lp"] .lp-pain-grid,
body[data-page-type="lp"] .lp-catalog .produtos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body[data-page-type="lp"] .lp-pain {
  flex: 1 1 250px;
  max-width: 300px;
  /* dores sao frases curtas: card mais enxuto pesa menos na leitura */
  padding: .9rem 1rem;
  gap: .7rem;
}

body[data-page-type="lp"] .lp-pain p {
  font-size: .85rem;
  line-height: 1.45;
}

body[data-page-type="lp"] .lp-catalog .produtos-grid > * {
  flex: 1 1 260px;
  max-width: 320px;
}

/* Abaixo de 640px duas colunas de dor ficam apertadas: uma so. */
@media (max-width: 639px) {
  body[data-page-type="lp"] .lp-pain {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* === FAIXA DE MOCKUPS ===
   Alivio visual entre blocos longos de texto. Usa mockups ja existentes
   no acervo; sem foto nova e sem copy nova. */
.lp-mosaico {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
  .lp-mosaico { grid-template-columns: repeat(4, 1fr); }
}

.lp-mosaico figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}

.lp-mosaico figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .22);
}

.lp-mosaico img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  display: block;
}

.lp-mosaico figcaption {
  padding: .75rem 1rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #24313d;
  text-align: center;
}


/* === UNIFORMES | PROVA SOCIAL COMPACTA ===
   A seção original repetia benefícios em 9 cards e usava um vídeo de fundo
   comprimido. Esta versão reduz altura, melhora legibilidade e troca o vídeo
   por imagem estática nítida, sem afetar home ou demais LPs. */
body[data-page-type="lp"] .lp-proof-section {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  min-height: 0;
  box-shadow: none;
}

.lp-proof-media,
.lp-proof-overlay {
  position: absolute;
  inset: 0;
}

.lp-proof-media {
  z-index: 0;
  display: block;
}

.lp-proof-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.lp-proof-overlay {
  z-index: 1;
  background: linear-gradient(135deg, rgba(7, 12, 22, .84) 0%, rgba(15, 23, 42, .76) 55%, rgba(20, 32, 51, .72) 100%);
}

.lp-proof-content {
  position: relative;
  z-index: 2;
}

.lp-proof-head {
  text-align: center;
  margin-bottom: 2rem;
}

.lp-proof-tag {
  display: inline-flex;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  backdrop-filter: blur(10px);
}

body[data-page-type="lp"] .lp-proof-head .section-title {
  margin: 1rem auto 0;
  color: #fff;
  max-width: 24ch;
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.lp-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}

.lp-proof-grid .diff-card-premium {
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  min-height: 0;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.lp-proof-grid .diff-card-premium:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .18);
}

.lp-proof-grid .diff-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-width: 2px;
  background: linear-gradient(135deg, #1b26c4 0%, #2563eb 60%, #1b26c4 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.lp-proof-grid .diff-card-premium h3 {
  margin-bottom: .55rem;
  font-size: 1.03rem;
  line-height: 1.25;
}

.lp-proof-grid .diff-card-premium p {
  font-size: .84rem;
  line-height: 1.5;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .lp-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .lp-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  body[data-page-type="lp"] .lp-proof-section {
    padding: 3.25rem 0;
  }

  .lp-proof-grid .diff-card-premium {
    padding: 1.25rem 1rem;
  }
}