/* GV Máquinas — home (seções abaixo do hero)
   Conceito: catálogo técnico de fábrica. Grade de projeto, blocos de cor da marca,
   máquinas em fotos grandes e um fluxo de ensaio em linha.
   Marca: #292E35 · #417EA9 · #282A5B  |  Roboto Bold títulos · PT Sans texto */

:root {
  --paper: #E8ECF0;                 /* cinza frio da grade de projeto */
  --rule: #C5CCD4;
  --night: #21252C;
  --navy-d: #1E2048;
}

/* título de seção + linha de cota (régua de engenharia) */
.h2x { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; margin: 0; }
.dim { position: relative; display: block; height: 14px; margin: 1.1rem 0 0; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; opacity: .85; }
.dim::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 14px; background: currentColor; box-shadow: 0 0 0 0; }
.dim i { position: absolute; right: 0; top: 0; width: 2px; height: 14px; background: currentColor; }
.dim.short { width: 120px; }

/* ===== Catálogo: linha de máquinas ===== */
.s-cat { background-color: var(--paper); color: var(--ink);
  background-image: linear-gradient(rgba(41,46,53,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(41,46,53,.07) 1px, transparent 1px);
  background-size: 44px 44px; padding-block: clamp(64px, 9vw, 120px); }
.cat-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.cat-head h2 { color: var(--ink); }
.cat-head p { color: #3E4650; margin: 0; max-width: 54ch; font-size: 1.1rem; }
.cat-rule { color: var(--ink); margin-block: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 48px); }

.cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile { position: relative; display: flex; background: #fff; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.tile:hover { border-color: var(--steel); transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(40,42,91,.55); }
.t-photo { position: relative; background: radial-gradient(110% 90% at 50% 40%, #fff 0 60%, #EEF1F4 100%); display: grid; place-items: center; overflow: hidden; }
.t-photo img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .6s var(--ease); mix-blend-mode: multiply; }
.tile:hover .t-photo img { transform: scale(1.06); }
.t-body { padding: 1.3rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.t-tag { align-self: flex-start; background: var(--navy); color: #fff; font: 500 .64rem/1 var(--font-title); letter-spacing: .15em; text-transform: uppercase; padding: .38rem .6rem; border-radius: 3px; }
.tile h3 { margin: .25rem 0 0; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.05; }
.tile p { margin: 0; color: #3E4650; font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.t-go { margin-top: auto; padding-top: .7rem; display: inline-flex; align-items: center; gap: .55rem; font: 700 .82rem/1 var(--font-title); letter-spacing: .09em; text-transform: uppercase; color: var(--navy); }
.t-go svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--steel); color: #fff; transition: transform .3s var(--ease); }
.tile:hover .t-go svg { transform: translateX(5px); }

/* posições do mosaico */
.tile-tall { flex-direction: column; }
.tile-tall .t-photo { flex: 1; min-height: 320px; }
.t-cent { grid-column: 1 / 5; grid-row: 1 / 3; }
.t-tamb { grid-column: 5 / 9; grid-row: 1 / 3; }
.tile-wide { grid-column: 9 / 13; }
.tile-wide .t-photo { flex: 0 0 42%; }
.tile-sq { grid-column: span 3; flex-direction: column; }
.tile-sq .t-photo { aspect-ratio: 5 / 4; }
.tile-sq .t-body { padding-top: 1rem; }
.tile-sq h3 { font-size: 1.3rem; }
.tile-row { grid-column: span 6; }
.tile-row .t-photo { flex: 0 0 34%; aspect-ratio: 1 / 1; }
.tile-row .t-body { justify-content: center; }
.tile-row .t-go { margin-top: .6rem; }

/* ===== Sobre ===== */
.s-about { background: var(--navy); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; }
.about-photo { position: relative; overflow: hidden; min-height: 360px; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,42,91,0) 60%, rgba(40,42,91,.9) 100%); }
.about-copy { padding: clamp(48px, 7vw, 110px) var(--gutter) clamp(48px, 7vw, 110px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.about-copy h2 { color: #fff; }
.about-copy .dim { color: var(--steel-300); margin-bottom: 1.6rem; }
.about-copy p { color: #E3E7F5; font-size: 1.12rem; max-width: 50ch; }
.about-copy .btn { align-self: flex-start; margin-top: .6rem; background: #fff; color: var(--navy); }

/* ===== Ensaio no showroom ===== */
.s-test { background: var(--night); color: #fff; padding-block: clamp(64px, 9vw, 120px); }
.test-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(36px, 5vw, 64px); }
.test-head h2 { color: #fff; max-width: 16ch; }
.test-head .tag { color: var(--engrave); }
.steps { list-style: none; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); position: relative; }
.steps::before { content: ""; position: absolute; left: 8px; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--steel) 0%, rgba(255,255,255,.18) 100%); }
.steps li { position: relative; padding-top: 44px; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 3px solid var(--steel); }
.steps li:first-child::before { background: var(--steel); }
.steps small { display: block; font: 500 .68rem/1.2 var(--font-title); letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); margin-bottom: .7rem; }
.steps h3 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: .5rem; }
.steps p { color: #C9D0D6; max-width: 32ch; margin: 0; }

/* ===== Insumos ===== */
.s-supply { background: var(--steel-700); color: #fff; padding-block: clamp(64px, 9vw, 120px); overflow: hidden; }
.supply-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.supply-copy h2 { color: #fff; max-width: 14ch; }
.supply-copy p { color: #fff; font-size: 1.12rem; max-width: 50ch; margin-top: 1.4rem; }
.supply-copy ul { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.35); }
.supply-copy li { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.35); font: 700 1rem/1.25 var(--font-title); letter-spacing: .05em; text-transform: uppercase; }
.supply-copy .btn { background: #fff; color: var(--navy); }
.supply-photo { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 40px 60px -30px rgba(10,20,40,.6); }
.supply-photo::before { content: ""; position: absolute; inset: -18px; border: 2px dashed rgba(255,255,255,.45); border-radius: 50%; }
.supply-photo img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }

/* ===== Contato ===== */
.s-contact { background-color: var(--paper); color: var(--ink);
  background-image: linear-gradient(rgba(41,46,53,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(41,46,53,.07) 1px, transparent 1px); background-size: 44px 44px;
  padding-block: clamp(64px, 9vw, 120px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-copy h2 { color: var(--ink); }
.contact-copy .dim { color: var(--ink); margin-bottom: 1.4rem; }
.contact-copy .lead { font-size: 1.2rem; color: #3E4650; max-width: 32ch; }
.contact-list { margin: 2rem 0 2rem; display: grid; gap: 1.2rem; }
.contact-list dt { font: 500 .66rem/1.2 var(--font-title); letter-spacing: .16em; text-transform: uppercase; color: var(--steel-700); margin-bottom: 3px; }
.contact-list dd { margin: 0; font: 500 clamp(1.15rem, 1.8vw, 1.45rem)/1.3 var(--font-title); letter-spacing: 0; color: var(--ink); }
.contact-list a { text-decoration: none; border: 0; color: inherit; }
.contact-list a:hover { color: var(--steel-700); }
.contact-form { background: #fff; border: 1px solid var(--rule); border-top: 6px solid var(--navy); border-radius: 6px; padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 16px; align-content: start; box-shadow: 0 26px 44px -30px rgba(40,42,91,.5); }
.contact-form h3 { margin: 0; font-size: 1.7rem; color: var(--ink); }
.contact-form .form-sub { margin: -.4rem 0 .2rem; color: #3E4650; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { font: 500 .68rem/1.2 var(--font-title); letter-spacing: .14em; text-transform: uppercase; color: #3E4650; display: grid; gap: 7px; }
.contact-form input, .contact-form select, .contact-form textarea { font: 400 1rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; padding: 13px; border: 1px solid #AEB6C0; border-radius: 4px; background: #F7F8FA; color: var(--ink); width: 100%; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--steel); outline-offset: 0; background: #fff; border-color: var(--steel); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form small { color: #3E4650; font-size: .85rem; } .contact-form small a { color: var(--steel-700); }
.contact-form .sent { display: none; background: var(--paper); border: 1px solid var(--rule); padding: 14px; font-weight: 700; border-radius: 4px; } .contact-form .sent.show { display: block; }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .t-cent { grid-column: 1 / 4; grid-row: auto; } .t-tamb { grid-column: 4 / 7; grid-row: auto; }
  .tile-wide { grid-column: span 6; } .tile-sq { grid-column: span 3; } .tile-row { grid-column: span 6; }
  .tile-tall .t-photo { min-height: 260px; }
}
@media (max-width: 900px) {
  .cat-head, .supply-grid, .contact-grid { grid-template-columns: 1fr; }
  .s-about { grid-template-columns: 1fr; }
  .about-photo::after { background: linear-gradient(180deg, rgba(40,42,91,0) 60%, rgba(40,42,91,.9) 100%); }
  .about-copy { max-width: none; padding-left: var(--gutter); }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--steel), rgba(255,255,255,.18)); }
  .steps li { padding: 0 0 34px 44px; } .steps li::before { top: 0; }
  .supply-photo { order: -1; width: min(78%, 340px); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .t-cent, .t-tamb { grid-column: span 2; }
  .tile-tall { flex-direction: row; } .tile-tall .t-photo { flex: 0 0 40%; min-height: 0; aspect-ratio: 1; }
  .tile-wide, .tile-row { grid-column: span 2; }
  .tile-wide .t-photo, .tile-row .t-photo { flex: 0 0 40%; }
  .tile-sq { grid-column: span 1; } .tile-sq .t-body { padding: .8rem; } .tile-sq h3 { font-size: 1.05rem; } .tile-sq .t-go { font-size: .7rem; }
  .t-body { padding: 1rem; } .tile p { font-size: .92rem; }
  .contact-form .row2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tile, .t-photo img { transition: none; } }
.t-tag { white-space: nowrap; }
.tile-wide .t-photo { flex: 0 0 46%; } .tile-wide .t-photo img { padding: 4%; }
.tile-wide .t-body { padding-inline: 1.1rem; }

/* hero: logo horizontal e respiro abaixo dos botões */
.hero-logo { display: block; height: clamp(60px, 7vw, 76px); width: auto; margin: 0 0 clamp(20px, 3vw, 32px); }
.home .hero .wrap { padding-bottom: clamp(72px, 12vh, 132px); }

/* formulário: validação, consentimento opcional e estados */
.contact-form .req { color: #B3261E; }
.contact-form .err-msg { color: #B3261E; font: 500 .85rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }
.contact-form label.invalid input { border-color: #B3261E; background: #FFF6F5; }
.contact-form .chk { display: flex; gap: 10px; align-items: flex-start; font: 400 .92rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: #2B313A; }
.contact-form .chk input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--steel); padding: 0; }
.contact-form .btn .btn-w { display: none; }
.contact-form[aria-busy="true"] .btn .btn-t { display: none; } .contact-form[aria-busy="true"] .btn .btn-w { display: inline; }
.contact-form .btn:disabled { opacity: .75; cursor: progress; }
.contact-form .form-err { background: #FFF1F0; border: 1px solid #E6A6A1; color: #7A1D17; padding: 14px; border-radius: 4px; font-weight: 700; margin: 0; }
.contact-form .sent:focus { outline: 3px solid var(--steel); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }