:root {
  --dark: #1F2321;
  --green: #6B8F6E;
  --green-dark: #557457;
  --cream: #F2EBD8;
  --ink: #20241f;
  --muted: #7c8479;
  --card: #ffffff;
  --wa: #25D366;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

h1, h2, h3, .brand-name {
  font-family: "Oswald", "Inter", sans-serif;
  letter-spacing: .5px;
  margin: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.25rem;
  background: var(--dark);
  color: var(--cream);
  border-bottom: 3px solid var(--green);
}
.brand { display: flex; align-items: center; gap: .65rem; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-name { font-size: 1.4rem; font-weight: 600; color: var(--cream); }
.brand-name strong { color: var(--green); font-weight: 700; }
.top-nav { display: flex; align-items: center; gap: 1.25rem; }
.top-nav a { font-weight: 600; font-size: .95rem; }
.btn-wa-top {
  background: var(--green); color: #fff !important;
  padding: .5rem .9rem; border-radius: 999px; font-size: .85rem;
}
.btn-wa-top:hover { background: var(--green-dark); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-size: cover; background-position: center;
  min-height: 15vh; display: flex; align-items: center;
}
.hero-overlay {
  width: 100%;
  padding: 1.4rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(31,35,33,.45), rgba(31,35,33,.65));
  color: var(--cream);
}
.hero-overlay h1 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; margin: 0;
}
.hero-overlay p {
  font-size: clamp(.82rem, 1.3vw, .95rem);
  margin: .35rem 0 0; opacity: .85;
  letter-spacing: .02em;
}

.btn-primary {
  display: inline-block;
  background: var(--green); color: #fff;
  padding: .85rem 1.8rem; border-radius: 999px;
  font-family: "Oswald", sans-serif; font-size: 1.05rem; letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-primary:hover { background: var(--green-dark); }

/* ---------- Contenedor / grid ---------- */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* Encabezado del catálogo: label decorativo + contador */
.cat-encabezado {
  position: relative;
  text-align: center;
  margin: .5rem 0 1.5rem;
}
.cat-label {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--dark);
  padding: 0 1.2rem;
  position: relative;
}
.cat-label::before, .cat-label::after {
  content: ""; position: absolute; top: 50%;
  width: 40px; height: 1px; background: var(--dark); opacity: .25;
}
.cat-label::before { right: 100%; }
.cat-label::after { left: 100%; }
.cat-contador {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--muted);
  letter-spacing: .04em;
}

/* Filtros: 2 filas — marcas arriba (protagonistas), secundarios abajo */
.filtros-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem;
  padding: .35rem 0;
}
.filtros-marcas { justify-content: center; margin: 0 0 .9rem; }
.filtros-secundarios { justify-content: center; margin: 0 0 1.4rem; padding-top: .6rem; border-top: 1px solid #ece6d2; }
.filtros-grp { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.filtros-sep {
  width: 1px; height: 22px; background: #d8d2bf; margin: 0 .3rem;
}

/* Pills base (género y otros) */
.pill {
  padding: .4rem .85rem;
  background: #fff; border: 1px solid #e2dcc9; border-radius: 999px;
  font-family: "Oswald", sans-serif; font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dark); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
  white-space: nowrap;
}
.pill:hover { border-color: var(--green); }
.pill.activa { background: var(--dark); color: var(--cream); border-color: var(--dark); }

/* Pills de MARCA: protagonistas — más grandes, borde definido, sombra sutil */
.filtros-grp.marcas .pill {
  padding: .65rem 1.35rem;
  font-size: 1rem;
  font-weight: 600;
  border-width: 2px;
  border-color: var(--dark);
  background: #fff;
  letter-spacing: .08em;
  box-shadow: 0 2px 6px rgba(31, 35, 33, .08);
}
.filtros-grp.marcas .pill:hover {
  background: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(31, 35, 33, .12);
}
.filtros-grp.marcas .pill.activa {
  background: var(--dark); color: var(--cream); border-color: var(--dark);
  box-shadow: 0 3px 10px rgba(31, 35, 33, .2);
}

/* Dropdowns (en la misma fila) */
.filtros-row select {
  appearance: none; -webkit-appearance: none;
  padding: .4rem 1.8rem .4rem .85rem;
  border: 1px solid #d8d2bf; border-radius: 999px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'><path fill='%231F2321' d='M6 8L0 0h12z'/></svg>") no-repeat right .8rem center;
  background-size: 9px;
  font-size: .82rem; font-family: inherit; color: var(--dark);
  cursor: pointer; min-width: 110px;
  transition: border-color .12s ease;
}
.filtros-row select:hover { border-color: var(--green); }
.filtros-row select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(107,143,110,.15); }
.filtros-bar select {
  appearance: none; -webkit-appearance: none;
  padding: .65rem 2rem .65rem .95rem;
  border: 1px solid #d8d2bf; border-radius: 999px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231F2321' d='M6 8L0 0h12z'/></svg>") no-repeat right .9rem center;
  background-size: 10px;
  font-size: .9rem; font-family: inherit; color: var(--dark);
  cursor: pointer; min-width: 140px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filtros-bar select:hover { border-color: var(--green); }
.filtros-bar select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(107,143,110,.15); }

