/* ═══════════════════════════════════════════════════════════════════════
   ALINE CONTAINER — identidade visual (v5 · out/2026)
   ───────────────────────────────────────────────────────────────────────
   Arquivo ÚNICO da marca, compartilhado pela home (public/lp.php), pelas
   páginas de produto (public/solucao.php) e pela privacidade.
   Cada página acrescenta só o próprio layout, inline.

   Paleta (15/10/2026, escolhida pela Aline): azul-marinho #0B2D5B como
   cor principal, laranja #FF7A00 nos botões e destaques, cinzas
   neutros (#2E2E2E texto, #6B7280 apoio, #F3F4F6 fundos) e, de apoio,
   verde #16A34A (WhatsApp), amarelo #FACC15, vermelho #EF4444 e azul
   #3B82F6 (links). Os nomes das variáveis ficaram os antigos.

   Duas linhas de produto, duas cores de apoio:
     • Kitnet & Marítimo  → --corten (laranja)
     • Modulares          → --porto (azul-claro)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fontes self-hosted (sem Google Fonts: mais rápido e sem cookie de
      terceiros — bom para LGPD e para o Core Web Vitals) ── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}

@layer reset, marca, layout, componentes, pagina, utils;

@layer marca {
:root{
  /* ── Paleta (enviada pela Aline em 15/10/2026) ───────────────────── */
  --mare-900:#0B2D5B;   /* azul-marinho — cor principal: faixas escuras, rodapé, títulos */
  --mare-800:#0F3870;
  --mare-700:#174886;
  --porto:#3B82F6;      /* azul-claro — linha MODULAR, links */
  --porto-2:#1D5BD8;
  --porto-claro:#EAF2FE;
  --corten:#FF7A00;     /* laranja — linha KITNET & MARÍTIMO */
  --corten-2:#C25A00;   /* laranja escuro p/ texto pequeno (contraste) */
  --corten-claro:#FFF1E5;
  --sol:#FF7A00;        /* AÇÃO — botões e destaques */
  --sol-2:#E86E00;
  --sol-claro:#FFF1E5;
  --amarelo:#FACC15;    /* apoio — destaques e alertas */
  --vermelho:#EF4444;   /* apoio — urgência / erro */
  --areia:#F3F4F6;      /* cinza-claro — fundos e seções */
  --areia-2:#E5E7EB;
  --papel:#FFFFFF;
  --tinta:#2E2E2E;      /* cinza-escuro — textos e ícones */
  --cinza:#6B7280;      /* cinza-médio — texto secundário */
  --cinza-2:#9CA3AF;
  --linha:#E5E7EB;
  --linha-forte:#D1D5DB;
  --sobre-escuro:#B8C4D6;   /* texto secundário sobre o azul-marinho */
  --sobre-escuro-2:#D3DCE8;
  --wa:#16A34A;         /* verde — WhatsApp / sucesso */
  --wa-2:#15803D;

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --f-titulo:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texto:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-dado:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-2xs:.6875rem; --fs-xs:.8125rem; --fs-sm:.9rem; --fs-md:1rem;
  --fs-lg:clamp(1.04rem,1rem + .2vw,1.16rem);
  --fs-h3:clamp(1.05rem,1rem + .25vw,1.22rem);
  --fs-h2:clamp(1.8rem,1.35rem + 1.9vw,2.75rem);
  --fs-h1:clamp(2.2rem,1.5rem + 3.1vw,3.65rem);

  /* ── Espaço, raio, sombra, tempo ────────────────────────────────── */
  --esp-sec:clamp(40px,5.5vw,76px);
  --r-1:6px; --r-2:10px; --r-3:16px; --r-4:24px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,45,91,.06);
  --sh-2:0 1px 2px rgba(11,45,91,.05),0 10px 24px -14px rgba(11,45,91,.25);
  --sh-3:0 2px 6px rgba(11,45,91,.05),0 24px 48px -24px rgba(11,45,91,.35);
  --sh-sol:0 10px 24px -12px rgba(255,122,0,.6);
  --t-rap:.15s; --t:.24s; --t-lento:.45s;
  --ease:cubic-bezier(.22,1,.36,1);
  --hd-h:68px;

  --wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.1.1-1.8-.1-.4-.1-1-.3-1.7-.6-3-1.3-4.9-4.3-5-4.5-.2-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .7.5l1 2.3c.1.2.1.4 0 .6l-.4.5-.3.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.7-.1l.9-1c.2-.2.4-.2.6-.1l2.2 1c.3.2.5.2.5.4.1.1.1.7-.1 1.4z'/%3E%3C/svg%3E");
  color-scheme:light;
}
body{font-family:var(--f-texto);font-size:var(--fs-md);line-height:1.6;color:var(--tinta);background:var(--areia);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:800;line-height:1.06;letter-spacing:-.025em;color:var(--mare-900);text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.2}
p{text-wrap:pretty}
strong,b{font-weight:700}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
img,svg,iframe{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--porto);outline-offset:3px;border-radius:4px}
::selection{background:var(--sol);color:#fff}
}

