/* ===== TU CSS ORIGINAL COMPLETO (se mantiene igual) ===== */
:root{
  --primary:#0f1a3a;
  --primary-dark:#080c18;
  --primary-light:#1e3a8a;
  --secondary:#4B5563;
  --accent:#00ffdd;
  --accent-dark:#00c4cc;
  --accent-glow:rgba(0,247,255,0.3);
  --bg:#F9FAFB;
  --text:#111827;
  --text-light:#6B7280;
  --white:#ffffff;
  --shadow:0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover:0 8px 30px rgba(0,0,0,0.12);
  --shadow-glow:0 0 30px rgba(0,247,255,0.15);
  --radius:16px;
  --radius-sm:12px;
  --transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
a{list-style: none; text-decoration: none;}
*{margin:0;padding:0;box-sizing:border-box; scroll-behavior: smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;padding-bottom:85px;}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif;font-weight:700;}

/* ===== ANIMACIONES ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:translateX(0);}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes slideLeft{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes gradientMove{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes glow{0%,100%{box-shadow:0 0 5px var(--accent),0 0 20px rgba(0,247,255,0.2);}50%{box-shadow:0 0 15px var(--accent),0 0 40px rgba(0,247,255,0.4);}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8);}to{opacity:1;transform:scale(1);}}
@keyframes slideUpFade{0%{opacity:0;transform:translateY(25px);}100%{opacity:1;transform:translateY(0);}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes borderGlow{0%,100%{border-color:rgba(0,247,255,0.3);}50%{border-color:rgba(0,247,255,0.8);}}
@keyframes heroTextReveal{0%{opacity:0;transform:translateY(60px);filter:blur(10px);}100%{opacity:1;transform:translateY(0);filter:blur(0);}}
@keyframes heroImageReveal{0%{opacity:0;transform:scale(1.2) translateX(50px);filter:blur(15px);}100%{opacity:1;transform:scale(1) translateX(0);filter:blur(0);}}
@keyframes countUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes modalFade{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}

.animate{opacity:0;}
.animate.visible{animation:fadeInUp 0.7s ease forwards;}
.animate-left{opacity:0;}
.animate-left.visible{animation:fadeInLeft 0.7s ease forwards;}
.animate-right{opacity:0;}
.animate-right.visible{animation:fadeInRight 0.7s ease forwards;}
.animate-scale{opacity:0;}
.animate-scale.visible{animation:scaleIn 0.6s ease forwards;}
.delay-1{animation-delay:0.15s;}.delay-2{animation-delay:0.3s;}.delay-3{animation-delay:0.45s;}.delay-4{animation-delay:0.6s;}.delay-5{animation-delay:0.75s;}

::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:var(--primary-dark);}

/* ===== HEADER ===== */
header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 30px rgba(0,0,0,0.15);transition:var(--transition);}
header.scrolled{background:rgba(15,26,58,0.97);backdrop-filter:blur(20px);}
.header-top{background:rgba(0,0,0,0.25);padding:10px 0;font-size:0.85rem; display: none;}
.header-top .container{display:flex;justify-content:space-between;align-items:center;}
.header-top a{color:var(--accent);text-decoration:none;margin-left:25px;transition:var(--transition);font-weight:500;}
.header-top a:hover{color:var(--white);text-shadow:0 0 10px rgba(0,247,255,0.5);}
.container{max-width:1320px;margin:0 auto;padding:0 24px; width: 100%;}
.header-main{display:flex;justify-content:space-between;align-items:center;padding:16px 0;}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--white);}
.logo-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--primary);font-weight:800;box-shadow:0 0 20px rgba(0,247,255,0.4);transition:var(--transition);}
.logo:hover .logo-icon{transform:rotate(5deg) scale(1.05);box-shadow:0 0 30px rgba(0,247,255,0.6);}
.logo-icon img{width: 50px; height: 50px;}
.logo-text h1{font-size:1.5rem;line-height:1.1;font-family:'Bebas Neue',sans-serif;letter-spacing:1px;}
.logo-text span{font-size:0.75rem;opacity:0.9;font-weight:400;font-family:'Inter',sans-serif;}
nav ul{display:flex;list-style:none;gap:35px;}
nav a{color:var(--white);text-decoration:none;font-weight:500;font-size:0.95rem;position:relative;padding:6px 0;transition:var(--transition);}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2.5px;background:var(--accent);transition:var(--transition);border-radius:2px;}
nav a:hover::after,nav a.active::after{width:100%;}
nav a:hover{color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:20px;}
.search-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--transition);}
.search-btn:hover{background:var(--accent);color:var(--primary);}
.cart-btn{position:relative;background:rgba(255,255,255,0.1);border:2px solid var(--accent);color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:var(--transition);}
.cart-btn:hover{background:var(--accent);color:var(--primary);transform:scale(1.1);box-shadow:0 0 25px rgba(0,247,255,0.5);}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--accent);color:var(--primary);font-size:0.7rem;font-weight:800;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite;}
.mobile-menu-btn{display:none;background:none;border:none;color:var(--white);font-size:1.6rem;cursor:pointer;}

/* ===== SEARCH BAR SECTION (NUEVO) ===== */
.search-section{background:white;padding:20px 0;box-shadow:0 2px 15px rgba(0,0,0,0.08);margin-top:140px;border-bottom:1px solid rgba(0,0,0,0.05);}
.search-container{max-width:600px;margin:0 auto;position:relative;}
.search-container input{width:100%;padding:16px 55px 16px 25px;border:2px solid #e5e7eb;border-radius:50px;font-size:1rem;font-family:'Inter',sans-serif;transition:var(--transition);}
.search-container input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,247,255,0.1);}
.search-container button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--primary);border:none;color:white;width:45px;height:45px;border-radius:50%;cursor:pointer;transition:var(--transition);}
.search-container button:hover{background:var(--accent);color:var(--primary);}
.search-results-count{text-align:center;margin-top:12px;font-size:0.85rem;color:var(--text-light);font-weight:500;}

/* ===== BOTTOM NAV ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(15,26,58,0.96);backdrop-filter:blur(20px);border-top:1px solid rgba(0,247,255,0.2);z-index:1000;padding:12px 0;transition:var(--transition);box-shadow:0 -5px 25px rgba(0,0,0,0.15);}
.bottom-nav-scroll{overflow-x:auto;white-space:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch;display:flex;justify-content:space-around;max-width:1320px;margin:0 auto;padding:0 16px;gap:8px;}
.bottom-nav-scroll::-webkit-scrollbar{height:3px;}
.bottom-nav-item{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border:none;color:rgba(255,255,255,0.7);cursor:pointer;transition:var(--transition);padding:8px 18px;border-radius:40px;gap:6px;min-width:70px;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:500;}
.bottom-nav-item i{font-size:1.3rem;}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--accent);background:rgba(0,247,255,0.12);transform:translateY(-3px);}
@media (max-width:768px){.bottom-nav-item{padding:6px 12px;min-width:60px;font-size:0.68rem;}.bottom-nav-item i{font-size:1.1rem;}}

/* ===== HERO PARALLAX ===== */

.hero-parallax{position:relative;height:100vh;min-height:700px;overflow:hidden;display:flex;align-items:center;}
.hero-bg{position:absolute;inset:0;background:url('/img/valores.jpg') center/cover no-repeat fixed;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(15, 26, 58, 0.336) 0%,rgba(8, 12, 24, 0.267) 50%,rgba(15, 26, 58, 0.342) 100%);backdrop-filter:blur(8px);}
.hero-content{position:relative;z-index:2;width:100%;padding-top:100px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.hero-text h2{font-size:4.2rem;line-height:1.05;margin-bottom:25px;font-weight:800;font-family:'Bebas Neue',sans-serif;letter-spacing:2px;text-shadow:0 4px 30px rgba(0,0,0,0.3);animation:heroTextReveal 1s ease-out forwards;opacity:0;}
.hero-text h2 span{color:var(--accent);text-shadow:0 0 30px rgba(0,247,255,0.4);}
.hero-text p{font-size:1.7rem;opacity:0.95;margin-bottom:40px;max-width:520px;line-height:1.8;font-weight:300;animation:heroTextReveal 1s ease-out 0.3s forwards;opacity:0; color: #F9FAFB;}
.hero-buttons{display:flex;gap:18px;flex-wrap:wrap;animation:heroTextReveal 1s ease-out 0.6s forwards;opacity:0;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;border-radius:50px;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:none;transition:var(--transition);font-family:'Inter',sans-serif;position:relative;overflow:hidden;}
.btn-primary{background:var(--accent);color:var(--primary);box-shadow:0 4px 20px rgba(0,247,255,0.3);}
.btn-primary::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:0.6s;}
.btn-primary:hover::before{left:100%;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,247,255,0.4),0 0 40px rgba(0,247,255,0.2);}
.btn-whatsapp{background:#25D366;color:var(--white);box-shadow:0 4px 20px rgba(37,211,102,0.3);}
.btn-whatsapp:hover{background:#128C7E;transform:translateY(-3px);}
.hero-image{position:relative;text-align:center;animation:heroImageReveal 1.2s ease-out 0.4s forwards;opacity:0;}
.hero-image img{width:90%;max-width:500px;border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,0.4);animation:float 5s ease-in-out infinite;border:3px solid rgba(0,247,255,0.2);}
.hero-badge{position:absolute;top:-15px;right:20px;background:var(--accent);color:var(--primary);padding:10px 24px;border-radius:50px;font-weight:700;font-size:0.85rem;box-shadow:0 10px 30px rgba(0,247,255,0.3);animation:float 3s ease-in-out infinite 0.5s;z-index: 999;}

/* ===== BRANDS ===== */
.brands-section{padding:50px 0;background:var(--white);position:relative;overflow:hidden;}
.brands-section::before,.brands-section::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.brands-section::before{left:0;background:linear-gradient(to right,var(--white),transparent);}
.brands-section::after{right:0;background:linear-gradient(to left,var(--white),transparent);}
.brands-track{display:flex;animation:slideLeft 3s linear infinite;width:max-content;}
.brands-track:hover{animation-play-state:paused;}
.brand-item{flex-shrink:0;width:200px;height:90px;margin:0 25px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--radius-sm);border:2px solid transparent;transition:var(--transition);cursor:pointer;padding:0 20px;}
.brand-item:hover{border-color:var(--accent);transform:scale(1.08) translateY(-3px);box-shadow:var(--shadow-hover);}
.brand-item i{font-size:1.8rem;color:var(--primary);margin-right:10px;}
.brand-item span{font-weight:700;color:var(--text);font-size:1.05rem;font-family:'Inter',sans-serif;}

/* ===== CATEGORIES GRID ===== */
.categories{padding:100px 0;background:var(--bg);}
.section-header{text-align:center;margin-bottom:60px;}
.section-header h2{font-size:2.8rem;color:var(--primary);margin-bottom:12px;font-family:'Playfair Display',serif;}
.section-header p{color:var(--text-light);font-size:1.1rem;max-width:500px;margin:0 auto;font-family:'Inter',sans-serif;}
.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;max-width:1000px;margin:0 auto;}
.category-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition);height:280px;box-shadow:var(--shadow);}
.category-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(0,0,0,0.15);}
.category-card img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.category-card:hover img{transform:scale(1.15);}
.category-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,26,58,0.95) 0%,rgba(15,26,58,0.4) 50%,rgba(15,26,58,0.1) 100%);transition:var(--transition);}
.category-info{position:absolute;bottom:0;left:0;right:0;padding:30px;color:var(--white);transform:translateY(20px);transition:var(--transition);}
.category-card:hover .category-info{transform:translateY(0);}
.category-info h3{font-size:1.6rem;margin-bottom:8px;font-family:'Playfair Display',serif;}
.category-count{display:inline-block;padding:6px 18px;background:rgba(0,247,255,0.15);border:1px solid var(--accent);border-radius:30px;font-size:0.8rem;font-weight:600;color:var(--accent);font-family:'Inter',sans-serif;}
.category-arrow{position:absolute;top:20px;right:20px;width:45px;height:45px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.1rem;opacity:0;transform:translateY(-10px);transition:var(--transition);}
.category-card:hover .category-arrow{opacity:1;transform:translateY(0);}

