/* ==========================================================================
   /corte-e-dobra/ — página de SERVIÇO/PROCESSO. Constrói por cima de css/style.css.
   Conceito: "a linha e o vinco" — a geometria do próprio serviço. A chapa é
   plana, o corte é uma reta, a dobra é o ângulo.
   Assinatura: o TRILHO — uma linha de cota que desce a página reta pelas
   seções de chapa e corte, DOBRA na seção de dobra e continua deslocada até a
   ficha de orçamento. SVG/CSS estático; não depende de animação.
   Matéria: aço frio, giz branco (como a JC marca medida na chapa), número em
   mono como cota de desenho. Azul JC só no trilho e nas cotas; o CTA segue o
   padrão global da marca. Nada de cards em grade, nada de ícone genérico.
   Mobile-first; breakpoints no fim.
   ========================================================================== */

.page-corte {
  --chalk: #e9eef4;
  --chalk-dim: rgba(233, 238, 244, 0.6);
  --steel-100: #d7dde6;
  --trilho: var(--jc-blue-300);
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rail-x: 0px;          /* deslocamento do trilho DEPOIS da dobra */
  --bend-w: 36px;         /* largura do vinco no trilho (mobile) */
  --bend-top: 96px;       /* onde a dobra começa dentro da seção de dobra */
  --rail-left: 20px;      /* borda interna do container */
  background-color: #0e1116;   /* aço frio, um tom abaixo do ink da base */
}
/* Pan lateral no celular: a base declara `overflow-x: hidden` SÓ no body.
   Isso torna o body um contêiner de scroll próprio — no celular o conteúdo
   desliza alguns pixels sob o viewport e corta o que está na borda (o botão
   do CTA final). `clip` corta sem criar contêiner de scroll, então não há o
   que arrastar. Padrão já homologado em REFERENCIA-PAGINA-ESPECIALISTA.md:
   clip no html E no body, com hidden declarado antes como recuo para
   navegador antigo. Escopado a esta página: a folha só é carregada aqui. */
html { overflow-x: hidden; overflow-x: clip; }
.page-corte { overflow-x: hidden; overflow-x: clip; }

.page-corte .section { padding-block: clamp(44px, 6vw, 84px); }
.page-corte .section::before { display: none; }       /* a régua horizontal da base sai; o trilho vertical assume */
.page-corte .section-head { margin-bottom: clamp(22px, 3vw, 36px); }
.page-corte .section-head h2 { color: var(--chalk); }
.page-corte .wa-float { display: none; }
.page-corte [id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.page-corte .eyebrow { color: var(--chalk); background: rgba(233,238,244,0.06); border-color: rgba(233,238,244,0.18); }

/* ---------- Cota: número técnico em mono, com tique de desenho ---------- */
.cota {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); color: var(--chalk);
  padding-left: 14px; position: relative;
}
.cota::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--trilho); }
.cota::after  { content: ""; position: absolute; left: -3px; top: 4px; width: 8px; height: 2px; background: var(--trilho); box-shadow: 0 calc(100% + 0px) 0 0 transparent; }
/* Valor e unidade são uma coisa só: "até 8 mm" nunca vira "até 8" / "mm". */
.cota b { font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.cota small { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-dim); }

/* Cota de dimensão sobre foto: linha com tiques nas pontas e o valor no meio */
.dim {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--chalk); text-shadow: 0 1px 2px rgba(5,5,10,0.9), 0 3px 12px rgba(5,5,10,0.7);
  pointer-events: none;
}
.dim::before, .dim::after { content: ""; flex: 1; height: 2px; background: var(--chalk); box-shadow: 0 1px 3px rgba(5,5,10,0.8); position: relative; }
.dim--h { left: 6%; right: 6%; }
.dim--h::before { border-left: 2px solid var(--chalk); height: 14px; background: linear-gradient(var(--chalk), var(--chalk)) center/100% 2px no-repeat; }
.dim--h::after  { border-right: 2px solid var(--chalk); height: 14px; background: linear-gradient(var(--chalk), var(--chalk)) center/100% 2px no-repeat; }
.dim span { padding: 4px 10px; background: rgba(8,10,14,0.66); border: 1px solid rgba(233,238,244,0.22); border-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; }
.dim--tag { position: absolute; z-index: 3; }