@layer reset {
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;hanging-punctuation:first}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
}

@layer layout {
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:var(--esp-sec)}
[id]{scroll-margin-block-start:calc(var(--hd-h) + 16px)}
}

@layer componentes {
/* ── Rótulo de seção ── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-dado);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--porto)}
.eyebrow::before{content:'';width:18px;height:2px;border-radius:2px;background:currentColor;flex:none}
.eyebrow.mar{color:var(--corten)}
.eyebrow.claro{color:var(--sol)}

/* ── Selo de linha (Kitnet & Marítimo / Modular) ── */
.linha-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-dado);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:var(--porto-claro);color:var(--porto-2)}
.linha-tag::before{content:'';width:7px;height:7px;border-radius:2px;background:currentColor}
.linha-tag.mar{background:var(--corten-claro);color:var(--corten-2)}

/* ── Botões ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-texto);font-weight:700;font-size:var(--fs-sm);line-height:1;padding:15px 22px;border-radius:var(--r-2);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background var(--t-rap),color var(--t-rap),border-color var(--t-rap),box-shadow var(--t-rap),translate var(--t-rap)}
.btn:active{translate:0 1px}
.btn-sol{background:var(--sol);color:#fff;box-shadow:var(--sh-sol)}
.btn-sol:hover{background:var(--sol-2)}
.btn-mare{background:var(--mare-900);color:#fff}
.btn-mare:hover{background:var(--mare-700)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-2)}
.btn-linha{background:transparent;color:var(--mare-900);border-color:var(--linha-forte)}
.btn-linha:hover{border-color:var(--mare-900);background:var(--papel)}
.btn-xl{padding:18px 26px;font-size:var(--fs-md)}
.btn .i-wa{width:18px;height:18px;background:currentColor;-webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat;flex:none}
.arr{display:inline-block;transition:translate var(--t-rap)}
.btn:hover .arr,a:hover > .arr{translate:3px 0}

/* ══ CABEÇALHO ══════════════════════════════════════════════════════ */
.topbar{display:none;background:var(--mare-900);color:var(--sobre-escuro);font-size:var(--fs-xs)}
@media(min-width:1080px){.topbar{display:block}}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:36px}
.topbar .g{display:flex;align-items:center;gap:18px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
.online{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.online::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(31,168,85,.5);animation:pulso 2.4s infinite}
.online.off::before{background:var(--cinza-2);animation:none}
@keyframes pulso{70%{box-shadow:0 0 0 7px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}

.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t)}
.hd.rolou{border-bottom-color:var(--linha);box-shadow:0 10px 30px -24px rgba(11,45,91,.6)}
.hd .wrap{display:flex;align-items:center;gap:14px;height:var(--hd-h)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo svg{width:40px;height:40px}
.logo span{display:flex;flex-direction:column;line-height:1}
.logo strong{font-family:var(--f-titulo);font-weight:800;font-size:1.42rem;letter-spacing:-.035em;color:var(--mare-900)}
.logo small{font-family:var(--f-dado);font-size:.6rem;font-weight:600;letter-spacing:.24em;color:var(--porto);margin-top:3px}
.logo.claro strong{color:#fff}.logo.claro small{color:var(--sol)}

.hd-nav{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1080px){.hd-nav{display:flex}}
.hd-nav > a,.hd-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:var(--r-1);font-size:var(--fs-sm);font-weight:600;color:var(--mare-800);text-decoration:none;transition:background var(--t-rap),color var(--t-rap)}
.hd-nav > a:hover,.hd-drop-btn:hover,.hd-drop.on .hd-drop-btn{background:var(--areia-2)}
.hd-nav > a.on{color:var(--porto)}
.hd-drop-btn i{width:8px;height:8px;border-radius:2px;flex:none}
.hd-drop-btn svg{opacity:.6;transition:rotate var(--t)}
.hd-drop.on .hd-drop-btn svg{rotate:180deg}
/* Menus ancorados na borda direita do cabeçalho (não no botão): nunca
   vazam da tela, em qualquer largura. */
.hd .wrap{position:relative}
.hd-drop{position:static}
.hd-drop-btn{position:relative}
.hd-drop-btn::after{content:'';position:absolute;top:100%;left:-10px;right:-10px;height:18px}
.hd-drop-menu{position:absolute;top:calc(100% - 4px);right:clamp(16px,4vw,32px);left:auto;width:min(640px,calc(100vw - 32px));background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-3);box-shadow:var(--sh-3);padding:18px;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity var(--t-rap),translate var(--t-rap),visibility var(--t-rap);z-index:70}
.hd-drop:hover .hd-drop-menu,.hd-drop.on .hd-drop-menu,.hd-drop:focus-within .hd-drop-menu{opacity:1;visibility:visible;translate:0 0}
.dd-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 8px 12px;margin-bottom:8px;border-bottom:1px solid var(--linha)}
.dd-topo b{font-family:var(--f-titulo);font-size:1.05rem;color:var(--mare-900)}
.dd-topo span{font-size:var(--fs-xs);color:var(--cinza)}
.dd-cols{display:grid;gap:4px 18px}
@media(min-width:560px){.dd-cols{grid-template-columns:1fr 1fr}}
.dd-grupo > b{display:block;font-family:var(--f-dado);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-2);padding:8px 8px 4px}
.dd-item{display:block;padding:7px 8px;border-radius:var(--r-1);text-decoration:none;transition:background var(--t-rap)}
.dd-item:hover,.dd-item[aria-current=page]{background:var(--areia)}
.dd-item strong{display:block;font-size:.86rem;font-weight:600;color:var(--mare-900);line-height:1.3}
.dd-item small{display:block;font-family:var(--f-dado);font-size:.66rem;color:var(--cinza-2);margin-top:1px}
.dd-mar .dd-item:hover strong{color:var(--corten)}
.dd-mod .dd-item:hover strong{color:var(--porto)}
.dd-pe{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 8px 0;border-top:1px solid var(--linha)}
.dd-pe a{font-size:var(--fs-xs);font-weight:700;color:var(--mare-900);text-decoration:none}
.dd-pe a:hover{text-decoration:underline}
.hd-cta{margin-left:10px;padding:12px 18px}
.hd-acoes{display:flex;align-items:center;gap:8px;margin-left:auto}
@media(min-width:1080px){.hd-acoes{margin-left:0}}
.hd-menu-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--linha-forte);border-radius:var(--r-2);font-weight:700;font-size:var(--fs-sm);color:var(--mare-900)}
@media(min-width:1080px){.hd-menu-btn{display:none}}
@media(max-width:520px){.hd-cta{display:none}}

