/*
 * KOMORI site — sistema visual v2 (2026-10-22). Contrato: /design/DESIGN.md (fonte dos tokens = ESTE arquivo).
 * Tokens tirados do CSS real: style.css (:root --primary-*, --text-*, --border-color, --radius-*),
 * marketing-entry.css (--km-ink/--km-night/--km-blue/--km-paper, .km-wrap 1280, .km-button, h2 clamp)
 * e company_departments.php (cor de cada departamento). Mudou aqui? rode design/check-drift.php.
 * Sem fonte web, sem animação de rolagem, sem vídeo automático.
 */
:root {
    /* cor */
    --ks-ink: #112c49;          /* km-ink: texto principal */
    --ks-night: #071b31;        /* km-night: faixas escuras, rodapé de seção */
    --ks-blue: #079edd;         /* km-blue: destaque/ação */
    --ks-blue-dark: #0369a1;    /* style.css --primary-dark: links, foco, botão hover */
    --ks-paper: #f7f8fa;        /* km-paper: fundo de seção alternada */
    --ks-white: #ffffff;
    --ks-muted: #475569;        /* style.css --light-text */
    --ks-soft: #5a6a7e;        /* #64748b do style.css escurecido: 4,48:1 no paper não passava AA */
    --ks-line: #dbe4ec;         /* borda de cartão (km-product-card) */
    --ks-dep-manufacturing: #197db0;
    --ks-dep-logistics: #19867c;
    --ks-dep-promotion: #a86494;
    --ks-dep-dx: #1769cf;
    /* tipografia: sem download de fonte; JP cai em Hiragino / Yu Gothic / Meiryo / Noto CJK do aparelho */
    --ks-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", Roboto, sans-serif;
    --ks-fs-xs: .78rem;
    --ks-fs-sm: .9rem;
    --ks-fs-md: 1rem;
    --ks-fs-lg: 1.15rem;
    --ks-fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
    --ks-fs-h2: clamp(1.6rem, 3.1vw, 2.5rem);
    --ks-fs-h1: clamp(2rem, 5vw, 3.5rem);
    --ks-lh: 1.8;               /* japonês precisa de entrelinha maior */
    --ks-lh-tight: 1.25;
    /* espaço: escala de 4 */
    --ks-s1: 4px; --ks-s2: 8px; --ks-s3: 12px; --ks-s4: 16px; --ks-s5: 24px; --ks-s6: 32px; --ks-s7: 48px; --ks-s8: 64px; --ks-s9: 96px;
    --ks-section: clamp(56px, 8vw, 104px); /* km-section 104px no desktop */
    --ks-wrap: 1200px;          /* style.css --container-width */
    --ks-gutter: clamp(20px, 4vw, 48px);
    /* forma */
    --ks-r-sm: 6px;             /* botão (km-button 5px) */
    --ks-r-md: 12px;            /* cartão (style.css --radius-md) */
    --ks-r-lg: 20px;            /* mídia grande (style.css --radius-lg) */
    --ks-r-pill: 999px;
    --ks-shadow-sm: 0 3px 12px #123b6610;
    --ks-shadow-md: 0 16px 44px #193f6014;
    --ks-focus: 0 0 0 3px #079edd66;
}

