/* Las fuentes Inter y Oswald se cargan con en el de cada pagina */ :root { --gech-black: #0a0a0a; --gech-dark: #1a1a1a; --gech-gray-900: #212121; --gech-gray-800: #2d2d2d; --gech-gray-700: #3a3a3a; --gech-gray-600: #555555; --gech-gray-400: #9e9e9e; --gech-gray-200: #e0e0e0; --gech-gray-100: #f5f5f5; --gech-white: #ffffff; --gech-blue: #0077c8; --gech-blue-light: #3399db; --gech-blue-dark: #005a9c; --gech-orange: #ff6b00; --gech-orange-dark: #cc5500; --gech-yellow: #ffc107; --gech-success: #28a745; --gech-whatsapp: #25d366; --gech-danger: #dc3545; --font-heading: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition-fast: 200ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } html, body { overflow-x: hidden; width: 100%; max-width: 100%; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); background-color: var(--gech-white); color: var(--gech-gray-900); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; } .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background-color var(--transition-base), box-shadow var(--transition-base); } .navbar.scrolled { background-color: rgba(10, 10, 10, 0.97) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .nav-link { position: relative; transition: color var(--transition-fast); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--theme-primary, var(--gech-blue)); transition: width var(--transition-base); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .mobile-menu { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow) ease-in-out; } .mobile-menu.open { max-height: 600px; } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 10, 10, 0.92) 0%, rgba(0, 119, 200, 0.35) 50%, rgba(10, 10, 10, 0.88) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; } .hero-bg-placeholder { position: absolute; inset: 0; z-index: 0; } .section-dark { background-color: var(--gech-dark); color: var(--gech-white); } .section-gray { background-color: var(--gech-gray-100); } .section-accent { background: linear-gradient(135deg, var(--theme-dark, var(--gech-blue-dark)) 0%, var(--theme-primary, var(--gech-blue)) 100%); color: var(--gech-white); } .section-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .section-title-bar { display: inline-block; width: 60px; height: 4px; background-color: var(--theme-primary, var(--gech-blue)); margin-bottom: 1rem; } .section-title-bar--orange { background-color: var(--theme-dark, var(--gech-orange)); } .card { background-color: var(--gech-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } .card-dark { background-color: var(--gech-gray-800); color: var(--gech-white); } .card-dark:hover { box-shadow: 0 12px 24px rgba(0, 119, 200, 0.2); } .card-img-placeholder { width: 100%; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--gech-gray-600); text-transform: uppercase; letter-spacing: 0.05em; } /* Marcas: 2 columnas en movil, 3 en tablet, 6 en escritorio. Las filas incompletas quedan centradas. */ .brand-grid { --brand-cols: 2; --brand-gap: 0.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--brand-gap); max-width: 68rem; margin-inline: auto; } .brand-card { flex: 0 0 calc((100% - (var(--brand-cols) - 1) * var(--brand-gap)) / var(--brand-cols)); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background-color: var(--gech-white); border: 1px solid var(--gech-gray-200); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: transform var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-base); } .brand-card:hover { transform: translateY(-4px); border-color: var(--theme-primary, var(--gech-blue)); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } /* --logo-scale compensa logos con mucho margen transparente o muy alargados */ .brand-card img { width: auto; height: auto; max-width: calc(72% * var(--logo-scale, 1)); max-height: calc(52% * var(--logo-scale, 1)); object-fit: contain; } @media (min-width: 640px) { .brand-grid { --brand-cols: 3; --brand-gap: 1rem; } } @media (min-width: 1024px) { .brand-grid { --brand-cols: 6; --brand-gap: 1.25rem; } } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; background-color: var(--theme-primary, var(--gech-blue)); color: var(--gech-white); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-fast), transform var(--transition-fast); text-decoration: none; } .btn-primary:hover { background-color: var(--theme-dark, var(--gech-blue-dark)); transform: translateY(-2px); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; background-color: transparent; color: var(--gech-white); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; border: 2px solid var(--gech-white); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn-secondary:hover { background-color: var(--gech-white); color: var(--gech-dark); } .btn-orange { background-color: var(--theme-primary, var(--gech-orange)); } .btn-orange:hover { background-color: var(--theme-dark, var(--gech-orange-dark)); } .whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 60px; height: 60px; border-radius: 50%; background-color: var(--gech-whatsapp); color: var(--gech-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6); } .whatsapp-float svg { width: 32px; height: 32px; fill: currentColor; } .whatsapp-pulse { animation: whatsapp-pulse 2s infinite; } @keyframes whatsapp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .map-container { width: 100%; border-radius: var(--radius-md); overflow: hidden; border: 3px solid var(--gech-gray-200); background-color: #d1d5db; position: relative; } .map-container::before { content: ''; display: block; padding-top: 56.25%; } .map-container iframe, .map-container .map-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } .map-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; color: var(--gech-gray-600); font-size: 0.875rem; } .footer-dark { background-color: var(--gech-black); color: var(--gech-gray-400); } .footer-link { color: var(--gech-gray-400); transition: color var(--transition-fast); text-decoration: none; } .footer-link:hover { color: var(--gech-white); } .social-icon { width: 40px; height: 40px; border-radius: 50%; background-color: var(--gech-gray-800); display: flex; align-items: center; justify-content: center; color: var(--gech-gray-400); transition: background-color var(--transition-fast), color var(--transition-fast); text-decoration: none; } .social-icon:hover { background-color: var(--theme-primary, var(--gech-blue)); color: var(--gech-white); } .stat-number { font-family: var(--font-heading); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--theme-primary, var(--gech-blue)); } .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-in { opacity: 0; transition: opacity 0.8s ease-out; } .fade-in.visible { opacity: 1; } .taller-hero { background: linear-gradient(135deg, rgba(10, 10, 10, 0.94) 0%, rgba(255, 107, 0, 0.3) 50%, rgba(10, 10, 10, 0.9) 100%); } .service-step { position: relative; padding-left: 2rem; } .service-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--theme-primary, var(--gech-orange)), transparent); } .badge { display: inline-block; padding: 0.25rem 0.75rem; background-color: var(--theme-primary, var(--gech-blue)); color: var(--gech-white); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; } .badge--orange { background-color: var(--theme-dark, var(--gech-orange)); } @media (max-width: 768px) { .stat-number { font-size: 2.25rem; } .hero { min-height: 90vh; } } @media (max-width: 480px) { .whatsapp-float { width: 52px; height: 52px; bottom: 16px; right: 16px; } .whatsapp-float svg { width: 26px; height: 26px; } }