/* ════════════════════════════════════════════════════════════════
   FORTSUL — sistema visual do catálogo 2025
   Fundo claro, faixa institucional e azul da marca, para que os
   produtos pretos apareçam como aparecem no catálogo impresso.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* papel */
  --paper:#FFFFFF; --paper-2:#F4F8FB; --paper-3:#E9F0F6;
  /* azuis da marca (faixa do catálogo / site antigo) */
  --navy:#052B47; --navy-2:#0A4571; --blue:#0B6FA9; --blue-2:#1B90BC; --ice:#AEDFF3;
  /* texto */
  --ink:#101A22; --body:#485663; --mute:#6B7986;
  /* traços */
  --line:#DBE4EC; --line-2:#EDF2F7; --amber:#B3730A;
  /* faixa do catálogo: preto → azul → gelo */
  --faixa:linear-gradient(90deg,#0C1418 0%,#0C1418 26%,#0A4571 52%,#2E8CC4 78%,#AEDFF3 100%);
  --sombra:0 1px 2px rgba(6,43,71,.06),0 10px 30px rgba(6,43,71,.07);
  --sombra-alta:0 2px 6px rgba(6,43,71,.08),0 22px 48px rgba(6,43,71,.14);
  /* fonte padrão da Fortsul (a do catálogo 2025): Fira Sans para tudo; --ff-m é a mesma
     fonte em peso médio, nos rótulos técnicos que antes eram mono */
  --ff-d:"Fira Sans",system-ui,sans-serif; --ff-m:"Fira Sans",system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--ff-d);overflow-x:hidden;line-height:1.5}
img{max-width:100%;display:block}
[hidden]{display:none!important}  /* .card usa display:flex e venceria o hidden do navegador */
a{color:inherit}

/* ══ atmosfera (bem discreta sobre o branco) ══ */
.field{position:fixed;inset:0;pointer-events:none;z-index:0}
.field::after{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 480px at 82% 2%,rgba(174,223,243,.16),transparent 62%),
             radial-gradient(900px 620px at 2% 94%,rgba(11,111,169,.04),transparent 60%)}
.grain{display:none}
.wrap{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:0 var(--gut)}

/* ══ header — a faixa institucional do catálogo ══ */
header{position:sticky;top:0;z-index:50;background:linear-gradient(100deg,#04263F 0%,#083A5E 58%,#0F5C8C 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 24px rgba(6,43,71,.16)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--faixa)}
.hd{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.wordmark{height:34px;width:auto;display:block;transition:opacity .25s}
.brand:hover .wordmark{opacity:.82}

nav{display:flex;gap:24px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(233,243,250,.74)}
nav>a,.drop>span{color:inherit;text-decoration:none;position:relative;padding:27px 0;display:block;transition:color .25s;cursor:pointer}
nav>a:hover,.drop:hover>span,nav>a[aria-current]{color:#fff}
nav>a::after,.drop>span::after{content:"";position:absolute;left:0;right:100%;bottom:22px;height:2px;background:var(--ice);transition:right .32s cubic-bezier(.2,.7,.2,1)}
nav>a:hover::after,.drop:hover>span::after,nav>a[aria-current]::after{right:0}
.drop{position:relative}
.drop ul{position:absolute;top:100%;left:-18px;min-width:290px;list-style:none;padding:8px 0;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s}
.drop:hover ul,.drop:focus-within ul{opacity:1;visibility:visible;transform:none}
.drop ul a{display:block;padding:9px 18px;text-decoration:none;font-size:10.5px;letter-spacing:.08em;color:var(--body);transition:.2s}
.drop ul a:hover{color:var(--navy);background:var(--paper-2)}
.hd-side{display:flex;align-items:center;gap:14px;flex:none}
.hd-fone{display:flex;flex-direction:column;gap:2px;font-family:var(--ff-m);font-weight:500;font-size:10.5px;
  color:rgba(233,243,250,.72);letter-spacing:.04em;text-align:right}
.hd-fone a{text-decoration:none;transition:color .2s}
.hd-fone a:hover{color:var(--ice)}
.burger{display:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.28);background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger s{display:block;width:15px;height:1px;background:#fff;text-decoration:none}

/* ══ botões ══ */
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;font-family:var(--ff-m);font-weight:500;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.3s;text-decoration:none;border:1px solid transparent}
.btn-a{background:var(--navy);color:#fff;font-weight:600}
.btn-a:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,111,169,.30)}
.btn-b{border-color:var(--line);color:var(--navy);background:var(--paper)}
.btn-b:hover{border-color:var(--blue);color:var(--blue);background:var(--paper-2)}
.btn svg{width:13px;height:13px;flex:none}

/* ══ hero (home) ══ */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px)}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--ff-m);font-weight:500;font-size:11px;color:var(--blue);margin-bottom:26px;letter-spacing:.04em}
.kicker s{flex:0 0 40px;height:2px;background:var(--faixa);text-decoration:none}
h1{font-size:clamp(38px,5.1vw,70px);line-height:.92;font-weight:800;letter-spacing:-.038em;color:var(--navy);
  font-variation-settings:"wdth" 116;text-transform:uppercase;margin-bottom:24px}