.ks { color: var(--ks-ink); font-family: var(--ks-font); font-size: var(--ks-fs-md); line-height: var(--ks-lh); background: var(--ks-white); }
.ks *, .ks *::before, .ks *::after { box-sizing: border-box; }
.ks img { max-width: 100%; height: auto; display: block; }
:where(.ks) h1, :where(.ks) h2, :where(.ks) h3, :where(.ks) p { margin: 0; }
:where(.ks) h1, :where(.ks) h2, :where(.ks) h3 { color: var(--ks-ink); line-height: var(--ks-lh-tight); letter-spacing: -.01em; font-weight: 700; text-wrap: balance; }
:where(.ks) h1 { font-size: var(--ks-fs-h1); }
:where(.ks) h2 { font-size: var(--ks-fs-h2); }
:where(.ks) h3 { font-size: var(--ks-fs-h3); }
.ks a { color: var(--ks-blue-dark); }
.ks a:focus-visible, .ks button:focus-visible { outline: none; box-shadow: var(--ks-focus); border-radius: var(--ks-r-sm); }
.ks-wrap { width: min(var(--ks-wrap), calc(100% - 2 * var(--ks-gutter))); margin-inline: auto; }
.ks-section { padding-block: var(--ks-section); scroll-margin-top: 140px; }
.ks-section--paper { background: var(--ks-paper); }
.ks-section--night { background: var(--ks-night); color: #d8e4ef; }
.ks-section--night :where(h2, h3) { color: #fff; }
.ks-eyebrow { display: flex; align-items: center; gap: var(--ks-s2); margin-bottom: var(--ks-s4); color: var(--ks-blue-dark); font-size: var(--ks-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ks-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.ks-section--night .ks-eyebrow { color: #7cc8ec; }
.ks-lead { margin-top: var(--ks-s4); max-width: 46em; color: var(--ks-muted); font-size: var(--ks-fs-lg); }
.ks-section--night .ks-lead { color: #b8c9d9; }
.ks-head { margin-bottom: var(--ks-s7); max-width: 52em; }
.ks-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ks-s6); align-items: end; }
.ks-head--split .ks-lead { margin-top: 0; }

/* botões */
.ks-actions { display: flex; flex-wrap: wrap; gap: var(--ks-s3); margin-top: var(--ks-s6); }
.ks-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ks-s2); min-height: 48px; padding: 12px 22px; border-radius: var(--ks-r-sm); border: 1px solid transparent; font-size: var(--ks-fs-sm); font-weight: 700; line-height: 1.4; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.ks .ks-btn--primary { background: var(--ks-blue-dark); color: #fff; }
.ks .ks-btn--primary:hover { background: var(--ks-ink); }
.ks .ks-btn--ghost { border-color: var(--ks-line); background: #fff; color: var(--ks-ink); }
.ks .ks-btn--ghost:hover { border-color: var(--ks-blue-dark); color: var(--ks-blue-dark); }
.ks .ks-btn--light { background: #fff; color: var(--ks-ink); }
.ks .ks-btn--light:hover { background: #e6f4fb; }
.ks .ks-btn--outline-light { border-color: #ffffff55; color: #fff; }
.ks .ks-btn--outline-light:hover { border-color: #fff; }
.ks-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--ks-fs-sm); text-decoration: none; }
.ks-link:hover { text-decoration: underline; }

/* HERO: texto + foto real, sem vídeo, sem fundo escuro sobre foto */
.ks-hero { padding-block: clamp(40px, 6vw, 88px) var(--ks-section); background: linear-gradient(180deg, var(--ks-paper), #fff 70%); }
.ks-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ks-hero__lead { margin-top: var(--ks-s5); color: var(--ks-muted); font-size: var(--ks-fs-lg); max-width: 34em; }
.ks-hero__media { position: relative; margin: 0; }
.ks-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ks-r-lg); box-shadow: var(--ks-shadow-md); background: #e5ebf1; }
.ks-hero__media figcaption { margin-top: var(--ks-s3); color: var(--ks-soft); font-size: var(--ks-fs-xs); }
.ks-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-s4); margin-top: var(--ks-s7); padding-top: var(--ks-s5); border-top: 1px solid var(--ks-line); }
.ks-facts dt { color: var(--ks-soft); font-size: var(--ks-fs-xs); letter-spacing: .04em; }
.ks-facts dd { margin: 2px 0 0; font-weight: 700; font-size: var(--ks-fs-md); line-height: 1.4; }

/* dois pilares: fabricante + tecnologia */
.ks-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s5); }
.ks-pillar { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--ks-s5); padding: var(--ks-s5); border: 1px solid var(--ks-line); border-radius: var(--ks-r-md); background: #fff; }
.ks-pillar img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ks-r-sm); }
.ks-pillar p { margin-top: var(--ks-s3); color: var(--ks-muted); }
.ks-bridge { margin-top: var(--ks-s5); padding: var(--ks-s5) var(--ks-s6); border-left: 3px solid var(--ks-blue); background: var(--ks-paper); color: var(--ks-ink); font-weight: 600; }

/* SEÇÃO DE DEPARTAMENTO */
.ks-dept { --dep: var(--ks-blue-dark); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); padding-block: var(--ks-s7); border-top: 1px solid var(--ks-line); scroll-margin-top: 140px; }
.ks-dept:first-of-type { border-top: 0; padding-top: 0; }
.ks-dept--manufacturing { --dep: var(--ks-dep-manufacturing); }
.ks-dept--logistics { --dep: var(--ks-dep-logistics); }
.ks-dept--promotion { --dep: var(--ks-dep-promotion); }
.ks-dept--dx { --dep: var(--ks-dep-dx); }
.ks-dept__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ks-r-md); background: #e5ebf1; }
.ks-dept__num { display: inline-flex; align-items: center; gap: var(--ks-s2); color: var(--dep); font-size: var(--ks-fs-xs); font-weight: 700; letter-spacing: .14em; }
.ks-dept__num::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--dep); }
.ks-dept h3 { margin-top: var(--ks-s2); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.ks-dept__tag { margin-top: 2px; color: var(--ks-soft); font-size: var(--ks-fs-sm); }
.ks-dept__desc { margin-top: var(--ks-s4); color: var(--ks-muted); }
.ks-dept__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ks-s5); margin-top: var(--ks-s5); }
.ks-dept__label { margin-bottom: var(--ks-s2); color: var(--ks-ink); font-size: var(--ks-fs-xs); font-weight: 700; letter-spacing: .08em; }
.ks-list { margin: 0; padding: 0; list-style: none; }
.ks-list li { position: relative; padding: 6px 0 6px 18px; border-bottom: 1px dashed var(--ks-line); font-size: var(--ks-fs-sm); line-height: 1.6; }
.ks-list li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 6px; height: 6px; border-radius: 50%; background: var(--dep, var(--ks-blue-dark)); }
.ks-units li strong { display: block; font-size: var(--ks-fs-sm); }
.ks-units li span { color: var(--ks-soft); font-size: var(--ks-fs-xs); }
.ks-chips { display: flex; flex-wrap: wrap; gap: var(--ks-s2); margin-top: var(--ks-s5); }
.ks-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ks-line); border-radius: var(--ks-r-pill); background: #fff; color: var(--ks-ink); font-size: var(--ks-fs-xs); font-weight: 700; text-decoration: none; }
.ks a.ks-chip:hover { border-color: var(--dep, var(--ks-blue-dark)); color: var(--dep, var(--ks-blue-dark)); }
.ks-dept .ks-actions { margin-top: var(--ks-s5); }

