/* ==========================================================================
   Fortunato Ferro & Aço — site.css
   One page. O Bootstrap entra como estrutura (grid, utilitárias, offcanvas);
   a aparência vem daqui.

   Índice
   1. Fonte
   2. Tokens
   3. Base
   4. Botões (variações do .btn do Bootstrap)
   5. Header
   6. Menu mobile
   7. Hero
   8. Seções (cabeçalho comum)
   9. Serviços
   10. Produtos
   11. Empresa
   12. Contato (canais, formulário, fachada)
   13. Rodapé, modal de aviso legal e voltar ao topo
   14. Barra de ação mobile
   15. Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   1. FONTE — Archivo variável, hospedada local
   Um arquivo só cobre peso 100–900 e largura 62%–125%: o título condensado
   e o texto corrido saem da mesma fonte (font-stretch controla a largura).
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. TOKENS
   Breakpoints são os do Bootstrap (576 / 768 / 992 / 1200 / 1400) — variável
   CSS não funciona dentro de @media, por isso eles não estão aqui.
   ========================================================================== */
:root {
  /* Cores da marca (extraídas do site antigo) */
  --ff-amarelo: #fdc300;
  --ff-amarelo-claro: #ffd43b;
  --ff-vermelho: #c22429;
  --ff-azul: #0a2c5e;
  --ff-azul-logo: #0a3d8f;
  --ff-azul-900: #12306a;
  --ff-azul-950: #0b2352;         /* fundo das seções escuras: azul-marinho, não preto */
  --ff-azul-950-rgb: 11, 35, 82;  /* o mesmo azul em RGB, para usar com transparência: rgba(var(--ff-azul-950-rgb), .5) */

  /* Neutros "aço": cinzas puxados para o azul */
  --ff-aco-50: #f3f5f8;
  --ff-aco-100: #e6eaf0;
  --ff-aco-300: #b9c1ce;
  --ff-aco-500: #6b7486;
  --ff-aco-700: #3c4557;
  --ff-tinta: #0b1526;
  --ff-branco: #fff;

  /* Texto sobre fundo escuro (contraste medido sobre --ff-azul-950) */
  --ff-claro-forte: rgba(255, 255, 255, .92);
  --ff-claro-suave: rgba(255, 255, 255, .72);   /* 9:1 — ok para texto pequeno */
  --ff-claro-linha: rgba(255, 255, 255, .14);

  /* Tipografia */
  --ff-fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-largura-display: 72%;   /* font-stretch dos títulos: condensado, cara de aço */
  --ff-fs-display: clamp(2.9rem, 1rem + 8.4vw, 7rem);
  --ff-fs-lead: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  --ff-fs-small: .875rem;

  /* Espaçamentos */
  --ff-altura-topo: 4.5rem;
  --ff-altura-barra: 4rem;
  --ff-secao: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Forma: cantos quase retos — aço cortado, não plástico */
  --ff-raio: 2px;

  /* Elevação: profundidade é sombra, não borda */
  --ff-sombra-1: 0 1px 2px rgba(var(--ff-azul-950-rgb), .08), 0 2px 8px rgba(var(--ff-azul-950-rgb), .06);
  --ff-sombra-2: 0 10px 30px -10px rgba(var(--ff-azul-950-rgb), .45);

  /* Interação */
  --ff-transicao: 200ms cubic-bezier(.2, .7, .2, 1);
  --ff-foco: 3px solid var(--ff-amarelo);

  /* Listra do logo, reaproveitada como fita de sinalização */
  --ff-listra: repeating-linear-gradient(-45deg,
    var(--ff-amarelo) 0 14px,
    var(--ff-azul-950) 14px 28px);

  /* Bootstrap: tematiza o que ele desenha */
  --bs-body-font-family: var(--ff-fonte);
  --bs-body-color: var(--ff-tinta);
  --bs-body-bg: var(--ff-branco);
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--ff-azul-logo);
  --bs-link-hover-color: var(--ff-azul);
  --bs-border-radius: var(--ff-raio);
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

/* scroll-padding: a âncora para abaixo do header fixo, e não atrás dele */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--ff-altura-topo);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Abaixo do lg existe a barra de ação fixa: o fim da página não pode ficar atrás dela */
@media (max-width: 991.98px) {
  body {
    padding-bottom: calc(var(--ff-altura-barra) + env(safe-area-inset-bottom));
  }
}