h1 em{font-style:normal;color:var(--blue)}
/* título do herói na letra da marca: Sofachrome Italic (Ray Larabie), o arquivo que a Fortsul
   usa no logotipo e nas estampas dos produtos ("PRODUTOS REFRIGERADOS"). Servida do próprio site. */
@font-face{font-family:"Sofachrome";src:url("../fonts/sofachrome-italic.woff2") format("woff2"),
  url("../fonts/sofachrome-italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
.hero h1{font-family:"Sofachrome",var(--ff-d);font-weight:400;font-style:italic;font-size:clamp(24px,3.3vw,46px);
  line-height:1.08;letter-spacing:.005em;font-variation-settings:normal;padding-right:.2em}
.slogan{font-size:clamp(17px,1.7vw,22px);line-height:1.3;font-weight:600;font-style:italic;color:var(--blue);
  letter-spacing:-.01em;margin:-6px 0 22px}
.lede{font-size:15.5px;line-height:1.66;color:var(--body);max-width:46ch;margin-bottom:34px}
.lede b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.stage{position:relative;display:grid;place-items:center;min-height:clamp(330px,44vw,470px)}
.ring{position:absolute;border-radius:50%;pointer-events:none;aspect-ratio:1}
.r1{width:min(92%,430px);border:1px solid rgba(11,111,169,.16)}
.r2{width:min(74%,340px);border:1px dashed rgba(11,111,169,.16);animation:spin 52s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.halo{position:absolute;width:min(86%,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(174,223,243,.42),rgba(244,248,251,0) 62%);filter:blur(18px)}
.prod{position:relative;z-index:3;max-height:clamp(250px,32vw,360px);max-width:min(84%,520px);width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(6,43,71,.24));animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floor{position:absolute;bottom:14%;width:min(58%,260px);height:18px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(6,43,71,.20),transparent 70%);filter:blur(9px);z-index:2}
/* selo 25 anos no lugar do produto (pedido de 28/09/2026): a imagem é o reserva; o canvas do
   assets/js/selo3d.js entra por cima quando o primeiro quadro 3D está pronto */
.stage-selo .selo{max-height:none;width:min(74%,400px);height:auto;filter:drop-shadow(0 22px 26px rgba(6,43,71,.26));transition:opacity .6s}
.selo3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;transition:opacity .8s;cursor:pointer;touch-action:pan-y}
.stage-selo.is-3d .selo3d{opacity:1}
.stage-selo.is-3d .selo{opacity:0}
/* fichas do herói: uma ao lado da outra, embaixo do produto (pedido do cliente em 15/09/2026) */
.chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:6px;position:relative;z-index:4}
.chip{background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--blue);padding:9px 13px;box-shadow:var(--sombra);white-space:nowrap}
.chip u{display:block;text-decoration:none;font-family:var(--ff-m);font-weight:500;font-size:9px;color:var(--mute);margin-bottom:3px}
.chip strong{font-family:var(--ff-m);font-size:14px;font-weight:500;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--navy)}
.chip strong i{font-style:normal;font-size:8.5px;color:var(--blue)}
.chip-temp{border-left-color:var(--amber)}
.c3 strong i{color:var(--amber)}

