/* =============================================================================
   Polyblu . main.css
   Pegada industrial sofisticada inspirada em Framer
   Mobile first . Cascade @layer . Sem dependencias
   ============================================================================= */

@layer reset, base, layout, components, sections, animations, utilities;

/* ============================================================================ */
/* RESET                                                                        */
/* ============================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
  /* overflow-x: clip (não hidden): clipa o estouro horizontal SEM criar
     container de scroll, que quebraria o position: sticky das seções pin */
  html, body { height: 100%; overflow-x: clip; max-width: 100%; }

  /* ===== Scrollbar personalizada: só uma barra laranja ===== */
  /* Firefox */
  html { scrollbar-width: thin; scrollbar-color: #EF3F00 transparent; }
  /* WebKit (Chrome/Edge/Safari) */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #EF3F00;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: #C53400; }

  /* ===== Lenis (scroll suave) ===== */
  /* !important vence o `html,body{height:100%}` do CSS crítico inline (unlayered),
     que impedia a Lenis de medir o conteúdo e travava o scroll */
  html.lenis, html.lenis body { height: auto !important; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; border-spacing: 0; width: 100%; }
  h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; text-wrap: balance; }
  p { text-wrap: pretty; }
}

/* ============================================================================ */
/* BASE                                                                         */
/* ============================================================================ */
@layer base {

  body {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "kern", "liga";
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-strong);
  }
  h1 { font-size: var(--fs-5xl); letter-spacing: var(--tracking-tightest); font-weight: var(--fw-semibold); }
  h2 { font-size: var(--fs-4xl); letter-spacing: var(--tracking-tightest); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
  h5 { font-size: var(--fs-lg); }
  h6 { font-size: var(--fs-base); }

  p { color: var(--text-soft); }
  strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); }

  a { color: var(--primary); transition: color var(--t-fast); }
  a:hover { color: var(--primary-bright); }
  a:focus-visible {
    outline: 2px solid var(--primary-bright);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--primary); color: var(--text-inverse); }

  /* Form */
  input, textarea, select {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    font-size: 16px;
  }
  input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-bright);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-bright) 14%, transparent);
    background: var(--bg-card);
  }
  label {
    display: block;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: var(--fs-sm);
  }
  textarea { min-height: 9rem; resize: vertical; }
}

/* ============================================================================ */
/* LAYOUT                                                                       */
/* ============================================================================ */
@layer layout {

  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
  }
  .container-narrow { max-width: var(--container-narrow); }
  .container-wide   { max-width: var(--container-wide); }

  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--bg-dark);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-5);
    z-index: var(--z-modal);
    border-radius: var(--r-md);
    font-weight: var(--fw-semibold);
  }
  .skip-link:focus { top: var(--space-4); }

  main { display: block; min-height: 70vh; }

  section {
    position: relative;
    padding-block: clamp(4rem, 9vw, 8rem);
  }
  section.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
}

/* ============================================================================ */
/* COMPONENTS                                                                   */
/* ============================================================================ */
@layer components {

  /* ============ Buttons ============ */
  /* ============================================================
     Botões — padrão único do site (design da seção Formulação
     customizada): cápsula radius 6 + quadradinho laranja com seta.
     Primário = preto sólido. Secundário/ghost = outline transparente.
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.7rem 0.8rem 0.7rem 1.15rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
  }
  .btn-lg { padding: 0.85rem 0.95rem 0.85rem 1.4rem; font-size: var(--fs-base); }
  .btn-sm { padding: 0.5rem 0.55rem 0.5rem 0.9rem; font-size: var(--fs-xs); }

  /* Quadradinho laranja com seta (gerado via CSS pra valer em TODOS os botões) */
  .btn-primary::after,
  .btn-secondary::after,
  .btn-ghost::after {
    content: "";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7H11M11 7L7 3M11 7L7 11' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--t-base);
  }
  .btn-sm::after { width: 22px; height: 22px; }
  .btn-primary:hover::after,
  .btn-secondary:hover::after,
  .btn-ghost:hover::after { transform: translateX(3px); }
  /* setas/ícones inline antigos dentro dos botões saem (o quadradinho assume) */
  /* !important vence o svg{display:block} do CSS crítico inline (unlayered) */
  .btn-primary > svg,
  .btn-secondary > svg,
  .btn-ghost > svg { display: none !important; }

  /* Primário: cápsula preta (seletores compostos vencem o critical CSS inline) */
  .btn-primary,
  a.btn-primary,
  button.btn-primary {
    background-color: #151515 !important;
    color: #FFFFFF !important;
    border-color: #151515;
  }
  .btn-primary:hover,
  .btn-primary:focus-visible,
  a.btn-primary:hover,
  a.btn-primary:focus-visible,
  button.btn-primary:hover,
  button.btn-primary:focus-visible {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #000000;
  }
  .btn-primary:active,
  a.btn-primary:active,
  button.btn-primary:active {
    background-color: #000000 !important;
    border-color: #000000;
    color: #FFFFFF !important;
  }

  /* Secundário e ghost: outline transparente (o "botão transparente" do padrão) */
  .btn-secondary,
  a.btn-secondary,
  button.btn-secondary,
  .btn-ghost,
  a.btn-ghost,
  button.btn-ghost {
    background-color: transparent !important;
    color: #151515 !important;
    border-color: rgba(21, 21, 21, 0.25);
  }
  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  a.btn-secondary:hover,
  a.btn-secondary:focus-visible,
  button.btn-secondary:hover,
  button.btn-secondary:focus-visible,
  .btn-ghost:hover,
  .btn-ghost:focus-visible,
  a.btn-ghost:hover,
  a.btn-ghost:focus-visible,
  button.btn-ghost:hover,
  button.btn-ghost:focus-visible {
    background-color: rgba(21, 21, 21, 0.04) !important;
    color: #151515 !important;
    border-color: #151515;
  }
  .btn-secondary:active,
  a.btn-secondary:active,
  button.btn-secondary:active,
  .btn-ghost:active,
  a.btn-ghost:active,
  button.btn-ghost:active {
    background-color: rgba(21, 21, 21, 0.08) !important;
    color: #151515 !important;
  }

  /* Em fundo ESCURO (hero sobre vídeo): primário continua preto (contrasta pelo
     quadradinho + texto branco); outline vira branco pra não sumir */
  .hero-actions .btn-secondary,
  .hero-actions a.btn-secondary {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.45);
  }
  .hero-actions .btn-secondary:hover,
  .hero-actions a.btn-secondary:hover,
  .hero-actions .btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF;
  }

  /* Botao link (texto so) — intocado, segue o padrão antigo */
  .btn-link {
    background: transparent;
    color: var(--primary);
    padding-inline: var(--space-1);
    border: 0;
    border-radius: 0;
    border-bottom: 1.5px solid currentColor;
    padding-block: 0.5rem;
  }
  .btn-link:hover,
  .btn-link:focus-visible {
    color: var(--primary-deep);
    transform: none;
  }

  /* ============ Eyebrow chip ============ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-soft);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--r-full);
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .eyebrow-on-dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-inverse-soft);
  }

  /* ============ Header ============ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(250, 251, 253, 0.78);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid transparent;
    transition: background var(--t-base), border-color var(--t-base), padding var(--t-base);
  }
  .site-header.is-scrolled {
    background: rgba(250, 251, 253, 0.92);
    border-bottom-color: var(--border);
  }

  /* Header overlay: transparente sobre a hero de vídeo (home) */
  .site-header.is-overlay {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header.is-overlay.is-scrolled {
    background: rgba(250, 251, 253, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom-color: var(--border);
  }
  /* Home (Figma): header alinhado à largura do conteúdo da hero.
     !important pra vencer o .header-inner do CSS crítico inline (unlayered) */
  @media (min-width: 1024px) {
    .site-header.is-overlay .header-inner { max-width: 1460px !important; }
  }
  .site-header.is-overlay:not(.is-scrolled) .header-menu-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .site-header.is-overlay:not(.is-scrolled) .header-menu-toggle span { background: #FFFFFF; }
  .site-header.is-overlay:not(.is-scrolled) .header-menu-icon { box-shadow: 0 -6px 0 #FFFFFF, 0 6px 0 #FFFFFF; }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-5);
    gap: var(--space-6);
    transition: padding var(--t-base);
  }
  .site-header.is-scrolled .header-inner { padding-block: var(--space-4); }

  .header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    line-height: 1;
    flex-shrink: 0;
  }
  .header-logo-img {
    height: clamp(38px, 4.5vw, 48px);
    width: auto;
    display: block;
    transition: transform var(--t-fast);
  }
  .header-logo:hover .header-logo-img {
    transform: translateY(-1px);
  }

  .header-nav { display: none; align-items: center; gap: var(--space-6); }
  /* Nav vira pílula branca (Figma): Inter 12px, gap 25px, radius 32px */
  .header-nav-list {
    display: flex;
    gap: 25px;
    align-items: center;
    background: #FFFFFF;
    padding: 10px 25px;
    border-radius: 32px;
  }
  .header-nav-item { position: relative; }
  .header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2D2D2D;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
    padding: 0;
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
    letter-spacing: normal;
    white-space: nowrap;
  }
  .header-nav-link:hover {
    color: var(--primary);
    background: transparent;
  }
  .header-nav-link.is-current {
    color: var(--primary);
    background: transparent;
  }
  .header-nav-link-dropdown { padding-right: 0.5rem; }
  .header-nav-chevron {
    transition: transform var(--t-base);
    margin-top: 1px;
  }
  .has-dropdown.is-open .header-nav-chevron {
    transform: rotate(180deg);
  }

  /* Mega menu dropdown */
  /* Megamenu full-width estilo Apple: painel branco desce do topo + resto da tela com blur leve.
     Abre no CLIQUE (classe .is-open via JS), não no hover. */
  .header-dropdown {
    position: fixed;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(7px) saturate(106%);
    -webkit-backdrop-filter: blur(7px) saturate(106%);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
  }
  .has-dropdown.is-open .header-dropdown {
    opacity: 1;
    pointer-events: auto;   /* clicar no backdrop (área borrada) fecha o menu */
  }
  .has-dropdown.is-open .header-dropdown-inner {
    pointer-events: auto;
    transform: translateY(0);   /* painel desce pro lugar */
  }
  .header-dropdown-inner {
    pointer-events: none;
    background: #FFFFFF;
    box-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.16);
    padding: clamp(5.5rem, 9vh, 7.5rem) clamp(1.75rem, 6vw, 6rem) clamp(2.5rem, 6vh, 4rem);
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    transform: translateY(-100%);
    transition: transform var(--t-slow) var(--ease-out);
  }
  .header-dropdown-intro {
    padding-right: var(--space-6);
    border-right: 1px solid var(--border);
  }
  .header-dropdown-eyebrow {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--primary);
    margin-bottom: var(--space-3);
  }
  .header-dropdown-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-tighter);
  }
  .header-dropdown-lead {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-5);
  }
  .header-dropdown-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap var(--t-fast), color var(--t-fast);
  }
  .header-dropdown-cta:hover {
    color: var(--primary-deep);
    gap: var(--space-3);
  }
  .header-dropdown-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1) clamp(1rem, 3vw, 3rem);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 1100px) {
    .header-dropdown-list { grid-template-columns: repeat(3, 1fr); }
  }
  .header-dropdown-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    align-items: flex-start;
  }
  .header-dropdown-item:hover {
    background: var(--primary-softer);
  }
  .header-dropdown-item-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: color var(--t-fast);
  }
  .header-dropdown-item:hover .header-dropdown-item-icon {
    color: var(--primary-deep);
  }
  .header-dropdown-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .header-dropdown-item-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
  }
  .header-dropdown-item-name sup {
    font-size: 0.6em;
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    margin-left: 1px;
  }
  .header-dropdown-item-desc {
    font-size: var(--fs-2xs);
    color: var(--text-soft);
    line-height: var(--lh-snug);
  }

  .header-cta-group {
    display: flex;
    gap: var(--space-2);
  }
  /* CTA do header segue o padrão global de botões (cápsula preta + quadradinho) */

  .header-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    gap: 5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
  }
  .header-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-strong);
    border-radius: 2px;
    transition: transform var(--t-base);
  }
  .header-menu-icon {
    box-shadow: 0 -6px 0 var(--text-strong), 0 6px 0 var(--text-strong);
  }

  @media (min-width: 1024px) {
    .header-menu-toggle { display: none; }
    /* contents: promove a lista e o CTA a filhos diretos do header-inner,
       resultando em logo | nav-pílula | CTA (justify-between, igual Figma) */
    .header-nav { display: contents; }
  }

  @media (max-width: 1023.98px) {
    .header-nav {
      display: none;
      position: fixed;
      inset: 0 0 0 auto;
      width: min(86%, 360px);
      background: var(--bg-card);
      padding: var(--space-20) var(--space-6) var(--space-6);
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-4);
      box-shadow: var(--shadow-2xl);
      overflow-y: auto;
      border-left: 1px solid var(--border);
    }
    .header-nav.is-open { display: flex; }
    .header-nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: transparent;
      border: 0;
      padding: 0;
    }
    .header-nav-item { border-bottom: 1px solid var(--border-soft); }
    .header-nav-link {
      display: flex;
      justify-content: space-between;
      padding: var(--space-4) var(--space-3);
      font-size: var(--fs-base);
      border-radius: var(--r-md);
      text-transform: none;
      letter-spacing: var(--tracking-tight);
      font-weight: var(--fw-medium);
    }
    .header-nav-chevron { display: none; }
    .header-dropdown {
      position: static;
      inset: auto;
      z-index: auto;
      transform: none;
      box-shadow: none;
      border: 0;
      border-radius: 0;
      width: auto;
      padding: 0 var(--space-3) var(--space-3);
      background: var(--bg-soft);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 1;
      pointer-events: auto;
      display: none;
    }
    .has-dropdown.is-open .header-dropdown { display: block; }
    .header-dropdown-inner {
      display: block;
      pointer-events: auto;
      background: transparent;
      box-shadow: none;
      padding: 0;
    }
    .header-dropdown-intro {
      border-right: 0;
      border-bottom: 1px solid var(--border);
      padding-right: 0;
      padding-bottom: var(--space-4);
      margin-bottom: var(--space-4);
    }
    .header-dropdown-list {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .header-cta-group {
      flex-direction: column;
      margin-left: 0;
      margin-top: var(--space-4);
    }
    .header-cta-group .btn { width: 100%; }
  }

  /* ============ Footer (minimal, replicado 1:1) ============ */
  .site-footer {
    background: #0A0A0A;
    color: var(--text-inverse-soft);
    margin-top: var(--space-32);
    --footer-line: rgba(255, 255, 255, 0.1);
    /* fica acima da imagem fixa da Hero (senão a Hero pinta por cima e o footer "some") */
    position: relative;
    z-index: 1;
  }
  /* "lente" sobre o vão acima do footer: desfoca a imagem fixa da Hero que aparece
     pela janela do margin-top (backdrop-filter desfoca o que está pintado atrás) */
  .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--space-32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
  }
  /* subpáginas (sem a hero fixa atrás): a janela mostra a MESMA imagem já
     pré-desfocada (gerada do hero-home). background-attachment: fixed prende a
     imagem na VIEWPORT, então a janela revela um pedaço diferente a cada scroll,
     a mesma sensação de "espiar" da home */
  body:not(:has(.hero-media)) .site-footer::before {
    background: url("/assets/img/hero/hero-home-blur.jpg") center / cover no-repeat;
    background-attachment: fixed;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* !important vence o a{color:#EF3F00} do CSS crítico (sem layer): footer todo em branco/cinza, sem laranja */
  .site-footer a { color: var(--text-inverse-soft) !important; transition: color var(--t-fast); }
  .site-footer a:hover { color: #FFFFFF !important; }
  /* shell centralizado com bordas laterais + glow radial no topo (md:border-x) */
  .footer-shell {
    position: relative;
    width: 100%;
    background: radial-gradient(36% 65% at 18% 0%, rgba(255, 255, 255, 0.05), transparent);
  }
  .footer-rule { display: block; width: 100%; height: 1px; background: var(--footer-line); }
  /* grid: marca (largo) + 3 colunas de navegação */
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-10) clamp(1.5rem, 2vw, 2.75rem);
  }
  @media (min-width: 720px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); }
  }
  /* marca: logo + tagline mono + endereço + botões de ícone */
  .footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
  .footer-logo-img {
    height: 50px !important;   /* !important vence o img{height:auto} do CSS crítico (sem layer) */
    width: auto !important;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }
  .footer-tagline {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-inverse-soft);
    max-width: 38ch;
    text-wrap: balance;
  }
  .footer-address {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    max-width: 44ch;
  }
  .footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
  .footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--footer-line);
    border-radius: var(--r-sm);
    color: var(--text-inverse-soft);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  }
  .footer-social-btn svg { width: 1rem; height: 1rem; }
  .footer-social-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.2);
  }
  /* colunas de navegação: label minúsculo + links (hover sublinha) */
  .footer-nav { display: flex; flex-direction: column; }
  .footer-nav-label {
    font-family: var(--font-sans);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
  }
  .footer-nav-list { display: flex; flex-direction: column; gap: var(--space-1); }
  .footer-nav-list a {
    width: max-content;
    padding-block: 2px;
    font-size: var(--fs-sm);
    color: var(--text-inverse-soft);
    transition: color var(--t-fast);
  }
  .footer-nav-list a:hover { color: var(--text-inverse); text-decoration: underline; }
  /* rodapé legal: fino, centralizado */
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) clamp(1.5rem, 2vw, 2.75rem) var(--space-6);
    text-align: center;
  }
  .footer-legal {
    font-size: var(--fs-xs);
    font-weight: 300;
    color: var(--text-muted);
  }
  .footer-legal-links {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-legal-links a { font-size: var(--fs-xs); color: var(--text-muted); }
  .footer-legal-links a:hover { color: var(--text-inverse-soft); }

  /* ============ Breadcrumb ============ */
  .breadcrumb {
    padding-block: var(--space-6);
    font-size: var(--fs-sm);
  }
  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--text-muted);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .breadcrumb-item { display: inline-flex; align-items: center; }
  .breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    opacity: 0.5;
  }
  .breadcrumb-item a {
    color: var(--text-muted);
    transition: color var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
  }
  .breadcrumb-item a:hover { color: var(--primary); }
  .breadcrumb-home a { padding: 4px 6px; border-radius: var(--r-sm); }
  .breadcrumb-home a:hover { background: var(--primary-softer); }
  .breadcrumb-icon { display: inline-flex; }
  .breadcrumb-home-label { display: inline; }
  @media (max-width: 480px) {
    .breadcrumb-home-label { display: none; }
  }
  .breadcrumb-current { color: var(--text); font-weight: var(--fw-medium); }

  /* ============ Card ============ */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  }
  .card-hover {
    cursor: pointer;
  }
  .card-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow var(--t-base);
    pointer-events: none;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
  }
  .card-hover:hover::after {
    box-shadow: 0 0 0 1.5px var(--text-strong);
  }

  .card-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
    color: inherit;
    height: 100%;
  }

  .card-illustration {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--gradient-primary-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: var(--space-2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-illustration svg { width: 100%; height: 100%; }

  /* Icone destacado (substitui illustration nos cards de produto/aplicacao) */
  .card-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-softer);
    color: var(--primary);
    border-radius: var(--r-md);
    border: 1px solid var(--primary-soft);
    margin-bottom: var(--space-5);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
  }
  .card-icon svg { width: 28px; height: 28px; }
  .card-hover:hover .card-icon {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    transform: translateY(-2px) rotate(-3deg);
  }

  /* ============ Processo: timeline com trilho de progresso no scroll ============ */
  .ptl { padding-block: clamp(3rem, 7vh, 5rem) clamp(2rem, 5vh, 3.5rem); }
  .ptl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  /* trilho: hairline cinza com preenchimento LARANJA que cresce com o scroll */
  .ptl-rail {
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
  }
  .ptl-fill {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 0%;
    background: var(--primary);
    transition: height 0.2s linear;
  }
  .ptl-step {
    position: relative;
    padding: clamp(1.75rem, 4vh, 3rem) 0 clamp(2rem, 4.5vh, 3.25rem) clamp(2.75rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--border-soft);
  }
  .ptl-step:last-child { border-bottom: none; }
  /* nó: quadradinho girado que ACENDE laranja quando a etapa passa do meio da tela */
  .ptl-node {
    position: absolute;
    left: 0;
    top: clamp(2.4rem, 5vh, 3.7rem);
    width: 11px;
    height: 11px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    transform: rotate(45deg);
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
  }
  .ptl-step.is-on .ptl-node {
    background: var(--primary);
    border-color: var(--primary);
    transform: rotate(45deg) scale(1.25);
  }
  /* número fantasma gigante à direita (profundidade, estilo editorial) */
  .ptl-ghost {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(5rem, 3rem + 9vw, 11rem);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--accent-soft);
    pointer-events: none;
    user-select: none;
  }
  .ptl-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: var(--space-4);
  }
  /* chip do ícone: cor chapada (rampa do laranja via --ic, igual o Sobre) */
  .ptl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--ic, var(--primary));
    color: #FFFFFF;
    transition: transform 0.45s var(--ease-spring);
  }
  .ptl-step:hover .ptl-icon { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
  .ptl-icon svg { width: 26px; height: 26px; }
  .ptl-eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: var(--space-1);
  }
  .ptl-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.1;
    color: var(--text-strong);
    margin: 0;
  }
  .ptl-text {
    position: relative;
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    max-width: 62ch;
    margin: 0;
  }
  @media (max-width: 640px) {
    .ptl-ghost { display: none; }
    .ptl-icon { width: 46px; height: 46px; }
    .ptl-icon svg { width: 22px; height: 22px; }
  }

  .card-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
  }
  .card-text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
  }
  .card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--primary-bright);
    letter-spacing: var(--tracking-tight);
  }
  .card-arrow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform var(--t-fast);
  }
  .card-hover:hover .card-arrow { transform: translateX(4px); }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
  }
  .card-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
  }

  /* ============ Section header ============ */
  .section-header {
    max-width: 720px;
    margin-bottom: var(--space-14);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .section-header-center {
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }
  .section-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-tight);
  }
  .section-lead {
    font-size: var(--fs-lg);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    max-width: 60ch;
  }
  .section-header-center .section-lead { margin-inline: auto; }

  /* ============ Form ============ */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 720px;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  @media (min-width: 640px) {
    .form-row { grid-template-columns: 1fr 1fr; }
  }
  .form-actions { margin-top: var(--space-3); }

  /* ============ Tag / Chip ============ */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
  }
  .chip-primary {
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary-deep);
    font-weight: var(--fw-semibold);
  }
  .chip-accent {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--primary);
    font-weight: var(--fw-semibold);
  }
  .chip-dark {
    background: var(--text-strong);
    border-color: transparent;
    color: var(--text-inverse);
  }
  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ============================================================================ */