/* Foco visível e consistente em tudo que é clicável */
:focus-visible {
  outline: var(--ff-foco);
  outline-offset: 3px;
}

/* Ícone do sprite: herda cor e tamanho do texto */
.icone {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}

/* Link de acessibilidade: só aparece ao receber foco pelo teclado */
.pular-conteudo {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1100;
  padding: .75rem 1rem;
  background: var(--ff-amarelo);
  color: var(--ff-azul-950);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}

/* Sentinela do header: 1px invisível, um pouco abaixo do topo */
.topo-sentinela {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 1px;
  height: 1px;
}


/* ==========================================================================
   4. BOTÕES
   Continuam sendo .btn do Bootstrap: aqui só trocamos as variáveis dele.
   ========================================================================== */
.btn-ff {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--ff-raio);
  --bs-btn-line-height: 1.2;

  position: relative;
  isolation: isolate;               /* o ::before da listra fica atrás do texto */
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  overflow: hidden;
  font-stretch: 90%;
  letter-spacing: .01em;
  transition: color var(--ff-transicao), background-color var(--ff-transicao),
    border-color var(--ff-transicao), transform var(--ff-transicao);
}

.btn-ff:active {
  transform: translateY(1px);
}

.btn-ff-sm {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-font-size: .9375rem;
}

/* Amarelo: ação principal (WhatsApp) */
.btn-ff-amarelo {
  --bs-btn-color: var(--ff-azul-950);
  --bs-btn-bg: var(--ff-amarelo);
  --bs-btn-border-color: var(--ff-amarelo);
  --bs-btn-hover-color: var(--ff-azul-950);
  --bs-btn-hover-bg: var(--ff-amarelo-claro);
  --bs-btn-hover-border-color: var(--ff-amarelo-claro);
  --bs-btn-active-color: var(--ff-azul-950);
  --bs-btn-active-bg: var(--ff-amarelo);
  --bs-btn-active-border-color: var(--ff-amarelo);
}

/* Micro-interação: no hover, a listra do logo "passa" pelo botão.
   Só opacity e transform — o navegador anima sem recalcular layout. */
.btn-ff-amarelo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg,
    rgba(var(--ff-azul-950-rgb), .07) 0 10px,
    transparent 10px 20px);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--ff-transicao), transform 600ms linear;
}

.btn-ff-amarelo:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contorno claro: ação secundária sobre fundo escuro */
.btn-ff-contorno {
  --bs-btn-color: var(--ff-branco);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-color: var(--ff-azul-950);
  --bs-btn-hover-bg: var(--ff-branco);
  --bs-btn-hover-border-color: var(--ff-branco);
  --bs-btn-active-color: var(--ff-azul-950);
  --bs-btn-active-bg: var(--ff-aco-100);
  --bs-btn-active-border-color: var(--ff-aco-100);
}

.btn-ff__seta {
  transition: transform var(--ff-transicao);
}

.btn-ff:hover .btn-ff__seta {
  transform: translate(2px, 2px);
}


/* ==========================================================================
   5. HEADER
   Transparente sobre o hero; sólido depois que a página rola
   (classe .topo--solido, ligada pelo site.js).
   ========================================================================== */
.topo {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding-top: env(safe-area-inset-top);
  color: var(--ff-branco);
  transition: background-color var(--ff-transicao), box-shadow var(--ff-transicao);
}

.topo > nav {
  height: var(--ff-altura-topo);
}

.topo--solido {
  background-color: var(--ff-azul-950);
  box-shadow: 0 1px 0 var(--ff-claro-linha), var(--ff-sombra-2);
}

.topo__marca {
  display: block;
  flex-shrink: 0;
}

.topo__marca img {
  display: block;
  width: auto;
  height: 2.5rem;
}

/* Menu desktop: sublinhado amarelo que cresce da esquerda */
.topo__menu {
  gap: 2rem;
}

.topo__menu a {
  position: relative;
  display: block;
  padding-block: .5rem;
  color: var(--ff-claro-forte);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ff-transicao);
}

.topo__menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ff-amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ff-transicao);
}

.topo__menu a:hover {
  color: var(--ff-branco);
}