/* ══ seções ══ */
.sec{padding:clamp(64px,9vw,110px) 0}
.sec-sm{padding:clamp(44px,6vw,72px) 0}
.sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:44px}
h2{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.038em;text-transform:uppercase;color:var(--navy);
  font-variation-settings:"wdth" 114;line-height:.98}
h2 em{font-style:normal;color:var(--blue)}
.sec-hd p{font-size:13.5px;color:var(--body);max-width:42ch;line-height:1.65}

/* ══ cabeçalho de página interna — a faixa de linha do catálogo ══ */
.phead{position:relative;padding:clamp(34px,5vw,58px) 0 clamp(30px,3.4vw,44px);margin-bottom:2px;
  background:linear-gradient(100deg,#04263F 0%,#083A5E 62%,#0F5C8C 100%);color:#fff;overflow:hidden}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--faixa)}
.phead::before{content:"";position:absolute;top:-40%;right:-4%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(174,223,243,.22),transparent 64%)}
/* a trilha aparece sobre a faixa escura (.phead) e também solta no branco (ficha) */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--mute);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:20px;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--blue)}
.crumb i{font-style:normal;opacity:.5}
.phead .crumb{color:rgba(233,243,250,.7)}
.phead .crumb a{color:var(--ice)}
.phead h1{font-size:clamp(28px,4.2vw,54px);margin-bottom:16px;color:#fff}
.phead p{font-size:14px;color:rgba(233,243,250,.82);max-width:60ch;line-height:1.7}

/* ══ grid genérico de cards ══ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);padding:26px 24px 24px;position:relative;overflow:hidden;
  transition:box-shadow .4s,transform .4s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--faixa);
  opacity:0;transition:opacity .4s}
.card:hover{box-shadow:var(--sombra-alta);z-index:3}
.card:hover::after{opacity:1}
.card:hover .cimg img{transform:translateY(-9px) scale(1.04)}
.cline{display:flex;justify-content:space-between;gap:10px;margin-bottom:18px;font-family:var(--ff-m);font-size:9.5px;
  color:var(--blue);font-weight:500}
.cline u{text-decoration:none;color:var(--mute)}
/* o "chão" claro em degradê que o catálogo usa embaixo de cada produto */
.cimg{height:178px;display:grid;place-items:center;position:relative;margin-bottom:20px;
  background:linear-gradient(180deg,var(--paper) 66%,#EDF2F7 100%)}
.cimg::before{content:"";position:absolute;bottom:12px;width:128px;height:12px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(6,43,71,.22),transparent 72%);filter:blur(6px)}
/* teto de largura: a ilha (ICA), deitada, ficava enorme ao lado dos expositores de pé */
.cimg img{max-height:170px;max-width:min(100%,200px);width:auto;object-fit:contain;position:relative;transition:transform .6s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 12px 16px rgba(6,43,71,.18))}
.card h3{font-size:21px;font-weight:700;letter-spacing:-.03em;margin-bottom:14px;color:var(--navy);font-variation-settings:"wdth" 110}
.card>p{font-size:13px;color:var(--body);line-height:1.66;margin-bottom:16px}
.specs{border-top:1px solid var(--line);margin-top:auto}
.sp{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--ff-m);font-weight:500;font-size:10.5px;letter-spacing:.04em}
.sp u{text-decoration:none;color:var(--mute)}
.sp b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.go{margin-top:18px;display:flex;align-items:center;gap:8px;font-family:var(--ff-m);font-weight:500;font-size:10.5px;
  color:var(--blue);letter-spacing:.04em;opacity:0;transform:translateY(6px);transition:.42s}
.go svg{width:12px;height:12px;flex:none}
.card:hover .go{opacity:1;transform:none}
@media (hover:none){.go{opacity:1;transform:none}}

/* ══ filtros do catálogo ══ */
.filtros{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);flex-wrap:wrap;margin-bottom:34px}
.filtros button{flex:1 1 auto;background:var(--paper);border:0;color:var(--body);cursor:pointer;
  font-family:var(--ff-m);font-weight:500;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:15px 16px;transition:.28s}
