/* ============================================================
   LP /uniformes/  —  folha unica

   Substitui uniformes-cro.css + uniformes-refino.css +
   uniformes-essencial.css. As tres eram carregadas em sequencia e
   sobrescreviam umas as outras; como media query nao soma
   especificidade, as regras base da ultima folha anulavam os ajustes
   mobile das anteriores. Em arquivo unico as media queries voltam a
   valer porque vem depois das regras base.

   Tudo aqui esta escopado em body[data-lp="uniformes"].
   Esse atributo e contrato: assets/js/uniformes.js tambem o le.

   Ordem do arquivo:
     0. neutralizacao do main.css   (unico lugar com !important)
     1. tokens
     2. utilitarios de layout       (substituem o Tailwind nesta pagina)
     3. componentes
     4. responsivo
     5. movimento reduzido
   ============================================================ */

/* ============================================================
   0. NEUTRALIZACAO DO main.css

   main.css e a home em producao e nao pode ser alterado. Ele impoe
   regras globais com !important que atingem esta LP:

   - .container-max (main.css:68)  max-width/margin/padding/width !important
   - .hero (main.css:203)          min-height:90vh, display:flex !important
   - .hero::after (main.css:270)   faixa clara de 120px, z-index:3, por cima
                                   do conteudo de uma hero escura
   - main.css:1635-1695            a media query (max-width:768px) FECHA na
                                   linha 1651 e as regras seguintes
                                   (.hero__content, .hero h1, .hero p,
                                   .hero .btn, .hero-actions) vazam para
                                   TODAS as larguras, todas com !important
   - #segmentos / #orcamento / #contato (main.css:1458-1520)
                                   decoracoes por ID que a LP herda por
                                   colisao de id. pages.css ja apaga os
                                   ::before; o box model continua vazando:
                                   #segmentos aplica padding-top:100px num
                                   span vazio.

   A classe .hero fica no HTML porque pages.js:370 faz
   querySelector('.hero') para solidificar o header no scroll.
   Estes sao os unicos !important do arquivo, e existem so para
   desfazer os !important do main.css.
   ============================================================ */
body[data-lp="uniformes"] .hero.u-hero {
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}

body[data-lp="uniformes"] .u-hero::before,
body[data-lp="uniformes"] .u-hero::after {
  content: none !important;
}

/* o container da LP nao usa .container-max, mas o header herda */
/* padding so nas laterais: o atalho `padding` zeraria o padding-top
   que o .u-hero-grade define, porque os dois usam a mesma
   especificidade e o .u-shell reaparece nas media queries */
body[data-lp="uniformes"] .u-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Tipografia da hero: das sete regras vazadas em main.css:1653-1694, so
   duas atingem esta LP — `.hero h1` e `.hero p`. As demais miram
   .hero__content, .hero .btn e .hero-actions, classes que esta pagina
   nao usa. Como main.css usa !important, a unica forma de recuperar o
   controle e responder com !important.

   Com a hero clara a sombra vazada deixou de ser so ruido: `text-shadow`
   escuro sobre fundo de papel suja a letra. Continua sendo desfeita aqui.
   Em (max-width:480px) o main.css:1716 reaplica font-size e margin com
   !important; estes seletores tem especificidade (0,2,2) contra (0,1,1) e
   vencem em qualquer largura. */
body[data-lp="uniformes"] .u-hero h1 {
  font-size: clamp(2.35rem, 4.2vw, 3.55rem) !important;
  line-height: 1.07 !important;
  margin: 0 0 20px !important;
  text-shadow: none !important;
  text-align: left !important;
}

/* O espaco ate o proximo bloco e dado por quem vem depois (a figura no
   mobile, as acoes no desktop), e nao por esta margem: assim o respiro se
   ajusta por breakpoint sem precisar de outro !important aqui dentro. */
body[data-lp="uniformes"] .u-hero-sub {
  font-size: 1.04rem !important;
  line-height: 1.65 !important;
  max-width: 42ch !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  text-shadow: none !important;
  text-align: left !important;
}

/* As decoracoes por ID da home. Em vez de zerar tudo (o que apagava o
   fundo e o respiro DESTA pagina), a LP reafirma os proprios valores com
   especificidade de ID — assim vence main.css sem efeito colateral.
   #contato ainda precisa de !important porque main.css:1507 declara o
   background com !important. Os ::before ja sao neutralizados em
   pages.css:61-66 para todas as LPs. */
body[data-lp="uniformes"] #orcamento.u-orcamento {
  margin-top: 0;
  padding: 72px 0;
  background: var(--fundo-alt);
}

/* #segmentos e um contrato de navegacao que existe desde a versao
   anterior e foi mantido. Na home ele e uma secao; aqui e o <h3> dentro
   do bloco de detalhes. main.css:1458 impoe margin-top:-50px,
   padding-top:100px e overflow:hidden — num titulo isso vira 100px de
   vazio dentro do bloco. Especificidade (1,2,0) vence (1,0,0) sem
   !important; o ::before ja e apagado por pages.css:62. */
body[data-lp="uniformes"] #segmentos {
  margin-top: 0;
  padding-top: 0;
  overflow: visible;
}

body[data-lp="uniformes"] #contato.u-rodape {
  margin-top: 0;
  padding: 56px 0 0;
  background: #eef2f6 !important;
}

/* ============================================================
   1. TOKENS
   ============================================================ */
body[data-lp="uniformes"] {
  --azul: #1b26c4;
  --azul-escuro: #141c8f;
  --azul-claro: #4254ff;
  --tinta: #121a2b;
  --tinta-media: #46536a;
  /* #6b7890 reprovava AA em todos os fundos da pagina: 4,45:1 sobre branco,
     4,15:1 sobre --fundo-alt e 3,96:1 sobre o rodape, contra 4,5:1 exigidos
     para texto normal. #616f84 passa nos tres (5,10 / 4,76 / 4,54) e e o
     menor escurecimento que resolve. */
  --tinta-fraca: #616f84;
  --linha: #dde3ed;
  --fundo: #ffffff;
  --fundo-alt: #f5f7fb;
  /* --escuro / --escuro-2 sairam com a hero escura, a faixa deslizante e a
     prova em bloco grafite: nao restou nenhuma superficie escura na LP. */
  --raio: 10px;
  --raio-g: 14px;

  background: var(--fundo);
  color: var(--tinta);
  font-family: Poppins, system-ui, sans-serif;
}

/* ============================================================
   2. UTILITARIOS DE LAYOUT
   Substituem os 14 utilitarios do Tailwind que esta pagina usava.
   O CDN do Tailwind foi removido daqui: ele baixava um compilador
   de CSS em runtime para gerar 77 regras.
   Inclui o reset de imagem que vinha do preflight do Tailwind —
   sem ele os dois logos estouram.
   ============================================================ */
body[data-lp="uniformes"] img,
body[data-lp="uniformes"] svg {
  max-width: 100%;
  height: auto;
  display: block;
}

body[data-lp="uniformes"] .u-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-lp="uniformes"] .u-logo {
  height: 40px;
  width: auto;
}

/* area de toque minima de 44px tambem no logo */
body[data-lp="uniformes"] #siteHeader .u-row > a:first-child,
body[data-lp="uniformes"] .u-rodape-marca > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* A hero agora e clara, entao a troca de logo some: vale o logotipo
   oficial colorido em todos os estados. O main.css deixa #siteHeader
   transparente no topo e so pinta de branco com .nav-solid — sobre papel
   branco os dois estados sao claros, e nada aqui precisa de !important.
   Os dois <img> continuam no HTML porque sao contrato do header
   compartilhado; aqui so decidimos qual aparece. */
body[data-lp="uniformes"] .u-logo--claro { display: none; }
body[data-lp="uniformes"] .u-logo--escuro { display: block; }

/* mesma logica para os links do menu desktop */
body[data-lp="uniformes"] #siteHeader .nav-link { color: #243049; }
body[data-lp="uniformes"] #siteHeader .nav-link:hover { color: var(--azul); }

/* pages.css:89 pinta as barras do hamburguer de branco e so as escurece
   com .nav-solid. Sobre a hero clara elas sumiam ate o primeiro scroll. */
body[data-lp="uniformes"] .nav-toggle { color: var(--tinta); }
body[data-lp="uniformes"] .nav-toggle:hover { background: rgba(27, 38, 196, .07); }

body[data-lp="uniformes"] .u-secao {
  padding: 72px 0;
  position: relative;
}

/* o header e fixo (main.css); ancoras precisam de folga */
body[data-lp="uniformes"] [id] { scroll-margin-top: 96px; }

/* ============================================================
   3. COMPONENTES
   ============================================================ */

/* --- 3.1 header ------------------------------------------- */
body[data-lp="uniformes"] #siteHeader .u-nav {
  display: none;
  align-items: center;
  gap: 32px;
}

/* #siteHeader na frente para vencer .u-btn (mesma especificidade e
   declarado depois, senao o botao reaparece no mobile e cobre o h1) */
body[data-lp="uniformes"] #siteHeader .u-header-cta { display: none; }

body[data-lp="uniformes"] #siteHeader .u-row { height: 80px; }

/* --- 3.2 hero --------------------------------------------- */
/* Direcao editorial: fundo de papel, uma peca so, tipografia grande e
   azul da marca aplicado com parcimonia. */
body[data-lp="uniformes"] .u-hero {
  position: relative;
  background: var(--fundo);
  color: var(--tinta);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
  isolation: isolate;
}

/* Areas nomeadas: no desktop a coluna da esquerda empilha texto, acoes e
   ficha, e a figura ocupa a direita inteira. No mobile o mesmo markup vira
   uma coluna so, na ordem do DOM, com a peca logo depois do titulo. */
body[data-lp="uniformes"] .u-hero-grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
  grid-template-areas:
    "texto  figura"
    "acoes  figura"
    "ficha  figura";
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 56px;
  padding-top: 140px;
  padding-bottom: 76px;
  min-height: 540px;
}

body[data-lp="uniformes"] .u-hero-texto { grid-area: texto; }
body[data-lp="uniformes"] .u-hero-grade .u-hero-acoes { grid-area: acoes; margin-top: 8px; }
body[data-lp="uniformes"] .u-hero-grade .u-ficha { grid-area: ficha; }
body[data-lp="uniformes"] .u-hero-figura { grid-area: figura; align-self: center; }

body[data-lp="uniformes"] .u-hero h1 {
  font: 500 clamp(2.35rem, 4.2vw, 3.55rem)/1.07 Ubuntu, system-ui;
  letter-spacing: -.035em;
  margin: 0 0 20px;
  color: var(--tinta);
  max-width: 15ch;
  text-shadow: none;
  text-wrap: balance;
}

body[data-lp="uniformes"] .u-hero h1 em {
  font-style: normal;
  color: var(--azul);
}

