/* Shared styles for public pages (index, catalog, categories, product)
   - Centraliza header/footer, cards, cart UI, animations, marquee, stars, buttons
   - Editar aquí para propagar cambios a todas las páginas públicas
*/

:root { --accent: #6b46c1; --accent-2: #9f7aea; }

/* Basic layout + announcement */
body { font-family: 'Cormorant Garamond', serif; background-color: #f4e7db; color: #3a3a3a; }
.announcement-bar { background-color: #212121; color: #ffffff; text-align: center; padding: 0.85rem 1rem; font-size: 1.05rem; letter-spacing: 0.08em; font-weight: 500; }
.header { background-color: #f4e7db; position: sticky; top: 0; z-index: 50; width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.header-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.25rem 2rem; border-bottom: 1px solid #e1d6c8; }
.header__logo-image { max-height: 120px; display:block; background: transparent; box-shadow:none; border-radius:8px; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.header__logo-image:hover { transform: translateY(-8px) scale(1.08); box-shadow:0 16px 32px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08); filter: brightness(1.08) contrast(1.05) saturate(1.05); }
.header__logo-image::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.6s cubic-bezier(0.4,0,0.2,1); z-index:1; border-radius:8px; pointer-events:none; }
.header__logo-image:hover::before { left:100%; }
.header__icons { display:flex; justify-content:flex-end; gap:1.25rem; }
.header__nav { display:flex; gap:2rem; align-items:center; }
.header__nav a { color: #3a3a3a; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; text-decoration:none; position:relative; transition: color 0.22s ease; }
.header__nav a::after { content: ''; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background-color: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 260ms cubic-bezier(.2,.9,.2,1); }
.header__nav a:hover::after, .header__nav a.active::after { transform: scaleX(1); }
.header__nav a:hover { color: #111; }
.mobile-menu-btn { display:none; }
@media (max-width:768px){ .header-main { grid-template-columns: 1fr auto 1fr; padding:1rem; gap:0.5rem; } .header__nav { display:none; position:absolute; top:100%; left:0; right:0; background:#f4e7db; flex-direction:column; padding:1rem; box-shadow:0 4px 6px rgba(0,0,0,0.1); border-top:1px solid #e1d6c8; z-index:100; } .header__nav.active { display:flex; } .header__nav a { padding:1rem 0; border-bottom:1px solid rgba(58,58,58,0.1); width:100%; text-align:center; } .header__nav a:last-child { border-bottom:none; } .mobile-menu-btn { display:block; } .header__logo-image { max-height:80px; max-width:150px; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; } .header__icons { gap:0.75rem; } .announcement-bar { font-size:0.8rem; padding:0.5rem 0.75rem; letter-spacing:0.03em; } }
@media (max-width:480px){ .header-main { padding:0.75rem; } .header__logo-image { max-height:60px; max-width:120px; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; } .header__icons { gap:0.5rem; } .announcement-bar { font-size:0.75rem; padding:0.4rem 0.5rem; letter-spacing:normal; } }

/* Footer links underline effect */
.footer { background-color: #f4e7db; }
.footer a { position: relative; color: inherit; text-decoration: none; transition: color 180ms ease; }
.footer a::after { content: ''; position: absolute; left:0; bottom:-2px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 200ms ease; }
.footer a:hover::after { transform: scaleX(1); } .footer a:hover { color: #111; }

/* Collection / Category cards */
.collection-card, .category-card { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); border-radius:16px; overflow:hidden; background: linear-gradient(135deg,#ffffff 0%, #fdf8f3 100%); box-shadow:0 4px 16px rgba(0,0,0,0.08); position:relative; padding:4px; }
.collection-card:hover, .category-card:hover { transform: translateY(-8px); box-shadow:0 16px 32px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08); }
.collection-card img, .category-card img { width:100%; height:auto; border-radius:12px; aspect-ratio:1/1; object-fit:cover; transition: all 0.5s cubic-bezier(0.4,0,0.2,1); filter: brightness(1.02) contrast(1.02); }
.collection-card:hover img, .category-card:hover img { transform: scale(1.08); filter: brightness(1.08) contrast(1.05) saturate(1.05); }
.collection-card::before, .category-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.6s cubic-bezier(0.4,0,0.2,1); z-index:1; border-radius:12px; pointer-events:none; }
.collection-card:hover::before, .category-card:hover::before { left:100%; }

/* Product card (catalog style) */
.product-card { background:#ffffff; border-radius:1.1rem; padding:1rem; box-shadow:0 8px 20px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:0.75rem; transition: all 0.3s ease; border:1px solid rgba(216,201,193,0.2); position:relative; overflow:hidden; }
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); transform: scaleX(0); transition: transform 0.3s ease; }
.product-card:hover::before { transform: scaleX(1); }
.product-card:hover { transform: translateY(-8px); box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border-color: rgba(107,70,193,0.3); }
.product-image-wrap { position:relative; overflow:hidden; border-radius:16px; padding:8px; background: linear-gradient(135deg,#ffffff 0%, #fdf8f3 100%); aspect-ratio:1/1; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.product-card:hover .product-image-wrap { background: linear-gradient(135deg,#fdf8f3 0%, #fefcfb 100%); transform: translateY(-4px) scale(1.02); box-shadow:0 12px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08); }
.product-image { width:100%; height:100%; object-fit:cover; border-radius:12px; transition: all 0.5s cubic-bezier(0.4,0,0.2,1); filter: brightness(1.02) contrast(1.02); }
.product-image.hover-image { position:absolute; inset:0; opacity:0; filter: brightness(1.05) contrast(1.05) saturate(1.05); }
.product-card:hover .product-image.hover-image { opacity:1; transform:scale(1.05); filter: brightness(1.1) contrast(1.08) saturate(1.1); }
.product-image-wrap::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition:left 0.6s cubic-bezier(0.4,0,0.2,1); z-index:2; border-radius:12px; }
.product-card:hover .product-image-wrap::before { left:100%; }
.product-card-body { display:flex; flex-direction:column; gap:0.25rem; }
.product-title { font-size:1.05rem; font-weight:600; transition: color 0.3s ease; }
.product-card:hover .product-title { color: var(--accent); }
.price { font-size:1rem; color:#3a3a3a; font-weight:500; transition: all 0.3s ease; }
.product-card:hover .price { color: var(--accent); font-weight:600; transform: scale(1.05); }
.product-action-btn { border:1px solid #d8c9c1; background:#fdf4ef; color:#3a3a3a; border-radius:999px; padding:0.65rem 1rem; font-weight:500; transition: all 0.2s ease; }
.product-action-btn:hover { background:#3a3a3a; color:#ffffff; border-color:#3a3a3a; }

/* Product Offer Ribbon */
.product-offer-ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.35);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Price wrapper for offer display */
.price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.price.price--original {
    text-decoration: line-through;
    color: #9ca3af !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    transform: none !important;
}
.price.price--offer {
    color: #d92d20 !important;
    font-weight: 700 !important;
}

/* Marquee */
.marquee { overflow:hidden; position:relative; }
.marquee-content { display:flex; width:fit-content; animation: marquee 25s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Image fade-in animation */
@keyframes imageFadeIn { from { opacity:0; transform: scale(0.95); } to { opacity:1; transform: scale(1); } }
.collection-card img, .product-image { animation: imageFadeIn 0.6s ease-out; }

/* Falling stars (shared) */
.stars-container { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; overflow:hidden; }
.star { position:absolute; color:#D4AF37; font-size:12px; opacity:0.6; animation: fall linear infinite; user-select:none; }
.star:nth-child(odd) { color:#FFD700; opacity:0.4; }
.star:nth-child(3n) { color:#B8860B; opacity:0.5; }
.star.large { font-size:18px; opacity:0.7; }
.star.medium { font-size:14px; opacity:0.5; }
.star.small { font-size:10px; opacity:0.4; }
@keyframes fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform: translateY(100vh) rotate(360deg); opacity:0; } }

/* Cart styles + helpers */
.cart-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index:999; opacity:0; visibility:hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.cart-sidebar { position: fixed; top:0; right:-100%; width:100%; max-width:450px; height:100%; background-color:#fdf4ef; z-index:1000; transition: right 0.4s ease-in-out; display:flex; flex-direction:column; }
body.cart-open .cart-overlay { opacity:1; visibility:visible; } body.cart-open .cart-sidebar { right:0; }
.cart-header { padding:1rem 1.5rem; border-bottom:1px solid #e5ddd7; }
.cart-body { flex-grow:1; overflow-y:auto; padding:1.5rem; }
.cart-footer { padding:1.5rem; border-top:1px solid #e5ddd7; background-color:#f3ebe6; }
.shipping-progress-bar { background-color:#e5ddd7; border-radius:99px; height:12px; position: relative; overflow: visible; }
.shipping-progress-bar-inner { background: linear-gradient(90deg, #ef4444 0%, #f97316 50%, #eab308 75%, #22c55e 100%); height:100%; border-radius:99px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: visible; }
.shipping-progress-bar-inner::after { content: '💎'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 18px; z-index: 5; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); line-height: 1; }
.cart-item-new { animation: slideInFromRight 0.5s ease-out; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.quantity-pulse { animation: pulse 0.3s ease; }
.cart-notification-toast { position: fixed; top:20px; right:20px; background: linear-gradient(135deg,#10b981 0%,#059669 100%); color:white; padding:1rem 1.5rem; border-radius:0.75rem; box-shadow:0 10px 25px rgba(0,0,0,0.2); z-index:10000; transform: translateX(100%); opacity:0; transition: all 0.3s ease; font-weight:500; max-width:300px; }
.cart-notification-toast.show { transform: translateX(0); opacity:1; }
.btn-whatsapp { width:100%; background: linear-gradient(135deg,#25d366 0%,#128c7e 100%); color:white; border:none; border-radius:0.75rem; padding:1rem 1.5rem; font-weight:600; font-size:1rem; cursor:pointer; transition: all 0.3s ease; box-shadow:0 4px 12px rgba(37,211,102,0.3); display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-whatsapp:hover { background: linear-gradient(135deg,#128c7e 0%,#075e54 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.4); }
.btn-whatsapp:disabled { background:#9ca3af; cursor:not-allowed; transform:none; box-shadow:none; }

/* utility */
.rounded-full { border-radius: 9999px; }

/* Footer social icons glow effects (matching top social section) */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    position: relative;
}
.footer-social-link:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 0 15px rgba(107,70,193,0.35), 0 0 30px rgba(107,70,193,0.15);
    background: rgba(255,255,255,0.9);
}
.footer-social-link:hover .fa-facebook-f { color: #1877f2; }
.footer-social-link:hover .fa-instagram { color: #e4405f; }
.footer-social-link:hover .fa-tiktok { color: #000; }
.footer-social-link::after { display: none !important; }

/* Insignia card blob/organic shapes */
.insignia-card {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
}
.insignia-item:nth-child(2n) .insignia-card {
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}
.insignia-item:nth-child(3n) .insignia-card {
    border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
}
.insignia-item:nth-child(4n) .insignia-card {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}
.insignia-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.insignia-card img {
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.insignia-card:hover img {
    transform: scale(1.08);
}
/* Insignia item wrapper */
.insignia-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.insignia-item .insignia-card {
    width: 100%;
}
.insignia-info {
    padding: 0.4rem 0.15rem 0;
    width: 100%;
}
.insignia-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a3a3a;
    text-decoration: none;
    line-height: 1.25;
    margin-bottom: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insignia-name:hover {
    color: #b8860b;
}
.insignia-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.3rem;
}
.insignia-buy-btn {
    display: inline-block;
    border: 1px solid #d8c9c1;
    background: #fdf4ef;
    color: #3a3a3a;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.insignia-buy-btn:hover {
    background: #3a3a3a;
    color: #ffffff;
    border-color: #3a3a3a;
}
@media (max-width: 640px) {
    .insignia-name { font-size: 0.68rem; }
    .insignia-price { font-size: 0.68rem; }
    .insignia-buy-btn { padding: 0.35rem 0.55rem; font-size: 0.68rem; }
}

/* Reviews Carousel */
.reviews-section { position: relative; }
.reviews-carousel { position: relative; overflow: hidden; padding: 0 40px; }
.reviews-track { display: flex; gap: 1.5rem; transition: transform 0.5s ease; }
.review-card { min-width: 300px; max-width: 350px; flex-shrink: 0; background: #ffffff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid rgba(216,201,193,0.3); }
.review-stars { color: #f59e0b; font-size: 1.2rem; margin-bottom: 0.75rem; letter-spacing: 2px; }
.review-text { font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: 1rem; font-style: italic; }
.review-author { display: flex; flex-direction: column; gap: 0.15rem; }
.review-name { font-weight: 600; color: #3a3a3a; font-size: 0.95rem; }
.review-location { font-size: 0.8rem; color: #999; }
.reviews-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #ffffff; border: 1px solid #e1d6c8; color: #3a3a3a; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); line-height: 1; }
.reviews-arrow:hover { background: #3a3a3a; color: #fff; border-color: #3a3a3a; }
.reviews-arrow-left { left: 0; }
.reviews-arrow-right { right: 0; }
@media (max-width: 768px) { .review-card { min-width: 260px; max-width: 280px; } .reviews-carousel { padding: 0 30px; } .reviews-section h2 { font-size: 1.3rem; } .reviews-section p { font-size: 0.85rem; } }
@media (max-width: 480px) { .review-card { min-width: 220px; max-width: 250px; padding: 1rem; } .review-text { font-size: 0.85rem; } .reviews-carousel { padding: 0 24px; } .reviews-arrow { width: 28px; height: 28px; font-size: 1.2rem; } }

/* Mobile product cards */
@media (max-width: 768px) { .product-card { padding: 0.5rem; } .product-title { font-size: 0.9rem; } .price { font-size: 0.85rem; } .product-action-btn { padding: 0.5rem 0.75rem; font-size: 0.85rem; } .product-image-wrap { padding: 4px; } }
@media (max-width: 480px) { .product-title { font-size: 0.8rem; } .price { font-size: 0.8rem; } .product-action-btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; } }

/* Mobile cart sidebar */
@media (max-width: 480px) { .cart-sidebar { max-width: 100%; } .cart-header { padding: 0.75rem 1rem; } .cart-body { padding: 1rem; } .cart-footer { padding: 1rem; } .cart-notification-toast { top: 10px; right: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; max-width: 250px; } }

/* Mobile collection/category cards */
@media (max-width: 480px) { .collection-card, .category-card { border-radius: 10px; padding: 3px; } .collection-card img, .category-card img { border-radius: 8px; } }

/* Mobile footer */
@media (max-width: 768px) { .footer { padding-left: 1rem !important; padding-right: 1rem !important; } }
@media (max-width: 480px) { .footer { font-size: 0.85rem; } }