/* =============================================================
QUALITY PISCINAS — Colors & Type
"Cuidado que reflete na piscina"
Brand system by Fenice Lab · 2026
-------------------------------------------------------------
A identidade da Quality nasce da água tratada: um índigo
marinho profundo (a água limpa em repouso) iluminado por um
ciano cristalino (o brilho/reflexo na superfície), sobre um
gradiente fresco que vai do verde-menta ao azul-céu.
"Profundidade que reflete leveza."
-------------------------------------------------------------
PALETA DECIFRADA pixel a pixel da logo oficial
(assets/logo/logo-quality.png, 500x500). Não há cor chutada.
-------------------------------------------------------------
FONTS: Google Fonts gratuitas (padrão Fenice). Carregar uma
vez em qualquer documento:
============================================================= */
:root {
/* ---- PRIMARY ----------------------------------------------- */
--marinho: #2B388F; /* Índigo Marinho — água profunda, símbolo, base da marca */
--azul-quality: #42559D; /* Azul Quality — assinatura do logotipo "Quality" */
--branco: #FFFFFF; /* Branco Puro — texto sobre escuro / superfícies */
/* ---- SECONDARY --------------------------------------------- */
--ciano: #3E9DD6; /* Ciano Piscina — brilho/reflexo, estrelas, ondas (voz) */
--ciano-dk: #2E7FB5; /* Ciano Profundo — hover, bordas ativas */
--marinho-md: #3A4AA8; /* Marinho Médio — camadas, cards sobre fundo escuro */
--marinho-dk: #202B6E; /* Marinho Noturno — fundo escuro, rodapés */
/* ---- SUPPORT / ÁGUA (gradiente de fundo da logo) ----------- */
--menta: #CAFCD9; /* Verde Menta — frescor, início do gradiente */
--aqua-pastel: #BAE8E5; /* Aqua Pastel — meio-tom água */
--ceu: #A0C8F7; /* Azul Céu — leveza, fim do gradiente */
--ceu-soft: #96BBFD; /* Azul Céu Suave — fundo claro alternativo */
--cinza-agua: #5B6B8C; /* Cinza Água — texto secundário sobre claro */
/* ---- GRADIENTES (assinatura da marca) ---------------------- */
--grad-agua: linear-gradient(135deg, var(--menta) 0%, var(--ceu-soft) 100%); /* fundo da logo */
--grad-marca: linear-gradient(135deg, var(--ciano) 0%, var(--marinho) 100%); /* CTA / destaque */
--grad-profundo: linear-gradient(180deg, var(--marinho) 0%, var(--marinho-dk) 100%);
/* ---- SEMANTIC TOKENS --------------------------------------- */
--bg: var(--branco);
--bg-alt: #F4F8FE; /* fundo claro suave (espuma) */
--surface: var(--branco);
--surface-2: var(--bg-alt);
--border: #DDE6F4;
--border-strong: var(--ciano);
--fg: var(--marinho); /* texto principal sobre claro */
--fg-1: #3A4566; /* corpo de texto */
--fg-2: var(--cinza-agua); /* legendas / mutado */
--fg-on-dark: var(--branco); /* texto sobre fundo marinho */
--accent: var(--ciano); /* ciano — a voz da marca */
--accent-deep: var(--marinho);
--link: var(--ciano-dk);
/* ---- TYPE FAMILIES ----------------------------------------- */
--font-display: 'Nunito', system-ui, sans-serif; /* logotipo / headlines (arredondada) */
--font-body: 'Montserrat', system-ui, sans-serif; /* UI + corpo + tagline */
/* ---- TYPE SCALE (digital, px) ------------------------------ */
--fs-hero: 80px; /* hero de campanha */
--fs-h1: 48px; /* títulos de página */
--fs-h2: 32px; /* subtítulos de seção */
--fs-h3: 22px; /* destaques menores */
--fs-body: 16px; /* texto corrido */
--fs-sm: 14px; /* secundário */
--fs-caption:12px; /* horários, endereço */
--lh-tight: 1.0;
--lh-snug: 1.18;
--lh-body: 1.7;
--tracking-display: 0.005em;
--tracking-label: 0.22em; /* tagline "CUIDADO QUE REFLETE NA PISCINA" */
/* ---- RADII (formas suaves, como água) ---------------------- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ---- SPACING (8pt base) ------------------------------------ */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* ---- ELEVATION (sombras azuladas, não cinzas) -------------- */
--shadow-sm: 0 1px 3px rgba(43,56,143,.12);
--shadow-md: 0 8px 24px rgba(43,56,143,.14);
--shadow-lg: 0 18px 50px rgba(43,56,143,.20);
--glow-ciano: 0 0 24px rgba(62,157,214,.45); /* reflexo na água */
}
/* =============================================================
ELEMENTOS SEMÂNTICOS
Use por elemento ou via classe utilitária (prefixo .q-).
============================================================= */
.q-hero, h1.q {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-hero);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
color: var(--accent-deep);
}
.q-h1, h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-h1);
line-height: var(--lh-snug);
color: var(--accent-deep);
}
.q-h2, h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h2);
line-height: var(--lh-snug);
color: var(--accent-deep);
}
.q-h3, h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h3);
color: var(--accent-deep);
}
.q-body, p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* Eyebrow / tagline em caixa alta com tracking largo — como no logotipo */
.q-label {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-caption);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent);
}
/* Botão primário com gradiente da marca */
.q-btn {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--branco);
background: var(--grad-marca);
border: none;
border-radius: var(--r-pill);
padding: var(--sp-3) var(--sp-6);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.q-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-ciano); }