/* ============ TOKENS ============ */
  :root{
    --paper: #EBE7DD;
    --paper-dark: #DFDACD;
    --graphite: #22252A;
    --graphite-soft: #2C3036;
    --blueprint: #1C4E66;
    --blueprint-light: #3D7896;
    --steel: #767C86;
    --steel-light: #ABB0B7;
    --oxide: #C1571A;
    --oxide-dark: #9C4514;
    --whatsapp: #25D366;
    --whatsapp-dark: #1DA851;
    --ink: #1B1B1A;
    --white: #FFFFFF;
    --font-display: 'Oswald', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', Arial, sans-serif;
    --container: 1180px;
    --header-h: 84px;
  }

  /* ============ RESET ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;}
  img,svg{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none; margin:0; padding:0;}
  h1,h2,h3,h4,p{margin:0;}
  button{font:inherit; cursor:pointer;}
  input,textarea,select{font:inherit;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  section{ scroll-margin-top: var(--header-h); }

  .container{
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:24px;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.08;
    letter-spacing:-0.01em;
  }

  h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }
  h3{ font-size:clamp(1.2rem, 1.8vw, 1.45rem); font-weight:600;}

  .eyebrow{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    color:var(--oxide);
    margin-bottom:10px;
    display:block;
  }

  .lede{
    font-size:1.08rem;
    color:var(--graphite-soft);
    max-width:56ch;
  }
  section.on-dark .lede{ color:var(--steel-light); }

  .section-head{ margin-bottom:44px; max-width:640px; }
  .section-head.center{ margin-inline:auto; text-align:center; }

  :focus-visible{
    outline:3px solid var(--oxide);
    outline-offset:3px;
  }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border-radius:2px;
    font-weight:600;
    font-size:0.98rem;
    font-family:inherit;
    background:none;
    color:inherit;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn--primary{ background:var(--oxide); color:var(--white); }
  .btn--primary:hover{ background:var(--oxide-dark); }
  .btn--ghost-dark{ border-color:var(--paper); color:var(--paper); }
  .btn--ghost-dark:hover{ background:rgba(235,231,221,.08); }
  .btn--ghost-light{ border-color:var(--graphite); color:var(--graphite); }
  .btn--ghost-light:hover{ background:rgba(34,37,42,.06); }
  .btn--whatsapp{ background:var(--whatsapp); color:var(--white); }
  .btn--whatsapp:hover{ background:var(--whatsapp-dark); }
  .btn--block{ width:100%; justify-content:center; }

  /* ============ TECH FRAME (motivo recorrente) ============ */
  .tech-frame{
    position:relative;
    padding:22px;
  }
  .tech-frame::before,
  .tech-frame::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:2px solid var(--blueprint);
    pointer-events:none;
  }
  .tech-frame::before{ top:0; left:0; border-right:none; border-bottom:none; }
  .tech-frame::after{ bottom:0; right:0; border-left:none; border-top:none; }
  section.on-dark .tech-frame::before,
  section.on-dark .tech-frame::after{ border-color:var(--oxide); }

  /* ============ HEADER ============ */
  header{
    position:fixed;
    inset-block-start:0;
    inset-inline:0;
    height:var(--header-h);
    background:rgba(235,231,221,.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--steel-light);
    z-index:100;
  }
  .nav-wrap{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:24px;
  }
  /* LOGO: substituir por <img src="logo.svg" alt="ASF Usinagem"> quando a logo real chegar */
  .logo{ font-family:var(--font-display); font-size:1.4rem; display:flex; align-items:baseline; gap:6px; }
  .logo b{ color:var(--blueprint); font-weight:700; }
  .logo span{ color:var(--ink); font-weight:400; }

  nav.primary-nav ul{ display:flex; gap:28px; align-items:center; }
  nav.primary-nav a{
    font-size:0.96rem;
    font-weight:500;
    color:var(--graphite-soft);
    position:relative;
    padding-block:4px;
  }
  nav.primary-nav a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:-2px;
    height:2px; background:var(--oxide);
    transition:right .2s ease;
  }
  nav.primary-nav a:hover::after,
  nav.primary-nav a.active::after{ right:0; }

  .header-actions{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none;
    background:none; border:none;
    width:40px; height:40px;
    align-items:center; justify-content:center;
  }
  .nav-toggle svg{ stroke:var(--ink); }

  @media (max-width:900px){
    nav.primary-nav{
      position:fixed;
      top:var(--header-h);
      left:0; right:0;
      background:var(--paper);
      border-bottom:1px solid var(--steel-light);
      transform:translateY(-8px);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }
    nav.primary-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px; }
    nav.primary-nav li{ width:100%; border-bottom:1px solid rgba(118,124,134,.2); }
    nav.primary-nav a{ display:block; padding:14px 0; }
    header.nav-open nav.primary-nav{ opacity:1; pointer-events:auto; transform:translateY(0); }
    .header-actions .btn--primary-header{ display:none; }
    .nav-toggle{ display:flex; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    overflow:hidden;
    background:var(--graphite);
    color:var(--paper);
    padding-block: calc(var(--header-h) + 64px) 80px;
  }
  .hero .container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  .hero h1{ color:var(--white); margin-bottom:20px; }
  .hero .lede{ margin-bottom:32px; }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

  @media (max-width:900px){
    .hero .container{ grid-template-columns:1fr; }
    .hero-carousel{ order:2; }
  }

  /* ============ CARROSSEL DO HERO ============
     Usa os mesmos blocos visuais do carrossel da seção Produtos
     (.stage__grid, .stage__spotlight, .stage__vignette, .stage__frame,
     .frame-corner, .frame-led, .carousel-arrow, .has-flat-bg) para manter
     a identidade visual consistente entre os dois carrosséis. */
  .hero-carousel{ max-width:520px; margin-inline:auto; }

  .hero-carousel__stage-row{ position:relative; }
  .hero-carousel__viewport{ overflow:hidden; touch-action:pan-y; }
  .hero-carousel__track{
    display:flex;
    transition:transform .6s cubic-bezier(.22,.8,.32,1);
    will-change:transform;
  }
  .hero-carousel__track.no-transition{ transition:none; }

  .hero-slide{ flex:0 0 100%; min-width:0; }

  .hero-slide__stage{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 32%, var(--graphite-soft) 0%, var(--graphite) 65%, #15171a 100%);
  }
  .hero-slide__stage.tech-frame::before,
  .hero-slide__stage.tech-frame::after{ border-color:var(--oxide); }

  /* halo tipo "mesa giratoria" sob o produto */
  .hero-slide__ring{
    position:absolute; left:50%; bottom:16%;
    width:64%; height:14%;
    transform:translateX(-50%);
    border:1.5px solid rgba(193,87,26,.4);
    border-radius:50%;
    box-shadow:0 0 24px 2px rgba(193,87,26,.18);
  }

  /* aneis/pontos tecnicos ao redor do produto, preenchendo o espaco vazio
     do palco com uma composicao mais sofisticada (a rotacao lenta destes
     aneis e adicionada pelo animations.js, quando o GSAP estiver disponivel) */
  .hero-slide__orbits{ position:absolute; inset:0; width:100%; height:100%; }
  .hero-slide__orbits .orbit-line{ fill:none; stroke:var(--blueprint-light); stroke-width:1; opacity:.22; }
  .hero-slide__orbits .orbit-line--dashed{ stroke-dasharray:3 9; opacity:.18; }
  .hero-slide__orbits .orbit-dot{ fill:var(--oxide); opacity:.55; }

  .hero-slide__media{
    position:relative;
    z-index:1;
    width:58%;
    max-width:240px;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit;
  }
  .hero-slide__media::after{
    content:"";
    position:absolute; left:50%; bottom:6%; width:60%; height:14%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
    filter:blur(4px);
  }
  .hero-slide__media img{
    position:relative; z-index:1;
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
    transform-origin:50% 62%;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .hero-slide__media:hover img,
  .hero-slide__media:focus-visible img{ transform:scale(1.09); }

  .hero-slide__media.has-flat-bg{
    background:var(--paper);
    border-radius:8px;
    box-shadow:0 10px 22px rgba(0,0,0,.4);
    padding:12%;
  }
  .hero-slide__media.has-flat-bg::after{ display:none; }
  .hero-slide__media.has-flat-bg img{ filter:none; }

  .hero-slide__media:hover .stage__frame,
  .hero-slide__media:focus-visible .stage__frame{
    opacity:1;
    filter:drop-shadow(0 0 6px rgba(193,87,26,.5));
  }

  .hero-carousel .carousel-arrow--prev{ left:-4px; }
  .hero-carousel .carousel-arrow--next{ right:-4px; }
  @media (min-width:520px){
    .hero-carousel .carousel-arrow--prev{ left:-18px; }
    .hero-carousel .carousel-arrow--next{ right:-18px; }
  }

  .hero-carousel__panel{ text-align:center; padding:18px 12px 0; }
  .hero-carousel__panel .eyebrow{ color:var(--oxide); }
  .hero-carousel__panel h3{
    font-family:var(--font-display); font-weight:600; color:var(--white);
    font-size:clamp(1.1rem,2vw,1.35rem); margin:6px 0 8px;
  }
  .hero-carousel__panel p{
    color:var(--steel-light); font-size:.92rem; max-width:42ch; margin-inline:auto;
  }
  .hero-carousel__panel .btn{ margin-top:16px; }

  .hero-carousel__thumbs{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
  .hero-thumb{
    width:52px; height:52px; flex:none;
    border:1.5px solid var(--steel);
    background:radial-gradient(ellipse at 50% 35%, var(--graphite-soft) 0%, var(--graphite) 75%);
    display:flex; align-items:center; justify-content:center;
    padding:6px; cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
  }
  .hero-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
  .hero-thumb.has-flat-bg{ background:var(--paper); }
  .hero-thumb:hover{ transform:translateY(-2px); }
  .hero-thumb.is-active{ border-color:var(--oxide); box-shadow:0 0 0 2px rgba(193,87,26,.25); }

  @media (max-width:900px){
    .hero-carousel{ max-width:340px; }
  }

  /* ============ SOBRE ============ */
  .about{ padding-block:88px; }
  .about .container{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    align-items:start;
  }
  .about-facts{ display:grid; gap:18px; padding-top:8px; }
  .about-fact{ border-left:3px solid var(--blueprint); padding-left:16px; }
  .about-fact strong{ display:block; font-family:var(--font-display); font-size:1.05rem; }
  .about-fact span{ color:var(--steel); font-size:.94rem; }

  @media (max-width:800px){ .about .container{ grid-template-columns:1fr; } }

  /* ============ PRODUTOS (carrossel em destaque) ============ */
  .products-overview{ background:var(--paper-dark); padding-block:80px; }

  /* Carrossel mais estreito que o container, para ficar compacto e elegante,
     com bastante espaço ao redor do produto. */
  .product-carousel{ position:relative; max-width:600px; margin-inline:auto; }

  /* Em telas largas, aproveita o espaço vazio dos lados do carrossel com uma
     decoração técnica sutil (linhas, círculos, pequenos esquemas). Em telas
     estreitas não há espaço sobrando, então essas colunas ficam ocultas. */
  .products-stage-row{ display:block; }
  .products-deco{ display:none; }

  @media (min-width:1040px){
    .products-stage-row{
      display:grid;
      grid-template-columns:1fr minmax(0,600px) 1fr;
      align-items:center;
      gap:24px;
    }
    .products-deco{
      display:block;
      height:380px;
      opacity:.8;
    }
    .products-deco svg{ width:100%; height:100%; }
    .products-deco--right{ transform:scaleX(-1); }
  }

  .product-carousel__viewport{ overflow:hidden; touch-action:pan-y; }

  .product-carousel__track{
    display:flex;
    transition:transform .6s cubic-bezier(.22,.8,.32,1);
    will-change:transform;
  }
  .product-carousel__track.no-transition{ transition:none; }

  .product-slide{ flex:0 0 100%; min-width:0; padding:4px; }

  /* --- palco (stage): fundo tecnico escuro atras da foto do produto --- */
  .product-slide__stage{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 30%, var(--graphite-soft) 0%, var(--graphite) 62%, #15171a 100%);
  }
  .product-slide__stage.tech-frame::before,
  .product-slide__stage.tech-frame::after{ border-color:var(--oxide); }

  .stage__grid{
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(235,231,221,.16) 1px, transparent 1.4px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 45%, transparent 85%);
            mask-image:radial-gradient(ellipse at 50% 45%, #000 45%, transparent 85%);
    opacity:.55;
  }
  .stage__radar{ position:absolute; inset:0; width:100%; height:100%; }
  .stage__radar .radar-line{ fill:none; stroke:var(--blueprint-light); stroke-width:1; opacity:.22; }

  .stage__accent{
    position:absolute; top:14px; right:14px; width:78px; height:auto;
    fill:none; stroke:var(--blueprint-light); stroke-width:2; opacity:.22;
  }
  .stage__accent .accent-fill{ stroke:var(--oxide); }

  .stage__spotlight{
    position:absolute; inset:0;
    background:radial-gradient(circle at 50% 42%, rgba(235,231,221,.10), transparent 56%);
    transition:opacity .4s ease;
  }
  .product-slide__stage:hover .stage__spotlight,
  .product-slide__stage:focus-within .stage__spotlight{
    background:radial-gradient(circle at 50% 42%, rgba(235,231,221,.18), transparent 58%);
  }

  .stage__vignette{
    position:absolute; inset:0;
    box-shadow:inset 0 0 60px 10px rgba(0,0,0,.55);
    pointer-events:none;
  }

  /* --- botao com a foto do produto: compacto, bem centralizado --- */
  .product-slide__media{
    position:relative;
    z-index:1;
    width:42%;
    max-width:168px;
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit;
  }
  .product-slide__media::after{
    content:"";
    position:absolute; left:50%; bottom:0; width:64%; height:16%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
    filter:blur(4px);
  }
  .product-slide__media img{
    position:relative; z-index:1;
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
    transform-origin:50% 62%;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }

  /* Fotos sem transparência real (fundo já vem branco/liso): em vez de
     flutuar direto no palco escuro, ganham um "cartão" claro atrás,
     como uma foto impressa fixada na vitrine */
  .product-slide__media.has-flat-bg{
    background:var(--paper);
    border-radius:8px;
    box-shadow:0 10px 22px rgba(0,0,0,.4);
    padding:12%;
  }
  .product-slide__media.has-flat-bg::after{ display:none; }
  .product-slide__media.has-flat-bg img{ filter:none; }
  .product-slide__media:hover img,
  .product-slide__media:focus-visible img{
    transform:scale(1.09);
  }

  /* --- moldura "LED / circuito": construida so com CSS (bordas/cantos fixos),
     entao fica sempre reta, simetrica e centralizada, sem depender de escala de SVG --- */
  .stage__frame{
    position:absolute;
    inset:-14px;
    border:1.5px dashed var(--blueprint-light);
    border-radius:12px;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
  }
  .product-slide__media:hover .stage__frame,
  .product-slide__media:focus-visible .stage__frame{
    opacity:1;
    filter:drop-shadow(0 0 6px rgba(193,87,26,.5));
  }
  .stage__frame .frame-corner{
    position:absolute; width:16px; height:16px;
    border:2px solid var(--oxide);
  }
  .stage__frame .frame-corner--tl{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
  .stage__frame .frame-corner--tr{ top:-2px; right:-2px; border-left:none; border-bottom:none; }
  .stage__frame .frame-corner--bl{ bottom:-2px; left:-2px; border-right:none; border-top:none; }
  .stage__frame .frame-corner--br{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
  .stage__frame .frame-led{
    position:absolute; left:50%; width:6px; height:6px; margin-left:-3px;
    border-radius:50%; background:var(--oxide); opacity:0;
    transition:opacity .3s ease .1s;
  }
  .stage__frame .frame-led--top{ top:-3px; }
  .stage__frame .frame-led--bottom{ bottom:-3px; }
  .product-slide__media:hover .frame-led,
  .product-slide__media:focus-visible .frame-led{
    opacity:1;
    animation:led-pulse 1.6s ease-in-out infinite;
  }
  @keyframes led-pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

  /* --- painel de informacao: some por padrao, aparece ao passar o mouse
     (ou focar pelo teclado) em qualquer parte do palco --- */
  .product-slide__hover-info{
    position:absolute; left:0; right:0; bottom:0;
    z-index:2;
    padding:16px 96px 14px 16px;
    background:linear-gradient(to top, rgba(10,11,13,.92), rgba(10,11,13,.5) 65%, transparent);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  .product-slide__hover-info strong{
    display:block; font-family:var(--font-display); font-weight:600;
    font-size:1rem; color:var(--white); margin-bottom:4px;
  }
  .product-slide__hover-info p{
    margin:0; font-size:.85rem; color:var(--steel-light); max-width:40ch;
  }
  .product-slide__stage:hover .product-slide__hover-info,
  .product-slide__stage:focus-within .product-slide__hover-info{
    opacity:1;
    transform:translateY(0);
  }

  /* --- rotulo compacto, sempre visivel (some quando o painel acima aparece) --- */
  .product-slide__tag{
    position:absolute; left:14px; bottom:14px; z-index:2;
    padding:5px 11px; border-radius:3px;
    background:rgba(21,23,26,.7); border:1px solid rgba(235,231,221,.18);
    color:var(--paper); font-size:.78rem; font-weight:600;
    transition:opacity .2s ease;
  }
  .product-slide__stage:hover .product-slide__tag,
  .product-slide__stage:focus-within .product-slide__tag{ opacity:0; }

  /* --- botao "Ver detalhes": sempre visivel e clicavel, independente do hover --- */
  .product-slide__details-btn{
    position:absolute; right:14px; bottom:14px; z-index:3;
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 12px; border-radius:3px; border:none;
    background:var(--oxide); color:var(--white);
    font-size:.8rem; font-weight:600; font-family:inherit; cursor:pointer;
    transition:background-color .15s ease, transform .15s ease;
  }
  .product-slide__details-btn:hover{ background:var(--oxide-dark); transform:translateY(-1px); }
  .product-slide__details-btn svg{ width:12px; height:12px; }

  /* --- setas do carrossel --- */
  .carousel-arrow{
    position:absolute; top:38%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:1.5px solid var(--steel-light);
    color:var(--ink); z-index:3;
    transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .carousel-arrow svg{ width:18px; height:18px; }
  .carousel-arrow:hover{ background:var(--oxide); border-color:var(--oxide); color:var(--white); }
  .carousel-arrow--prev{ left:-6px; }
  .carousel-arrow--next{ right:-6px; }

  @media (min-width:700px){
    .carousel-arrow--prev{ left:-48px; }
    .carousel-arrow--next{ right:-48px; }
  }

  /* --- indicadores (dots) --- */
  .carousel-dots{ display:flex; justify-content:center; gap:10px; margin-top:16px; }
  .carousel-dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--steel-light); border:none; padding:0;
    transition:background-color .2s ease, transform .2s ease;
  }
  .carousel-dot.is-active{ background:var(--oxide); transform:scale(1.25); }

  @media (max-width:480px){
    .product-slide__hover-info{ padding-right:16px; }
    .product-slide__details-btn{ right:auto; left:14px; bottom:auto; top:14px; }
    .product-slide__tag{ display:none; }
  }

  /* ============ DETALHE DE PRODUTO ============ */
  .product-detail{ padding-block:96px; }
  .product-detail .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .product-detail.reverse .container{ direction:rtl; }
  .product-detail.reverse .container > *{ direction:ltr; }
  .product-detail ul.spec-list{ margin-top:22px; display:grid; gap:10px; }
  .product-detail ul.spec-list li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:.97rem; color:var(--graphite-soft);
  }
  .product-detail ul.spec-list li::before{
    content:""; width:8px; height:8px; margin-top:7px; background:var(--oxide); flex:none;
  }
  .product-detail .lede{ margin-top:18px; }
  .product-media{ background:rgba(28,78,102,.04); }
  .product-media svg .tline{ stroke:var(--blueprint); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .product-media svg .tline-thin{ stroke:var(--blueprint-light); stroke-width:1.4; fill:none; }
  .product-media svg .tdash{ stroke:var(--steel); stroke-width:1; stroke-dasharray:10 4 2 4; fill:none; }
  .product-media svg .tfill{ fill:var(--blueprint); }
  .photo-note{
    margin-top:16px; font-size:.85rem; color:var(--steel);
    display:flex; align-items:center; gap:8px;
  }

  @media (max-width:860px){
    .product-detail .container{ grid-template-columns:1fr; }
    .product-detail.reverse .container{ direction:ltr; }
    .product-detail .product-media{ order:-1; }
  }

  /* ============ GALERIA ============ */
  .gallery{ background:var(--paper-dark); padding-block:88px; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
  .gallery-grid.has-more-tile{ grid-template-columns:repeat(4,1fr); }
  .photo-slot{
    aspect-ratio:4/3;
    border:1.5px dashed var(--steel);
    background:rgba(118,124,134,.06);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; color:var(--steel); text-align:center; padding:16px;
  }
  .photo-slot svg{ width:30px; height:30px; stroke:var(--steel); }
  .photo-slot strong{ font-size:.88rem; font-weight:600; color:var(--graphite-soft); }
  .photo-slot span{ font-size:.78rem; }

  /* Fotos reais reaproveitadas dos produtos (mesmos arquivos do carrossel) */
  .photo-slot--photo{
    position:relative;
    overflow:hidden;
    border:none;
    padding:0;
    cursor:pointer;
    font:inherit;
    background:radial-gradient(ellipse at 50% 35%, var(--graphite-soft) 0%, var(--graphite) 75%);
  }
  .photo-slot--photo img{
    width:100%; height:100%;
    object-fit:contain;
    padding:22px;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .photo-slot--photo:hover img,
  .photo-slot--photo:focus-visible img{ transform:scale(1.06); }
  .photo-slot__label{
    position:absolute; left:10px; bottom:10px;
    padding:4px 10px; border-radius:3px;
    background:rgba(21,23,26,.7); color:var(--paper);
    font-size:.78rem; font-weight:600;
  }

  /* Fotos sem transparência real (fundo já vem branco/liso): cartão claro
     em vez do palco escuro, para não sobrar uma faixa branca estranha */
  .photo-slot--photo.has-flat-bg{ background:var(--paper); }
  .photo-slot--photo.has-flat-bg img{ filter:none; padding:16px; }

  /* Bloco "Ver mais": mesma base do photo-slot, com destaque em laranja
     para deixar claro que é clicável */
  .photo-slot--more{
    cursor:pointer;
    border-color:var(--oxide);
    color:var(--graphite-soft);
    transition:background-color .15s ease, border-color .15s ease;
  }
  .photo-slot--more svg{ stroke:var(--oxide); }
  .photo-slot--more strong{ color:var(--ink); font-family:var(--font-display); }
  .photo-slot--more:hover, .photo-slot--more:focus-visible{
    background:rgba(193,87,26,.08);
    border-color:var(--oxide-dark);
  }

  @media (max-width:820px){ .gallery-grid, .gallery-grid.has-more-tile{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }

  /* ============ DIFERENCIAIS ============ */
  .differentials{ position:relative; overflow:hidden; background:var(--graphite); color:var(--paper); padding-block:88px; }
  .differentials .container{ position:relative; z-index:1; }
  .diff-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:rgba(235,231,221,.14); margin-top:44px; }
  .diff-item{ background:var(--graphite); padding:32px; }
  .diff-item strong{ font-family:var(--font-display); font-size:1.15rem; display:block; margin-bottom:10px; color:var(--white); }
  .diff-item p{ color:var(--steel-light); font-size:.95rem; }

  @media (max-width:760px){ .diff-grid{ grid-template-columns:1fr; } }

  /* ============ CONTATO ============ */
  .contact{ padding-block:96px; }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .contact-channels{ display:grid; gap:14px; margin-top:28px; }
  .channel-row{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; border:1px solid var(--steel-light); background:var(--paper);
  }
  .channel-row svg{ width:22px; height:22px; stroke:var(--blueprint); flex:none; }
  .channel-row div strong{ display:block; font-size:.96rem; }
  .channel-row div span{ font-size:.88rem; color:var(--steel); }
  .channel-row.link:hover{ border-color:var(--blueprint); }

  .map-frame{ margin-top:28px; }
  .map-frame iframe{ width:100%; height:280px; border:0; filter:grayscale(.15); }

  .contact-form{ background:var(--paper-dark); padding:32px; }
  .form-row{ display:grid; gap:8px; margin-bottom:18px; }
  .form-row label{ font-size:.88rem; font-weight:600; }
  .form-row input, .form-row select, .form-row textarea{
    padding:12px 14px; border:1.5px solid var(--steel-light); background:var(--white);
    border-radius:2px;
  }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--blueprint); outline:none; }
  .form-note{ font-size:.82rem; color:var(--steel); margin-top:14px; }

  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

  /* ============ FOOTER ============ */
  footer{ position:relative; overflow:hidden; background:var(--graphite); color:var(--steel-light); padding-block:56px 28px; }
  footer .container{ position:relative; z-index:1; }
  .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px; }
  .footer-grid h4{ color:var(--paper); font-family:var(--font-display); font-size:1rem; margin-bottom:16px; font-weight:600; }
  .footer-grid ul{ display:grid; gap:10px; font-size:.92rem; }
  .footer-grid ul a:hover{ color:var(--paper); }
  .footer-logo{ font-family:var(--font-display); font-size:1.3rem; color:var(--paper); margin-bottom:14px; }
  .footer-logo b{ color:var(--oxide); }
  .footer-bottom{
    border-top:1px solid rgba(235,231,221,.14);
    padding-top:22px; font-size:.82rem;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

  /* ============ WHATSAPP FLUTUANTE ============ */
  .whatsapp-float{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:58px; height:58px; border-radius:50%;
    background:var(--whatsapp);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    transition:transform .15s ease;
  }
  .whatsapp-float:hover{ transform:scale(1.06); }
  .whatsapp-float svg{ width:28px; height:28px; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }

  }
  /* O script.js tambem verifica prefers-reduced-motion e desativa a animacao do .bg-fx via JS */


  /* ============ AJUSTES E CLASSES UTILITARIAS ============ */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .about-copy p{ margin-top:18px; }
  .about-copy p:first-child{ margin-top:0; }
  .alt-bg{ background:var(--paper-dark); }
  .tinted{ background:rgba(28,78,102,.05); }
  .product-media svg .tline-accent{ stroke:var(--oxide); }
  .footer-tagline{ max-width:38ch; font-size:.92rem; }

  /* ============ FUNDO INTERATIVO (CANVAS) ============
     Usado dentro das secoes escuras (hero, diferenciais, footer).
     O canvas fica atras do conteudo (z-index:0) e nunca captura
     cliques (pointer-events:none), entao nao interfere na navegacao. */
  .bg-fx{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    display:block;
    pointer-events:none;
  }

  /* ============ BRILHO AMBIENTE (sheen sutil, independente do cursor) ============
     Uma faixa diagonal muito discreta que varre lentamente as secoes escuras,
     lembrando o reflexo em uma superficie metalica escovada. Sempre no fundo,
     atras do canvas .bg-fx e do conteudo. */
  .hero::before,
  .differentials::before,
  footer::before{
    content:"";
    position:absolute;
    inset:-60% -20%;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(115deg, transparent 42%, rgba(235,231,221,.05) 50%, transparent 58%);
    background-size:220% 220%;
    animation:sheen-sweep 18s linear infinite;
  }

  @keyframes sheen-sweep{
    0%{ background-position:0% 0%; }
    100%{ background-position:100% 100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero::before,
    .differentials::before,
    footer::before{ animation:none; background-position:50% 50%; }
    .stage__frame .frame-rect,
    .stage__frame .frame-led{ animation:none; }

  }

  /* ============ MODAL DE PRODUTO ============ */
  body.modal-open{ overflow:hidden; }

  .product-modal{
    display:flex;
    position:fixed;
    inset:0;
    z-index:200;
    padding:24px;
    background:rgba(20,22,25,.72);
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility 0s linear .28s;
  }
  .product-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .28s ease, visibility 0s linear 0s;
  }

  .product-modal__panel{
    position:relative;
    background:var(--paper);
    width:100%;
    max-width:760px;
    max-height:88vh;
    overflow-y:auto;
    margin:auto;
    transform:translateY(14px) scale(.98);
    transition:transform .28s ease;
  }
  .product-modal.is-open .product-modal__panel{
    transform:translateY(0) scale(1);
  }

  .product-modal__close{
    position:absolute;
    top:14px; right:14px;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper-dark);
    border:1px solid var(--steel-light);
    color:var(--ink);
    z-index:2;
  }
  .product-modal__close:hover{ background:var(--oxide); border-color:var(--oxide); color:var(--white); }

  /* Foto do produto: todo produto de PRODUCTS tem uma foto real, então o
     "palco" escuro (para fotos com fundo transparente) já é o padrão aqui */
  .product-modal__media{
    aspect-ratio:16/9;
    border:none;
    background:radial-gradient(ellipse at 50% 35%, var(--graphite-soft) 0%, var(--graphite) 75%);
    display:flex; align-items:center; justify-content:center;
    padding:18px;
  }
  .product-modal__media img{
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
  }

  /* Fotos sem transparência real (fundo já vem branco/liso): cartão claro
     em vez do palco escuro */
  .product-modal__media.has-flat-bg{
    background:var(--paper);
  }
  .product-modal__media.has-flat-bg img{ filter:none; }

  .product-modal__body{ padding:26px 28px 28px; }
  .product-modal__body h3{ font-size:clamp(1.4rem,3vw,1.8rem); margin-bottom:12px; }
  .product-modal__body .lede{ max-width:none; margin-bottom:18px; }
  .product-modal__body h4{
    font-family:var(--font-display); font-weight:600; font-size:.98rem;
    margin:20px 0 8px; color:var(--blueprint);
  }
  .product-modal__body ul{ display:grid; gap:8px; margin-bottom:22px; }
  .product-modal__body ul li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:.95rem; color:var(--graphite-soft);
  }
  .product-modal__body ul li::before{
    content:""; width:8px; height:8px; margin-top:7px; background:var(--oxide); flex:none;
  }

  @media (max-width:560px){
    .product-modal{ padding:12px; }
    .product-modal__body{ padding:22px 18px 24px; }
  }

  /* ============ CAMADA "VER MAIS" (bottom sheet) ============
     Mostra os produtos que não cabem nos 3 primeiros espaços da Galeria.
     Sobe sobre a página (sem trocar de URL), com o fundo ainda visível,
     de forma discreta, atrás de um véu escuro. */
  .sheet-overlay{
    position:fixed;
    inset:0;
    z-index:210;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(20,22,25,.55);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .sheet-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .3s ease, visibility 0s linear 0s;
  }

  .sheet-panel{
    width:100%;
    max-width:900px;
    max-height:82vh;
    background:var(--paper);
    border-radius:20px 20px 0 0;
    overflow-y:auto;
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.22,.8,.32,1);
    padding-bottom:28px;
  }
  .sheet-overlay.is-open .sheet-panel{ transform:translateY(0); }

  .sheet-handle{
    width:44px; height:4px; border-radius:2px;
    background:var(--steel-light);
    margin:12px auto 2px;
  }

  .sheet-header{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px 16px;
    background:var(--paper);
    border-bottom:1px solid var(--steel-light);
    margin-bottom:20px;
  }
  .sheet-header h3{ font-size:1.15rem; }
  .sheet-close{
    width:36px; height:36px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper-dark); border:1px solid var(--steel-light);
    color:var(--ink); cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .sheet-close:hover{ background:var(--oxide); border-color:var(--oxide); color:var(--white); }

  .sheet-body{ padding:0 24px; }
  .sheet-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
    gap:14px;
  }
  .sheet-card{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:10px;
    background:var(--paper-dark);
    border:1px solid var(--steel-light);
    cursor:pointer; text-align:center; font:inherit;
    transition:border-color .15s ease, transform .15s ease;
  }
  .sheet-card:hover, .sheet-card:focus-visible{ border-color:var(--oxide); transform:translateY(-2px); }
  .sheet-card__media{
    width:100%;
    aspect-ratio:1/1;
    background:radial-gradient(ellipse at 50% 35%, var(--graphite-soft) 0%, var(--graphite) 75%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .sheet-card.has-flat-bg .sheet-card__media{ background:var(--paper); border:1px solid var(--steel-light); }
  .sheet-card__media img{
    max-width:82%; max-height:82%;
    object-fit:contain;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
  }
  .sheet-card.has-flat-bg .sheet-card__media img{ filter:none; max-width:92%; max-height:92%; }
  .sheet-card__name{ font-size:.82rem; font-weight:600; color:var(--ink); }

  @media (max-width:600px){
    .sheet-panel{ max-height:88vh; border-radius:18px 18px 0 0; }
    .sheet-grid{ grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); }
  }