/* ====== Estilos Comunes Centralizados ====== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #07bcd6;
    font-family: 'Muli', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
}

.font-oswald {
    font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
}
.font-muli {
    font-family: 'Muli', -apple-system, BlinkMacSystemFont, sans-serif;
}
.font-montserrat {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.bg-brand-blue { background-color: #07bcd6; }
.bg-brand-blue-light { background-color: #6dc4d6; }
.bg-brand-dark { background-color: #194277; }
.bg-brand-red { background-color: #ff0000; }
.bg-brand-purple { background-color: #800080; }
.bg-brand-green { background-color: #00ff00; }
.text-white { color: #fff; }
.text-brand-dark { color: #194277; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-auto { height: auto; }

img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

header { position: relative; z-index: 50; }

/* Preloader y Spinner */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.spinner {
    border: 8px solid #fff;
    border-top: 8px solid #6dc4d6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para el acordeón FAQ */
.accordion-collapse {
    transition: max-height 0.3s ease;
    overflow: hidden;
}
.collapse {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.show {
    max-height: 1000px;
    opacity: 1;
    pointer-events: auto;
}