/* ============================================================ HUB DE EMPLEABILIDAD — UNIVERSIDAD WIENER styles.css — Fuente única de verdad de identidad visual Estructura: 1. Imports de fuentes 2. Tokens de diseño (:root) 3. Reset y base global 4. Tipografía base 5. Layout y contenedores 6. Componentes reutilizables - Botones - Cards - Badges y chips - Formularios / Inputs - Navegación / Header - Footer 7. Utilidades 8. Animaciones globales 9. Media queries base ============================================================ */ /* ============================================================ 1. IMPORTS DE FUENTES ============================================================ */ /* Inter — cuerpo de texto (Google Fonts, sin costo) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* DM Sans — fallback de Founders Grotesk (Google Fonts, sin costo) */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* NOTA SOBRE FOUNDERS GROTESK: Si cuentas con licencia de Adobe Fonts, reemplaza la declaración @font-face de abajo con el kit de Adobe Fonts de tu cuenta. Si no, DM Sans actúa como sustituto visual muy cercano. Para usar Adobe Fonts, agrega el de tu proyecto Adobe en el de cada HTML y cambia --font-display a: font-family: 'founders-grotesk', 'DM Sans', sans-serif; */ /* ============================================================ 2. TOKENS DE DISEÑO ============================================================ */ :root { /* -------------------------------------------------- COLORES PRIMARIOS -------------------------------------------------- */ --color-primary: #07c8cc; /* Turquesa principal — CTAs, links activos */ --color-primary-dark: #05a3a6; /* Turquesa oscuro — hover, pressed states */ --color-primary-darker: #037b7e; /* Turquesa muy oscuro — focus rings */ --color-primary-light: #e8fafb; /* Turquesa claro — fondos de cards activas */ --color-primary-subtle: #f0fdfd; /* Turquesa muy sutil — hover en superficies */ /* -------------------------------------------------- COLORES DE TEXTO -------------------------------------------------- */ --color-text-main: #1a1a2e; /* Texto principal — headlines, body */ --color-text-secondary: #4b5563; /* Texto secundario — descripciones */ --color-text-muted: #6b7280; /* Texto muted — metadatos, fechas */ --color-text-disabled: #9ca3af; /* Texto deshabilitado */ --color-text-inverse: #ffffff; /* Texto sobre fondos oscuros / primarios */ --color-text-accent: #07c8cc; /* Texto con color de marca */ /* -------------------------------------------------- COLORES DE FONDO -------------------------------------------------- */ --color-bg: #ffffff; /* Fondo principal de página */ --color-surface: #f5f5f7; /* Superficie — cards neutras, inputs */ --color-surface-hover: #ebebed; /* Superficie en hover */ --color-dark-bg: #0f1117; /* Fondo oscuro — hero, footer, secciones */ --color-dark-surface: #1a1b26; /* Superficie oscura — cards en dark section */ /* -------------------------------------------------- COLORES DE BORDE -------------------------------------------------- */ --color-border: #e5e7eb; /* Borde por defecto */ --color-border-strong: #d1d5db; /* Borde con más énfasis */ --color-border-primary: rgba(7, 200, 204, 0.25); /* Borde con tinte de marca */ /* -------------------------------------------------- COLORES SEMÁNTICOS -------------------------------------------------- */ --color-success: #10b981; --color-success-light: #ecfdf5; --color-warning: #f59e0b; --color-warning-light: #fffbeb; --color-error: #ef4444; --color-error-light: #fef2f2; --color-info: #3b82f6; --color-info-light: #eff6ff; /* -------------------------------------------------- TIPOGRAFÍA -------------------------------------------------- */ /* Jerarquía de uso: --font-display → H1, H2, H3, labels de navegación, CTAs --font-body → párrafos, descripciones, metadatos, UI pequeña */ --font-display: 'Founders Grotesk', 'DM Sans', 'Helvetica Neue', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Escala tipográfica */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Pesos tipográficos */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Interlineado */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --leading-loose: 1.8; /* Espaciado entre letras */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* -------------------------------------------------- ESPACIADO -------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------- BORDES Y RADIOS -------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-full: 9999px; /* -------------------------------------------------- SOMBRAS -------------------------------------------------- */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-card: 0 2px 16px rgba(7, 200, 204, 0.08); /* Sombra con tinte de marca */ --shadow-card-hover: 0 8px 32px rgba(7, 200, 204, 0.16); /* -------------------------------------------------- LAYOUT Y CONTENEDORES -------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 72px; /* -------------------------------------------------- TRANSICIONES Y ANIMACIONES -------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------- Z-INDEX -------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ 3. RESET Y BASE GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-relaxed); color: var(--color-text-main); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, iframe { display: block; max-width: 100%; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* Focus visible accesible — solo teclado */ :focus-visible { outline: 2.5px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* Selección de texto con color de marca */ ::selection { background-color: var(--color-primary-light); color: var(--color-primary-darker); } /* Scrollbar personalizado (Webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-surface); } ::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ============================================================ 4. TIPOGRAFÍA BASE ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-text-main); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } /* Label de sección — usado sobre títulos */ .label-section { display: inline-block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); } /* Texto de énfasis con color de marca */ .text-accent { color: var(--color-primary); } /* Lead — primer párrafo con más peso visual */ .text-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); font-weight: var(--font-normal); } /* ============================================================ 5. LAYOUT Y CONTENEDORES ============================================================ */ .container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 640px) { .container { padding-inline: var(--space-6); } } @media (min-width: 1024px) { .container { padding-inline: var(--space-8); } } @media (min-width: 1280px) { .container { padding-inline: var(--space-12); } } /* Sección estándar con padding vertical */ .section { padding-block: var(--space-16); } .section--lg { padding-block: var(--space-24); } .section--sm { padding-block: var(--space-10); } /* Encabezado de sección reutilizable */ .section-header { margin-bottom: var(--space-12); } .section-header--center { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-12); } .section-header p { margin-top: var(--space-3); font-size: var(--text-lg); } /* ============================================================ 6A. COMPONENTES — BOTONES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); border: 1.5px solid transparent; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none; } .btn:active { transform: scale(0.97); } /* Botón primario — relleno turquesa */ .btn-primary { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-text-inverse); box-shadow: 0 4px 20px rgba(7, 200, 204, 0.35); } /* Botón secundario — contorno turquesa */ .btn-secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background-color: var(--color-primary-light); color: var(--color-primary-dark); } /* Botón ghost — sin borde, sutil */ .btn-ghost { background-color: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn-ghost:hover { background-color: var(--color-surface); color: var(--color-text-main); } /* Variantes de tamaño */ .btn--sm { font-size: var(--text-xs); padding: 0.5rem 1rem; } .btn--lg { font-size: var(--text-base); padding: 1rem 2rem; } /* Botón de icono circular */ .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-base); } .btn-icon:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); } /* ============================================================ 6B. COMPONENTES — CARDS ============================================================ */ .card { background-color: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-primary); } .card__body { padding: var(--space-6); } .card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* Card con fondo de superficie */ .card--surface { background-color: var(--color-surface); border-color: transparent; } /* Card con acento de color de marca */ .card--accent { border-color: var(--color-border-primary); background: linear-gradient(135deg, var(--color-primary-subtle) 0%, var(--color-bg) 60%); } /* Card oscura — para secciones con fondo dark */ .card--dark { background-color: var(--color-dark-surface); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } .card--dark:hover { border-color: rgba(7, 200, 204, 0.3); } /* ============================================================ 6C. COMPONENTES — BADGES Y CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: 1; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); white-space: nowrap; letter-spacing: var(--tracking-wide); } /* Variantes de badge */ .badge--primary { background-color: var(--color-primary-light); color: var(--color-primary-dark); } .badge--surface { background-color: var(--color-surface); color: var(--color-text-muted); } .badge--success { background-color: var(--color-success-light); color: var(--color-success); } .badge--warning { background-color: var(--color-warning-light); color: var(--color-warning); } .badge--error { background-color: var(--color-error-light); color: var(--color-error); } /* Chip interactivo (para filtros) */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); padding: 0.45rem 1rem; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-base); user-select: none; } .chip:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); } .chip.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); } /* ============================================================ 6D. COMPONENTES — FORMULARIOS E INPUTS ============================================================ */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-main); letter-spacing: var(--tracking-wide); } .form-label--required::after { content: ' *'; color: var(--color-primary); } .form-input { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-main); background-color: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); appearance: none; outline: none; } .form-input::placeholder { color: var(--color-text-disabled); } .form-input:hover { border-color: var(--color-border-strong); } .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(7, 200, 204, 0.15); } .form-input:disabled { background-color: var(--color-surface); color: var(--color-text-disabled); cursor: not-allowed; } /* Estado de error */ .form-input--error { border-color: var(--color-error); } .form-input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .form-hint { font-size: var(--text-xs); color: var(--color-text-muted); } .form-error { font-size: var(--text-xs); color: var(--color-error); } /* ============================================================ 6E. COMPONENTES — HEADER / NAVEGACIÓN ============================================================ */ .header { position: sticky; top: 0; z-index: var(--z-sticky); width: 100%; height: var(--header-height); background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition-base); } .header.scrolled { box-shadow: var(--shadow-sm); } .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; } .header__logo img { height: 40px; width: auto; } .header__nav { display: none; align-items: center; gap: var(--space-1); } @media (min-width: 768px) { .header__nav { display: flex; } } .nav-link { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary); padding: 0.5rem 0.875rem; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); text-decoration: none; white-space: nowrap; } .nav-link:hover { color: var(--color-text-main); background-color: var(--color-surface); } .nav-link.active { color: var(--color-primary); background-color: var(--color-primary-light); } /* Menú hamburguesa — solo mobile */ .header__menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text-main); cursor: pointer; transition: all var(--transition-fast); } .header__menu-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } @media (min-width: 768px) { .header__menu-btn { display: none; } } /* Menú móvil desplegable */ .mobile-menu { position: fixed; top: var(--header-height); left: 0; right: 0; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-4); z-index: var(--z-dropdown); transform: translateY(-100%); opacity: 0; transition: transform var(--transition-base), opacity var(--transition-base); pointer-events: none; } .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } .mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-1); } .mobile-menu .nav-link { font-size: var(--text-base); padding: 0.75rem 1rem; } /* ============================================================ 6F. COMPONENTES — FOOTER ============================================================ */ .footer { background-color: var(--color-dark-bg); color: rgba(255, 255, 255, 0.6); padding-block: var(--space-16) var(--space-8); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); margin-bottom: var(--space-12); } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer__brand img { height: 36px; width: auto; margin-bottom: var(--space-4); /* Filtro para hacer el logo visible sobre fondo oscuro */ filter: brightness(0) invert(1); opacity: 0.9; } .footer__brand p { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.5); line-height: var(--leading-relaxed); } .footer__title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-semibold); color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-4); } .footer__links { display: flex; flex-direction: column; gap: var(--space-3); } .footer__link { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-primary); } .footer__bottom { padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; } @media (min-width: 640px) { .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer__copy { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.35); } /* ============================================================ 7. UTILIDADES ============================================================ */ /* Texto */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-primary); } .text-muted { color: var(--color-text-muted); } .text-inverse { color: var(--color-text-inverse); } /* Display */ .hidden { display: none !important; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .grid { display: grid; } /* Espaciado */ .mt-auto { margin-top: auto; } .mb-0 { margin-bottom: 0; } /* Aspect ratios */ .ratio-16-9 { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: var(--radius-lg); } .ratio-16-9 iframe, .ratio-16-9 video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: var(--radius-lg); } /* Truncar texto con ellipsis */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Visualmente oculto pero accesible para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Divisor */ .divider { height: 1px; background-color: var(--color-border); border: none; margin-block: var(--space-8); } /* ============================================================ 8. ANIMACIONES GLOBALES ============================================================ */ /* Fade in hacia arriba — entrada de elementos */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Fade in simple */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Pulso suave — para elementos de loading o énfasis */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Shimmer — skeleton loading */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Clases de animación de entrada */ .animate-fadeInUp { animation: fadeInUp 0.5s var(--transition-base) both; } .animate-fadeIn { animation: fadeIn 0.4s ease both; } /* Delays para stagger de elementos */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } /* Skeleton loader */ .skeleton { background: linear-gradient( 90deg, var(--color-surface) 25%, var(--color-surface-hover) 50%, var(--color-surface) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 9. MEDIA QUERIES BASE ============================================================ */ /* Breakpoints del sistema (Mobile First): - xs: < 480px → móviles pequeños - sm: ≥ 640px → móviles grandes / landscape - md: ≥ 768px → tablets - lg: ≥ 1024px → laptops / desktop pequeño - xl: ≥ 1280px → desktop - 2xl: ≥ 1536px → pantallas grandes */ /* Tipografía responsive — escala hacia arriba en desktop */ @media (min-width: 1024px) { h1 { font-size: var(--text-6xl); } h2 { font-size: var(--text-5xl); } h3 { font-size: var(--text-4xl); } } /* Helpers responsive para visibilidad */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } }