/* ============================================================================= Padel Group — Tipografía Base Jerarquía visual usando Rubik (headings) + Inter (body) ============================================================================= */ /* Importar desde Google Fonts — se pone en el del layout */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Rubik:wght@400;500;700;800&display=swap'); */ /* (Copiamos localmente en producción para máxima velocidad) */ /* ----------------------------------------------------------------------- Headings ----------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-on-high); } h1, .h1 { font-family: var(--font-heading); /* Rubik */ font-size: var(--text-3xl); font-weight: 700; /* Negrita */ font-style: italic; color: var(--color-gold); /* Dorado */ } h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; font-style: italic; color: var(--color-gold); /* Dorado */ } .section__title { font-style: italic; color: var(--color-gold); text-align: left; margin-bottom: 2rem; } .section__subtitle { color: inherit; opacity: 0.8; margin-top: -1.5rem; margin-bottom: 2.5rem; font-size: var(--text-base); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-md); } h6 { font-size: var(--text-base); } /* ----------------------------------------------------------------------- Body Text ----------------------------------------------------------------------- */ p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-on-med); max-width: 68ch; /* Evitar líneas demasiado largas */ } /* Párrafo sin constraintde ancho (para layouts específicos) */ p.full-width { max-width: none; } /* Lead: primer párrafo introductorio */ .lead { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--color-on-med); font-weight: var(--font-medium); } /* ----------------------------------------------------------------------- Links ----------------------------------------------------------------------- */ a { color: var(--color-primary); transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } /* ----------------------------------------------------------------------- Etiquetas / Eyebrow ----------------------------------------------------------------------- */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-primary); } /* ----------------------------------------------------------------------- Utilidades de texto ----------------------------------------------------------------------- */ .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: var(--color-primary); } .text-gold { color: var(--color-gold); } .text-muted { color: var(--color-on-low); } .text-inverted { color: var(--color-surface); } .font-bold { font-weight: var(--font-bold); } .font-black { font-weight: var(--font-black); } .font-heading { font-family: var(--font-heading); } /* ----------------------------------------------------------------------- Listas con estilo ----------------------------------------------------------------------- */ .list { list-style: none; padding: 0; } .list--disc li { padding-left: var(--space-4); position: relative; } .list--disc li::before { content: "•"; color: var(--color-primary); position: absolute; left: 0; font-weight: var(--font-bold); } /* ----------------------------------------------------------------------- GRADIENT TEXT ----------------------------------------------------------------------- */ .text-gradient { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-gold) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: list-item; display: inline-block; }