/* ============================================================= SUPREME LOAN PROCESSING — main.css Fuente única de verdad: variables, reset, tipografía base ============================================================= */ /* ── Google Fonts se importan en el del HTML ── */ /* ── 1. VARIABLES GLOBALES (tokens de diseño) ──────────────── */ :root { /* Colores de fondo */ --bg: #FFFFFF; /* fondo principal blanco */ --bg-alt: #F9F8F6; /* fondo alterno crema cálido */ --surface: #F0EDEA; /* cards, pill del navbar */ --border: #E2DDD8; /* bordes sutiles */ /* Textos */ --text-primary: #1A1A1A; /* cuerpo y títulos */ --text-muted: #6B6560; /* texto secundario */ /* Acentos de marca */ --accent-gold: #B8922A; /* dorado — CTAs, active dot */ --accent-navy: #1A3A5C; /* azul marino — links, hovers */ /* Tipografía */ --font-display: 'Bebas Neue', sans-serif; --font-body: 'Inter', sans-serif; /* Espaciado base */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* Radios */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 100px; /* Sombras */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 8px 30px rgba(0,0,0,0.08); --shadow-lg: 0 24px 60px rgba(0,0,0,0.10); /* Transiciones */ --transition: 0.25s ease; } /* ── 2. RESET UNIVERSAL ─────────────────────────────────────── */ /* Elimina márgenes/paddings de fábrica para consistencia entre navegadores */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* scroll suave nativo */ font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text-primary); background: var(--bg); overflow-x: hidden; /* previene scroll horizontal accidental */ } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; } /* ── 3. CONTENEDOR BASE ─────────────────────────────────────── */ /* Limita el ancho del contenido y centra horizontalmente */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; } /* ── 4. TIPOGRAFÍA BASE ─────────────────────────────────────── */ h1, h2, h3, h4 { line-height: 1.1; color: var(--text-primary); } /* Clase reutilizable para títulos de sección */ .section-heading { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--text-primary); margin-bottom: var(--space-md); } /* Label pequeño encima del título — "Our Story", "What We Do" */ .section-label { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: var(--space-sm); } /* Línea dorada a la izquierda del label */ .section-label::before { content: ''; display: inline-block; width: 2rem; height: 2px; background: var(--accent-gold); flex-shrink: 0; } /* Header de sección: label + heading centrados */ .section-header { text-align: center; margin-bottom: 3.5rem; } /* ── 5. ANIMACIONES KEYFRAMES ───────────────────────────────── */ /* Rebote de la flecha de scroll */ @keyframes bounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ── 6. CLASES DE SCROLL REVEAL ─────────────────────────────── */ /* Estado inicial: invisible y desplazado */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } /* Variante: desliza desde la derecha */ .reveal.reveal-right { transform: translateX(40px); } /* Estado final: visible — aplicado por reveal.js via IntersectionObserver */ .reveal.visible { opacity: 1; transform: none; } /* Delays escalonados para grids de cards */ .reveal:nth-child(2) { transition-delay: 0.10s; } .reveal:nth-child(3) { transition-delay: 0.20s; } .reveal:nth-child(4) { transition-delay: 0.30s; } .reveal:nth-child(5) { transition-delay: 0.40s; } .reveal:nth-child(6) { transition-delay: 0.50s; }