.topo__menu a:hover::after {
  transform: scaleX(1);
}

.topo__fone {
  color: var(--ff-claro-forte);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.topo__fone:hover {
  color: var(--ff-amarelo);
}

.topo__abrir {
  display: grid;
  place-items: center;
  width: 2.75rem;               /* 44px: alvo de toque mínimo */
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--ff-raio);
  background: rgba(255, 255, 255, .08);
  color: var(--ff-branco);
}

.topo__abrir .icone {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 992px) {
  .topo__marca img {
    height: 2.875rem;
  }
}


/* ==========================================================================
   6. MENU MOBILE (offcanvas do Bootstrap, retematizado)
   ========================================================================== */
.menu-movel {
  --bs-offcanvas-width: min(22rem, 88vw);
  --bs-offcanvas-bg: var(--ff-azul-950);
  --bs-offcanvas-color: var(--ff-branco);
  --bs-offcanvas-padding-x: 1.5rem;
  --bs-offcanvas-padding-y: 1.25rem;
}

/* Fita listrada na borda do menu: mesma linguagem do hero */
.menu-movel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--ff-listra);
}

.menu-movel__logo {
  width: auto;
  height: 2.375rem;
}

.menu-movel__fechar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ff-branco);
}

.menu-movel__fechar .icone {
  width: 1.5rem;
  height: 1.5rem;
}

.menu-movel__links a {
  display: block;
  padding-block: .5rem;
  color: var(--ff-branco);
  font-size: 2.25rem;
  font-stretch: var(--ff-largura-display);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-movel__links a:hover,
.menu-movel__links a:focus-visible {
  color: var(--ff-amarelo);
}

.menu-movel__contatos li + li {
  margin-top: .75rem;
}

.menu-movel__contatos a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--ff-claro-suave);
  text-decoration: none;
}

.menu-movel__contatos a:hover {
  color: var(--ff-branco);
}


/* ==========================================================================
   7. HERO
   O momento de ousadia da página: tipografia grande sobre a foto.
   O resto do site fica mais quieto de propósito.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--ff-altura-barra));
  overflow: hidden;
  background-color: var(--ff-azul-950);
  color: var(--ff-branco);
}

/* Foto ocupando o hero inteiro, atrás de tudo */
.hero__foto,
.hero__foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero__foto img {
  object-fit: cover;
  object-position: 70% center;
  /* Entrada: a foto "assenta" (só transform, não atrasa o LCP) */
  animation: hero-foto 1.8s cubic-bezier(.2, .7, .2, 1) both;
}

/* Véu azul: garante contraste do texto sobre a foto.
   Mobile: escurece de cima para baixo; desktop: da esquerda para a direita. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(var(--ff-azul-950-rgb), .78) 0%,
    rgba(var(--ff-azul-950-rgb), .88) 45%,
    rgba(var(--ff-azul-950-rgb), .97) 100%);
}

.hero__conteudo {
  padding-top: calc(var(--ff-altura-topo) + 2.5rem);
  padding-bottom: 3rem;
}

.hero__titulo {
  margin-bottom: 1.75rem;
}

/* Nome da empresa: dentro do h1 (SEO), mas visualmente discreto */
.hero__marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  color: var(--ff-claro-forte);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Pequeno trecho da listra antes do nome: assinatura da marca */
.hero__marca::before {
  content: "";
  flex-shrink: 0;
  width: 2.5rem;
  height: .5rem;
  background: repeating-linear-gradient(-45deg,
    var(--ff-amarelo) 0 5px,
    transparent 5px 10px);
}

.hero__slogan {
  display: block;               /* as quebras de linha são <br> no HTML: VENDEMOS AÇO, / ENTREGAMOS / QUALIDADE. */
  font-size: var(--ff-fs-display);
  font-stretch: var(--ff-largura-display);
  font-weight: 800;
  line-height: .92;             /* abaixo de .9 o cedilha de "AÇO" encosta na linha de baixo */
  letter-spacing: -.01em;
  word-spacing: .08em;          /* fonte condensada deixa o espaço entre palavras apertado */
  text-transform: uppercase;
}

.hero__slogan em {
  color: var(--ff-amarelo);
  font-style: normal;
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  color: var(--ff-claro-suave);
  font-size: var(--ff-fs-lead);
  line-height: 1.5;
}

/* Régua de fatos na base do hero */
.hero__regua {
  border-top: 1px solid var(--ff-claro-linha);
  background: rgba(var(--ff-azul-950-rgb), .6);
}

.hero__fato {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: 1.125rem 1rem 1.125rem 0;
  color: var(--ff-claro-suave);
  font-size: var(--ff-fs-small);
  line-height: 1.35;
}

.hero__fato strong {
  color: var(--ff-branco);
  font-size: 1rem;
  font-weight: 700;
}

/* Selo Gerdau: logo oficial sobre placa branca (a marca é azul e sumiria no fundo escuro) */
.hero__gerdau {
  display: inline-flex;
  align-self: flex-start;
  padding: .3rem .5rem;
  background: var(--ff-branco);
  border-radius: var(--ff-raio);
}

.hero__gerdau img {
  display: block;
  width: auto;
  height: 1.375rem;
}

.hero__fato--horario {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  border-top: 1px solid var(--ff-claro-linha);
}

.hero__fato--horario .icone {
  color: var(--ff-amarelo);
}

.hero__fato--horario > span {
  display: flex;
  flex-direction: column;
}

/* Fita listrada no pé do hero */
.faixa-sinal {
  height: .625rem;
  background: var(--ff-listra);
  transform-origin: left;
  animation: faixa-entra 1.1s cubic-bezier(.7, 0, .2, 1) .2s both;
}

@keyframes hero-foto {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes faixa-entra {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (min-width: 768px) {
  .hero__fato {
    padding: 1.5rem 1.5rem 1.5rem 0;
  }

  /* No md+ os três fatos ficam lado a lado, separados por fio vertical */
  .hero__fato + .hero__fato {
    padding-left: 1.5rem;
    border-left: 1px solid var(--ff-claro-linha);
  }

  .hero__fato--horario {
    border-top: 0;
  }
}

@media (min-width: 992px) {
  .hero {
    min-height: 100svh;
  }

  .hero::before {
    background: linear-gradient(90deg,
      rgba(var(--ff-azul-950-rgb), .97) 0%,
      rgba(var(--ff-azul-950-rgb), .9) 38%,
      rgba(var(--ff-azul-950-rgb), .45) 75%,
      rgba(var(--ff-azul-950-rgb), .3) 100%);
  }

  .hero__conteudo {
    padding-top: calc(var(--ff-altura-topo) + 3rem);
  }

  .hero__marca {
    font-size: 1.125rem;
  }
}


/* ==========================================================================
   8. SEÇÕES — cabeçalho comum (título grande + frase de apoio)
   ========================================================================== */
.secao {
  padding-block: var(--ff-secao);
}

.secao__titulo {
  margin: 0;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  font-stretch: var(--ff-largura-display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.secao__lead {
  max-width: 30rem;
  margin: 0;
  color: var(--ff-aco-700);
  font-size: var(--ff-fs-lead);
  line-height: 1.5;
}

/* Variação escura: mesmo azul do hero */
.secao--escura {
  background-color: var(--ff-azul-950);
  color: var(--ff-branco);
}

.secao--escura .secao__lead {
  color: var(--ff-claro-suave);
}


/* ==========================================================================
   9. SERVIÇOS
   O cartão inteiro é clicável: o link usa .stretched-link do Bootstrap,
   que estica a área de clique até o elemento posicionado mais próximo
   (.servico, com position: relative).
   ========================================================================== */
.servicos {
  background-color: var(--ff-aco-50);
}

.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ff-raio);
  background: var(--ff-branco);
  box-shadow: var(--ff-sombra-1);
  transition: box-shadow var(--ff-transicao), transform var(--ff-transicao);
}

.servico:hover {
  box-shadow: var(--ff-sombra-2);
  transform: translateY(-2px);
}

/* Foco do teclado no link = contorno no cartão inteiro */
.servico:has(.stretched-link:focus-visible) {
  outline: var(--ff-foco);
  outline-offset: 3px;
}

.servico .stretched-link:focus-visible {
  outline: 0;
}

.servico__foto {
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ff-aco-100);   /* cor de espera enquanto a foto (lazy) carrega */
}

.servico__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.servico:hover .servico__foto img {
  transform: scale(1.04);
}

.servico__corpo {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: .875rem;
  padding: 1.5rem;
}

.servico__corpo p {
  margin: 0;
  color: var(--ff-aco-700);
}

.servico__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-stretch: 80%;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.servico--destaque .servico__corpo {
  padding: 1.75rem;
}

.servico--destaque .servico__titulo {
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);
}

/* Etapas do processo, ligadas por um traço amarelo */
.servico__etapas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin: 0;
  color: var(--ff-azul-950);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.servico__etapas li {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.servico__etapas li + li::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--ff-amarelo);
}

.servico__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  color: var(--ff-azul-logo);
  font-weight: 700;
  text-decoration: none;
}

.servico__link .icone {
  transition: transform var(--ff-transicao);
}

.servico:hover .servico__link .icone {
  transform: translate(2px, 2px);
}

/* md+: cartões laterais viram horizontais (foto à esquerda) */
@media (min-width: 768px) {
  .servico--lateral {
    flex-direction: row;
  }

  .servico--lateral .servico__foto {
    width: 40%;
    aspect-ratio: auto;          /* a altura passa a ser a do texto ao lado */
  }

  .servico--destaque .servico__corpo {
    padding: 2.25rem;
  }
}


/* ==========================================================================
   10. PRODUTOS
   Grade de "prancha técnica": o fio entre as células é o fundo da grade
   aparecendo pelo gap de 1px. Sem descrição — só nome e desenho.
   ========================================================================== */
.produtos__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--ff-claro-linha);
}

.produtos__grade > li {
  /* Pontilhado de papel milimetrado, bem discreto */
  background-color: var(--ff-azul-950);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 16px 16px;
}

.produto {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 12.5rem;
  padding: 1.25rem;
  color: var(--ff-branco);
  text-decoration: none;
  transition: background-color var(--ff-transicao);
}

.produto:hover {
  background-color: rgba(253, 195, 0, .06);
  color: var(--ff-branco);
}

.produto:focus-visible {
  outline-offset: -3px;          /* dentro da célula, senão a grade corta o contorno */
}

.produto__desenho {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: auto;
  color: var(--ff-amarelo);
  /* Com pathLength="1" nos traços, dasharray 1 = o traço inteiro visível */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Micro-interação: o desenho se refaz, como se fosse traçado na hora */
.produto:hover .produto__desenho,
.produto:focus-visible .produto__desenho {
  animation: desenha 900ms cubic-bezier(.6, 0, .2, 1) both;
}

@keyframes desenha {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.produto__nome {
  margin: 1.5rem 0 .375rem;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  font-stretch: var(--ff-largura-display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.produto__acao {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--ff-claro-suave);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--ff-transicao);
}

.produto:hover .produto__acao {
  color: var(--ff-amarelo);
}

/* Última célula: convite para o que não está na lista */
.produtos__grade > .produtos__cta {
  background: var(--ff-amarelo);
}

.produtos__cta .produto,
.produtos__cta .produto:hover,
.produtos__cta .produto__acao,
.produtos__cta .produto:hover .produto__acao {
  color: var(--ff-azul-950);
}

.produtos__cta .produto:hover {
  background-color: var(--ff-amarelo-claro);
}

.produtos__cta .produto__acao {
  white-space: normal;           /* frase mais longa: pode quebrar na célula estreita */
}

.produtos__cta .produto__nome {
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  line-height: 1.05;
}

/* .produtos__cta na frente: vence o tamanho do desenho definido no @media md */
.produtos__cta .produto__desenho--whats {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ff-azul-950);
}

/* Ícone cheio: não tem traço para "desenhar" (seletor mais específico que o do hover) */
.produtos__cta .produto:hover .produto__desenho,
.produtos__cta .produto:focus-visible .produto__desenho {
  animation: none;
}

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

  .produto {
    min-height: 15rem;
    padding: 1.75rem;
  }

  .produto__desenho {
    width: 6rem;
    height: 6rem;
  }
}


/* ==========================================================================
   11. EMPRESA
   ========================================================================== */
.empresa__lead {
  max-width: 26rem;
  margin: 1.5rem 0 0;
  color: var(--ff-tinta);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 500;
  line-height: 1.4;
}

