:root{
  --ev-morado:#1a0b42; --ev-morado-2:#2a1170; --ev-azul:#0066cc; --ev-azul-claro:#3b8be0;
  --ev-naranja:#ff9900; --ev-gris:#f4f5f7;
}
*{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
h1,h2,h3,.navbar-brand{ font-family:'Montserrat','Inter',sans-serif; }
body{ color:#2b2b33; background:#fff; }

/* ---------- Navbar ---------- */
.ev-navbar{ background:linear-gradient(90deg,var(--ev-morado),var(--ev-morado-2)); box-shadow:0 2px 14px rgba(0,0,0,.18); }
.ev-navbar .nav-link{ color:rgba(255,255,255,.88); font-weight:500; padding:.4rem .8rem; border-radius:.4rem; }
.ev-navbar .nav-link:hover,.ev-navbar .nav-link.active{ color:#fff; background:rgba(255,255,255,.12); }
.ev-navbar{ padding-top:.4rem; padding-bottom:.4rem; }
.ev-navbar .navbar-brand .ev-logo{ height:52px; width:auto; max-width:190px; object-fit:contain;
  background:#fff; padding:5px 9px; border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
@media (max-width:575.98px){ .ev-navbar .navbar-brand .ev-logo{ height:42px; max-width:150px; } }
.btn-cart{ color:#fff; font-size:1.35rem; line-height:1; padding:.25rem .5rem; }
.btn-cart:hover{ color:var(--ev-naranja); }
.buscador{ width:230px; max-width:100%; }
.buscador .form-control{ border:0; }
.buscador .btn-buscar{ background:var(--ev-naranja); color:#fff; border:0; }
.buscador .btn-buscar:hover{ background:#e88a00; color:#fff; }

/* Menú: offcanvas lateral en móvil, se aplana solo (Bootstrap) en desktop */
@media (max-width:991.98px){
  #menuTienda{ background:var(--ev-morado); color:#fff; width:100vw !important; max-width:100%; height:100dvh; }
  #menuTienda .nav-link{ color:rgba(255,255,255,.9); font-size:1.05rem; padding:.75rem .25rem; border-bottom:1px solid rgba(255,255,255,.08); }
  #menuTienda .nav-link:hover,#menuTienda .nav-link.active{ background:transparent; color:#fff; }
  #menuTienda .dropdown-menu{ background:transparent; border:0; padding-left:1rem; }
  #menuTienda .dropdown-item{ color:rgba(255,255,255,.8); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; text-align:center; overflow:hidden;
  background:radial-gradient(1200px 400px at 20% 0%, rgba(255,153,0,.18), transparent 60%),
             linear-gradient(135deg,var(--ev-morado) 0%,var(--ev-azul) 100%);
  padding:72px 0 84px;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:26px 26px;
}
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-weight:800; font-size:clamp(1.8rem,4.5vw,3rem); letter-spacing:.5px; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.hero p{ font-size:clamp(1rem,2vw,1.25rem); opacity:.95; max-width:620px; margin:.6rem auto 1.4rem; }

/* ---------- Botones ---------- */
.ev-btn{ background:var(--ev-naranja); color:#fff; font-weight:700; border:0; box-shadow:0 4px 14px rgba(255,153,0,.35); }
.ev-btn:hover{ background:#e88a00; color:#fff; }
.ev-btn-ghost{ border:2px solid #fff; color:#fff; font-weight:700; background:transparent; }
.ev-btn-ghost:hover{ background:#fff; color:var(--ev-morado); }

/* ---------- Categorías destacadas ---------- */
.cat-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1rem; }
.cat-item{ text-decoration:none; color:inherit; text-align:center; }
.cat-circle{
  width:84px; height:84px; margin:0 auto .5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  background:var(--ev-gris); color:var(--ev-azul); border:2px solid #e7e9f2; transition:.15s;
}
.cat-item:hover .cat-circle{ background:var(--ev-azul); color:#fff; transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,102,204,.25); }
.cat-item .cat-nombre{ font-weight:600; font-size:.9rem; }

/* ---------- Tarjetas de producto ---------- */
.card-producto{
  height:100%; border:1px solid #eceef4; border-radius:.8rem; overflow:hidden; background:#fff;
  transition:transform .14s, box-shadow .14s; position:relative;
}
.card-producto:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(20,20,50,.14); border-color:#dfe3ef; }
.card-producto .prod-img{ aspect-ratio:1/1; object-fit:contain; background:#fafbfc; width:100%; padding:12px; }
.card-producto .prod-img-ph{ aspect-ratio:1/1; background:#f2f3f8; display:flex; align-items:center; justify-content:center; color:#c7cad8; font-size:2.6rem; }
.card-producto .cuerpo{ padding:.85rem; display:flex; flex-direction:column; gap:.15rem; }
.card-producto .cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:#8b8fa3; }
.card-producto .nombre{ font-weight:600; font-size:.95rem; line-height:1.25; color:#23252f; min-height:2.4em; }
.card-producto .precio{ font-family:'Montserrat',sans-serif; color:var(--ev-azul); font-weight:800; font-size:1.15rem; margin-top:.2rem; }
.card-producto .badge-esq{ position:absolute; top:.6rem; left:.6rem; font-size:.7rem; }
.badge-agotado{ background:#e9ecf2; color:#7b8094; }
.badge-nuevo{ background:var(--ev-naranja); color:#fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed !important; right:20px; bottom:20px; z-index:1035;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff !important;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45); text-decoration:none;
  transition:transform .15s ease;
}
.wa-flotante svg{ width:28px; height:28px; }
.wa-flotante:hover{ color:#fff; transform:scale(1.1); }
@media (max-width:575px){ .wa-flotante{ width:52px; height:52px; right:14px; bottom:14px; } }
@supports (bottom: env(safe-area-inset-bottom)){
  .wa-flotante{ bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* ---------- Footer ---------- */
.ev-footer{ background:#14141c; color:#c5c6d0; }
.ev-footer a{ color:#c5c6d0; text-decoration:none; }
.ev-footer a:hover{ color:#fff; }
.ev-footer p, .ev-footer a{ overflow-wrap:anywhere; word-break:break-word; }
.footer-logo{ height:34px; width:auto; max-width:180px; }

/* ---------- Ajustes responsive móvil ---------- */
/* NADA de overflow-x en html/body: rompe position:fixed y "pierde" el botón
   flotante de WhatsApp en móvil. El desborde horizontal se evita cortando
   palabras largas y limitando anchos, no ocultando el scroll. */
html,body{ max-width:100%; }
body{ overflow-wrap:break-word; }
img, svg, video, canvas, table{ max-width:100%; height:auto; }
.container, .container-fluid{ overflow-x:clip; }   /* corta desborde SIN afectar position:fixed (que cuelga de body) */
.list-group-item{ overflow-wrap:anywhere; word-break:break-word; }
.list-group-item > div{ min-width:0; }

@media (max-width:767.98px){
  .container{ padding-left:15px; padding-right:15px; }
  .ev-footer{ font-size:.9rem; }
  .ev-footer .container{ padding-top:1rem; padding-bottom:1rem; }
  .ev-footer h3{ font-size:.95rem; }
  .section{ padding:1.6rem 0; }
  .section-titulo{ font-size:1.25rem; }
  .hero{ padding:44px 0 52px; }
}

/* ---------- Carrito ---------- */
#cartItems .ci{ display:flex; gap:.6rem; align-items:center; padding:.55rem 0; border-bottom:1px solid #eee; }
#cartItems .ci .n{ flex:1; font-size:.9rem; }

.section{ padding:2.5rem 0; }
.section-titulo{ font-weight:800; font-size:1.5rem; margin-bottom:1.2rem; position:relative; padding-bottom:.4rem; }
.section-titulo::after{ content:""; position:absolute; left:0; bottom:0; width:52px; height:4px; border-radius:2px; background:var(--ev-naranja); }