/* =====================================================================
Sentinela Industrial — Vitrine
Pacote CSS profissional. Mantém TODAS as classes do HTML existente
(.site-header, .nav, .brand, .btn*, .hero, .kicker, .grid*, .card,
.step-num, details/summary, .cta-band, .site-footer, .access-wrap...).
Identidade: navy industrial + acento âmbar; tipografia Inter.
===================================================================== */
/* Para produção, considere mover o @import para um
no dos HTMLs e usar font-display: swap (Google Fonts já envia). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ---------------------------------------------------------------------
Design tokens
--------------------------------------------------------------------- */
:root {
/* Cores — navy industrial + âmbar (calor de manutenção) */
--ink: #0F172A;
--navy: #0B2545;
--navy-2: #163E6B;
--navy-soft: #1E3A5F;
--accent: #F59E0B; /* CTA, destaques */
--accent-2: #D97706;
--bg: #FFFFFF;
--bg-alt: #F8FAFC;
--bg-soft: #F1F5F9;
--line: #E2E8F0;
--line-soft: #EDF1F7;
--muted: #475569;
--success: #16A34A;
--critical: #B91C1C;
/* Aliases legados usados por trechos antigos do HTML. */
--azul: var(--navy);
--cinza: var(--muted);
--linha: var(--line);
/* Tipografia */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
/* Sombras, raios, layout */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
--shadow-md: 0 6px 18px -6px rgba(15, 23, 42, .15);
--shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .25);
--radius: 12px;
--radius-lg: 18px;
--max: 1180px;
--gutter: 28px;
}
/* ---------------------------------------------------------------------
Reset enxuto + base
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--navy-2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-2); }
::selection { background: color-mix(in srgb, var(--accent) 35%, white); color: var(--ink); }
/* ---------------------------------------------------------------------
Layout helpers
--------------------------------------------------------------------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* ---------------------------------------------------------------------
Tipografia
--------------------------------------------------------------------- */
h1, h2, h3 {
font-weight: 700;
color: var(--ink);
letter-spacing: -.02em;
line-height: 1.15;
margin: 0;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
.kicker {
display: inline-flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 700;
color: var(--accent-2);
margin-bottom: 18px;
}
.kicker::before {
content: '';
width: 28px;
height: 2px;
background: var(--accent);
display: inline-block;
border-radius: 2px;
}
.lead {
color: var(--muted);
max-width: 68ch;
font-size: 1.05rem;
margin: 14px 0 40px;
}
/* ---------------------------------------------------------------------
Header & navegação
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
gap: 28px;
height: 72px;
}
.brand {
font-weight: 800;
color: var(--navy);
font-size: 1.18rem;
letter-spacing: -.02em;
}
.brand span {
color: var(--accent-2);
font-weight: 700;
padding-left: 3px;
}
.nav-links {
display: flex;
gap: 26px;
margin-left: auto;
align-items: center;
flex-wrap: wrap;
}
.nav-links a {
color: var(--muted);
font-size: .95rem;
font-weight: 500;
padding: 6px 0;
position: relative;
}
.nav-links a:not(.btn)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
.nav-links a:not(.btn):hover {
color: var(--ink);
text-decoration: none;
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
/* ---------------------------------------------------------------------
Botões
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 10px;
font-weight: 600;
font-size: .95rem;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, box-shadow .2s ease,
background .2s ease, color .2s ease, border-color .2s ease;
white-space: nowrap;
}
.btn:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 2px;
}
.btn-primary {
background: linear-gradient(135deg, var(--navy), var(--navy-2));
color: #fff;
box-shadow: 0 6px 20px -8px rgba(11, 37, 69, .55);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px -10px rgba(11, 37, 69, .7);
color: #fff;
text-decoration: none;
}
.btn-ghost {
background: #fff;
color: var(--navy);
border-color: var(--line);
}
.btn-ghost:hover {
border-color: var(--navy-2);
color: var(--navy-2);
text-decoration: none;
transform: translateY(-1px);
}
/* ---------------------------------------------------------------------
Hero — gradiente mesh, profissional e calmo
--------------------------------------------------------------------- */
.hero {
position: relative;
padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 7vw, 96px);
background:
radial-gradient(60% 70% at 80% 0%, rgba(245, 158, 11, .12), transparent 60%),
radial-gradient(40% 60% at 20% 30%, rgba(11, 37, 69, .07), transparent 60%),
linear-gradient(180deg, var(--bg-alt), var(--bg));
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: auto -10% -40% auto;
width: 600px;
height: 600px;
background: radial-gradient(closest-side, rgba(11, 37, 69, .08), transparent 70%);
pointer-events: none;
}
.hero h1 {
color: var(--navy);
max-width: 18ch;
}
.hero p.sub {
font-size: clamp(1.05rem, 1.3vw, 1.25rem);
color: var(--muted);
max-width: 64ch;
margin: 20px 0 32px;
}
.hero .cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-image {
min-height: 650px;
display: flex;
align-items: center;
background:
linear-gradient(90deg, rgba(6, 20, 39, .95), rgba(6, 20, 39, .72) 52%, rgba(6, 20, 39, .35)),
url('/assets/hero-sentinela-inteligencia-operacional.png') center right / cover no-repeat;
}
.hero-image h1,
.hero-image p.sub {
color: #fff;
}
.hero-image p.sub {
color: rgba(255, 255, 255, .86);
}
.hero-image .kicker {
color: #fbbf24;
}
.hero-image .kicker::before {
background: #fbbf24;
}
.hero-copy {
position: relative;
z-index: 1;
}
.compact-hero {
padding: clamp(64px, 8vw, 96px) 0;
}
.metric-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--line);
box-shadow: var(--shadow-sm);
}
.metric-strip div {
background: #fff;
padding: 24px;
}
.metric-strip strong {
display: block;
color: var(--navy);
font-size: 1.15rem;
margin-bottom: 6px;
}
.metric-strip span {
color: var(--muted);
font-size: .95rem;
}
/* ---------------------------------------------------------------------
Seções
--------------------------------------------------------------------- */
section { padding: clamp(64px, 8vw, 96px) 0; }
section.alt {
background: var(--bg-alt);
position: relative;
}
section.alt::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
/* ---------------------------------------------------------------------
Grids
--------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---------------------------------------------------------------------
Cards
--------------------------------------------------------------------- */
.card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px 26px;
box-shadow: var(--shadow-sm);
transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--navy-2) 25%, var(--line));
}
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 10px; color: var(--ink); }
.card p {
color: var(--muted);
font-size: .98rem;
}
.link-card {
display: block;
color: inherit;
}
.link-card:hover {
color: inherit;
}
.media-row {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
gap: clamp(28px, 5vw, 58px);
align-items: center;
}
.media-row-reverse {
grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr);
}
.media-row-reverse .visual-panel {
order: 2;
}
.visual-panel,
.wide-visual {
margin: 0;
}
.visual-panel img,
.wide-visual img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
background: #fff;
}
.visual-panel figcaption {
margin-top: 10px;
color: var(--muted);
font-size: .9rem;
}
.wide-visual {
max-width: 880px;
margin: 0 auto 34px;
}
.content-list {
display: grid;
gap: 18px;
}
.content-list div {
padding: 18px 0 18px 18px;
border-left: 4px solid var(--accent);
}
.content-list h3 {
margin-bottom: 6px;
}
.content-list p {
color: var(--muted);
}
/* Etapa numerada (1/2/3/4) */
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-weight: 700;
font-size: 1.05rem;
color: #fff;
background: linear-gradient(135deg, var(--navy), var(--navy-2));
box-shadow: 0 6px 16px -6px rgba(11, 37, 69, .45);
margin-bottom: 16px;
position: relative;
}
.step-num::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
opacity: 0;
transition: opacity .25s ease;
}
.card:hover .step-num::after { opacity: 1; }
/* ---------------------------------------------------------------------
FAQ — details/summary com chevron
--------------------------------------------------------------------- */
details {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 12px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
details[open] {
border-color: color-mix(in srgb, var(--navy-2) 30%, var(--line));
box-shadow: var(--shadow-sm);
}
details summary {
font-weight: 600;
cursor: pointer;
color: var(--ink);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
content: '+';
color: var(--accent-2);
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
transition: transform .2s ease;
}
details[open] summary::after { content: '−'; }
details p {
color: var(--muted);
margin-top: 12px;
}
/* ---------------------------------------------------------------------
CTA band — bloco escuro com convite
--------------------------------------------------------------------- */
.cta-band {
background:
radial-gradient(50% 80% at 20% 0%, rgba(245, 158, 11, .25), transparent 60%),
linear-gradient(135deg, var(--navy), var(--navy-2));
color: #fff;
text-align: center;
padding: clamp(56px, 7vw, 88px) 0;
position: relative;
overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p {
color: rgba(255, 255, 255, .85);
max-width: 640px;
margin: 14px auto 28px;
}
.cta-band .btn-ghost {
background: #fff;
color: var(--navy);
border-color: transparent;
}
.cta-band .btn-ghost:hover {
background: var(--accent);
color: var(--ink);
}
/* ---------------------------------------------------------------------
Rodapé
--------------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--line);
padding: 48px 0 36px;
color: var(--muted);
font-size: .92rem;
background: var(--bg-alt);
}
.foot-cols {
display: flex;
gap: 48px;
flex-wrap: wrap;
justify-content: space-between;
}
.foot-cols strong {
color: var(--ink);
display: block;
margin-bottom: 10px;
font-size: .95rem;
letter-spacing: .02em;
}
.foot-cols a {
color: var(--muted);
display: block;
margin: 6px 0;
}
.foot-cols a:hover { color: var(--accent-2); }
.site-footer .brand { font-size: 1rem; }
/* ---------------------------------------------------------------------
Hub de acesso (/acesso/)
--------------------------------------------------------------------- */
.access-wrap {
max-width: 680px;
margin: clamp(56px, 8vw, 96px) auto;
}
.form-container {
max-width: 640px;
}
.access-card {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px;
margin-bottom: 20px;
background: #fff;
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.access-card:hover {
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--navy-2) 25%, var(--line));
transform: translateY(-1px);
}
.access-card h3 {
margin: 0 0 8px;
color: var(--ink);
}
.access-card p {
color: var(--muted);
}
.access-action {
margin-top: 16px;
}
.access-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.access-help {
color: var(--muted);
font-size: .9rem;
}
.badge {
display: inline-block;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 18%, white);
color: var(--accent-2);
margin-bottom: 12px;
}
/* ---------------------------------------------------------------------
Formulários (página /demonstracao/)
Observação: a HTML atual usa style="" inline nos inputs do formulário;
o inline tem precedência. Para que estes estilos vigorem, remova os
inline styles dos /