/*!
 * ARRAYANMED PERFORMANCE STYLES
 * Critical CSS + Lazy Loading + Web Vitals Optimization
 */

/* =============================================================================
   LAZY LOADING STYLES
   ============================================================================= */

/* Placeholder para imágenes lazy */
.lazy-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    transition: opacity 0.3s ease;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade in effect para lazy loaded images */
.lazy-loaded {
    animation: fadeInLazy 0.3s ease-in;
}

@keyframes fadeInLazy {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Prevent layout shift - reservar espacio para imágenes */
.specialist-photo img {
    aspect-ratio: 1 / 1; /* Mantener proporción cuadrada */
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Optimización para CLS - dimensiones fijas para elementos críticos */
.header-content {
    min-height: 60px; /* Prevenir layout shift del header */
}

.specialist-card {
    min-height: 400px; /* Altura mínima para prevenir CLS */
}

/* =============================================================================
   CRITICAL CSS INLINED - Above the fold content
   ============================================================================= */

/* Hero section - Critical */
.hero-section {
    background: linear-gradient(135deg, var(--primary-green) 0%, #2d5a4a 100%);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
}

/* Header - Critical */
.header {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    min-height: 60px;
}

/* =============================================================================
   PERFORMANCE UTILITIES
   ============================================================================= */

/* Reduce paint complexity */
.complex-bg {
    will-change: transform; /* Promote to composite layer */
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Optimize animations */
.smooth-animation {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Preload hint for critical images */
.critical-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* =============================================================================
   RESPONSIVE PERFORMANCE
   ============================================================================= */

/* Mobile-first optimizations */
@media (max-width: 768px) {
    /* Reduce complexity on mobile */
    .organic-separator {
        display: none; /* Hide decorative elements on mobile */
    }
    
    /* Optimize touch targets */
    .btn, .contact-flip-container {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Reduce motion for performance */
    .floating-circle {
        animation-duration: 20s; /* Slower animations */
    }
}

/* High-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .specialist-photo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* =============================================================================
   LOADING STATES
   ============================================================================= */

/* Loading skeleton for specialists */
.specialist-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 8px;
    height: 20px;
    margin: 10px 0;
}

.specialist-skeleton.title { width: 80%; height: 24px; }
.specialist-skeleton.text { width: 100%; }
.specialist-skeleton.text:last-child { width: 60%; }

/* =============================================================================
   ACCESSIBILITY + PERFORMANCE
   ============================================================================= */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .lazy-loaded,
    .floating-circle,
    .wave-main,
    .wave-secondary {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lazy-image {
        background: #000;
        color: #fff;
    }
}

/* =============================================================================
   PRINT OPTIMIZATIONS
   ============================================================================= */

@media print {
    /* Hide non-essential elements when printing */
    .organic-separator,
    .contact-flip-container,
    .datetime-display {
        display: none !important;
    }
    
    /* Ensure images print well */
    .specialist-photo img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =============================================================================
   FONT LOADING OPTIMIZATION
   ============================================================================= */

/* Font display swap for better performance */
@font-face {
    font-family: 'System';
    src: local('San Francisco'), local('Segoe UI'), local('Roboto');
    font-display: swap;
}

/* Fallback font stack */
body {
    font-family: 'System', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================================================
   CRITICAL RESOURCE HINTS
   ============================================================================= */

/* These should be added to HTML head */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://encuadrado.com">
<link rel="preload" href="/css/styles.css" as="style">
<link rel="preload" href="/img/team/dra-macarena-vera.jpg" as="image">
*/