/* ======================================== SISTEMA TIPOGRÁFICO GLOBAL COGNILAB 2025 ALINEACIÓN INTELIGENTE Y ADAPTATIVA ======================================== */ /* Fuentes cargadas desde el con preconnect (sin @import para reducir bloqueo) */ /* Variables globales de tipografía y alineación */ :root { --font-heading: 'Inter Tight', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --color-text-primary: #FFFFFF; --color-text-secondary: #FFFFFF; --color-text-muted: #FFFFFF; /* Tamaño unificado para subtítulos en todo el sitio */ --font-size-subtitle: var(--font-size-lg); /* Anchos máximos optimizados para diferentes contextos */ --max-text-width: 950px; --max-column-width: 700px; --max-text-width-wide: 1000px; --max-text-width-narrow: 800px; /* Escalas tipográficas responsivas */ --font-size-xs: clamp(0.75rem, 1vw, 0.875rem); --font-size-sm: clamp(0.875rem, 1.2vw, 1rem); --font-size-base: clamp(1rem, 1.5vw, 1.25rem); --font-size-lg: clamp(1.125rem, 1.8vw, 1.5rem); --font-size-xl: clamp(1.25rem, 2vw, 1.75rem); --font-size-2xl: clamp(1.5rem, 2.5vw, 2rem); --font-size-3xl: clamp(2rem, 3vw, 2.5rem); --font-size-4xl: clamp(2.5rem, 4vw, 3rem); --font-size-5xl: clamp(3rem, 5vw, 3.5rem); } /* Reset tipográfico global */ body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.65; color: var(--color-text-primary); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; padding: 0; background-color: transparent; } /* ======================================== JERARQUÍA DE TÍTULOS - ALINEACIÓN CONTEXTUAL ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-text-primary); margin: 0 auto 1.5rem auto; max-width: var(--max-text-width); padding: 0 1rem; } /* Títulos principales siempre centrados */ h1, h2 { text-align: center; } /* Títulos de sección pueden variar según contexto */ h3, h4, h5, h6 { text-align: center; } h1 { font-size: var(--font-size-5xl); line-height: 1.1; margin-bottom: 2rem; letter-spacing: -0.02em; } h2 { font-size: var(--font-size-4xl); line-height: 1.3; margin-bottom: 1.5rem; letter-spacing: -0.01em; } h3 { font-size: var(--font-size-3xl); line-height: 1.3; margin-bottom: 1.25rem; } h4 { font-size: var(--font-size-2xl); line-height: 1.3; margin-bottom: 1rem; } h5 { font-size: var(--font-size-xl); line-height: 1.4; margin-bottom: 0.75rem; } h6 { font-size: var(--font-size-lg); line-height: 1.4; margin-bottom: 0.75rem; } /* ======================================== PÁRRAFOS Y TEXTO - ALINEACIÓN INTELIGENTE ======================================== */ /* Párrafos base - centrados por defecto */ p { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; line-height: 1.65; color: var(--color-text-secondary); max-width: var(--max-text-width); margin: 1.5rem auto; text-align: center; padding: 0 1rem; } p:last-child { margin-bottom: 0; } /* ======================================== CLASES DE ALINEACIÓN CONTEXTUAL ======================================== */ /* Centrados para secciones introductorias y hero */ .section-intro-text, .intro-text, .section-intro, .hero-description, .subtitle { font-size: var(--font-size-lg); line-height: 1.7; color: var(--color-text-muted); max-width: var(--max-text-width); margin: 1.5rem auto 2rem auto; text-align: center; padding: 0 1.5rem; } /* Izquierda para textos en columnas y tarjetas */ .column-text, .card-text, .plan-text { max-width: var(--max-column-width); text-align: left; margin: 1.5rem auto; padding: 0 1rem; } /* Textos de tarjetas específicos */ .card-title { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 600; color: var(--color-text-primary); margin-bottom: 0.75rem; text-align: left; max-width: var(--max-column-width); } .card-subtitle { font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-secondary); margin-bottom: 1rem; text-align: left; max-width: var(--max-column-width); } .card-desc { font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-muted); margin-bottom: 1.5rem; text-align: left; max-width: var(--max-column-width); } /* ======================================== CLASES TIPOGRÁFICAS REUTILIZABLES ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } /* Tamaños de texto */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } .text-5xl { font-size: var(--font-size-5xl); } /* Clase small para textos pequeños */ .small { font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-secondary); } /* Pesos de fuente */ .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* Fuente alternativa: usa la tipografía de titulares para textos breves */ .fuente-titular { font-family: var(--font-heading); } /* ======================================== COMPONENTES ESPECÍFICOS - ALINEACIÓN UNIFICADA ======================================== */ /* Títulos de sección */ .title-section { font-size: var(--font-size-4xl); font-weight: 700; text-align: center; margin: 0 auto 1.5rem auto; color: var(--color-text-primary); max-width: var(--max-text-width); padding: 0 1rem; } /* Subtítulos */ .subtitle { font-size: var(--font-size-subtitle); font-weight: 400; color: var(--color-text-secondary); text-align: center; margin: 0 auto 2rem auto; max-width: var(--max-text-width); padding: 0 1rem; } /* Unificación global de subtítulos en todas las variantes */ .subtitle, .lead, .lead-sintetica, .hero-subtitle, .servicios-premium-subtitle, .plan-subtitle { font-size: var(--font-size-subtitle) !important; line-height: 1.7 !important; } /* ======================================== SECCIÓN: CÓMO FUNCIONA - LEGIBILIDAD ======================================== */ .seccion-como-funciona .descripcion-como-funciona { max-width: var(--max-text-width); margin: 0 auto; padding: 0 var(--content-margin); } .seccion-como-funciona .section-intro-text { text-align: left; max-width: var(--max-text-width-narrow); } .seccion-como-funciona .lista-como-funciona { max-width: var(--max-text-width-narrow); margin: 0.5rem auto 2rem auto; padding-left: 1.25rem; list-style: disc; } .seccion-como-funciona .lista-como-funciona li { margin: 0.25rem 0; line-height: 1.7; } .resumen-esferas { max-width: var(--max-text-width-narrow); margin: 1.5rem auto 0; padding: 0 var(--content-margin); } .resumen-esferas .subtitle { margin-bottom: 0.35rem; } .resumen-esferas .section-intro-text { text-align: left; padding: 0; max-width: none; } .lista-esferas { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0 0; display: grid; gap: 0.35rem; color: var(--color-text-secondary); } .lista-esferas li strong { color: var(--color-text-primary); } /* Texto de navegación */ .nav-links a, .mobile-links a { font-size: var(--font-size-base); font-weight: 500; color: var(--color-text-primary); } /* Botones */ .btn { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 500; line-height: 1.4; } .btn-sm { font-size: var(--font-size-sm); } .btn-lg { font-size: var(--font-size-lg); } /* Formularios */ input, textarea, select { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; } label { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 500; color: var(--color-text-primary); } /* Footer */ .footer-section h4 { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-primary); text-align: left; margin-bottom: 1rem; } .footer-links a { font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-secondary); } /* ======================================== RESPONSIVIDAD - ALINEACIÓN ADAPTATIVA ======================================== */ @media (max-width: 768px) { :root { --max-text-width: 90vw; --max-column-width: 85vw; --max-text-width-wide: 95vw; --max-text-width-narrow: 85vw; } /* En móviles, todo vuelve a centrado para mejor legibilidad */ .column-text, .card-text, .plan-text, .card-title, .card-subtitle, .card-desc { text-align: center; max-width: var(--max-text-width); } h1, h2, h3, h4, h5, h6 { padding: 0 0.5rem; } p, .intro-text, .section-intro, .hero-description, .subtitle { padding: 0 0.5rem; } h1 { font-size: clamp(2rem, 6vw, 2.5rem); } h2 { font-size: clamp(1.75rem, 5vw, 2rem); } h3 { font-size: clamp(1.5rem, 4vw, 1.75rem); } .intro-text, .section-intro, .hero-description { font-size: var(--font-size-base); text-align: center; } } @media (max-width: 480px) { h1 { font-size: clamp(1.75rem, 7vw, 2rem); } h2 { font-size: clamp(1.5rem, 6vw, 1.75rem); } h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); } h1, h2, h3, h4, h5, h6 { padding: 0 0.25rem; } p, .intro-text, .section-intro, .hero-description, .subtitle { padding: 0 0.25rem; } }