/* ===== CATEGORY SECTIONS ===== */
.category-section{padding:100px 0;position:relative;}
.category-section.electro{background:linear-gradient(180deg,var(--white) 0%,rgba(15,26,58,0.02) 100%);}
.category-section.herramientas{background:linear-gradient(180deg,rgba(245,158,11,0.02) 0%,var(--white) 100%);}
.category-section.motos{background:linear-gradient(180deg,var(--white) 0%,rgba(239,68,68,0.02) 100%);}
.category-section.tecnologia{background:linear-gradient(180deg,rgba(139,92,246,0.02) 0%,var(--white) 100%);}
.category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;flex-wrap:wrap;gap:20px;}
.category-title{display:flex;align-items:center;gap:18px;}
.category-title-icon{width:65px;height:65px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:var(--white);box-shadow:0 12px 35px rgba(0,0,0,0.2);}
.category-title-text h2{font-size:2.2rem;color:var(--primary);margin:0;font-family:'Playfair Display',serif;}

/* ===== PRODUCT CARDS (MEJORADAS PARA MÓVIL) ===== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;margin-bottom:30px;}
.product-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid rgba(0,0,0,0.04);cursor:pointer;}
.product-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-hover);border-color:var(--accent);}
.product-image{position:relative;height:260px;overflow:hidden;}
.product-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.product-card:hover .product-image img{transform:scale(1.12);}
.product-badge{position:absolute;top:18px;left:18px;padding:8px 18px;border-radius:30px;font-size:0.78rem;font-weight:700;z-index:2;box-shadow:0 4px 15px rgba(0,0,0,0.15);font-family:'Inter',sans-serif;}
.product-badge.oferta{background:linear-gradient(135deg,#EF4444,#DC2626);color:var(--white);}
.product-badge.mas-vendido{background:var(--primary);color:var(--white);}
.product-badge.sin-stock{background:#6B7280;color:var(--white);}
.product-badge.nuevo{background:linear-gradient(135deg,#10B981,#059669);color:var(--white);}
.product-badge.km{background:linear-gradient(135deg,#F59E0B,#D97706);color:var(--white);}
.product-content{padding:28px;}
.product-card h3{font-size:1.15rem;margin-bottom:15px;color:var(--text);font-weight:600;font-family:'Inter',sans-serif;}
.product-price-row{display:flex;align-items:center;gap:12px;margin-bottom:15px;flex-wrap:wrap;}
.product-price{font-size:1.5rem;font-weight:800;color:var(--primary);font-family:'Inter',sans-serif;}
.product-old-price{font-size:1rem;color:var(--text-light);text-decoration:line-through;font-family:'Inter',sans-serif;}
.product-stock{font-size:0.85rem;margin-bottom:20px;display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;}
.product-stock.in{color:#10B981;}
.product-stock.out{color:#EF4444;}
.product-actions{display:flex;gap:10px;}
.btn-add-cart{flex:1;padding:14px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);border:none;border-radius:12px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif;}
.btn-add-cart:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(15,26,58,0.35);}
.btn-add-cart:disabled{background:#9CA3AF;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-wa-product{width:48px;height:48px;border-radius:12px;background:#25D366;color:var(--white);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:var(--transition);}
.btn-wa-product:hover{background:#128C7E;transform:scale(1.05);}

/* ===== FLAP / VER MÁS ===== */
.flap-container{display:flex;justify-content:center;margin:30px 0 20px;}
.flap-button{background:#0f172a;border:none;padding:0.9rem 2rem;border-radius:60px;font-weight:600;font-size:1rem;font-family:'Inter',sans-serif;color:white;display:inline-flex;align-items:center;gap:12px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 8px 18px rgba(0,0,0,0.1);}
.flap-button:hover{background:#2d3a5e;transform:translateY(-3px);}
.flap-icon{transition:transform 0.3s ease;}
.flap-button.opened .flap-icon{transform:rotate(180deg);}
.counter-info{text-align:center;margin-top:0.5rem;font-size:0.8rem;font-weight:500;color:#4a5b7a;background:rgba(0,0,0,0.03);display:inline-block;padding:0.3rem 1.5rem;border-radius:60px;font-family:'Inter',sans-serif;}
.product-card.hidden-by-flap{display:none;}
.product-card.newly-shown{animation:slideUpFade 0.45s cubic-bezier(0.2,0.9,0.4,1.1) forwards;}

/* ===== MODAL DE PRODUCTO (NUEVO) ===== */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:3000;opacity:0;visibility:hidden;transition:var(--transition);display:flex;align-items:center;justify-content:center;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-container{background:var(--white);border-radius:24px;max-width:950px;width:90%;max-height:85vh;overflow-y:auto;position:relative;animation:modalFade 0.3s ease;}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background:rgba(0,0,0,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);z-index:10;}
.modal-close:hover{background:rgba(0,0,0,0.2);}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px;}
.modal-image img{width:100%;border-radius:16px;}
.modal-info h2{font-size:1.6rem;margin-bottom:15px;font-family:'Playfair Display',serif;}
.modal-price{font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:10px;}
.modal-old-price{font-size:1.1rem;color:var(--text-light);text-decoration:line-through;margin-left:12px;}
.modal-discount{display:inline-block;background:#EF4444;color:white;padding:5px 14px;border-radius:25px;font-size:0.8rem;margin-bottom:15px;font-weight:600;}
.modal-description{margin:20px 0;padding:15px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.modal-description p{color:var(--text-light);line-height:1.7;}
.modal-features h4,.modal-payment h4{margin:15px 0 12px;font-size:1.05rem;color:var(--primary);display:flex;align-items:center;gap:8px;}
.modal-features ul,.modal-payment ul{list-style:none;padding:0;}
.modal-features li,.modal-payment li{padding:10px 0;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f0f0f0;}
.modal-features li i,.modal-payment li i{width:22px;color:var(--accent-dark);font-size:0.9rem;}
.modal-actions{display:flex;gap:15px;margin-top:25px;}
.modal-actions .btn{flex:1;text-align:center;justify-content:center;}
@media (max-width:768px){
  .modal-grid{grid-template-columns:1fr;padding:20px;}
  .modal-image{max-height:250px;overflow:hidden;}
  .modal-image img{height:100%;object-fit:cover;}
  .modal-container{width:95%;}
  .modal-info h2{font-size:1.3rem;}
  .modal-price{font-size:1.5rem;}
}

/* ===== MUNDIAL SECTION ===== */
.mundial-section{position:relative;min-height:600px;overflow:hidden;display:flex;justify-content: center; align-items:center;color:var(--white);background:url('/img/mundial.png') center/cover no-repeat fixed;}
.mundial-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(8, 12, 24, 0.548) 0%,rgba(15, 26, 58, 0.466) 100%);}
.mundial-content{position:relative;z-index:2;padding:100px 0;text-align:center;}
.mundial-badge{display:inline-block;padding:10px 30px;background:rgba(0,247,255,0.12);border:1px solid var(--accent);border-radius:50px;font-size:0.9rem;font-weight:600;color:var(--accent);margin-bottom:30px;font-family:'Inter',sans-serif;}
.mundial-content h2{font-size:3.5rem;margin-bottom:20px;font-family:'Playfair Display',serif;}
.mundial-content h2 span{color:var(--accent);}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;max-width:650px;margin:0 auto 60px;}
.countdown-item{background:rgba(255,255,255,0.06);border:1px solid rgba(0,247,255,0.2);border-radius:var(--radius);padding:30px 20px;text-align:center;transition:var(--transition);}
.countdown-item:hover{transform:translateY(-5px);background:rgba(0,247,255,0.08);border-color:var(--accent);}
.countdown-number{font-size:3.5rem;font-weight:800;color:var(--accent);display:block;font-family:'Bebas Neue',sans-serif;}
.countdown-label{font-size:0.9rem;color:rgba(255,255,255,0.7);font-family:'Inter',sans-serif;}