.empresa__foto {
  margin: 2.5rem 0 0;
  overflow: hidden;
  border-radius: var(--ff-raio);
  background: var(--ff-aco-100);
  box-shadow: var(--ff-sombra-1);
}

.empresa__foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* lg+: a foto 4:5 inteira ficava bem mais alta que o texto da coluna ao lado.
   Aqui ela vira 4:3, recortada a partir do topo (onde está o letreiro).
   No mobile continua inteira: lá ela fica sozinha na largura e não sobra vazio. */
@media (min-width: 992px) {
  .empresa__foto img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
  }
}

.empresa__texto {
  margin-bottom: 2rem;
  color: var(--ff-aco-700);
  font-size: 1.0625rem;
}

/* Frase de destaque com a listra da marca na vertical */
.empresa__destaque {
  position: relative;
  margin: 0 0 2.5rem;
  padding-left: 1.75rem;
  color: var(--ff-azul-950);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-stretch: 80%;
  font-weight: 800;
  line-height: 1.1;
}

.empresa__destaque::before {
  content: "";
  position: absolute;
  top: .1em;
  bottom: .1em;
  left: 0;
  width: 6px;
  background: var(--ff-listra);
}

.gerdau-parceria {
  padding: 1.75rem;
  border-radius: var(--ff-raio);
  background: var(--ff-aco-50);
}

.gerdau-parceria__logo {
  display: block;
  width: auto;
  height: 1.75rem;
}

.gerdau-parceria__texto {
  margin: 1rem 0 .75rem;
  color: var(--ff-aco-700);
}

.gerdau-parceria__lista li {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-block: .625rem;
  color: var(--ff-azul-950);
  font-weight: 700;
}

.gerdau-parceria__lista li + li {
  border-top: 1px solid var(--ff-aco-100);
}

/* Check desenhado com duas bordas giradas: dispensa ícone */
.gerdau-parceria__lista li::before {
  content: "";
  flex-shrink: 0;
  width: .75rem;
  height: .4rem;
  margin-top: -.25rem;
  border-bottom: 2.5px solid var(--ff-azul-logo);
  border-left: 2.5px solid var(--ff-azul-logo);
  transform: rotate(-45deg);
}


/* ==========================================================================
   12. CONTATO
   ========================================================================== */

/* --- Canais diretos --- */
.canais {
  font-style: normal;            /* <address> vem em itálico por padrão */
}

.canais li + li {
  border-top: 1px solid var(--ff-claro-linha);
}

.canal {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: .125rem;
  padding-block: 1.25rem;
  color: var(--ff-branco);
  text-decoration: none;
}

.canais li:first-child .canal {
  padding-top: 0;
}

.canal > .icone {
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .125rem;
  color: var(--ff-amarelo);
}

.canal__rotulo {
  color: var(--ff-claro-suave);
  font-size: var(--ff-fs-small);
  font-weight: 600;
}

.canal__valor {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-stretch: 80%;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}

.canal__valor a {
  color: var(--ff-branco);
  text-decoration: none;
  transition: color var(--ff-transicao);
}

.canal__valor a:hover {
  color: var(--ff-amarelo);
}

.canal__valor--email {
  font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem);
  overflow-wrap: anywhere;       /* e-mail longo quebra em vez de vazar no celular */
}

.canal__valor--texto {
  flex-direction: column;
  font-size: 1.125rem;
  font-stretch: 100%;
  font-weight: 600;
}

/* WhatsApp: o canal principal ganha o número em amarelo */
.canal--whats .canal__valor {
  color: var(--ff-amarelo);
}

.canal--whats > .icone {
  transition: transform var(--ff-transicao);
}

.canal--whats:hover > .icone {
  transform: scale(1.12) rotate(-6deg);
}

/* --- Formulário de orçamento (cartão claro sobre o fundo escuro) --- */
.orcamento {
  /* Variáveis do Bootstrap que os campos usam, trocadas só aqui dentro */
  --bs-body-bg: var(--ff-branco);
  --bs-body-color: var(--ff-tinta);
  --bs-border-color: var(--ff-aco-300);
  --bs-border-width: 1.5px;

  position: relative;
  padding: 2rem 1.25rem 1.5rem;
  overflow: hidden;
  border-radius: var(--ff-raio);
  background: var(--ff-branco);
  color: var(--ff-tinta);
  box-shadow: var(--ff-sombra-2);
}

