/* =====================================================================
   hidrautig.css — Sistema de design "Ficha Tecnica Hidraulica"
   Standalone: nao depende de style.css/responsivo.css/refresh.css.
   Usado por index-redesign.html (preview nao destrutivo).

   Conceito: pagina como painel de instrumentos / ficha de engenharia.
   Paleta oficial da marca: preto/419 C + 427 C (cinza) + branco + 3546 C (vermelho).
   ===================================================================== */

/* ---------- Tokens (paleta oficial Hidrautig) ---------- */
:root{
    --black:#000000;       /* All Black */
    --ink:#212322;         /* Pantone 419 C — near-black quente/neutro */
    --ink-800:#2b2d2c;
    --ink-700:#383b3a;
    --ink-500:#565958;
    --grey:#64686a;        /* cinza médio, texto secundário */
    --grey-200:#c9cccd;    /* cinza claro (família 427 C) */
    --grey-427:#d0d3d4;    /* Pantone 427 C */
    --line:#e2e4e5;        /* hairline (427 C clareado) */
    --paper:#f1f2f3;       /* fundo de página (427 C bem claro) */
    --surface:#ffffff;     /* White 100% */

    --red:#cd001a;         /* Pantone 3546 C — acento único */
    --red-deep:#a30015;
    --red-tint:#fbe6e9;

    --radius:3px;          /* quase reto — chapa metalica */
    --radius-lg:8px;

    --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
    --shadow-md:0 22px 48px -24px rgba(0,0,0,.4);

    --ease:cubic-bezier(.22,.68,.24,1);

    --display:"Archivo Expanded","Archivo",system-ui,sans-serif;
    --body:"Archivo",system-ui,-apple-system,sans-serif;
    --mono:"Space Mono",ui-monospace,Consolas,monospace;

    --gutter:clamp(20px, 5vw, 64px);
    --maxw:1240px;
}

/* ---------- Reset enxuto ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--red-tint); color:var(--ink); }

a:focus-visible, button:focus-visible{
    outline:2px solid var(--red);
    outline-offset:3px;
    border-radius:var(--radius);
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ---------- Utilitario: rótulo técnico monoespaçado (eyebrow) ---------- */
.kicker{
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--red);
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.kicker::before{
    content:"";
    width:22px; height:2px;
    background:var(--red);
    display:inline-block;
}
/* Em fundos escuros o rótulo fica claro p/ contraste; o tick segue vermelho */
.hero .kicker, .subhero .kicker, .panel .kicker{ color:var(--grey-200); }

/* ---------- Tipografia display ---------- */
.h-xl{ font-family:var(--display); font-weight:800; line-height:.98; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word; }
.h-lg{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.015em; text-wrap:balance; overflow-wrap:break-word; }
.h-md{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.01em; overflow-wrap:break-word; }
.hero__title, .subhero h1, .svc__head h2, .panel__head h2, .slab h2,
.flow__head h2, .cta h2, .about__text h2, .mv__head h2, .mv__card h3{ overflow-wrap:break-word; }

/* =====================================================================
   HEADER  (reutiliza IDs/classes dos scripts existentes)
   ===================================================================== */
#header{
    position:fixed; inset:0 0 auto 0; z-index:1000;
    padding:22px 0;
    transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
#header .interface{
    width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}
#header .logo{ display:flex; align-items:center; }
#header .logo img{ height:30px; width:auto; }   /* logo horizontal (marca + wordmark) */
#header .logo .logo-preta{ display:none; }

#header .menu-desktop ul{ list-style:none; display:flex; gap:38px; }
#header .menu-desktop a{
    font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.82); transition:color .2s var(--ease); position:relative; padding:4px 0;
}
#header .menu-desktop a::after{
    content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red);
    transition:width .25s var(--ease);
}
#header .menu-desktop a:hover{ color:#fff; }
#header .menu-desktop a:hover::after{ width:100%; }

