/* Estilos base comunes */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    background: linear-gradient(135deg, var(--color-primary-darkest) 0%, var(--color-primary-darker) 100%);
    color: var(--color-text-primary);
    min-height: 100vh;
}

.container {
    background: var(--color-bg-white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin: 0 auto;
}

.header {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
    border-bottom: 5px solid var(--color-accent-gold);
    text-align: center;
}

.logo {
    max-width: 250px;
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

/* Utilidades de texto */
.title {
    color: var(--color-accent-gold);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.subtitle {
    color: var(--color-text-light);
    letter-spacing: 1px;
}

.content {
    padding: var(--spacing-lg);
    color: var(--color-text-primary);
}

/* Responsive */
@media (max-width: 600px) {
    body {
        padding: var(--spacing-md);
    }
    
    .title {
        font-size: 1.4em;
    }
    
    .subtitle {
        font-size: 1em;
    }
}