/*
Theme Name: Mi Primer Tema
Theme URI: http://tusitio.com/mi-primer-tema
Author: Tu Nombre
Author URI: http://tusitio.com
Description: Un tema básico y personalizado creado desde cero.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-primer-tema
*/
/* 1. Importamos una fuente elegante (Montserrat) desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* 2. Estilos generales del cuerpo */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f8f9fa; /* Un blanco perlado muy elegante y limpio */
    color: #000000; /* Texto en negro puro para máxima legibilidad */
}

/* 3. Nuestras clases personalizadas de color dorado y negro */
.text-dorado {
    color: #d4af37 !important; /* El dorado se mantiene para resaltar */
}

.text-negro {
    color: #000000 !important;
}

.borde-dorado {
    border: 1px solid #d4af37 !important;
}

/* 4. Estilo del botón de compra VIP (Ajustado para fondo blanco) */
.btn-dorado {
    background-color: #d4af37;
    color: #000000 !important;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    padding: 10px 25px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave para que resalte sobre el blanco */
}

.btn-dorado:hover {
    background-color: #000000; /* Al pasar el ratón, se vuelve negro... */
    color: #d4af37 !important; /* ...y las letras se vuelven doradas ¡Súper elegante! */
    transform: translateY(-3px); 
    box-shadow: 0 8px 15px rgba(212, 175, 55, 0.4); 
    text-decoration: none;
}

/* ... (Mantén el código de .btn-dorado exactamente como lo tenías) ... */

/* 5. Estilos para nuestra tabla VIP (Ahora radiante) */
.tabla-vip {
    background-color: #ffffff; /* Fondo blanco puro para la tabla */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra elegante estilo tarjeta de crédito */
}

.tabla-vip th {
    background-color: #000000 !important; /* Cabecera negra... */
    color: #d4af37 !important; /* ...con letras doradas */
    border-bottom: 3px solid #d4af37 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tabla-vip td {
    background-color: #ffffff !important; 
    color: #000000 !important; /* Letras negras para los códigos */
    border-bottom: 1px solid #eeeeee !important; /* Líneas separadoras muy sutiles */
}
/* 1. Estado normal del botón */
.btn-dorado {
    background-color: #d4af37; /* El color dorado elegante base */
    color: #000000 !important; /* Texto en negro puro para máximo contraste */
    font-weight: 700; /* Texto en negrita */
    text-transform: uppercase; /* Todo en mayúsculas */
    border: none; /* Sin bordes feos */
    border-radius: 6px; /* Esquinas ligeramente redondeadas */
    padding: 10px 25px; /* Un botón más gordito y fácil de presionar */
    display: inline-block;
    
    /* Esta es la magia: hace que cualquier cambio al pasar el ratón tome 0.3 segundos, creando una animación suave */
    transition: all 0.3s ease-in-out; 
}

/* 2. Estado Hover (cuando el ratón pasa por encima) */
.btn-dorado:hover {
    background-color: #fce698; /* Un dorado mucho más claro y brillante */
    color: #000000 !important;
    
    /* Hace que el botón se mueva 3 píxeles hacia arriba, dando sensación de que se levanta */
    transform: translateY(-3px); 
    
    /* Crea un resplandor dorado alrededor del botón */
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.6); 
    
    text-decoration: none; /* Por si Bootstrap intenta subrayar el texto, esto lo evita */
}