/* ========================================================================== style.css — UNA sola hoja de estilos para las 5 páginas -------------------------------------------------------------------------- Todas las páginas la cargan con: Está organizada en capas, de lo más general a lo más concreto: 1. VARIABLES → colores, espacios y tamaños reutilizables (el "tema") 2. BASE → estilos para etiquetas HTML sueltas (body, h1, p, a…) 3. LAYOUT → la estructura de la página (contenedor, rejillas) 4. COMPONENTES → piezas reutilizables (.btn, .card, .alert…) 5. UTILIDADES → pequeñas clases de ayuda (.text-center, .mt-2…) 6. DOCUMENTACIÓN → estilos propios de este tutorial (código, demos) Regla de oro: cuanto más abajo, más específico. Si dos reglas chocan con la misma especificidad, gana la que aparece DESPUÉS (la cascada). ========================================================================== */ /* ========================================================================== 1. VARIABLES (Custom Properties) Se declaran en :root (el elemento ) y se usan con var(--nombre). Cambiar un valor aquí cambia TODA la web. Pruébalo con --color-primary. ========================================================================== */ :root { /* Colores */ --color-primary: #4f46e5; /* índigo: botones, enlaces, acentos */ --color-primary-dark: #3730a3; --color-secondary: #0ea5e9; --color-text: #1f2937; --color-muted: #6b7280; --color-bg: #f8fafc; --color-surface: #ffffff; /* fondo de tarjetas */ --color-border: #e5e7eb; --color-info: #0ea5e9; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; /* Espaciado: una escala fija evita "números mágicos" */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2.5rem; /* 40px */ /* Tipografía */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Otros */ --radius: 10px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); --max-width: 1000px; } /* ========================================================================== 2. BASE — selectores de ETIQUETA Afectan a todas las etiquetas de ese tipo en cualquier página. ========================================================================== */ /* box-sizing: border-box hace que width incluya padding y borde. Es casi universal en proyectos modernos. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); } h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; margin-top: var(--space-5); } h3 { font-size: 1.15rem; } p { margin: 0 0 var(--space-3); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dark); } /* :hover = pseudo-clase */ code { font-family: var(--font-mono); font-size: 0.9em; background: #eef2ff; color: var(--color-primary-dark); padding: 0.1em 0.35em; border-radius: 4px; } img { max-width: 100%; display: block; } /* ========================================================================== 3. LAYOUT — la "estructura" de la página ========================================================================== */ /* .container centra el contenido y limita su ancho */ .container { max-width: var(--max-width); margin: 0 auto; /* auto a izquierda y derecha = centrado */ padding: 0 var(--space-3); } main.container { padding-top: var(--space-5); padding-bottom: var(--space-5); } /* .grid: rejilla que se adapta sola al ancho disponible. repeat(auto-fit, minmax(240px, 1fr)) = "mete tantas columnas de al menos 240px como quepan, y reparte el sobrante". Sin media queries. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } /* .stack: apila hijos en vertical con separación uniforme */ .stack { display: flex; flex-direction: column; gap: var(--space-3); } /* .cluster: fila de elementos que salta de línea si no caben */ .cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } /* ========================================================================== 4. COMPONENTES Cada componente es un bloque con nombre propio. Usamos la convención BEM: .bloque → el componente (.card) .bloque__elemento → una parte interna (.card__title) .bloque--modificador → una variante (.card--featured) Así, leyendo solo la clase, sabes a qué componente pertenece. ========================================================================== */ /* ---------- 4.1 Cabecera del sitio (.site-header) ---------- */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; /* se queda pegada arriba al hacer scroll */ top: 0; z-index: 10; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); padding-bottom: var(--space-2); } .site-header__logo { font-weight: 700; font-size: 1.1rem; color: var(--color-text); text-decoration: none; } .site-header__logo span { color: var(--color-primary); } /* ---------- 4.2 Navegación (.nav) ---------- */ .nav { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; /* quita los puntos de la lista