/* ========================================
   MAIN.CSS - SISTEMA DE DISEÑO MODULAR
   Comunidad Jesús - Website
   ======================================== */

/* BASE - Fundamentos */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';

/* ANIMATIONS - Sistema de animaciones */
@import 'animations/animations.css';

/* COMPONENTS - Componentes reutilizables */
@import 'components/header.css';
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/gallery.css';
@import 'components/footer.css';
@import 'components/download-modal.css';
@import 'components/scroll-to-top.css';

/* SECTIONS - Secciones específicas */
@import 'sections/hero.css';
@import 'sections/about.css';
@import 'sections/music.css';
@import 'sections/shows.css?v=1.1';
@import 'sections/resources.css';
@import 'sections/contact.css';

/* ========================================
   UTILIDADES GLOBALES
   ======================================== */

/* Spacing Utilities */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--spacing-1);
}

.mt-2 {
    margin-top: var(--spacing-2);
}

.mt-3 {
    margin-top: var(--spacing-3);
}

.mt-4 {
    margin-top: var(--spacing-4);
}

.mt-5 {
    margin-top: var(--spacing-5);
}

.mt-6 {
    margin-top: var(--spacing-6);
}

.mt-8 {
    margin-top: var(--spacing-8);
}

.mt-10 {
    margin-top: var(--spacing-10);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--spacing-1);
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

.mb-3 {
    margin-bottom: var(--spacing-3);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

.mb-5 {
    margin-bottom: var(--spacing-5);
}

.mb-6 {
    margin-bottom: var(--spacing-6);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-10 {
    margin-bottom: var(--spacing-10);
}

/* Display Utilities */
.hidden {
    display: none !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

/* Flex Utilities */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.gap-6 {
    gap: var(--spacing-6);
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-full {
    max-width: 100%;
}

/* Opacity Utilities */
.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* ========================================
   GLOBAL OVERRIDES
   ======================================== */

/* Smooth page load */
body.loaded {
    animation: fadeIn 0.5s ease-in-out;
}

/* No scroll when modal is open */
body.no-scroll {
    overflow: hidden;
}

/* Skip to main content (Accessibility) */
.skip-to-main {
    position: absolute;
    top: -1000px;
    left: 0;
    background: var(--primary);
    color: var(--light);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

.skip-to-main:focus {
    top: var(--spacing-4);
}

/* Print Styles */
@media print {

    .header,
    .footer,
    .btn,
    .social-links {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}