/* ================================================================ SUPPRESS — Main Stylesheet Global variables, reset, base typography, layout utilities ================================================================ */ /* Fontes carregadas via no de cada página — não usar @import aqui */ /* ================================================================ CSS CUSTOM PROPERTIES ================================================================ */ :root { /* Brand Colors */ --color-primary: #FF6600; --color-primary-dark: #CC5200; --color-primary-light: #FF8533; /* Neutrals */ --color-dark: #1A1A1A; --color-dark-mid: #2C2C2C; --color-gray: #6B6B6B; --color-gray-light: #ABABAB; --color-bg: #F5F5F5; --color-white: #FFFFFF; --color-border: #E0E0E0; /* Feedback */ --color-success: #2ECC71; --color-error: #E74C3C; --color-warning: #F39C12; /* Typography */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Montserrat', system-ui, sans-serif; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.5rem; --text-6xl: 5rem; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Layout */ --container-max: 1200px; --gutter: clamp(16px, 4vw, 32px); /* Radii */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow: 0 4px 20px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --shadow-xl: 0 20px 60px rgba(0,0,0,0.18); /* Transitions */ --t-fast: 150ms ease; --t: 200ms ease; --t-slow: 350ms ease; /* Z-indexes */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ================================================================ CSS RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-dark-mid); background: var(--color-white); overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } table { border-collapse: collapse; width: 100%; } /* ================================================================ ACCESSIBILITY ================================================================ */ .skip-link { position: absolute; top: -120px; left: var(--sp-4); background: var(--color-primary); color: var(--color-white); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius); font-weight: 500; font-size: var(--text-sm); z-index: var(--z-toast); transition: top var(--t); } .skip-link:focus { top: var(--sp-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ================================================================ TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.1; font-weight: 600; color: var(--color-dark); letter-spacing: -0.01em; } h1 { font-size: clamp(1.8rem, 3vw, 2.85rem); } h2 { font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height:1.14; } h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; } p { line-height: 1.7; color: var(--color-gray); } strong { font-weight: 500; } /* ================================================================ LAYOUT — CONTAINER & GRID ================================================================ */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--sp-20) 0; } @media (min-width: 768px) { .section { padding: var(--sp-24) 0; } } /* Section themes */ .section--white { background: var(--color-white); } .section--bg { background: var(--color-bg); } .section--dark { background: var(--color-dark); } .section--dark-mid { background: var(--color-dark-mid); } .section--primary { background: var(--color-primary); } /* Grid helpers */ .grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: var(--sp-6); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } } /* ================================================================ SECTION HEADERS ================================================================ */ .section-header { margin-bottom: var(--sp-12); } .section-header--center { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: var(--sp-12); } .section-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--sp-3); } .section-label::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--color-primary); flex-shrink: 0; } .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-weight: 600; color: var(--color-dark); line-height: 1.14; margin-bottom: var(--sp-4); } .section-title--white { color: var(--color-white); } .section-title--primary { color: var(--color-primary); } .section-subtitle { font-size: var(--text-lg); color: var(--color-gray); line-height: 1.6; max-width: 600px; } .section-subtitle--white { color: rgba(255,255,255,0.78); } .section-subtitle--center { margin: 0 auto; } /* ================================================================ BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--text-sm); color: rgba(255,255,255,0.65); margin-bottom: var(--sp-5); } .breadcrumb a { color: rgba(255,255,255,0.65); transition: color var(--t); } .breadcrumb a:hover { color: var(--color-white); } .breadcrumb-sep { color: rgba(255,255,255,0.35); font-size: 10px; } /* ================================================================ PAGE HERO (inner pages) ================================================================ */ .page-hero { position: relative; padding: 140px 0 100px; background: linear-gradient(135deg, var(--color-dark) 0%, #141414 100%); overflow: hidden; } .page-hero__bg-accent { position: absolute; top: 0; right: -100px; width: 60%; height: 100%; background: linear-gradient(135deg, transparent, rgba(255,102,0,0.12)); pointer-events: none; } /* On a narrow screen the same 60%-wide box compresses the transparent→ orange transition into much less horizontal space, so the diagonal reads as a hard seam instead of a wash. Swap it for a soft radial glow anchored at the top-right corner instead — it fades to fully transparent well inside its own box, so there's no edge left to see (same technique already used for .markets-section's glow). */ @media (max-width: 768px) { .page-hero__bg-accent { top: -10%; right: -25%; left: -25%; width: auto; height: 65%; background: radial-gradient(60% 75% at 82% 0%, rgba(255,102,0,.24) 0%, rgba(255,102,0,0) 72%); } } .page-hero__diagonal { position: absolute; bottom: -1px; left: 0; right: 0; height: 70px; background: var(--color-white); clip-path: polygon(0 100%, 100% 25%, 100% 100%); } .page-hero .section-label { color: var(--color-primary); } .page-hero h1 { color: var(--color-white); margin-bottom: var(--sp-4); } /* ================================================================ ANIMATION UTILITIES ================================================================ */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.65s ease, transform 0.65s ease; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.65s ease, transform 0.65s ease; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } /* Efeitos adicionais de scroll */ .fade-in-scale { opacity: 0; transform: scale(.92); transition: opacity .7s ease, transform .7s ease; } .fade-in-scale.visible { opacity: 1; transform: scale(1); } .fade-in-blur { opacity: 0; filter: blur(8px); transform: translateY(20px); transition: opacity .7s ease, filter .7s ease, transform .7s ease; } .fade-in-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); } /* Parallax suave via JS */ [data-scroll-speed] { will-change: transform; } /* Contador animado */ .stat-number { transition: color .3s; } @media (prefers-reduced-motion: reduce) { .fade-in, .fade-in-left, .fade-in-right, .fade-in-scale, .fade-in-blur { opacity: 1; transform: none; filter: none; transition: none; } } /* ================================================================ UTILITY CLASSES ================================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-primary) !important; } .text-white { color: var(--color-white) !important; } .text-dark { color: var(--color-dark) !important; } .text-gray { color: var(--color-gray) !important; } .mt-auto { margin-top: auto; } .mb-0 { margin-bottom: 0 !important; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Orange accent bar (decorative) */ .accent-bar { display: block; width: 48px; height: 4px; background: var(--color-primary); margin-bottom: var(--sp-5); } .accent-bar--center { margin-left: auto; margin-right: auto; } /* ================================================================ RESPONSIVE MEDIA QUERIES — base only (component-level in components.css) ================================================================ */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } }