/* Optimización de imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Estilos para imágenes con lazy loading */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: #f5f5f5;
}

.lazy-image.loaded {
    opacity: 1;
}

/* Optimización de videos */
video {
    max-width: 100%;
    height: auto;
}

/* Contenedor de video responsivo */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para el botón de reproducción */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

.play-button svg {
    width: 24px;
    height: 24px;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .play-button svg {
        width: 20px;
        height: 20px;
    }
}

/* Mejora de rendimiento para animaciones */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimización de fuentes */
@font-face {
    font-family: 'Outfit';
    src: url('https://fonts.gstatic.com/s/outfit/v11/QGYvz8VWDoOv2pGeJQO1k1M7.woff2') format('woff2');
    font-display: swap; /* Muestra texto con fuente del sistema mientras carga */
    font-weight: 300 700;
    font-style: normal;
}

/* Eliminación de efectos de rendimiento para elementos con scroll */
.portfolio-row {
    will-change: auto;
    backface-visibility: visible;
    transform: none !important;
}

/* Prevenir cambios de diseño (layout shifts) */
img, video {
    aspect-ratio: auto 16/9; /* Ajusta según la relación de aspecto de tus imágenes */
}