/* --- AJUSTES PARA OJS 3.4 (Tailwind Compatible) --- */

/* 1. Recuperar el naranja UJAP en el banner y botones */
.bg-orange-300 {
    background-color: #f39200 !important;
}

/* 2. Estilo para la Onda (Wave) que insertamos en el TPL */
.wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 20;
    line-height: 0;
}
.wave svg {
    fill: #ffffff; /* Esto crea el efecto de recorte blanco */
    width: 100%;
    height: 120px;
}

/* 4. Ajustar el texto del Hero para que no choque con el logo */
@media (min-width: 1024px) {
    .prose-headings\:font-normal {
        max-width: 60%; /* Da espacio al logo a la derecha */
    }
}


.ujap-logo-hero {
    /* 1. Fondo blanco con ligera transparencia (0.9) para elegancia */
    background-color: rgba(255, 255, 255, 0.59) !important;
    
    /* 2. Redondear las esquinas */
    border-radius: 15px !important;
    
    /* 3. Espacio interno (Padding) vital para que el logo "respire" */
    padding: 15px !important;
    
    /* 4. Sombra para dar profundidad (efecto flotante) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    
    /* 5. Ajustes de tamaño y alineación */
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
/*    margin-left: auto;*/
}

/* Ajuste para que en móviles el logo se centre y no se vea gigante */
@media (max-width: 1023px) {
    .ujap-logo-hero {
        margin: 20px auto 0 auto;
        max-width: 220px !important;
    }
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / 83%);
}