/* --- CONFIGURACIÓN GLOBAL (TEMA BLANCO) --- */
:root {
    --bg-body: #ffffff;
    --text-white: #000000;
    --text-gray: #666666;
    --accent-silver: #333333;
    --border-light: #e0e0e0;
    
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
    background-color: var(--bg-body);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* --- TOAST (NOTIFICACIÓN CORREGIDA) --- */
.toast {
    position: fixed;
    bottom: 30px; /* Posición desde abajo */
    left: 50%;
    transform: translateX(-50%) translateY(50px); /* Empieza desplazado abajo */
    
    background: #000000; /* Fondo Negro */
    color: #ffffff;      /* Letra Blanca */
    
    padding: 12px 30px;
    border-radius: 50px; /* Bordes redondos */
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 5000;
    
    /* MAGIA PARA OCULTARLO AL INICIO */
    opacity: 0;
    visibility: hidden; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    display: flex; align-items: center; gap: 10px;
}

/* Clase que JS agrega para mostrarlo */
.toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- BOTONES PROFESIONALES --- */
.btn-primary {
    padding: 12px 35px; background: black; color: white;
    font-weight: 700; text-decoration: none; text-transform: uppercase;
    letter-spacing: 1px; transition: all 0.3s ease;
    border: 1px solid black;
}
.btn-primary:hover { background: transparent; color: black; }

.btn-secondary {
    padding: 12px 35px; background: transparent; color: black;
    font-weight: 700; text-decoration: none; text-transform: uppercase;
    letter-spacing: 1px; transition: all 0.3s ease;
    border: 1px solid black;
}
.btn-secondary:hover { background: black; color: white; }

.btn-black {
    background: black; color: white; border: none; padding: 12px 30px;
    font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-black:hover { background: #333; }

/* --- NAVBAR --- */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 5%; position: fixed; width: 100%; top: 0; z-index: 1000;
    transition: 0.4s ease; background: transparent;
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-light); padding: 15px 5%;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
.logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; color: white; }
.navbar.scrolled .logo { color: black; }
.navbar.scrolled .nav-links-desktop a { color: black; }
.navbar.scrolled .nav-links-desktop a::after { background: black; }
.navbar.scrolled .icon-btn { color: black; }

.nav-links-desktop { display: flex; gap: 40px; }
.nav-links-desktop a {
    text-decoration: none; color: white; font-size: 0.85rem; font-weight: 500;
    position: relative; transition: 0.3s; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.nav-links-desktop a::after {
    content: ''; position: absolute; width: 0; height: 1px; bottom: -5px; left: 0;
    background: white; transition: 0.3s;
}
.nav-links-desktop a:hover::after { width: 100%; }

.icon-btn {
    background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer;
    position: relative; transition: 0.3s;
}
.navbar.scrolled .icon-btn:hover { color: #666; }
.icon-btn:hover { transform: scale(1.1); }
.badge {
    position: absolute; top: -5px; right: -8px;
    background: black; color: white; font-size: 0.6rem; font-weight: bold;
    width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
}

/* --- HERO --- */
.hero {
    height: 100vh; position: relative; 
    display: flex; justify-content: center; align-items: flex-end; /* TEXTO ABAJO */
    padding-bottom: 100px;
    text-align: center; overflow: hidden; color: white;
}
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 20px; }

.subtitulo { color: #ddd; letter-spacing: 3px; font-size: 0.8rem; }
.hero h1 { font-family: var(--font-heading); font-size: 3rem; line-height: 1; margin: 10px 0 30px; text-transform: uppercase; }
.gradient-text { background: none; color: white; }
.hero-btns { display: flex; gap: 20px; justify-content: center; }
.hero .btn-primary { background: white; color: black; border-color: white; }
.hero .btn-primary:hover { background: transparent; color: white; }
.hero .btn-secondary { border-color: white; color: white; }
.hero .btn-secondary:hover { background: white; color: black; }

/* --- TIENDA --- */
.contenedor-productos { padding: 80px 5%; }
.shop-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 40px; gap: 20px; }
.shop-header h2 { font-family: var(--font-heading); font-size: 2rem; letter-spacing: 1px; }

.filtros { display: flex; gap: 10px; }
.btn-filter {
    background: transparent; border: 1px solid #ccc; color: #666;
    padding: 8px 20px; border-radius: 50px; cursor: pointer; transition: 0.3s;
    font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
}
.btn-filter:hover, .btn-filter.active { background: black; color: white; border-color: black; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }

.producto-card { position: relative; cursor: pointer; border: 1px solid transparent; transition: 0.3s; }
.producto-card:hover { border-color: #eee; }
.img-wrapper { width: 100%; height: 400px; overflow: hidden; position: relative; background: #f8f8f8; }
.img-wrapper img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: 0.6s ease;
    /* Hemos borrado el filtro grayscale para que se vea a color siempre */
}
.producto-card:hover img { transform: scale(1.05); filter: grayscale(0%); }

.btn-add-hover {
    position: absolute; bottom: 0; width: 100%; background: black; color: white;
    padding: 15px; border: none; font-weight: 700; cursor: pointer;
    transform: translateY(100%); transition: 0.3s;
}
.producto-card:hover .btn-add-hover { transform: translateY(0); }
.info-producto { padding-top: 15px; display: flex; justify-content: space-between; }
.info-producto h3 { font-size: 0.9rem; font-weight: 600; color: #333; text-transform: uppercase; }
.precio { font-weight: 700; color: black; }

/* --- NEWSLETTER --- */
.newsletter { padding: 80px 5%; background: #f9f9f9; text-align: center; border-top: 1px solid var(--border-light); }
.newsletter h3 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 10px; }
.input-group { display: flex; justify-content: center; gap: 0; }
.input-group input { padding: 12px 20px; border: 1px solid #ccc; width: 300px; outline: none; }

/* --- SIDEBARS --- */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1500; opacity: 0; visibility: hidden; transition: 0.3s; }
.overlay.active { opacity: 1; visibility: visible; }
aside { position: fixed; top: 0; height: 100%; background: white; z-index: 2000; padding: 30px; transition: 0.5s; display: flex; flex-direction: column; color: black; }
.sidebar-left { left: -350px; width: 300px; border-right: 1px solid var(--border-light); }
.sidebar-left.active { left: 0; }
.sidebar-right { right: -400px; width: 380px; border-left: 1px solid var(--border-light); }
.sidebar-right.active { right: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-family: var(--font-heading); font-size: 1.2rem; }
.close-btn { background: none; border: none; color: black; font-size: 1.5rem; cursor: pointer; }
.sidebar-links a { display: block; color: #333; text-decoration: none; font-size: 1.1rem; margin-bottom: 20px; transition: 0.3s; }
.sidebar-links a:hover { color: black; padding-left: 10px; font-weight: 600; }
.cart-items-container { flex-grow: 1; overflow-y: auto; }
.cart-item { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); padding-bottom: 15px; }
.cart-item img { width: 70px; height: 90px; object-fit: cover; }
.btn-checkout { width: 100%; background: black; color: white; padding: 15px; border: none; font-weight: 700; cursor: pointer; transition: 0.3s; }

/* --- FOOTER --- */
footer { background: #111; color: #ccc; padding: 60px 5% 20px; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; }
.col h3 { color: white; margin-bottom: 20px; font-family: var(--font-heading); }
.col a { display: block; color: #999; text-decoration: none; margin-bottom: 10px; transition: 0.3s; }
.col a:hover { color: white; }
.copyright { text-align: center; border-top: 1px solid #333; padding-top: 20px; font-size: 0.8rem; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .nav-links-desktop { display: none; }
    .hero h1 { font-size: 2.2rem; }
    .hero-btns { flex-direction: column; }
    .sidebar-right { width: 100%; }
    .input-group { flex-direction: column; gap: 10px; }
    .input-group input { width: 100%; }
}