.btn-contato button{
    font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
    background:var(--red); color:#fff; border:0; padding:13px 22px; border-radius:var(--radius);
    transition:background .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn-contato button:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn-contato button:active{ transform:translateY(0); }

/* Header solidificado ao rolar (script adiciona .rolar) */
#header.rolar{ background:var(--surface); padding:14px 0; box-shadow:0 1px 0 var(--line), 0 8px 24px -18px rgba(0,0,0,.5); }
#header.rolar .logo .logo-branca{ display:none; }
#header.rolar .logo .logo-preta{ display:block; }
#header.rolar .menu-desktop a{ color:var(--ink-700); }
#header.rolar .menu-desktop a:hover{ color:var(--ink); }

/* Botao hamburguer (reutiliza .line-menumob-1/2 e .ativo1/.ativo2) */
.btn-menu-mob{ display:none; position:relative; z-index:1200; }
.btn-menu-mob div{ width:28px; height:2.5px; background:#fff; margin:7px 0; transition:.25s var(--ease); }
.btn-menu-mob .line-menumob-2{ width:20px; }
#header.rolar .btn-menu-mob div{ background:var(--ink); }
.btn-menu-mob .line-menumob-1.ativo1{ transform:rotate(45deg) translate(6px,6px); background:#fff; }
.btn-menu-mob .line-menumob-2.ativo2{ transform:rotate(-45deg) translate(5px,-5px); width:28px; background:#fff; }

/* Menu mobile (reutiliza #menu-mobile + .abrir) */
.menu-mobile{
    position:fixed; inset:0; z-index:1100; background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    clip-path:circle(0% at 100% 0); transition:clip-path .5s var(--ease);
}
.menu-mobile.abrir{ clip-path:circle(150% at 100% 0); }
.menu-mobile ul{ list-style:none; text-align:center; }
.menu-mobile a{
    font-family:var(--display); font-weight:700; font-size:clamp(28px,7vw,44px);
    color:#fff; display:block; padding:16px 0; transition:color .2s var(--ease);
}
.menu-mobile a:hover{ color:var(--red); }
body.no-overflw{ overflow:hidden; }

/* =====================================================================
   HERO — tese: colocar a maquina de volta sob pressao/servico
   ===================================================================== */
.hero{
    position:relative; min-height:100svh; display:flex; flex-direction:column;
    background:var(--ink);
    color:#fff; overflow:hidden;
}
.hero__main{ flex:1; display:flex; align-items:center; }
.hero__bg{
    position:absolute; inset:0;
    background-image:url("../imagens/47.png");
    /* base (mobile/tablet): cover garante que nao falte imagem; bandeira centralizada */
    background-size:cover; background-position:48% 26%;
    filter:grayscale(.15) contrast(1.02);
}
/* desktop: zoom bem leve + reposiciona a bandeira p/ a direita */
@media (min-width:900px){
    .hero__bg{ background-size:125% auto; background-position:10% 38%; }
}
.hero__scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(33,35,34,.9) 38%, rgba(33,35,34,.25) 78%, rgba(33,35,34,.55) 100%),
      linear-gradient(0deg, rgba(33,35,34,.72) 0%, rgba(33,35,34,0) 40%);
}
.hero .wrap{ position:relative; z-index:2; padding-top:120px; padding-bottom:56px; }
.hero__grid{ max-width:760px; }
.hero__title{ font-size:clamp(2.7rem, 7vw, 5.3rem); margin:22px 0 20px; }
.hero__title em{ font-style:normal; color:var(--red); }
.hero__title .lift{ display:block; }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--grey-200); max-width:56ch; }
.hero__sub strong{ color:#fff; font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn{
    font-family:var(--mono); font-size:14px; letter-spacing:.05em; text-transform:uppercase;
    padding:16px 26px; border-radius:var(--radius); border:2px solid transparent;
    display:inline-flex; align-items:center; gap:10px;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* Faixa de dados no rodapé do hero (spec strip) */
.hero__strip{
    position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
}
.hero__strip .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-block:20px; }
.spec{ font-family:var(--mono); }
.spec b{ display:block; font-size:clamp(18px,2.2vw,24px); color:#fff; font-weight:700; letter-spacing:-.01em; }
.spec span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.spec i{ font-style:normal; color:var(--red); }

/* =====================================================================
   SERVICOS — cartoes ficha-tecnica (categorias, sem numeracao de passo)
   ===================================================================== */
.svc{ padding:clamp(72px,9vw,120px) 0; background:var(--paper); }
.svc__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.svc__head h2{ font-size:clamp(2rem,4vw,3.1rem); }
.svc__head p{ color:var(--grey); max-width:38ch; }

.svc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--grey-427); }
.card__media{ position:relative; aspect-ratio:4/3; background:var(--ink-800); overflow:hidden; }
.card__media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--red); z-index:1; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__code{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--red); text-transform:uppercase; }
.card__body h3{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; }
.card__body p{ color:var(--grey); font-size:.95rem; flex:1; }
.card__link{
    font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    border-bottom:2px solid var(--red); padding-bottom:3px; transition:gap .2s var(--ease);
}
.card__link:hover{ gap:14px; }

