/* ============================================================ AYSTEC SOLUTIONS — Sistema Tipográfico ============================================================ */ /* Google Fonts se carga desde el de main.php con preconnect para evitar RTT extra */ /* ---------------------------------------------------------- RESET Y BASE ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--bg-base, #F8FAFF); } /* ---------------------------------------------------------- HEADINGS — Display / Títulos ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--text-primary); } h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-weight: var(--font-extrabold); letter-spacing: var(--tracking-tight); line-height: 1.1; } h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--font-bold); line-height: 1.2; } h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: var(--font-bold); } h4 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); font-weight: var(--font-semibold); } h5 { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); font-weight: var(--font-semibold); } h6 { font-size: var(--text-lg); font-weight: var(--font-semibold); } /* ---------------------------------------------------------- CLASES UTILITARIAS DE TIPOGRAFÍA ---------------------------------------------------------- */ /* Tamaños de texto */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .text-5xl { font-size: var(--text-5xl); } .text-6xl { font-size: var(--text-6xl); } .text-7xl { font-size: var(--text-7xl); } /* Pesos */ .font-light { font-weight: var(--font-light); } .font-regular { font-weight: var(--font-regular); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .font-extrabold{ font-weight: var(--font-extrabold); } /* Familias */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } /* Colores de texto semánticos */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-inverse { color: var(--text-inverse); } .text-brand { color: var(--color-brand); } .text-accent { color: var(--color-accent-500); } /* Gradiente de texto — efecto premium */ .text-gradient { background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-brand { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-400) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Alineación */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Interlineado */ .leading-tight { line-height: var(--leading-tight); } .leading-snug { line-height: var(--leading-snug); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .leading-loose { line-height: var(--leading-loose); } /* Tracking / espaciado de letras */ .tracking-tight { letter-spacing: var(--tracking-tight); } .tracking-normal { letter-spacing: var(--tracking-normal); } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } /* ---------------------------------------------------------- PATRONES TIPOGRÁFICOS — Sección Hero / Landing ---------------------------------------------------------- */ /* Eyebrow — etiqueta de sección (ej: "Nuestros servicios") */ .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-500); } .eyebrow-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--border-radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary-600); } /* Display Hero — el H1 principal de la landing */ .display-hero { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: var(--font-extrabold); line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--text-inverse); } /* Subtítulo de sección */ .section-title { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--font-bold); line-height: 1.15; letter-spacing: var(--tracking-snug); } /* Lead / bajada */ .lead { font-size: clamp(var(--text-base), 2vw, var(--text-xl)); font-weight: var(--font-regular); line-height: var(--leading-relaxed); color: var(--text-secondary); } .lead-hero { font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl)); font-weight: var(--font-light); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.75); } /* Card label — título pequeño dentro de tarjeta */ .card-label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); } /* ---------------------------------------------------------- ELEMENTOS DE TEXTO BASE ---------------------------------------------------------- */ p { line-height: var(--leading-relaxed); color: var(--text-secondary); } p + p { margin-top: var(--space-4); } a { color: var(--color-brand); text-decoration: none; transition: var(--transition-colors); } a:hover { color: var(--color-brand-hover); } strong, b { font-weight: var(--font-semibold); color: var(--text-primary); } em, i { font-style: italic; } small { font-size: var(--text-sm); color: var(--text-muted); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-muted); color: var(--color-primary-700); padding: 0.1em 0.4em; border-radius: var(--border-radius-xs); } blockquote { border-left: 3px solid var(--color-brand); padding-left: var(--space-6); color: var(--text-secondary); font-size: var(--text-lg); font-style: italic; } ul, ol { padding-left: var(--space-6); line-height: var(--leading-relaxed); color: var(--text-secondary); } li + li { margin-top: var(--space-2); } /* ---------------------------------------------------------- RESPONSIVE TYPOGRAPHY — Ajustes por breakpoint ---------------------------------------------------------- */ @media (max-width: 768px) { html { font-size: 15px; } .display-hero { line-height: 1.1; } .lead-hero { font-size: var(--text-lg); } } @media (max-width: 480px) { html { font-size: 14px; } }