.filtros button:hover{background:var(--paper-2);color:var(--navy)}
.filtros button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:inset 0 -3px 0 var(--ice)}
.vazio{padding:40px 0;font-family:var(--ff-m);font-weight:500;font-size:12px;color:var(--mute)}

/* ══ ficha de produto ══ */
.ficha{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(36px,5vw,64px) 0}
.ficha .stage{min-height:clamp(320px,38vw,440px);position:sticky;top:104px;
  background:linear-gradient(180deg,var(--paper) 68%,#EDF2F7 100%);border:1px solid var(--line)}
.ficha-info h2{margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--blue);
  border:1px solid var(--line);background:var(--paper-2);padding:6px 11px;text-transform:uppercase;
  letter-spacing:.04em;text-decoration:none;margin-bottom:22px}
.tag:hover{border-color:var(--blue)}
.bloco{margin-top:38px}
.bloco h4{font-family:var(--ff-m);font-size:10.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:12px;border-bottom:2px solid var(--line);margin-bottom:16px;font-weight:600}
.carac{list-style:none;display:grid;gap:11px}
.carac li{display:flex;gap:12px;font-size:13.5px;color:var(--body);line-height:1.6}
.carac li::before{content:"";flex:none;width:5px;height:5px;background:var(--blue);transform:rotate(45deg);margin-top:8px}
.tabela{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,3vw,40px)}
.tabela .sp{font-size:10px}
.notas{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.nota{font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--body);border:1px solid var(--line);background:var(--paper-2);
  padding:6px 10px;letter-spacing:.04em}
/* aviso "Em breve, uma nova versão": selo azul no card e na ficha */
.nota-aviso,.aviso{color:#fff;background:var(--blue);border-color:var(--blue);text-transform:uppercase}
.aviso{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--ff-m);font-weight:500;font-size:9.5px;letter-spacing:.06em;
  padding:5px 9px;box-shadow:0 6px 14px rgba(6,43,71,.18)}

/* ══ texto corrido ══ */
.prose{max-width:74ch;display:grid;gap:18px}
.prose p{font-size:14.5px;line-height:1.8;color:var(--body)}
.prose p b,.prose strong{color:var(--ink);font-weight:600}
.prose h3{font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);
  font-variation-settings:"wdth" 112;margin-top:22px}
.prose ul{list-style:none;display:grid;gap:10px}
.prose li{display:flex;gap:12px;font-size:14px;color:var(--body);line-height:1.65}
.prose li::before{content:"";flex:none;width:5px;height:5px;background:var(--blue);transform:rotate(45deg);margin-top:9px}
.cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.cols>.painel,.cols>div:first-child .painel{position:sticky;top:104px}
.fachada{display:block;width:100%;height:auto;margin-bottom:26px;box-shadow:var(--sombra)}
.painel{border:1px solid var(--line);background:var(--paper-2);padding:clamp(24px,3vw,34px);position:relative}
.painel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--faixa)}
.painel h4{font-family:var(--ff-m);font-size:10.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:18px;font-weight:600}

/* ══ formulários ══ */
.form{display:grid;gap:14px}
.form label{display:grid;gap:7px;font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.form input,.form select,.form textarea{background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-family:var(--ff-d);font-size:14px;padding:13px 14px;transition:.25s;width:100%}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(11,111,169,.14)}
.form select option{background:var(--paper);color:var(--ink)}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-nota{font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--mute);line-height:1.7;letter-spacing:.04em}

/* ══ representantes ══ */
/* o traço entre as células vem do anel de cada .uf: assim a última fila
   incompleta continua branca, em vez de virar um bloco cinza */
.estados{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--paper)}
.uf{background:var(--paper);padding:20px;transition:background .35s;box-shadow:0 0 0 1px var(--line)}
.uf:hover{background:var(--paper-2)}
.uf b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--navy)}
.uf u{display:block;text-decoration:none;font-family:var(--ff-m);font-weight:500;font-size:9.5px;color:var(--blue);margin-bottom:12px;letter-spacing:.04em}
.uf span{display:block;font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--body);line-height:1.9;letter-spacing:.04em}
.uf a{text-decoration:none}
.uf a:hover{color:var(--blue)}