/* margin, max-width, font-size e line-height ficam SO no bloco 0: la eles
   precisam de !important para desfazer o vazamento de `.hero p` do
   main.css, e repeti-los aqui criava um segundo valor — 32px contra os
   24px em vigor — que nunca entra em cena e contradiz o que vale. */
body[data-lp="uniformes"] .u-hero-sub {
  color: var(--tinta-media);
}

body[data-lp="uniformes"] .u-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 0;
}

/* Ficha de condicoes: o que a faixa deslizante dizia, agora parado,
   dentro da coluna de texto e separado por um fio. */
/* Grade 2x2, nao flex: em linha unica o item mais longo ("silk, DTF,
   bordado e sublimacao") empurrava o quarto para uma segunda linha
   sozinho, o que lia como quebra acidental em vez de decisao. */
body[data-lp="uniformes"] .u-ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  margin: 44px 0 0;
  padding: 26px 0 0;
  max-width: 560px;
  border-top: 1px solid var(--linha);
  list-style: none;
}

body[data-lp="uniformes"] .u-ficha li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body[data-lp="uniformes"] .u-ficha strong {
  font: 700 .97rem/1.2 Ubuntu, system-ui;
  letter-spacing: -.01em;
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-ficha span {
  color: var(--tinta-fraca);
  font-size: .79rem;
  line-height: 1.4;
}

/* A polo e um WebP com canal alfa: entra recortada, sem fundo e sem
   moldura. Sobre papel branco uma peca quase branca perde a silhueta,
   entao em vez da caixa cinza (que lia como placeholder) ha um campo
   radial sem borda — nao tem aresta para ser confundida com moldura —
   somado a sombra que apoia a peca. */
body[data-lp="uniformes"] .u-hero-figura {
  position: relative;
  margin: 0 0 0 auto;
  width: min(100%, 500px);
  aspect-ratio: 1122 / 1168;
  max-height: 500px;
  background: none;
  border-radius: 0;
  overflow: visible;
}

body[data-lp="uniformes"] .u-hero-figura::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  background: radial-gradient(closest-side ellipse at 50% 48%,
    #eef1f8 0%, rgba(238, 241, 248, .55) 58%, rgba(238, 241, 248, 0) 100%);
}

body[data-lp="uniformes"] .u-hero-figura img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(16, 26, 54, .18));
}

/* --- 3.3 botoes ------------------------------------------- */
body[data-lp="uniformes"] .u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: 600 .92rem/1 Poppins, system-ui;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body[data-lp="uniformes"] .u-btn--primario {
  background: var(--azul);
  color: #fff;
}

body[data-lp="uniformes"] .u-btn--primario:hover { background: var(--azul-escuro); }

/* Na direcao editorial a segunda acao nao e um botao concorrente: e um
   link sublinhado, de peso visual claramente menor que o CTA primario.
   Sem caixa, o par deixa de disputar a atencao. */
body[data-lp="uniformes"] .u-btn--fantasma {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tinta-media);
  font-weight: 500;
  /* sublinhado por text-decoration, nao por border-bottom: no mobile o
     botao recebe min-height de 44px e a borda desceria para a base da
     caixa, deixando o traco solto abaixo da palavra */
  text-decoration: underline;
  text-decoration-color: #c3cada;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

body[data-lp="uniformes"] .u-btn--fantasma:hover {
  background: transparent;
  color: var(--azul);
  text-decoration-color: currentColor;
}

/* O pages.js desabilita o submit depois de um envio valido (trava de
   reentrancia). Sem estado visual o botao continuava com cara de ativo
   e ainda reagia ao hover. */
body[data-lp="uniformes"] .u-btn:disabled,
body[data-lp="uniformes"] .u-btn[disabled] {
  background: #9aa3c8;
  border-color: #9aa3c8;
  color: #f2f4fb;
  cursor: not-allowed;
}

body[data-lp="uniformes"] .u-btn:disabled:hover,
body[data-lp="uniformes"] .u-btn[disabled]:hover {
  background: #9aa3c8;
  border-color: #9aa3c8;
}

body[data-lp="uniformes"] .u-btn:focus-visible,
body[data-lp="uniformes"] a:focus-visible,
body[data-lp="uniformes"] button:focus-visible,
body[data-lp="uniformes"] summary:focus-visible,
body[data-lp="uniformes"] input:focus-visible,
body[data-lp="uniformes"] select:focus-visible {
  outline: 3px solid #4254ff;
  outline-offset: 2px;
}

/* --- 3.4 cabecalho de secao ------------------------------- */
/* Editorial: titulo a esquerda, texto de apoio alinhado a direita na
   mesma base. O bloco .u-faixa (marquee escuro com os mesmos quatro
   fatos, em animacao infinita) saiu daqui: virou a ficha estatica do
   hero. */
body[data-lp="uniformes"] .u-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