/* Leyenda "Sin compromiso" — banner sutil arriba del grid */
.leyenda-sincompromiso {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
  background: var(--cream);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  margin: 0 0 1.25rem;
  font-size: .92rem;
  color: var(--dark);
  line-height: 1.4;
}
.leyenda-sincompromiso .leyenda-icono { font-size: 1.15rem; flex-shrink: 0; }
.leyenda-sincompromiso strong { font-weight: 600; }

/* Nota chica en detalle, debajo del botón "Agregar" */
.nota-sincompromiso {
  margin: .65rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

/* Chips de filtros activos (quitables) */
.chips-activos {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 1.5rem;
}
.chip-quitar {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem;
  background: var(--dark); color: var(--cream);
  border-radius: 999px; font-size: .85rem;
  text-decoration: none;
  transition: background .12s ease;
}
.chip-quitar:hover { background: var(--green-dark); }
.chip-quitar span { font-size: .75rem; opacity: .8; }
.limpiar-todo {
  font-size: .85rem; color: var(--muted); text-decoration: underline;
  margin-left: .25rem;
}
.limpiar-todo:hover { color: var(--dark); }
.chip {
  padding: .4rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid #e2dcc9; font-size: .9rem; font-weight: 500;
}
.chip-activo { background: var(--dark); color: var(--cream); border-color: var(--dark); }

/* Bloques por categoría: encabezado sutil con número de productos */
.cat-bloque { margin: 0 0 2.4rem; }
.cat-bloque:last-child { margin-bottom: 1rem; }
.cat-header {
  display: flex; align-items: baseline; gap: .65rem;
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid #e6dfc9;
}
.cat-titulo {
  font-family: "Oswald", sans-serif;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dark);
  margin: 0;
}
.cat-num {
  font-family: "Oswald", sans-serif;
  font-size: .8rem; letter-spacing: .06em;
  color: var(--muted);
  background: #f3eedb;
  padding: .12rem .55rem;
  border-radius: 999px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
}

.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 18px rgba(31,35,33,.08);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(31,35,33,.15); }
.card-img { aspect-ratio: 1/1; background: var(--cream); display: block; position: relative; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.card-img img.img-loaded { opacity: 1; }

/* Skeleton shimmer mientras carga la imagen */
.card-img::before,
.detalle-img::before,
.thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(232, 226, 205, 1) 0%,
    rgba(244, 240, 224, 1) 50%,
    rgba(232, 226, 205, 1) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.card-img.img-ready::before,
.detalle-img.img-ready::before,
.thumb.img-ready::before { display: none; }
.card-img > *, .detalle-img > *, .thumb > * { position: relative; z-index: 1; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card-img-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--cream); }
.card-img-ph img { width: 55%; height: auto; border-radius: 50%; opacity: .85; }
.card-img-ph.grande { min-height: 320px; }