/* ===== FEATURES ===== */
.features{padding:100px 0;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;}
.feature-item{text-align:center;padding:50px 30px;background:rgba(255,255,255,0.04);border-radius:var(--radius);transition:var(--transition);border:1px solid rgba(255,255,255,0.05);}
.feature-item:hover{transform:translateY(-8px);background:rgba(255,255,255,0.08);border-color:rgba(0,247,255,0.2);}
.feature-icon{font-size:2.8rem;margin-bottom:25px;color:var(--accent);}
.feature-item h3{font-size:1.2rem;font-family:'Playfair Display',serif;}

/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 120px 0;
    background: var(--bg);
    overflow-x: hidden;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    object-fit: cover;
}

.about-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--accent);
    border-radius: var(--radius);
    z-index: -1;
    opacity: 0.3;
}

.about-text h2 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
}

.about-text h2 span {
    color: var(--accent-dark);
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.stat-item {
    text-align: center;
    padding: 30px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary);
    display: block;
    font-family: 'Bebas Neue', sans-serif;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
}

/* ===== RESPONSIVE PARA ABOUT ===== */
@media (max-width: 1024px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .about-image {
        max-width: 400px;
    }
    
    .about-text h2 {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .about-text p {
        text-align: center;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 0;
    }
    
    .about-image {
        max-width: 280px;
    }
    
    .about-image::before {
        display: none;
    }
    
    .about-text h2 {
        font-size: 1.8rem;
        text-align: left;
    }
    
    .about-text p {
        text-align: left;
        font-size: 0.9rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 25px;
    }
    
    .stat-item {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: 15px;
    }
    
    .stat-number {
        font-size: 1.8rem;
        min-width: 80px;
    }
    
    .stat-label {
        font-size: 0.8rem;
        flex: 1;
    }
}
/* ===== TESTIMONIALS ===== */
.testimonials{padding:100px 0;background:var(--white);}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;}
.testimonial-card{background:var(--bg);padding:40px;border-radius:var(--radius);transition:var(--transition);border:1px solid rgba(0,0,0,0.04);}
.testimonial-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-hover);border-color:var(--accent);}
.stars{color:#FBBF24;margin-bottom:18px;font-size:1.1rem;}
.testimonial-card p{font-size:1rem;color:var(--text-light);line-height:1.7;margin-bottom:20px;font-family:'Inter',sans-serif;font-style:italic;}
.testimonial-author{display:flex;align-items:center;gap:15px;}
.testimonial-avatar{width:55px;height:55px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent-dark));display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:1.3rem;font-family:'Inter',sans-serif;}
.testimonial-author h4{font-size:1rem;color:var(--text);font-family:'Inter',sans-serif;font-weight:600;}
.testimonial-author span{font-size:0.85rem;color:var(--text-light);font-family:'Inter',sans-serif;}

