/* =========================================================
   PALETA DE COLORES
========================================================= */
:root {
    --negro: #0D0D0D;
    --amarillo: #F2CF1D;
    --amarillo-oscuro: #8C5C03;
    --blanco: #ffffff;
}

/* =========================================================
   GENERAL
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: #000;
    font-family: Arial, sans-serif;
    color: var(--blanco);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   HEADER
========================================================= */

.main-header {
    background: var(--negro);
    padding: 10px 25px;
    border-bottom: 3px solid var(--amarillo-oscuro);
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.header-content {
    width: 100%;
    max-width: 1600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
.logo-link {
    display: flex;
    align-items: center;
}

.logo {
    height: 55px;
    width: auto;
}

/* MENÚ IZQUIERDO */
.menu-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu-left a {
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: 0.2s ease;
}

.menu-left a:hover {
    color: var(--amarillo);
}

/* MENÚ DERECHO (si se necesita) */
.menu-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.menu-right a {
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.menu-right a:hover {
    color: var(--amarillo);
}

/* =========================================================
   FOOTER
========================================================= */
.main-footer {
    background: var(--negro);
    border-top: 3px solid var(--amarillo-oscuro);
    text-align: center;
    padding: 18px 0;
    font-size: 0.9rem;
    margin-top: auto; /* Mantiene el footer abajo siempre */
    color: var(--blanco);
}