/* CARTÃO DE PRODUTO / SERVIÇO */
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ks-s4); }
.ks-card { position: relative; display: flex; flex-direction: column; gap: var(--ks-s2); padding: var(--ks-s5); border: 1px solid var(--ks-line); border-radius: var(--ks-r-md); background: #fff; color: var(--ks-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ks a.ks-card { color: var(--ks-ink); }
.ks a.ks-card:hover { border-color: var(--ks-blue-dark); box-shadow: var(--ks-shadow-sm); }
.ks-card__top { display: flex; align-items: center; gap: var(--ks-s3); }
.ks-card__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; object-fit: cover; background: var(--ks-paper); }
.ks-card__name { font-weight: 800; letter-spacing: .02em; }
.ks-card__tag { color: var(--ks-soft); font-size: var(--ks-fs-xs); }
.ks-card p { color: var(--ks-muted); font-size: var(--ks-fs-sm); line-height: 1.7; }
.ks-card__go { margin-top: auto; padding-top: var(--ks-s2); color: var(--ks-blue-dark); font-size: var(--ks-fs-sm); font-weight: 700; }
.ks-group + .ks-group { margin-top: var(--ks-s7); }
.ks-group__title { display: flex; align-items: baseline; gap: var(--ks-s3); margin-bottom: var(--ks-s4); font-size: var(--ks-fs-lg); }
.ks-group__title small { color: var(--ks-soft); font-size: var(--ks-fs-xs); font-weight: 600; }