/* ===== CONTACT SECTION ===== */
.contact-section{padding:100px 0;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
.contact-info h2{font-size:2.8rem;margin-bottom:30px;font-family:'Playfair Display',serif;}
.contact-info h2 span{color:var(--accent);}
.contact-info p{font-size:1.1rem;opacity:0.9;margin-bottom:30px;font-family:'Inter',sans-serif;}
.contact-details{list-style:none;}
.contact-details li{display:flex;align-items:center;gap:18px;margin-bottom:25px;padding:14px 18px;border-radius:14px;transition:var(--transition);}
.contact-details li:hover{background:rgba(255,255,255,0.06);}
.contact-details i{width:55px;height:55px;background:rgba(255,255,255,0.1);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--accent);transition:var(--transition);}
.contact-details li:hover i{background:rgba(0,247,255,0.15);transform:scale(1.05);}
.contact-details span{font-size:1rem;font-family:'Inter',sans-serif;}
.contact-form{background:var(--white);padding:45px;border-radius:var(--radius);color:var(--text);box-shadow:var(--shadow-hover);}
.contact-form h3{font-size:1.5rem;margin-bottom:25px;font-family:'Playfair Display',serif;color:var(--primary);}
.form-group{margin-bottom:20px;}
.form-group input,.form-group textarea{width:100%;padding:14px;border-radius:12px;border:2px solid #e5e7eb;font-family:'Inter',sans-serif;font-size:1rem;transition:var(--transition);outline:none;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,247,255,0.1);}
.form-group textarea{min-height:120px;resize:vertical;}

/* ===== FOOTER ===== */
footer{background:#080c18;color:var(--white);padding:80px 0 25px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px;}
.footer-brand .logo{margin-bottom:20px;}
.footer-brand p{font-size:0.95rem;opacity:0.7;line-height:1.7;font-family:'Inter',sans-serif;}
.footer-column h4{font-size:1.1rem;margin-bottom:20px;color:var(--accent);font-family:'Playfair Display',serif;}
.footer-column ul{list-style:none;}
.footer-column li{margin-bottom:12px;}
.footer-column a{color:rgba(255,255,255,0.7);text-decoration:none;transition:var(--transition);font-family:'Inter',sans-serif;font-size:0.95rem;}
.footer-column a:hover{color:var(--accent);padding-left:5px;}
.footer-social{display:flex;gap:15px;margin-top:20px;}
.footer-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.1rem;transition:var(--transition);}
.footer-social a:hover{background:var(--accent);color:var(--primary);transform:translateY(-3px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:25px;text-align:center;}
.footer-bottom p{font-size:0.85rem;opacity:0.5;font-family:'Inter',sans-serif;}

/* ===== CART SIDEBAR ===== */
.cart-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition);}
.cart-overlay.active{opacity:1;visibility:visible;}
.cart-sidebar{position:fixed;top:0;right:-480px;width:480px;max-width:100%;height:100%;background:var(--white);z-index:2001;transition:var(--transition);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,0.2);}
.cart-sidebar.active{right:0;}
.cart-header{padding:28px;background:var(--primary);color:white;display:flex;justify-content:space-between;align-items:center;}
.cart-header h3{font-size:1.3rem;font-family:'Playfair Display',serif;}
.close-cart{background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;transition:var(--transition);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.close-cart:hover{background:rgba(255,255,255,0.1);}
.cart-items{flex:1;overflow-y:auto;padding:20px;}
.cart-empty{text-align:center;padding:60px 20px;color:var(--text-light);font-family:'Inter',sans-serif;}
.cart-empty i{font-size:3rem;margin-bottom:15px;color:var(--text-light);opacity:0.5;}
.cart-item{display:flex;align-items:center;gap:15px;padding:15px;border-bottom:1px solid #eee;transition:var(--transition);}
.cart-item:hover{background:rgba(0,247,255,0.03);}
.cart-item-img{width:60px;height:60px;border-radius:10px;object-fit:cover;}
.cart-item-info{flex:1;}
.cart-item-info h4{font-size:0.95rem;font-weight:600;font-family:'Inter',sans-serif;margin-bottom:4px;}
.cart-item-info span{font-size:0.9rem;color:var(--primary);font-weight:700;font-family:'Inter',sans-serif;}
.cart-item-remove{background:none;border:none;color:#EF4444;cursor:pointer;font-size:1rem;transition:var(--transition);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.cart-item-remove:hover{background:rgba(239,68,68,0.1);}
.cart-footer{padding:25px;border-top:1px solid #eee;background:var(--bg);}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:700;margin-bottom:20px;font-family:'Inter',sans-serif;}
.cart-total span{color:var(--primary);font-size:1.4rem;}
.btn-checkout{width:100%;padding:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;}
.btn-checkout:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(15,26,58,0.35);}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--text);color:white;padding:14px 28px;border-radius:50px;z-index:5000;opacity:0;transition:var(--transition);display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast i{color:var(--accent);}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero-grid,.about-content,.contact-content{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-text h2{font-size:3rem;}
  .categories-grid{grid-template-columns:1fr;}
  .about-image::before{display:none;}
}
@media(max-width:768px){
  .mobile-menu-btn{display:block;}
  nav{position:fixed;top:0;right:-100%;width:85%;height:100vh;background:var(--primary);z-index:999;transition:var(--transition);padding:100px 30px;}
  nav.active{right:0;}
  nav ul{flex-direction:column;gap:25px;}
  .products-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .countdown-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .hero-text h2{font-size:2.5rem;}
  .mundial-content h2{font-size:2.2rem;}
  .about-text h2{font-size:2.2rem;}
  .section-header h2{font-size:2rem;}
  /* Mejoras para tarjetas en móvil */
  .product-image{height:200px;}
  .product-content{padding:18px;}
  .product-card h3{font-size:0.95rem;margin-bottom:10px;}
  .product-price{font-size:1.2rem;}
  .btn-add-cart{padding:10px 15px;font-size:0.8rem;}
  .btn-wa-product{width:40px;height:40px;font-size:1rem;}
}

/* ===== PWA SECTION STYLES ===== */
.pwa-section {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.pwa-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 247, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.pwa-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.pwa-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(0, 247, 255, 0.12);
  border: 1px solid var(--accent);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 25px;
  font-family: 'Inter', sans-serif;
  animation: glow 3s ease-in-out infinite;
}

.pwa-text h2 {
  font-size: 3.2rem;
  color: var(--white);
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
  line-height: 1.1;
}

.pwa-text h2 span {
  color: var(--accent);
  text-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
}

.pwa-text > p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 40px;
  font-family: 'Inter', sans-serif;
}

.pwa-features-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.pwa-feature-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: var(--transition);
}

