:root{
  --bg-900:#0a0a0d;
  --bg-800:#12131a;
  --bg-700:#1c1d27;
  --text-100:#f5f7fa;
  --text-400:#a8b2c3;
  --line:rgba(255,255,255,.08);
  --radius:14px;
  --transition:.25s ease;
  --font-title: 'Audiowide','Orbitron',sans-serif;
  --font-main:'Inter', sans-serif;
}
*{box-sizing:border-box;max-width:100%;}
html,body{margin:0;padding:0;background:var(--bg-900);color:var(--text-100);font-family:var(--font-main);overflow-x:hidden;}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px;}
a{text-decoration:none;color:var(--accent-blue);}
img{max-width:100%;display:block;height:auto;}

.only-desktop{display:flex;}
.only-mob{display:none;}

.header{background:var(--bg-800);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.head-flex{display:flex;align-items:center;gap:16px;padding:10px 0;}
.site-title{font-family:var(--font-title);font-size:26px;color:var(--accent-orange);line-height:1;}
.top-nav{display:flex;gap:22px;margin-left:auto;}
.top-nav .nav-link{font-size:13px;letter-spacing:.5px;color:var(--text-100);position:relative;padding:6px 0;}
.top-nav .nav-link:hover{color:var(--accent-orange);}
.top-nav .nav-link::after{content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--accent-orange);transition:var(--transition);}
.top-nav .nav-link:hover::after{width:100%;}
.currency-box-pc{margin:0 16px;}
.currency-box-pc select{
  background:var(--bg-700);
  color:var(--text-100);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
}
.header-actions{display:flex;gap:12px;align-items:center;}
.cart-btn{background:var(--bg-700);border:1px solid var(--line);color:var(--text-100);padding:8px 12px;border-radius:10px;cursor:pointer;font-size:14px;position:relative;transition:var(--transition);}
.cart-btn:hover{box-shadow:0 0 8px var(--accent-orange);transform:translateY(-2px);}
.badge{background:var(--accent-orange);color:#000;font-size:10px;border-radius:9px;padding:2px 5px;position:absolute;top:-6px;right:-10px;}
.btn{padding:12px 22px;border-radius:var(--radius);border:0;cursor:pointer;font-weight:600;transition:var(--transition);font-family:var(--font-main);}
.btn-primary{background:var(--accent-orange);color:#000;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 12px var(--accent-orange);}
.btn-secondary{background:var(--accent-blue);color:#fff;}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 0 12px var(--accent-blue);}
.btn-finalizar{padding:8px 14px;font-size:12px;border-radius:10px;}

.mobile-top{background:var(--bg-800);border-bottom:1px solid var(--line);padding:8px 0;}
.mtop-flex{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.site-title-m{font-family:var(--font-title);font-size:18px;color:var(--accent-orange);}

/* === NUEVA ESTRUCTURA DEL HERO === */
.hero-image {
  width: 100%;
  height: 35vh;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-800);
  border-bottom: 1px solid var(--line);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  aspect-ratio: 5/1;
}

.hero{
  background: linear-gradient(135deg, var(--bg-900) 0%, var(--bg-800) 100%);
  padding: 60px 0;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title{
  font-family:var(--font-title);
  font-size:42px;
  margin:0 0 10px;
  color: var(--title-color);
}

.hero-sub{
  color:var(--text-400);
  margin:0 0 24px;
  font-size:16px;
}

/* Selector de moneda en hero */
.currency-hero-selector {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.currency-hero-selector label {
  color: var(--text-100);
  font-size: 16px;
  font-weight: 500;
}

.currency-hero-selector select {
  padding: 12px 20px;
  border: 2px solid var(--accent-blue);
  border-radius: 8px;
  background: var(--bg-800);
  color: var(--text-100);
  font-size: 16px;
  min-width: 200px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.currency-hero-selector select:hover {
  border-color: var(--accent-orange);
  background: var(--bg-700);
}

.currency-hero-selector select:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}

.section-title{font-family:var(--font-title);font-size:24px;margin:30px 0 14px;}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;padding-bottom:120px;}
.card-prod{background:var(--bg-800);border:1px solid var(--line);border-radius:var(--radius);padding:12px;transition:var(--transition);display:flex;flex-direction:column;}
.card-prod:hover{transform:translateY(-3px);box-shadow:0 0 12px var(--accent-blue);}
.card-prod img{border-radius:10px;height:140px;object-fit:cover;}
.prod-title{font-size:15px;margin:10px 0 6px;font-family:var(--font-title);line-height:1.2;word-break:break-word;}
.prices{font-size:13px;margin-bottom:10px;}
.prices .old{text-decoration:line-through;color:var(--text-400);margin-right:4px;}
.prices .new{color:var(--accent-orange);font-weight:600;}
.btn-add{margin-top:auto;width:100%;}

.footer{background:var(--bg-800);border-top:1px solid var(--line);padding:30px 0;font-size:13px;color:var(--text-400);text-align:center;}

.menu-flotante{position:fixed;bottom:0;left:0;width:100%;background:rgba(18,19,26,.92);backdrop-filter:blur(6px);display:flex;justify-content:space-around;align-items:center;padding:8px 0;z-index:60;border-top:1px solid var(--line);}
.mf-btn{background:none;border:0;color:var(--text-100);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;position:relative;}

.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:90;}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--bg-800);border:1px solid var(--line);border-radius:var(--radius);z-index:100;max-height:90vh;overflow:auto;opacity:0;transition:var(--transition);width:90%;max-width:420px;}
.modal.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.modal-content{padding:18px;position:relative;}
.close{position:absolute;right:12px;top:12px;background:none;border:0;color:var(--text-400);font-size:18px;cursor:pointer;}
.lista-carrito{max-height:40vh;overflow:auto;margin-bottom:12px;}
.row-car{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;}
.row-car.total{border-top:2px solid var(--accent-orange);border-bottom:none;font-weight:600;font-size:14px;margin-top:8px;}
.btn-mini{background:var(--accent-orange);border:0;border-radius:8px;color:#000;font-size:12px;cursor:pointer;padding:4px 6px;}
.cart-form{margin-top:14px;}
.cart-form input{width:100%;padding:12px;margin-bottom:10px;font-size:14px;border-radius:8px;border:1px solid var(--line);background:var(--bg-700);color:var(--text-100);}
.cart-form label{display:block;font-size:12px;color:var(--text-400);margin:6px 0 4px;}
.qr-img{width:220px;margin:10px auto;border-radius:8px;border:1px solid var(--line);}
.pedido-code{font-family:var(--font-title);font-size:14px;text-align:center;margin:6px 0 12px;color:var(--accent-blue);}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg-700);padding:10px 18px;border-radius:var(--radius);border:1px solid var(--line);font-size:13px;opacity:0;transition:var(--transition);z-index:120;}
.toast.show{opacity:1;transform:translate(-50%, -10px);}
.oculto{display:none !important;}

