/* BrillaOro - Estilos personalizados */
* { box-sizing: border-box; }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.fade-in { animation: fadeIn 0.4s ease-out; }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* Producto card hover */
.producto-card { transition: all 0.3s ease; }
.producto-card:hover { transform: translateY(-4px); }
.producto-card:hover .producto-img { transform: scale(1.05); }
.producto-img { transition: transform 0.4s ease; }

/* Badge */
.badge-oferta {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}
@keyframes pulse2x1 { 0%,100%{ transform: scale(1); box-shadow:0 0 0 0 rgba(220,38,38,.5);} 50%{ transform: scale(1.06); box-shadow:0 0 0 6px rgba(220,38,38,0);} }
.badge-2x1 {
    background: linear-gradient(135deg, #b91c1c, #ef4444 55%, #f59e0b);
    animation: pulse2x1 1.8s ease-in-out infinite;
    letter-spacing: .3px;
}

/* Inputs custom */
.input-gold:focus {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.1);
    outline: none;
}

/* Boton gold */
.btn-gold {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: white;
    transition: all 0.2s;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #b45309, #d97706);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(217,119,6,0.3);
}
.btn-gold:active { transform: translateY(0); }

/* Estrellas */
.stars { color: #f59e0b; }
.stars .empty { color: #d1d5db; }

/* Toast notificaciones */
#toast-container {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-left: 4px solid #d97706;
    font-size: 0.875rem;
    min-width: 260px;
    max-width: 360px;
    animation: fadeIn 0.3s ease;
}
.toast.success { border-color: #10b981; }
.toast.error   { border-color: #ef4444; }
.toast.info    { border-color: #3b82f6; }

/* Tabla admin */
.table-admin th { background: #1a1a1a; color: #fcd34d; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.table-admin tr:hover td { background: #fffbeb; }

/* Sidebar admin */
.admin-nav a.active { background: linear-gradient(135deg,#d97706,#f59e0b); color: white; }
.admin-nav a { transition: all 0.2s; }
.admin-nav a:hover:not(.active) { background: #1a1a1a; }

/* Estado badges */
.estado-pendiente    { background:#fef3c7; color:#92400e; }
.estado-pagado       { background:#d1fae5; color:#065f46; }
.estado-procesando   { background:#dbeafe; color:#1e40af; }
.estado-enviado      { background:#ede9fe; color:#4c1d95; }
.estado-entregado    { background:#d1fae5; color:#065f46; }
.estado-cancelado    { background:#fee2e2; color:#991b1b; }
.estado-reembolsado  { background:#f3f4f6; color:#374151; }

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d97706; border-radius: 3px; }

/* Quantity input */
.qty-input { text-align: center; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Responsive tabla */
@media (max-width: 768px) {
    .table-responsive { overflow-x: auto; }
    .hide-mobile { display: none; }
}

/* ============================================================
   ANIMACIONES PREMIUM - BrillaOro
   ============================================================ */

/* Hero animado tipo video (gradiente cálido en movimiento) */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.18) translate(-2%, -3%); }
}
@keyframes glowPulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: .75; transform: scale(1.25); }
}
@keyframes floatUp {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: .9; }
    90%  { opacity: .6; }
    100% { transform: translateY(-340px) scale(.3); opacity: 0; }
}
@keyframes shimmerText {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes sweep {
    0%   { left: -150%; }
    100% { left: 150%; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Fondo cálido animado (reemplaza el negro plano #0f0f0f apagado) */
.hero-anim {
    background: linear-gradient(125deg, #20160a, #3b260c, #56370f, #2a1c0a, #1c1207);
    background-size: 320% 320%;
    animation: gradientShift 16s ease infinite;
}
.section-warm {
    background: linear-gradient(135deg, #1c1206 0%, #2c1d0b 50%, #1c1206 100%);
}
.kenburns { animation: kenburns 20s ease-in-out infinite alternate; }
.hero-glow {
    position: absolute; border-radius: 9999px; filter: blur(70px);
    background: radial-gradient(circle, rgba(245,158,11,.85), transparent 70%);
    animation: glowPulse 7s ease-in-out infinite;
    pointer-events: none;
}

/* Barra promo marquee */
.promo-bar {
    background-color: #b91c1c; /* fallback solido visible siempre */
    background-image: linear-gradient(90deg,#7f1010,#b91c1c,#d97706,#b91c1c,#7f1010);
    background-size: 200% 100%;
    animation: gradientShift 8s linear infinite;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    position: relative; z-index: 60;
}
@keyframes marquee { 0%{ transform: translateX(0);} 100%{ transform: translateX(-50%);} }
.promo-track { width: max-content; animation: marquee 28s linear infinite; will-change: transform; }
.promo-bar:hover .promo-track { animation-play-state: paused; }

/* Header oscuro elegante */
.header-dark {
    background-color: #1c1206;
    background-image: linear-gradient(120deg,#20160a,#2e1f0c,#1c1206);
    background-size: 200% 100%;
    animation: gradientShift 18s ease infinite;
}
/* Subrayado dorado animado en el nav */
.nav-link { position: relative; }
.nav-link::after {
    content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0;
    background:linear-gradient(90deg,#d97706,#fbbf24); border-radius:2px; transition:width .3s ease;
}
.nav-link:hover::after { width:100%; }

/* Texto con brillo dorado animado */
.text-shimmer {
    background: linear-gradient(90deg, #d97706, #fde68a, #f59e0b, #fff7e0, #d97706);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmerText 4s linear infinite;
}

/* Partículas flotantes (chispas de oro) */
#hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
    position: absolute; bottom: -12px; border-radius: 50%;
    background: radial-gradient(circle, #fde68a 0%, rgba(253,230,138,.4) 40%, transparent 70%);
    animation: floatUp linear infinite;
}

/* Reveal al hacer scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* Brillo que cruza el botón */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
}
.btn-gold:hover::after { animation: sweep .85s ease; }

/* Tarjeta de producto: glow dorado al pasar el mouse */
.producto-card:hover { box-shadow: 0 18px 40px -12px rgba(217,119,6,.35); }

/* Tarjeta de categoría: brillo en hover */
.cat-card { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.cat-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 20px 45px -15px rgba(217,119,6,.5); }
.cat-card .cat-img { transition: transform .6s ease, opacity .4s ease; }
.cat-card:hover .cat-img { transform: scale(1.12); }

/* Iconos beneficios con flotación */
.float-y { animation: floatY 3.5s ease-in-out infinite; }

/* Anillo decorativo girando */
.spin-slow { animation: spinSlow 22s linear infinite; }

/* Subrayado animado de títulos de sección */
.section-title { position: relative; display: inline-block; }
.section-title::after {
    content: ''; position: absolute; left: 50%; bottom: -10px; width: 0; height: 3px;
    background: linear-gradient(90deg, #d97706, #fbbf24); border-radius: 3px;
    transform: translateX(-50%); transition: width .6s ease;
}
.section-title.visible::after, .reveal.visible .section-title::after { width: 64px; }

/* Estrellas con leve pulso */
@keyframes twinkle { 0%,100%{opacity:1} 50%{opacity:.55} }
.stars-anim { animation: twinkle 2.5s ease-in-out infinite; }

/* Destello que cruza la foto del producto al pasar el mouse */
.producto-card .producto-img { position: relative; }
.producto-card a > .producto-img + .gleam, .producto-card .img-wrap { position:relative; }
.img-wrap { position: relative; overflow: hidden; }
.img-wrap::after {
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: none; pointer-events:none;
}
.producto-card:hover .img-wrap::after { animation: sweep .9s ease; }

/* Botón agregar: rebote del icono al pasar el mouse */
@keyframes bagBounce { 0%,100%{ transform: translateY(0);} 40%{ transform: translateY(-4px);} 70%{ transform: translateY(-1px);} }
.producto-card .btn-gold:hover i { animation: bagBounce .5s ease; }

/* Precio en oferta con leve latido */
@keyframes pricePulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }
.precio-oferta { animation: pricePulse 2.2s ease-in-out infinite; display:inline-block; }

/* Aparición con escala para tarjetas */
.reveal.zoom-in { transform: translateY(34px) scale(.96); }
.reveal.zoom-in.visible { transform: none; }

/* Emoji/acentos del badge top con balanceo */
@keyframes wiggle { 0%,100%{ transform: rotate(-3deg);} 50%{ transform: rotate(3deg);} }
.wiggle { display:inline-block; animation: wiggle 1.4s ease-in-out infinite; }

/* Brillo pulsante en links activos del menú */
@keyframes navGlow { 0%,100%{ color:#d97706;} 50%{ color:#f59e0b;} }

/* Respeta usuarios que prefieren menos movimiento */
/* ===== Tanda extra de animaciones ===== */
html { scroll-behavior: smooth; }

/* WhatsApp: anillo pulsante */
@keyframes waPulse { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{ box-shadow:0 0 0 18px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
.wa-float { animation: waPulse 2s infinite; }

/* Badge del carrito hace "pop" al actualizar */
@keyframes badgeBump { 0%{transform:scale(1);} 30%{transform:scale(1.6);} 60%{transform:scale(.8);} 100%{transform:scale(1);} }
.cart-badge.bump { animation: badgeBump .5s ease; }

/* Indicador de scroll en el hero */
@keyframes scrollDown { 0%{transform:translateY(0);opacity:1;} 50%{transform:translateY(9px);opacity:.4;} 100%{transform:translateY(0);opacity:1;} }
.scroll-ind i { animation: scrollDown 1.6s ease-in-out infinite; }

/* Botón con glow pulsante */
@keyframes btnGlow { 0%,100%{ box-shadow:0 4px 15px rgba(217,119,6,.3);} 50%{ box-shadow:0 8px 30px rgba(245,158,11,.7);} }
.btn-pulse { animation: btnGlow 2.2s ease-in-out infinite; }

/* Tarjeta producto: escala extra al hover */
.producto-card:hover { transform: translateY(-6px) scale(1.015); }

/* Chispas decorativas flotantes */
@keyframes twinkleFloat { 0%,100%{ opacity:.15; transform: translateY(0) scale(1);} 50%{ opacity:.9; transform: translateY(-10px) scale(1.35);} }
.spark { position:absolute; color:#fbbf24; pointer-events:none; animation: twinkleFloat 4s ease-in-out infinite; }

/* Icono de beneficio gira al pasar el mouse */
.benefit-icon { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.benefit-icon:hover { transform: rotate(360deg) scale(1.12); }

/* Brillo que recorre el logo del header cada cierto tiempo */
@keyframes logoSheen { 0%,80%,100%{ filter: drop-shadow(0 0 0 rgba(251,191,36,0)); } 88%{ filter: drop-shadow(0 0 10px rgba(251,191,36,.8)); } }
.logo-sheen { animation: logoSheen 6s ease-in-out infinite; }

/* Entrada con rebote suave para badges */
@keyframes popIn { 0%{ transform:scale(0); } 70%{ transform:scale(1.15);} 100%{ transform:scale(1);} }
.pop-in { animation: popIn .5s cubic-bezier(.2,1.4,.4,1) both; }

/* Flotación lenta para la tarjeta destacada */
@keyframes floatCard { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }
.float-card { animation: floatCard 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero-anim, .kenburns, .hero-glow, .particle, .text-shimmer, .float-y, .spin-slow, .stars-anim,
    .promo-bar, .promo-track, .badge-2x1, .precio-oferta, .wiggle, .wa-float, .scroll-ind i,
    .btn-pulse, .spark, .logo-sheen, .pop-in, .float-card, .nav-link::after { animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}