/* Fita listrada no topo do cartão */
.orcamento::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--ff-listra);
}

.orcamento__titulo {
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-stretch: 80%;
  font-weight: 800;
  text-transform: uppercase;
}

.orcamento .form-label {
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 700;
}

/* legend do Bootstrap vem com float e fonte grande */
.orcamento legend.form-label {
  float: none;
}

.orcamento__opcional {
  color: var(--ff-aco-500);
  font-weight: 400;
}

.orcamento .form-control {
  padding: .875rem 1rem;
  font-size: 1rem;               /* 16px: abaixo disso o iPhone dá zoom no campo */
}

.orcamento .form-control:focus {
  border-color: var(--ff-azul-logo);
  box-shadow: 0 0 0 3px rgba(253, 195, 0, .55);
}

/* :user-invalid só marca o erro depois que a pessoa interagiu com o campo */
.orcamento .form-control:user-invalid {
  border-color: var(--ff-vermelho);
}

.orcamento__erro {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border-left: 4px solid var(--ff-vermelho);
  background: #fdecec;
  color: #8f1a1e;                /* vermelho escurecido: 7:1 sobre o fundo rosado */
  font-size: .9375rem;
  font-weight: 600;
}

.orcamento__nota {
  margin: 1rem 0 0;
  color: var(--ff-aco-500);
  font-size: .8125rem;
  line-height: 1.5;
}

/* Chips de seleção: .btn-check do Bootstrap, com as variáveis do .btn trocadas */
.btn-ff-chip {
  --bs-btn-padding-x: .875rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-radius: var(--ff-raio);
  --bs-btn-color: var(--ff-tinta);
  --bs-btn-bg: var(--ff-branco);
  --bs-btn-border-color: var(--ff-aco-300);
  --bs-btn-hover-color: var(--ff-tinta);
  --bs-btn-hover-bg: var(--ff-aco-50);
  --bs-btn-hover-border-color: var(--ff-aco-500);
  --bs-btn-active-color: var(--ff-branco);
  --bs-btn-active-bg: var(--ff-azul-950);
  --bs-btn-active-border-color: var(--ff-azul-950);

  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Marcado: aparece um quadradinho amarelo antes do texto */
.btn-check:checked + .btn-ff-chip::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: var(--ff-amarelo);
}

/* O foco fica no checkbox escondido; o contorno vai no label ao lado dele */
.btn-check:focus-visible + .btn-ff-chip {
  outline: var(--ff-foco);
  outline-offset: 2px;
  box-shadow: none;
}

@media (min-width: 768px) {
  .orcamento {
    padding: 2.75rem 2.5rem 2.25rem;
  }
}

/* --- Fachada da loja --- */
.loja {
  position: relative;
  margin: 3rem 0 0;
  overflow: hidden;
  border-radius: var(--ff-raio);
  background: var(--ff-azul-900);
}

.loja__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% center;   /* no recorte estreito, mantém o letreiro da esquerda */
}

.loja__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem;
}

.loja__pino {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ff-amarelo);
}

.loja__endereco {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  color: var(--ff-claro-suave);
  line-height: 1.45;
}

.loja__endereco strong {
  color: var(--ff-branco);
  font-size: 1.125rem;
}

.loja__referencia {
  font-size: var(--ff-fs-small);
}

/* lg+: foto em faixa larga e endereço sobreposto no canto */
@media (min-width: 992px) {
  .loja {
    margin-top: 4.5rem;
  }

  .loja__foto {
    aspect-ratio: 21 / 8;
    object-position: center 38%;   /* faixa larga: corta o céu e a maior parte dos carros */
  }

  .loja__legenda {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 46rem;
    padding: 1.75rem 2rem;
    background: rgba(var(--ff-azul-950-rgb), .92);
  }
}


/* ==========================================================================
   13. RODAPÉ E MODAL DE AVISO LEGAL
   ========================================================================== */
.rodape {
  background: var(--ff-azul-950);
  color: var(--ff-claro-suave);
  font-size: .9375rem;
}

/* No rodapé a fita já está no lugar: sem a animação de entrada do hero */
.faixa-sinal--estatica {
  animation: none;
}