/* ---------- Hero: título na parede, máquina na faixa de baixo ---------- */
.hero--corte { min-height: 100svh; min-height: 100vh; align-items: flex-start; }
.hero--corte .hero-bg img { object-position: 62% 50%; filter: saturate(0.92) contrast(1.06) brightness(0.9); }
.hero--corte .hero-scrim {
  background:
    linear-gradient(180deg, rgba(8,10,14,0.78) 0%, rgba(8,10,14,0.52) 42%, rgba(8,10,14,0.22) 66%, rgba(8,10,14,0.72) 100%),
    linear-gradient(90deg, rgba(8,10,14,0.55), transparent 62%);
}
.hero--corte .hero-inner {
  display: flex; flex-direction: column; min-height: 100svh; min-height: 100vh;
  padding-top: calc(var(--header-h) + clamp(18px, 3vh, 40px));
  padding-bottom: clamp(88px, 12vh, 120px);
}
.hero--corte .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.hero--corte .crumbs a { color: rgba(255,255,255,0.82); text-decoration: underline; text-underline-offset: 3px; }
.hero--corte .crumbs [aria-current] { color: var(--white); font-weight: 600; }
.hero--corte .eyebrow { margin-bottom: clamp(12px, 1.8vh, 20px); }
.hero--corte h1 {
  max-width: 14ch;
  font-size: clamp(2.2rem, min(6vw, 7.4vh), 4.4rem); line-height: 1.02;
  color: var(--chalk);
}
/* O "em" vira a linha: sublinhado de cota, não gradiente. */
.hero--corte h1 em { color: var(--chalk); background: none; -webkit-text-fill-color: currentColor; font-style: normal; position: relative; display: inline-block; }
.hero--corte h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 3px; background: var(--trilho); }
.hero--corte .hero-lede { margin-top: clamp(12px, 1.8vh, 20px); max-width: 46ch; font-size: clamp(0.98rem, 1.5vw, 1.12rem); color: rgba(233,238,244,0.86); }
.hero--corte .hero-actions { margin-top: clamp(18px, 2.6vh, 30px); }

/* Ficha do hero: as duas cotas confirmadas, como uma placa de giz sobre aço */
.hero-ficha {
  margin-top: clamp(24px, 4vh, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px;
  padding: 18px 20px 16px;
  width: fit-content; max-width: 100%;
  border: 1px solid rgba(233,238,244,0.2); border-radius: 6px;
  background: rgba(10,12,16,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-ficha .cota b { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.hero-ficha-legenda { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-dim); border-top: 1px dashed rgba(233,238,244,0.22); padding-top: 10px; }

/* Telas estreitas: em 360 px a coluna da ficha do hero mede 126 px e
   "até 8 mm" precisa de 113,3 px mais os 14 px do tique da cota — falta 1,3 px,
   e o texto quebrava entre o valor e a unidade. Só o respiro interno cede:
   o corpo da fonte fica igual, para não perder legibilidade.
   Abaixo de 335 px não há espaço para duas colunas nem apertando; empilha. */
@media (max-width: 374px) {
  .hero-ficha { gap: 12px; padding: 14px 14px 12px; }
}
@media (max-width: 334px) {
  .hero-ficha { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- O TRILHO (assinatura) ---------- */
.rail-sec { position: relative; }
.rail-sec .container { padding-left: calc(var(--rail-left) + var(--rail-x) + 26px); }
.rail-sec::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  left: max(calc(var(--rail-left) + var(--rail-x)), calc((100% - var(--container)) / 2 + var(--rail-left) + var(--rail-x)));
  width: 2px; background: var(--trilho); opacity: 0.85;
}
/* Origem: um tique e um zero de desenho no começo da linha */
.rail-start::before {
  content: "0"; position: absolute; top: 0; z-index: 1;
  left: max(calc(var(--rail-left) - 5px), calc((100% - var(--container)) / 2 + var(--rail-left) - 5px));
  width: 12px; height: 12px; border-radius: 50%; background: var(--trilho);
  font: 500 0.6rem/12px var(--font-mono); color: #0e1116; text-align: center;
}
/* Fim: tique horizontal no pé da ficha */
.rail-end::before {
  content: ""; position: absolute; bottom: 0; z-index: 1;
  left: max(calc(var(--rail-left) + var(--rail-x) - 7px), calc((100% - var(--container)) / 2 + var(--rail-left) + var(--rail-x) - 7px));
  width: 16px; height: 2px; background: var(--trilho);
}
/* A DOBRA: seção onde o trilho muda de direção. O ::after da seção some;
   três peças assumem — segmento reto em cima, o vinco em SVG, e o segmento
   deslocado embaixo. */
.rail-bend-sec::after { display: none; }
.rail-bend {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  left: max(var(--rail-left), calc((100% - var(--container)) / 2 + var(--rail-left)));
  width: calc(var(--bend-w) + 2px);
}
.rail-bend::before { content: ""; position: absolute; left: 0; top: 0; height: var(--bend-top); width: 2px; background: var(--trilho); opacity: 0.85; }
.rail-bend svg { position: absolute; left: 0; top: var(--bend-top); width: calc(var(--bend-w) + 2px); height: calc((var(--bend-w) + 2px) * 1.75); display: block; overflow: visible; }
.rail-bend svg path { fill: none; stroke: var(--trilho); stroke-width: 2; opacity: 0.85; vector-effect: non-scaling-stroke; }
.rail-bend::after { content: ""; position: absolute; left: var(--bend-w); top: calc(var(--bend-top) + (var(--bend-w) + 2px) * 1.75); bottom: 0; width: 2px; background: var(--trilho); opacity: 0.85; }
.rail-bend-label {
  /* Só no desktop: em 390px o rótulo caía em cima do título da seção. O vinco
     da linha já diz o que precisa; o rótulo é reforço, não informação. */
  display: none;
  position: absolute; z-index: 1; pointer-events: none;
  left: max(calc(var(--rail-left) + var(--bend-w) + 14px), calc((100% - var(--container)) / 2 + var(--rail-left) + var(--bend-w) + 14px));
  top: calc(var(--bend-top) + (var(--bend-w) + 2px) * 0.7);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--trilho);
}
.rail-bend-sec .container { padding-left: calc(var(--rail-left) + var(--bend-w) + 26px); }

/* ---------- 2. Começo: três batidas presas ao trilho ---------- */
.comeco-grid { display: grid; gap: 22px; }
.comeco-texto p { max-width: 50ch; font-size: 1.02rem; }
.trilho-passos { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.trilho-passo { position: relative; padding: 2px 0 2px 0; }
.trilho-passo::before {
  /* tique que sai do trilho até o texto */
  content: ""; position: absolute; top: 0.95em; height: 2px; width: 18px; background: var(--trilho);
  left: calc(-1 * (var(--rail-left) + 26px) + var(--rail-left) + 1px);
}
.trilho-passo .n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--trilho); }
.trilho-passo h3 { color: var(--chalk); font-size: 1.12rem; margin-top: 2px; }
.trilho-passo p { margin-top: 4px; font-size: 0.94rem; color: var(--text-body); max-width: 44ch; }

/* ---------- 3. Chapa: dois racks em retrato, sem moldura de card ---------- */
.chapa-grid { display: grid; gap: 22px; }
.chapa-texto p { font-size: 1.02rem; max-width: 46ch; }
.chapa-texto p + p { margin-top: 12px; }
.racks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rack { position: relative; overflow: hidden; border-radius: 4px; background: var(--ink-900); border: 1px solid rgba(233,238,244,0.1); }
.rack img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.rack figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 10px;
  background: linear-gradient(0deg, rgba(8,10,14,0.9), transparent);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk);
}