body[data-lp="uniformes"] .u-olho {
  display: block;
  margin: 0 0 12px;
  color: #3144a8;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* 500, nao 700: o mesmo peso do h1. Em corpo grande o 700 do Ubuntu fecha
   as contraformas e o titulo perde o ar editorial. */
body[data-lp="uniformes"] .u-titulo {
  margin: 0;
  font: 500 clamp(1.75rem, 2.9vw, 2.45rem)/1.15 Ubuntu, system-ui;
  letter-spacing: -.028em;
  color: var(--tinta);
  max-width: 16ch;
  text-wrap: balance;
}


body[data-lp="uniformes"] .u-cabeca p {
  flex: 0 1 auto;
  margin: 0;
  max-width: 34ch;
  color: var(--tinta-fraca);
  font-size: .9rem;
  line-height: 1.6;
  text-align: right;
}

/* --- 3.5 catalogo ----------------------------------------- */
/* Quatro familias, quatro colunas, sem card: na direcao editorial o que
   separa um modelo do outro e o espaco, nao a borda. O fundo da pagina
   atravessa a secao inteira. */
body[data-lp="uniformes"] .u-catalogo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

body[data-lp="uniformes"] .u-produto {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* Fotos contextuais em 3:4: o uniforme aparece vestido, e todas entram
   com o mesmo enquadramento, sem fundo de cor por card.
   A foto e um <button>: abre a galeria daquele modelo. */
body[data-lp="uniformes"] .u-produto-foto {
  display: block;
  position: relative;
  margin: 0 0 20px;
  padding: 0;
  width: 100%;
  border: 0;
  border-radius: 4px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #e9edf3;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

body[data-lp="uniformes"] .u-produto-lupa {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(10, 16, 32, .82);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

body[data-lp="uniformes"] .u-produto-foto:hover .u-produto-lupa,
body[data-lp="uniformes"] .u-produto-foto:focus-visible .u-produto-lupa {
  opacity: 1;
  transform: none;
}

/* no toque nao ha hover: a dica fica sempre visivel */
@media (hover: none) {
  body[data-lp="uniformes"] .u-produto-lupa { opacity: 1; transform: none; }
}

body[data-lp="uniformes"] .u-produto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

body[data-lp="uniformes"] .u-produto-foto:hover img { transform: scale(1.03); }

body[data-lp="uniformes"] .u-produto h3 {
  margin: 0 0 7px;
  font: 500 1.08rem/1.25 Ubuntu, system-ui;
  letter-spacing: -.012em;
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-produto p {
  margin: 0 0 16px;
  color: var(--tinta-fraca);
  font-size: .84rem;
  line-height: 1.5;
}

/* Aviso de imagem sem lastro fotografico. Discreto, mas legivel: precisa
   ser lido por quem olha o card, nao escondido num title. Contraste
   conferido contra o branco e o --fundo-alt (5,38:1 e 5,02:1).

   Sem font-size proprio de proposito: herda o do .u-produto p, e portanto
   acompanha o aumento que o mobile aplica. Declarar .76rem aqui travava o
   aviso em 12,2px justamente em 375/390px, por especificidade maior que a
   regra de <=560px — o mesmo tamanho que o incremento anterior subiu por
   ser pequeno demais para ler no celular. */
body[data-lp="uniformes"] .u-produto p.u-ilustrativa {
  margin: -10px 0 16px;
  color: #8a6400;
  font-weight: 500;
  letter-spacing: .01em;
}

/* margin-top:auto encosta a acao no rodape do card: as quatro terminam
   na mesma linha mesmo com descricoes de alturas diferentes.
   min-height mantem o alvo de toque de 44px sem transformar o link em
   botao. O sublinhado vem de text-decoration, nao de border-bottom: a
   borda fica na base da caixa de 44px e o traco aparecia flutuando 14px
   abaixo da palavra (medido). */
body[data-lp="uniformes"] .u-produto-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  color: var(--azul);
  font-size: .83rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .18s ease;
}

body[data-lp="uniformes"] .u-produto-cta:hover,
body[data-lp="uniformes"] .u-produto-cta:focus-visible {
  color: var(--azul-escuro);
}

/* --- 3.6 aplicacoes profissionais -------------------------
   Faixa compacta: tres contextos em 4:3, rotulo abaixo da foto. O
   enquadramento paisagem e o peso tipografico menor que o do catalogo
   deixam claro que isto NAO e uma segunda prateleira de produtos.
   Sobre --fundo-alt para separar do catalogo sem precisar de fios. */
body[data-lp="uniformes"] .u-aplicacoes {
  padding: 68px 0;
  background: var(--fundo-alt);
}

body[data-lp="uniformes"] .u-aplicacoes-faixa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-lp="uniformes"] .u-aplicacoes-faixa figure {
  margin: 0 0 14px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #e9edf3;
}

body[data-lp="uniformes"] .u-aplicacoes-faixa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-lp="uniformes"] .u-aplicacoes-faixa h3 {
  margin: 0 0 4px;
  font: 500 1rem/1.3 Ubuntu, system-ui;
  letter-spacing: -.012em;
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-aplicacoes-faixa p {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: .84rem;
  line-height: 1.5;
}

/* --- 3.7 prova / acabamento ------------------------------- */
/* Era um bloco escuro em sangria, herdado do desenho anterior: entre uma
   hero clara e um catalogo claro ele cortava a pagina ao meio. Agora e
   uma secao de papel delimitada por fios, no mesmo registro editorial —
   texto a esquerda, foto em 4:5 a direita.
   A foto deixou de ser panoramica: o que esta pagina consegue provar com
   o acervo e o acabamento da aplicacao, nao o parque fabril. */
/* Sem fios: a secao fica entre duas faixas tingidas (--fundo-alt nas
   aplicacoes acima e no orcamento abaixo), e a troca de fundo ja separa. */
body[data-lp="uniformes"] .u-prova {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0;
  background: var(--fundo);
}

body[data-lp="uniformes"] .u-prova-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(36px, 5.5vw, 76px);
}

body[data-lp="uniformes"] .u-prova-texto p {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--tinta-media);
  font-size: .95rem;
  line-height: 1.7;
}

/* Video de expedicao: discreto, dentro da coluna de texto, com a mesma
   largura dela. aspect-ratio reserva a caixa antes de o poster chegar,
   entao nao ha salto de layout. */
body[data-lp="uniformes"] .u-video {
  margin: 30px 0 0;
  max-width: 460px;
}

body[data-lp="uniformes"] .u-video-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 4px;
  background: #0d1117;
  object-fit: cover;
}