.pwa-feature-item:hover {
  background: rgba(0, 247, 255, 0.06);
  border-color: rgba(0, 247, 255, 0.2);
  transform: translateX(8px);
}

.pwa-feature-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(0, 247, 255, 0.2), rgba(0, 247, 255, 0.05));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.pwa-feature-text h4 {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
}

.pwa-feature-text span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}

.pwa-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.btn-install {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--primary);
  padding: 18px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 247, 255, 0.3), 0 0 40px rgba(0, 247, 255, 0.1);
}

.btn-install:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 247, 255, 0.4), 0 0 60px rgba(0, 247, 255, 0.2);
}

.pwa-note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-note i {
  color: var(--accent);
}

.install-instructions {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
}

.install-instructions p {
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.browser-steps {
  display: flex;
  gap: 20px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.step i {
  color: var(--accent);
  font-size: 1.1rem;
}

/* ===== PHONE MOCKUP ===== */
.pwa-mockup {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-frame {
  width: 300px;
  height: 620px;
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f23 100%);
  border-radius: 45px;
  padding: 12px;
  box-shadow: 
    0 50px 100px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #0f0f23;
  border-radius: 0 0 20px 20px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.phone-icons {
  display: flex;
  gap: 6px;
  font-size: 0.7rem;
}

.phone-app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 15px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.phone-logo {
  width: 32px;
  height: 32px;
  
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
}

.phone-logo img{
    width: 32px;
}

.phone-app-header span {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}

.phone-app-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: var(--bg);
}

.phone-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--white);
  border-radius: 12px;
  margin-bottom: 15px;
  color: var(--text-light);
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.phone-categories {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.phone-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--white);
  border-radius: 12px;
  min-width: 60px;
  font-size: 0.7rem;
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.phone-cat.active {
  background: var(--primary);
  color: var(--white);
}

.phone-cat i {
  font-size: 1.1rem;
}

.phone-products {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone-product {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.phone-prod-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  flex-shrink: 0;
}

.phone-prod-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.phone-prod-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.phone-prod-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
}

.phone-nav {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  background: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 -15px -15px;
}

.phone-nav-item {
  color: var(--text-light);
  font-size: 1.1rem;
  transition: var(--transition);
}

.phone-nav-item.active {
  color: var(--accent);
}

.phone-reflection {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 200px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  border-radius: 35px 35px 0 0;
  pointer-events: none;
}

.phone-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  filter: blur(10px);
}

.floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-el {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.3rem;
  box-shadow: 0 10px 30px rgba(0, 247, 255, 0.3);
  animation: float 4s ease-in-out infinite;
}

.el-1 {
  top: 10%;
  right: 5%;
  animation-delay: 0s;
}

.el-2 {
  bottom: 20%;
  left: 0%;
  animation-delay: 1.5s;
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.el-3 {
  top: 40%;
  right: -5%;
  animation-delay: 0.8s;
  width: 45px;
  height: 45px;
  font-size: 1.1rem;
}

/* ===== PWA RESPONSIVE ===== */
@media (max-width: 1024px) {
  .pwa-content {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .pwa-text {
    text-align: center;
  }
  
  .pwa-text h2 {
    font-size: 2.5rem;
  }
  
  .pwa-features-list {
    max-width: 500px;
    margin: 0 auto 40px;
  }
  
  .pwa-buttons {
    align-items: center;
  }
  
  .pwa-mockup {
    order: -1;
  }
  
  .phone-frame {
    width: 260px;
    height: 540px;
  }
}

@media (max-width: 768px) {
  .pwa-section {
    padding: 80px 0;
  }
  
  .pwa-text h2 {
    font-size: 2rem;
  }
  
  .browser-steps {
    flex-direction: column;
    gap: 10px;
  }
  
  .phone-frame {
    width: 220px;
    height: 460px;
    border-radius: 35px;
  }
}
/* ===== SUGERENCIAS DE BÚSQUEDA ===== */
.search-suggestions {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  /*top: 42%;*/
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f0f0f0;
}

.search-suggestion-item:hover {
  background: #f5f5f5;
}

.search-suggestion-img {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
  background: #eee;
}

.search-suggestion-info {
  flex: 1;
}

.search-suggestion-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.search-suggestion-price {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 700;
}

.search-suggestion-stock {
  font-size: 0.7rem;
  color: #10B981;
}

.search-container {
  position: relative;
}

.search-container button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  border: none;
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

.search-container button:hover {
  background: #EF4444;
}

.close-search-btn {
  background: rgba(0,0,0,0.05);
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.close-search-btn:hover {
  background: rgba(0,0,0,0.1);
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.search-header h4 {
  font-size: 0.9rem;
  color: var(--text-light);
}

.clear-search {
  background: none;
  border: none;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 20px;
  transition: all 0.2s;
}

.clear-search:hover {
  background: rgba(0,247,255,0.1);
}

/* ===== UBICACIÓN SECTION ===== */
.ubicacion-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--white) 100%);
}
.ubicacion-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.ubicacion-info h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}
.ubicacion-info h2 span {
  color: var(--accent-dark);
}
.ubicacion-info p {
  color: var(--text-light);
  margin-bottom: 25px;
  line-height: 1.7;
}
.ubicacion-detalles {
  list-style: none;
  margin-top: 30px;
}
.ubicacion-detalles li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ubicacion-detalles li i {
  width: 45px;
  height: 45px;
  background: var(--primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
}
.ubicacion-detalles li span {
  font-size: 1rem;
  color: var(--text);
}
.ubicacion-mapa {
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  border: 3px solid var(--accent);
}
.ubicacion-mapa #map {
  height: 100%;
  width: 100%;
}
.horarios {
  margin-top: 25px;
  padding: 20px;
  background: rgba(0,247,255,0.05);
  border-radius: 16px;
  border-left: 4px solid var(--accent);
}
.horarios h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--primary);
}
.horarios p {
  margin: 5px 0;
  font-size: 0.9rem;
}
.btn-ruta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 25px;
  background: var(--primary);
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}
.btn-ruta:hover {
  background: var(--accent);
  color: var(--primary);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .ubicacion-content {
    grid-template-columns: 1fr;
  }
  .ubicacion-mapa {
    height: 300px;
  }
}