/* Menu do celular — popover nativo (abre/fecha sem JS, ESC e clique fora inclusos) */
.menu-pop{inset:auto 0 auto auto;top:calc(var(--hd-h) + 6px);margin:0 12px 0 auto;width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - var(--hd-h) - 24px);overflow:auto;border:1px solid var(--linha);border-radius:var(--r-3);background:var(--papel);box-shadow:var(--sh-3);padding:16px;color:var(--tinta)}
.menu-pop::backdrop{background:rgba(11,45,91,.35)}
.menu-pop h3{font-family:var(--f-dado);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin:12px 8px 6px;color:var(--cinza)}
.menu-pop h3.mar{color:var(--corten)} .menu-pop h3.mod{color:var(--porto)}
.menu-pop a{display:flex;justify-content:space-between;gap:10px;padding:10px 8px;border-radius:var(--r-1);text-decoration:none;font-weight:600;font-size:.95rem}
.menu-pop a small{font-family:var(--f-dado);font-size:.68rem;color:var(--cinza-2);font-weight:500;white-space:nowrap}
.menu-pop a:hover{background:var(--areia)}
.menu-pop .btn{width:100%;margin-top:12px}

/* ══ RODAPÉ ═════════════════════════════════════════════════════════ */
.rodape{background:var(--mare-900);color:var(--sobre-escuro);font-size:var(--fs-xs)}
.rodape .wrap{padding-top:40px}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;padding-bottom:26px}
.rd-marca,.rd-grid > .rd-col:last-child{grid-column:1/-1}
@media(min-width:700px){.rd-marca,.rd-grid > .rd-col:last-child{grid-column:auto}}
@media(min-width:1080px){.rd-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.rd-col{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.rd-col > b{font-family:var(--f-dado);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.rd-col > b.mar{color:#FF9A3D} .rd-col > b.mod{color:#8DB4FA}
.rd-col a{color:var(--sobre-escuro-2);text-decoration:none;line-height:1.45}
.rd-col a:hover{color:var(--sol)}
.rd-duas{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.rd-desc{line-height:1.6;max-width:30ch;margin:0}
.rd-todos{color:#8DB4FA!important;font-weight:600}
.rd-fone{font-family:var(--f-dado);font-size:1rem;font-weight:600;color:#fff!important}
.rd-social{display:flex;gap:8px}
.rd-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-2);border:1px solid rgba(255,255,255,.14);color:#fff}
.rd-social a:hover{background:var(--sol);border-color:var(--sol);color:#fff}
.rd-bar{border-top:1px solid rgba(255,255,255,.1);padding-block:16px 20px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;font-size:.74rem;line-height:1.75;color:#8A93A0}
.rd-bar a{color:var(--sobre-escuro-2);text-decoration:none}
.rd-bar a:hover{color:var(--sol)}
.rd-dev{display:inline-flex;align-items:center;gap:7px}
.rd-dev::before{content:'';width:13px;height:13px;background:currentColor;opacity:.7;-webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat}
.rd-dev strong{color:#fff}

/* ══ Flutuantes ═════════════════════════════════════════════════════ */
.wa-float{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:55;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 12px 28px -10px rgba(23,138,69,.85);transition:scale var(--t-rap)}
.wa-float::before{content:'';width:28px;height:28px;background:#fff;-webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat}
.wa-float:hover{scale:1.06}
@media(min-width:900px){.wa-float{bottom:24px}}
.barra-movel{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--linha)}
.barra-movel .btn{flex:1;padding:14px 8px}
@media(min-width:900px){.barra-movel{display:none}}
body.tem-barra{padding-bottom:76px}
@media(min-width:900px){body.tem-barra{padding-bottom:0}}
}

@layer utils {
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a.pular:focus{position:fixed;top:10px;left:10px;z-index:99;width:auto;height:auto;margin:0;clip-path:none;padding:12px 18px;background:var(--mare-900);color:#fff;font-weight:700;border-radius:var(--r-2);text-decoration:none}
/* ── Fotos reais × ilustrações (ver includes/v5/catalogo.php) ── */
img.real{object-fit:cover!important;padding:0!important}
:has(> img.real){padding:0!important;background:var(--areia-2)!important}
.ilu-tag{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--f-dado);font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);background:rgba(255,255,255,.88);border:1px solid var(--linha);border-radius:var(--r-pill);padding:3px 8px;pointer-events:none}
.rv{opacity:0;translate:0 16px;transition:opacity var(--t-lento) var(--ease),translate var(--t-lento) var(--ease)}
.rv.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;translate:0 0}}
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 700px}
}