.brand-tag {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  padding: .3rem .65rem; max-width: calc(60% - .65rem);
  background: rgba(31, 35, 33, .9); color: var(--cream);
  font-family: "Oswald", sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(2px);
}
.brand-tag-right {
  left: auto; right: .65rem;
  background: rgba(255, 255, 255, .92); color: var(--dark);
  border: 1px solid rgba(31, 35, 33, .15);
}
.brand-kicker em {
  font-style: normal; color: var(--dark); opacity: .75;
}

.card-body { padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--green-dark); font-weight: 600; }
.card-body h3 { font-size: 1.12rem; font-weight: 600; }
.precio { font-family: "Oswald", sans-serif; font-size: 1.3rem; color: var(--dark); font-weight: 600; margin: 0; }
.precio.grande { font-size: 2rem; margin: .5rem 0 1rem; }

.btn-wa {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--wa); color: #fff;
  padding: .65rem 1rem; border-radius: 10px; font-weight: 600; font-size: .92rem;
}
.btn-wa:hover { filter: brightness(.95); }
.btn-wa.grande { padding: .9rem 1.4rem; font-size: 1.05rem; width: 100%; }

.vacio { text-align: center; color: var(--muted); padding: 3rem 0; font-size: 1.1rem; }

.badge {
  display: inline-block; width: fit-content;
  font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}
