/* ========== Bricolage Grotesque (auto-hospedada) ========== */
    @font-face {
      font-family: 'Bricolage Grotesque';
      font-style: normal;
      font-weight: 200 800;
      src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bricolage Grotesque';
      font-style: normal;
      font-weight: 200 800;
      src: url('../fonts/bricolage-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    /* ========================================================
       TOKENS DO GUIA — base mobile-first (Celular retrato ≤767)
       Workspace, gutter, cols, spacing, radii, sombra, tipografia
       Cores e fonte vêm do projeto (Figma CEMC).
    ======================================================== */
    :root {
      /* Workspace + grid (Celular retrato: 360 / gutter 8 / 4 cols) */
      --workspace: 360px;
      --gutter: 8px;
      --cols: 4;

      /* Spacing scale (8/16/24/32/40/64/80/96/128/168/192/256) */
      --sp-1: 8px;
      --sp-2: 16px;
      --sp-3: 24px;
      --sp-4: 32px;
      --sp-5: 40px;
      --sp-6: 64px;
      --sp-7: 80px;
      --sp-8: 96px;
      --sp-9: 128px;
      --sp-10: 168px;
      --sp-11: 192px;
      --sp-12: 256px;

      /* Border radius (4 / 8 / 24) */
      --r-sm: 4px;
      --r-md: 8px;
      --r-lg: 24px;

      /* Sombra padrão (5 layers) */
      --shadow:
        0 413px 116px 0 rgba(10,39,41,0),
        0 264px 106px 0 rgba(10,39,41,.01),
        0 149px 89px 0 rgba(10,39,41,.02),
        0 66px 66px 0 rgba(10,39,41,.03),
        0 17px 36px 0 rgba(10,39,41,.04);

      /* Tipografia — escala Mobile (até 880) */
      --fs-h1: 32px;
      --fs-h2: 30px;
      --fs-h3: 28px;
      --fs-h4: 26px;
      --fs-h5: 24px;
      --fs-h6: 22px;
      --fs-body-xl: 20px;
      --fs-body-l: 18px;
      --fs-body-m: 16px;
      --fs-body-s: 14px;

      /* Fonte (projeto CEMC) */
      --ff: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

      /* Cores (projeto CEMC) */
      --c-red: #E11621;
      --c-red-deep: #C62828;     /* Quem Somos: barra esquerda + badge */
      --c-teal: #00897B;          /* Quem Somos: bloco direito @ opacity .05 */
      --c-orange: #FF9F25;        /* Quem Somos: bloco rotacionado @ opacity .20 */
      --c-dark: #231F1F;
      --c-dark-2: #3B3535;
      --c-on-dark: #FFFAFB;
      --c-text: #090101;
      --c-bg: #FEFEFE;
      --c-bg-soft: #FCF3F3;
      --c-bg-section: #F5F5F5;    /* Fale Conosco bg */
    }

    /* Celular paisagem 768–880 */
    @media (min-width: 768px) {
      :root { --workspace: 728px; --gutter: 16px; --cols: 6; }
    }

    /* Tablet retrato 881–1024 — escala tipográfica vira Desktop */
    @media (min-width: 881px) {
      :root {
        --workspace: 780px;
        --gutter: 32px;
        --cols: 6;
        --fs-h1: 80px;
        --fs-h2: 64px;
        --fs-h3: 56px;
        --fs-h4: 48px;
        --fs-h5: 40px;
        --fs-h6: 32px;
        --fs-body-xl: 28px;
        --fs-body-l: 24px;
        --fs-body-m: 20px;
        --fs-body-s: 16px;
      }
    }

    /* Tablet paisagem 1025–1200 */
    @media (min-width: 1025px) {
      :root { --workspace: 924px; }
    }

    /* Notebook 1201–1366 */
    @media (min-width: 1201px) {
      :root { --workspace: 1100px; --cols: 12; }
    }

    /* Desktop ≥ 1367 */
    @media (min-width: 1367px) {
      :root { --workspace: 1280px; }
    }

    /* ========== Reset ========== */
    *, *::before, *::after { box-sizing: border-box; }
    * { text-wrap: balance; }
    body {
      margin: 0;
      font-family: var(--ff);
      font-weight: 400;
      font-size: var(--fs-body-m);
      line-height: 1.5;
      color: var(--c-text);
      background: var(--c-bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3, h4, h5, h6 {
      margin: 0;
      font-weight: 700;
      line-height: 1.2;
    }
    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }
    h4 { font-size: var(--fs-h4); }
    h5 { font-size: var(--fs-h5); }
    h6 { font-size: var(--fs-h6); }
    p { margin: 0; }
    a { color: inherit; text-decoration: none; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    button { font: inherit; cursor: pointer; }
    img, svg { display: block; max-width: 100%; height: auto; }

    /* Body utilities */
    .body-xl { font-size: var(--fs-body-xl); font-weight: 400; line-height: 1.5; }
    .body-l  { font-size: var(--fs-body-l);  font-weight: 400; line-height: 1.5; }
    .body-m  { font-size: var(--fs-body-m);  font-weight: 400; line-height: 1.5; }
    .body-s  { font-size: var(--fs-body-s);  font-weight: 400; line-height: 1.5; }

    /* ========== Workspace utility ========== */
    /* Conteúdo limitado à largura útil do tier, centralizado.
       padding lateral seguro pra não colar nas bordas em viewports atípicos. */
    .ws {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
    }

    /* ========== Topbar (Frame "UM" — bg #3B3535) ========== */
    /* Mobile (≤880) esconde. */
    .topbar {
      background: var(--c-dark-2);
      color: var(--c-on-dark);
    }
    .topbar-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      padding-block: var(--sp-1);
      min-height: 40px;
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-1) var(--sp-4);
      align-items: center;
    }
    .topbar-item {
      /* Mesma régua do nav/CTA: 16/300/lh19.2 */
      font-size: 16px;
      font-weight: 300;
      line-height: 19.2px;
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
    }
    .topbar-item svg { color: var(--c-red); flex-shrink: 0; }
    @media (max-width: 880px) {
      .topbar { display: none; }
    }

    /* ========== Cabeçalho (Frame 4 — bg #231F1F) ========== */
    .site-header {
      background: var(--c-dark);
      color: var(--c-on-dark);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      padding-block: var(--sp-2);
      min-height: 88px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2);
    }

    /* Brand */
    .brand {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      aspect-ratio: 1 / 1;
      border-radius: var(--r-sm);
      flex-shrink: 0;
      object-fit: contain;
      display: block;
    }
    .brand-text {
      /* Mobile compacto; desktop usa o tamanho Figma 20/700/lh30 */
      font-size: 15px;
      font-weight: 700;
      line-height: 22px;
      white-space: nowrap;
    }
    @media (min-width: 881px) {
      .brand-text { font-size: 20px; line-height: 30px; }
    }
    @media (min-width: 1025px) {
      .brand-mark { width: 64px; height: 64px; }
    }

    /* Hamburger (mobile) */
    .menu-toggle {
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
      width: 32px;
      height: 24px;
      padding: 0;
      background: transparent;
      border: none;
      color: inherit;
    }
    .menu-toggle span {
      display: block;
      height: 2px;
      width: 100%;
      background: currentColor;
      border-radius: 2px;
      transition: transform .25s, opacity .25s;
    }
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* Nav (mobile = drawer abaixo do header) */
    .primary-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--c-dark);
      display: none;
      padding: var(--sp-3) var(--sp-2);
      flex-direction: column;
      gap: var(--sp-2);
      border-top: 1px solid rgba(255,250,251,.08);
    }
    .primary-nav.is-open { display: flex; }
    .nav-list {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
    }
    .nav-list a {
      /* Mesmo tamanho do CTA (16/lh 19.2), peso 300 light */
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      padding-block: var(--sp-1);
      font-size: 16px;
      font-weight: 300;
      line-height: 19.2px;
      color: var(--c-on-dark);
      transition: color .2s;
    }
    .nav-list a:hover { color: var(--c-red); }

    /* CTA "Fazer Orçamento" — Figma: 16/600/lh 19.2, padding 16, outline interno 2px vermelho */
    /* Usa box-shadow:inset em vez de border pra não afetar layout (= comportamento do outline-offset:-2 do Figma) */
    .btn-header {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      line-height: 19.2px;
      color: var(--c-on-dark);
      background: transparent;
      border: none;
      box-shadow: inset 0 0 0 2px var(--c-red);
      border-radius: var(--r-md);
      padding: var(--sp-2);
      white-space: nowrap;
      transition: background .2s;
    }
    .btn-header svg { color: var(--c-red); }
    .btn-header:hover { background: var(--c-red); }
    .btn-header:hover svg { color: var(--c-on-dark); }

    /* Tablet paisagem ≥1025: nav inline, hamburger some */
    @media (min-width: 1025px) {
      .menu-toggle { display: none; }
      .primary-nav {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        padding: 0;
        background: transparent;
        border-top: none;
      }
      .nav-list { flex-direction: row; gap: var(--sp-3); }
      .nav-list a { padding: 0; }
    }
    @media (min-width: 1201px) {
      .nav-list { gap: var(--sp-4); }
    }

    /* ===== Dropdown Produtos ===== */
    .nav-has-sub { position: relative; }
    .nav-sub { list-style: none; margin: 0; padding: 0; }
    .nav-sub-toggle svg { transition: transform .2s; }
    @media (max-width: 1024px) {
      .nav-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; padding-left: var(--sp-2); }
      .nav-has-sub.is-open .nav-sub { max-height: 320px; }
      .nav-sub a { display: block; padding-block: var(--sp-1); font-size: 15px; color: var(--c-on-dark); opacity: .92; }
      .nav-sub a:hover { color: var(--c-red); opacity: 1; }
      .nav-has-sub.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
    }
    @media (min-width: 1025px) {
      .nav-sub {
        position: absolute; top: calc(100% + 10px); left: 50%;
        min-width: 250px; background: var(--c-bg); border-radius: var(--r-sm);
        box-shadow: 0 12px 32px rgba(0,0,0,.20); padding: var(--sp-1);
        display: flex; flex-direction: column; gap: 2px;
        opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
        transition: opacity .16s, transform .16s, visibility .16s; z-index: 120;
      }
      .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
      .nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub {
        opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
      }
      .nav-sub a {
        display: block; padding: 10px 14px; border-radius: 6px;
        font-size: 15px; font-weight: 400; color: var(--c-text); white-space: nowrap;
      }
      .nav-sub a:hover { background: var(--c-bg-soft); color: var(--c-red); }
      .nav-has-sub:hover .nav-sub-toggle svg { transform: rotate(180deg); }
    }

    /* ========== HERO (Imagem 1927x803, gradient overlay esquerdo) ========== */
    /* Figma: tag 20/600/lh24 vermelha + h1 56/600/lh67.2 + lead 28/300/lh42 (desktop)
       Posicionado dentro do workspace, padding-top ~115px do top da imagem em desktop. */
    .hero {
      position: relative;
      width: 100%;
      background: var(--c-dark);
      color: var(--c-on-dark);
      overflow: hidden;
      isolation: isolate;
      aspect-ratio: 1920 / 797;       /* desktop largo: mostra imagem inteira */
      min-height: 656px;              /* mobile/tablet: 128 top + ~400 conteúdo + 128 bottom */
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      z-index: -2;
      display: block;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(36,36,36,.39) 0%,
        rgba(36,36,36,.39) 18%,
        rgba(255,255,255,0) 100%);
      z-index: -1;
    }
    .hero-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      height: 100%;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
      z-index: 1;
      padding-top: var(--sp-9);    /* 128px top em todos viewports */
      padding-bottom: var(--sp-9); /* 128px bottom em todos viewports */
    }
    .hero-tag {
      padding: var(--sp-1);                 /* 8px isotrópico */
      background: var(--c-red);
      color: white;
      border-radius: var(--r-md);
      font-size: 14px;
      font-weight: 600;
      line-height: 21px;
    }
    .hero-title-block {
      margin-top: 4px;                       /* gap exato Figma entre tag e título */
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);                      /* 32px (Figma) */
      max-width: 573px;
    }
    .hero-title {
      color: white;
      font-size: 32px;                       /* Mobile = H1 do Figma CEMC */
      font-weight: 600;
      line-height: 38.4px;
      text-shadow: 0 2px 16px rgba(0,0,0,.45);
    }
    .hero-lead {
      color: white;
      font-size: 18px;                       /* Mobile = Body L (descido um nível de XL) */
      font-weight: 300;
      line-height: 27px;
      max-width: 546px;
      text-shadow: 0 1px 8px rgba(0,0,0,.45);
    }


    @media (min-width: 881px) {
      .hero { min-height: 790px; }                              /* desktop: 128 top + ~530 conteúdo + 128 bottom (+30px) */
      .hero-tag { font-size: 16px; line-height: 24px; }
      .hero-title { font-size: 56px; line-height: 67.2px; }   /* H1 do Figma CEMC desktop */
      .hero-lead { font-size: 24px; line-height: 36px; }       /* Body L desktop (era XL) */
    }


    /* ========== WhatsApp FAB (Figma: 64x64 redondo, canto inf. direito) ========== */
    .whatsapp-fab {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 56px;
      height: 56px;
      border-radius: 9999px;
      background: #25D366;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(0,0,0,.18);
      z-index: 90;
      transition: transform .15s, box-shadow .15s;
    }
    .whatsapp-fab:hover {
      transform: scale(1.06);
      box-shadow: 0 10px 24px rgba(0,0,0,.24);
    }
    .whatsapp-fab svg { width: 32px; height: 32px; }
    @media (min-width: 1025px) {
      .whatsapp-fab {
        right: 32px;
        bottom: 32px;
        width: 64px;
        height: 64px;
      }
      .whatsapp-fab svg { width: 36px; height: 36px; }
    }


    /* ========== Nossos Produtos (Figma: imagem 623x484 + 4 botões 624x97 cada) ========== */
    /* Section: padding 320 lateral, 128 vertical, gap 80 (title→content) */
    .produtos {
      background: var(--c-bg);
      padding-block: var(--sp-9);            /* 128 */
    }
    .produtos-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-7);                      /* 80 */
    }
    .produtos-title {
      /* Figma: 48/600/lh57.6 black centralizado.
         Mobile escala (H4): 26/600/lh31.2 */
      text-align: center;
      color: var(--c-text);
      font-size: 26px;
      font-weight: 600;
      line-height: 31.2px;
      width: 100%;
    }
    .produtos-grid {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);                      /* 32 mobile */
      align-items: stretch;
    }
    .produtos-image {
      margin: 0;
      border-radius: var(--r-md);            /* 8 (snap do 6 do Figma) */
      overflow: hidden;
      box-shadow: 0 2px 3px rgba(0,0,0,.30);
    }
    .produtos-image img {
      width: 100%;
      height: auto;
      aspect-ratio: 623 / 484;
      object-fit: cover;
      display: block;
    }
    .produtos-list {
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);                      /* 32 */
    }
    .produtos-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;                             /* Figma exato: itemSpacing 10 */
      padding: 12px var(--sp-4);             /* T12 R32 B12 L32 */
      min-height: 72px;                      /* mobile */
      background: var(--c-bg-soft);          /* #FCF3F3 */
      border-radius: var(--r-md);
      box-shadow: inset 0 0 0 1px #E2DFDF, 0 2px 3px rgba(0,0,0,.06);
      color: var(--c-text);
      transition: transform .15s, box-shadow .15s;
    }
    .produtos-list a:hover {
      transform: translateX(4px);
      box-shadow: inset 0 0 0 1px var(--c-red), 0 4px 8px rgba(0,0,0,.08);
    }
    .produtos-list span {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.2;
      flex: 1;
    }
    .produtos-list svg {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      color: var(--c-text);
    }
    .produtos-list a:hover svg { color: var(--c-red); }

    /* Tablet retrato 881+ → 2 colunas (imagem + lista lado a lado) */
    @media (min-width: 1025px) {
      .produtos-grid {
        flex-direction: row;
        gap: 38px;                           /* Figma exato */
        align-items: stretch;
      }
      .produtos-image {
        flex: 0 0 auto;
        width: calc(50% - 19px);             /* Figma: 623 + 38 + 624 = 1285 ≈ 1280 workspace */
      }
      .produtos-list {
        flex: 1;
        min-height: 484px;
        justify-content: space-between;
        gap: var(--sp-4);
      }
      .produtos-list a {
        min-height: 97px;                    /* Figma exato */
      }
      .produtos-list span {
        font-size: 24px;
        line-height: 28.8px;
      }
      .produtos-list svg {
        width: 32px;                         /* Figma exato em desktop */
        height: 32px;
      }
    }
    @media (min-width: 881px) {
      .produtos-title { font-size: 48px; line-height: 57.6px; }
    }


    /* ========== Segmentos de Atuação (Frame Figma 4046:2898) ========== */
    /* Section: bg gradient #FEFAFB → #FCF3F3, padding 80/128, gap 64, cards 4×2 */
    .segmentos {
      background: linear-gradient(180deg, #FEFAFB 0%, var(--c-bg-soft) 100%);
      padding-top: var(--sp-7);
      padding-bottom: var(--sp-9);
    }
    .segmentos-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-6);                      /* 64 */
    }
    .segmentos-title {
      text-align: center;
      color: var(--c-text);
      opacity: 0.9;
      font-size: 26px;
      font-weight: 600;
      line-height: 31.2px;
      width: 100%;
    }
    .segmentos-grid {
      width: 100%;
      /* Guia mobile: 4 cols + gutter 8. Cada card = 2 cols + 1 gutter. 2 cards por linha. */
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gutter);
    }
    .segmentos-card {
      background: var(--c-bg-soft);
      border: 1px solid #F6F6F6;
      border-radius: var(--r-sm);
      box-shadow: 0 2px 3px rgba(0,0,0,.30);
      padding-bottom: var(--sp-2);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      overflow: hidden;
      transition: transform .15s, box-shadow .15s;
    }
    .segmentos-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0,0,0,.18);
    }
    .segmentos-card-img {
      width: 100%;
      aspect-ratio: 291 / 231;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
    .segmentos-card[data-segment="termoeletrica"] .segmentos-card-img {
      object-position: center bottom;          /* foto vertical: priorizar base */
    }
    .segmentos-card-label {
      font-size: 16px;                  /* mobile: card = 2 cols do guia (~167px) */
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      color: var(--c-text);
      padding-inline: var(--sp-2);
      margin: 0;
    }
    @media (min-width: 881px) {
      .segmentos-title { font-size: 48px; line-height: 57.6px; }
      .segmentos-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .segmentos-card-label { font-size: 24px; line-height: 28.8px; }
    }
    @media (min-width: 1201px) {
      .segmentos-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
    }


    /* ========== Quem Somos / About (Frame Figma 4050:1642) ==========
       Decoratives absolutos: barra 16x100% #C62828 esq, bloco teal .05 dir,
       bloco rotate(-3deg) laranja .20 atrás da imagem.
       Badge "100% Comprometimento" sobreposta na borda inferior da imagem. */
    .quem-somos {
      position: relative;
      /* Figma: imagem de fundo (oficina CEMC) com overlay rosa #FCF3F3 .9 */
      background:
        linear-gradient(rgba(252,243,243,.95), rgba(252,243,243,.95)),
        url('../imagens/about-bg.webp') center/cover no-repeat;
      padding-block: var(--sp-8);
      overflow: hidden;
      isolation: isolate;
    }
    .quem-somos::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 16px;
      background: var(--c-red-deep);
      z-index: 1;
    }
    .quem-somos::after {
      content: "";
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 33.33%;
      max-width: 640px;
      background: var(--c-teal);
      opacity: .05;
      pointer-events: none;
      z-index: 0;
    }
    .quem-somos-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: var(--sp-7);
      position: relative;
      z-index: 2;
    }
    .quem-somos-grid {
      display: flex;
      flex-direction: column;
      gap: var(--sp-6);
      align-items: stretch;
    }
    .quem-somos-image {
      position: relative;
      margin: 0;
      align-self: center;
      width: 591px;             /* Figma exato: 591×405 (clip da imagem) */
      max-width: 100%;
      flex-shrink: 0;
    }
    .quem-somos-image::before {
      content: "";
      position: absolute;
      inset: -8% -5%;
      background: var(--c-orange);
      opacity: .20;
      transform: rotate(-3deg);
      border-radius: 100px 0 100px 0;
      z-index: -1;
    }
    .quem-somos-image img {
      width: 100%;
      height: auto;
      aspect-ratio: 591 / 405;
      object-fit: cover;
      border-radius: 80px 0 80px 0;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
      display: block;
    }
    .quem-somos-badge {
      position: absolute;
      right: var(--sp-2);
      bottom: -20px;
      background: var(--c-red-deep);
      color: #fff;
      padding: var(--sp-3);
      border-radius: var(--r-md);
      box-shadow:
        0 8px 10px -6px rgba(0,0,0,.10),
        0 20px 25px -5px rgba(0,0,0,.10);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .quem-somos-badge strong {
      font-size: 24px;
      font-weight: 600;
      line-height: 28.8px;
      display: block;
    }
    .quem-somos-badge span {
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      display: block;
    }
    .quem-somos-text {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }
    .quem-somos-tag {
      color: var(--c-red);
      font-size: 24px;
      font-weight: 600;
      line-height: 28.8px;
      margin: 0;
    }
    .quem-somos-h2 {
      color: #000;
      font-size: 28px;
      font-weight: 600;
      line-height: 1.2;
      margin: 0;
    }
    .quem-somos-p {
      color: #000;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.5;
      margin: 0;
    }
    .quem-somos-p + .quem-somos-p { margin-top: var(--sp-2); }
    @media (min-width: 1025px) {
      .quem-somos { padding-block: var(--sp-9); }
      .quem-somos-grid {
        flex-direction: row;
        gap: 64px;                    /* compactado para caber em workspace 1100 */
        align-items: center;
      }
      .quem-somos-image {
        flex: 0 0 591px;
        align-self: center;
      }
      .quem-somos-text { flex: 1 1 auto; max-width: 539px; }
      .quem-somos-h2 { font-size: 40px; line-height: 48px; }
      .quem-somos-p  { font-size: 20px; line-height: 30px; }
    }
    @media (min-width: 1367px) {
      .quem-somos-grid { gap: 124px; }   /* Figma exato com workspace 1280 */
    }


    /* ========== Quem Somos 2 (Frame Figma 4046:2915) ==========
       Texto + máquina ITX 500e, com barra decorativa 16x610 #C62828 esquerda */
    .quem-somos-2 {
      position: relative;
      /* Mesmo fundo do .quem-somos para continuidade visual */
      background:
        linear-gradient(rgba(252,243,243,.95), rgba(252,243,243,.95)),
        url('../imagens/about-bg.webp') center/cover no-repeat;
      padding-block: var(--sp-9);
      overflow: hidden;
    }
    .qs2-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 16px;
      background: var(--c-red-deep);
      pointer-events: none;
    }
    .qs2-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: flex;
      flex-direction: column-reverse;   /* mobile: imagem em cima, texto embaixo */
      gap: var(--sp-7);
    }
    .qs2-text { display: flex; flex-direction: column; gap: var(--sp-3); }
    .qs2-title {
      color: var(--c-text);
      font-size: 26px;
      font-weight: 600;
      line-height: 1.2;
      margin: 0;
    }
    .qs2-lead {
      color: var(--c-text);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.5;
      margin: 0;
    }
    .qs2-image {
      margin: 0;
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: 0 2px 3px rgba(0,0,0,.30);
    }
    .qs2-image img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }
    @media (min-width: 1025px) {
      .qs2-inner { flex-direction: row; align-items: center; gap: 64px; }
      .qs2-text  { flex: 1; }
      .qs2-image { flex: 1; }
      .qs2-title { font-size: 48px; line-height: 57.6px; }
      .qs2-lead  { font-size: 20px; line-height: 30px; }
    }
    /* Mobile: sem barra vermelha decorativa nem textura — fica visualmente estranho */
    @media (max-width: 880px) {
      .quem-somos   { background: var(--c-bg-soft); }
      .quem-somos-2 { background: var(--c-bg-soft); }
      .quem-somos::before { display: none; }
      .quem-somos::after  { display: none; }
      .qs2-bar { display: none; }
    }


    /* ========== Nossos Parceiros (Frame Figma 4046:2919) ==========
       Section: padding T80 B128, gap title→logos 80, gap entre logos 32 */
    .parceiros {
      background: var(--c-bg);
      padding-block: var(--sp-7) var(--sp-9);
    }
    .parceiros-inner {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-7);
    }
    .parceiros-title {
      text-align: center;
      color: var(--c-text);
      font-size: 26px;
      font-weight: 600;
      line-height: 31.2px;
      width: 100%;
    }
    .parceiros-logos {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap: var(--sp-3) var(--sp-4);
    }
    /* Mobile: marquee infinito (track + duplicata) */
    .parceiros-track { display: contents; }
    @media (max-width: 880px) {
      .parceiros-logos {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0;
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      }
      .parceiros-track {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--sp-5);                 /* 40 entre logos */
        padding-right: var(--sp-5);       /* mantém gap entre track e duplicata */
        animation: parceiros-marquee 25s linear infinite;
      }
      .parceiros-logo { height: 40px; width: auto; }
      .parceiros-logo-cemc { height: 40px; }
      .parceiros-logo-cemc img { height: 40px; }
      .parceiros-logo-cemc-text { font-size: 10px; }
    }
    @media (min-width: 881px) {
      .parceiros-track-dup { display: none; }
    }
    @keyframes parceiros-marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-100%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .parceiros-track { animation: none !important; }
    }
    .parceiros-logo {
      flex: 0 0 auto;
      height: 56px;
      width: auto;
      object-fit: contain;
    }
    .parceiros-logo-cemc {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      width: auto;
      height: auto;
    }
    .parceiros-logo-cemc img {
      height: 56px;
      width: auto;
    }
    .parceiros-logo-cemc-text {
      font-family: var(--ff);
      font-weight: 600;
      font-size: 12px;
      line-height: 1.2;
      color: var(--c-text);
    }
    @media (min-width: 881px) {
      .parceiros-title { font-size: 48px; line-height: 57.6px; }
      .parceiros-logos { gap: var(--sp-4); flex-wrap: nowrap; }
      .parceiros-logo[data-brand="skf"]         { width: 188px; height: 52px;  }
      .parceiros-logo[data-brand="parker"]      { width: 188px; height: 72px;  }
      .parceiros-logo[data-brand="cemc"]        { width: 269px; height: 79px;  gap: 9px; }
      .parceiros-logo-cemc img { height: 79px; }
      .parceiros-logo-cemc-text { font-size: 18px; }
      .parceiros-logo[data-brand="freudenberg"] { width: 285px; height: 65px;  }
      .parceiros-logo[data-brand="rseals"]      { width: 143px; height: 100px; }
      .parceiros-logo[data-brand="trelleborg"]  { width: 187px; height: 100px; }
    }


    /* ========== Fale Conosco (Frame Figma 4018:3567) ==========
       bg #f5f5f5, card 2 painéis: dark à esquerda + light à direita com form */
    .fale-conosco {
      background: var(--c-bg-section);
      padding-block: var(--sp-9);
    }
    .fale-conosco-inner {
      width: min(1062px, calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      box-shadow: 0 2px 3px rgba(0,0,0,.30);
      border-radius: 6px;
      overflow: hidden;
    }
    @media (min-width: 881px) {
      .fale-conosco-inner { grid-template-columns: 515fr 547fr; }
    }
    .fc-info {
      background: var(--c-dark);
      color: var(--c-on-dark);
      padding: 40px 32px 104px;       /* Figma exato: T40 R32 B104 L32 */
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
    }
    .fc-info-head { display: flex; flex-direction: column; gap: 12px; }
    .fc-info-title { font-size: 24px; font-weight: 600; line-height: 29px; margin: 0; }
    .fc-info-lead  { font-size: 16px; font-weight: 300; line-height: 24px; margin: 0; }
    .fc-info-list  { display: flex; flex-direction: column; gap: var(--sp-3); }
    .fc-info-item  { display: flex; gap: 8px; align-items: flex-start; }
    .fc-info-item .icon {
      width: 24px; height: 24px; flex-shrink: 0;
      color: var(--c-red);
    }
    .fc-info-item .icon svg { width: 100%; height: 100%; }
    .fc-info-item .body { display: flex; flex-direction: column; gap: 4px; }
    .fc-info-item .body strong { font-size: 20px; font-weight: 600; line-height: 24px; }
    .fc-info-item .body span   { font-size: 16px; font-weight: 300; line-height: 24px; }
    .fc-form {
      background: var(--c-on-dark);
      border: 1px solid #E2DFDF;
      padding: 40px 32px;            /* Figma exato: T40 R32 B40 L32 */
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    .fc-form-title { grid-column: 1 / -1; font-size: 24px; font-weight: 600; line-height: 29px; color: #000; margin: 0; }
    .fc-field { display: flex; flex-direction: column; gap: 4px; }
    .fc-field.full { grid-column: 1 / -1; }
    .fc-field label { font-size: 16px; font-weight: 300; line-height: 24px; color: #000; }
    .fc-field input,
    .fc-field textarea {
      font: inherit;
      font-size: 14px; font-weight: 300; line-height: 21px;
      color: #3F3F3F;
      background: #FDFDFD;
      border: 1px solid #000;
      border-radius: 6px;
      padding: 14px 16px;
      width: 100%;
    }
    .fc-field textarea { min-height: 82px; resize: vertical; }
    .fc-field input::placeholder, .fc-field textarea::placeholder { color: #3F3F3F; }
    .fc-submit {
      grid-column: 1 / -1;
      justify-self: start;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 24px;
      min-height: 56px;
      white-space: nowrap;            /* texto não quebra dentro do botão */
      border: 2px solid var(--c-red);
      border-radius: 6px;
      background: radial-gradient(circle, #E11621 0%, rgba(225,22,33,.90) 50%);
      color: var(--c-on-dark);
      font-size: 20px; font-weight: 600; line-height: 24px;
      cursor: pointer;
    }
    .fc-submit svg {
      width: 24px; height: 24px;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
    }
    @media (max-width: 880px) {
      .fc-form { grid-template-columns: 1fr; }
      .fc-submit {
        width: 100%;
        justify-self: stretch;
        justify-content: center;
      }
    }


    /* ========== NOTEBOOK / SHORT VIEWPORT (≤900px altura) ==========
       Compacta padding-block e min-heights pra cada seção caber numa
       tela de notebook (≈720-900px). Aplica acima de tablet (881+). */
    @media (min-width: 881px) and (max-height: 900px) {
      /* Hero ocupa exatamente o viewport disponível abaixo do header sticky */
      .hero {
        min-height: 0;
        aspect-ratio: auto;
        height: calc(100vh - 128px);   /* viewport - (topbar 40 + header 88) */
        max-height: 720px;
      }
      .hero-inner {
        padding-top: var(--sp-6);      /* 64 (era 128) */
        padding-bottom: var(--sp-6);   /* 64 (era 128) */
        justify-content: center;
      }
      .hero-title { font-size: 40px; line-height: 48px; }
      .hero-lead  { font-size: 18px; line-height: 27px; }
      .hero-title-block { gap: var(--sp-3); }  /* 24 (era 32) */

      /* Section padding: 128 → 64 top/bottom (segmentos ainda menor pois tem 2 linhas) */
      .produtos       { padding-block: var(--sp-6); }
      .segmentos      { padding-block: var(--sp-5); }  /* 40 (2 linhas de cards) */
      .quem-somos     { padding-block: var(--sp-6); }
      .quem-somos-2   { padding-block: var(--sp-6); }
      .parceiros      { padding-block: var(--sp-6); }
      .fale-conosco   { padding-block: var(--sp-6); }

      /* Gap title → content: 80 → 40 (segmentos: 32) */
      .produtos-inner   { gap: var(--sp-5); }
      .segmentos-inner  { gap: var(--sp-4); }
      .parceiros-inner  { gap: var(--sp-5); }
      .quem-somos-inner { gap: var(--sp-5); }

      /* Segmentos: cards mais baixos pra 2 linhas caberem */
      .segmentos-grid { gap: var(--sp-3); }     /* 24 entre cards (era 32) */
      .segmentos-card-img { aspect-ratio: 291 / 180; }  /* mais larga, menos alta */
      .segmentos-card { padding-bottom: var(--sp-1); }   /* 8 (era 16) */
      .segmentos-card-label { font-size: 18px; line-height: 22px; padding-block: 4px; }

      /* Títulos centrais: 48px → 36px pra dar respiro vertical */
      .produtos-title,
      .segmentos-title,
      .parceiros-title { font-size: 36px; line-height: 43px; }

      /* Quem Somos: imagem menor pra seção caber */
      .quem-somos-image { flex: 0 0 480px; }
      .quem-somos-h2    { font-size: 32px; line-height: 38px; }
      .quem-somos-p     { font-size: 17px; line-height: 26px; }

      /* Quem Somos 2: título menor */
      .qs2-title { font-size: 36px; line-height: 43px; }
      .qs2-lead  { font-size: 17px; line-height: 26px; }
      .qs2-inner { gap: var(--sp-5); }

      /* Fale Conosco: paddings internos menores */
      .fc-info { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
      .fc-form { padding: var(--sp-4); gap: 12px; }
      .fc-field input,
      .fc-field textarea { padding: 10px 14px; }
      .fc-field textarea { min-height: 64px; }

      /* Footer: padding menor */
      .footer-main { padding: var(--sp-5) 0 var(--sp-3); }
    }

    /* ========== Footer (Frame Figma 4018:3601) ========== */
    .site-footer { background: var(--c-dark); color: var(--c-on-dark); }
    .footer-main {
      width: min(var(--workspace), calc(100% - 2 * var(--sp-2)));
      margin-inline: auto;
      padding: var(--sp-6) 0 var(--sp-5);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--sp-5);
    }
    @media (min-width: 1025px) {
      .footer-main { grid-template-columns: auto 1fr 1fr 1fr; gap: 64px; }
    }
    .footer-col h3 { font-size: 20px; font-weight: 600; line-height: 24px; margin: 0 0 8px; }
    .footer-brand { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .footer-brand img { width: 52px; height: 52px; flex-shrink: 0; }
    .footer-brand .text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
    .footer-brand .text strong { font-size: 20px; font-weight: 700; line-height: 1.2; }
    .footer-brand .footer-brand-tag { font-size: 14px; font-weight: 300; opacity: .85; }
    .footer-list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
    .footer-list a { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--c-on-dark); text-decoration: none; }
    .footer-list a:hover { color: var(--c-red); }
    .footer-contacts { display: flex; flex-direction: column; gap: 12px; }
    .footer-contact-item { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 300; line-height: 24px; color: var(--c-on-dark); text-decoration: none; }
    .footer-contact-item .icon { width: 24px; height: 24px; color: var(--c-red); flex-shrink: 0; }
    .footer-contact-item .icon svg { width: 100%; height: 100%; }
    .footer-bottom {
      padding: var(--sp-4) var(--sp-2);
      text-align: center;
      font-size: 16px; font-weight: 300; line-height: 24px;
    }

  
    /* ===== PAGINAS INTERNAS: page-hero, produto-intro, servicos ===== */
    .page-hero { position: relative; background: var(--c-dark); color: var(--c-on-dark); overflow: hidden; isolation: isolate; min-height: 276px; display: flex; align-items: center; }
    .page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
    .page-hero-overlay { position: absolute; inset: 0; background: rgba(20,20,20,.55); z-index: -1; }
    .page-hero-inner { width: min(var(--workspace), calc(100% - 2 * var(--sp-2))); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; padding-block: var(--sp-6); position: relative; z-index: 1; }
    .page-hero-title { color: #fff; font-size: 28px; font-weight: 600; line-height: 1.2; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
    .page-hero-crumb { color: #fff; opacity: .9; font-size: 14px; font-weight: 300; }
    .page-hero-crumb a:hover { color: var(--c-red); }
    @media (min-width: 881px) { .page-hero { min-height: 320px; } .page-hero-title { font-size: 48px; line-height: 57.6px; } .page-hero-crumb { font-size: 16px; } }

    .produto-intro { background: var(--c-bg); padding-block: var(--sp-7); }
    .produto-intro-inner { width: min(var(--workspace), calc(100% - 2 * var(--sp-2))); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-5); align-items: center; }
    .produto-intro-img { margin: 0; width: 100%; max-width: 513px; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-soft); box-shadow: var(--shadow); }
    .produto-intro-img img { width: 100%; height: auto; display: block; }
    .produto-intro-text { display: flex; flex-direction: column; gap: var(--sp-3); }
    .produto-intro-title { color: var(--c-text); font-size: 26px; font-weight: 600; line-height: 1.25; margin: 0; }
    .produto-intro-body  { color: var(--c-text); font-size: 16px; font-weight: 300; line-height: 1.5; margin: 0; }
    @media (min-width: 1025px) {
      .produto-intro { padding-block: var(--sp-9); }
      .produto-intro-inner { flex-direction: row; gap: var(--sp-8); align-items: center; }
      .produto-intro-img { flex: 0 0 480px; }
      .produto-intro-text { flex: 1; }
      .produto-intro-title { font-size: 40px; line-height: 48px; }
      .produto-intro-body  { font-size: 20px; line-height: 30px; }
    }

    .servicos { background: var(--c-bg-section); padding-block: var(--sp-7) var(--sp-9); }
    .servicos-inner { width: min(var(--workspace), calc(100% - 2 * var(--sp-2))); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
    .servicos-title { text-align: center; color: var(--c-text); font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0; }
    .servicos-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
    .servico-card { background: var(--c-bg); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 2px 3px rgba(0,0,0,.30); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
    .servico-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
    .servico-card-img { width: 100%; aspect-ratio: 297 / 178; object-fit: cover; display: block; }
    .servico-card-body { background: var(--c-bg-soft); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
    .servico-card-title { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--c-text); margin: 0; }
    .servico-card-desc  { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--c-text); margin: 0; }
    @media (min-width: 768px)  { .servicos-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1201px) { .servicos-grid { grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); } }
    @media (min-width: 881px) { .servicos-title { font-size: 48px; line-height: 57.6px; } }

    @media (min-width: 881px) and (max-height: 900px) {
      .produto-intro { padding-block: var(--sp-6); }
      .produto-intro-inner { gap: var(--sp-6); }
      .produto-intro-title { font-size: 32px; line-height: 38px; }
      .produto-intro-body  { font-size: 17px; line-height: 26px; }
      .servicos { padding-block: var(--sp-6); }
      .servicos-inner { gap: var(--sp-5); }
      .servicos-title { font-size: 36px; line-height: 43px; }
      .page-hero { min-height: 240px; }
      .page-hero-title { font-size: 38px; line-height: 46px; }
    }