/* Variables CSS para tu paleta de colores */
:root {
  --primary-color: #e0b000;      /* Dorado principal */
  --secondary-color: #f1c40f;     /* Un dorado un poco más claro/amarillo para acentos */
  --card-bg: #ffffff;            /* Blanco puro para el fondo de las tarjetas */
  --text-color: #333333;          /* Texto oscuro para contraste */
  --light-grey: #f8f8f8;          /* Gris muy claro para fondos sutiles */
  --border-color: #e0e0e0;        /* Borde suave */
  --accent-green: #5cb85c;        /* Verde amigable para botón personal (de tu CSS original) */
  --hover-green: #4cae4c;         /* Verde más oscuro para hover */
}

/* Base / Resets */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa al menos el alto completo de la ventana */
    background-color: var(--light-grey); /* Usamos la variable para el fondo gris claro */
    background-image: url('../images/fondo-monn.jpg'); /* Opcional: una imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color); /* Color de texto por defecto */
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto */
}

.container {
    background-color: var(--card-bg); /* Blanco para la tarjeta */
    /* Para la transparencia que tenías, usa: background-color: rgba(255, 255, 255, 0.9); */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
    text-align: center;
    max-width: 600px;
    width: 90%; /* Ancho responsivo para móviles */
}

h1 {
    color: var(--text-color); /* Texto oscuro para contraste */
    font-size: 2.2em; /* Ajustado para ser más responsivo en móviles primero */
    margin-bottom: 20px;
}

p {
    color: var(--text-color); /* Texto oscuro para contraste */
    font-size: 1em; /* Ajustado para ser más responsivo en móviles primero */
    margin-bottom: 30px;
}

.button-group {
    display: flex;
    flex-direction: column; /* Apila los botones verticalmente por defecto en móvil */
    gap: 20px; /* Espacio entre los botones */
}

.button {
    display: block; /* Para que ocupen todo el ancho disponible */
    padding: 15px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em; /* Ajustado para móviles */
    font-weight: bold;
    text-decoration: none; /* Quita el subrayado de los enlaces */
    color: white; /* Texto blanco en los botones */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button span {
    display: block; /* Para que la descripción esté en una nueva línea */
    font-size: 0.8em;
    font-weight: normal;
    opacity: 0.9;
    margin-top: 5px;
}

.button-mayorista {
    background-color: var(--primary-color); /* Tu color dorado principal */
}

.button-mayorista:hover {
    background-color: var(--secondary-color); /* Un dorado un poco más claro/amarillo para acento */
    transform: translateY(-3px);
}

.button-personal {
    background-color: var(--accent-green); /* Tu color verde amigable */
}

.button-personal:hover {
    background-color: var(--hover-green); /* Un tono más oscuro de verde al pasar el ratón */
    transform: translateY(-3px);
}

/* Media Queries para Responsive Design */

/* Pantallas pequeñas (teléfonos muy pequeños) - Ajustes adicionales */
@media (max-width: 380px) {
    .container {
        padding: 15px; /* Menos padding en pantallas muy pequeñas */
    }
    h1 {
        font-size: 1.8em;
    }
    p {
        font-size: 0.9em;
    }
    .button {
        font-size: 0.95em;
        padding: 10px 15px;
    }
}

/* Pantallas medianas (ej. tablets en vertical, 600px y más) */
@media (min-width: 600px) {
    h1 {
        font-size: 2.5em; /* Aumenta el tamaño en tablets */
    }
    p {
        font-size: 1.1em;
    }
    .button {
        font-size: 1.15em;
    }
}


/* Pantallas más grandes (ej. tablets en horizontal, pequeños escritorios, 768px y más) */
@media (min-width: 768px) {
    .button-group {
        flex-direction: row; /* En pantallas grandes, coloca los botones uno al lado del otro */
        justify-content: center; /* Centra los botones */
    }

    .button {
        flex: 1; /* Permite que los botones ocupen el espacio disponible equitativamente */
        max-width: 250px; /* Limita el ancho máximo de cada botón */
        font-size: 1.2em; /* Vuelve al tamaño original o un poco más grande */
    }
    .container {
        padding: 50px; /* Más padding en escritorios */
    }
}

/* Pantallas grandes (escritorios grandes, 1024px y más) */
@media (min-width: 1024px) {
    .container {
        max-width: 700px; /* Opcional: un poco más ancho en escritorios muy grandes */
        padding: 60px;
    }
    h1 {
        font-size: 3em;
    }
    p {
        font-size: 1.2em;
    }
}