/* SECTIONS                                                                     */
/* ============================================================================ */
@layer sections {

  /* ============ Hero ============ */
  /* Hero cinematográfica: vídeo de fundo, altura exata da viewport,
     header transparente por cima e strip de cards fechando a seção */
  .hero {
    position: relative;
    overflow: hidden;
    /* transparente: deixa ver a imagem de fundo fixa (.hero-media) */
    background: transparent;
    color: var(--text-inverse);
    /* zera o padding-block global de section (clamp 4-8rem) que empurrava
       o conteúdo 128px pra baixo; o espaçamento é controlado no container */
    padding-block: 0;
    /* min-height (não height fixo): a seção cresce se o conteúdo passar da
       viewport, evitando que texto e cards se sobreponham */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  /* Wrapper das seções pós-hero: fundo opaco + z-index pra cobrir a
     imagem fixa conforme sobe na rolagem */
  .page-flow {
    position: relative;
    z-index: 1;
    background: var(--bg);
  }
  /* FIXA na viewport: o conteúdo scrolla por cima dela */
  .hero-media {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0F0F0F;
  }
  .hero-media img,
  .hero-media video {
    /* !important vence o `img{height:auto}` do CSS crítico inline (unlayered) */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* imagem flush à esquerda: borda esquerda rente à lateral do site */
    object-position: left center;
  }
  /* Vídeo limpo, sem camada escura por cima (a pedido do cliente) */
  @media (prefers-reduced-motion: reduce) {
    .hero-media video { display: none; }
    .hero { background: var(--gradient-dark); }
  }

  /* Grade decorativa: quadrados de verdade com stroke branco 5%; células
     sorteadas via JS ganham fundo 5% + desfoque do vídeo, trocando a cada 1s */
  .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 20), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 12), 1fr);
    pointer-events: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  .hero-grid-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 900ms ease, backdrop-filter 900ms ease, -webkit-backdrop-filter 900ms ease;
  }
  .hero-grid-cell.is-active {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-grid-cell { transition: none; }
  }
  .hero > .container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1.75rem, 4.5vh, 3.25rem);
    max-width: 1460px;
    padding-top: clamp(5rem, 11vh, 7rem);
    padding-bottom: clamp(1.25rem, 4vh, 2.75rem);
  }
  /* flex: 1 0 auto faz o bloco crescer pra ocupar o espaço acima dos cards;
     justify-content: center centraliza o texto vertical (sem colar no topo) */
  .hero-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.875rem, 2vh, 18px);
    max-width: 850px;
    text-align: left;
  }
  /* Eyebrow vidro (Figma): blur 18.5px, bg preto 27%, borda branca, radius 42px */
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.27);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18.5px);
    -webkit-backdrop-filter: blur(18.5px);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
  }
  .hero-eyebrow-icon {
    flex-shrink: 0;
    width: 16px;
    height: 15px;
    color: #EF3F00;
    display: inline-flex;
  }
  .hero-eyebrow-icon svg { width: 100%; height: 100%; display: block; }
  /* .hero-visual-caption segue em uso no layout de aplicações */
  .hero-visual-caption {
    position: absolute;
    left: var(--space-5);
    bottom: var(--space-5);
    z-index: 3;
    padding: var(--space-2) var(--space-4);
    background: rgba(10, 22, 40, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-inverse);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--r-full);
    border: 1px solid rgba(255,255,255,0.15);
    max-width: calc(100% - var(--space-10));
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 32px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: #FFFFFF;
    margin: 0;
    max-width: 850px;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.22);
  }
  .hero-title em {
    font-style: normal;
    color: #EF3F00;
  }
  .hero-lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 16px);
    font-weight: 500;
    line-height: 1.45;
    color: #FFFFFF;
    max-width: 470px;
  }
  .hero-actions {
    margin: 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  /* Strip de 4 cards (Figma): [imagem][stats][stats][imagem], glassmorphism */
  .hero-strip {
    flex-shrink: 0;
    display: grid;
    /* minmax(0,...): sem isso o track nao encolhe abaixo do conteudo e o 2o card
       vaza pra fora da tela no celular */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
  }
  .hero-card {
    background: rgba(255, 255, 255, 0.31);
    backdrop-filter: blur(8.95px);
    -webkit-backdrop-filter: blur(8.95px);
    border-radius: 5px;
  }
  .hero-card-img {
    height: 184px;
    padding: 8px;
    overflow: hidden;
  }
  /* !important: vence o `img,picture{height:auto}` do CSS crítico inline
     (unlayered), que fazia a imagem crescer pela proporção e estourar o card */
  .hero-card-img picture,
  .hero-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
    display: block;
  }
  .hero-card-stats {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 0 20px;
  }
  .hero-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hero-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    color: #212121;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .hero-stat-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: #212121;
    text-transform: uppercase;
    line-height: 1.1;
  }
  @media (max-width: 859.98px) {
    .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .hero-card-img { height: 130px; }
    .hero-card-stats { height: auto; padding: 16px 18px; gap: 12px; }
    .hero-stat-value { font-size: 24px; }
    .hero-stat-row { flex-wrap: wrap; }
  }
  /* celular estreito: os 2 cards de números empilham, senão o texto fica espremido */
  @media (max-width: 560px) {
    .hero-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  }

  /* ============ Marquee (barrinha de termos em loop infinito) ============ */
  .marquee {
    overflow: hidden;
    width: 100%;
    padding-block: clamp(0.875rem, 2vw, 1.5rem);
    border-block: 1px solid var(--border);
    -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-track {
    display: inline-flex;
    width: max-content;
    animation: marquee-scroll 38s linear infinite;
    will-change: transform;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .marquee-item {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.625rem);
    font-weight: 500;
    color: var(--text-strong);
    white-space: nowrap;
  }
  .marquee-sep {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    margin-inline: clamp(1.5rem, 3vw, 2.5rem);
  }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
  }

  /* ============ Statement (frase de impacto, fundo claro padrão) ============ */
  .statement {
    position: relative;
    overflow: hidden;          /* clipa o globo pra mostrar só metade */
    background: #FFFFFF;        /* mesmo branco da seção de produtos, sem emenda */
    color: var(--text-strong);
    min-height: clamp(560px, 82vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(4rem, 10vh, 7rem);
  }
  /* Rodapé que dissolve o globo: gradiente branco→transparente de baixo pra cima,
     escondendo o corte seco do globo embaixo */
  .statement::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44%;
    background: linear-gradient(to top, #FFFFFF 14%, rgba(255, 255, 255, 0));
    z-index: 0;
    pointer-events: none;
  }
  /* Globo de fundo (cobe): grande, metade visível (clipado), apagado, arcos do Brasil */
  .statement-globe {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(120vh, 1000px);
    aspect-ratio: 1 / 1;
    left: 50%;
    bottom: -52%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 1.4s var(--ease-out);
  }
  .statement-globe.is-ready { opacity: 0.16; }
  .statement-globe canvas { width: 100%; height: 100%; display: block; }
  @media (max-width: 768px) {
    .statement-globe { width: 135vw; bottom: -34%; }
    .statement-globe.is-ready { opacity: 0.12; }
  }
  .statement-inner {
    position: relative;
    z-index: 1;                /* frase acima do globo */
    padding-inline: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
  }
  .statement-mark {
    width: 10px;
    height: 10px;
    background: var(--primary);
    flex-shrink: 0;
  }
  .statement-text {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1rem + 4.2vw, 4.75rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-strong);
    max-width: 22ch;
    text-wrap: balance;
  }
  .statement-accent { color: var(--primary); }
  /* Moldura técnica: as linhas da headline ESTENDEM até as bordas da tela (cruz/grade),
     clipadas pelo overflow da seção, com quadradinhos pretos nas interseções e um
     "raio" preto correndo por cada linha em tempos diferentes. */
  .statement-frame {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.75rem, 5vw, 4rem);
  }
  .frame-line {
    position: absolute;
    background: rgba(0, 0, 0, 0.13);
    pointer-events: none;
    overflow: hidden;
  }
  .frame-line--top, .frame-line--bottom { left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; }
  .frame-line--top { top: 0; }
  .frame-line--bottom { bottom: 0; }
  .frame-line--left, .frame-line--right { top: 50%; transform: translateY(-50%); height: 100vh; width: 1px; }
  .frame-line--left { left: 0; }
  .frame-line--right { right: 0; }
  /* o raio: um segmento preto que corre pela linha (clipado pelo overflow da linha) */
  .frame-line::after { content: ""; position: absolute; }
  .frame-line--top::after, .frame-line--bottom::after {
    top: 0; left: 0; height: 100%; width: 22vw;
    background: linear-gradient(90deg, transparent, #000 50%, transparent);
    animation: statement-beam-h 5s linear infinite;
  }
  .frame-line--left::after, .frame-line--right::after {
    left: 0; top: 0; width: 100%; height: 28vh;
    background: linear-gradient(180deg, transparent, #000 50%, transparent);
    animation: statement-beam-v 5s linear infinite;
  }
  .frame-line--right::after { animation-delay: 1.25s; }
  .frame-line--bottom::after { animation-delay: 2.5s; }
  .frame-line--left::after { animation-delay: 3.75s; }
  @keyframes statement-beam-h { from { transform: translateX(-22vw); } to { transform: translateX(100vw); } }
  @keyframes statement-beam-v { from { transform: translateY(-28vh); } to { transform: translateY(100vh); } }
  /* quadradinhos pretos nas interseções (quinas da moldura) */
  .frame-corner {
    position: absolute;
    z-index: 1;
    width: 7px;
    height: 7px;
    background: #000000;
  }
  .frame-corner--tl { top: -3px; left: -3px; }
  .frame-corner--tr { top: -3px; right: -3px; }
  .frame-corner--bl { bottom: -3px; left: -3px; }
  .frame-corner--br { bottom: -3px; right: -3px; }
  @media (prefers-reduced-motion: reduce) { .frame-line::after { animation: none; opacity: 0; } }

  /* ============ Slider de produtos: pin 100vh, scroll troca o produto ============ */
  .commodities {
    position: relative;
    /* altura = nº de slides * fator → "trilho" pro pin segurar enquanto troca */
    height: calc(var(--slides, 8) * 32vh);
    padding-block: 0;
    background: #FFFFFF;
  }
  .commodities-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .commodities-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vh, 1.75rem);
    /* sem padding lateral: o palco vai 100% da largura; título e caixa
       recebem a margem lateral individualmente */
    padding: clamp(6rem, 13vh, 8rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  }
  .commodities-head { padding-inline: clamp(1.5rem, 3.2vw, 3.25rem); }
  .commodities-box { margin-inline: clamp(1.5rem, 3.2vw, 3.25rem); }
  /* Grade decorativa preta (fade-in quando a seção trava no pin) */
  .commodities-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 16), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 9), 1fr);
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms var(--ease-out);
    border-top: 1px solid rgba(0, 0, 0, 0.015);
    border-left: 1px solid rgba(0, 0, 0, 0.015);
  }
  .commodities.is-pinned .commodities-grid { opacity: 1; }
  .commodities-grid-cell {
    border-right: 1px solid rgba(0, 0, 0, 0.015);
    border-bottom: 1px solid rgba(0, 0, 0, 0.015);
    transition: background-color 900ms var(--ease-out);
  }
  .commodities-grid-cell.is-active { background-color: rgba(0, 0, 0, 0.08); }
  /* Link "Ver todos" abaixo do texto de apoio */
  .commodities-link { display: inline-flex; margin-top: var(--space-6); }
  .commodities-head { flex-shrink: 0; }
  .commodities-title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 0.95rem + 1.2vw, 2rem);
    font-weight: 500;
    line-height: 1.12;
    color: var(--text-strong);
    max-width: 20ch;
  }
  .commodities-lead {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
    line-height: 1.45;
    color: var(--text-soft);
    max-width: 460px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Palco: slides absolutos que deslizam (o JS define o transform por offset) */
  .commodities-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
  .commodity-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    /* o slide inteiro NÃO é clicável — só a imagem ativa é (regra abaixo) */
    pointer-events: none;
    will-change: transform, filter, opacity;
    transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out), opacity 700ms var(--ease-out);
  }
  /* Vista do slide: container retangular da foto + ficha técnica ao lado */
  .commodity-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3.5vw, 3.5rem);
    height: 100%;
    /* largura contida: nunca encosta nas setas de navegação do palco */
    width: 100%;
    max-width: min(860px, 62vw);
    margin-inline: auto;
  }
  .commodity-media {
    position: relative;
    flex: 0 0 auto;
    height: min(100%, 420px);
    aspect-ratio: 4 / 5;
    perspective: 900px;
  }
  /* só o container do produto ativo recebe hover/clique (não o palco em volta) */
  .commodity-slide.is-active .commodity-media { pointer-events: auto; cursor: pointer; }
  /* o "fio" em volta + a foto do material preenchendo o retângulo */
  .commodity-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    background: var(--bg-soft);
    transition: transform 300ms var(--ease-out), box-shadow var(--t-base);
    transform-origin: center center;
    will-change: transform;
  }
  .commodity-media:hover .commodity-card { box-shadow: var(--shadow-lg); }
  .commodity-card img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--ease-out);
  }
  .commodity-media:hover .commodity-card img { transform: scale(1.06); }

  /* Ficha técnica ao lado do container */
  .commodity-specs {
    flex: 0 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.5vh, 1rem);
  }
  .commodity-specs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }
  .commodity-specs-sq {
    width: 6px;
    height: 6px;
    background: var(--primary);
    display: inline-block;
  }
  .commodity-specs-list { display: flex; flex-direction: column; }
  .commodity-specs-row {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 0.75rem;
    align-items: baseline;
    padding-block: clamp(0.45rem, 1.1vh, 0.7rem);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .commodity-specs-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  .commodity-specs-k {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }
  .commodity-specs-v {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
    line-height: 1.35;
  }
  @media (max-width: 860px) {
    /* o limite de 62vw existe só pra não encostar nas setas do desktop */
    .commodity-view {
      flex-direction: column;
      gap: clamp(0.75rem, 2vh, 1.25rem);
      max-width: 100%;
      padding-inline: clamp(1.25rem, 5vw, 2rem);
    }
    .commodity-media { height: min(58%, 300px); }
    .commodity-specs { flex: 0 0 auto; width: 100%; max-width: 420px; }
    .commodity-specs-eyebrow { display: none; }
    .commodity-specs-row:nth-child(n+4) { display: none; }
  }
  /* Setas: somem no 1º (esquerda) e no último (direita) */
  .commodity-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-strong);
    background: #FFFFFF;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  }
  .commodity-arrow:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
  .commodity-arrow-prev { left: clamp(1rem, 13vw, 15rem); }
  .commodity-arrow-next { right: clamp(1rem, 13vw, 15rem); }
  .commodities.is-first .commodity-arrow-prev { opacity: 0; pointer-events: none; }
  .commodities.is-last .commodity-arrow-next { opacity: 0; pointer-events: none; }
  /* (bloco antigo de crosshair removido — estava duplicado e sobrescrevendo o glow laranja) */

  /* Caixa compacta (~135px): borda fina preta translúcida, fundo branco,
     barra laranja no topo, 2 colunas (apoio | nome+desc) com divisória */
  .commodities-box {
    position: relative;
    flex-shrink: 0;
    height: 135px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
    /* garante que a divisória do meio não passe da altura da caixa */
    overflow: hidden;
  }
  @media (min-width: 720px) {
    .commodities-box { grid-template-columns: 0.95fr 1.05fr; }
  }
  /* barra de progresso laranja deslizando sobre a borda de cima */
  .commodities-progress {
    position: absolute;
    top: 0;
    height: 3px;
    left: calc(var(--idx, 0) / var(--slides) * 100%);
    width: calc(100% / var(--slides));
    background: var(--primary);
    transition: left 450ms var(--ease-out);
  }
  .commodities-box-left {
    padding: clamp(0.75rem, 1.6vh, 1.1rem) clamp(1.25rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    min-width: 0;
    overflow: hidden;
  }
  .commodities-link { display: inline-flex; margin-top: 0; align-self: flex-start; }
  .commodities-info {
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    min-width: 0;
  }
  @media (min-width: 720px) {
    .commodities-info { border-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.12); }
  }
  .commodity-text {
    position: absolute;
    inset: 0;
    padding: clamp(0.875rem, 2vh, 1.5rem) clamp(1.25rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  }
  .commodity-text.is-active { opacity: 1; visibility: visible; transform: none; }
  .commodity-name {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1rem + 1vw, 2rem);
    font-weight: 500;
    color: var(--text-strong);
    line-height: 1.05;
    margin-bottom: var(--space-2);
  }
  .commodity-desc {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    line-height: 1.4;
    color: var(--text-soft);
    max-width: 480px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .commodities-nav { display: flex; align-items: center; gap: var(--space-6); flex-shrink: 0; }
  .commodity-counter {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
  }
  .commodity-counter-sep { color: var(--text-muted); margin-inline: 0.25rem; }
  .commodity-counter [data-counter-total] { color: var(--text-muted); }
  /* Barrinhas de progresso (substituem as setas): a ativa fica laranja e maior */
  .commodity-progress { display: flex; align-items: center; gap: 6px; }
  .commodity-seg {
    width: 20px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: background var(--t-base), width var(--t-base);
  }
  .commodity-seg:hover { background: rgba(0, 0, 0, 0.34); }
  .commodity-seg.is-active { background: var(--primary); width: 34px; }

  /* Tooltip "Ver produto": outer segue o cursor; inner faz a entrada (escala) */
  .commodity-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-toast);
    pointer-events: none;
    will-change: transform;
  }
  .commodity-tooltip-inner {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    background: var(--primary);
    color: #FFFFFF;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    border-radius: 0;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7) translateY(6px);
    transform-origin: bottom left;
    transition: opacity 220ms var(--ease-spring), transform 220ms var(--ease-spring);
  }
  .commodity-tooltip.is-visible .commodity-tooltip-inner {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  @media (max-width: 768px) { .commodity-tooltip { display: none; } }

  /* ============ Galeria parallax (entre Produtos e Por que Polyblu) ============ */
  .parallax-gallery {
    position: relative;
    height: 165vh;
    overflow: hidden;
    background: #FFFFFF;
  }
  .pg-track {
    position: absolute;
    inset: 0;
    display: flex;
    gap: clamp(0.5rem, 1.2vw, 1.25rem);
    padding: clamp(0.5rem, 1.2vw, 1.25rem);
  }
  .pg-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;        /* trava a coluna na altura da galeria; as imagens transbordam */
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.2vw, 1.25rem);
    will-change: transform;
  }
  .pg-col img {
    width: 100%;
    height: 48vh !important;   /* altura fixa em vh: garante overflow (curso do parallax) em qualquer largura; !important vence o img{height:auto} do CSS crítico */
    flex-shrink: 0;
    /* são fotos de catálogo (produto recortado em fundo branco): 'contain' mostra
       a peça inteira, 'cover' cortava o produto no meio */
    object-fit: contain;
    background: #FFFFFF;
    padding: clamp(0.75rem, 1.5vw, 1.5rem);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: block;
    border-radius: 6px;
  }
  @media (max-width: 700px) {
    .parallax-gallery { height: 120vh; }
    .pg-col:nth-child(n + 3) { display: none; }   /* mobile: 2 colunas, sem ficar minúsculo */
    /* tile mais baixo: em coluna estreita, 48vh + 'contain' deixava muito vazio */
    .pg-col img { height: 30vh !important; padding: 0.6rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pg-col { transform: none !important; }
  }

  /* ============ Por que Polyblu (Methodology): preto + noise, refeito do Framer ============ */
  .metodologia {
    position: relative;
    isolation: isolate;
    background: #0A0A0A;
    color: #FFFFFF;
    overflow: hidden;
    padding-block: clamp(5rem, 12vh, 9rem);
  }
  .met-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
  }
  /* topo: coluna estreita (eyebrow) | coluna larga (conteúdo) */
  .met-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  @media (min-width: 900px) {
    .met-top {
      grid-template-columns: 1fr 2.5fr;
      gap: clamp(2rem, 6vw, 7rem);
      align-items: start;
    }
  }
  .met-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--primary);
  }
  .met-eyebrow-icon { flex-shrink: 0; }
  /* headline gigante */
  .met-headline {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    max-width: 15ch;
    margin: 0;
  }
  /* palavras com desfoque que vão ficando nítidas conforme o scroll (efeito do Framer) */
  .met-headline .uw {
    display: inline-block;
    filter: blur(7px);
    color: #565656;
    transition: filter 0.5s ease-out, color 0.5s ease-out;
  }
  .met-headline .uw.is-clear {
    filter: none;
    color: #FFFFFF;
  }
  .met-lead {
    margin: clamp(1.75rem, 4vh, 2.75rem) 0 0;
    max-width: 460px;
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: #8A8A8A;
  }
  .met-links {
    margin-top: clamp(2.25rem, 5vh, 3.25rem);
    max-width: 480px;
    display: flex;
    flex-direction: column;
  }
  .met-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(0.9rem, 1.7vh, 1.2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    transition: color var(--t-base);
  }
  .met-link:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .met-link-arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    transition: transform var(--t-base), color var(--t-base);
  }
  .met-link:hover { color: var(--primary-bright); }
  .met-link:hover .met-link-arrow {
    color: var(--primary-bright);
    transform: translateX(6px);
  }
  /* fileira inferior: 4 diferenciais (no lugar dos logos do design original) */
  .met-row {
    list-style: none;
    margin: clamp(4rem, 10vh, 7.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  @media (min-width: 560px) { .met-row { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .met-row { grid-template-columns: repeat(4, 1fr); } }
  .met-item {
    position: relative;
    padding: clamp(1.75rem, 2.5vw, 2.5rem) 0 clamp(2.25rem, 3vw, 3rem);
  }
  @media (min-width: 560px) {
    .met-item { padding-inline: clamp(1.25rem, 1.8vw, 2rem); }
    .met-item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.12); }
  }
  @media (min-width: 1000px) {
    .met-item { border-left: 1px solid rgba(255, 255, 255, 0.12); }
    .met-item:first-child { border-left: none; padding-left: 0; }
  }
  /* marcador "+" desenhado (2 traços), com o CENTRO sobre o cruzamento da divisória vertical
     com a linha horizontal do topo da fileira. O -1px no Y compensa o border-top (1px) da fileira. */
  .met-item::before,
  .met-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.45);
    transform: translate(-50%, calc(-50% - 1px));
  }
  .met-item::before { width: 13px; height: 2px; }   /* traço horizontal (mais grosso) */
  .met-item::after  { width: 2px; height: 13px; }   /* traço vertical (mais grosso) */
  .met-item:first-child::before,
  .met-item:first-child::after { display: none; }
  @media (max-width: 999px) {
    .met-item::before,
    .met-item::after { display: none; }
  }
  .met-item-num {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
  }
  .met-item-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 600;
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 var(--space-3);
  }
  .met-item-text {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: #8A8A8A;
    margin: 0;
  }

  /* ============ Bento grid (Setores) — componente replicado 1:1 ============ */
  .bento-grid {
    list-style: none;
    margin: 0 auto;
    max-width: 80rem;            /* max-w-7xl */
    padding: 1rem;               /* p-4 */
    display: grid;
    grid-template-columns: 1fr;  /* grid-cols-1 */
    gap: 0.75rem;                /* gap-3 */
  }
  @media (min-width: 768px) {    /* md: */
    .bento-grid { grid-template-columns: repeat(3, 1fr); }
    .bento-item--wide { grid-column: span 2; }
  }
  .bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;                                  /* p-4 */
    border-radius: 0.75rem;                         /* rounded-xl */
    overflow: hidden;
    border: 1px solid rgba(243, 244, 246, 0.8);     /* border-gray-100/80 */
    background: #FFFFFF;                             /* bg-white */
    color: inherit;
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
    will-change: transform;
  }
  .bento-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);     /* hover:shadow */
    transform: translateY(-2px);                    /* hover:-translate-y-0.5 */
  }
  /* fundo de pontinhos (radial dots), aparece no hover */
  .bento-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 4px 4px;
  }
  .bento-card:hover .bento-dots { opacity: 1; }
  /* topo: ícone (caixa) + badge de status */
  .bento-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .bento-icon {
    width: 2rem;                       /* w-8 */
    height: 2rem;                      /* h-8 */
    border-radius: 0.5rem;             /* rounded-lg */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);   /* bg-black/5 */
    color: var(--text);
    transition: background 300ms var(--ease-out);
  }
  .bento-icon svg { width: 1rem; height: 1rem; }   /* w-4 h-4 */
  .bento-status {
    font-family: var(--font-sans);
    font-size: 0.75rem;                /* text-xs */
    font-weight: 500;
    padding: 0.25rem 0.5rem;           /* px-2 py-1 */
    border-radius: 0.5rem;             /* rounded-lg */
    background: rgba(0, 0, 0, 0.05);
    color: #4B5563;                    /* text-gray-600 */
    transition: background 300ms var(--ease-out);
    white-space: nowrap;
  }
  .bento-card:hover .bento-status { background: rgba(0, 0, 0, 0.1); }
  /* corpo: título (+meta) + descrição */
  .bento-card-body { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
  .bento-card-title {
    font-family: var(--font-sans);
    font-weight: 500;                  /* font-medium */
    font-size: 15px;                   /* text-[15px] */
    letter-spacing: -0.01em;           /* tracking-tight */
    line-height: 1.3;
    color: #111827;                    /* text-gray-900 */
  }
  .bento-card-desc {
    font-family: var(--font-sans);
    font-size: 0.875rem;               /* text-sm */
    font-weight: 425;                  /* font-[425] */
    line-height: 1.375;                /* leading-snug */
    color: #4B5563;                    /* text-gray-600 */
  }
  /* rodapé: tags + cta (aparece no hover) */
  .bento-card-foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .bento-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
  .bento-tag {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #6B7280;                    /* text-gray-500 */
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;           /* rounded-md */
    background: rgba(0, 0, 0, 0.05);
    transition: background 200ms var(--ease-out);
    white-space: nowrap;
  }
  .bento-tag:hover { background: rgba(0, 0, 0, 0.1); }
  .bento-cta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #6B7280;
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .bento-card:hover .bento-cta { opacity: 1; }
  /* borda em gradiente sutil (z-index abaixo do conteúdo) */
  .bento-border {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0.75rem;
    padding: 1px;
    background: linear-gradient(to bottom right, transparent, rgba(243, 244, 246, 0.5), transparent);
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
    pointer-events: none;
  }
  .bento-card:hover .bento-border { opacity: 1; }
  /* Reveal no hover: só os PNGs dos compostos (fundo transparente), seguindo o cursor (JS) */
  .setor-thumbs {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 4;
    pointer-events: none;
    will-change: transform;   /* o JS move o grupo pro cursor (com damping) */
  }
  .setor-thumb {
    width: clamp(58px, 6vw, 84px);
    aspect-ratio: 1;
    margin-left: -22px;
    opacity: 0;
    transform: scale(0.3) translateY(10px);
    transform-origin: bottom center;
    transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-spring);
    transition-delay: calc(var(--i) * 50ms);
  }
  .setor-thumb:first-child { margin-left: 0; }
  .setor-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  }
  .bento-card:hover .setor-thumb {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(calc((var(--i) - 1) * 9deg));
  }
  /* o badge "X produtos" some no hover, dando lugar às miniaturas */
  .bento-status { transition: opacity var(--t-fast); }
  .bento-card:hover .bento-status { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .setor-thumb { transition: opacity 0.3s; }
    .bento-card:hover .setor-thumb { transform: none; }
  }

  /* ============ Setores: texto fixo (sticky) à esquerda + cards rolando à direita ============ */
  .setores-layout {
    max-width: none;
    padding-inline: clamp(1.25rem, 2vw, 2.75rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  @media (min-width: 900px) {
    .setores-layout {
      grid-template-columns: minmax(260px, 32%) 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
    /* a escrita fica presa na tela enquanto os cards sobem */
    .setores-text {
      position: sticky;
      top: clamp(96px, 13vh, 130px);
      align-self: start;
    }
  }
  /* bento ocupa a coluna direita: sem cap de largura, 2 colunas */
  .setores-layout .bento-grid {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 900px) {
    .setores-layout .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .setores-layout .bento-item--wide { grid-column: span 2; }
  }

  /* ============ CTA final (padrão do site) — Hero do Framer: claro + linhas tracejadas ============ */
  .ctaf {
    position: relative;
    isolation: isolate;
    background: var(--bg); /* mesma cor da seção Setores (#FAFAF8) */
    color: #151515;
    overflow: hidden;
    padding-block: clamp(4.5rem, 10vh, 8rem) clamp(2rem, 4vh, 3rem);
  }
  /* 4 linhas verticais tracejadas dividindo a seção em 5 colunas (vão até as bordas) */
  .ctaf-lines {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    z-index: 0;
  }
  .ctaf-lines i {
    flex: 1;
    border-right: 1px dashed rgba(21, 21, 21, 0.14);
  }
  .ctaf-inner {
    position: relative;
    z-index: 1;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
  }
  /* badge pill: quadradinho laranja + label, borda fininha */
  .ctaf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(21, 21, 21, 0.16);
    border-radius: 999px;
    background: #FFFFFF;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: #151515;
  }
  .ctaf-badge-sq {
    width: 8px;
    height: 8px;
    background: var(--primary);
    flex-shrink: 0;
  }
  /* grid: headline gigante | coluna direita (since + lead + ações) */
  .ctaf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(1.75rem, 4vh, 2.75rem);
  }
  @media (min-width: 900px) {
    .ctaf-grid {
      grid-template-columns: 1.35fr 1fr;
      align-items: start;
    }
  }
  .ctaf-headline {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #151515;
    margin: 0;
    max-width: 13ch;
  }
  .ctaf-headline em {
    font-style: normal;
    color: var(--primary);
  }
  .ctaf-since {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    color: #151515;
    margin-bottom: var(--space-5);
  }
  .ctaf-lead {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: #5C5C5C;
    max-width: 46ch;
    margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  }
  .ctaf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  /* botão do Framer: cápsula escura + quadradinho laranja com seta */
  .ctaf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.8rem 0.7rem 1.15rem;
    border-radius: 6px;
    background: #151515;
    border: 1px solid #151515;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
  }
  .ctaf-btn-sq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: var(--primary);
    color: #FFFFFF;
    transition: transform var(--t-base);
  }
  .ctaf-btn:hover { background: #000000; }
  .ctaf-btn:hover .ctaf-btn-sq { transform: translateX(3px); }
  .ctaf-btn-ghost {
    background: transparent;
    border-color: rgba(21, 21, 21, 0.25);
    color: #151515 !important;
  }
  .ctaf-btn-ghost:hover {
    background: rgba(21, 21, 21, 0.04);
    border-color: #151515;
  }
  /* rodapé da seção: 3 infos sobre a última linha */
  .ctaf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: clamp(3.5rem, 9vh, 6.5rem);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    color: #5C5C5C;
  }
  .ctaf-foot-mid { text-transform: uppercase; }
  @media (max-width: 700px) {
    .ctaf-foot { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .ctaf-lines i:nth-child(n+3) { display: none; }
  }

  /* ============ Produto page ============ */
  /* Hero do produto no layout da "Formulação customizada" (reusa as classes ctaf-*),
     com a imagem da hero da home DESFOCADA de fundo + véu claro pra leitura */
  .phero {
    position: relative;
    isolation: isolate;
    background: var(--bg);
    color: #151515;
    overflow: hidden;
    padding-block: clamp(2.5rem, 5vh, 4rem) clamp(2rem, 4vh, 3rem);
  }
  .phero-bg {
    position: absolute;
    inset: -48px; /* sangra além das bordas: o blur não revela contorno */
    background: url("/assets/img/hero/hero-home.png?v=2") center / cover no-repeat;
    filter: blur(22px) saturate(1.05);
    z-index: 0;
  }
  .phero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250, 250, 248, 0.86) 0%, rgba(250, 250, 248, 0.78) 55%, rgba(250, 250, 248, 0.92) 100%);
    z-index: 0;
  }
  .phero .ctaf-lines { z-index: 0; }
  .phero .breadcrumb { margin-bottom: var(--space-6); }
  .phero-badges {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  /* grid: headline | PNG do produto (central, sem card) | infos + ações */
  .phero-grid {
    align-items: center;
  }
  @media (min-width: 1000px) {
    .phero-grid {
      grid-template-columns: 1.15fr 0.85fr 1fr;
      gap: clamp(1.5rem, 3.5vw, 4rem);
    }
  }
  .phero .ctaf-headline sup { font-size: 0.38em; color: var(--text-muted); top: -1.2em; margin-left: 0.08em; }
  .phero-visual {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* altura FIXA: independe da proporção da imagem de cada produto,
       então todos os heroes ficam com a mesma altura e a headline na mesma posição */
    height: clamp(300px, 42vh, 420px);
  }
  .phero-visual img {
    width: 100%;
    max-width: 460px;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    object-fit: cover;
    object-position: center 80%;
    border-radius: 6px;
    display: block;
    box-shadow: 0 28px 48px rgba(26, 26, 26, 0.28);
  }

  /* Produto intro: definicao em destaque + CTA card lado a lado */
  /* ============ Descrição do produto — layout do About do Framer ============ */
  .pdesc { padding-block: clamp(3.5rem, 7vw, 6rem); }
  /* topo: texto + ações | card de foto com legenda */
  .pdesc-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  @media (min-width: 960px) {
    .pdesc-top { grid-template-columns: 1.05fr 1fr; }
  }
  .pdesc-eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    color: var(--text-soft);
    margin-bottom: var(--space-4);
  }
  .pdesc-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tightest);
    margin-bottom: var(--space-5);
    line-height: var(--lh-tight);
  }
  .pdesc-definition {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-soft);
    max-width: 58ch;
  }
  /* bloco "Pedir esse composto": sai do card escuro, vira faixa com divisória */
  .pdesc-cta {
    margin-top: clamp(1.75rem, 4vh, 2.5rem);
    padding-top: clamp(1.5rem, 3vh, 2rem);
    border-top: 1px solid var(--border);
  }
  .pdesc-cta-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: 0 0 var(--space-1);
  }
  .pdesc-cta-lead {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    margin: 0 0 var(--space-5);
  }
  .pdesc-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  /* card de foto com legenda sobreposta (estilo do Framer) */
  .pdesc-media {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }
  .pdesc-media img,
  .pdesc-media picture {
    width: 100% !important;   /* vence o img{height:auto} do CSS crítico */
    height: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 80%;
    display: block;
  }
  .pdesc-media-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.72) 78%);
    color: #FFFFFF;
  }
  .pdesc-media-caption strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: #FFFFFF;
    margin-bottom: 0.2rem;
  }
  .pdesc-media-caption strong sup { font-size: 0.45em; }
  .pdesc-media-caption span {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
  }
  /* fileira de cards (estilo stat-card do Framer): 3 em cima, 2 embaixo */
  .pdesc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }
  @media (min-width: 720px) {
    .pdesc-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1100px) {
    .pdesc-cards { grid-template-columns: repeat(6, 1fr); }
    .pdesc-card--w2 { grid-column: span 2; }
    .pdesc-card--w3 { grid-column: span 3; }
  }
  .pdesc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    transition: box-shadow var(--t-base), transform var(--t-base);
  }
  .pdesc-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  /* chips dos cards: cor CHAPADA na rampa do laranja (01→05, como no Processo) */
  .pdesc-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--primary);
    color: #FFFFFF;
    margin-bottom: var(--space-4);
    transition: transform 0.45s var(--ease-spring);
  }
  .pdesc-card:hover .pdesc-card-icon { transform: translateY(-3px) rotate(-3deg); }
  .pdesc-card:nth-child(1) .pdesc-card-icon { background: #A93000; }
  .pdesc-card:nth-child(2) .pdesc-card-icon { background: #C53400; }
  .pdesc-card:nth-child(3) .pdesc-card-icon { background: #EF3F00; }
  .pdesc-card:nth-child(4) .pdesc-card-icon { background: #FF6620; }
  .pdesc-card:nth-child(5) .pdesc-card-icon { background: #FF8A4F; }
  /* cabeçalho do card: hairline com o quadradinho laranja (motivo da casa) */
  .pdesc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
  }
  .pdesc-sq {
    width: 7px;
    height: 7px;
    background: var(--primary);
    flex-shrink: 0;
    transition: transform var(--t-base);
  }
  .pdesc-card:hover .pdesc-sq { transform: scale(1.6); }
  .pdesc-card-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
    margin: 0;
  }
  .pdesc-specs {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .pdesc-specs > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--border);
  }
  .pdesc-specs > div:last-child { border-bottom: 0; }
  .pdesc-specs dt {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
  }
  .pdesc-specs dd {
    font-size: var(--fs-sm);
    color: var(--text-strong);
    text-align: right;
    margin: 0;
    font-weight: var(--fw-medium);
  }
  .pdesc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdesc-tags li {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-softer);
    color: var(--primary);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border: 1px solid var(--primary-soft);
  }
  .pdesc-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdesc-bullets li {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-snug);
    padding-left: var(--space-5);
    position: relative;
  }
  .pdesc-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
  }
  .pdesc-card-text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-4);
  }
  .pdesc-card-link {
    display: inline-flex;
    color: var(--primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }
  .pdesc-card-link:hover { color: var(--primary-deep); }

  /* ============ Produto: setores (fotos) e catálogo (renders) relacionados ============ */
  .prel { padding-block: clamp(3rem, 7vh, 5rem); }
  .prel--set { background: var(--bg-soft); }
  .prel-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  @media (min-width: 600px) { .prel-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .prel-grid { grid-template-columns: repeat(3, 1fr); } }
  .prel-card {
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px; /* quinas retas, identidade da casa */
    overflow: hidden;
    transition: transform 0.45s var(--ease-spring), box-shadow var(--t-base), border-color var(--t-base);
  }
  .prel-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 0, 0, 0.2);
  }
  .prel-link {
    display: block;
    color: inherit !important; /* vence o a{color} do CSS crítico */
    text-decoration: none;
    height: 100%;
  }
  /* capa de FOTO (setores): zoom suave no hover */
  .prel-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--primary-softer);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prel-media img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
  }
  .prel-card:hover .prel-media img { transform: scale(1.06); }
  .prel-media-icon {
    color: var(--primary);
    display: inline-flex;
  }
  .prel-media-icon svg { width: 44px; height: 44px; }
  /* área de RENDER (catálogo): a foto do composto PREENCHE o container inteiro,
     enquadrada na parte de baixo pra pegar o montinho, não o vazio do topo */
  .prel-render {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .prel-render img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    object-fit: cover;
    object-position: center 80%;
    display: block;
    transition: transform 0.6s var(--ease-out);
  }
  .prel-card:hover .prel-render img { transform: scale(1.06); }
  .prel-body {
    padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--border-soft);
  }
  .prel-name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: 1.15;
    margin: 0 0 var(--space-2);
  }
  .prel-text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
  }
  .prel-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
  }
  .prel-arrow { transition: transform var(--t-base); }
  .prel-card:hover .prel-arrow { transform: translateX(5px); }

  /* ============ Aplicação (setores): hero 2 colunas, intro, desafios, galeria ============ */
  /* hero: texto à esquerda + foto do setor à direita (shell .phero) */
  .aphero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
  }
  @media (min-width: 900px) {
    .aphero-grid { grid-template-columns: 1fr 1fr; }
    .aphero-grid--solo { grid-template-columns: 1fr; max-width: 720px; }
  }
  .aphero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .aphero-text .ctaf-badge { margin-bottom: var(--space-5); }
  .aphero-title { max-width: 14ch; margin: 0 0 var(--space-4); }
  .aphero-text .ctaf-lead { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }
  .aphero-media {
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }
  .aphero-media img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  /* intro: bloco editorial com kicker + quadradinho */
  .asec-intro { padding-block: clamp(3rem, 6vh, 4.5rem); }
  .asec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-soft);
    margin-bottom: var(--space-5);
  }
  .asec-eyebrow .sb-square { width: 8px; height: 8px; background: var(--primary); }
  .asec-intro-text {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
    line-height: 1.45;
    color: var(--text);
    max-width: 62ch;
    margin: 0;
  }

  /* desafios: cards numerados (chip na rampa do laranja) */
  .adsf {
    padding-block: clamp(3rem, 6vh, 4.5rem);
    background: var(--bg-soft);
  }
  .adsf-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  @media (min-width: 560px) { .adsf-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .adsf-grid { grid-template-columns: repeat(4, 1fr); } }
  .adsf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    transition: transform 0.45s var(--ease-spring), box-shadow var(--t-base), border-color var(--t-base);
  }
  .adsf-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
  .adsf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding-inline: 0.5rem;
    border-radius: 11px;
    background: var(--ic, var(--primary));
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-lg);
    margin-bottom: clamp(1rem, 2vh, 1.4rem);
  }
  .adsf-text {
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--text-strong);
    font-weight: var(--fw-medium);
    margin: 0;
  }

  /* galeria: fotos reais com zoom no hover e legenda sobreposta */
  .agal {
    padding-block: clamp(3rem, 6vh, 4.5rem);
    background: var(--bg-soft);
  }
  .agal-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  @media (min-width: 560px) { .agal-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px) { .agal-grid { grid-template-columns: repeat(3, 1fr); } }
  .agal-item figure {
    margin: 0;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .agal-item img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
  }
  .agal-item:hover img { transform: scale(1.06); }
  .agal-link { display: block; height: 100%; color: inherit; text-decoration: none; }
  .agal-link:focus-visible { outline: 2px solid #EF3F00; outline-offset: 3px; }
  .agal-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.25rem) clamp(0.8rem, 1.6vw, 1.1rem);
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.72) 80%);
    color: #FFFFFF;
    font-size: var(--fs-xs);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .agal-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #FF6620;
    font-weight: var(--fw-semibold, 600);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  }
  .agal-cta svg { color: #FF6620; }
  .agal-item:hover .agal-cta,
  .agal-link:focus-visible .agal-cta { opacity: 1; transform: translateY(0); }

  /* ===== P-Blend: destaque, vantagens, carrossel de aplicações e FAQ ===== */
  .pbd { padding-block: clamp(3rem, 6vh, 4.5rem); background: var(--bg); }
  .pbd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  @media (min-width: 900px) { .pbd-grid { grid-template-columns: 1fr 1fr; } }
  .pbd-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    color: var(--text-strong);
    margin: var(--space-3) 0 var(--space-4);
  }
  .pbd-lead {
    font-family: var(--font-sans);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-6);
  }
  .pbd-media {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .pbd-media img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  /* Vantagens do one-pack: grade 3 colunas com o 1º card ocupando 2 (fecha sem buraco).
     O card de destaque é escuro, dá hierarquia e quebra a monotonia de 5 caixas iguais. */
  .pbv { padding-block: clamp(3.5rem, 7vh, 5.5rem); background: var(--bg); }
  .pbv-head .section-title em { font-style: normal; color: var(--primary); }
  .pbv-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 1.4vw, 1.15rem);
  }
  @media (min-width: 700px) {
    .pbv-grid { grid-template-columns: repeat(2, 1fr); }
    .pbv-card--feature { grid-column: span 2; }
  }
  @media (min-width: 1024px) { .pbv-grid { grid-template-columns: repeat(3, 1fr); } }

  .pbv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    min-height: clamp(210px, 21vw, 265px);
    padding: clamp(1.25rem, 2.2vw, 1.85rem);
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }
  .pbv-card:hover {
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
  }
  .pbv-num {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(0, 0, 0, 0.15);
    transition: color var(--t-base);
  }
  .pbv-card:hover .pbv-num { color: var(--primary); }
  .pbv-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: 1.2;
    margin: 0 0 var(--space-2);
  }
  .pbv-text {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
    max-width: 46ch;
  }

  /* card de destaque (01): preto com brilho quente no canto, igual ao card de contato */
  .pbv-card--feature {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .pbv-card--feature::after {
    content: "";
    position: absolute;
    right: -22%;
    bottom: -75%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 63, 0, 0.5) 0%, rgba(239, 63, 0, 0) 70%);
    pointer-events: none;
  }
  .pbv-card--feature .pbv-num,
  .pbv-card--feature .pbv-body { position: relative; z-index: 1; }
  .pbv-card--feature .pbv-num { color: var(--primary); }
  .pbv-card--feature .pbv-title {
    color: #FFFFFF;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.7rem);
    margin-bottom: var(--space-3);
  }
  .pbv-card--feature .pbv-text {
    color: rgba(255, 255, 255, 0.74);
    font-size: var(--fs-base);
    max-width: 58ch;
  }
  .pbv-card--feature:hover { border-color: rgba(255, 255, 255, 0.22); }

  /* carrossel em loop infinito (2 grupos idênticos + translateX(-50%)) */
  .pbc { padding-block: clamp(3rem, 6vh, 4.5rem); background: var(--bg); overflow: hidden; }
  .pbc-viewport { overflow: hidden; margin-top: clamp(1.5rem, 3vh, 2.25rem); }
  .pbc-track {
    display: flex;
    width: max-content;
    animation: pbc-scroll 70s linear infinite;
  }
  .pbc:hover .pbc-track,
  .pbc:focus-within .pbc-track { animation-play-state: paused; }
  .pbc-group {
    display: flex;
    gap: clamp(1rem, 1.6vw, 1.35rem);
    padding-right: clamp(1rem, 1.6vw, 1.35rem);
  }
  .pbc-card {
    flex: 0 0 auto;
    width: clamp(240px, 24vw, 320px);
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .pbc-media { margin: 0; background: var(--bg-soft); }
  .pbc-media img {
    width: 100% !important;
    height: auto !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: clamp(0.75rem, 1.4vw, 1.1rem);
    display: block;
  }
  .pbc-body { padding: clamp(0.9rem, 1.6vw, 1.2rem); border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .pbc-name {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: 1.25;
    margin: 0 0 var(--space-2);
  }
  .pbc-text {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0;
  }
  @keyframes pbc-scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .pbc-track { animation: none; }
    .pbc-viewport { overflow-x: auto; }
  }

  .pbf { padding-block: clamp(3rem, 6vh, 4.5rem); }
  .pbf-wrap { max-width: 810px; margin-inline: auto; }
  .pbf .faq-question { padding: var(--space-4) var(--space-5); }
  .pbf .faq-answer { padding: 0 var(--space-5) var(--space-5); }

  /* crédito do mapa: obrigatório por licença, mas bem discreto sobre o véu branco */
  .sb-loc .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(0, 0, 0, 0.38);
    padding: 1px 6px;
    box-shadow: none;
  }
  .sb-loc .leaflet-control-attribution a { color: rgba(0, 0, 0, 0.45); }

  /* Botão flutuante de WhatsApp (canto inferior direito, acima do rodapé) */
  .wa-float {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 15px;
    border-radius: 28px;
    background: #25D366;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: gap var(--t-base), padding var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }
  .wa-float svg { flex-shrink: 0; display: block !important; }
  .wa-float-label {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--t-base), opacity var(--t-base);
  }
  .wa-float:hover,
  .wa-float:focus-visible {
    gap: 10px;
    padding-right: 20px;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  }
  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label { max-width: 200px; opacity: 1; }
  /* no mobile fica só o ícone, pra não brigar com o banner de cookies */
  @media (max-width: 640px) {
    .wa-float { height: 52px; padding: 0 13px; bottom: 5.5rem; }
    .wa-float:hover { gap: 0; padding-right: 13px; }
    .wa-float:hover .wa-float-label { max-width: 0; opacity: 0; }
  }
  @media print { .wa-float { display: none; } }

  /* Produtos transformados: fotos reais do acervo Polyblu (recorte em fundo claro,
     por isso 'contain' com respiro, e não 'cover') */
  .aprod { padding-block: clamp(3rem, 6vh, 4.5rem); }
  .aprod-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  @media (min-width: 700px) { .aprod-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1100px) { .aprod-grid { grid-template-columns: repeat(4, 1fr); } }
  .aprod-item figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color var(--t-base), box-shadow var(--t-base);
  }
  .aprod-item figure:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: var(--shadow-sm);
  }
  .aprod-item img {
    width: 100% !important;
    height: auto !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: clamp(0.75rem, 1.6vw, 1.25rem);
    display: block;
    background: var(--bg-soft);
    transition: transform 0.5s var(--ease-out);
  }
  .aprod-item figure:hover img { transform: scale(1.05); }
  .aprod-item figcaption {
    padding: clamp(0.7rem, 1.4vw, 0.95rem) clamp(0.8rem, 1.6vw, 1.1rem);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-soft);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* "Por que Polyblu" do setor: 3 cards de valor com ícone em chip laranja */
  .aval { padding-block: clamp(3rem, 6vh, 4.5rem); }
  .aval-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
  @media (min-width: 720px) { .aval-grid { grid-template-columns: repeat(3, 1fr); } }
  .aval-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    transition: transform 0.45s var(--ease-spring), box-shadow var(--t-base), border-color var(--t-base);
  }
  .aval-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
  .aval-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary);
    color: #FFFFFF;
    margin-bottom: var(--space-5);
    transition: transform 0.45s var(--ease-spring);
  }
  .aval-card:hover .aval-icon { transform: translateY(-3px) rotate(-3deg); }
  .aval-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: 0 0 var(--space-2);
  }
  .aval-text {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
  }

  /* Processos compatíveis: chips (dado real, união dos produtos do setor) */
  .aproc { padding-block: clamp(3rem, 6vh, 4.5rem); background: var(--bg-soft); }
  .aproc-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.2vw, 0.9rem);
  }
  .aproc-tags li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
    transition: border-color var(--t-base), color var(--t-base);
  }
  .aproc-tags li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--primary);
    flex-shrink: 0;
  }
  .aproc-tags li:hover { border-color: var(--primary); color: var(--primary); }

  /* A Polyblu em números: faixa de stats reais (fecho de credibilidade) */
  .astat { padding-block: clamp(3rem, 6vh, 4.5rem); }
  .astat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    border-top: 1px solid var(--border);
  }
  @media (min-width: 800px) { .astat-grid { grid-template-columns: repeat(4, 1fr); } }
  .astat-item {
    padding: clamp(1.5rem, 3vh, 2.25rem) clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vh, 1.75rem);
    border-left: 1px solid var(--border);
  }
  .astat-item:first-child { border-left: none; }
  @media (max-width: 799px) {
    .astat-item:nth-child(odd) { border-left: none; }
    .astat-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  }
  .astat-item dd {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0 0 var(--space-2);
  }
  .astat-item dd small {
    font-size: 0.4em;
    font-weight: var(--fw-medium);
    color: var(--text-soft);
  }
  .astat-item dt {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
  }

  /* ============ Contato — réplica do componente do Framer (uma seção só) ============ */
  .cont {
    position: relative;
    padding-block: clamp(2rem, 4vh, 3rem) clamp(3.5rem, 8vh, 6rem);
  }
  /* linha tracejada vertical à esquerda (como no componente) */
  .cont-dash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(0.75rem, 2vw, 2rem);
    border-left: 1px dashed rgba(21, 21, 21, 0.16);
    pointer-events: none;
  }
  .cont-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
  }
  @media (min-width: 960px) {
    .cont-grid { grid-template-columns: 1fr 1.05fr; }
  }
  /* esquerda: kicker + headline gigante + lead + colunas de contato */
  .cont-kicker {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary);
    margin-bottom: var(--space-4);
  }
  .cont-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 1.8rem + 4.5vw, 5.5rem);
    font-weight: var(--fw-semibold);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #151515;
    margin: 0 0 var(--space-5);
  }
  .cont-lead {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 42ch;
    margin: 0;
  }
  /* colunas "// label //" laranja + linhas de texto simples (como no componente) */
  .cont-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
  }
  @media (min-width: 560px) { .cont-cols { grid-template-columns: 1fr 1fr; } }
  .cont-label {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--primary);
    margin: 0 0 var(--space-4);
  }
  .cont-label::before { content: "// "; }
  .cont-label::after { content: " //"; }
  .cont-col a {
    display: block;
    font-size: var(--fs-sm);
    color: #151515 !important; /* vence o a{color} do CSS crítico */
    text-decoration: none;
    line-height: 1.45;
    margin-bottom: var(--space-2);
    transition: color var(--t-fast);
  }
  .cont-col a:hover { color: var(--primary) !important; }
  .cont-col address {
    font-style: normal;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: #151515;
  }
  /* direita: card ESCURO de radius PEQUENO com luz quente no canto inferior direito */
  .cont-form-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #161616;
    border-radius: 10px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: #FFFFFF;
    color-scheme: dark; /* controles nativos (select/autofill) em modo escuro */
  }
  .cont-form-card::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -16%;
    width: 64%;
    height: 64%;
    background: radial-gradient(circle at 100% 100%, rgba(239, 63, 0, 0.42), rgba(239, 63, 0, 0.12) 42%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .cont-form-card > * { position: relative; z-index: 1; }
  .cont-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: #FFFFFF;
    margin: 0 0 var(--space-5);
  }
  .cont-form { max-width: none; gap: var(--space-4); }
  .cont-form .form-row { gap: var(--space-4); }
  .cont-form label {
    color: #FFFFFF;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
  }
  .cont-form input,
  .cont-form select,
  .cont-form textarea {
    background: #1D1D1D;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #FFFFFF;
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-sm);
  }
  .cont-form textarea { min-height: 120px; }
  .cont-form input::placeholder,
  .cont-form textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
  .cont-form input:hover,
  .cont-form select:hover,
  .cont-form textarea:hover { border-color: rgba(255, 255, 255, 0.24); }
  .cont-form input:focus,
  .cont-form select:focus,
  .cont-form textarea:focus {
    border-color: var(--primary-bright);
    box-shadow: 0 0 0 3px rgba(239, 63, 0, 0.2);
    background: #1D1D1D;
  }
  /* submit: cinza-escuro discreto (como o "Submit details" do componente),
     radius pequeno, mantendo o quadradinho laranja do nosso padrão */
  .cont-form .form-actions { margin-top: var(--space-2); }
  .cont-form-card .cont-submit,
  .cont-form-card button.cont-submit {
    background-color: #2A2A2A !important;
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
  }
  .cont-form-card .cont-submit:hover,
  .cont-form-card button.cont-submit:hover {
    background-color: #333333 !important;
    border-color: rgba(255, 255, 255, 0.24);
  }

  /* ============ Hero "CTA Section" (Sobre) — faixa laranja com réguas ============ */
  .scta {
    background: var(--primary);
    color: #151515;
    padding-block: 0; /* zera o padding global de section: réguas rentes às bordas do laranja */
  }
  /* régua de ticks no topo e na base: traços alternados (1 alto, curtos no meio),
     animadas em sentidos opostos (topo ← / base →). 360px = múltiplo dos dois
     períodos (8 e 40px), então o loop é perfeito, sem emenda. */
  .scta-ticks {
    height: 14px;
    background-image:
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 8px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.6) 1px, transparent 1px, transparent 40px);
    background-size: 100% 7px, 100% 14px;
    background-repeat: repeat-x;
  }
  /* topo: traços pendurados na borda de cima, correndo da direita pra esquerda */
  .scta-ticks:first-child {
    background-position: 0 top, 0 top;
    animation: scta-ruler-left 28s linear infinite;
  }
  /* base: traços apoiados na borda de baixo, correndo da esquerda pra direita */
  .scta-ticks:last-child {
    background-position: 0 bottom, 0 bottom;
    animation: scta-ruler-right 28s linear infinite;
  }
  @keyframes scta-ruler-left {
    to { background-position: -360px top, -360px top; }
  }
  @keyframes scta-ruler-right {
    to { background-position: 360px bottom, 360px bottom; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scta-ticks { animation: none !important; }
  }
  /* container rente às réguas (sem respiro entre o conteúdo e as linhas) */
  .scta-inner {
    padding: 0 clamp(1.5rem, 4vw, 4rem);
  }
  /* breadcrumb sobre o laranja: tudo em preto */
  .scta .breadcrumb,
  .scta .breadcrumb a,
  .scta .breadcrumb a:hover,
  .scta .breadcrumb [aria-current] {
    color: rgba(0, 0, 0, 0.72) !important;
  }
  .scta .breadcrumb svg { color: rgba(0, 0, 0, 0.72); }
  .scta-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 1rem + 9.5vw, 8.5rem);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #151515;
    text-align: center;
    margin: clamp(1.5rem, 4vh, 3rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  }
  /* meta: local à esquerda, marco à direita, sobre a divisória */
  .scta-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: #151515;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  }
  /* linha final: label | texto de apoio | botão */
  .scta-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
    padding-block: clamp(1.5rem, 3.5vh, 2.5rem) var(--space-4);
  }
  @media (min-width: 900px) {
    .scta-bottom { grid-template-columns: 1fr 1.6fr auto; }
  }
  .scta-label {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #151515;
  }
  .scta .scta-lead {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.82);
    max-width: 52ch;
    margin: 0;
  }
  .scta .scta-cta { margin: 0; }

  /* variante do hero (Processo): imagem da hero da home de fundo + texto BRANCO */
  .scta--proc {
    position: relative;
    isolation: isolate;
    color: #FFFFFF;
    background: #0F0F0F url("/assets/img/hero/hero-home.png?v=2") center / cover no-repeat;
  }
  /* véu escuro pra leitura (mais pesado na base, onde fica o texto de apoio) */
  .scta--proc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.45) 45%, rgba(10, 10, 10, 0.72) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .scta--proc > * { position: relative; z-index: 1; }
  /* réguas em branco sobre a imagem */
  .scta--proc .scta-ticks {
    background-image:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px, transparent 8px),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 1px, transparent 1px, transparent 40px);
  }
  .scta--proc .scta-headline { color: #FFFFFF; }
  /* headline longa: um degrau menor que a do Sobre pra caber bem em 2 linhas */
  .scta-headline--long { font-size: clamp(2.5rem, 1rem + 6.5vw, 6rem); }
  .scta--proc .scta-meta {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.4);
  }
  .scta--proc .scta-label { color: #FFFFFF; }
  .scta--proc .scta-lead { color: rgba(255, 255, 255, 0.85); }
  .scta--proc .breadcrumb,
  .scta--proc .breadcrumb a,
  .scta--proc .breadcrumb a:hover,
  .scta--proc .breadcrumb [aria-current] {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .scta--proc .breadcrumb svg { color: rgba(255, 255, 255, 0.85); }

  /* ============ Quem somos + números (Sobre) — componente WhoWeAre do Framer ============ */
  /* full-bleed: escapa do .container/.prose e ocupa a largura toda da tela.
     O .prose é uma coluna de 760px encostada à ESQUERDA do container centrado,
     então o deslocamento correto é a distância real até a borda da tela:
     metade da sobra do container + o padding lateral dele. */
  .wwa {
    width: 100vw;
    margin-left: calc(-1 * (max((100vw - var(--container-max)) / 2, 0px) + var(--container-px)));
    padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 4vw, 4rem) 0;
    margin-block: clamp(1.5rem, 3vh, 2.5rem) clamp(2.5rem, 5vh, 4rem);
  }
  /* topo: pill à esquerda | headline + apoio + botão à direita */
  .wwa-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
  }
  @media (min-width: 900px) {
    .wwa-head { grid-template-columns: 1fr 1.9fr; }
  }
  .wwa-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-card);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text);
  }
  .wwa-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
  }
  .wwa .wwa-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0 0 var(--space-5);
  }
  .wwa .wwa-lead {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 62ch;
    margin: 0 0 var(--space-4);
  }
  .wwa .wwa-lead + .wwa-cta { margin-top: var(--space-3); }
  .wwa .wwa-cta { margin: 0; }
  /* gráfico: curva descendo da esquerda, pontos sobre ela e linhas verticais finas
     caindo até os stats. Sobe com margem negativa pra invadir a área do topo,
     como no componente original (o 1º ponto fica na altura do botão). */
  .wwa-chart {
    position: relative;
    height: clamp(160px, 24vh, 240px);
    margin-top: calc(-1 * clamp(2.5rem, 7vh, 4.5rem));
    pointer-events: none;
  }
  .wwa-cols {
    position: absolute;
    inset: 0;
    display: flex;
  }
  .wwa-cols i { flex: 1; position: relative; }
  /* linha vertical: nasce no ponto e desce (continua pelos stats via border-left deles) */
  .wwa-cols i::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--dy);
    bottom: 0;
    width: 1px;
    background: var(--border);
  }
  /* ponto sobre a curva: anel laranja fino com miolo branco */
  .wwa-cols i::after {
    content: "";
    position: absolute;
    left: 0;
    top: var(--dy);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--primary);
    transform: translate(-50%, -50%);
  }
  /* stats: 5 colunas; a hairline esquerda CONTINUA a linha vertical do gráfico
     (sem linha horizontal em cima, igual o original) */
  .wwa-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
  }
  .wwa-stat {
    border-left: 1px solid var(--border);
    padding: 0 clamp(0.75rem, 1.5vw, 1.5rem) clamp(0.5rem, 1.2vh, 0.9rem);
    padding-left: clamp(0.9rem, 1.8vw, 1.75rem);
  }
  .wwa-stat dd {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0 0 var(--space-2);
  }
  .wwa-stat dd small {
    font-size: 0.45em;
    font-weight: var(--fw-medium);
    color: var(--text-soft);
  }
  .wwa-stat--text dd {
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
    line-height: 1.25;
  }
  .wwa-stat dt {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
  }
  /* mobile: sem gráfico (aperta demais), stats em 2 colunas */
  @media (max-width: 760px) {
    .wwa-chart { display: none; }
    .wwa-stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .wwa-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .wwa-stat--text { grid-column: span 2; border-left: none; padding-left: 0; }
  }

  /* ============ Sobre: seções construídas (essência, família, duo, engenharia, fluxo) ============ */
  /* listas dentro das seções NÃO herdam o estilo de lista do .prose
     (display flex, recuo e o tracinho laranja por item) */
  .prose .sbs ul,
  .prose .sbs ol {
    padding-left: 0;
  }
  .prose .sbs li { padding-left: 0; }
  .prose .sbs li::before { content: none; }
  /* base full-bleed (mesma conta do .wwa: o .prose é coluna à esquerda do container) */
  .sbs {
    width: 100vw;
    margin-left: calc(-1 * (max((100vw - var(--container-max)) / 2, 0px) + var(--container-px)));
    padding-inline: clamp(1.5rem, 4vw, 4rem);
    margin-block: clamp(2.5rem, 6vh, 4.5rem);
  }
  /* hairline com quadradinho laranja na ponta (motivo Enerblock) */
  .sbs .sb-rule {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
  }
  .sbs .sb-square {
    width: 8px;
    height: 8px;
    background: var(--primary);
    flex-shrink: 0;
  }
  .sbs .sb-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0;
  }
  .sbs .sb-title--sm { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
  .sbs .sb-title--inverse { color: #FFFFFF; }
  .sbs .sb-lead {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0;
    max-width: 60ch;
  }
  .sbs .sb-num {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: clamp(0.9rem, 2vh, 1.4rem);
  }

  /* Nossa essência — layout do "About Section" do Framer:
     headline grande à esquerda | parágrafo à direita, capa ultrawide embaixo */
  .sb-ess-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 5vh, 3.5rem); /* texto vem DEPOIS da capa */
  }
  @media (min-width: 900px) {
    .sb-ess-head {
      grid-template-columns: 1.25fr 1fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: end;
    }
  }
  .sb-ess .sb-ess-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem);
    font-weight: var(--fw-semibold);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--text-strong);
    margin: 0;
  }
  .sb-ess .sb-ess-text {
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
    line-height: 1.5;
    color: #5E5F5C; /* cinza do componente original */
    margin: 0;
  }
  /* capa ultrawide (proporção do original: 5120x2400 ≈ 32:15), radius 24 */
  .sb-ess-cover {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
  }
  .sb-ess-cover img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    aspect-ratio: 32 / 11;   /* mais baixa que o original (32/15), largura intacta */
    object-fit: cover;
    display: block;
  }
  @media (max-width: 700px) {
    .sb-ess-cover { border-radius: 14px; }
    .sb-ess-cover img { aspect-ratio: 4 / 3; }
  }

  /* Localização estratégica: mapa de fundo (branco, sem labels) + véu + texto */
  .sb-loc {
    position: relative;
    isolation: isolate;
    height: min(800px, 90vh);
    padding-inline: 0;
    overflow: hidden;
  }
  .sb-loc-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #F4F4F2; /* cor dos tiles enquanto carregam */
  }
  /* véu branco translúcido por cima do mapa (efeito, não foco); não bloqueia o arrastar */
  .sb-loc-veil {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: rgba(250, 250, 248, 0.45);
    pointer-events: none;
  }
  .sb-loc-text {
    position: absolute;
    inset: 0;
    z-index: 501;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* bloco no centro exato da seção */
    text-align: center;
    padding-inline: clamp(1.5rem, 4vw, 4rem);
    pointer-events: none; /* o mapa continua arrastável por baixo */
  }
  .sb-loc-text .sb-title { margin-bottom: var(--space-4); }
  .sb-loc-text .sb-lead { max-width: 56ch; }
  .sb-loc-cta { margin: var(--space-6) 0 0; }
  .sb-loc-cta .btn { pointer-events: auto; } /* só o botão volta a ser clicável */
  /* faixa estreita na base: branco 100% embaixo → 0% em cima ("apaga" o mapa) */
  .sb-loc-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(90px, 14vh, 150px);
    z-index: 502;
    background: linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, #FAFAF8 100%);
    pointer-events: none;
  }
  /* pino clássico de mapa (gota de ponta pra baixo) laranja, com a plaquinha
     "Estamos aqui" flutuando em cima. A ponta do pino toca a coordenada exata. */
  .loc-marker { position: relative; }
  .loc-pin-drop {
    position: absolute;
    left: -15px;
    top: -36px; /* com a rotação, a ponta cai exatamente na âncora (0,0) */
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  }
  .loc-pin-drop::after {
    content: "";
    position: absolute;
    inset: 9px;
    background: #FFFFFF;
    border-radius: 50%;
  }
  .loc-flag {
    position: absolute;
    left: 0;
    top: -64px;
    transform: translateX(-50%);
    background: var(--primary);
    color: #FFFFFF;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    padding: 7px 12px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  }
  /* setinha da plaquinha apontando pro pino */
  .loc-flag::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--primary);
  }

  /* Linha WPC: texto centralizado emergindo de TRÁS do morro de grama (terra.png),
     que encosta no limite inferior da seção */
  /* pista de scroll: a altura extra (acima de 100vh) é o "tempo" da animação */
  .sb-wpc {
    position: relative;
    padding: 0; /* zera o padding global de section: era ele que criava a faixa
                   branca (o palco sticky parava 128px antes do fim da seção) */
    height: 200vh;
    margin-bottom: 0; /* a grama encosta na seção seguinte, sem gap */
  }
  .prose .sb-wpc + * { margin-top: 0; } /* zera também o respiro da seção seguinte */
  /* palco: trava na tela (sticky) enquanto a pista passa; a cena toca aqui */
  .sb-wpc-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sb-wpc-inner {
    position: relative;
    z-index: 1; /* ATRÁS da grama: o texto sobe por trás dela */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 760px;
    padding-inline: clamp(1.5rem, 4vw, 4rem);
    will-change: transform;
    transform: translateY(80vh); /* nasce bem abaixo do palco (atrás/embaixo da grama) */
    margin-bottom: 16vh; /* desloca a posição final do bloco pra CIMA (~8vh):
                            ele aparece mais cedo e descansa mais alto no palco */
  }
  .sb-wpc-inner > .wwa-pill { margin-bottom: var(--space-4); }
  .sb-wpc-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0 0 var(--space-4);
  }
  .sb-wpc-text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 56ch;
    margin: 0 0 var(--space-6);
  }
  .sb-wpc-cta { margin: 0; }
  .sb-wpc-terra {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100% !important;  /* 100% da largura do site, proporção preservada */
    height: auto !important;
    z-index: 2; /* camada ACIMA do conteúdo: o texto emerge de trás dela */
    pointer-events: none;
    transform-origin: 50% 100%; /* escala ancorada na BASE: o chão nunca descola */
    will-change: transform, filter;
  }

  /* Conversa direta com a engenharia: seção PRETA, linhas de contato + imagem */
  .sb-eng {
    background: #0A0A0A;
    color: #FFFFFF;
    padding-block: clamp(3.5rem, 8vh, 6rem);
  }
  .sb-eng-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
  }
  @media (min-width: 960px) {
    .sb-eng-grid { grid-template-columns: 1.25fr 1fr; }
  }
  .sb-eng .sb-eng-lead {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: #8A8A8A;
    margin: var(--space-5) 0 clamp(1.75rem, 4vh, 2.75rem);
    max-width: 52ch;
  }
  .sbs .sb-eng-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  .sb-eng-row {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 2vw, 2rem);
    padding-block: clamp(0.9rem, 1.8vh, 1.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important; /* vence o a{color} do CSS crítico */
    text-decoration: none;
    transition: color var(--t-base);
  }
  .sb-eng-list li:last-child .sb-eng-row { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .sb-eng-label {
    flex-shrink: 0;
    width: clamp(8rem, 14vw, 10.5rem);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8A8A8A;
  }
  .sb-eng-value {
    flex: 1;
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: var(--fw-medium);
    line-height: 1.3;
  }
  .sb-eng-arrow {
    flex-shrink: 0;
    align-self: center;
    color: rgba(255, 255, 255, 0.55);
    transition: transform var(--t-base), color var(--t-base);
  }
  a.sb-eng-row:hover { color: var(--primary-bright) !important; }
  a.sb-eng-row:hover .sb-eng-arrow { color: var(--primary-bright); transform: translateX(5px); }
  .sb-eng-media {
    margin: 0;
    min-height: 280px;
  }
  .sb-eng-media img {
    width: 100% !important;
    height: 100% !important; /* vence o img{height:auto} do CSS crítico */
    object-fit: cover;
    display: block;
  }

  /* Como trabalhamos: 5 passos entre as réguas animadas do hero */
  .sb-flow {
    padding-inline: 0; /* as réguas vão de borda a borda */
    margin-bottom: 0;  /* é a última seção do conteúdo: sem margem extra antes da CTA */
  }
  /* o invólucro do conteúdo (markdown) também perde o padding inferior nessa página */
  .section-tight:has(.sb-flow) { padding-bottom: clamp(0.5rem, 1.5vh, 1rem); }
  .sb-flow .sb-ticks { background-color: transparent; }
  .sb-flow-inner {
    padding: clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 6vh, 4rem);
  }
  /* cabeçalho centralizado (layout do "Get Started") */
  .sb-flow-head {
    text-align: center;
    margin-bottom: clamp(2.25rem, 5.5vh, 3.5rem);
  }
  .sb-flow-head .sb-title { margin-bottom: var(--space-3); }
  .sb-flow-head .sb-lead { margin-inline: auto; }
  .sbs .sb-flow-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1320px;
    margin-inline: auto;
  }
  @media (min-width: 640px) { .sbs .sb-flow-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .sbs .sb-flow-grid { grid-template-columns: repeat(5, 1fr); } }
  .sbs li.sb-flow-step {
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* quadradinho de ícone: cor chapada (variação do laranja por passo via --ic) */
  .sb-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--ic, var(--primary));
    color: #FFFFFF;
    margin-bottom: clamp(1rem, 2.2vh, 1.4rem);
  }
  .sb-flow-step .sb-num { margin-bottom: var(--space-2); }
  .sb-flow-step p {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
    max-width: 30ch;
  }

  /* Blocks de secao (setores que usam + outros compostos) */
  .produto-section-block { padding-block: clamp(3rem, 6vw, 5rem); }

  /* Pagina 404 */
  .error-page {
    padding-block: clamp(4rem, 8vw, 8rem);
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  .error-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
    max-width: 1100px;
    margin-inline: auto;
  }
  @media (min-width: 960px) {
    .error-content { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); }
  }
  .error-visual svg {
    width: 100%;
    height: auto;
    max-width: 480px;
  }
  .error-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--primary);
    padding: var(--space-2) var(--space-4);
    background: var(--primary-softer);
    border-radius: var(--r-full);
    margin-bottom: var(--space-5);
  }
  .error-title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-5);
  }
  .error-lead {
    font-size: var(--fs-lg);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    max-width: 56ch;
    margin-bottom: var(--space-8);
  }
  .error-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
  }
  .error-shortcuts {
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
  }
  .error-shortcuts-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
  }
  .error-shortcuts-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .error-shortcuts-list a {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .error-shortcuts-list a:hover {
    color: var(--primary);
    border-color: currentColor;
  }

  .produto-section h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-6);
  }
  .produto-section p { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-soft); max-width: 65ch; }

  .specs-table {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-card);
    margin-top: var(--space-6);
  }
  .specs-table th, .specs-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-soft);
  }
  .specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
  .specs-table th {
    background: var(--bg-soft);
    width: 40%;
    color: var(--text);
    font-weight: var(--fw-semibold);
  }
  .specs-table td {
    font-family: var(--font-mono);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
  }

  .bullet-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .bullet-list li {
    position: relative;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .bullet-list li::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: var(--r-full);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    flex-shrink: 0;
  }

  /* ============ FAQ — cards replicados do componente do Framer ============ */
  /* home: seção com lista centrada e estreita (~810px, como no canvas original) */
  .faq-home {
    background: var(--bg); /* mesma cor da seção Setores (#FAFAF8) */
    padding-block: clamp(2.5rem, 5vw, 4rem); /* mais compacto que o section padrão */
  }
  .faq-home .section-header { margin-bottom: var(--space-8); }
  .faq-home-wrap {
    max-width: 810px;
    margin-inline: auto;
  }
  .faq-home-more {
    margin-top: var(--space-5);
    text-align: center;
  }
  /* Cards mais justos só na home (a página /faq/ mantém o respiro maior) */
  .faq-home .faq-list { gap: var(--space-2); }
  .faq-home .faq-question { padding: var(--space-4) var(--space-5); }
  .faq-home .faq-answer { padding: 0 var(--space-5) var(--space-5); }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .faq-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 22px;
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color var(--t-base), background var(--t-base);
  }
  .faq-item:has(details[open]) {
    border-color: rgba(0, 0, 0, 0.28);
  }
  .faq-details { width: 100%; }
  .faq-question {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-6);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    transition: background var(--t-fast);
  }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question:hover { background: rgba(0, 0, 0, 0.02); }
  /* ícone "+" fino, sem moldura (gira pra virar "×" quando abre) */
  .faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-strong);
    transition: transform var(--t-base);
  }
  .faq-details[open] .faq-icon {
    transform: rotate(45deg);
  }
  .faq-answer {
    padding: 0 var(--space-6) var(--space-6);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    font-size: var(--fs-base);
    max-width: 60ch;
  }
  .faq-answer p { color: var(--text-soft); }
  .faq-category {
    margin-top: var(--space-14);
  }
  .faq-category:first-of-type { margin-top: 0; }
  .faq-category-title {
    margin-bottom: var(--space-6);
    font-size: var(--fs-2xl);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tighter);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-weight: var(--fw-semibold);
  }
  .faq-category-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-softer);
    color: var(--primary);
    border-radius: var(--r-md);
    border: 1px solid var(--primary-soft);
  }

  /* ============ Page header ============ */
  /* Post meta com icones */
  .post-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }
  .post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .post-meta-icon {
    display: inline-flex;
    color: var(--primary);
  }

  /* Background patterns SVG sutis para sections */
  .has-grid-bg {
    position: relative;
    isolation: isolate;
  }
  .has-grid-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/decoration/grid-pattern.svg");
    background-repeat: repeat;
    background-size: 80px 80px;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 70%);
    z-index: -1;
    pointer-events: none;
  }
  .has-dots-bg {
    position: relative;
    isolation: isolate;
  }
  .has-dots-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/decoration/dots-pattern.svg");
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
  }
  /* Decoracao sutil de header de pagina */
  .page-header {
    /* topo enxuto, mesma medida do hero das páginas de produto */
    padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vw, 5rem);
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    pointer-events: none;
  }
  .page-header-inner { position: relative; max-width: 880px; }
  .page-eyebrow { margin-bottom: var(--space-5); }
  .page-title {
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.035em;
    line-height: 1.02;
  }
  .page-subtitle {
    margin-top: var(--space-5);
    font-size: var(--fs-xl);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    max-width: 58ch;
  }

  /* ============ Prose ============ */
  .prose { max-width: 760px; font-size: var(--fs-base); line-height: var(--lh-relaxed); }
  .prose > * + * { margin-top: var(--space-5); }
  .prose h2 {
    margin-top: var(--space-12);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tighter);
  }
  .prose h3 { margin-top: var(--space-8); font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
  .prose h4 { margin-top: var(--space-6); font-size: var(--fs-lg); }
  .prose ul, .prose ol {
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .prose ul { list-style: none; }
  .prose ul li { position: relative; padding-left: var(--space-5); }
  .prose ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 8px; height: 2px;
    background: var(--primary-bright);
    border-radius: 2px;
  }
  .prose ol {
    list-style: decimal;
    color: var(--text-soft);
  }
  .prose ol li::marker { color: var(--primary-bright); font-weight: var(--fw-semibold); }
  .prose blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-7);
    background: var(--bg-soft);
    border-left: 3px solid var(--primary-bright);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-lg);
    color: var(--text);
    font-style: italic;
  }
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-soft);
    padding: 0.15em 0.4em;
    border-radius: var(--r-xs);
    color: var(--primary-deep);
  }

  /* ============ Aplicacao page ============ */
  .aplicacao-page > .container > * + * { margin-top: var(--space-12); }
  .aplicacao-page figure img,
  .aplicacao-page figure picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .aplicacao-gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .aplicacao-gallery-item {
    margin: 0;
    background: var(--bg-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4 / 3;
    position: relative;
  }
  .aplicacao-gallery-item img,
  .aplicacao-gallery-item picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .aplicacao-gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(180deg, transparent, rgba(26,26,26,0.85));
    color: #FFFFFF;
    padding: var(--space-4) var(--space-3) var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    opacity: 0;
    transition: opacity var(--t-base);
  }
  .aplicacao-gallery-item:hover figcaption { opacity: 1; }

  /* ============ Glossario ============ */
  .glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
  .glossary-term {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    transition: all var(--t-base);
  }
  .glossary-term:hover {
    border-color: var(--text-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .glossary-term dt {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-tight);
  }
  .glossary-term dd {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
  }

  /* ============ Blog ============ */
  .post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: all var(--t-base);
  }
  .post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--text-strong);
  }
  .post-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
    color: inherit;
    height: 100%;
  }
  .post-card-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
  }
  .post-card-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
  }
  .post-card-excerpt {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
  }

  .post-article {
    padding-block: var(--space-16);
  }
  .post-article-header {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-12);
  }
  .post-article-title {
    font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .post-article-meta {
    display: inline-flex;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--space-5);
  }
  .post-article-body {
    max-width: 740px;
    margin-inline: auto;
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
  }
  .post-article-body > * + * { margin-top: var(--space-6); }
  .post-article-body h2 {
    margin-top: var(--space-12);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tighter);
  }
  .post-article-body h3 { margin-top: var(--space-10); font-size: var(--fs-xl); }
  .post-article-body p { color: var(--text); }
  .post-article-body ul, .post-article-body ol {
    padding-left: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .post-article-body ul { list-style: none; }
  .post-article-body ul li { position: relative; padding-left: var(--space-5); }
  .post-article-body ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 10px; height: 2px;
    background: var(--primary-bright);
  }
  .post-article-body ol { list-style: decimal; }

  /* ============ Diferenciais grid (Home) ============ */
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  @media (min-width: 720px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .features-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .feature {
    padding: var(--space-7);
    border-radius: var(--r-xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all var(--t-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
  }
  .feature-number {
    font-size: var(--fs-2xs);
    color: var(--primary-bright);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
  }
  .feature-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-2);
  }
  .feature-text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
  }

  /* ============ Trust strip (logo bar / numeros) ============ */
  .trust-strip {
    padding-block: var(--space-12);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
  }
  .trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    text-align: center;
  }
  @media (min-width: 768px) {
    .trust-strip-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .trust-stat-value {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    font-weight: var(--fw-bold);
    font-family: var(--font-mono);
    color: var(--text-strong);
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .trust-stat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--fw-medium);
    margin-top: var(--space-2);
  }
}

