:root{
  --color-principal:#0a2a43; /* 🔥 NUEVO */

  --azul:#0a2a43;
  --gris:#f4f6f9;
  --blanco:#ffffff;
  --borde:#e1e5ea;
  --verde:#28a745;
  --rojo:#dc3545;
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--gris);
}

header{
 background:var(--color-principal);
  color:#fff;
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.producto-carrito{
  display:flex;
  align-items:center;
  gap:10px;
}
.producto-carrito button{
  padding:4px 8px;
}

header a{color:#0a2a43;;text-decoration:none}

.productos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}

.producto{
  background:#fff;
  width:160px;
  margin:10px;
  padding:15px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  text-align:center;
  color:#0a2a43;
}

.cantidad{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:10px 0;
}

.cantidad button{
  width:30px;
  height:30px;
}

button{
  background: #0a2a43;
  color:#fff;
  border:none;
  padding:8px 12px;
  cursor:pointer;
  border-radius:4px;
}

button:hover{opacity:.9}

table{
  background:#fff;
  border-collapse:collapse;
  width:100%;
}

table td, table th{
  padding:8px;
  border-bottom:1px solid #ddd;
}

.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  color:#fff;
  padding:15px;
  border-radius:50%;
  text-decoration:none;
}

.producto-carrito{
  display:flex;
  gap:15px;
  align-items:center;
}

.producto-carrito img{
  border-radius:6px;
  border:1px solid #ddd;
}
table img{
  border-radius:4px;
}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--color-principal);
  padding:15px 20px;
  color:#fff;
}

.header-left{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo{
  height:50px;
  object-fit:contain;
}

.site-header h1{
  margin:0;
  font-size:22px;
}

.carrito-btn{
  background:#28a745;
  color: #ffffff;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
}
.producto img{
  width:100%;
   height:130px;
  aspect-ratio:1 / 1;      /* fuerza formato cuadrado */
  object-fit:cover;        /* recorta sin deformar */
  border-radius:6px;
  background:#f4f6f9;
}
.producto{
  display:flex;
  flex-direction:column;
}
/* ===== FOOTER ===== */
.footer {
  background: #0f172a;
  color: #e5e7eb;
  margin-top: 40px;
  font-size: 14px;
}

.footer-contenedor {
  max-width: 1200px;
  margin: auto;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.footer h4 {
  color: #38bdf8;
  margin-bottom: 10px;
  font-size: 16px;
}

.footer p,
.footer li {
  line-height: 1.6;
  list-style: none;
}

.footer ul {
  padding: 0;
  margin: 0;
}

.footer-bottom {
  background: #020617;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: #94a3b8;
}
.btn-vaciar{
  background:#dc2626;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}

.btn-vaciar:hover{
  opacity:.9;
}
.contador{
  background:#dc2626;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  padding:2px 7px;
  border-radius:50%;
  margin-left:6px;
}
.producto-galeria{
  position:relative;
}

.img-principal{
  object-fit:cover;
  border-radius:10px;
  cursor:zoom-in;
  transition:transform .2s;
}

.thumbs img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  border:2px solid #ddd;
}

.thumbs img:hover{
  border-color:#0a7;
}
#lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:9999;
  justify-content:center;
  align-items:center;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
}

.producto-galeria{
  position:relative;
}

.img-principal:hover{
  transform:scale(1.03);
}

.thumbs{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}

.thumbs img{
  width:55px;
  height:55px;
  object-fit:cover;
  border-radius:6px;
  border:2px solid #ddd;
  cursor:pointer;
}

.thumbs img:hover{
  border-color:#0a7;
}
/* ===============================
   PRODUCTO COMPACTO
================================ */

.producto{
  padding:12px !important;
  border-radius:10px;
}

.producto h3{
  margin:8px 0 4px;
  font-size:14px;
  line-height:1.2;
}

.producto small{
  display:block;
  margin-bottom:4px;
  font-size:12px;
}

.producto p{
  margin:4px 0;
  line-height:1.2;
}

/* ===============================
   CANTIDAD
================================ */

.cantidad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:8px 0;
}

.cantidad button{
  width:28px;
  height:28px;
  padding:0;
  font-size:16px;
}

/* ===============================
   BOTONES
================================ */

.producto button{
  margin-top:6px;
  padding:8px 10px;
  font-size:13px;
}

/* ===============================
   GALERÍA
================================ */

.producto-galeria{
  margin-bottom:8px;
}

.img-principal{
  width:100%;
  height:320px;

  object-fit:cover;

  border-radius:10px;

  display:block;

  background:#f4f4f4;

  cursor:pointer;

  transition:.2s;
}

.thumbs{
  margin-top:5px;
  gap:4px;
}

.thumbs img{
  width:45px;
  height:45px;
}