body[data-lp="uniformes"] .u-video figcaption {
  margin-top: 9px;
  color: var(--tinta-fraca);
  font-size: .78rem;
  line-height: 1.45;
}

body[data-lp="uniformes"] .u-prova-foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--fundo-alt);
}

body[data-lp="uniformes"] .u-prova-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Compromissos no lugar das metricas: cada linha e verificavel no proprio
   fluxo da pagina. Os numeros de anos e de empresas atendidas voltam a
   esta area quando forem homologados. */
body[data-lp="uniformes"] .u-compromissos {
  display: grid;
  gap: 20px;
  margin: 34px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}

body[data-lp="uniformes"] .u-compromissos > div { padding-left: 22px; }

body[data-lp="uniformes"] .u-compromissos dt {
  position: relative;
  margin-bottom: 4px;
  font: 500 .97rem/1.35 Ubuntu, system-ui;
  letter-spacing: -.012em;
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-compromissos dt::before {
  content: "";
  position: absolute;
  left: -22px;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}

body[data-lp="uniformes"] .u-compromissos dd {
  margin: 0;
  max-width: 44ch;
  color: var(--tinta-fraca);
  font-size: .85rem;
  line-height: 1.55;
}

/* --- 3.7 orcamento ---------------------------------------- */
body[data-lp="uniformes"] .u-orcamento { background: var(--fundo-alt); }

/* Tres filhos, duas colunas: a intro e os detalhes empilham a esquerda
   e o formulario ocupa a coluna direita inteira. No DOM o formulario vem
   antes dos detalhes, entao no mobile (coluna unica) a ordem continua
   intro -> formulario -> detalhes: o pedido nunca fica atras do conteudo
   secundario. */
body[data-lp="uniformes"] .u-orcamento-grade {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

body[data-lp="uniformes"] .u-orcamento-intro { grid-column: 1; grid-row: 1; }
body[data-lp="uniformes"] .u-orcamento-grade .u-form { grid-column: 2; grid-row: 1 / span 2; }
body[data-lp="uniformes"] .u-orcamento-grade .u-detalhes { grid-column: 1; grid-row: 2; }

body[data-lp="uniformes"] .u-orcamento-lista {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

body[data-lp="uniformes"] .u-orcamento-lista li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  color: var(--tinta-media);
  font-size: .88rem;
  line-height: 1.5;
}

body[data-lp="uniformes"] .u-orcamento-lista svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--azul);
}

/* --- 3.8 formulario --------------------------------------- */
body[data-lp="uniformes"] .u-form {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 26px;
  box-shadow: 0 10px 30px rgba(18, 32, 70, .07);
}

body[data-lp="uniformes"] .u-form-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-lp="uniformes"] .u-form-campos > .u-largo { grid-column: 1 / -1; }

body[data-lp="uniformes"] .u-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--tinta);
  font-size: .82rem;
  font-weight: 600;
}

body[data-lp="uniformes"] .u-form input,
body[data-lp="uniformes"] .u-form select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #ccd5e4;
  border-radius: 9px;
  background: #fff;
  color: var(--tinta);
  font: 400 .92rem/1.4 Poppins, system-ui;
  box-sizing: border-box;
}

body[data-lp="uniformes"] .u-form input::placeholder { color: #9aa6ba; }

body[data-lp="uniformes"] .u-form input:focus,
body[data-lp="uniformes"] .u-form select:focus { border-color: var(--azul); }

body[data-lp="uniformes"] .u-form-escolhido {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #c3d2ff;
  border-radius: 9px;
  background: #eef3ff;
  color: #17277d;
  font-size: .83rem;
  font-weight: 600;
}

body[data-lp="uniformes"] .u-form-escolhido[hidden] { display: none; }

body[data-lp="uniformes"] .u-form-enviar {
  width: 100%;
  margin-top: 18px;
  min-height: 54px;
  font-size: .95rem;
}

body[data-lp="uniformes"] .u-form-nota {
  margin: 12px 0 0;
  color: var(--tinta-fraca);
  font-size: .76rem;
  text-align: center;
  line-height: 1.5;
}

body[data-lp="uniformes"] .u-form-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .83rem;
}

