/* Start custom CSS for wp-widget-custom_html, class: .elementor-element-f9ac83d *//* =========================================
   VARIABLES DE COLORES (Paleta Institucional)
========================================= */
:root {
    --azul-marino: #070747;
    --azul-claro: #29abe2;
    --naranja: #de7613;
    --verde-oscuro: #36b153;
    --verde-claro: #99c326;
    --gris-texto: #5a5a5a; /* Gris adaptado de la imagen de referencia */
    
    --fuente-titulos: 'Fredoka', sans-serif;
    --fuente-textos: 'Nunito', sans-serif;
}

/* =========================================
   RESET Y ESTILOS GENERALES
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-textos);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: #ffffff;
}

/* =========================================
   ESTRUCTURA UNIFICADA (Misión y Visión)
========================================= */
.seccion-institucional {
    background-color: #ffffff;
    padding: 80px 5%;
}

.contenedor-columnas {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px;
}

/* Invertir el orden para darle dinamismo visual */
.layout-inverso .contenedor-columnas {
    flex-direction: row-reverse;
}

.contenido-texto {
    flex: 1 1 400px;
}

.imagen-wrapper {
    flex: 1 1 400px;
    position: relative;
    padding: 20px;
}

/* =========================================
   TIPOGRAFÍA Y DECORACIONES (Basado en imagen)
========================================= */
.titulo-seccion {
    font-family: var(--fuente-titulos);
    font-size: 3.5rem;
    color: var(--azul-marino);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.linea-decorativa {
    width: 60px;
    height: 5px;
    background-color: var(--naranja);
    margin-bottom: 30px;
    border-radius: 3px;
}

.texto-parrafo {
    font-size: 1.15rem;
    color: var(--gris-texto);
    margin-bottom: 20px;
    line-height: 1.8;
}

/* =========================================
   FOTOGRAFÍAS
========================================= */
.foto-principal {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Borde muy sutil para mantener el diseño limpio */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
}

/* =========================================
   ANIMACIONES FLOTANTES (Estrellas y Círculos)
========================================= */
.decoracion {
    position: absolute;
    z-index: 1;
    animation: flotar 6s ease-in-out infinite;
}

/* Posiciones Estrellas (Misión) */
.estrella-1 { top: -20px; right: -10px; width: 70px; animation-delay: 0s; z-index: 15;}
.estrella-2 { bottom: -20px; left: -20px; width: 50px; animation-delay: 1s; z-index: 15;}
.estrella-3 { top: 40%; left: -30px; width: 40px; animation-delay: 2s; }

/* Posiciones Círculos (Visión) */
.circulo-1 { top: -30px; right: -20px; width: 100px; animation-delay: 0.5s; z-index: 1;}
.circulo-2 { bottom: -30px; left: -10px; width: 120px; animation-delay: 1.2s; z-index: 15; }
.circulo-3 { top: 50%; right: -40px; width: 80px; animation-delay: 2.5s; z-index: 1;}

/* Movimiento suave */
@keyframes flotar {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* =========================================
   RESPONSIVO (Móviles)
========================================= */
@media (max-width: 768px) {
    .contenedor-columnas, .layout-inverso .contenedor-columnas {
        flex-direction: column;
        gap: 40px;
    }
    
    .titulo-seccion { font-size: 2.8rem; }
    .texto-parrafo { font-size: 1.05rem; }
    
    .estrella, .circulo { transform: scale(0.8); }
}
}/* End custom CSS */