:root {
    --color-bg: #f5f3f0; /* Fondo crema claro */
    --color-surface: #ffffff; /* Superficie blanca para tarjetas */
    --color-text-primary: #333333; /* Gris carbón oscuro para texto */
    --color-text-secondary: #6c757d; /* Gris medio para texto secundario */
    --color-accent: #D4AF37;      /* Dorado para acentos */
    --color-border: #e9ecef;      /* Borde muy sutil */
    --font-serif: 'Lora', serif;
    --font-sans: 'Inter', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23dcdad7" fill-opacity="0.12"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    color: var(--color-text-primary);
    min-height: 100vh;
    padding: 20px 15px;
    line-height: 1.6;
}
.floating-elements-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden; }
.floating-element { position: absolute; font-size: 20px; color: #dcdad7; opacity: 0; animation: float 20s linear infinite; }
@keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10%, 90% { opacity: 0.15; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } }

.container { max-width: 1200px; margin: 0 auto; }
.header { text-align: center; padding: 40px 20px; background-color: var(--color-surface); border-radius: 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.05); margin-bottom: 40px; }
.profile-image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 20px; border: 5px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-accent); }
.profile-title { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 600; margin-bottom: 8px; }
.profile-bio { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 24px; }
.main-cta { display: inline-block; background-color: var(--color-accent); color: white; padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); margin-bottom: 32px; }
.main-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5); }
.main-cta .fab { margin-right: 8px; }
.social-links { display: flex; justify-content: center; gap: 16px; }
.social-link { color: var(--color-text-secondary); font-size: 1.2rem; transition: color 0.3s ease; }
.social-link:hover { color: var(--color-accent); }

.section { padding: 40px 20px; background-color: rgba(255,255,255,0.6); border-radius: 24px; margin-bottom: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.section-title { font-family: var(--font-serif); font-size: 2rem; text-align: center; margin-bottom: 16px; }
.section-subtitle { text-align: center; max-width: 600px; margin: 0 auto 40px; color: var(--color-text-secondary); }
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tab { background: #e9ecef; padding: 10px 20px; border: none; border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all 0.3s ease; }
.tab.active { background: var(--color-accent); color: white; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); }
.tab:hover:not(.active) { background: #dee2e6; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
.product-card { display: block; text-decoration: none; color: var(--color-text-primary); background-color: var(--color-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.product-image-wrapper { aspect-ratio: 1 / 1.1; }
.product-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 20px; }
.product-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
.product-description { font-size: 0.9rem; color: var(--color-text-secondary); }

.footer { text-align: center; color: var(--color-text-secondary); font-size: 0.9rem; padding: 20px; }
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 5vh 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox-content { position: relative; width: auto; max-width: 90vw; margin: 0 auto; }
.lightbox-content img { width: 100%; height: auto; display: block; border-radius: 8px; }
.lightbox-close { position: fixed; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; font-weight: 300; line-height: 1; z-index: 1001; }