/* Mobile overrides */
@media (max-width:767px){
  .only-desktop{display:none !important;}
  .only-mob{display:block;}
  .header{position:static !important;top:auto !important;}
  .site-title-m{font-size:20px;}
  
  /* Hero mobile */
  .hero-image {
    height: 30vh;
    min-height: 200px;
  }
  
  .hero {
    padding: 40px 0;
  }
  
  .hero-title {
    font-size: 28px;
  }
  
  .currency-hero-selector {
    margin-top: 20px;
  }
  
  .currency-hero-selector select {
    min-width: 180px;
    font-size: 14px;
    padding: 10px 16px;
  }
  
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .card-prod img{height:110px;}
  .prod-title{
    font-size:13px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.15;
  }
  .prices{font-size:12px;line-height:1.1;}
  .btn{padding:10px 16px;font-size:13px;}
  .modal{width:calc(100% - 32px);}
}

.site-title,
.site-title-m,
.hero-title,
.section-title,
.pedido-code{
  font-family: var(--font-title);
  color: var(--accent-orange);
}

/* === Anti-overflow global fixes === */
html, body{ overflow-x:hidden !important; }
[class*="wrap"], .modal, .menu-flotante, .mobile-top{ max-width:100% !important; }
img, video, canvas{ max-width:100%; height:auto; }
.prod-title, .site-title, .site-title-m, .hero-title{ word-break:break-word; hyphens:auto; }

@media (max-width:1024px){
  .only-desktop{ display:none !important; }
  .only-mob{ display:block !important; }
  .header{ position:static !important; top:auto !important; }
}

/* ==== Barra inferior móvil SOLO mobile/tablet ==== */
.menu-flotante{display:none;}
@media (max-width:1024px){
  .menu-flotante{
    display:flex !important;
    position:fixed;
    bottom:0; left:0; right:0;
    width:100%;
    justify-content:space-around;
    align-items:center;
    flex-wrap:nowrap;
    gap:0;
    background:rgba(18,19,26,.92);
    backdrop-filter:blur(6px);
    border-top:1px solid var(--line);
    z-index:60;
    padding:6px 0 calc(env(safe-area-inset-bottom) + 6px);
  }
  body{padding-bottom:78px;}
}
@media (min-width:1025px){
  .menu-flotante{display:none !important;}
}
.mf-btn{
  flex:1 1 33.33%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border:0;
  background:none;
  color:var(--text-100);
  font-size:11px;
  line-height:1.1;
  gap:2px;
  position:relative;
}
.mf-btn .icon{font-size:20px;line-height:1;}
.mf-btn .badge{
  position:absolute;
  top:0;
  right:22%;
  font-size:10px;
  padding:2px 5px;
}

/* Estilos dinámicos de tema */
.site-title,
.site-title-m,
.hero-title,
.section-title,
.pedido-code{
  font-family: var(--font-title);
  color: var(--title-color);
}
.prices .new{ color: var(--price-new); }
.prices .old{ color: var(--price-old); }
.btn-primary{
  background: var(--btn1-bg);
  color: var(--btn1-text);
}
.btn-secondary{
  background: var(--btn2-bg);
  color: var(--btn2-text);
}