/* ══ contato ══ */
.contato-info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.ci{background:var(--paper);padding:22px 24px}
.ci u{display:block;text-decoration:none;font-family:var(--ff-m);font-size:9.5px;color:var(--blue);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;font-weight:600}
.ci p,.ci a{font-size:14.5px;color:var(--ink);line-height:1.65;text-decoration:none;display:block}
.ci a:hover{color:var(--blue)}
.mapa{border:1px solid var(--line);margin-top:1px;width:100%;height:340px;display:block}

/* ══ catálogos e flyers ══ */
.cat-topo{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,52px);align-items:center;
  border:1px solid var(--line);background:var(--paper-2);padding:clamp(24px,3.4vw,40px);position:relative}
.cat-topo::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--faixa)}
.cat-capa{display:block;padding:0;border:1px solid var(--line);background:none;cursor:zoom-in;
  box-shadow:var(--sombra-alta);transition:transform .4s;width:100%}
.cat-capa img{width:100%;height:auto}
.cat-capa:hover{transform:translateY(-4px)}
.cat-info h3{font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;
  color:var(--navy);font-variation-settings:"wdth" 112;line-height:1.02;margin-bottom:14px}
.cat-info p{font-size:14px;color:var(--body);line-height:1.72;max-width:52ch;margin-bottom:24px}
.cat-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.cat-meta span{font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--body);border:1px solid var(--line);
  background:var(--paper);padding:6px 10px;letter-spacing:.04em}
.cat-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.cat-pag{position:relative;background:var(--paper);border:1px solid var(--line);padding:10px;cursor:zoom-in;
  display:block;transition:box-shadow .3s,transform .3s}
