/* styles/main.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Base */
@import url('base/variables.css');
@import url('base/typography.css');

/* Layout */
@import url('layout/header.css');
@import url('layout/footer.css');
@import url('layout/grid.css');

/* Components */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/hero.css');
@import url('components/modals.css');
@import url('components/forms.css');

/* Pages */
@import url('pages/home.css');
@import url('pages/comunidad.css');
@import url('pages/descubrir.css');
@import url('pages/alojamiento.css');

/* Utilities */
@import url('utilities/animations.css');
@import url('utilities/responsive.css');

/* DEBUG: Verificar espacios - TEMPORAL */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
    z-index: 9999;
    pointer-events: none;
}

/* Resaltar elementos con márgenes/paddings problemáticos */
.debug * {
    outline: 1px solid rgba(255,0,0,0.1) !important;
}

/* SOLUCIÓN DE EMERGENCIA PARA ESPACIOS */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

* {
    max-width: 100% !important;
}