/* ================================================
INFOi9 — CSS Moderno & Clean 2026
ORDEM CORRETA NO DE TODAS AS PÁGINAS:
1.
2.
3. ← sempre por último
Fonte: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500&display=swap
Adiciona no ANTES deste CSS:
================================================ */
/* ── FAVICON ──────────────────────────────────────
Adiciona no do HTML:
─────────────────────────────────────────────── */
/* === RESET & VARIAVEIS === */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Paleta principal */
--blue-900: #0b2545;
--blue-700: #1a5fa8;
--blue-600: #1e6fbf;
--blue-500: #2484e4;
--blue-100: #ddeeff;
--blue-50: #f0f7ff;
/* Neutros */
--gray-950: #0d0f14;
--gray-900: #111827;
--gray-700: #374151;
--gray-500: #6b7280;
--gray-300: #d1d5db;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
--white: #ffffff;
/* Tokens semânticos */
--color-bg: var(--white);
--color-bg-subtle: var(--gray-50);
--color-text: var(--gray-900);
--color-text-muted: var(--gray-500);
--color-border: var(--gray-300);
--color-primary: var(--blue-600);
--color-primary-dark: var(--blue-700);
--color-primary-bg: var(--blue-50);
/* Tipografia */
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* Espaçamentos */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-2xl: 64px;
--space-3xl: 96px;
/* Raios */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-full: 9999px;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(11,37,69,0.10);
--shadow-lg: 0 12px 40px rgba(11,37,69,0.14);
--shadow-focus: 0 0 0 3px rgba(36,132,228,0.25);
/* Transição */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--transition: 0.25s var(--ease);
}
/* === BASE === */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body) !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: var(--color-text) !important;
background: var(--color-bg) !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.025em !important;
color: var(--gray-900) !important;
}
p {
color: var(--color-text-muted) !important;
}
a {
color: var(--color-primary) !important;
text-decoration: none !important;
transition: color var(--transition) !important;
}
img {
max-width: 100% !important;
height: auto !important;
}
/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
background: var(--blue-500);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-700); }
/* === SELECAO === */
::selection {
background: var(--blue-100) !important;
color: var(--blue-900) !important;
}
/* ════════════════════════════════════════════════
HEADER — layout flexbox numa linha
════════════════════════════════════════════════ */
.u-header {
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(209, 213, 219, 0.6) !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), var(--shadow-sm) !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
min-height: unset !important;
height: auto !important;
/* FLEXBOX — tudo numa linha */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
padding: 12px 32px !important;
gap: 16px !important;
}
/* Remove posicionamento absoluto que o Nicepage injeta */
.u-header > *,
.u-header .u-logo,
.u-header .u-icon-1,
.u-header .u-search-1,
.u-header .u-text-1,
.u-header .u-menu-1 {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Logo — esquerda */
.u-header .u-logo {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
}
.u-header .u-logo-image-1 {
height: 48px !important;
width: auto !important;
display: block !important;
transition: opacity var(--transition), transform var(--transition) !important;
}
.u-header .u-logo:hover .u-logo-image-1 {
opacity: 0.8 !important;
transform: scale(1.02) !important;
}
/* Nav — centro, cresce */
.u-header .u-menu-1 {
flex: 1 1 auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Search */
.u-search-1 {
flex-shrink: 0 !important;
border-radius: var(--radius-full) !important;
border: 1.5px solid var(--color-border) !important;
background: var(--gray-50) !important;
transition: border-color var(--transition), box-shadow var(--transition) !important;
width: 180px !important;
min-width: 100px !important;
}
.u-search-1:focus-within {
border-color: var(--color-primary) !important;
box-shadow: var(--shadow-focus) !important;
background: var(--white) !important;
}
/* Ícone de email */
.u-header .u-icon-1 {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
}
.u-header .u-icon-1 img {
width: 22px !important;
height: auto !important;
}
/* Botão/texto email */
.u-header .u-text-1 {
flex-shrink: 0 !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.u-header .u-text-1 a,
.u-header .u-text-1 .u-btn-1,
.u-header a.u-text-palette-1-base {
color: var(--white) !important;
-webkit-text-fill-color: var(--white) !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
white-space: nowrap !important;
}
.u-header .u-text-1 a:hover,
.u-header .u-text-1 .u-btn-1:hover {
opacity: 0.85 !important;
}
/* Nav links */
.u-header .u-nav-link {
font-family: var(--font-display) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: var(--gray-700) !important;
padding: 6px 14px !important;
border-radius: var(--radius-sm) !important;
border: none !important;
transition: color var(--transition), background var(--transition) !important;
white-space: nowrap !important;
}
.u-header .u-nav-link:hover,
.u-header .u-nav-link:focus {
color: var(--color-primary) !important;
background: var(--color-primary-bg) !important;
border: none !important;
box-shadow: none !important;
}
/* Dropdown */
.u-nav-popup {
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-lg) !important;
border: 1px solid var(--color-border) !important;
overflow: hidden !important;
margin-top: 6px !important;
background: var(--white) !important;
padding: 6px !important;
}
.u-nav-popup .u-nav-link {
font-size: 0.875rem !important;
padding: 9px 16px !important;
border-radius: var(--radius-sm) !important;
color: var(--gray-700) !important;
}
.u-nav-popup .u-nav-link:hover {
background: var(--color-primary-bg) !important;
color: var(--color-primary) !important;
}
/* Mobile */
@media (max-width: 939px) {
.u-header {
padding: 10px 16px !important;
gap: 10px !important;
}
.u-search-1 {
width: 110px !important;
}
}
/* ════════════════════════════════════════════════
BOTOES GLOBAIS
════════════════════════════════════════════════ */
.u-btn {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
letter-spacing: 0.01em !important;
border-radius: var(--radius-full) !important;
padding: 11px 28px !important;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition) !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
}
/* Botão primário */
.u-palette-1-base,
.u-section-2 .u-btn-1,
.u-section-4 .u-btn-1 {
background: var(--blue-600) !important;
color: var(--white) !important;
border: none !important;
box-shadow: 0 2px 12px rgba(30,111,191,0.28) !important;
}
.u-palette-1-base:hover,
.u-section-2 .u-btn-1:hover,
.u-section-4 .u-btn-1:hover {
background: var(--blue-700) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(30,111,191,0.38) !important;
color: var(--white) !important;
}
/* ════════════════════════════════════════════════
HERO / SECÇÃO 2
════════════════════════════════════════════════ */
.u-section-2 {
background: var(--white) !important;
padding: var(--space-3xl) 0 var(--space-2xl) !important;
}
.u-section-2 .u-text-1 {
font-family: var(--font-display) !important;
font-size: clamp(2rem, 4vw, 3.25rem) !important;
font-weight: 800 !important;
letter-spacing: -0.035em !important;
color: var(--gray-900) !important;
line-height: 1.1 !important;
}
/* Linha decorativa sob o título */
.u-section-2 .u-text-1::after {
content: '' !important;
display: block !important;
width: 48px !important;
height: 3px !important;
background: var(--blue-500) !important;
border-radius: var(--radius-full) !important;
margin: 16px auto 0 !important;
}
.u-section-2 .u-text-2 {
font-size: 1.1rem !important;
line-height: 1.75 !important;
color: var(--gray-500) !important;
max-width: 560px !important;
}
/* ════════════════════════════════════════════════
CARDS DE FEATURES — SECÇÃO 3
════════════════════════════════════════════════ */
.u-section-3 {
background: var(--gray-50) !important;
padding: var(--space-3xl) 0 !important;
}
.u-section-3 .u-list-item {
background: var(--white) !important;
border-radius: var(--radius-lg) !important;
border: 1px solid transparent !important;
box-shadow: var(--shadow-sm) !important;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
overflow: hidden !important;
}
.u-section-3 .u-list-item:hover {
border-color: var(--blue-100) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-4px) !important;
}
.u-section-3 .u-text-1,
.u-section-3 .u-text-3,
.u-section-3 .u-text-5 {
font-family: var(--font-display) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--gray-900) !important;
letter-spacing: -0.015em !important;
}
.u-section-3 .u-text-2,
.u-section-3 .u-text-4,
.u-section-3 .u-text-6 {
font-size: 0.9rem !important;
line-height: 1.7 !important;
color: var(--gray-500) !important;
}
/* Botões "saber mais" nos cards */
.u-section-3 .u-btn-1,
.u-section-3 .u-btn-2,
.u-section-3 .u-btn-3 {
font-family: var(--font-display) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
color: var(--color-primary) !important;
background: var(--color-primary-bg) !important;
border: none !important;
border-radius: var(--radius-full) !important;
padding: 7px 18px !important;
box-shadow: none !important;
letter-spacing: 0.01em !important;
transition: background var(--transition), color var(--transition) !important;
}
.u-section-3 .u-btn-1:hover,
.u-section-3 .u-btn-2:hover,
.u-section-3 .u-btn-3:hover {
background: var(--blue-600) !important;
color: var(--white) !important;
transform: none !important;
}
/* ════════════════════════════════════════════════
SERVICOS — SECÇÃO 4
════════════════════════════════════════════════ */
.u-section-4 {
background: var(--white) !important;
padding: var(--space-3xl) 0 !important;
}
.u-section-4 .u-text-1 {
font-family: var(--font-display) !important;
font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: var(--gray-900) !important;
}
.u-section-4 .u-text-2 {
font-size: 1rem !important;
color: var(--gray-500) !important;
max-width: 520px !important;
}
.u-section-4 .u-list-item {
border-radius: var(--radius-md) !important;
overflow: hidden !important;
box-shadow: var(--shadow-sm) !important;
transition: transform var(--transition), box-shadow var(--transition) !important;
}
.u-section-4 .u-list-item:hover {
transform: translateY(-6px) !important;
box-shadow: var(--shadow-lg) !important;
}
.u-section-4 h5 {
font-family: var(--font-display) !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
text-shadow: 0 1px 6px rgba(0,0,0,0.45) !important;
}
.u-section-4 .u-btn-1 {
padding: 14px 44px !important;
font-size: 0.95rem !important;
background: var(--blue-600) !important;
border: none !important;
box-shadow: 0 4px 16px rgba(30,111,191,0.30) !important;
}
.u-section-4 .u-btn-1:hover {
background: var(--blue-700) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(30,111,191,0.40) !important;
}
/* ════════════════════════════════════════════════
PARCEIROS — SECÇÃO 5
════════════════════════════════════════════════ */
.u-section-5 {
background: var(--gray-50) !important;
border-top: 1px solid var(--color-border) !important;
padding: var(--space-2xl) 0 !important;
}
.u-section-5 .u-image {
filter: grayscale(60%) opacity(0.65) !important;
transition: filter var(--transition), transform var(--transition) !important;
}
.u-section-5 .u-image:hover {
filter: grayscale(0%) opacity(1) !important;
transform: scale(1.06) !important;
}
/* ════════════════════════════════════════════════
FORMULARIO DE CONTACTO
════════════════════════════════════════════════ */
.u-section-1 {
background: var(--gray-50) !important;
}
.u-form .u-input {
font-family: var(--font-body) !important;
font-size: 0.9rem !important;
border: 1.5px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
padding: 11px 15px !important;
background: var(--white) !important;
color: var(--gray-900) !important;
transition: border-color var(--transition), box-shadow var(--transition) !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.u-form .u-input:focus {
border-color: var(--blue-500) !important;
box-shadow: var(--shadow-focus) !important;
outline: none !important;
}
.u-form .u-input::placeholder {
color: var(--gray-300) !important;
}
.u-form-send-success {
background: #ecfdf5 !important;
color: #065f46 !important;
border-radius: var(--radius-md) !important;
padding: 12px 16px !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
border-left: 3px solid #10b981 !important;
}
.u-form-send-error {
background: #fef2f2 !important;
color: #991b1b !important;
border-radius: var(--radius-md) !important;
padding: 12px 16px !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
border-left: 3px solid #ef4444 !important;
}
/* ════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════ */
.u-footer {
background: var(--blue-900) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
padding: var(--space-xl) 0 !important;
}
.u-footer .u-text-1 {
color: rgba(255,255,255,0.45) !important;
font-size: 0.8rem !important;
letter-spacing: 0.02em !important;
}
/* ════════════════════════════════════════════════
BACK TO TOP
════════════════════════════════════════════════ */
.u-back-to-top {
background: var(--blue-600) !important;
border-radius: var(--radius-full) !important;
box-shadow: var(--shadow-md) !important;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition) !important;
}
.u-back-to-top:hover {
background: var(--blue-700) !important;
transform: translateY(-3px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* ════════════════════════════════════════════════
ANIMACOES DE ENTRADA
════════════════════════════════════════════════ */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.u-section-2 .u-sheet-1 {
animation: fadeUp 0.55s var(--ease) both !important;
}
.u-section-3 .u-sheet-1 {
animation: fadeUp 0.55s 0.1s var(--ease) both !important;
}
.u-section-4 .u-sheet-1 {
animation: fadeUp 0.55s 0.15s var(--ease) both !important;
}
/* ════════════════════════════════════════════════
TIPOGRAFIA DE DESTAQUE (secção headers)
════════════════════════════════════════════════ */
.u-section-3 > .u-sheet-1 > .u-text,
.u-section-4 > .u-sheet-1 > .u-text {
position: relative !important;
}
/* Badge/pill label acima dos títulos de secção */
.u-section-3 .u-text-7,
.u-section-4 .u-text-3 {
display: inline-block !important;
font-family: var(--font-display) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--blue-600) !important;
background: var(--blue-50) !important;
border: 1px solid var(--blue-100) !important;
border-radius: var(--radius-full) !important;
padding: 4px 14px !important;
margin-bottom: 12px !important;
}
/* ════════════════════════════════════════════════
RESPONSIVO
════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--space-3xl: 64px;
--space-2xl: 40px;
}
.u-section-2 .u-text-1 {
font-size: 2rem !important;
}
.u-section-4 .u-text-1 {
font-size: 1.75rem !important;
}
.u-header .u-sheet-1 {
padding: 0 var(--space-md) !important;
}
}
@media (max-width: 480px) {
.u-btn {
padding: 10px 22px !important;
font-size: 0.875rem !important;
}
}