.cat-pag:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.cat-pag img{width:100%;height:auto;border:1px solid var(--line-2);transition:transform .4s}
.cat-pag:hover img{transform:translateY(-3px)}
.cat-pag u{position:absolute;right:12px;bottom:12px;text-decoration:none;font-family:var(--ff-m);font-weight:500;font-size:10px;
  color:#fff;background:rgba(5,43,71,.82);padding:3px 7px;letter-spacing:.04em}

/* lente de leitura */
.cat-lente{position:fixed;inset:0;z-index:120;background:rgba(4,20,33,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.cat-lente[open]{display:flex}
.cat-lente img{max-width:min(100%,780px);max-height:100%;width:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cat-btn{position:absolute;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;transition:.25s;backdrop-filter:blur(6px)}
.cat-btn:hover{background:var(--blue);border-color:var(--blue)}
.cat-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.cat-ant{left:clamp(8px,2vw,32px);top:50%;transform:translateY(-50%)}
.cat-prox{right:clamp(8px,2vw,32px);top:50%;transform:translateY(-50%)}
.cat-x{right:clamp(8px,2vw,32px);top:clamp(8px,2vw,32px);width:40px;height:40px}
.cat-conta{position:absolute;left:50%;bottom:clamp(10px,2vw,28px);transform:translateX(-50%);
  font-family:var(--ff-m);font-weight:500;font-size:11px;color:rgba(255,255,255,.8);letter-spacing:.04em;
  background:rgba(4,20,33,.7);border:1px solid rgba(255,255,255,.16);padding:6px 12px}

/* ══ faixa CTA ══ */
.band{padding:clamp(34px,5vw,56px);display:flex;justify-content:space-between;
  align-items:center;gap:34px;flex-wrap:wrap;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(100deg,#04263F 0%,#083A5E 60%,#0F5C8C 100%)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--faixa)}
.band::before{content:"";position:absolute;top:-70%;right:-6%;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(174,223,243,.24),transparent 66%)}
.band h3{font-size:clamp(21px,2.7vw,34px);font-weight:800;letter-spacing:-.038em;text-transform:uppercase;
  font-variation-settings:"wdth" 114;line-height:1.02;max-width:17ch;position:relative}
.band p{font-family:var(--ff-m);font-weight:500;font-size:11px;color:rgba(233,243,250,.78);margin-top:12px;letter-spacing:.04em;position:relative}
.band .btn-a{background:#fff;color:var(--navy)}
.band .btn-a:hover{background:var(--ice);color:var(--navy);box-shadow:0 14px 30px rgba(0,0,0,.24)}

/* ══ footer ══ */
footer{margin-top:90px;padding:56px 0 40px;position:relative;z-index:2;color:rgba(233,243,250,.72);
  background:linear-gradient(100deg,#04263F 0%,#072F4D 70%,#0A4571 100%)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--faixa)}
.ft{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px}
.ft h5{font-family:var(--ff-m);font-weight:500;font-size:10px;color:var(--ice);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.ft p,.ft a{font-size:13px;color:rgba(233,243,250,.72);line-height:1.85;text-decoration:none;display:block;transition:color .2s}
.ft a:hover{color:#fff}
.ft .brand{margin-bottom:14px}
.ft .ft-slogan{color:var(--ice);font-style:italic;font-weight:500;margin-bottom:12px}
.ft .wordmark{height:30px}
.ft-fim{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;
  border-top:1px solid rgba(174,223,243,.18);font-family:var(--ff-m);font-weight:500;font-size:10px;
  color:rgba(233,243,250,.55);letter-spacing:.04em}

@media (max-width:1180px){
  nav{gap:18px;font-size:10.5px}
}
@media (max-width:1050px){
  nav{display:none}
  .burger{display:flex}
  nav.aberto{display:flex;position:fixed;inset:76px 0 auto;flex-direction:column;gap:0;padding:10px 0 24px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sombra-alta);color:var(--body);
    max-height:calc(100vh - 76px);overflow-y:auto}
  nav.aberto>a,nav.aberto .drop>span{padding:14px var(--gut)}
  nav.aberto>a:hover,nav.aberto .drop:hover>span,nav.aberto>a[aria-current]{color:var(--navy)}
  nav.aberto>a::after,nav.aberto .drop>span::after{display:none}
  nav.aberto .drop ul{position:static;opacity:1;visibility:visible;transform:none;border:0;border-left:2px solid var(--line);
    margin:0 var(--gut) 8px;background:none;min-width:0;box-shadow:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:34px}
  .hero .palco{order:-1}
  .hero .stage{min-height:300px}
  .ficha{grid-template-columns:1fr}
  .ficha .stage{position:static}
  .grid,.grid-2,.grid-4{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .cols>.painel,.cols>div:first-child .painel{position:static}
  .cat-topo{grid-template-columns:1fr;justify-items:start}
  .cat-capa{max-width:240px}
  .ft{grid-template-columns:1fr 1fr}
  .hd-fone{display:none}
}
@media (max-width:560px){
  .hd{height:66px}
  .wordmark{height:27px}
  nav.aberto{inset:66px 0 auto;max-height:calc(100vh - 66px)}
  h1{font-size:clamp(29px,8vw,44px);font-variation-settings:"wdth" 100;letter-spacing:-.03em}
  .hero h1{font-size:clamp(19px,5.4vw,30px);letter-spacing:0}
  h2{font-size:clamp(23px,6.4vw,34px);font-variation-settings:"wdth" 100}
  .chip{padding:6px 9px}
  .chip u{font-size:7px}
  .chip strong{font-size:11px}
  .chips{gap:8px}
  .tabela{grid-template-columns:1fr}
  .form .duo{grid-template-columns:1fr}
  .cat-grade{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── botão flutuante do WhatsApp ───────────────────────────────────────────────
   Fica acima de tudo menos do menu móvel (z-index 120), para não cobrir o drawer. */
.zap{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:110;
  display:flex;align-items:center;text-decoration:none}
.zap-bolha{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;box-shadow:var(--sombra-alta);transition:.25s}
.zap-bolha svg{width:27px;height:27px;fill:#fff;display:block}
.zap-txt{font-family:var(--ff-m);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sombra);
  padding:9px 12px;margin-right:10px;white-space:nowrap;
  opacity:0;transform:translateX(10px);transition:.25s;pointer-events:none}
.zap:hover .zap-txt,.zap:focus-visible .zap-txt{opacity:1;transform:none}
.zap:hover .zap-bolha,.zap:focus-visible .zap-bolha{transform:scale(1.06)}
.zap:focus-visible{outline:none}
.zap:focus-visible .zap-bolha{box-shadow:var(--sombra-alta),0 0 0 3px var(--ice)}
@media (hover:none){.zap-txt{display:none}}
@media (max-width:560px){.zap-bolha{width:52px;height:52px}.zap-bolha svg{width:25px;height:25px}}

/* ══ abertura da home — a marca emerge da linha d'água ═════════════════════════
   O logotipo é um iceberg cortado pela água: a abertura repete esse gesto —
   a marca sobe por trás da linha de gelo, com halos de frio se abrindo atrás.
   Sai sozinha em 2,6 s, no clique em "Pular" ou no Esc (script na própria home). */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(74% 64% at 50% 42%,#0A4571 0%,#04263F 48%,#021724 100%);
  transition:opacity .7s ease,filter .7s ease}
.intro.is-out{opacity:0;filter:blur(6px);pointer-events:none}
.intro.is-done{display:none}
html.intro-ativa,html.intro-ativa body{overflow:hidden}

.intro-cena{position:relative;display:grid;justify-items:center}
.intro-clip{overflow:hidden;padding:6px 10px 7px}  /* os 7px deixam a linha d'água abaixo do "desde 2001" do logotipo */
.intro-logo{width:min(340px,64vw);height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
  animation:emergir 1.15s cubic-bezier(.2,.85,.25,1) .18s both}
.intro-agua{display:block;width:min(460px,84vw);height:2px;margin:0 0 22px;
  background:linear-gradient(90deg,rgba(174,223,243,0),#1B90BC 20%,#AEDFF3 50%,#1B90BC 80%,rgba(174,223,243,0));
  box-shadow:0 0 24px rgba(174,223,243,.5);
  transform:scaleX(.04);animation:agua 1s cubic-bezier(.3,.9,.2,1) both}
.intro-linha{font-family:var(--ff-m);font-size:10.5px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ice);animation:surgir .8s ease 1.05s both}
@keyframes emergir{from{opacity:0;transform:translateY(108%)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes agua{from{opacity:0;transform:scaleX(.04)}to{opacity:1;transform:scaleX(1)}}
@keyframes surgir{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* halos de frio — o eco do disco redondo da marca */
.intro-halos{position:absolute;left:50%;top:38%;width:min(440px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.intro-halos i{position:absolute;inset:0;margin:auto;width:32%;height:32%;border-radius:50%;
  border:1px solid rgba(174,223,243,.45);animation:halo 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.intro-halos i:nth-child(2){animation-delay:1.2s;border-color:rgba(46,140,196,.55)}
.intro-halos i:nth-child(3){animation-delay:2.4s;border-color:rgba(233,243,250,.22)}
@keyframes halo{from{transform:scale(.55);opacity:0}22%{opacity:.6}to{transform:scale(3);opacity:0}}

/* barra de carga na faixa do catálogo */
.intro-carga{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:min(220px,46vw);height:2px;background:rgba(174,223,243,.16);overflow:hidden}
.intro-carga i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#0A4571,#2E8CC4 55%,#AEDFF3);
  box-shadow:0 0 16px rgba(174,223,243,.45);
  animation:carregar 2.6s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes carregar{to{width:100%}}

.intro-skip{position:absolute;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);
  font-family:var(--ff-m);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,243,250,.72);background:rgba(4,38,63,.55);border:1px solid rgba(174,223,243,.28);
  padding:10px 15px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .22s,border-color .22s,background .22s}
.intro-skip:hover{color:#fff;border-color:var(--ice);background:rgba(10,69,113,.7)}
.intro-skip:focus-visible{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(174,223,243,.3)}
@media (max-width:560px){
  .intro-linha{font-size:8.5px;letter-spacing:.24em}
  .intro-carga{bottom:16%}
}