/* ===== TESTIMONIOS SLIDER ===== */
.testimonios-slider {
  padding: 100px 0;
  background: var(--white);
  overflow: hidden;
}
.slider-header {
  text-align: center;
  margin-bottom: 50px;
}
.slider-header h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 15px;
}
.slider-header p {
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}
.slider-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.testimonios-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 20px 10px;
  -webkit-overflow-scrolling: touch;
}
.testimonios-track::-webkit-scrollbar {
  height: 6px;
}
.testimonios-track::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
.testimonios-track::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}
.testimonio-card-slider {
  flex: 0 0 350px;
  background: var(--bg);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid rgba(0,0,0,0.04);
}
.testimonio-card-slider:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}
.testimonio-stars {
  color: #FBBF24;
  margin-bottom: 20px;
  font-size: 1rem;
}
.testimonio-texto {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 25px;
}
.testimonio-autor {
  display: flex;
  align-items: center;
  gap: 15px;
}
.testimonio-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}
.testimonio-autor-info h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}
.testimonio-autor-info span {
  font-size: 0.8rem;
  color: var(--text-light);
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.slider-btn:hover {
  background: var(--accent);
  color: var(--primary);
}
.slider-btn-prev {
  left: 0;
}
.slider-btn-next {
  right: 0;
}
.slider-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 35px;
}
.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: var(--transition);
}
.slider-dot.active {
  width: 28px;
  border-radius: 10px;
  background: var(--accent);
}
.slider-dot:hover {
  background: var(--accent-dark);
}
.autoplay-toggle {
  text-align: center;
  margin-top: 20px;
}
.autoplay-btn {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  transition: var(--transition);
}
.autoplay-btn:hover {
  background: rgba(0,247,255,0.1);
  color: var(--accent);
}
@media (max-width: 768px) {
  .testimonio-card-slider {
    flex: 0 0 280px;
    padding: 20px;
  }
  .slider-container {
    padding: 0 20px;
  }
  .slider-btn {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
}

/* ===== CHATBOT FLOATING BUTTON ===== */
.chatbot-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
}

.chatbot-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 247, 255, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1001;
}

.chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 247, 255, 0.6);
}

.chatbot-toggle img {
    width: 65px;
    height: 65px;
    transition: all 0.3s ease;
}

.chatbot-toggle.pulse {
    animation: pulse-chat 2s infinite;
}

@keyframes pulse-chat {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 247, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0);
    }
}

/* Chat Window */
.chat-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 90vh;
    max-height: calc(100vh - 80px);
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0);
    opacity: 0;
    transform-origin: bottom right;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
}

.chat-window.open {
    transform: scale(1);
    opacity: 1;
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-icon {
    width: 40px;
    height: 40px;
    
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--primary);
}

.chat-header-icon img{
  width: 40px;
}

.chat-header-text h4 {
    font-size: 1rem;
    margin: 0;
}

.chat-header-text span {
    font-size: 0.7rem;
    opacity: 0.8;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.15);
    padding: 5px 10px;
    border-radius: 20px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    animation: pulse-green 1.5s infinite;
}

.status-dot.closed {
    background: #EF4444;
    animation: none;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}

.chat-close:hover {
    transform: scale(1.1);
}

/* Chat Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    gap: 10px;
    animation: fadeInUp 0.3s ease;
}

.message-bot {
    justify-content: flex-start;
}

.message-user {
    justify-content: flex-end;
}

.message-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--accent-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.message-avatar img{
  width: 32px;
}

.message-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.message-bot .message-bubble {
    background: white;
    color: var(--text);
    border-top-left-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.message-user .message-bubble {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-top-right-radius: 4px;
}

.message-time {
    font-size: 0.65rem;
    color: var(--text-light);
    margin-top: 4px;
    display: block;
}
/* Quick Questions - Scrollable horizontal */
.quick-questions {
    padding: 12px 15px;
    background: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.quick-title {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quick-title i {
    color: var(--accent);
    font-size: 0.8rem;
}

.quick-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.quick-buttons::-webkit-scrollbar {
    height: 4px;
}

.quick-buttons::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.quick-buttons::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}

.quick-btn {
    background: #f0f0f0;
    border: none;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quick-btn i {
    font-size: 0.8rem;
}

.quick-btn:hover {
    background: var(--accent);
    color: var(--primary);
    transform: translateY(-2px);
}

/* Flechas de scroll (opcional) */
.quick-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transition: all 0.2s;
    z-index: 5;
}

.quick-questions:hover .quick-scroll-btn {
    opacity: 0.7;
}

.quick-scroll-btn:hover {
    opacity: 1 !important;
    background: var(--accent);
    color: var(--primary);
}

.quick-scroll-left {
    left: 5px;
}

.quick-scroll-right {
    right: 5px;
}

/* Posición relativa para contenedor de botones */
.quick-buttons-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    .quick-btn {
        padding: 7px 14px;
        font-size: 0.7rem;
    }
    
    .quick-scroll-btn {
        display: none;
    }
}
/* Chat Input */
.chat-input-container {
    display: flex;
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
    gap: 10px;
}