.rodape__principal {
  padding-block: 3.5rem 2.5rem;
}

.rodape__logo {
  display: block;
  width: auto;
  height: 3rem;
}

.rodape__slogan {
  margin: 1rem 0 0;
  color: var(--ff-branco);
  font-stretch: 80%;
  font-weight: 700;
  text-transform: uppercase;
}

.rodape__titulo {
  margin-bottom: .875rem;
  color: var(--ff-branco);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rodape__lista li + li {
  margin-top: .375rem;
}

.rodape a {
  color: var(--ff-claro-suave);
  text-decoration: none;
  transition: color var(--ff-transicao);
}

.rodape a:hover {
  color: var(--ff-amarelo);
}

.rodape__endereco {
  font-style: normal;
  line-height: 1.6;
}

.rodape__horario {
  margin-top: .875rem;
  line-height: 1.6;
}

.rodape__base {
  padding-block: 1.5rem;
  border-top: 1px solid var(--ff-claro-linha);
  font-size: .8125rem;
}

/* Botão com cara de link: abre o modal */
.rodape__aviso {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ff-claro-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape__aviso:hover {
  color: var(--ff-amarelo);
}

/* Modal do Bootstrap, retematizado pelas variáveis dele */
.aviso {
  --bs-modal-border-radius: var(--ff-raio);
  --bs-modal-inner-border-radius: var(--ff-raio);
  --bs-modal-border-width: 0;
  --bs-modal-header-border-width: 0;
  --bs-modal-padding: 1.75rem;
  --bs-modal-header-padding: 1.75rem 1.75rem 0;
}

.aviso .modal-title {
  font-size: 1.5rem;
  font-stretch: 80%;
  font-weight: 800;
  text-transform: uppercase;
}

.aviso .modal-body h3 {
  margin: 1.25rem 0 .375rem;
  color: var(--ff-azul-950);
  font-size: 1rem;
  font-weight: 700;
}

.aviso .modal-body h3:first-child {
  margin-top: 0;
}

.aviso .modal-body p {
  color: var(--ff-aco-700);
  font-size: .9375rem;
}


/* --- Voltar ao topo ---
   Escondido com visibility (e não só opacity) para sair da ordem do Tab.
   O atraso no visibility deixa o fade de saída terminar antes de sumir. */
.voltar-topo {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--ff-altura-barra) + env(safe-area-inset-bottom) + 1rem);
  z-index: 1025;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ff-raio);
  background: var(--ff-branco);
  color: var(--ff-azul-950);
  box-shadow: var(--ff-sombra-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity var(--ff-transicao), transform var(--ff-transicao),
    background-color var(--ff-transicao), visibility 0s linear 200ms;
}

.voltar-topo--visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.voltar-topo:hover {
  background: var(--ff-amarelo);
  color: var(--ff-azul-950);
}

.voltar-topo .icone {
  width: 1.375rem;
  height: 1.375rem;
  transition: transform var(--ff-transicao);
}

.voltar-topo:hover .icone {
  transform: translateY(-2px);
}

/* lg+: não existe a barra de ação embaixo */
@media (min-width: 992px) {
  .voltar-topo {
    right: 2rem;
    bottom: 2rem;
  }
}


/* ==========================================================================
   14. BARRA DE AÇÃO MOBILE
   ========================================================================== */
.barra-acao {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;   /* WhatsApp um pouco maior: é a ação principal */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ff-azul-950);
  box-shadow: 0 -1px 0 var(--ff-claro-linha);
}

.barra-acao__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  height: var(--ff-altura-barra);
  color: var(--ff-branco);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ff-transicao);
}

.barra-acao__item + .barra-acao__item {
  box-shadow: inset 1px 0 0 var(--ff-claro-linha);
}

.barra-acao__item:active {
  background: rgba(255, 255, 255, .08);
}

.barra-acao__item--whats {
  background: var(--ff-amarelo);
  color: var(--ff-azul-950);
  font-weight: 700;
}

.barra-acao__item--whats:active {
  background: var(--ff-amarelo-claro);
}


/* ==========================================================================
   15. MOVIMENTO REDUZIDO
   Quem pediu menos movimento no sistema tem motivo — muitas vezes médico.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}