body[data-lp="uniformes"] .u-form-status[hidden] { display: none; }
body[data-lp="uniformes"] .u-form-status[data-status="error"] { background: #fdeaea; color: #9b1c1c; }
body[data-lp="uniformes"] .u-form-status[data-status="success"] { background: #e8f6ed; color: #14663a; }

/* --- 3.9 detalhes tecnicos -------------------------------- */
body[data-lp="uniformes"] .u-detalhes {
  margin: 20px 0 0;
  border-top: 1px solid #d3dae6;
  border-bottom: 1px solid #d3dae6;
}

body[data-lp="uniformes"] .u-detalhes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 16px 0;
  color: var(--tinta);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body[data-lp="uniformes"] .u-detalhes summary::-webkit-details-marker { display: none; }

body[data-lp="uniformes"] .u-detalhes-sinal {
  flex: 0 0 auto;
  color: var(--azul);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .18s ease;
}

body[data-lp="uniformes"] .u-detalhes[open] .u-detalhes-sinal { transform: rotate(45deg); }

/* coluna estreita: uma coluna so, senao as definicoes ficam espremidas */
body[data-lp="uniformes"] .u-detalhes-corpo {
  display: grid;
  gap: 22px;
  padding: 4px 0 24px;
}

body[data-lp="uniformes"] .u-detalhes-corpo h3 {
  margin: 0 0 8px;
  color: var(--tinta);
  font-size: .85rem;
  font-weight: 700;
}

body[data-lp="uniformes"] .u-detalhes-corpo dl {
  margin: 0;
  display: grid;
  gap: 9px;
}

body[data-lp="uniformes"] .u-detalhes-corpo dt {
  color: var(--tinta);
  font-size: .82rem;
  font-weight: 600;
}

body[data-lp="uniformes"] .u-detalhes-corpo dd {
  margin: 0 0 4px;
  color: var(--tinta-fraca);
  font-size: .8rem;
  line-height: 1.5;
}

body[data-lp="uniformes"] .u-lista-simples {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

body[data-lp="uniformes"] .u-lista-simples li {
  color: var(--tinta-media);
  font-size: .82rem;
}

body[data-lp="uniformes"] .u-lista-simples li + li::before {
  content: "/";
  margin: 0 10px;
  color: #a9b5c8;
}

/* --- 3.10 rodape ------------------------------------------ */
body[data-lp="uniformes"] .u-rodape {
  background: #eef2f6;
  padding: 56px 0 0;
}

body[data-lp="uniformes"] .u-rodape-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

body[data-lp="uniformes"] .u-rodape h3 {
  margin: 0 0 14px;
  color: var(--tinta);
  font-size: .82rem;
  font-weight: 700;
}

body[data-lp="uniformes"] .u-rodape p,
body[data-lp="uniformes"] .u-rodape li {
  margin: 0 0 7px;
  color: #495768;
  font-size: .82rem;
  line-height: 1.55;
}

body[data-lp="uniformes"] .u-rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-lp="uniformes"] .u-rodape a {
  display: inline-block;
  padding: 5px 0;
  color: #2f3a47;
  text-decoration: none;
}

body[data-lp="uniformes"] .u-rodape a:hover { color: var(--azul); text-decoration: underline; }
body[data-lp="uniformes"] .u-rodape-marca a { color: var(--azul); }

body[data-lp="uniformes"] .u-rodape-fim {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid #d5dbe3;
  text-align: center;
  color: #5a6778;
  font-size: .72rem;
}

/* --- 3.11 galeria de fotos do modelo ---------------------- */
body[data-lp="uniformes"] .u-galeria {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--raio-g);
  background: #fff;
  color: var(--tinta);
  overflow: hidden;
}

body[data-lp="uniformes"] .u-galeria::backdrop {
  background: rgba(7, 12, 26, .72);
}

body[data-lp="uniformes"] .u-galeria-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linha);
}

body[data-lp="uniformes"] .u-galeria-titulo {
  margin: 0;
  font: 700 1.05rem/1.2 Ubuntu, system-ui;
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-galeria-fechar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: #fff;
  color: var(--tinta-media);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

body[data-lp="uniformes"] .u-galeria-fechar:hover {
  background: var(--fundo-alt);
  color: var(--tinta);
}

body[data-lp="uniformes"] .u-galeria-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-lp="uniformes"] .u-galeria-item {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: #eef1f6;
  aspect-ratio: 4 / 5;
}

body[data-lp="uniformes"] .u-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-lp="uniformes"] .u-galeria-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--linha);
  background: var(--fundo-alt);
}

body[data-lp="uniformes"] .u-galeria-nota {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: .8rem;
  line-height: 1.5;
}

/* --- 3.12 botao flutuante do WhatsApp ---------------------
   main.css:1858 deixa o float com opacity:0 e uma animacao
   whatsappPulse infinita — a home o revela por estilo inline.
   Aqui ele e revelado por CSS e a pulsacao sai: animacao infinita
   custa frame a frame e nao acrescenta nada. */
body[data-lp="uniformes"] .whatsapp-float {
  opacity: 1;
  transform: none;
  animation: none;
}

/* --- 3.13 CTA fixo no mobile ------------------------------ */
body[data-lp="uniformes"] .u-barra-mobile { display: none; }

/* ============================================================
   4. RESPONSIVO
   ============================================================ */
@media (min-width: 769px) {
  body[data-lp="uniformes"] #siteHeader .u-nav { display: flex; }
  body[data-lp="uniformes"] #siteHeader .u-header-cta { display: inline-flex; }
  body[data-lp="uniformes"] .u-so-mobile { display: none; }
}

@media (max-width: 1100px) {
  /* quatro colunas continuam ate 900px: com so quatro familias, cair para
     tres deixaria um orfao na segunda linha */

  /* column-gap, nao o atalho gap: o hero deixou de ser "texto + figura" e
     passou a ser quatro irmaos em areas nomeadas. O atalho grava os dois
     eixos, e o row-gap sobrevivia ao bloco de 900px (que so redeclara o
     eixo horizontal), somando 36px a cada uma das tres emendas da pilha
     mobile — 108px de altura que empurravam a peca para baixo da dobra,
     o oposto do que a reorganizacao foi fazer. */
  body[data-lp="uniformes"] .u-hero-grade { column-gap: 36px; }
  body[data-lp="uniformes"] .u-catalogo { gap: 22px; }
}

