/* --- Variables Específicas del Banner (Con Prefijo) --- */
:root {
    /* Colores y Estilo del Banner */
    --banner-bg-color: #ff0000;      /* Rojo */
    --banner-text-color: #ffffff;    /* Blanco */
    --banner-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil (ajustada) */
    --banner-border-radius: 0px;

    /* Espaciado del Banner */
    --banner-padding-vertical: 20px;
    --banner-padding-horizontal: 30px;
    --banner-padding-mobile: 25px; /* Padding para móvil (igual vertical/horizontal) */
    --banner-margin-top: 40px;

    /* Texto del Banner */
    --banner-title-size: 1.4em;
    --banner-title-size-mobile: 1.0em;
    --banner-title-margin-bottom: 5px;
    --banner-p-size: 0.95em;
    --banner-p-size-mobile: 0.9em;

    /* Botón del Banner */
    --banner-button-bg: white;
    --banner-button-text-color: #000000; /* Negro */
    --banner-button-hover-bg: #000000;   /* Negro */
    --banner-button-hover-text-color: #ffffff; /* Blanco */
    --banner-button-padding-vertical: 10px;
    --banner-button-padding-horizontal: 20px;
    --banner-button-padding-vertical-mobile: 12px;
    --banner-button-padding-horizontal-mobile: 25px;
    --banner-button-border-radius: 5px;
    --banner-button-margin-top: 15px;
}


/* --- Estilos generales (Sin cambios directos, pero podrías usar variables globales aquí) --- */
body {
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: #f4f4f4; /* Podría ser var(--global-bg-color) */
}

/* --- Contenedor principal del banner (Usando Variables Prefijadas) --- */
.banner-container {
    background-color: var(--banner-bg-color); /* <-- Cambio */
    color: var(--banner-text-color);         /* <-- Cambio */
    padding: var(--banner-padding-vertical) var(--banner-padding-horizontal); /* <-- Cambio */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--banner-margin-top);       /* <-- Cambio */
    border-radius: var(--banner-border-radius); /* <-- Cambio */
    box-shadow: var(--banner-box-shadow);       /* <-- Cambio */
}

/* Contenedor del texto */
.banner-text {
    flex-grow: 0;
    text-align: center;
    margin: 0 auto;
}

/* Estilo del título */
.banner-text h2 {
    margin: 0 0 var(--banner-title-margin-bottom) 0; /* <-- Cambio */
    font-size: var(--banner-title-size);           /* <-- Cambio */
    font-weight: bold;
    color: var(--banner-text-color);               /* <-- Cambio */
}

/* Estilo del párrafo */
.banner-text p {
    margin: 0;
    font-size: var(--banner-p-size); /* <-- Cambio */
}

/* Estilo del botón */
.register-button {
    background-color: var(--banner-button-bg);    /* <-- Cambio */
    color: var(--banner-button-text-color);       /* <-- Cambio */
    padding: var(--banner-button-padding-vertical) var(--banner-button-padding-horizontal); /* <-- Cambio */
    border: none;
    border-radius: var(--banner-button-border-radius); /* <-- Cambio */
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    margin-top: var(--banner-button-margin-top);    /* <-- Cambio */
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto al pasar el mouse sobre el botón (opcional) */
.register-button:hover {
    background-color: var(--banner-button-hover-bg); /* <-- Cambio */
    color: var(--banner-button-hover-text-color);    /* <-- Cambio */
}

/* --- Media Query para pantallas pequeñas (Usando Variables Prefijadas) --- */
@media (max-width: 668px) {
    .banner-container {
        flex-direction: column;
        text-align: center;
        padding: var(--banner-padding-mobile); /* <-- Cambio (usa variable única para móvil) */
    }

    .banner-text {
        margin-right: 0;
        margin-bottom: 15px; /* Mantenido fijo o crear --banner-text-margin-bottom-mobile si es necesario */
    }

    .banner-text h2 {
        font-size: var(--banner-title-size-mobile); /* <-- Cambio */
        
    }

    .banner-text p {
        font-size: var(--banner-p-size-mobile); /* <-- Cambio */
    }

    .register-button {
        width: auto;
        padding: var(--banner-button-padding-vertical-mobile) var(--banner-button-padding-horizontal-mobile); /* <-- Cambio */
    }
}