:root{ --wrap:1100px; --gap:1rem; --radius:1rem; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; }
*{ box-sizing:border-box; }
body{ margin:0; line-height:1.6; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding: 1.2rem; }
.site-header, .site-footer{ background:#0c0c0c; color:#fff; }
.site-header a{ color:#fff; text-decoration:none; margin-right: 1rem; }
.brand{ font-weight:700; font-size:1.1rem; margin-right:1rem; }
.site-footer .sep{ margin:0 .5rem; opacity:.6; }

.badge{ display:inline-block; background:#ffe08a; color:#222; padding:.25rem .5rem; border-radius:.5rem; font-size:.9rem; }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.card{ border:1px solid #eee; border-radius: var(--radius); padding:1rem; background:#fff; }
.card img{ width:100%; height:auto; border-radius:.75rem; background:#f7f7f7; }
.card h3{ margin:.75rem 0 .25rem; }
.product .price, .product-single .price{ font-size:1.1rem; font-weight:700; }
.card.product{ display:flex; flex-direction:column; }
.card.product .price{ margin-top:auto; }
.card.product .actions{ margin-top:.5rem; }
.price .price-new{ color: #111; font-weight:800; }
.price .price-old{ text-decoration: line-through; opacity:.65; font-weight:500; margin-left:.4rem; }

.btn{ border:none; border-radius:.75rem; padding:.6rem .9rem; cursor:pointer; background:#222; color:#fff; }
.btn:hover{ opacity:.9; }
.btn.primary{ background:#007bff; }
.btn.secondary{ background:#e9f9ef; border:1px solid #25d366; color:#1e7e34; }
.btn.whatsapp{ display:inline-flex; align-items:center; gap:.45rem; background:#25d366; color:#0b2f18; border:1px solid #25d366; border-radius:999px; padding:.55rem 1rem; font-weight:600; }
.btn.whatsapp .wa-ico{ width:1em; height:1em; display:inline-block; background: #fff; -webkit-mask: url('/images/whatsapp-svgrepo-com.svg') no-repeat center / contain; mask: url('/images/whatsapp-svgrepo-com.svg') no-repeat center / contain; }
.actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.product-single{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.product-media img{ width:100%; border-radius: var(--radius); background:#f7f7f7; }
@media (max-width: 880px){ .product-single{ grid-template-columns: 1fr; } }

/* Uniformar altura de imagen en cards de productos (listado) */
.card.product .product-media{
  width: 100%;
  aspect-ratio: 1 / 1; /* cuadrado para consistencia */
  background: #f7f7f7;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card.product .product-media a{ display: contents; }
.card.product .product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* no recorta etiquetas con distintas proporciones */
  border-radius: 0; /* el contenedor ya tiene border-radius */
  background: transparent;
}

/* Home sections */
.hero{ position:relative; padding: 6rem 0; background: radial-gradient(80% 120% at 10% 10%, #faf5ef 0%, #efeae4 50%, #ffffff 100%); border-radius: 0 0 2rem 2rem; }
.hero__content{ max-width: 800px; }
.hero h1{ font-size: clamp(2rem, 6vw, 3.5rem); margin: 0 0 .25rem; }
.hero .lead{ font-size: clamp(1.1rem, 2vw, 1.4rem); opacity:.9; margin:0 0 .5rem; }
.hero .ship{ display:inline-block; background:#ffe08a; color:#222; padding:.35rem .6rem; border-radius:.5rem; font-weight:600; margin:.5rem 0 1rem; }
.hero__cta{ display:flex; gap:.5rem; flex-wrap:wrap; }

.features{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--gap); margin: 2.5rem 0; }
.features .feature{ background:#fff; border:1px solid #eee; border-radius: var(--radius); padding:1rem; }

.home-products{ margin: 2rem 0 3rem; }
.home-products__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: .5rem; }
.home-products__header .link{ text-decoration:none; font-weight:600; }

/* Testimonials */
.testimonials{ margin: 2rem 0 3rem; }
.testimonials__header{ margin-bottom: .75rem; }
.testimonials__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--gap); }
.quote{ background:#fff; border:1px solid #eee; border-radius: var(--radius); padding:1rem; }
.quote blockquote{ margin:0 0 .75rem; font-style:italic; }
.quote figcaption{ opacity:.8; }