.badge-gym { background: #e3efe1; color: var(--green-dark); }
.badge-pedir { background: #f3eede; color: #8a7a45; }
.legend { font-size: .8rem; color: var(--muted); margin: .4rem 0 1.25rem; }
.legend .badge { margin-right: .15rem; }

/* ---------- Muestras de color (swatches) ---------- */
.swatches { display: flex; gap: .3rem; margin: .15rem 0; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.swatch-text {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; border-radius: 999px;
  background: var(--cream); border: 1px solid #d4cdb6;
  font-family: "Oswald", sans-serif; font-size: .68rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dark);
  max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sel-grupo { margin: .25rem 0 1rem; }
.swatch-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.swatch-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; padding: 0; }
.swatch-btn.sel { border-color: var(--dark); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); }
.swatch-btn-text {
  width: auto; height: auto; min-height: 34px; border-radius: 8px; padding: .4rem .85rem;
  background: var(--cream); border: 2px solid #d4cdb6; color: var(--dark);
  font-family: "Oswald", sans-serif; font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.swatch-btn-text.sel {
  background: var(--dark); color: var(--cream); border-color: var(--dark);
  box-shadow: none;
}
.size-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; align-items: center; }
/* Botones de talla con indicador de disponibilidad embebido */
.size-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border: 1.5px solid #d8d2bf; background: #fff;
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem;
  position: relative;
}
.size-btn .size-talla { line-height: 1; }
.size-btn .size-icon { font-size: .85rem; opacity: .85; line-height: 1; }
.size-btn.size-aca { border-color: var(--green); background: #f4f9f3; }
.size-btn.size-aca .size-icon { color: var(--green-dark); }
.size-btn.size-alla { border-color: #e0d5b1; background: #faf6e9; }
.size-btn.size-alla .size-icon { color: #8a7a45; }
.size-btn.sel { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.size-btn.sel .size-icon { color: var(--cream); opacity: .95; }
.hint { color: var(--muted); font-size: .85rem; }

/* Mini-confirmación bajo el selector: una línea sutil, no recuadro */
.disp-mini {
  font-size: .85rem; margin: .55rem 0 .85rem; min-height: 1.1em;
  display: flex; align-items: center; gap: .35rem;
}
.disp-mini-icon { font-size: 1rem; }
.disp-mini-aca { color: var(--green-dark); }
.disp-mini-alla { color: #8a7a45; }

.cart-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); margin-right: .35rem; vertical-align: middle; }
.cart-sw-text {
  display: inline-block; padding: .1rem .45rem; margin-right: .4rem;
  background: var(--cream); border: 1px solid #d4cdb6; border-radius: 4px;
  font-family: "Oswald", sans-serif; font-size: .65rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dark); vertical-align: middle;
  max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Detalle ---------- */
.volver { display: inline-block; margin-bottom: 1.25rem; color: var(--green-dark); font-weight: 600; }
.detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.detalle-img {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(31,35,33,.12);
}
.detalle-img > img, .detalle-img > .card-img-ph {
  width: 100%;
  max-height: 70vh;          /* la foto no domina la pantalla en desktop */
  object-fit: contain;       /* mantiene proporción sin recortar */
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.detalle-img > img.img-loaded { opacity: 1; }
.detalle-img > .card-img-ph { opacity: 1; }  /* placeholder logo siempre visible */
.thumbs {
  display: flex; gap: .5rem; margin-top: .8rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: .25rem;
}
.thumb {
  flex: 0 0 auto; width: 72px; height: 72px; padding: 0; border: 2px solid transparent;
  border-radius: 8px; background: var(--cream); cursor: pointer; overflow: hidden;
  transition: border-color .12s ease, transform .12s ease;
}
.thumb:hover { border-color: var(--green); }
.thumb.sel { border-color: var(--dark); }
.thumb { position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.thumb img.img-loaded { opacity: 1; }
.brand-tag-lg { top: 1rem; left: 1rem; font-size: .85rem; padding: .45rem .9rem; letter-spacing: .12em; }
.brand-kicker {
  display: block; font-family: "Oswald", sans-serif; font-size: 1.1rem;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-dark); margin-bottom: -.15rem;
}
.detalle-info h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; margin: .4rem 0; }
.desc { color: #4a4f47; margin: .5rem 0 1.5rem; line-height: 1.55; }
.desc p { margin: 0 0 .7rem; }
.desc strong { color: var(--dark); }
.desc img { max-width: 100%; height: auto; border-radius: 8px; margin: .5rem 0; }
.desc ul, .desc ol { padding-left: 1.4rem; margin: .3rem 0 .8rem; }
.lbl { display: block; font-weight: 600; margin-bottom: .4rem; }
.select {
  width: 100%; padding: .7rem .8rem; border-radius: 10px;
  border: 1px solid #d8d2bf; background: #fff; font-size: 1rem; margin-bottom: 1.25rem;
}
.link-oficial { display: inline-block; margin-top: 1rem; color: var(--green-dark); font-weight: 600; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.wa-float:hover { transform: scale(1.06); }

.btn-ver {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dark); color: var(--cream);
  padding: .65rem 1rem; border-radius: 10px; font-weight: 600; font-size: .92rem;
}
.btn-ver:hover { background: #2c332c; }

/* ---------- Carrito "Para probar" ---------- */
.cart-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--green); color: #fff;
  border: 0; cursor: pointer;
  padding: .5rem .9rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  font-family: inherit;
}
.cart-btn:hover { background: var(--green-dark); }
.cart-count {
  background: #fff; color: var(--green-dark);
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; padding: 0 5px;
}

.cart-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.cart-float:hover { transform: scale(1.06); }
.cart-float .cart-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--dark); color: #fff;
}

.cart-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(31,35,33,.5);
}
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 70;
  width: min(380px, 90vw); height: 100%;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
}
.cart-drawer[hidden], .cart-overlay[hidden] { display: none; }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; background: var(--dark); color: var(--cream);
}
.cart-head h3 { font-size: 1.3rem; }
.cart-close { background: none; border: 0; color: var(--cream); font-size: 1.2rem; cursor: pointer; }

.cart-items { flex: 1; overflow-y: auto; padding: .5rem 1rem; }