/* ============================================================================ */
/* MICRO-INTERACOES SOBRIAS (industrial B2B, sem cursor decorativo)             */
/* ============================================================================ */
@layer components {
  /* Hero visual: tilt removido. Mantem so um lift sutil no hover. */
  .hero-visual {
    transition: transform var(--t-slow), box-shadow var(--t-slow);
  }
  .hero-visual:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2xl);
  }
}

/* ============================================================================ */
/* ANIMATIONS                                                                   */
/* ============================================================================ */
@layer animations {

  /* Reveal on scroll */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
  .reveal-delay-4 { transition-delay: 320ms; }
  .reveal-delay-5 { transition-delay: 400ms; }
  .reveal-delay-6 { transition-delay: 480ms; }

  /* Reveal GLOBAL com desfoque (aplicado via JS em textos, botões, imagens e cards
     de todas as páginas): entra desfocado e clareia ao entrar na viewport, e
     REVERTE (desfoca de volta) quando o elemento sai da tela — igual a headline
     do "Por que Polyblu". Delay de stagger só na entrada. */
  .fx-reveal {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(16px);
    transition: opacity 1200ms var(--ease-out), filter 1200ms var(--ease-out), transform 1200ms var(--ease-out);
    transition-delay: 0ms;
  }
  .fx-reveal.is-in {
    opacity: 1;
    filter: none;
    transform: none;
    transition-delay: var(--fx-d, 0ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .fx-reveal { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  }
  /* Palavra do reveal progressivo (todos os textos do site): desfocada e apagada,
     vai clareando palavra por palavra conforme o progresso do scroll — o mesmo
     efeito da headline do "Por que Polyblu", reversível ao subir */
  .uwx {
    display: inline-block;
    filter: blur(8px);
    opacity: 0.18;
    transition: filter 700ms var(--ease-out), opacity 700ms var(--ease-out);
  }
  .uwx.on {
    filter: none;
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .uwx { filter: none !important; opacity: 1 !important; transition: none !important; }
  }

  /* Stagger children */
  .stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  .stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  .stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; }
  .stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; }
  .stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  .stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; }
  .stagger-children.is-visible > *:nth-child(7) { transition-delay: 480ms; }
  .stagger-children.is-visible > *:nth-child(8) { transition-delay: 560ms; }

  /* Float animation pra elementos decorativos */
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
  }
  .float { animation: float 6s ease-in-out infinite; }

  /* Gradient shift animation */
  @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease-in-out infinite;
  }
}

/* ============================================================================ */
/* UTILITIES                                                                    */
/* ============================================================================ */
@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .text-center { text-align: center; }
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }
  .mx-auto { margin-inline: auto; }
  .full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}