/* ============================================================ performance.css — CC&A StratEx · Etapa 5: Performance Avanzada Subir a: public_html/performance.css Agregar en el de TODAS las páginas DESPUÉS de ux.css: (descargas/index.html usa: ../performance.css) ============================================================ */ /* ── 1. FUENTES: FONT-DISPLAY SWAP ───────────────────────────── Evita el FOIT (flash of invisible text) mientras carga Inter. El texto se muestra con fuente fallback hasta que Inter esté disponible, mejorando LCP y la percepción de velocidad. */ @font-face { font-family: 'Inter'; font-display: swap; } /* ── 2. FUENTE FALLBACK MÉTRICA-AJUSTADA ─────────────────────── Reduce el CLS (Cumulative Layout Shift) al hacer que la fuente de sistema tenga métricas similares a Inter durante la carga. */ @font-face { font-family: 'Inter-fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } body { font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif; } /* ── 3. CONTENT-VISIBILITY ───────────────────────────────────── Omite el rendering de secciones fuera del viewport hasta que el usuario se acerca a ellas. Mejora el INP y FCP. Solo en secciones de contenido largo, nunca en hero o nav. */ .section, .site-footer { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* Excluir secciones críticas del content-visibility */ .hero, .page-hero, .site-header { content-visibility: visible; } /* ── 4. WILL-CHANGE ──────────────────────────────────────────── Hints al navegador para pre-asignar capas GPU a elementos que se animan con frecuencia. Mejora jank en scroll y hover. */ .site-header { will-change: transform, background-color; } .back-to-top, .whatsapp-float { will-change: transform, opacity; } .reveal-up { will-change: transform, opacity; } /* Remover will-change después de la animación */ .reveal-up.on { will-change: auto; } /* ── 5. IMÁGENES Y VIDEOS ────────────────────────────────────── Previene CLS (Cumulative Layout Shift) forzando proporciones antes de que los assets carguen. */ img { max-width: 100%; height: auto; display: block; } /* Placeholder mientras carga la imagen (evita layout shift) */ img:not([src]), img[src=""] { visibility: hidden; } /* Aspect ratio para imágenes de contenido conocido */ .hero-video, .map-frame iframe { aspect-ratio: 16 / 9; width: 100%; } .experience-hero-visual img { aspect-ratio: 4 / 3; } /* ── 6. LAZY LOADING NATIVO MEJORADO ─────────────────────────── Estilo de transición para imágenes lazy: aparecen suavemente */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].loaded, img[loading="lazy"][data-loaded] { opacity: 1; } /* Fallback para navegadores sin soporte */ img[loading="lazy"]:not([data-lazy-pending]) { opacity: 1; } /* ── 7. SKELETON LOADING ──────────────────────────────────────── Placeholder animado para elementos que cargan con JS. */ .skeleton { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.06) 75% ); background-size: 400% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 6px; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── 8. SCROLL SUAVE NATIVO ──────────────────────────────────── Solo activa scroll suave si el usuario no prefiere movimiento reducido (ya manejado en accessibility.css, aquí es backup). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ── 9. OPTIMIZACIÓN DE TRANSICIONES ─────────────────────────── Usar transform y opacity en lugar de top/left/width/height para evitar reflows y mejorar FPS en animaciones. */ .service-card, .fast-service-card, .experience-card, .experience-download-card, .instrument-card, .integrity-principle-card, .legacy-card, .intro-metric-card, .commitment-card, .metric-card-primary { transform: translateZ(0); /* Fuerza compositing layer */ backface-visibility: hidden; } /* ── 10. PRINT STYLESHEET ────────────────────────────────────── Optimiza la impresión: oculta elementos decorativos y asegura texto legible en blanco y negro. */ @media print { .site-header, .mobile-nav, .whatsapp-float, .back-to-top, .scroll-progress, .hero-video, .hero-overlay, .hero-glow, .map-frame, .fast-actions, footer nav, .breadcrumb-nav { display: none !important; } body { font-size: 12pt; color: #000 !important; background: #fff !important; } .hero-copy h1, .ttl, h1, h2, h3 { color: #000 !important; page-break-after: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after { content: none; } .section, .page-hero, article { page-break-inside: avoid; } img { max-width: 100% !important; page-break-inside: avoid; } .brand img { filter: invert(0) !important; } } /* ── 11. CONTAIN PARA COMPONENTES AISLADOS ───────────────────── Limita el alcance del layout recalc a componentes individuales, mejorando el rendimiento del browser en páginas largas. */ .experience-cards-grid .experience-card, .services-grid .service-card, .fast-services-grid .fast-service-card { contain: layout style; } /* ── 12. OPTIMIZACIÓN DE FORMULARIOS ─────────────────────────── Evita repaints innecesarios en campos de formulario activos. */ input, textarea, select { will-change: border-color, box-shadow; } input:not(:focus), textarea:not(:focus), select:not(:focus) { will-change: auto; }