/* ============================================================ 4d3 — Base: tipografía, layout y efectos globales. Sin colores literales: todo sale de tokens.css. Requiere en el : IBM Plex Sans (300/400/600) + IBM Plex Mono (400/500) de Google Fonts. ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: 1.7; color: var(--gray-dark); background: var(--white); -webkit-font-smoothing: antialiased; } /* Overlay de scanlines retro-CRT sobre toda la página (sutilísimo) */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px ); } /* --- Titulares: IBM Plex Sans light (INVARIANTE 2) --- */ h1, h2 { font-weight: 300; line-height: 1.15; } h1 { font-size: var(--text-hero); } h2 { font-size: var(--text-title); margin-bottom: 2.5rem; } h3 { font-size: var(--text-subtitle); font-weight: 400; line-height: 1.3; } /* en titulares: salta a 600 + gradiente de triada animado */ h1 strong, h2 strong, .gradient-text { font-weight: 600; background: var(--triad-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradientShift 3s ease infinite; } h1 strong:hover, h2 strong:hover, .gradient-text:hover { animation-duration: 1s; } @keyframes gradientShift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } /* Tratamiento alternativo de : subrayado pastel */ .underline-accent { font-weight: 600; position: relative; z-index: 0; } .underline-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.1em; height: 0.35em; z-index: -1; background: var(--accent, var(--pastel-green)); opacity: 0.5; } /* --- Texto funcional: IBM Plex Mono MAYÚSCULAS (INVARIANTE 2) --- */ .mono-label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-mono); } /* Número de sección: «01 — Servicios» (INVARIANTE 3) */ .section-number { display: block; margin-bottom: 1.25rem; color: var(--gray-mid); } .tagline { color: var(--gray-mid); } /* --- Secciones y contenedores --- */ .section { position: relative; padding: 8rem 2rem; overflow: hidden; } @media (max-width: 768px) { .section { padding: 5rem 1.5rem; } } @media (max-width: 480px) { .section { padding: 3.5rem 1rem; } } .section--alt { background: var(--off-white); } .section--dark { background: var(--gray-dark); color: var(--white); } .section--dark h2, .section--dark h3 { color: var(--white); } /* Fondo fotográfico vía pseudo-elemento (INVARIANTE 8: nunca ). Definir en el elemento: style="--section-photo: url(...); --photo-opacity: 0.25" */ .section--photo::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--section-photo) center / cover no-repeat; opacity: var(--photo-opacity, 0.18); pointer-events: none; } .section--photo > * { position: relative; z-index: 1; } .container { margin: 0 auto; max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } /* --- Grids: auto-fit, sin columnas por breakpoint --- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2rem; } /* --- Reveals (IntersectionObserver añade .visible) --- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--reveal), transform var(--reveal); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Cascada entre hermanos: stagger de 0.1s */ .stagger > :nth-child(1) { transition-delay: calc(var(--stagger) * 0); } .stagger > :nth-child(2) { transition-delay: calc(var(--stagger) * 1); } .stagger > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); } .stagger > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); } .stagger > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); } .stagger > :nth-child(6) { transition-delay: calc(var(--stagger) * 5); } .stagger > :nth-child(7) { transition-delay: calc(var(--stagger) * 6); } .stagger > :nth-child(8) { transition-delay: calc(var(--stagger) * 7); } /* --- Geometría flotante decorativa (opacidad 0.15) --- Se usan las propiedades individuales translate/rotate para poder animar el flotado sin pisar la rotación. */ .geo { position: absolute; opacity: 0.15; pointer-events: none; z-index: 0; } .geo--rhombus { width: 90px; height: 90px; border: 2px solid var(--accent, var(--pastel-green)); rotate: 45deg; animation: geoFloat 6s ease-in-out infinite; } .geo--raster { width: 140px; height: 60px; background: repeating-linear-gradient(0deg, var(--pastel-blue) 0px, var(--pastel-blue) 2px, transparent 2px, transparent 8px); rotate: -6deg; animation: geoFloat 8s ease-in-out infinite; } @keyframes geoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } } /* --- Loader inicial: barra tricolor + rombo giratorio --- */ .loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--white); transition: opacity 0.5s ease; } .loader::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--triad-gradient); } .loader-rhombus { width: 40px; height: 40px; border: 3px solid var(--pastel-green); border-right-color: var(--pastel-blue); border-bottom-color: var(--pastel-coral); rotate: 45deg; animation: spin 1.2s linear infinite; } @keyframes spin { from { rotate: 45deg; } to { rotate: 405deg; } } .loader.done { opacity: 0; pointer-events: none; } /* --- Barra tricolor de cierre de página --- */ .color-bar { height: 4px; background: var(--triad-gradient); } /* --- Accesibilidad de movimiento (INVARIANTE 6) --- */ @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; } }