.chat-input-container input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 30px;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s;
}

.chat-input-container input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,247,255,0.1);
}

.chat-input-container button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-input-container button:hover {
    background: var(--accent);
    color: var(--primary);
    transform: scale(1.05);
}

/* Emergency Modal (Horario) */
.emergency-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.emergency-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.emergency-modal {
    background: white;
    border-radius: 28px;
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.emergency-modal-overlay.active .emergency-modal {
    transform: scale(1);
}

.emergency-modal-header {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    padding: 25px;
    text-align: center;
}

.emergency-modal-header i {
    font-size: 3rem;
    margin-bottom: 10px;
}

.emergency-modal-header h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.emergency-modal-body {
    padding: 25px;
    text-align: center;
}

.emergency-hours {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 15px;
    margin: 15px 0;
    text-align: left;
}

.emergency-hours p {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.emergency-hours .open {
    color: #10B981;
}

.emergency-hours .closed {
    color: #EF4444;
}

.wp-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.2s;
}

.wp-contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,211,102,0.3);
}

.emergency-modal-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-light);
    margin-top: 15px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 18px;
    border-top-left-radius: 4px;
    width: fit-content;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

/* Responsive */
@media (max-width: 768px) {
    .chat-window {
        width: calc(100vw - 40px);
        right: 20px;
        bottom: 140px;
        height: 500px;
    }
    
    .chatbot-toggle {
        width: 55px;
        height: 55px;
       
    }
    
    .chatbot-toggle img {
        width: 30px;
        height: 30px;
    }
}

/* ===== PULSO PARA EL CHATBOT ===== */
.chatbot-toggle {
    position: relative;
}

.chatbot-toggle.pulse {
    animation: pulse-chatbot 2s infinite;
}

@keyframes pulse-chatbot {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(0, 247, 255, 0.3);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0);
        transform: scale(1);
    }
}

/* Color del botón cuando está cerrado */
.chatbot-toggle.closed-status {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0.3);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        transform: scale(1);
    }
}

.chatbot-toggle.closed-status:hover {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
}

/* Color normal cuando está abierto */
.chatbot-toggle {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

/* Efecto de pulso suave al cargar la página */
.chatbot-toggle.initial-pulse {
    animation: pulse-chatbot 3s ease-in-out;
}

/* ===== SPLASH SCREEN ===== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-screen.hide {
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    text-align: center;
    animation: splashFadeIn 0.8s ease;
}

@keyframes splashFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.splash-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    animation: splashLogoFloat 2s ease-in-out infinite;
}

@keyframes splashLogoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.splash-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.splash-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(0,247,255,0.5);
}

.splash-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 30px;
}

.splash-loader {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;
}

.splash-loader .circle {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0,247,255,0.1);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: splashSpin 1s linear infinite;
}

@keyframes splashSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.splash-loader .pulse-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: splashPulse 1.5s ease-in-out infinite;
}

@keyframes splashPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.5;
    }
}

.splash-progress {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    margin-top: 30px;
    overflow: hidden;
}

.splash-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.splash-progress-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .splash-logo {
        width: 90px;
        height: 90px;
    }
    .splash-title {
        font-size: 1.8rem;
    }
    .splash-subtitle {
        font-size: 0.8rem;
    }
}


/* ===== FIX PARA MÓVIL - ANCHO COMPLETO ===== */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

* {
    max-width: 100%;
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Asegurar que todas las secciones ocupen el ancho completo */
section, footer, header, .bottom-nav {
    width: 100%;
    /*overflow-x: hidden;*/
}

/* Corrección para la grilla de productos en móvil */
@media (max-width: 768px) {
    
    .container {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
    }
    
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .hero-text h2 {
        font-size: 2rem !important;
    }
    
    .hero-text p {
        font-size: 1rem !important;
    }
    
    .hero-image img {
        width: 80% !important;
    }
    
    .countdown-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    .countdown-item {
        padding: 15px !important;
    }
    
    .countdown-number {
        font-size: 2rem !important;
    }
    
    .category-card {
        height: 220px !important;
    }
    
    .category-info h3 {
        font-size: 1.3rem !important;
    }
    
    .about-content {
        grid-template-columns: 1fr !important;
    }
    
    .contact-content {
        grid-template-columns: 1fr !important;
    }
    
    .ubicacion-content {
        grid-template-columns: 1fr !important;
    }
    
    .pwa-content {
        grid-template-columns: 1fr !important;
    }
    
    .pwa-mockup {
        order: -1;
    }
    
    .testimonios-track {
        gap: 15px;
    }
    
    .testimonio-card-slider {
        flex: 0 0 260px !important;
        padding: 20px !important;
    }
    
    /* Ajustes para el header en móvil */
    .header-main {
        flex-wrap: wrap;
    }
    
    .logo-text h1 {
        font-size: 1.1rem !important;
    }
    
    .logo-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .logo-icon img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .header-actions {
        gap: 10px !important;
    }
    
    .search-btn, .cart-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }
    
    /* Ajustes para el modal */
    .modal-grid {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }
    
    .modal-price {
        font-size: 1.5rem !important;
    }
    
    /* Ajustes para el chat */
    .chat-window {
        width: calc(100vw - 30px) !important;
        right: 15px !important;
        bottom: 100px !important;
        height: 70vh !important;
    }
    
    .chatbot-toggle {
        width: 55px !important;
        height: 55px !important;
    }
    
    .chatbot-toggle img {
        width: 50px !important;
        height: 50px !important;
    }
    .logo-text{
        display: none;
    }
}