/* ==========================================================================
   PUCHE CURLY - SISTEMA DE DISEÑO Y ESTILOS GLOBALES PREMIUM
   Autor: Desarrollador Frontend Senior UI/UX
   ========================================================================== */

/* Importación de tipografías premium como fallbacks oficiales */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playball&display=swap');

/* Declaración de fuentes de manual de marca */
@font-face {
    font-family: 'Audaciti';
    src: local('Audaciti'), local('Audaciti Regular'), local('Audaciti-Regular'), url('../fonts/Audaciti.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'beauty';
    src: local('beauty'), local('beauty Regular'), local('beauty-Regular'), url('../fonts/beauty.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Paleta Oficial */
    --color-primary: #cb6ce6;      /* Deep Mauve */
    --color-primary-dark: #b052cc; /* Deep Mauve Oscuro */
    --color-primary-light: #e09ef2;/* Lila Suave */
    --color-primary-ultra: #fbf5ff;/* Lila Ultra Claro */
    --color-text-white: #ffffff;
    --color-text-dark: #1f1f1f;
    --color-gold: #ffffff;         /* Dorado para detalles y valoración */
    --color-green: #10b981;        /* Verde WhatsApp */
    --color-green-dark: #059669;

    /* Fuentes */
    --font-serif: 'Audaciti', 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --font-beauty: 'beauty', 'Playball', 'Playfair Display', cursive, serif;

    /* Sombras y Efectos */
    --shadow-premium: 0 10px 30px -10px rgba(203, 108, 230, 0.15);
    --shadow-glass: 0 8px 32px 0 rgba(203, 108, 230, 0.08);
}

/* Configuración General y Scrollbar */
html {
    scroll-behavior: smooth;
    background-color: var(--color-primary); /* Forzar fondo primario de marca */
    color: var(--color-text-white);
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-primary); /* Deep Mauve de fondo */
    color: var(--color-text-white);
    overflow-x: hidden;
}

/* Scrollbar Premium */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Clases de Tipografía */
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-serif);
}

.font-beauty {
    font-family: var(--font-beauty);
    font-weight: normal;
}

/* Utilidades de Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow-glass);
}

.glass-panel-dark {
    background: rgba(20, 10, 25, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px -5px rgba(203, 108, 230, 0.25);
}

.glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-white);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Detalles Accordion (FAQ) */
details summary::-webkit-details-marker {
    display: none;
}
details summary {
    list-style: none;
}

/* Microanimaciones y Transiciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.01); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.25); }
}

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-glow {
    animation: glow 4s ease-in-out infinite;
}

/* Ajustes E-commerce */
.product-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(20, 10, 25, 0.4) 100%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-image-container::after {
    opacity: 1;
}

/* Clases específicas de scroll en Drawer */
.drawer-scroll::-webkit-scrollbar {
    width: 4px;
}
.drawer-scroll::-webkit-scrollbar-thumb {
    background: rgba(203, 108, 230, 0.3);
}

/* Botones Premium */
.btn-premium-gold {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--color-text-white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.btn-premium-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    filter: brightness(1.05);
}

.btn-premium-whatsapp {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-text-white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-premium-whatsapp:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

.btn-premium-white {
    background: var(--color-text-white);
    color: var(--color-primary-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.btn-premium-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

.btn-premium-outline {
    background: transparent;
    border: 1.5px solid var(--color-text-white);
    color: var(--color-text-white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-premium-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Utilidades de color de marca */
.text-gold {
    color: #ffffff !important;
}
.bg-gold {
    background-color: #ffffff !important;
    color: var(--color-primary-dark) !important;
}