/**
 * main.css
 * Punto de entrada principal de estilos.
 * Importa los módulos en orden específico (Cascada).
 */

/* 1. Variables y Tokens (Colores, Tamaños WCAG) */
@import url('variables.css');

/* 2. Animaciones (Keyframes para Feedback UX) */
@import url('animations.css');

/* 3. Estructura (Frame Móvil, Header, Footer) */
@import url('layout.css');

/* 4. Componentes (Botones, Tarjetas, Elementos UI) */
@import url('components.css');

/* 5. Estilos Globales (Reset y Fondo) */
body {
    /* Asegura el color de fondo definido en variables.css */
    background-color: var(--color-bg-app);
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    
    /* Centra el simulador móvil en la pantalla del navegador */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

header .dot-indicator{height: 6px;
    width: 6px;
    border-radius: 50%;}

    .mb-70{margin-bottom: 70px;}