/* ========================================================= */
/* ESTILOS DE UNAGI - ANIMACIÓN, RESPONSIVIDAD Y CENTRADO */
/* ========================================================= */

/* --- 1. CONFIGURACIÓN BASE DE LA IMAGEN (Móvil y General) --- */

.custom-image-bg {
    /* Altura mínima obligatoria para que se vea en el móvil cuando se apila */
    min-height: 250px; 
    
    /* URL de la imagen y ajustes para que cubra el área sin deformarse */
    background-image: url("https://ss-cnt-001c.esmsv.com/r/content/host1/fcd1a175af5709cad9531c418babb007//editor/Disenosintitulo5.webp");
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
}

/* --- 2. ANIMACIÓN DEL TÍTULO (BASE / MÓVIL) --- */
/* Por defecto (móviles) usa Cian y Magenta */

@keyframes text-pulse-glow {
    0% {
        color: #ffffff; 
        transform: scale(1);
        text-shadow: 2px 2px 0px #000000, 0px 0px 8px #000000; 
    }
    33% {
        color: #00d2ff; /* Cian Brillante */
        transform: scale(1.02); 
        text-shadow: 2px 2px 0px #000000, 0px 0px 10px #000000;
    }
    66% {
        color: #ff24cf; /* Magenta Neón */
        transform: scale(1.02);
        text-shadow: 2px 2px 0px #000000, 0px 0px 10px #000000;
    }
    100% {
        color: #ffffff; 
        transform: scale(1);
        text-shadow: 2px 2px 0px #000000, 0px 0px 8px #000000;
    }
}

/* --- 3. NUEVA ANIMACIÓN VERDE (Para pantallas > 740px) --- */
@keyframes text-pulse-green {
    0% {
        color: #ffffff; 
        transform: scale(1);
        text-shadow: 2px 2px 0px #000000, 0px 0px 8px #000000; 
    }
    50% {
        color: #00ff41; /* VERDE MATRIX / NEÓN INTENSO */
        transform: scale(1.05); 
        text-shadow: 2px 2px 0px #000000, 0px 0px 15px #006400; /* Resplandor verde oscuro */
    }
    100% {
        color: #ffffff; 
        transform: scale(1);
        text-shadow: 2px 2px 0px #000000, 0px 0px 8px #000000;
    }
}

.title-animation, 
.title-animation font {
    /* Animación por defecto (Móvil) */
    animation: text-pulse-glow 4s infinite ease-in-out;
    
    text-shadow: 2px 2px 0px #000000, 0px 0px 8px #000000 !important;
    color: inherit !important; 
    display: inline-block; 
}


/* --- 4. MEDIA QUERIES --- */

/* MÓVILES (Menor a 740px) */
@media (max-width: 739px) {
    /* Mantiene la animación original cian/magenta */
}

/* ESCRITORIO / TABLET (Mayor a 740px) */
@media (min-width: 740px) { 
    
    /* CAMBIO DE COLOR A VERDE SOLICITADO */
    .title-animation, 
    .title-animation font {
        /* Sobrescribimos la animación para usar la versión VERDE */
        animation: text-pulse-green 3s infinite ease-in-out;
    }

    /* Altura mínima para escritorio */
    .home-01.custom-min-height {
        min-height: 450px; 
    }

    .custom-image-bg {
        min-height: auto; 
    }
}

/* Estilos encapsulados Unagi */
.unagi-wrapper {
    font-family: 'Montserrat', sans-serif;
    color: #4f1964;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Títulos */
.unagi-wrapper h2 {
    color: #5e3ea8;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}

/* Contenedor Flex (La magia responsive) */
.unagi-fila {
    display: flex;
    flex-direction: column; /* Primero en columna para Celular */
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

/* Textos */
.unagi-texto {
    width: 100%;
    text-align: justify;
    line-height: 1.6;
    font-size: 16px;
}

/* Listas y Servicios */
.unagi-lista-servicios {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.unagi-item-servicio {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 4px solid #5e3ea8;
}

.unagi-titulo-item {
    color: #5e3ea8;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Imágenes */
.unagi-imagen-container {
    width: 100%;
    text-align: center;
}

.unagi-imagen {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(94, 62, 168, 0.2);
    object-fit: cover;
}

/* --- VERSIÓN ESCRITORIO (PC) --- */
@media (min-width: 768px) {
    .unagi-fila {
        flex-direction: row;
        align-items: flex-start;
    }

    .unagi-fila.invertido {
        flex-direction: row-reverse;
    }

    .unagi-texto {
        width: 60%;
        padding-right: 30px;
    }

    .unagi-imagen-container {
        width: 40%;
    }

    .unagi-wrapper h2 {
        text-align: left;
    }
}