/* ==========================================================================
   ELEMENTOS DECORATIVOS - SVG PATTERNS
   ========================================================================== */

/* SVG decorativo para bloques foto+texto y texto+foto */
.decorative-dots {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Animación de aparición más sutil */
.block-item:hover .decorative-dots {
    opacity: 0.7;
}

/* Patrón de puntos principal */
.decorative-dots.pattern-large {
    width: 323px;
    height: 508px;
    top: -40px;
    right: -60px;
}

.decorative-dots.pattern-small {
    width: 319px;
    height: 244px;
    bottom: -80px;
    left: 320px;
}

/* Versiones para móvil */
@media (max-width: 768px) {
    .decorative-dots.pattern-large {
        width: 200px;
        height: 314px;
        top: -20px;
        right: -30px;
    }
    
    .decorative-dots.pattern-small {
        width: 196px;
        height: 150px;
        bottom: -40px;
        left: 250px;
    }
    
    /* En móvil, los puntitos son más sutiles */
    .block-item:hover .decorative-dots {
        opacity: 0.4;
    }
}

/* ==========================================================================
   CONTENEDORES CON DECORACIÓN
   ========================================================================== */

.block-foto_texto .block-image,
.block-texto_foto .block-image {
    position: relative;
    overflow: visible;
}

/* Alternancia de patrones según índice par/impar */
.block-index-1 .decorative-dots,
.block-index-3 .decorative-dots,
.block-index-5 .decorative-dots,
.block-index-7 .decorative-dots,
.block-index-9 .decorative-dots {
    animation: float-up 8s ease-in-out infinite;
}

.block-index-2 .decorative-dots,
.block-index-4 .decorative-dots,
.block-index-6 .decorative-dots,
.block-index-8 .decorative-dots {
    animation: float-down 8s ease-in-out infinite reverse;
}

/* Animaciones sutiles */
@keyframes float-up {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-down {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
}

/* ==========================================================================
   ICONOS EN TÍTULOS
   ========================================================================== */

/* ==========================================================================
   ICONOS SVG EN TÍTULOS - OPTIMIZADO PARA CAMPO icono_titulo
   ========================================================================== */

.block-title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

/* Estilos para SVGs en el campo icono_titulo */
.block-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-title-icon svg {
    width: 2.2em;
    height: 2.2em;
    fill: #00B1E2;
    opacity: 0.9;
    animation: svg-pulse 3s ease-in-out infinite;
    display: block;
}

@keyframes svg-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.05); 
        opacity: 1;
    }
}

/* Para SVGs con múltiples colores, mantener colores originales */
.block-title-icon svg.multicolor {
    fill: unset;
    animation: svg-float 3s ease-in-out infinite;
}

@keyframes svg-float {
    0%, 100% { 
        transform: translateY(0); 
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-2px); 
        opacity: 1;
    }
}

/* Hover effect para SVGs */
.block-title-with-icon:hover .block-title-icon svg {
    transform: scale(1.1);
    opacity: 1;
    fill: #33CCDD;
    transition: all 0.3s ease;
}

.block-title-with-icon:hover .block-title-icon svg.multicolor {
    fill: unset;
    filter: brightness(1.1);
}

/* Responsive para SVGs */
@media (max-width: 768px) {
    .block-title-with-icon {
        gap: 0.3rem;
    }
    
    .block-title-icon svg {
        width: 1.8em;
        height: 1.8em;
    }
}

@media (max-width: 480px) {
    .block-title-with-icon {
        gap: 0.25rem;
    }
    
    .block-title-icon svg {
        width: 1.6em;
        height: 1.6em;
    }
}

/* ==========================================================================
   MEJORAS VISUALES ADICIONALES
   ========================================================================== */

/* Sombra sutil para las imágenes con decoración */
.block-foto_texto .block-image img,
.block-texto_foto .block-image img {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 3;
}

.block-foto_texto .block-image:hover img,
.block-texto_foto .block-image:hover img {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Gradiente sutil de fondo para los bloques */
.block-foto_texto,
.block-texto_foto {
    position: relative;
    overflow: hidden;
}

.block-foto_texto::before,
.block-texto_foto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(230, 234, 236, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.block-foto_texto .container,
.block-texto_foto .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   EFECTOS ESPECIALES PARA HOVER
   ========================================================================== */

/* Efecto de brillo en hover */
.block-foto_texto .block-image::after,
.block-texto_foto .block-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 4;
    pointer-events: none;
}

.block-foto_texto .block-image:hover::after,
.block-texto_foto .block-image:hover::after {
    left: 100%;
}

/* Mostrar decoración en hover del bloque completo */
.block-foto_texto:hover .decorative-dots,
.block-texto_foto:hover .decorative-dots {
    opacity: 0.8;
}