@media (max-width: 900px) {
  /* Uma coluna, na ordem do DOM: titulo -> peca -> acoes -> ficha.
     O grid-template-areas do desktop precisa ser redeclarado, senao as
     areas nomeadas continuam valendo e a figura volta para a direita. */
  body[data-lp="uniformes"] .u-hero-grade {
    grid-template-columns: 1fr;
    grid-template-areas: "texto" "figura" "acoes" "ficha";
    grid-template-rows: auto auto auto auto;
    /* os dois eixos, explicitos: o respiro vertical da pilha vem das
       margens de figura/acoes/ficha abaixo, e nao do grid */
    column-gap: 0;
    row-gap: 0;
    /* 80px de header fixo + folga; sem isso o h1 fica atras do header */
    padding-top: 104px;
    padding-bottom: 40px;
    min-height: 0;
  }
  body[data-lp="uniformes"] .u-hero h1 { max-width: 14ch; }
  /* object-fit:contain, entao forcar 16/11 so encolheria a peca dentro de
     uma caixa larga. A figura mantem a propria proporcao e e centralizada. */
  body[data-lp="uniformes"] .u-hero-figura {
    width: min(100%, 300px);
    max-height: none;
    aspect-ratio: 1122 / 1168;
    margin: 4px auto 0;
  }
  body[data-lp="uniformes"] .u-hero-grade .u-hero-acoes { margin-top: 20px; }
  body[data-lp="uniformes"] .u-ficha { gap: 16px 30px; margin-top: 28px; padding-top: 22px; }
  body[data-lp="uniformes"] .u-cabeca {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 30px;
  }
  body[data-lp="uniformes"] .u-cabeca p { text-align: left; max-width: 46ch; }
  body[data-lp="uniformes"] .u-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-lp="uniformes"] .u-aplicacoes { padding: 52px 0; }
  body[data-lp="uniformes"] .u-aplicacoes-faixa { gap: 18px; }
  body[data-lp="uniformes"] .u-orcamento-grade { grid-template-columns: 1fr; gap: 26px; }
  /* a foto desce para baixo do texto e achata, para nao empurrar o
     formulario uma tela inteira para longe */
  body[data-lp="uniformes"] .u-prova-grade { grid-template-columns: 1fr; gap: 32px; }
  body[data-lp="uniformes"] .u-prova-foto { aspect-ratio: 16 / 10; }
  body[data-lp="uniformes"] .u-orcamento-intro,
  body[data-lp="uniformes"] .u-orcamento-grade .u-form,
  body[data-lp="uniformes"] .u-orcamento-grade .u-detalhes {
    grid-column: auto;
    grid-row: auto;
  }
  body[data-lp="uniformes"] .u-rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  /* O respiro de 76px no fim da pagina saiu junto com a barra sempre
     visivel. Existia para a barra fixa nao cobrir o fim do rodape; agora
     ela ja esta recolhida quando o visitante chega la, e os 76px viravam
     uma faixa branca abaixo do rodape cinza — visivel na captura de
     390px. Sem barra no caminho, nao ha o que reservar.
     Isso tambem dispensa o !important que era preciso para vencer o
     html,body { padding: 0 !important } do main.css. */

  /* A neutralizacao por ID de #orcamento (especificidade 1,2,1) vence
     .u-secao (0,2,1) tambem dentro desta media query — media query nao
     soma especificidade. Sem repetir o seletor aqui, a secao de
     conversao ficaria com 72px enquanto as vizinhas usam 48px. */
  body[data-lp="uniformes"] #orcamento.u-orcamento { padding: 48px 0; }
  body[data-lp="uniformes"] #contato.u-rodape { padding: 44px 0 0; }
  body[data-lp="uniformes"] .u-secao { padding: 48px 0; }
  body[data-lp="uniformes"] .u-shell { padding-left: 20px; padding-right: 20px; }

  /* No desktop a segunda acao do hero e um link sublinhado sem caixa; no
     toque ela volta a ter os 44px de alvo, sem virar botao. */
  body[data-lp="uniformes"] .u-btn--fantasma { min-height: 44px; }

  /* Em grade de tres colunas a foto cai para 231px em 768px e 175px em
     620px — pequena demais para o contexto se ler. Ate 768px a faixa vira
     trilho horizontal com encaixe, e o segundo item fica espiando na
     borda, sinalizando que ha mais. 768px e o mesmo limite onde a barra
     fixa entra, entao o padding lateral do .u-shell e 20px aqui e a
     margem negativa fecha exatamente com ele.
     O scroll e interno: a pagina continua sem rolagem horizontal. */
  body[data-lp="uniformes"] .u-aplicacoes-faixa {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 2px 20px 4px;
    /* sem isto o encaixe alinha o primeiro item com a borda do scrollport
       e come os 20px de padding: medido, o item nascia em x=0 enquanto o
       titulo da secao comeca em x=20 */
    scroll-padding-left: 20px;
  }

  body[data-lp="uniformes"] .u-aplicacoes-faixa::-webkit-scrollbar { display: none; }

  body[data-lp="uniformes"] .u-aplicacoes-faixa > li {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  body[data-lp="uniformes"] .u-aplicacoes-faixa:focus-visible {
    outline: 3px solid #4254ff;
    outline-offset: 2px;
  }
  body[data-lp="uniformes"] .u-prova { padding: 48px 0; }
  body[data-lp="uniformes"] .u-cabeca { margin-bottom: 26px; }
  body[data-lp="uniformes"] .u-form { padding: 20px; }
  body[data-lp="uniformes"] .u-detalhes-corpo { grid-template-columns: 1fr; gap: 20px; }
  body[data-lp="uniformes"] .u-galeria-fotos { grid-template-columns: 1fr; max-height: calc(100vh - 250px); }
  body[data-lp="uniformes"] .u-galeria-rodape { flex-direction: column; align-items: stretch; gap: 10px; }
  body[data-lp="uniformes"] .u-galeria-rodape .u-btn { width: 100%; }
  body[data-lp="uniformes"] .u-compromissos { gap: 16px; margin-top: 26px; padding-top: 22px; }

  /* area de toque: no celular os links do rodape precisam de alvo
     confortavel, sem engordar o rodape no desktop */
  body[data-lp="uniformes"] .u-rodape li a,
  body[data-lp="uniformes"] .u-rodape-marca a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
  body[data-lp="uniformes"] .u-rodape li { margin-bottom: 0; }

  /* uma unica acao fixa no mobile: a barra. O float do WhatsApp
     fica oculto nesta LP para nao concorrer com o formulario — ele
     levava para o WhatsApp sem nome, sem produto e, principalmente,
     sem o rodape de atribuicao (gclid/utm) que o pages.js monta. */
  body[data-lp="uniformes"] .whatsapp-float { display: none; }

  /* A barra existe para dar um caminho ate o orcamento QUANDO nao ha outro
     na tela. Fixa o tempo todo ela atrapalhava justamente onde havia:
     em 375x667 cobria 125px da peca do hero sem o visitante rolar nada, e
     em 390x844 parava a 5px do CTA do hero — dois botoes azuis encostados,
     competindo. Por isso ela entra e sai conforme o contexto; quem decide
     e o uniformes.js, por data-estado. */
  body[data-lp="uniformes"] .u-barra-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--linha);
    box-shadow: 0 -4px 18px rgba(20, 30, 58, .1);
    transition: transform .22s ease;
  }

  /* visibility: hidden, e nao so transform, para a barra sair da ordem de
     foco quando recolhida — senao o teclado ainda a alcanca.

     Nada aqui e animado alem do transform. A versao anterior desvanecia a
     opacidade e atrasava a visibility para o deslize terminar antes de
     sumir; as duas coisas criam um estado intermediario que depende de
     quadro pintado para concluir, e em contexto sem pintura a barra ficava
     presa no meio do caminho — invisivel mas ainda contada como visivel,
     ou o contrario. A entrada desliza; a saida e instantanea, que e o
     lado seguro: a barra some, nunca fica meio-presente por cima do
     formulario. */
  body[data-lp="uniformes"] .u-barra-mobile[data-estado="recolhida"] {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
  }

  body[data-lp="uniformes"] .u-barra-mobile span {
    color: var(--tinta-media);
    font-size: .74rem;
    line-height: 1.3;
  }

  body[data-lp="uniformes"] .u-barra-mobile .u-btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 12px 18px;
  }
}