/* ---------- 4. Corte: foto larga com a cota em cima ---------- */
.corte-figure { position: relative; margin-top: 8px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(233,238,244,0.1); background: var(--ink-900); }
.corte-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
.corte-figure .dim--h { top: 57%; }
.corte-figure .dim--tag { right: 14px; bottom: 58px; }
.corte-figure figcaption { padding: 12px 14px; font-size: 0.86rem; color: var(--text-muted); border-top: 1px solid rgba(233,238,244,0.1); }
.corte-texto { display: grid; gap: 16px; }
.corte-texto p { max-width: 50ch; font-size: 1.02rem; }
.cotas-linha { display: flex; flex-wrap: wrap; gap: 22px 36px; margin-top: 4px; }

/* ---------- 5. Dobra: vídeo em retrato + máquina + vinco ---------- */
.dobra-grid { display: grid; gap: 18px; }
.dobra-texto p { max-width: 50ch; font-size: 1.02rem; }
.dobra-video { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid rgba(233,238,244,0.1); background: var(--ink-950); max-width: 420px; }
.dobra-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink-950); }
.dobra-video figcaption { padding: 12px 14px; font-size: 0.84rem; color: var(--text-muted); border-top: 1px solid rgba(233,238,244,0.1); }
.dobra-provas { display: grid; gap: 14px; }
.dobra-provas figure { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid rgba(233,238,244,0.1); background: var(--ink-900); }
.dobra-provas img { display: block; width: 100%; height: auto; object-fit: cover; }
.dobra-provas .prova-maquina img { aspect-ratio: 4 / 3; object-position: 40% 60%; }
.dobra-provas .prova-vinco img { aspect-ratio: 3 / 2; }
.dobra-provas figcaption { padding: 11px 14px; font-size: 0.84rem; color: var(--text-muted); border-top: 1px solid rgba(233,238,244,0.1); }
.dobra-provas figcaption strong { color: var(--chalk); font-weight: 600; }

