/* La Quiniela de Tláloc — paleta azteca / piedra */
:root {
    --color-navy: #001A14;
    --color-navy-light: #0A3D32;
    --color-green: #1F8A9E;
    --color-green-dark: #007A87;
    --color-orange: #C4922A;
    --color-orange-dark: #8B6914;
    --color-brown: #7E5F46;
    --color-stone: #A8895C;
    --color-bg: #001A14;
    --color-surface: rgba(10, 45, 38, 0.92);
    --color-text: #E8EDE9;
    --color-text-muted: rgba(232, 237, 233, 0.58);
    --color-border: rgba(168, 137, 92, 0.32);
    --color-error: #EF9A9A;
    --color-error-bg: rgba(198, 40, 40, 0.15);
    --color-success: #9DE4F0;
    --color-success-bg: rgba(31, 138, 158, 0.15);

    --aztec-gold-light: #F4D58D;
    --aztec-gold: #C4922A;
    --aztec-gold-dark: #8B6914;
    --aztec-bronze: #5C3D0A;
    --stone-light: #D4BC8E;
    --stone-mid: #A8895C;
    --stone-dark: #6B5238;
    --stone-deep: #4A3828;
    --stone-shadow: #2A2018;
    --font-display: 'Bebas Neue', 'Inter', sans-serif;
    --greca-url: url('../img/greca-horizontal.svg');
    --greca-v-url: url('../img/greca-vertical.svg');
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.brand__logo {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.brand--header .brand__logo {
    width: 52px;
    height: 52px;
}

.brand--header .brand__name {
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    color: var(--aztec-gold-light);
    line-height: 1.2;
    max-width: 11rem;
}

.brand--login {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.brand--login .brand__logo {
    width: 120px;
    height: 120px;
}

.brand--login .brand__text {
    text-align: center;
}

.brand--login .brand__name {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--aztec-gold-light);
    line-height: 1.2;
    max-width: 16rem;
}

.brand--login .brand__tagline {
    display: none;
}

.brand--compact .brand__logo {
    width: 32px;
    height: 32px;
}

.header .brand:hover .brand__name {
    color: #fff;
}