/* ═══════════════════════════════════════════════════════════
   La Dulzura — Sistema Base CSS
   Paleta: crema · dorado · marrón · blanco
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --bg:         #F7F3EC;
    --card:       #FFFFFF;
    --cream:      #EFE7DA;
    --gold:       #B8862D;
    --gold-soft:  #D8B46A;
    --dark:       #1F1A16;
    --brown:      #5A3E2B;
    --muted:      #8A7A68;
    --border:     #E4D8C8;
    --shadow-sm:  0 1px 4px rgba(31,26,22,.06);
    --shadow-md:  0 4px 20px rgba(31,26,22,.08);
    --shadow-gold:0 4px 20px rgba(184,134,45,.14);
    --radius:     14px;
}

/* ── Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg) !important;
    color: var(--dark) !important;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* ── Cards ─────────────────────────────────────────────── */
.luxury-card {
    background: #FFFFFF !important;
    border: 1px solid #E4D8C8 !important;
    box-shadow: 0 1px 4px rgba(31,26,22,.06) !important;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.luxury-card:hover {
    border-color: #D8B46A !important;
    box-shadow: 0 4px 20px rgba(184,134,45,.14) !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.gold-foil {
    background: linear-gradient(135deg, #C49030 0%, #E8C060 45%, #C49030 100%);
    background-size: 200% 200%;
    animation: gold-shimmer 4s ease infinite;
    color: #fff;
    font-weight: 700;
    letter-spacing: .05em;
}
@keyframes gold-shimmer {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.gold-gradient {
    background: linear-gradient(135deg, #C49030 0%, #E8C060 100%);
    color: #fff;
}

/* ── Dark-marble (ahora crema con textura sutil) ─────── */
.dark-marble {
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 15% 15%, rgba(184,134,45,.06) 0%, transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(90,62,43,.04) 0%, transparent 55%);
}

/* ── Marble overlay (decorativo, ahora muy sutil) ──────── */
.marble-texture {
    pointer-events: none;
    background: none;
    opacity: 0;
}
.marble-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(184,134,45,.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: var(--cream); }
::-webkit-scrollbar-thumb    { background: rgba(184,134,45,.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.custom-scrollbar::-webkit-scrollbar       { width: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 10px; }