* { padding:0; margin:0; outline:0; }
body {
	background:#fff;
	font-family: Arial, sans-serif;
	font-size:14px;
	line-height:1.6;
	color:#000;
}
input, textarea, select { font-family: Arial, sans-serif; font-size:14px; color:#000; }
textarea { overflow:auto;}

a img { border:0; }

a { color:#890000; text-decoration: none; cursor:pointer; }
a:hover { color:#000; }

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

h3 { font-size:18px; line-height:1.4; color:#000; text-transform: uppercase; }

h1#logo { float:left; }
h1#logo a{ display:inline-block; font-size:28px; line-height:1; font-weight:800; letter-spacing:1px; color:#ecb319; text-transform:uppercase; text-indent:0; background:none; height:auto; padding:14px 0; }
h1#logo a:hover{ color:#ecb319; }

#navigation { float:right; white-space:nowrap; }
#navigation ul{ list-style-type: none; padding-top:30px;}
#navigation ul li{ float:left; display:inline; border-right:solid 1px #5f5f5f; padding-right:8px; margin-right:8px;}
#navigation ul li.last{ border-right:0; padding-right:0; margin-right:0;}
#navigation ul li a{ color:#fff;}
#navigation ul li a:hover,
#navigation ul li a.active { color:#ecb319; }


.shell { max-width:980px; width:100%; margin:0 auto; padding:0 16px; }

#top { background:#000; }
#header { height:auto; min-height:61px; }

#slider { width:980px; height:418px; position:relative; overflow:hidden; }
#slider-holder { width:980px; height:418px; position:relative; overflow:hidden; }
#slider-holder ul{ width:980px; height:418px; position:relative; overflow:hidden; list-style-type: none;}
#slider-holder .jcarousel-clip{ width:980px; height:418px; position:relative; overflow:hidden; }

#slider-holder ul li{ width:980px; height:418px; position:relative; overflow:hidden; float:left; display:inline; }
#slider-nav a{ position:absolute; top:180px; font-size:0; line-height:0; z-index:2; width:58px; height:58px; text-indent: -4000px;}
#slider-nav a.prev{ background:url(images/prev.gif); left:0;}
#slider-nav a.next{ background:url(images/next.gif); right:0;}


#main { width:100%; background:url(images/main.gif) repeat-x 0 0;}

.options { height:47px; white-space:nowrap; padding-top:3px;}
.options .search{ float:left; padding:6px 0 0 0; height:auto; margin-right:12px;}
.options .search .field{ float:left; display:flex; align-items:center; width:auto; height:36px; background:#fff; border:1px solid #cfcfcf; border-radius:6px; padding:0 10px; }
.options .search .field input{ width:220px; border:0; background:transparent; color:#000; font-weight: normal; }
.options .search .field input::placeholder{ color:#666; opacity:1; }
.search-submit{ float:left; font-size:14px; line-height:1; padding:8px 12px; height:auto; background:#ecb319; color:#000; text-indent: 0; border:1px solid #d4a61b; border-radius:6px; margin-left:9px; cursor:pointer; position:relative; top:1px; margin-right:13px; font-weight:700; }
.search-submit:hover{ filter:brightness(.98); }

.options a { color:#000; text-decoration: underline;}
.options a:hover { color:#890000; text-decoration: none;}
.options span.left { padding:10px 0 0 0;}
.options span.more-links { margin-left:2px;}
.options span.more-links a{ margin-left:9px;}

.cart { float:left; position:relative; top:2px; }
.cart strong{ float:left; width:95px; height:36px; background:url(images/cart-price.gif); text-align: right; font-size:20px; color:#701616; line-height:36px; padding:0 7px 0 5px;}
.cart-ico{ float:left; width:47px; height:36px; background:url(images/cart.gif) no-repeat 0 0; font-size:0; line-height:0; text-indent: -4000px; position:relative;}
.cart-count{ position:absolute; top:-6px; right:-6px; background:#ff4136; color:#fff; font-weight:bold; font-size:11px; line-height:1; padding:3px 6px; border-radius:10px; }

#content { padding-top:20px; }

.tabs { height:36px; }
.tabs ul{ list-style-type: none; font-size:14px; text-transform: uppercase; font-weight: bold; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.tabs ul li{ float:left; display:inline; margin-right:1px; }
.tabs ul li a,
.tabs ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 -37px; padding:0 0 0 20px;}
.tabs ul li a span { background-position:right -37px; padding:0 20px 0 0;}
.tabs ul li a { position:relative; line-height:36px; color:#895d23; }


.tabs ul li a.red { background-position:0 -74px; color:#fff; }
.tabs ul li a.red span{ background-position:right -74px;}

.tabs ul li a.active,
.tabs ul li a:hover { background-position:0 0; color:#000; }
.tabs ul li a.active span,
.tabs ul li a:hover span{ background-position:right 0;}

#container { background:#fff url(images/container-t.gif) no-repeat 0 0; padding:30px 20px; }

.items { position:relative; width:100%; padding-bottom:5px; }
.items ul{ list-style-type: none; display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:18px; }
.items ul .image{ text-align: center;}
.items ul li{ display:flex; flex-direction:column; border:dashed 1px #cfcfcf; width:auto; margin:0; padding:13px; position:relative; }
.items ul li p span{ color:#890000; font-weight:600; }
.items ul li p { color:#000; }
.items ul li p.price{ padding-top:15px; }
.items ul li p.price strong{ color:#890000; font-size:16px; font-weight:700; }

/* Badge de oferta */
.badge-offer { position:absolute; top:10px; left:10px; background:#ecb319; color:#000; padding:4px 8px; font-weight:700; font-size:12px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:2; text-transform:uppercase; letter-spacing:.5px; }

.brands h3 { padding-bottom:10px;}
.brands a { margin-right:30px;}

#footer { border-top:dashed 1px #cfcfcf; margin-top:20px; padding:10px 0; color:#000;}
#footer a{ color:#000; }
#footer a:hover{ color:#9d0000; }
#footer span{ padding:0 5px;}
#footer .left{ display:none; }

/* Social bar */
.social { display:flex; align-items:center; gap:10px; padding:10px 0 20px; }
.social .label { color:#000; opacity:.9; margin-right:8px; }
.social .social-link { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:999px; color:#000; background:#ecb319; font-weight:bold; gap:6px; white-space:nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.social .social-link .icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.social .social-link .icon svg { width:18px; height:18px; display:block; fill: currentColor; }
.social .social-link:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.social .facebook { background:#1877f2; color:#fff; }
.social .instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; }
.social .whatsapp { background:#25D366; color:#fff; }
.social .youtube { background:#FF0000; color:#fff; }

/* Floating WhatsApp button */
#whatsapp-float { position: fixed; right:16px; bottom:16px; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.3); z-index:999; transition: transform .2s ease; }
#whatsapp-float:hover { transform: scale(1.05); }
#whatsapp-float .icon { width:22px; height:22px; display:inline-flex; }
#whatsapp-float .icon svg { width:22px; height:22px; fill:#fff; display:block; }

/* Services section */
.services { margin-top:30px; }
.services h2 { color:#000; font-size:20px; margin-bottom:8px; text-transform:uppercase; }
.services .lead { color:#000; margin-bottom:16px; }
.services form { display:flex; flex-wrap:wrap; gap:14px 18px; background:#fafafa; border:1px dashed #cfcfcf; padding:15px; border-radius:6px; }
.services form div { width: calc(50% - 9px); display:flex; flex-direction:column; gap:6px; }
.services form div.full { width: 100%; }
.services label { font-weight:bold; color:#000; }
.services input, .services select, .services textarea { padding:8px 10px; border:1px solid #cfcfcf; border-radius:4px; font: inherit; color:#000; }
.services textarea { min-height:90px; resize:vertical; }
.services .actions { display:flex; gap:10px; align-items:center; }
.services .btn { background:#ecb319; color:#000; border:0; padding:10px 14px; border-radius:4px; cursor:pointer; display:inline-block; }
.services .btn.secondary { background:#eee; color:#000; }
.services .btn:hover { filter: brightness(.98); }

@media (max-width: 768px) {
  .services form div { width: 100%; }
}

/* Screen-reader only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.tab-content { display:none;}

.tabbed { min-height:420px;}

/* Hero section (reemplaza al slider) */
.hero { 
  background: linear-gradient(135deg, #0e0e0e, #2b2b2b);
  color:#fff;
  padding:40px 20px;
  text-align:center;
}
.hero .hero-inner h2 { font-size:28px; line-height:1.2; margin-bottom:10px; color:#fff; text-transform:none; }
.hero .hero-inner p { color:#fff; margin-bottom:15px; }
.btn-cta { display:inline-block; background:#ecb319; color:#000; font-weight:bold; padding:10px 16px; border-radius:4px; }
.btn-cta:hover { background:#ecb319; color:#000; }

/* Accesibilidad */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:absolute; left:10px; top:10px; width:auto; height:auto; padding:8px 12px; background:#ecb319; color:#000; z-index:1000; }

a:focus, button:focus, input:focus { outline:2px solid #ecb319; outline-offset:2px; }

/* Imágenes dentro de items */
.items ul li .image img { width:100%; height:100%; object-fit:contain; display:block; }

/* Responsive básico */
@media (max-width: 768px) {
  .items { width:auto; margin-right:0; }
  .items ul { grid-template-columns: repeat(2, 1fr); }
  #navigation ul { padding-top: 10px; display:flex; flex-wrap:wrap; gap:8px 12px; }
  #navigation ul li { float:none; border-right:0; padding-right:0; margin-right:0; }
  #navigation { float:none; }
  #header { height:auto; }
  h1#logo { float:none; margin:10px 0 0; }
}
@media (max-width: 480px) {
  .items ul { grid-template-columns: 1fr; }
}

/* Animaciones y microinteracciones para productos */
.items ul li {
  background:#fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
  animation: cardFadeIn .5s ease both;
}
.items ul li:hover,
.items ul li:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border-color: #bbb;
}
.items ul li .image { overflow:hidden; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; aspect-ratio: 4 / 3; }
.items ul li .image img { transition: transform .35s ease; }
.items ul li:hover .image img,
.items ul li:focus-within .image img { transform: scale(1.06); }
.items ul li p.price strong { transition: color .25s ease; }
.items ul li:hover p.price strong,
.items ul li:focus-within p.price strong { color:#701616; }

/* Animación de aparición */
@keyframes cardFadeIn {
  from { opacity:0; transform: translateY(10px); }
  to { opacity:1; transform: none; }
}

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .items ul li { animation: none; transition: none; }
  .items ul li .image img { transition: none; }
}

/* Aparición escalonada de las cards */
.items ul li { animation-delay: .05s; }
.items ul li:nth-child(2) { animation-delay: .10s; }
.items ul li:nth-child(3) { animation-delay: .15s; }
.items ul li:nth-child(4) { animation-delay: .20s; }
.items ul li:nth-child(5) { animation-delay: .25s; }
.items ul li:nth-child(6) { animation-delay: .30s; }

/* Limitar efectos de hover a dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .items ul li:hover,
  .items ul li:focus-within { transform: translateY(-6px); }
  .items ul li:hover .image img,
  .items ul li:focus-within .image img { transform: scale(1.06); }
}

/* Efecto al presionar (tap/click) */
.items ul li:active { transform: translateY(-2px); }

/* Realce adicional al enfocar con teclado */
.items ul li:focus-within { box-shadow: 0 0 0 3px rgba(236,179,25,.45); }


/* Modal de producto */
.modal { position: fixed; inset:0; background: rgba(0,0,0,.55); display:none; z-index:1000; padding:20px; }
.modal[hidden] { display:none !important; }
.modal .modal-dialog { max-width:820px; margin:0 auto; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.35); }
.modal .modal-close { background:transparent; border:0; font-size:26px; line-height:1; padding:10px 14px; cursor:pointer; position: absolute; right: 18px; top: 12px; }
.modal .modal-body { display:flex; gap:18px; padding:20px; }
/* Cart modal styles */
.modal .cart-body { display:block; }
.cart-empty { padding:10px; background:#fff8e1; color:#8a6d3b; border:1px solid #ffe2a3; border-radius:6px; margin-bottom:10px; }
.cart-table { width:100%; border-collapse: collapse; margin:10px 0; }
.cart-table th, .cart-table td { padding:8px; border-bottom:1px solid #eee; text-align:left; }
.cart-table th { color:#000; }
.cart-table .ci-product { display:flex; align-items:center; gap:10px; }
.cart-table .ci-product img { width:56px; height:56px; object-fit:cover; background:#fafafa; border:1px solid #eee; border-radius:4px; }
.cart-table input[type="number"] { width:70px; }
.cart-table .ci-remove { background:transparent; border:0; color:#b00; cursor:pointer; }
.cart-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cart-actions { display:flex; gap:10px; }
.modal .pm-media { flex: 0 0 360px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; }
.modal .pm-media img { max-width:100%; height:auto; display:block; background:#fafafa; border:1px solid #eee; border-radius:6px; }
.modal .pm-thumbs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.modal .pm-thumb { border:1px solid #ddd; border-radius:4px; padding:2px; background:#fff; cursor:pointer; }
.modal .pm-thumb.active { border-color:#ecb319; box-shadow:0 0 0 2px rgba(236,179,25,.35); }
.modal .pm-thumb img { display:block; width:58px; height:58px; object-fit:cover; border-radius:3px; }
.modal .pm-info { flex:1 1 auto; display:flex; flex-direction:column; gap:10px; }
.modal .pm-desc { color:#000; line-height:1.4; }
.modal .pm-info h3 { color:#2b2b2b; font-size:24px; text-transform:none; font-weight:700; }
.modal .pm-spec-list { list-style: none; padding-left:0; }
.modal .pm-spec-list li { margin-bottom:4px; color:#000; }
.modal .pm-price strong { color:#701616; }
.modal .pm-actions { display:flex; gap:10px; align-items:center; }
.modal #pm-qty { width:70px; }

@media (max-width: 768px) {
  .modal .modal-body { flex-direction: column; }
  .modal .pm-media { flex: 0 0 auto; }
}