/* Secciones del drawer: RD ROCK ahora vs Te lo preparamos */
.cart-sec { margin-bottom: 1.25rem; }
.cart-sec:last-child { margin-bottom: 0; }
.cart-sec-titulo {
  font-family: "Oswald", sans-serif;
  font-size: .9rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin: .5rem 0 .25rem;
  color: var(--dark);
}
.cart-sec-sub {
  font-size: .82rem; color: var(--muted);
  margin: 0 0 .65rem; line-height: 1.4;
}
#cart-sec-gym .cart-sec-titulo { color: var(--green-dark); }
#cart-sec-gym {
  background: rgba(107, 143, 110, .06);
  border-left: 3px solid var(--green);
  padding: .65rem .85rem;
  border-radius: 6px;
  margin-left: -.4rem; margin-right: -.4rem;
}
#cart-sec-pedir {
  background: rgba(201, 139, 30, .05);
  border-left: 3px solid #c98b1e;
  padding: .65rem .85rem;
  border-radius: 6px;
  margin-left: -.4rem; margin-right: -.4rem;
}
#cart-sec-pedir .cart-sec-titulo { color: #8a7a45; }
.cart-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem .25rem; border-bottom: 1px solid #eee;
}
.cart-row-info { display: flex; flex-direction: column; gap: .15rem; }
.cart-row-info strong { font-size: .98rem; }
.cart-var { font-size: .82rem; color: var(--muted); }
.cart-precio { font-family: "Oswald", sans-serif; color: var(--dark); font-weight: 600; }
.cart-del {
  background: #f3f1ea; border: 0; cursor: pointer; color: #b23b3b;
  width: 30px; height: 30px; border-radius: 8px; font-size: .9rem; flex: none;
}
.cart-del:hover { background: #ece7da; }

.cart-foot { padding: 1.1rem 1.25rem; border-top: 1px solid #eee; }
.cart-total { font-family: "Oswald", sans-serif; font-size: 1.2rem; margin: 0 0 .8rem; }
.cart-empty { color: var(--muted); text-align: center; padding: 1.5rem .5rem; }
.btn-wa.disabled, .btn-wa:disabled { background: #b9b9b9; pointer-events: none; cursor: default; }

.cart-name-row { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .8rem; }
.cart-name-row label { font-size: .85rem; color: var(--muted); }
.cart-name { padding: .65rem .8rem; border: 1px solid #d6d2c4; border-radius: 8px; font-size: 1rem; background: #fff; }
.cart-name:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.cart-err { color: #a3322f; font-size: .9rem; margin: 0 0 .6rem; min-height: 1.1rem; }

/* Pantalla de confirmación dentro del drawer */
.cart-confirm { padding: 1rem 1.1rem 1.5rem; overflow-y: auto; }
.conf-sec { background: #fff; border: 1px solid #ece7da; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.conf-now { border-left: 4px solid #c98b1e; }
.conf-later { border-left: 4px solid var(--green); position: relative; }
.conf-sec h4 { margin: 0 0 .35rem; font-family: "Oswald", sans-serif; font-size: 1.15rem; letter-spacing: .02em; }
.conf-sub { margin: 0 0 .7rem; color: var(--muted); font-size: .92rem; }
.conf-folio { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .35rem; }
.conf-folio span { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.conf-folio strong { font-family: "Oswald", sans-serif; font-size: 1.6rem; color: var(--green); }
.conf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.conf-list li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.conf-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--muted); }
.conf-actions { padding: .25rem 0 0; }

/* ---------- Footer con portada de fondo ---------- */
.site-footer {
  position: relative;
  background-color: var(--dark);
  background-size: cover; background-position: center;
  color: var(--cream);
  margin-top: 3rem;
  overflow: hidden;
}
.site-footer-overlay {
  background: linear-gradient(180deg, rgba(31,35,33,.78), rgba(31,35,33,.92));
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}
.site-footer img {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 1rem; display: block;
}
.site-footer h2 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 .8rem;
}
.site-footer p { margin: .3rem 0; }
.site-footer .muted {
  color: var(--green); font-size: .85rem;
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: .5rem;
}

/* Franja final debajo del footer (cierre visual sólido) */
.site-footer-bar {
  background: var(--dark);
  color: var(--cream);
  text-align: center;
  padding: .85rem 1rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: .65rem;
}
.site-footer-bar .dev-credit {
  color: var(--cream); opacity: .55;
  font-size: .72rem; letter-spacing: .08em;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .detalle-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Tablet: foto más compacta, no domina toda la pantalla */
  .detalle-img > img, .detalle-img > .card-img-ph {
    max-height: 60vh;
    max-width: 480px;
    margin: 0 auto;
  }
  .detalle-img { display: flex; justify-content: center; }
}

@media (max-width: 640px) {
  /* Cabecera compacta */
  .site-header { padding: .55rem .85rem; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.05rem; }
  .top-nav { gap: .5rem; }
  .top-nav > a { display: none; }            /* el logo ya lleva al inicio */
  .cart-btn { padding: .45rem .7rem; font-size: .82rem; }

  /* Hero más corto: se ven productos antes */
  .hero { min-height: 12vh; }
  .hero-overlay { padding: 1rem 1rem; }

  /* Más aire abajo para no chocar con el botón flotante */
  .contenedor { padding: 1.4rem .9rem 4.5rem; }

  /* Leyenda más compacta en móvil */
  .leyenda-sincompromiso { font-size: .85rem; padding: .65rem .8rem; gap: .5rem; margin-bottom: 1rem; }
  .leyenda-sincompromiso .leyenda-icono { font-size: 1rem; }

  /* Encabezado: contador debajo del label, no a la derecha */
  .cat-encabezado { margin: .25rem 0 1rem; }
  .cat-label { font-size: .75rem; letter-spacing: .2em; padding: 0 .8rem; }
  .cat-label::before, .cat-label::after { width: 25px; }
  .cat-contador { position: static; transform: none; display: block; margin-top: .35rem; font-size: .78rem; }

  /* Filtros compactos en móvil: 1 grupo por fila, deslizable horizontal */
  .filtros-row { gap: .35rem; margin-bottom: .8rem; }
  .filtros-grp {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100%; padding-bottom: .25rem;
  }
  .pill { flex: 0 0 auto; padding: .35rem .75rem; font-size: .78rem; }
  .filtros-row select { min-width: 0; flex: 1 1 auto; font-size: .8rem; padding: .4rem 1.5rem .4rem .7rem; }
  .filtros-sep { display: none; }
  .chip-quitar { padding: .35rem .7rem; font-size: .8rem; }

  /* Sello de marca más chico en móvil */
  .brand-tag { font-size: .65rem; padding: .25rem .55rem; top: .5rem; left: .5rem; }
  .brand-tag-right { left: auto; right: .5rem; }

  /* 2 columnas para ver más prendas */
  .grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .card-body { padding: .7rem .7rem .9rem; }
  .card-body h3 { font-size: .95rem; }
  .precio { font-size: 1.1rem; }
  .btn-ver, .card .btn-wa { padding: .6rem .55rem; font-size: .82rem; }
  .swatches .swatch { width: 14px; height: 14px; }

  /* Detalle: título y toques cómodos */
  .detalle-info h1 { font-size: 1.6rem; }
  .precio.grande { font-size: 1.7rem; }
  .swatch-btn { width: 40px; height: 40px; }
  .size-btn { padding: .6rem 1rem; font-size: .95rem; }
  /* Móvil: foto compacta, deja ver el resto de la página sin scroll inmenso */
  .detalle-img > img, .detalle-img > .card-img-ph {
    max-height: 50vh;
    max-width: 100%;
  }
  /* Miniaturas más chicas */
  .thumb { width: 56px; height: 56px; }

  /* Carrito a ancho completo en móvil */
  .cart-drawer { width: 100%; }
  .cart-float { width: 54px; height: 54px; right: 14px; bottom: 14px; }
}