:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --price-blue: #0056b3; /* Azul más oscuro para contraste */
}

/* --- RESET --- */
main.flex-1.bg-background { background: #f8fafc !important; }

/* --- TARJETAS --- */
.grid button {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    cursor: pointer !important;
}

.grid button:hover {
    transform: translateY(-4px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Seleccionado */
button[aria-selected="true"],
button.bg-blue-600 {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* --- TEXTOS --- */
.grid button h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 0.25rem !important;
}

.grid button p:not([class*="text-lg"]) {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin-bottom: 0.5rem !important;
}

/* PRECIO - FORZADO CON AZUL OSCURO Y SIN NEGRITA */
/* Atacamos todas las posibles clases que React usa para el precio */
.grid button p.text-lg, 
.grid button span.text-lg,
.grid button .font-bold.text-lg,
.grid button .text-accent,
.grid button p:last-child {
    color: var(--price-blue) !important; /* AZUL OSCURO PARA CONTRASTE */
    font-weight: 400 !important; /* SIN NEGRITA */
    font-size: 1.35rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    margin-top: auto !important;
}

/* Inversión al seleccionar */
button[aria-selected="true"] h4,
button[aria-selected="true"] p,
button[aria-selected="true"] span,
button[aria-selected="true"] p.text-lg {
    color: #ffffff !important;
}

/* WHATSAPP */
.whatsapp-float { left: 40px !important; bottom: 40px !important; }