/* ===== VARIABLES DE COLORES - FÁCILMENTE PERSONALIZABLES ===== */ :root { /* Colores principales */ --primary: #E91E63; /* Fucsia principal */ --primary-dark: #AD1457; /* Fucsia oscuro */ --primary-light: #F48FB1; /* Fucsia claro */ /* Colores neutros */ --black: #000000; /* Negro */ --gray-900: #212121; /* Casi negro */ --gray-800: #424242; /* Gris muy oscuro */ --gray-700: #616161; /* Gris oscuro */ --gray-600: #757575; /* Gris medio */ --gray-500: #9E9E9E; /* Gris */ --gray-400: #BDBDBD; /* Gris claro */ --gray-300: #E0E0E0; /* Gris muy claro */ --gray-200: #EEEEEE; /* Gris extra claro */ --gray-100: #F5F5F5; /* Gris claro de fondo */ --white: #FFFFFF; /* Blanco */ /* Colores funcionales */ --success: #4CAF50; /* Verde para éxito */ --warning: #FF9800; /* Naranja para advertencias */ --error: #F44336; /* Rojo para errores */ --info: #2196F3; /* Azul para información */ /* Sombras */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.05); --shadow-xl: 0 20px 40px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.05); /* Resplandor para el logo - MÁS INTENSO Y PERMANENTE */ --logo-glow: 0 0 15px rgba(233, 30, 99, 0.8), 0 0 30px rgba(233, 30, 99, 0.6), 0 0 45px rgba(233, 30, 99, 0.4); /* Bordes redondeados */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Espaciado */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; } /* ===== ESTILOS GENERALES ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--gray-100); color: var(--gray-900); line-height: 1.6; } .container { max-width: 1400px; margin: 0 auto; padding: var(--space-md); } /* ===== HEADER ===== */ .header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: var(--space-lg) 0; margin-bottom: var(--space-xl); box-shadow: var(--shadow-md); } .header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); } .logo-container { display: flex; align-items: center; gap: var(--space-md); } .logo { width: 70px; /* Tamaño aumentado */ height: 70px; /* Tamaño aumentado */ background-color: var(--white); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.7rem; /* Tamaño de fuente aumentado */ color: var(--primary); box-shadow: var(--logo-glow); /* Resplandor permanente */ position: relative; /* Animación sutil de pulsación */ animation: pulse 3s infinite ease-in-out; } /* Animación de pulsación sutil */ @keyframes pulse { 0% { box-shadow: var(--logo-glow); } 50% { box-shadow: 0 0 20px rgba(233, 30, 99, 0.9), 0 0 40px rgba(233, 30, 99, 0.7), 0 0 60px rgba(233, 30, 99, 0.5); } 100% { box-shadow: var(--logo-glow); } } .brand-text h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: var(--space-xs); } .brand-text p { font-size: 0.9rem; opacity: 0.9; } .social-icons { display: flex; gap: var(--space-sm); } .social-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: all 0.3s ease; } .social-icon:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } /* ===== FILTROS Y CONTROLES ===== */ .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); flex-wrap: wrap; gap: var(--space-md); background-color: var(--white); padding: var(--space-md); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .filter-group { display: flex; align-items: center; gap: var(--space-sm); } .filter-label { font-weight: 500; color: var(--gray-700); } .filter-select { padding: var(--space-sm) var(--space-md); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background-color: var(--white); font-family: inherit; font-size: 0.9rem; color: var(--gray-800); cursor: pointer; transition: all 0.3s ease; } .filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1); } .cart-toggle { display: flex; align-items: center; gap: var(--space-sm); background-color: var(--primary); color: var(--white); border: none; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .cart-toggle:hover { background-color: var(--primary-dark); } .cart-badge { background-color: var(--white); color: var(--primary); border-radius: var(--radius-full); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; } /* ===== LAYOUT PRINCIPAL ===== */ .main-layout { display: grid; grid-template-columns: 1fr 350px; gap: var(--space-xl); } @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } } /* ===== PRODUCTOS ===== */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); } .product-card { background-color: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; } .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .product-image { width: 100%; height: 220px; object-fit: contain; background-color: var(--gray-100); padding: var(--space-md); } .product-info { padding: var(--space-md); display: flex; flex-direction: column; flex-grow: 1; } .product-category { font-size: 0.8rem; color: var(--gray-600); margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 0.5px; } .product-title { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--gray-900); line-height: 1.4; } .product-price { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin-bottom: var(--space-md); } .product-actions { margin-top: auto; display: flex; gap: var(--space-sm); } .add-to-cart { flex-grow: 1; background-color: var(--primary); color: var(--white); border: none; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: var(--space-xs); } .add-to-cart:hover { background-color: var(--primary-dark); } /* ===== CARRITO ===== */ .cart-sidebar { background-color: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg); height: fit-content; position: sticky; top: var(--space-md); } .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--gray-200); } .cart-title { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); } .close-cart { background: none; border: none; font-size: 1.2rem; color: var(--gray-600); cursor: pointer; display: none; } .cart-items { list-style: none; margin-bottom: var(--space-lg); } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--gray-200); } .cart-item-info { flex-grow: 1; } .cart-item-name { font-weight: 500; margin-bottom: var(--space-xs); } .cart-item-price { color: var(--gray-600); font-size: 0.9rem; } .cart-item-quantity { display: flex; align-items: center; gap: var(--space-xs); } .quantity-btn { width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--gray-300); background-color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .quantity-btn:hover { background-color: var(--gray-100); } .quantity-value { min-width: 30px; text-align: center; font-weight: 500; } .remove-item { color: var(--error); background: none; border: none; cursor: pointer; margin-left: var(--space-sm); font-size: 1.1rem; } .cart-summary { border-top: 2px solid var(--gray-200); padding-top: var(--space-md); } .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); font-weight: 700; font-size: 1.2rem; } .checkout-btn { width: 100%; background-color: var(--success); color: var(--white); border: none; padding: var(--space-md); border-radius: var(--radius-md); font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); } .checkout-btn:hover { background-color: #3d8b40; } .empty-cart { text-align: center; padding: var(--space-xl) 0; color: var(--gray-600); } .empty-cart i { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.5; } /* ===== PAGINACIÓN ===== */ .pagination { display: flex; justify-content: center; margin-top: var(--space-xl); gap: var(--space-xs); } .pagination-item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--gray-300); background-color: var(--white); color: var(--gray-700); text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .pagination-item:hover { border-color: var(--primary); color: var(--primary); } .pagination-item.active { background-color: var(--primary); border-color: var(--primary); color: var(--white); } /* ===== FOOTER ===== */ .footer { background-color: var(--gray-900); color: var(--white); padding: var(--space-xl) 0; margin-top: var(--space-2xl); } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); } .footer-logo { font-size: 1.5rem; font-weight: 700; color: var(--white); } .footer-links { display: flex; gap: var(--space-lg); } .footer-link { color: var(--gray-400); text-decoration: none; transition: color 0.3s ease; } .footer-link:hover { color: var(--white); } .footer-social { display: flex; gap: var(--space-sm); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .header-content { flex-direction: column; text-align: center; } .logo-container { flex-direction: column; } .controls { flex-direction: column; align-items: stretch; } .filter-group { width: 100%; } .filter-select { width: 100%; } .product-grid { grid-template-columns: 1fr; } .close-cart { display: block; } .cart-sidebar { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; z-index: 1000; border-radius: 0; transition: right 0.3s ease; overflow-y: auto; } .cart-sidebar.open { right: 0; } .footer-content { flex-direction: column; text-align: center; } .footer-links { flex-direction: column; gap: var(--space-sm); } } /* ===== OVERLAY ===== */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } .overlay.active { display: block; } .product-type-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; } .product-type-badge.original { background-color: #e3f2fd; color: #1976d2; } .product-type-badge.personalizado { background-color: #f3e5f5; color: #7b1fa2; } .search-form { display: flex; align-items: center; position: relative; } .search-input { padding: 10px 15px; border: 1px solid #ddd; border-radius: 25px 0 0 25px; width: 250px; font-size: 14px; transition: all 0.3s ease; border-right: none; } .search-input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); } .search-btn { padding: 10px 18px; border: 1px solid #ddd; border-left: none; border-radius: 0 25px 25px 0; background: #ff0080; cursor: pointer; color: #fff; font-size: 16px; transition: background 0.3s ease, transform 0.2s ease; } .search-btn:hover { background: #ff0080; transform: scale(1.05); } .clear-search { position: absolute; right: 50px; color: #999; text-decoration: none; padding: 5px; font-size: 14px; transition: color 0.3s ease; } .clear-search:hover { color: #333; }