@media (max-width: 560px) {
  /* duas colunas resistem em 390px: uma so alongaria o catalogo para
     quatro telas de rolagem antes do formulario.
     Os corpos de texto sobem em vez de encolher: .76rem (12,2px) e
     .78rem (12,5px) estavam abaixo do minimo confortavel de leitura no
     celular, e o link de acao desaparecia na massa de texto. A acao
     ganha peso e um traco mais grosso — continua sendo link, nao card. */
  body[data-lp="uniformes"] .u-catalogo { gap: 22px 16px; }
  body[data-lp="uniformes"] .u-produto-foto { margin-bottom: 14px; }
  body[data-lp="uniformes"] .u-produto h3 { font-size: 1.02rem; margin-bottom: 6px; }
  body[data-lp="uniformes"] .u-produto p { font-size: .86rem; line-height: 1.45; margin-bottom: 14px; }
  body[data-lp="uniformes"] .u-produto-cta {
    font-size: .9rem;
    font-weight: 700;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
  body[data-lp="uniformes"] .u-ficha { gap: 14px 20px; }
  body[data-lp="uniformes"] .u-form-campos { grid-template-columns: 1fr; }
  body[data-lp="uniformes"] .u-rodape-grade { grid-template-columns: 1fr; }
  /* so o CTA primario ocupa a linha inteira: o link secundario embaixo,
     alinhado a esquerda, sem competir */
  body[data-lp="uniformes"] .u-hero-acoes { flex-direction: column; align-items: flex-start; gap: 16px; }
  body[data-lp="uniformes"] .u-hero-acoes .u-btn--primario { width: 100%; }
}

/* ============================================================
   5. MOVIMENTO REDUZIDO
   A faixa deslizante saiu da pagina, entao nao ha mais animacao
   propria a desligar. Restam as transicoes e o zoom da foto do
   catalogo, que viram nada.

   `animation: none` tambem alcanca o fadeUp que main.css:402 aplica a
   `.hero p` sem !important — e herdado, nao e desta folha, e com
   movimento reduzido nao deve rodar.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body[data-lp="uniformes"] .u-produto-foto:hover img { transform: none; }
  body[data-lp="uniformes"] .u-hero-sub { animation: none; }
  body[data-lp="uniformes"] * { transition: none !important; }
}