/* 
   Futuristic Beauty Theme - Modernization Layer
   Maintains original brand colors but adds depth, gloss, and motion.
*/

:root {
    /* Re-declaring for local scope usage if needed, but using var() from style.css primarily */
    --futa-primary: #ED6CA5;
    --futa-secondary: #99265D;
    --futa-warning: #7AC2CB;
    --futa-bg-gradient: radial-gradient(circle at 10% 20%, rgba(237, 108, 165, 0.08) 0%, transparent 40%),
                        radial-gradient(circle at 90% 80%, rgba(122, 194, 203, 0.1) 0%, transparent 40%);
}

/* 1. Global Modernization */
body {
    background: var(--futa-bg-gradient) !important;
    background-attachment: fixed !important;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* 2. Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        0 8px 32px 0 rgba(153, 38, 93, 0.1), 
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 10px 40px -10px rgba(153, 38, 93, 0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    border-radius: 20px; /* Added radius */
    padding: 20px;       /* Added padding */
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px -10px rgba(237, 108, 165, 0.25);
    background: rgba(255, 255, 255, 0.85) !important;
}

/* 3. Typography & Glow */
h1, h2, h3, .h1, .h2, .display-1, .display-2 {
    position: relative;
    z-index: 1;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* 4. Modern Buttons (Pill & Glow) */
.btn-warning, .btn-primary, .btn-secondary {
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-warning {
    background: linear-gradient(90deg, #7AC2CB, #68a8b1) !important;
    box-shadow: 0 0 20px rgba(122, 194, 203, 0.4) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(90deg, #ED6CA5, #d64d8a) !important;
    box-shadow: 0 0 20px rgba(237, 108, 165, 0.4) !important;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
    z-index: -1;
}

.btn:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

/* 5. Inputs Modernization */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(231, 224, 220, 0.5) !important;
    backdrop-filter: blur(4px);
    border-radius: 12px !important;
    padding: 0.8rem 1rem !important;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(237, 108, 165, 0.15) !important;
    border-color: var(--primary) !important;
}

/* 6. Section Specific Overrides */

/* Hero Section */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -10%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(237, 108, 165, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
    animation: floatOrb 10s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -10%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(122, 194, 203, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
    animation: floatOrb 15s ease-in-out infinite reverse;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

/* Form Container in Hero */
.hero .card {
    border: none !important;
    background: transparent !important; /* Let glass-panel handle bg */
}

/* Cards in "Mercado" Section */
.section--card .card {
    border: none !important;
    background: #fff; /* fallback */
}

/* Marquee Modernization */
marquee {
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    color: white;
    padding: 10px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    opacity: 0.95;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Floating Elements Animation */
.float-animation {
    animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50% { transform: translate(0, 10px); }
    100% { transform: translate(0, -0px); }
}

/* Badge Pulse */
.badge-pulse {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(237, 108, 165, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(237, 108, 165, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 108, 165, 0); }
}

/* Fixes for specific site elements to enforce modernity */
.nav {
    background: rgba(251, 250, 249, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    margin-top: 20px;
    padding: 10px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.brand img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

section {
    position: relative;
    z-index: 2;
}

/* Additional overrides - Dark Glass Badge */
.hero .float-badge {
    background: rgba(35, 30, 29, 0.85) !important; /* Dark glass */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.hero .float-badge p {
    color: #fff;
}

/* Apply modern styles to existing form fields */
.field input, .field select, .form-control, .form-select {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(231, 224, 220, 0.8) !important;
    backdrop-filter: blur(4px);
    padding: 12px 1rem !important;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.field input:focus, .field select:focus {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(237, 108, 165, 0.15) !important;
    border-color: var(--primary) !important;
    outline: none;
}


.hero .float-badge {
    padding: 10px 16px !important;
}


.hero {
    background: transparent !important;
}