/* ============================================================
Ruminas — UI 2026 (carregado por último em layouts/site.php)
Evolui o visual original do site (grafite, Oswald em caixa alta,
rótulos mono, amarelo sinalização, laranja, faixas hazard) sem
trocar a identidade: corrige hierarquia, contraste AA, menu por
linha comercial, imagens coerentes e nada sobreposto às fotos.
Reversível: remover o deste arquivo volta ao visual anterior.
============================================================ */
/* ---------- 1. Tokens ---------- */
:root {
/* identidade original: Oswald nos títulos (o refinement.css tinha trocado por Barlow) */
--font-display: "Oswald", "Arial Narrow", sans-serif;
--paper: #f4f3ef;
--paper-2: #eae8e2;
--paper-line: #dfdbd3;
--ink-900: #16191e;
--ink-700: #33383f;
--ink-600: #50565e; /* 7,0:1 sobre --paper */
--ink-faint: #8f959d; /* auxiliar em fundo escuro: ~5,6:1 sobre #101216 */
--graphite: #0c0e11; /* = --bg original */
--graphite-2: #12151a; /* = --bg-raised original */
--graphite-3: #1a1e24; /* = --surface original */
--header-h: 76px;
--radius: 4px;
--radius-lg: 6px;
--shadow-hard: 3px 3px 0 rgba(0, 0, 0, .5);
--shadow-card: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 28px -18px rgba(0, 0, 0, .6);
--shadow-pop: 0 28px 60px -28px rgba(0, 0, 0, .7);
--ease: cubic-bezier(.2, .7, .2, 1);
}
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { background-color: var(--graphite); }
/* Sem JS, nada fica invisível (o reveal só atua quando app.js marcou ) */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
[data-reveal] { transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease); }
/* ---------- 2. Tipografia base ---------- */
.kicker {
font-family: var(--font-mono);
font-weight: 500;
font-size: .76rem; /* antes .72rem */
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: .7rem;
color: var(--ink-faint);
}
.kicker--signal { color: var(--signal); }
.section--light .kicker,
.section--light .kicker--signal { color: var(--brand); }
.section-title,
.hero__title,
.page-hero h1,
.product__title,
.cta-band__title,
.custom-band__title,
.lp-pain__title,
.lp-final__title,
.lp-cat-card__name,
.lp-process__step-title,
.lp-why-item__title,
.split__title,
.diagram__name {
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .01em;
}
.section-title {
font-size: clamp(1.75rem, 3.8vw, 2.75rem);
line-height: 1.08;
overflow-wrap: break-word;
}
.section-lede, .section-sub { font-size: clamp(.98rem, 1.3vw, 1.08rem); line-height: 1.6; color: #c9ccd1; }
.section--light { color: var(--ink-900); background-color: var(--paper); }
.section--light .section-lede,
.section--light .section-sub { color: var(--ink-600); }
.section--dark { background-color: var(--graphite-2); }
.section-head { align-items: flex-end; }
.section-head--stack { display: block; max-width: 780px; }
.section-head--stack .section-lede { max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-lede { margin-inline: auto; }
.section-head__more { font-size: .8rem; border-bottom-width: 2px; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
/* A regra .split do refinement pintava de grafite o .container.split dentro de
seções claras → títulos escuros sobre fundo escuro ("Não achou a peça?",
"Onde as peças nascem"). Só a da landing é escura. */
.container.split { background: transparent; padding-block: 0; border: 0; }
/* ---------- 3. Botões (Oswald caixa alta + sombra dura, como o original) ---------- */
.btn {
font-family: var(--font-display);
font-weight: 600;
font-size: .95rem;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: var(--radius);
padding: .8rem 1.4rem;
transition: transform .15s var(--ease), background-color .15s, border-color .15s, color .15s, box-shadow .15s;
overflow-wrap: normal;
}
.btn--lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn--sm { padding: .55rem .95rem; font-size: .82rem; }
.btn--accent { box-shadow: var(--shadow-hard); }
.btn--accent:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); }
.btn--accent:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }
.btn--ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); transform: translate(-1px, -1px); }
.section--light .btn--ghost { color: var(--ink-900); border-color: #bdb7ad; }
.section--light .btn--ghost:hover { border-color: var(--ink-900); background: #fff; }
.btn--outline-light { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink-900); border-color: #fff; }
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--signal);
outline-offset: 2px;
}
.section--light .btn:focus-visible,
.section--light a:focus-visible { outline-color: var(--accent); }
/* ---------- 4. Skip link ---------- */
.skip-link {
position: absolute;
left: 12px;
top: -80px;
z-index: 400;
padding: .7rem 1rem;
background: var(--signal);
color: var(--signal-ink);
font-weight: 700;
border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }
/* ---------- 5. Utility bar (a "topbar" original, legível) ---------- */
.utilitybar {
background: var(--bg-deep);
color: #c7cbd0;
font-family: var(--font-mono);
font-size: .78rem; /* antes .72rem em caixa alta, difícil de ler */
letter-spacing: .04em;
line-height: 1.3;
border-bottom: 1px solid var(--line);
}
.utilitybar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 38px;
}
.utilitybar__list { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.utilitybar a { display: inline-flex; align-items: center; gap: .45rem; color: #eceef0; }
.utilitybar a:hover { color: var(--signal); }
.utilitybar svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.utilitybar__muted { color: #9ea4ab; }
/* ---------- 6. Cabeçalho (grafite, como o original) ---------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: rgba(12, 14, 17, .97);
color: var(--ink);
border-bottom: 1px solid var(--line-strong);
backdrop-filter: none;
transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8); }
.site-header__main {
position: relative;
display: flex;
align-items: center;
gap: clamp(.75rem, 1.6vw, 1.75rem);
min-height: var(--header-h);
padding-block: 0;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; margin-right: auto; color: inherit; }
.brand__mark { width: 48px; height: 48px; border-radius: 50%; box-shadow: var(--shadow-hard); }
.brand__text { display: flex; flex-direction: column; gap: .35rem; }
.brand__word { display: block; width: 132px; height: auto; }
.brand__tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #9ea4ab; line-height: 1.2; }
.site-nav { display: flex; align-items: center; gap: clamp(.6rem, 1.1vw, 1.25rem); }
.site-nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: static; }
.site-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .6rem .55rem;
font-family: var(--font-display);
font-weight: 500;
font-size: .92rem;
letter-spacing: .05em;
text-transform: uppercase;
color: #c9ccd1;
border-radius: var(--radius);
white-space: nowrap;
transition: color .15s, background-color .15s;
}
.site-nav__link::after {
content: "";
position: absolute;
left: .55rem;
right: .55rem;
bottom: .3rem;
width: auto;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s var(--ease);
}
.site-nav__link:hover { color: #fff; }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: #fff; }
.site-nav__chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.site-nav__trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); }
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__actions { display: flex; align-items: center; gap: .65rem; padding-left: clamp(.5rem, 1vw, 1rem); border-left: 1px solid var(--line-strong); }
.nav-quote {
display: inline-flex;
align-items: center;
gap: .45rem;
white-space: nowrap;
padding: .55rem .7rem;
font-family: var(--font-display);
font-weight: 500;
font-size: .88rem;
letter-spacing: .05em;
text-transform: uppercase;
color: #c9ccd1;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
transition: border-color .15s, color .15s;
}
.nav-quote:hover { border-color: #fff; color: #fff; }
.nav-quote__label--long { display: none; }
.nav-quote svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-quote__count {
display: inline-grid;
place-items: center;
min-width: 1.4rem;
height: 1.4rem;
padding: 0 .35rem;
font-family: var(--font-mono);
font-size: .72rem;
color: #c9ccd1;
background: rgba(255, 255, 255, .08);
border-radius: 999px;
}
.nav-quote.has-items .nav-quote__count { background: var(--signal); color: var(--signal-ink); }
.site-nav__cta { margin: 0; padding: .72rem 1.15rem; font-size: .92rem; white-space: nowrap; }
.site-nav__contact { display: none; }
.site-header__quick { display: none; }
/* Mega-menu — painel na largura do container, agrupado por linha comercial */
.mega {
position: absolute;
top: calc(100% + 1px);
left: var(--gutter);
right: var(--gutter);
min-width: 0;
transform: translateY(-6px);
background: var(--graphite-2);
color: var(--ink);
border: 1px solid var(--line-strong);
border-top: 2px solid var(--accent);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: var(--shadow-pop);
opacity: 0;
visibility: hidden;
max-height: calc(100vh - var(--header-h) - 24px);
overflow-y: auto;
overscroll-behavior: contain;
/* ao fechar, a visibilidade só some depois do fade */
transition: opacity .18s ease, transform .18s var(--ease), visibility 0s linear .18s;
z-index: var(--z-mega);
}
/* sem JS: :hover e :focus-within abrem o painel */
html:not(.js) .site-nav__item.has-mega:hover > .mega,
html:not(.js) .site-nav__item.has-mega:focus-within > .mega,
.site-nav__item.has-mega.is-open > .mega {
opacity: 1;
visibility: visible;
transform: none;
/* ao abrir, fica visível (e focável por Tab) imediatamente */
transition: opacity .18s ease, transform .18s var(--ease), visibility 0s;
}
/* com JS, o :hover antigo (components.css) não abre mais o painel por conta própria */
.js .site-nav__item.has-mega:not(.is-open):hover > .mega,
.js .site-nav__item.has-mega:not(.is-open):focus-within > .mega {
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
}
.mega__inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(230px, .95fr);
padding: 0;
}
.mega__line { padding: 1.4rem 1.25rem 1.5rem; border-right: 1px solid var(--line); min-width: 0; }
.mega__eyebrow {
display: block;
margin-bottom: .35rem;
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--signal);
}
.mega__title {
display: block;
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: .03em;
text-transform: uppercase;
color: #fff;
}
.mega__title:hover { color: var(--accent-hi); }
.mega__desc { margin: .45rem 0 .85rem; font-size: .88rem; line-height: 1.5; color: #b9bdc3; }
.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .5rem;
padding: .45rem 0;
font-size: .95rem;
font-weight: 500;
color: #dfe1e4;
border-top: 1px solid var(--line);
transition: color .15s, padding-left .15s;
}
.mega__links a:hover { color: var(--signal); padding-left: .25rem; }
.mega__note { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; color: #9ea4ab; white-space: nowrap; }
.mega__aside {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .55rem;
padding: 1.4rem 1.25rem 1.5rem;
background:
linear-gradient(90deg, rgba(232, 85, 29, .12), transparent 70%),
var(--graphite-3);
border-left: 3px solid var(--accent);
}
.mega__aside-title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #fff; margin: 0; }
.mega__aside .mega__desc { margin: 0 0 .35rem; }
.mega__all { margin-top: auto; padding-top: .75rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); }
.mega__all:hover { color: var(--signal); }
/* Botão do menu (mobile) */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: transparent;
flex: none;
}
.nav-toggle__bars { display: grid; gap: 5px; }
.nav-toggle__bars span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1101px) and (max-width: 1540px) {
.brand__tag { display: none; }
}
@media (min-width: 1101px) and (max-width: 1340px) {
.brand__tag { display: none; }
.site-nav__link { padding-inline: .4rem; font-size: .86rem; letter-spacing: .04em; }
.site-nav__link::after { left: .4rem; right: .4rem; }
.site-nav__cta { padding-inline: .9rem; font-size: .84rem; }
}
@media (min-width: 1101px) and (max-width: 1440px) {
.nav-quote__label--short { display: none; }
}
/* ---------- 7. Drawer (≤1100px) ---------- */
@media (max-width: 1100px) {
:root { --header-h: 66px; }
.nav-toggle { display: inline-flex; }
.site-header__quick { display: inline-flex; flex: none; }
.brand__mark { width: 42px; height: 42px; }
.brand__word { width: 116px; }
.brand { margin-right: auto; flex-shrink: 1; min-width: 0; }
.brand__text { min-width: 0; }
.site-nav {
position: fixed;
inset: auto;
top: var(--drawer-top, var(--header-h));
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: none;
padding: .5rem var(--gutter) 2rem;
background: var(--graphite-2);
border-top: 1px solid var(--line-strong);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .2s ease, transform .2s var(--ease), visibility 0s linear .2s;
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s var(--ease), visibility 0s; }
body.nav-open { overflow: hidden; }
.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__link {
width: 100%;
justify-content: space-between;
padding: 1rem .25rem;
font-size: 1.05rem;
border-radius: 0;
border-bottom: 1px solid var(--line);
}
.site-nav__link::after { display: none; }
.site-nav__link.is-active { color: var(--accent-hi); }
.site-nav__trigger[aria-expanded="true"] { background: transparent; }
.mega {
position: static;
display: none;
opacity: 1;
visibility: visible;
transform: none;
max-height: none;
overflow: visible;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.site-nav__item.has-mega.is-open > .mega,
html:not(.js) .mega { display: block; }
.js .site-nav__item.has-mega:not(.is-open):hover > .mega,
.js .site-nav__item.has-mega:not(.is-open):focus-within > .mega { display: none; }
.mega__inner { grid-template-columns: 1fr; }
.mega__line { padding: .9rem .25rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
.mega__desc { display: none; }
.mega__title { font-size: 1rem; }
.mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin-top: .45rem; }
.mega__links a { display: block; border-top: 0; padding: .4rem 0; }
.mega__note { display: block; font-size: .64rem; }
body.nav-open .wa-fab,
body.nav-open .lp-wa-sticky,
body.nav-open .ql-bar { display: none; }
.mega__aside { margin: 1rem 0 .5rem; border-radius: var(--radius-lg); }
.mega__aside .mega__desc { display: block; }
.site-nav__actions { flex-direction: column; align-items: stretch; gap: .6rem; padding: 1.2rem 0 0; border-left: 0; }
.site-nav__cta,
.nav-quote { justify-content: center; width: 100%; padding-block: .85rem; }
.nav-quote__label--short { display: none; }
.nav-quote__label--long { display: inline; }
.site-nav__contact { display: grid; gap: .5rem; padding-top: 1.2rem; font-family: var(--font-mono); font-size: .86rem; }
.site-nav__contact a { color: #dfe1e4; }
html:not(.js) .site-nav { position: static; opacity: 1; visibility: visible; transform: none; padding-bottom: 1rem; }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-header__main { flex-wrap: wrap; }
}
@media (max-width: 760px) {
.brand__tag { display: none; }
}
@media (max-width: 560px) {
.utilitybar__muted,
.utilitybar__social { display: none; }
.utilitybar__list { gap: .35rem 1rem; }
}
@media (max-width: 400px) {
.brand__word { width: 98px; }
.brand__mark { width: 38px; height: 38px; }
.site-header__quick { padding: .5rem .7rem; font-size: .76rem; }
.site-header__main { gap: .5rem; }
}
@media (max-width: 340px) {
.site-header__quick { display: none; }
}
/* ---------- 8. Hero (estrutura original: destaque "sob medida" + lista de aplicações) ---------- */
.hero { min-height: min(92svh, 860px); }
.hero__content { padding-block: clamp(3.5rem, 8vw, 6rem); max-width: 900px; }
.hero__title {
font-size: clamp(2.3rem, 6vw, 4.6rem);
line-height: 1.02;
max-width: 16ch;
text-wrap: balance;
}
.hero__sub { max-width: 58ch; font-size: clamp(1rem, 1.6vw, 1.18rem); color: #e9e7e2; line-height: 1.55; margin-bottom: 1.4rem; }
.hero__made { max-width: 56ch; margin-bottom: 1.1rem; }
.hero__made-title { font-family: var(--font-display); }
.hero__made-sub { color: #d3d6da; }
/* lista de aplicações: agora cada item leva à linha correspondente */
.hero__apps { max-width: 760px; margin-bottom: 1.6rem; }
.hero__apps-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; }
.hero__apps-list { gap: .45rem; }
.hero__apps-list li { white-space: normal; }
.hero__apps-list li::after { display: none; }
.hero__apps-list a {
display: inline-flex;
padding: .35rem .7rem;
font-family: var(--font-mono);
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 2px;
transition: color .15s, border-color .15s, background-color .15s;
}
.hero__apps-list a:hover { color: var(--signal); border-color: var(--signal); background: rgba(245, 183, 10, .06); }
.hero__foot { gap: 1.25rem; flex-wrap: wrap; }
.hero__hazard { width: 64px; height: 8px; opacity: 1; }
.hero__stat { font-size: .76rem; color: #b9bdc3; }
.hero__slide::after {
background:
linear-gradient(90deg, rgba(8, 9, 11, .9) 0%, rgba(8, 9, 11, .72) 45%, rgba(8, 9, 11, .35) 100%),
linear-gradient(180deg, rgba(8, 9, 11, .2) 60%, rgba(8, 9, 11, .88) 100%);
}
.hero__shade { opacity: .2; }
.landing-hero__qualification { font-size: .9rem; color: #d7d9dc; }
@media (max-width: 560px) {
.hero__actions .btn { flex: 1 1 100%; }
}
/* ---------- 9. Produtos por linha (painéis grafite, como o "por máquina" original) ---------- */
.lines { padding-block: clamp(56px, 8vw, 104px); }
.lines .section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.lines__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.line-card {
display: flex;
flex-direction: column;
min-width: 0;
background: #20242a;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform .25s var(--ease), border-color .25s;
}
.line-card:hover,
.line-card:focus-within { transform: translateY(-3px); border-top-color: var(--accent); }
.line-card__media { display: block; aspect-ratio: 3 / 2; background: #fff; overflow: hidden; }
.line-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.line-card:hover .line-card__media img { transform: scale(1.03); }
.line-card__note {
margin: 0;
padding: .4rem 1.1rem;
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .04em;
color: #e9d9a8;
background: #171a1f;
border-bottom: 1px solid var(--line);
}
.line-card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 1.15rem 1.2rem 1.25rem; }
.line-card__eyebrow { margin: 0 0 .4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.line-card__title { margin: 0 0 .5rem; font-family: var(--font-display); font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.15; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.line-card__title a { color: #fff; }
.line-card__title a:hover { color: var(--accent-hi); }
.line-card__desc { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.55; color: #b9bdc3; }
/* links das peças: chips mono amarelos (mesmo estilo dos links do "por máquina" original) */
.line-card__links { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.line-card__links a {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .38rem .7rem;
font-family: var(--font-mono);
font-size: .72rem;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--signal);
border: 1px solid rgba(245, 183, 10, .32);
border-radius: 2px;
transition: background-color .15s, border-color .15s;
}
.line-card__links a:hover { background: rgba(245, 183, 10, .08); border-color: var(--signal); }
.line-card__links span { font-size: .62rem; color: #9ea4ab; text-transform: none; letter-spacing: 0; }
.line-card__cta { margin-top: auto; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); }
.line-card__cta span { display: inline-block; transition: transform .2s var(--ease); }
.line-card__cta:hover span { transform: translateX(4px); }
/* na landing a seção é clara: cards seguem escuros, cabeçalho escuro sobre o papel */
.lp-targets .line-card { box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .55); }
.qualify-strip {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem 1.5rem;
margin-top: clamp(1.25rem, 3vw, 2rem);
padding: 1.1rem 1.25rem;
background:
repeating-linear-gradient(135deg, rgba(245, 183, 10, .035) 0 10px, transparent 10px 20px),
var(--graphite);
color: #fff;
border: 1px solid var(--line);
border-left: 4px solid var(--signal);
border-radius: var(--radius);
}
.qualify-strip__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.qualify-strip__list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.qualify-strip__list li { padding: .3rem .6rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: #e3e5e8; border: 1px solid var(--line-strong); border-radius: 2px; }
@media (max-width: 1180px) { .lines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .qualify-strip { grid-template-columns: 1fr; } .qualify-strip .btn { justify-self: start; } }
@media (max-width: 620px) { .lines__grid { grid-template-columns: 1fr; } }
/* ---------- 10. Faixa "sob medida" (contraste corrigido; selo SOB MEDIDA original) ---------- */
.custom-band {
padding-block: clamp(56px, 8vw, 104px);
background:
linear-gradient(160deg, var(--bg-deep), var(--brand-deep) 170%);
color: #f2f1ee;
border-top: 3px solid var(--accent);
}
.custom-band__inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: center;
}
.custom-band__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--graphite-3); box-shadow: var(--shadow-pop); }
.custom-band__media img { width: 100%; height: 100%; object-fit: cover; }
.custom-band__media .split__label { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: rgba(8, 9, 11, .8); }
.custom-band__media figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2.2rem 1rem .8rem;
font-family: var(--font-mono);
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(180deg, rgba(10, 12, 15, 0), rgba(10, 12, 15, .85));
}
.custom-band__title { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.8vw, 2.9rem); line-height: 1.06; color: #fff; }
.custom-band__title em { color: var(--accent-hi); }
.custom-band__text { max-width: 56ch; margin: 0 0 1.2rem; font-size: 1.05rem; line-height: 1.6; color: #d9dbde; }
.custom-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.check-list--on-dark li { color: #e6e8ea; }
.check-list li { line-height: 1.5; }
@media (max-width: 900px) {
.custom-band__inner { grid-template-columns: 1fr; }
.custom-band__media { aspect-ratio: 16 / 9; }
}
/* ---------- 11. Peças reais ---------- */
.gallery-strip__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.gallery-strip__item { border: 1px solid var(--paper-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.gallery-strip__item a { display: block; color: inherit; }
.gallery-strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-strip__cap {
display: block;
padding: .5rem .6rem;
font-family: var(--font-mono);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
text-align: center;
color: var(--ink-700);
border-top: 1px solid var(--paper-line);
}
.gallery-strip__item:hover .gallery-strip__cap { color: var(--brand); }
@media (max-width: 900px) { .gallery-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gallery-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- 12. Tradição (estrutura original; só legibilidade) ---------- */
.tradition__num span,
.proof__label { font-size: .72rem; }
.tradition__num span { color: #b9bdc3; }
.proof__text { color: #c9ccd1; font-size: .9rem; }
.tradition__text .section-title { color: #fff; }
/* ---------- 13. CTA band ---------- */
.cta-band { border-radius: var(--radius-lg); }
.cta-band__title { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.cta-band__sub { color: #c9ccd1; }
/* ---------- 14. Card de produto (estrutura nova, pele original) ---------- */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.product-card {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.section--light .product-card { background: #fff; color: var(--ink-900); border-color: var(--paper-line); }
.product-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.product-card__media {
display: block;
position: relative;
aspect-ratio: 4 / 3;
padding: .75rem;
background: #fff;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: 1px solid var(--line);
}
.product-card__media picture,
.product-card__media > img { display: block; width: 100%; height: 100%; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__media.is-illustrative { padding: 0; background: #f4f2ed; }
.product-card__media.is-illustrative img { object-fit: cover; }
.product-card__tech { display: none; } /* chips sobre a foto (antigo) — agora no corpo do card, sem sobrepor */
.product-card__note {
margin: 0;
padding: .4rem .9rem;
font-family: var(--font-mono);
font-size: .66rem;
letter-spacing: .04em;
line-height: 1.4;
color: #5b4a1a;
background: #fbf3dc;
border-bottom: 1px solid #f0e3bd;
}
.product-card__body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem 1rem; min-width: 0; }
.product-card__eyebrow { margin: 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); overflow-wrap: anywhere; }
.section--light .product-card__eyebrow { color: var(--brand); }
.product-card__name {
margin: 0;
padding: 0;
font-family: var(--font-display);
font-size: 1.04rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: .02em;
text-transform: uppercase;
overflow-wrap: anywhere;
hyphens: auto;
}
.product-card__name a { color: #fff; }
.section--light .product-card__name a { color: var(--ink-900); }
.product-card:hover .product-card__name { color: inherit; }
.product-card__name a:hover { color: var(--accent-hi); }
.section--light .product-card__name a:hover { color: var(--brand); }
.product-card__application {
display: inline-flex;
align-items: baseline;
align-self: flex-start;
max-width: 100%;
gap: .35rem;
padding: .25rem .45rem;
color: #d9dde2;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--line-strong);
border-radius: 2px;
font-family: var(--font-mono);
font-size: .66rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.product-card__application span { color: var(--signal); text-transform: uppercase; letter-spacing: .08em; }
.product-card__application b { color: var(--accent-hi); font-weight: 700; }
.product-card__application:hover { color: #fff; border-color: var(--signal); }
.section--light .product-card__application { color: var(--ink-700); background: #f5f3ef; border-color: #e3dfd8; }
.section--light .product-card__application span { color: var(--brand); }
.section--light .product-card__application:hover { color: var(--ink-900); border-color: var(--brand); }
.product-card__specs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.product-card__specs div {
display: inline-flex;
align-items: baseline;
gap: .3rem;
max-width: 100%;
padding: .18rem .45rem;
font-family: var(--font-mono);
font-size: .68rem;
line-height: 1.4;
text-transform: uppercase;
border: 1px solid var(--line-strong);
border-radius: 2px;
}
.product-card__specs dt { color: #9ea4ab; flex: none; }
.product-card__specs dd { margin: 0; color: #eceef0; overflow-wrap: anywhere; min-width: 0; }
.section--light .product-card__specs div { background: #f5f3ef; border-color: #e3dfd8; }
.section--light .product-card__specs dt { color: var(--ink-600); }
.section--light .product-card__specs dd { color: var(--ink-900); }
.product-card__price { font-family: var(--font-display); font-weight: 600; color: var(--accent-hi); }
.product-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .75rem;
margin-top: auto;
padding-top: .35rem;
}
.product-card__cta { flex: 1 1 auto; justify-content: center; white-space: nowrap; box-shadow: none; }
.product-card__more { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #dfe1e4; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.section--light .product-card__more { color: var(--ink-700); text-decoration-color: #c9c4bb; }
.product-card__more:hover { color: var(--accent-hi); text-decoration-color: currentColor; }
.product-card .ql-add {
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .05em;
text-transform: uppercase;
color: #c9ccd1;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 2px;
padding: .35rem .6rem;
}
.product-card .ql-add:hover { color: var(--signal); border-color: var(--signal); }
.section--light .product-card .ql-add { color: var(--ink-700); border-color: #cfc9bf; }
.section--light .product-card .ql-add:hover { color: var(--ink-900); border-color: var(--ink-900); }
.ql-add.is-added { color: #116b34; border-color: #7cc79a; background: #effaf2; }
/* ---------- 15. Página de produto ---------- */
.product { align-items: start; }
.product__main { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); }
.product__main-img { margin: 0; }
.product__main-img img { aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem; }
.product__thumbs { flex-wrap: wrap; }
.product__thumbs button { width: 76px; height: 76px; padding: 4px; background: #fff; border: 2px solid var(--paper-line); border-radius: var(--radius); opacity: 1; }
.product__thumbs button.is-active { border-color: var(--accent); }
.product__thumbs img { object-fit: contain; }
.product__illustration { margin: 0; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); overflow: hidden; }
.product__illustration img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product__illustration figcaption { padding: .8rem 1rem; font-size: .9rem; line-height: 1.5; color: #5b4a1a; background: #fbf3dc; border-top: 1px solid #f0e3bd; }
.product__eyebrow { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.product__title { letter-spacing: .01em; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.spec { border-radius: var(--radius); border-color: var(--paper-line); }
.spec__row { grid-template-columns: minmax(110px, 1fr) 2fr; font-size: .95rem; }
.spec__row dt { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-600); }
.spec__row dd { overflow-wrap: anywhere; }
.stock { font-weight: 600; color: var(--ink-700); }
.stock--ok { color: #11743a; }
.stock--low { color: #8a5a00; }
.product__desc p { color: var(--ink-700); }
.product__price { margin: 1.25rem 0; padding: .9rem 1rem; font-size: 1.5rem; font-weight: 700; color: var(--brand); background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); }
.product__qualify { margin: 1.25rem 0 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--paper-line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.product__qualify-title { margin: 0 0 .5rem; font-weight: 700; color: var(--ink-900); }
.product__qualify ul { list-style: disc; margin: 0; padding-left: 1.2rem; color: var(--ink-700); font-size: .94rem; line-height: 1.6; }
.product__note { font-family: var(--font-body); font-size: .88rem; color: var(--ink-600); }
.section-head > div { min-width: 0; }
/* ---------- 16. Diagrama (hotspots ancorados no ponto) ---------- */
.diagram { background: var(--graphite); }
.diagram__photo-wrap { background: #f3f1ec; }
.hotspot {
transform: translate(-15px, -15px); /* o centro da bolinha fica exatamente em (x, y) */
display: block;
width: 30px;
height: 30px;
}
.hotspot__dot { transform: none; }
.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot,
.hotspot.is-active .hotspot__dot { transform: scale(1.12); }
.hotspot__label {
position: absolute;
top: 50%;
left: 38px;
transform: translateY(-50%);
font-family: var(--font-body);
font-size: .8rem;
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
color: #fff;
background: rgba(16, 18, 22, .92);
border-color: rgba(255, 255, 255, .15);
border-radius: 6px;
padding: .3rem .55rem;
pointer-events: none;
}
.hotspot--right .hotspot__label { left: auto; right: 38px; }
.hotspot.is-active .hotspot__label,
.hotspot:hover .hotspot__label { color: var(--signal); }
.diagram__note { margin: .6rem 0 0; font-size: .82rem; color: #b9bdc3; }
.diagram__panel { background: var(--graphite-3); border-color: rgba(255, 255, 255, .1); }
.diagram__media { margin: 0; aspect-ratio: 4 / 3; background: #fff; }
.diagram__media img { object-fit: contain; padding: .75rem; }
.diagram__media.is-illustrative { background: #f4f2ed; }
.diagram__media.is-illustrative img { object-fit: cover; padding: 0; }
.diagram__caption {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem .6rem;
margin: 0;
padding: .55rem 1rem;
background: #0f1115;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.diagram__tag { position: static; font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .05em; border-radius: 4px; }
.diagram__illus-note { font-size: .78rem; font-weight: 600; color: #e9d9a8; }
.diagram__prod a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.diagram__prod a:hover { text-decoration-color: currentColor; }
.diagram__mat,
.diagram__model,
.diagram__ref { font-family: var(--font-body); font-size: .84rem; letter-spacing: .02em; text-transform: none; }
.diagram__model { color: #b9bdc3; }
.diagram__desc { color: #c9ccd1; }
.diagram__variants-label { font-family: var(--font-body); font-size: .74rem; font-weight: 700; color: #b9bdc3; }
.diagram__variant { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.diagram__visual-fallback,
.diagram__visual-fallback span { display: none; }
@media (max-width: 768px) {
.hotspot__label { display: none; }
}
/* ---------- 17. Cabeçalho de páginas internas ---------- */
.page-hero {
background:
linear-gradient(180deg, rgba(16, 18, 22, 0) 0%, rgba(16, 18, 22, .6) 100%),
var(--graphite);
border-bottom: 1px solid rgba(255, 255, 255, .06);
padding-block: clamp(40px, 6vw, 80px);
}
.page-hero--slim { padding-block: clamp(20px, 3vw, 32px); }
.page-hero h1 { letter-spacing: .01em; max-width: 26ch; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; color: #fff; }
.page-hero .lede { color: #d3d6da; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; }
.breadcrumb { font-family: var(--font-body); font-size: .84rem; letter-spacing: 0; text-transform: none; color: #b9bdc3; margin-bottom: 0; }
.breadcrumb a { color: #e3e5e8; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: #b9bdc3; overflow-wrap: anywhere; }
/* ---------- 18. Catálogo ---------- */
.section.catalog { padding-top: clamp(24px, 4vw, 44px); }
.catalog-lines {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .6rem;
margin-bottom: 1.25rem;
border: 0;
background: transparent;
overflow: visible;
}
.catalog-lines__item {
display: flex;
flex-direction: column;
gap: .3rem;
min-height: 0;
padding: .9rem 1rem;
color: var(--ink-900);
background: #fff;
border: 1px solid var(--paper-line);
border-radius: var(--radius);
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.catalog-lines__item:hover,
.catalog-lines__item:focus-visible { background: #fff; color: var(--ink-900); border-color: var(--ink-900); transform: translateY(-2px); }
.catalog-lines__item.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.catalog-lines__item strong { font-size: .98rem; line-height: 1.25; }
.catalog-lines__item span { font-size: .84rem; line-height: 1.4; color: var(--ink-600); }
.catalog-lines__item:hover span { color: var(--ink-600); }
.catalog-lines__item em { margin-top: auto; padding-top: .25rem; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--brand); }
.catalog-lines__item--custom { background: var(--graphite-2); color: #fff; border-color: var(--graphite-2); }
.catalog-lines__item--custom span { color: #c9ccd1; }
.catalog-lines__item--custom em { color: var(--signal); }
.catalog-lines__item--custom:hover { background: var(--graphite-3); color: #fff; border-color: var(--graphite-3); }
.catalog-lines__item--custom:hover span { color: #c9ccd1; }
.filterbar {
background: #fff;
border: 1px solid var(--paper-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.filterbar__field label { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink-700); }
.filterbar__field--search label { font-size: .9rem; color: var(--ink-900); }
.filterbar__field input,
.filterbar__field select,
.filterbar__search {
background: #fff;
color: var(--ink-900);
border: 1px solid #cfc9bf;
border-radius: var(--radius);
font-size: .95rem;
}
.filterbar__field select { padding: .65rem .7rem; }
.filterbar__search input { color: var(--ink-900); border: 0; }
.filterbar__search input::placeholder { color: #7a7f86; }
.filterbar__icon { color: var(--ink-600); }
.catalog-count {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .6rem 1rem;
font-family: var(--font-body);
font-size: .95rem;
letter-spacing: 0;
text-transform: none;
color: var(--ink-600);
}
.catalog-count strong { color: var(--ink-900); }
.filter-chips-active { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.filter-chips-active a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; font-size: .84rem; font-weight: 600; color: var(--ink-900); background: #fff; border: 1px solid #cfc9bf; border-radius: 999px; }
.filter-chips-active a:hover { border-color: var(--accent); color: var(--brand); }
.pagination { flex-wrap: wrap; }
.pagination__link { font-family: var(--font-body); font-weight: 600; color: var(--ink-700); border-color: #cfc9bf; background: #fff; border-radius: var(--radius); }
.section--dark .pagination__link { background: transparent; color: #e3e5e8; border-color: rgba(255, 255, 255, .2); }
.empty-state { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); }
.empty-state h2 { color: var(--ink-900); }
.empty-state p { color: var(--ink-600); }
.empty-state--b2b { text-align: left; max-width: 760px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); }
.empty-state--b2b p { margin-inline: 0; max-width: none; }
.empty-state--b2b .check-list li { color: var(--ink-700); }
.catalog-more { margin-top: 1.5rem; text-align: center; }
.pill { font-family: var(--font-body); font-weight: 600; font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--ink-700); border-color: #cfc9bf; background: #fff; }
@media (max-width: 1180px) { .catalog-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .catalog-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .catalog-lines { grid-template-columns: 1fr; } }
/* ---------- 19. Institucionais ---------- */
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.about-split__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.factory-gallery { padding: 0; }
.factory-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.factory-gallery__item { border-color: var(--paper-line); background: #fff; }
.factory-gallery__item picture { display: block; height: 100%; }
.factory-gallery__caption {
position: absolute;
opacity: 1;
transform: none;
font-family: var(--font-body);
font-size: .9rem;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
padding: 2.2rem .9rem .75rem;
background: linear-gradient(180deg, rgba(10, 12, 15, 0), rgba(10, 12, 15, .85));
}
.tradition__nums { border-radius: var(--radius); overflow: hidden; }
.process { border-radius: var(--radius-lg); overflow: hidden; }
.process__num { font-family: var(--font-body); font-weight: 700; }
.process__step h3 { font-size: 1.1rem; }
.contact-map { margin-top: 1.25rem; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); overflow: hidden; }
.contact-map img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.contact-map__body { display: grid; gap: .35rem; padding: 1rem 1.1rem 1.15rem; }
.contact-map__title { margin: 0; font-weight: 700; color: var(--ink-900); }
.contact-map__addr { margin: 0 0 .5rem; color: var(--ink-600); font-size: .95rem; }
.contact-map .btn { justify-self: start; }
.spec--contact dd a { color: var(--brand); font-weight: 600; }
@media (max-width: 900px) {
.about-split { grid-template-columns: 1fr; }
.factory-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .factory-gallery__grid { grid-template-columns: 1fr; } }
/* ---------- 20. Formulários ---------- */
.form__label { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #c9ccd1; }
.section--light .form__label { color: var(--ink-700); }
.form__input { border-radius: var(--radius); font-size: 1rem; }
.form__input::placeholder { color: #8f959d; }
.section--light .form__input { border-color: #cfc9bf; }
select.form__input { appearance: auto; }
/* inputs têm largura intrínseca: sem min-width:0 o grid estourava a tela em 320px */
.form__row > *,
.form__group,
.form__input { min-width: 0; }
.form { grid-template-columns: minmax(0, 1fr); }
.form > * { min-width: 0; }
.form__row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.form__aside { margin: .25rem 0 0; font-size: .9rem; color: var(--ink-600); }
.form__aside a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form__hint { font-family: var(--font-body); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.landing-form__wa-option { color: #c9ccd1; }
@media (max-width: 760px) { .form__row--3 { grid-template-columns: 1fr; } }
/* ---------- 21. Rodapé ---------- */
.site-footer { background: #0d0f12; }
.brand--footer { gap: .6rem; margin-right: 0; }
.brand--footer .brand__word { width: 124px; }
.site-footer__about { color: #b9bdc3; }
.site-footer__lines { display: grid; gap: .35rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.site-footer__lines a { color: #e3e5e8; font-weight: 600; font-size: .93rem; }
.site-footer__lines a:hover { color: var(--accent-hi); }
.site-footer__title { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: #fff; }
.site-footer__list { color: #c9ccd1; }
.site-footer__bottom { font-family: var(--font-body); font-size: .84rem; color: #9ea4ab; }
/* ---------- 22. Landing (/vendas, /orcamento) ---------- */
/* .split (components.css) é um grid de 2 colunas pensado para .container.split.
Na landing a própria recebia o grid e o conteúdo
(.split__inner) ficava espremido na 1ª coluna. A seção volta a ser bloco. */
section.split { display: block; }
.split__media svg { width: 100%; height: 100%; }
.lp-targets { background: var(--paper); color: var(--ink-900); }
.lp-targets .kicker--signal { color: var(--brand); }
.lp-targets .section-title { color: var(--ink-900); }
.lp-targets .section-lede { color: var(--ink-600); }
/* Fotos de máquina (retrato) inteiras dentro do card, sem cortar a peça */
.lp-cat-card__media { background: #fff; }
.lp-cat-card__media img { object-fit: contain; filter: none; }
.lp-cat-card__media::after { background: linear-gradient(180deg, transparent 70%, rgba(8, 9, 11, .35)); }
.lp-cat-card__name { color: #fff; }
.auth-band__label { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: #c9ccd1; }
.lp-pain__eyebrow,
.lp-final__eyebrow,
.split__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .1em; }
.lp-pain__list li { color: var(--ink-700); }
.lp-cat-card__part { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #d7d9dc; }
.lp-cat-card__label { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .06em; padding: .25rem .5rem; background: rgba(10, 12, 15, .75); border-radius: 4px; }
.lp-cat-card__cta { font-family: var(--font-body); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.lp-why-item__num { font-family: var(--font-body); font-weight: 700; font-size: .78rem; }
.lp-process__num { border-radius: 50%; font-family: var(--font-body); }
.lp-process__step-text,
.lp-factory__head p,
.split__text,
.lp-final__text { color: #c9ccd1; }
.lp-factory__thumb::after { font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #fff; }
.filter-group__label { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #c9ccd1; }
.filter-chip { font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 999px; }
.catalog-filter__count { font-family: var(--font-body); font-size: .86rem; letter-spacing: 0; text-transform: none; color: #c9ccd1; }
.featured__cta-text { color: #e3e5e8; }
/* botões longos quebram linha no celular em vez de estourar a largura (ex.: "Fabricamos sob desenho ou amostra") */
@media (max-width: 560px) {
.featured__cta .btn,
.custom-band__actions .btn,
.split__copy .btn,
.lp-final__actions .btn,
.lp-pain .btn { white-space: normal; text-align: center; max-width: 100%; }
}
/* Marcas e fornecedores: textos auxiliares legíveis */
.brands-band__chip,
.suppliers-band__logo--text { font-family: var(--font-body); font-size: .86rem; font-weight: 600; letter-spacing: .02em; color: #d7d9dc; }
.suppliers-band__desc,
.suppliers-band__note { font-family: var(--font-body); font-size: .82rem; letter-spacing: 0; text-transform: none; color: #b9bdc3; }
/* ---------- 23. Lista de cotação ---------- */
.ql-modal__foot { flex-direction: column; align-items: stretch; }
.ql-modal__hint { margin: 0; font-size: .84rem; color: #c9ccd1; }
.ql-modal__send { width: 100%; }
.ql-modal__empty { color: #c9ccd1; line-height: 1.5; }
.ql-bar__text { font-family: var(--font-body); font-size: .86rem; letter-spacing: 0; text-transform: none; color: #e3e5e8; }
/* ---------- 24. Botão WhatsApp flutuante ---------- */
/* overflow:hidden prende o brilho (::after) dentro do botão — antes ele aparecia como faixa cinza ao lado */
.wa-fab { font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; border-radius: 999px; overflow: hidden; }
.wa-fab__stripe { display: none; }
/* ---------- 25. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; }
.line-card,
.product-card,
.line-card__media img,
.product-card__media img,
.mega,
.site-nav { transition: none !important; }
.line-card:hover,
.product-card:hover,
.catalog-lines__item:hover { transform: none; }
}