/* galeria de fotos reais */
.ks-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-s3); margin: 0; padding: 0; list-style: none; }
.ks-gallery figure { margin: 0; }
.ks-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ks-r-sm); background: #e5ebf1; }
.ks-gallery figcaption { margin-top: 6px; color: var(--ks-soft); font-size: var(--ks-fs-xs); line-height: 1.5; }
.ks-gallery li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ks-gallery li:nth-child(1) img { aspect-ratio: auto; height: calc(100% - 30px); }

/* demos (faixa escura curta) */
.ks-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ks-s4); }
.ks-demo a { display: block; padding: var(--ks-s5); border: 1px solid #ffffff22; border-radius: var(--ks-r-md); color: #fff; text-decoration: none; }
.ks-demo a:hover { border-color: #7cc8ec; background: #ffffff08; }
.ks-demo small { display: block; color: #7cc8ec; font-size: var(--ks-fs-xs); font-weight: 700; letter-spacing: .1em; }
.ks-demo strong { display: block; margin-top: var(--ks-s2); font-size: var(--ks-fs-lg); }
.ks-demo span { display: block; margin-top: var(--ks-s2); color: #b8c9d9; font-size: var(--ks-fs-sm); line-height: 1.7; }
.ks-note { margin-top: var(--ks-s4); color: #8ea5ba; font-size: var(--ks-fs-xs); }

/* CTA final */
.ks-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--ks-s6); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--ks-r-lg); background: var(--ks-ink); color: #d8e4ef; }
.ks-cta h2 { color: #fff; }
.ks-cta p { margin-top: var(--ks-s3); color: #b8c9d9; }
.ks-cta__contact { display: grid; gap: var(--ks-s3); }
.ks-cta__contact a { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-s3); padding: 14px 18px; border: 1px solid #ffffff2e; border-radius: var(--ks-r-sm); color: #fff; font-weight: 700; text-decoration: none; }
.ks-cta__contact a:hover { border-color: #fff; }
.ks-cta__contact small { color: #9fb6ca; font-weight: 500; font-size: var(--ks-fs-xs); }

/* vídeo sob demanda: só o poster é baixado; o arquivo de vídeo só depois do clique */
.ks-video { position: relative; overflow: hidden; border-radius: var(--ks-r-md); background: #0b1d30; }
.ks-video img, .ks-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ks-video button { position: absolute; inset: auto auto 16px 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--ks-r-pill); background: #fff; color: var(--ks-ink); font: 700 var(--ks-fs-sm) var(--ks-font); cursor: pointer; }

/* navegação interna da página (âncoras) */
.ks-anchors { position: sticky; top: 0; z-index: 5; background: #ffffffee; border-bottom: 1px solid var(--ks-line); backdrop-filter: saturate(1.4) blur(6px); }
.ks-anchors .ks-wrap { display: flex; gap: var(--ks-s5); overflow-x: auto; scrollbar-width: none; }
.ks-anchors a { flex: 0 0 auto; padding: 14px 0; color: var(--ks-muted); font-size: var(--ks-fs-sm); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.ks-anchors a:hover { color: var(--ks-ink); border-bottom-color: var(--ks-blue); }

/* página de departamento */
.ks-crumb { display: inline-flex; gap: 6px; margin-bottom: var(--ks-s4); color: var(--ks-soft); font-size: var(--ks-fs-sm); text-decoration: none; }
.ks a.ks-crumb { color: var(--ks-soft); }
.ks-offer { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ks-s4); }
.ks-offer article { padding: var(--ks-s5); border: 1px solid var(--ks-line); border-top: 3px solid var(--dep, var(--ks-blue-dark)); border-radius: var(--ks-r-md); background: #fff; }
.ks-offer p { margin-top: var(--ks-s2); color: var(--ks-muted); font-size: var(--ks-fs-sm); line-height: 1.7; }
.ks-unitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ks-s4); }
.ks-unitgrid article { padding: var(--ks-s4) var(--ks-s5); border-radius: var(--ks-r-md); background: var(--ks-paper); }
.ks-unitgrid b { display: block; color: var(--dep, var(--ks-ink)); font-size: var(--ks-fs-xs); letter-spacing: .08em; }
.ks-unitgrid strong { display: block; margin-top: 2px; }
.ks-unitgrid p { margin-top: var(--ks-s2); color: var(--ks-muted); font-size: var(--ks-fs-sm); line-height: 1.7; }
.ks-dept-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-s3); }
.ks-dept-nav a { --dep: var(--ks-blue-dark); display: block; padding: var(--ks-s4); border: 1px solid var(--ks-line); border-left: 4px solid var(--dep); border-radius: var(--ks-r-sm); color: var(--ks-ink); font-weight: 700; text-decoration: none; background: #fff; }
.ks-dept-nav a[aria-current="page"] { background: var(--ks-paper); }
.ks-dept-nav a small { display: block; color: var(--ks-soft); font-weight: 500; font-size: var(--ks-fs-xs); }

.ks-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* responsivo */
@media (max-width: 960px) {
    .ks-hero__grid, .ks-head--split, .ks-pillars, .ks-dept, .ks-cta { grid-template-columns: minmax(0, 1fr); }
    .ks-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-demo { grid-template-columns: minmax(0, 1fr); }
    .ks-dept-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ks-pillar { grid-template-columns: minmax(0, 1fr); }
    .ks-pillar img { aspect-ratio: 16 / 9; }
    .ks-dept__cols { grid-template-columns: minmax(0, 1fr); }
    .ks-actions .ks-btn { flex: 1 1 100%; }
    .ks-gallery li:nth-child(1) { grid-column: span 2; grid-row: auto; }
    .ks-gallery li:nth-child(1) img { aspect-ratio: 16 / 10; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ks * { transition: none !important; } }

/* galeria sem destaque (páginas de departamento) */
.ks-gallery--even li:nth-child(1) { grid-column: auto; grid-row: auto; }
.ks-gallery--even li:nth-child(1) img { aspect-ratio: 1; height: auto; }
.ks-head--split .ks-list { align-self: end; }
.ks-list--cols { columns: 2 320px; column-gap: var(--ks-s6); }
.ks-list--cols li { break-inside: avoid; }
.ks-units-title { margin-top: var(--ks-s7); }
/* produto em destaque (departamento com 1 produto) */
.ks-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ks-s6); align-items: center; padding: var(--ks-s5); border: 1px solid var(--ks-line); border-radius: var(--ks-r-lg); background: #fff; text-decoration: none; }
.ks a.ks-feature { color: var(--ks-ink); }
.ks a.ks-feature:hover { border-color: var(--dep, var(--ks-blue-dark)); box-shadow: var(--ks-shadow-sm); }
.ks-feature img { width: 100%; border-radius: var(--ks-r-md); background: var(--ks-paper); }
.ks-feature .ks-feature__icon { width: 96px; height: 96px; justify-self: center; }
.ks-feature > span { display: grid; gap: var(--ks-s2); }
.ks-feature strong { font-size: var(--ks-fs-h2); line-height: 1.2; }
.ks-feature em { font-style: normal; font-weight: 700; font-size: var(--ks-fs-lg); }
.ks-feature > span > span:not([class]) { color: var(--ks-muted); }
@media (max-width: 960px) { .ks-feature { grid-template-columns: minmax(0, 1fr); } }
/* vitrine LAB do DX: o atributo hidden das abas perdia para display:grid (as duas listas apareciam juntas) */
.lab-vitrine__grid[hidden] { display: none; }