/* ---------- 6. Peça preparada: retrato alto + texto ---------- */
.peca-grid { display: grid; gap: 20px; }
.peca-texto p { max-width: 46ch; font-size: 1.02rem; }
.peca-texto p + p { margin-top: 12px; }
.peca-figure { border-radius: 4px; overflow: hidden; border: 1px solid rgba(233,238,244,0.1); background: var(--ink-900); }
.peca-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.peca-figure figcaption { padding: 12px 14px; font-size: 0.84rem; color: var(--text-muted); border-top: 1px solid rgba(233,238,244,0.1); }

/* ---------- 7. Ficha rápida: campos de giz, não formulário ---------- */
.ficha { display: grid; gap: 0; border: 1px solid rgba(233,238,244,0.18); border-radius: 6px; background: rgba(233,238,244,0.03); overflow: hidden; }
.ficha-campo { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; border-bottom: 1px dashed rgba(233,238,244,0.18); }
.ficha-campo:last-child { border-bottom: 0; }
.ficha-campo .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--trilho); }
.ficha-campo .v { color: var(--chalk); font-size: 1rem; }
.ficha-campo .v small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.86rem; }
.ficha-acao { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ficha-nota { margin-top: 14px; font-size: 0.9rem; color: var(--text-muted); max-width: 52ch; }

/* Botões da ficha em tela estreita: o container do #ficha tem padding-left de
   82 px (o trilho deslocado depois da dobra), então aqui sobram 258 px em
   360 px de tela — o menor espaço útil da página. O rótulo "Mandar pelo
   WhatsApp" mede 278 px com o `white-space: nowrap` da base e não encolhe,
   estourando o container e sendo cortado na borda. Deixar o rótulo quebrar,
   como a base já faz com o botão do CTA final. */
@media (max-width: 480px) {
  .ficha-acao .btn {
    white-space: normal; text-align: center; line-height: 1.25;
    height: auto; padding-block: 14px; width: 100%;
  }
}

/* ---------- 8. CTA final ---------- */
.page-corte .cta-final-bg img { object-position: 60% 50%; }
.page-corte .cta-final-inner h2 { color: var(--chalk); }
.cta-final-addr { margin-top: 20px; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-col a[aria-current="page"] { color: var(--chalk); font-weight: 600; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 640px) {
  .comeco-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .dobra-grid { grid-template-columns: minmax(240px, 340px) 1fr; align-items: start; }
  .dobra-texto { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .page-corte { --bend-w: 80px; --bend-top: 140px; }
  .rail-bend-label { display: block; }
  /* Ritmo: no desktop a seção de abertura tinha altura ociosa — o texto e os
     três passos são curtos e não preenchiam o padding padrão. Só o respiro
     externo diminui (84 -> 72 px, -14%); nada de conteúdo foi comprimido.
     Mobile e tablet ficam como estavam. */
  .page-corte #comeco { padding-block: clamp(40px, 5.2vw, 72px); }
  .rail-sec .container { padding-left: calc(var(--rail-left) + var(--rail-x) + 64px); }
  .rail-bend-sec .container { padding-left: calc(var(--rail-left) + var(--bend-w) + 64px); }
  .trilho-passo::before { width: 44px; left: calc(-64px + 1px); }
  .chapa-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 40px; }
  .corte-texto { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .dobra-grid { grid-template-columns: minmax(280px, 360px) 1fr; gap: 24px; }
  .dobra-provas { grid-template-columns: 1fr; }
  .peca-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .peca-figure img { aspect-ratio: 4 / 5; }
  .ficha { grid-template-columns: 1fr 1fr; }
  .ficha-campo { border-bottom: 1px dashed rgba(233,238,244,0.18); }
  .ficha-campo:nth-child(odd) { border-right: 1px dashed rgba(233,238,244,0.18); }
  .ficha-campo:nth-last-child(-n+2) { border-bottom: 0; }
  .hero--corte .hero-bg img { object-position: 50% 50%; }
  .hero--corte .hero-inner { justify-content: space-between; }
  .hero-ficha { margin-top: 0; align-self: flex-end; grid-template-columns: auto auto; gap: 14px 34px; }
}
@media (min-width: 1100px) {
  .dobra-grid { grid-template-columns: 360px 1fr; }
  .dobra-provas { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* Telas baixas de desktop: o hero não pode empurrar a ficha para fora da dobra */
@media (min-width: 900px) and (max-height: 780px) {
  .hero--corte .hero-inner { padding-top: calc(var(--header-h) + 12px); padding-bottom: 60px; }
  .hero--corte h1 { font-size: clamp(2rem, 5.6vh, 3.4rem); }
  .hero-ficha { padding: 12px 16px 10px; }
  .hero-ficha .cota b { font-size: 1.5rem; }
  .page-corte .section { padding-block: clamp(32px, 4.2vh, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .dobra-video video { animation: none; }
}