/* =====================================================================
   OLEOS & LUBRIFICANTES — cards ficha-tecnica (spec como protagonista)
   ===================================================================== */
.oils{ padding:clamp(72px,9vw,120px) 0; background:var(--surface); border-top:1px solid var(--line); }
.oils__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.oils__head h2{ font-size:clamp(2rem,4vw,3.1rem); }
.oils__head p{ color:var(--grey); max-width:38ch; }

.oils__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.oil{
    display:flex; flex-direction:column;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.oil:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--grey-427); }
.oil__media{ position:relative; aspect-ratio:1/1; background:#141312; overflow:hidden; }
.oil__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
/* Faixa vermelha na base da foto — padroniza com os cards de Serviço */
.oil__media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--red); z-index:1; }
.oil:hover .oil__media img{ transform:scale(1.04); }
.oil__body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.oil__code{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--red); text-transform:uppercase; }
.oil__spec{
    font-family:var(--mono); font-weight:700; font-size:clamp(1.6rem,2.2vw,2rem);
    letter-spacing:-.01em; color:var(--ink); line-height:1;
}
.oil__body p{ color:var(--grey); font-size:.92rem; flex:1; }

.oils__note{
    margin-top:32px; font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--grey);
}
.oils__note a{
    color:var(--red); border-bottom:2px solid var(--red); padding-bottom:2px; white-space:nowrap;
    margin-left:6px; transition:opacity .2s var(--ease);
}
.oils__note a:hover{ opacity:.75; }

/* =====================================================================
   PAINEL DE INSTRUMENTOS — assinatura (stats como medidores de pressao)
   ===================================================================== */
.panel{ background:var(--ink); color:#fff; padding:clamp(72px,9vw,116px) 0; position:relative; }
.panel::before{
    content:""; position:absolute; inset:0; opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:100% 46px;
}
.panel .wrap{ position:relative; }
.panel__head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.panel__head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.panel__head .kicker{ color:var(--red); }
.gauges{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.gauge{ border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.gauge__num{
    font-family:var(--mono); font-weight:700; font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.02em; line-height:1;
    opacity:.32; transform:translateY(6px); filter:blur(2px);
    transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.gauge__num.counting{ opacity:1; transform:none; filter:blur(0); }
.gauge__num .count[data-target^="+"]::before{ content:"+"; color:var(--red); }
.gauge__label{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-200); margin-top:8px; }
.gauge__meter{ height:4px; background:rgba(255,255,255,.12); border-radius:2px; margin-top:18px; overflow:hidden; }
.gauge__meter i{ display:block; height:100%; width:0; background:var(--red); transition:width 1.3s var(--ease); }
.panel.is-in .gauge__meter i{ width:var(--fill,70%); }

/* =====================================================================
   FAIXA MAQUINAS (parallax) — CTA de peso
   ===================================================================== */
.slab{
    position:relative; min-height:460px; display:flex; align-items:center; justify-content:center; text-align:center;
    background-image:url("../imagens/51.png"); background-size:cover; background-position:center;
    background-attachment:fixed;
    color:#fff;
}
.slab__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82)); }
.slab .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; }
.slab h2{ font-size:clamp(2rem,4.5vw,3.4rem); }
.slab h2 em{ font-style:normal; color:var(--red); }
.slab p{ color:var(--grey-200); max-width:44ch; }

/* =====================================================================
   COMO FUNCIONA — sequencia real → numeracao 01/02/03 justificada
   ===================================================================== */
.flow{ padding:clamp(72px,9vw,120px) 0; background:var(--paper); }
.flow__head{ max-width:640px; margin-bottom:56px; }
.flow__head h2{ font-size:clamp(2rem,4vw,3.1rem); margin-top:20px; }
.flow__head p{ color:var(--grey); margin-top:14px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--ink); }
.step{ padding:34px 28px 34px 0; position:relative; }
.step__n{ font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.1em; color:var(--red); margin-bottom:20px; }
.step h3{ font-family:var(--display); font-weight:700; font-size:1.35rem; margin:22px 0 10px; letter-spacing:-.01em; }
.step h3 em{ font-style:normal; color:var(--grey); font-weight:400; }
.step p{ color:var(--grey); font-size:.95rem; }
.step img{ width:52px; height:52px; margin-bottom:8px; }

/* =====================================================================
   CONTATO — banda de fechamento
   ===================================================================== */
.cta{ background:var(--surface); padding:clamp(72px,9vw,120px) 0; border-top:1px solid var(--line); }
.cta .wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.cta h2{ font-size:clamp(2rem,4vw,3.2rem); }
.cta h2 em{ font-style:normal; color:var(--red); }
.cta p{ color:var(--grey); margin-top:16px; max-width:40ch; }
.cta__box{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; }
.cta__box .kicker{ margin-bottom:16px; }
.cta__box .btn{ width:100%; justify-content:center; margin-top:8px; }
.cta__note{ font-family:var(--mono); font-size:12px; color:var(--grey); letter-spacing:.04em; margin-top:16px; text-align:center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{ background:var(--ink); color:#fff; padding:64px 0 32px; }
.foot__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14); }
.foot__brand{ display:flex; align-items:center; }
.foot__brand .foot__logo{ height:30px; width:auto; }   /* logo horizontal (marca + wordmark) */
.foot__cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot__cols h4{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:14px; }
.foot__cols a{ display:block; color:var(--grey-200); padding:5px 0; transition:color .2s var(--ease); }
.foot__addr{ color:var(--grey-200); line-height:1.65; font-size:.92rem; margin-bottom:10px; max-width:26ch; }
.foot__cols a:hover{ color:var(--red); }
.foot__social{ display:flex; gap:12px; margin-top:8px; }
.foot__social a{ width:44px; height:44px; border:1.5px solid rgba(255,255,255,.24); border-radius:50%; display:grid; place-items:center; font-size:20px; color:#fff; transition:all .25s var(--ease); }
.foot__social a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; }
.foot__bottom p{ font-family:var(--mono); font-size:12px; color:var(--grey); letter-spacing:.04em; }

/* =====================================================================
   PAGINA SOBRE
   ===================================================================== */
.subhero{
    position:relative; background:var(--ink); color:#fff;
    padding:clamp(130px,16vw,180px) 0 clamp(56px,7vw,84px); overflow:hidden;
}
.subhero::after{
    content:""; position:absolute; right:-6%; top:0; bottom:0; width:52%;
    background:linear-gradient(120deg, transparent, rgba(205,0,26,.16));
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%); mask-image:linear-gradient(90deg,transparent,#000 60%);
    pointer-events:none;
}
.subhero .wrap{ position:relative; z-index:1; }
.subhero h1{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1; font-size:clamp(2.4rem,5.5vw,4.1rem); margin:20px 0 18px; text-wrap:balance; }
.subhero h1 em{ font-style:normal; color:var(--red); }
.subhero p{ color:var(--grey-200); max-width:58ch; font-size:clamp(1rem,1.4vw,1.15rem); }

.about{ padding:clamp(64px,8vw,110px) 0; background:var(--paper); }
.about__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
.about__text h2{ font-family:var(--display); font-weight:700; letter-spacing:-.015em; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.05; }
.about__text p{ color:var(--grey); margin-top:16px; }
.about__media{ position:relative; }
.about__media video, .about__media img{ width:100%; display:block; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-md); background:var(--ink); }
.about__tag{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); position:absolute; top:-30px; left:0; }

.mv{ padding:clamp(64px,8vw,110px) 0; background:var(--surface); border-top:1px solid var(--line); }
.mv__head{ margin-bottom:44px; }
.mv__head h2{ font-family:var(--display); font-weight:700; letter-spacing:-.015em; font-size:clamp(1.9rem,3.6vw,2.8rem); margin-top:18px; }
.mv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv__card{ background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius-lg); padding:clamp(26px,3vw,38px); }
.mv__card .kicker{ margin-bottom:16px; }
.mv__card h3{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; }
.mv__card p{ color:var(--grey); margin-top:12px; }

@media (max-width:860px){
    .about__grid{ grid-template-columns:1fr; }
    .about__media{ order:-1; }
    .about__tag{ position:static; display:block; margin-bottom:10px; }
    .mv__grid{ grid-template-columns:1fr; }
}

/* ---------- Onde estamos (localização) ---------- */
.loc{ padding:clamp(64px,8vw,110px) 0; background:var(--paper); border-top:1px solid var(--line); }
.loc__head{ margin-bottom:44px; }
.loc__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:stretch; }
.loc__map{
    border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--shadow-md); background:var(--surface); min-height:340px;
}
.loc__map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.loc__info{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:clamp(26px,3vw,36px); display:flex; flex-direction:column; gap:22px;
}
.loc__item{ border-left:3px solid var(--red); padding-left:14px; }
.loc__label{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.loc__item p{ color:var(--ink); margin-top:6px; line-height:1.5; }
.loc__info .btn{ margin-top:auto; justify-content:center; }
@media (max-width:860px){ .loc__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   REVEAL (progressive enhancement)
   ===================================================================== */
.reveal-ready .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready .reveal.in{ opacity:1; transform:none; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:940px){
    .svc__grid{ grid-template-columns:1fr 1fr; }
    .oils__grid{ grid-template-columns:1fr 1fr; }
    .gauges{ grid-template-columns:1fr 1fr; gap:34px 26px; }
    .cta .wrap{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; }
    .step{ border-right:0; border-bottom:1px solid var(--line); padding:28px 0; }
    .step:last-child{ border-bottom:0; }
}
@media (max-width:720px){
    #header .menu-desktop, #header .btn-contato{ display:none; }
    .btn-menu-mob{ display:block; }
    .svc__grid{ grid-template-columns:1fr; }
    .oils__grid{ grid-template-columns:1fr; }
    .hero__strip .wrap{ grid-template-columns:1fr 1fr; gap:20px 16px; }
    .slab{ background-attachment:scroll; }
    .foot__top{ flex-direction:column; }
}
@media (max-width:520px){
    /* Archivo Expanded é largo: reduz os display grandes p/ nao estourar */
    .hero__title{ font-size:2.35rem; }
    .subhero h1{ font-size:2.1rem; }
    .svc__head h2, .flow__head h2, .cta h2, .panel__head h2, .slab h2,
    .about__text h2, .mv__head h2{ font-size:1.7rem; }
    .gauge__num{ font-size:1.9rem; }
}
@media (max-width:400px){
    .hero__strip .wrap{ grid-template-columns:1fr; }
    .gauges{ grid-template-columns:1fr; }
}

/* ---------- Protecao contra copia (dissuasao — nao e infalivel) ---------- */
body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
img{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none; pointer-events:auto; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto !important; }
    .reveal-ready .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .panel.is-in .gauge__meter i{ transition:none; }
    .gauge__num{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
    .card:hover, .card:hover .card__media img, .btn:hover, .btn-contato button:hover{ transform:none; }
}