/* ============================================================
   IMPERIA · Tienda en línea
   Los tokens de marca se repiten aquí porque la tienda carga
   sola, sin la hoja del panel. Si cambias uno, cámbialo en las dos.
   ============================================================ */

:root {
  /* La misma paleta neutra del panel. Provisional a propósito: la marca del
     consultorio todavía no existe, y cuando exista se cambian estos valores
     aquí y en panel.css, no en las reglas de abajo. */
  --oro: #4f766a;
  --oro-claro: #7d9c92;
  --champan: #cfdbd6;
  --tinta: #1b1f1e;
  --papel: #ffffff;
  --crema: #f5f6f5;
  --linea: #e2e5e3;
  --texto: #1c201f;
  --texto-suave: #636b68;
  --fuente-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --fuente: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--crema);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ── Encabezado ───────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(17, 18, 14, .96);
  backdrop-filter: blur(10px);
  color: var(--papel);
  border-bottom: 1px solid rgba(220, 210, 185, .14);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
.logotipo { display: flex; align-items: center; gap: 11px; color: var(--oro); }
.logotipo .texto { display: flex; flex-direction: column; line-height: 1; color: var(--papel); }
.logotipo .nombre { font-family: var(--fuente-display); font-size: 21px; letter-spacing: .24em; text-transform: uppercase; }
.logotipo .sub { font-size: 8px; letter-spacing: .36em; text-transform: uppercase; color: var(--oro); margin-top: 4px; }

.btn-carrito {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(220, 210, 185, .34);
  color: var(--champan);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.btn-carrito:hover { background: var(--oro); border-color: var(--oro); color: #fff; }
.btn-carrito .cuenta { background: var(--oro); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; min-width: 19px; text-align: center; }

/* ── Portada ──────────────────────────────────────────────── */
.portada {
  background:
    radial-gradient(900px 500px at 12% -20%, rgba(179, 160, 116, .3), transparent 62%),
    radial-gradient(700px 420px at 108% 120%, rgba(220, 210, 185, .17), transparent 58%),
    var(--tinta);
  color: var(--papel);
  padding: 78px 0 86px;
  text-align: center;
}
.portada .lema { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--oro); }
.portada h1 { font-family: var(--fuente-display); font-size: clamp(38px, 7vw, 66px); font-weight: 400; margin: 14px 0 12px; line-height: 1.08; }
.portada p { max-width: 560px; margin: 0 auto; color: #bdb9ae; font-size: 15px; }
.regla { width: 54px; height: 1px; background: var(--oro); margin: 24px auto 0; }

/* ── Filtros ──────────────────────────────────────────────── */
.filtros-tienda {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 26px 0 6px;
}
.filtros-tienda input, .filtros-tienda select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--texto);
}
.filtros-tienda input:focus, .filtros-tienda select:focus { outline: none; border-color: var(--oro); }
.filtros-tienda .buscador { flex: 1; min-width: 220px; }

/* ── Rejilla de productos ─────────────────────────────────── */
.productos {
  display: grid;
  /* Cuatro columnas, como cualquier catálogo de tienda. El contenedor topa
     en 1180 px, así que la tarjeta nunca pasa de ~267 px ni se estira sola
     cuando el catálogo trae pocos productos. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 20px 0 70px;
}

.producto {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.producto:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(17, 18, 14, .1); }

.producto .lienzo {
  /* 4:5 vertical, que es la proporción con la que se fotografía la joyería:
     la mano de exhibición es alta y angosta. Medido sobre las 113 fotos
     cargadas, TODAS son verticales y ninguna cuadrada. Un marco cuadrado les
     recortaba entre 17 % y 25 % del alto —ahí se iba la muñeca—; con 4:5 el
     recorte queda entre 0 % y 6 %.
     No confundir con Kairos: allá las 143 fotos son cuadradas de verdad y su
     marco cuadrado es el correcto. La proporción se decide por lo que hay en
     el bucket, no por gusto. */
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #f0ece0, #e4dfd0);
  display: grid;
  place-items: center;
  color: var(--oro);
  position: relative;
  overflow: hidden;
}
/* La foto llena el cuadro; lo que sobra se recorta, nunca se deforma ni se
   deja franja. grid-area la saca del centrado de arriba, que es solo para el
   logo de relleno. */
.producto .lienzo img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.producto .cinta {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--tinta);
  color: var(--champan);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.producto .cuerpo { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.producto h3 { font-family: var(--fuente-display); font-size: 23px; font-weight: 500; margin: 0; line-height: 1.15; }
.producto .inspira { font-size: 11.5px; color: var(--texto-suave); }
.producto .notas { font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--linea); padding-top: 9px; }
.producto .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }

.pastilla {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: #f2efe4;
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 600;
}
.pastilla.oro { background: #f3efe6; color: #71613d; }

.opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.opcion {
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  text-align: center;
  line-height: 1.25;
  transition: border-color .14s, background .14s;
}
.opcion:hover:not(:disabled) { border-color: var(--oro); background: #fdfcf7; }
.opcion.activa { border-color: var(--oro); background: #f6f2ea; }
.opcion:disabled { opacity: .4; cursor: not-allowed; }
.opcion b { display: block; font-size: 13px; }
.opcion span { color: var(--texto-suave); }

.precio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.precio { font-family: var(--fuente-display); font-size: 27px; }
.agotado { font-size: 11px; color: #a8352f; font-weight: 600; }

.btn-agregar {
  background: var(--tinta);
  color: var(--papel);
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: background .15s, color .15s;
  width: 100%;
}
.btn-agregar:hover { background: var(--oro); }
.btn-agregar:disabled { background: #ddd8cc; color: #8d897e; cursor: not-allowed; }

/* ── Carrito ──────────────────────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(17, 18, 14, .55); z-index: 60; }
.cajon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--papel);
  z-index: 70;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(17, 18, 14, .22);
  animation: entrar .22s ease-out;
}
@keyframes entrar { from { transform: translateX(24px); opacity: .4; } }

.cajon-cab { padding: 20px 22px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; }
.cajon-cab h2 { font-family: var(--fuente-display); font-size: 25px; margin: 0; font-weight: 500; }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px; }
.cajon-pie { padding: 18px 22px; border-top: 1px solid var(--linea); background: #faf8f2; }
.cerrar-cajon { background: none; border: none; font-size: 24px; color: var(--texto-suave); line-height: 1; }

.renglon { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.renglon:last-child { border-bottom: none; }
.renglon .info { flex: 1; min-width: 0; }
.renglon .info strong { display: block; font-size: 13.5px; }
.renglon .info span { font-size: 11.5px; color: var(--texto-suave); }
.renglon .cant { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.renglon .cant button { width: 24px; height: 24px; border: 1px solid var(--linea); background: var(--papel); border-radius: 5px; line-height: 1; }
.renglon .importe { font-weight: 600; white-space: nowrap; }

.total-fila { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.total-fila.grande { font-size: 17px; font-weight: 600; border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }

.campo-t { margin-bottom: 12px; }
.campo-t label { display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }
.campo-t input, .campo-t textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--papel);
}
.campo-t input:focus, .campo-t textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(179, 160, 116, .15); }

.btn-principal {
  width: 100%;
  background: var(--oro);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 14px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .15s;
}
.btn-principal:hover { background: #71613d; }
.btn-principal:disabled { background: #d5cfc0; cursor: not-allowed; }
.btn-secundario {
  width: 100%;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.exito-pedido { text-align: center; padding: 30px 10px; }
.exito-pedido .marca-check { font-size: 40px; color: var(--oro); }
.exito-pedido h3 { font-family: var(--fuente-display); font-size: 27px; margin: 10px 0 6px; font-weight: 500; }

/* ── Pie ──────────────────────────────────────────────────── */
.pie {
  background: var(--tinta);
  color: #a9a49a;
  padding: 46px 0 40px;
  text-align: center;
  font-size: 12.5px;
}
.pie .logotipo { justify-content: center; margin-bottom: 16px; }
.pie a { color: var(--champan); }

.aviso-tienda {
  background: #fbf1de;
  color: #8a6316;
  border: 1px solid #f0e0c0;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13px;
  margin: 22px 0 0;
}
.aviso-tienda.error { background: #fbeae9; color: #a8352f; border-color: #f0d6d4; }

.mensaje-vacio { text-align: center; padding: 60px 20px; color: var(--texto-suave); }

@media (max-width: 640px) {
  .portada { padding: 54px 0 60px; }
  .contenedor { padding: 0 16px; }
}

/* ════════════════════════════════════════════════════════════
   Portada, carruseles y detalle de producto
   ════════════════════════════════════════════════════════════ */

.btn-portada {
  display: inline-block;
  margin-top: 26px;
  border: 1px solid rgba(220, 210, 185, .5);
  color: var(--champan);
  padding: 12px 30px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .16s, color .16s, border-color .16s;
}
.btn-portada:hover { background: var(--oro); border-color: var(--oro); color: #fff; }
.btn-portada.oscuro { border-color: var(--linea); color: var(--texto); }
.btn-portada.oscuro:hover { background: var(--tinta); border-color: var(--tinta); color: var(--champan); }

.cierre-portada { text-align: center; padding: 10px 0 60px; }

/* ── Secciones y carruseles ───────────────────────────────── */
.seccion { padding: 44px 0 8px; }
.seccion-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.seccion-cab h2 {
  font-family: var(--fuente-display);
  font-size: clamp(24px, 3.6vw, 33px);
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
}
.seccion-sub { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); }

.flechas { display: flex; gap: 8px; flex-shrink: 0; }
.flecha {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--texto);
  font-size: 19px;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.flecha:hover { background: var(--tinta); border-color: var(--tinta); color: var(--champan); }

.carrusel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.carrusel::-webkit-scrollbar { height: 5px; }
.carrusel::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 999px; }
.carrusel-item {
  flex: 0 0 clamp(230px, 26vw, 270px);
  min-width: 0;
  scroll-snap-align: start;
}
.carrusel-item .producto { height: 100%; }

/* En pantallas táctiles las flechas estorban: se navega deslizando */
@media (hover: none) {
  .flechas { display: none; }
}

/* ── Rejilla y tarjetas ───────────────────────────────────── */
.titulo-seccion {
  font-family: var(--fuente-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 400;
  margin: 10px 0 4px;
}

.miga { font-size: 12px; color: var(--texto-suave); padding: 22px 0 0; }
.miga a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 2px; }
.miga a:hover { color: var(--oro); }

.producto .enlace-titulo { display: block; }
/* El .lienzo va en el selector a propósito: sin él este bloque pierde contra
   «.producto .lienzo img» de arriba, que tiene un elemento más de peso, y el
   logo se estiraría a cubrir el recuadro completo en vez de posarse en medio.
   Es el estado «todavía sin foto», y debe leerse como tal. */
.producto .lienzo .sin-foto {
  width: 34%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: .3;
}
.producto .cinta-agotado { left: auto; right: 12px; background: #a8352f; color: #fff; }
.producto .cuenta-fotos {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(17, 18, 14, .75);
  color: #fff;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
}
.mini-tenue { font-size: 11.5px; color: var(--texto-suave); }

.producto .btn-agregar { display: block; text-align: center; text-decoration: none; }

/* ── Detalle de producto ──────────────────────────────────── */
.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  padding: 26px 0 20px;
  align-items: start;
}

/* Mismo 4:5 que la tarjeta: quien viene de la rejilla debe ver el mismo
   encuadre en grande, no otro recorte. */
.galeria-principal {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #f0ece0, #e4dfd0);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-principal .sin-foto { width: 96px; height: 96px; object-fit: contain; opacity: .35; }

.galeria-tiras {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tira {
  flex: 0 0 74px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  background: #f1eee6;
  transition: border-color .15s;
}
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira.activa { border-color: var(--oro); }

.ficha h1 {
  font-family: var(--fuente-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  margin: 6px 0 6px;
}
.inspira-grande { font-size: 14px; color: var(--texto-suave); margin: 0 0 14px; }
.ficha .etiquetas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
/* pre-line y no normal: el copy se escribe en un textarea, con párrafos. Sin
   esto los saltos de línea se pierden y tres párrafos salen como un solo
   bloque. Colapsa los espacios de más, que es justo lo que se quiere. */
.ficha .descripcion {
  font-size: 14px;
  color: var(--texto-suave);
  line-height: 1.7;
  white-space: pre-line;
}

.bloque-precio {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0 4px;
  border-top: 1px solid var(--linea);
  margin-top: 18px;
}
.precio-grande { font-family: var(--fuente-display); font-size: 40px; line-height: 1; }
.stock-aviso { font-size: 12px; font-weight: 600; }
.stock-aviso.ok { color: #2f7a55; }
.stock-aviso.pocas { color: #b4801f; }
.stock-aviso.agotado { color: #a8352f; }

.selector { margin: 20px 0 4px; }
.selector-titulo {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.opciones-detalle { display: flex; flex-wrap: wrap; gap: 9px; }
.opciones-detalle .opcion { padding: 10px 14px; min-width: 88px; }
.opciones-detalle .opcion em { display: block; font-style: normal; font-weight: 600; margin-top: 3px; font-size: 12px; }
.nota-variante { margin: 12px 0 0; line-height: 1.5; }

.acciones-detalle { display: flex; gap: 12px; margin: 24px 0 12px; align-items: stretch; }
.cantidad {
  display: flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--papel);
  flex-shrink: 0;
}
.cantidad button { width: 42px; align-self: stretch; background: none; border: none; font-size: 18px; color: var(--texto); }
.cantidad button:hover { color: var(--oro); }
.cantidad span { min-width: 34px; text-align: center; font-weight: 600; }
.acciones-detalle .btn-principal { flex: 1; margin: 0; }

.btn-consultar {
  display: block;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  transition: border-color .15s, color .15s;
}
.btn-consultar:hover { border-color: var(--oro); color: var(--oro); }

.piramide { margin-top: 28px; border-top: 1px solid var(--linea); padding-top: 20px; }
.piramide-titulo {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.piramide .nota { display: flex; gap: 14px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid #efece2; }
.piramide .nota:last-child { border-bottom: none; }
.piramide .nivel { flex: 0 0 74px; color: var(--oro); font-weight: 600; font-size: 12px; }

/* ── Franja de valores ────────────────────────────────────── */
.franja-valores { background: var(--papel); border-top: 1px solid var(--linea); margin-top: 30px; }
.valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 44px 22px;
  text-align: center;
}
.valores .valor { display: flex; flex-direction: column; gap: 5px; }
.valores .ico { font-size: 22px; color: var(--oro); }
.valores strong { font-size: 14px; }
.valores span:last-child { font-size: 12.5px; color: var(--texto-suave); }

/* ── Carrito ──────────────────────────────────────────────── */
.renglon-foto {
  width: 52px; height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--linea);
}
.renglon .cant .quitar { border: none; background: none; color: #a8352f; width: auto; margin-left: 6px; font-size: 12px; }
.nota-checkout { font-size: 12.5px; color: var(--texto-suave); margin-top: 0; }
.btn-principal.como-boton { display: block; text-align: center; box-sizing: border-box; }
.exito-pedido p { color: var(--texto-suave); }

.aviso-flotante {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  background: #11120e;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 120;
  font-size: 13px;
  border-left: 3px solid var(--oro);
  max-width: calc(100vw - 32px);
}

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .detalle { grid-template-columns: 1fr; gap: 26px; }
  .valores { grid-template-columns: 1fr; gap: 22px; padding: 34px 22px; }
}

@media (max-width: 640px) {
  .seccion { padding: 32px 0 4px; }
  .carrusel {
    gap: 12px;
    /* el carrusel llega al borde de la pantalla, como en las tiendas nativas */
    margin: 0 -16px;
    padding: 0 16px 12px;
  }
  .galeria-tiras { margin: 12px -16px 0; padding: 0 16px 4px; }
  .acciones-detalle { flex-direction: column; }
  .cantidad { align-self: flex-start; height: 46px; }
  .precio-grande { font-size: 34px; }
}

/* ── Promociones en la tienda ─────────────────────────────── */
.franja-promos {
  background: var(--tinta);
  border-top: 1px solid rgba(220, 210, 185, .14);
  padding: 16px 0;
}
.tira-promos {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tira-promos::-webkit-scrollbar { display: none; }
.promo-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid rgba(220, 210, 185, .3);
  border-radius: 999px;
  padding: 8px 18px;
  color: #e8e4d8;
  font-size: 13px;
  white-space: nowrap;
}
.promo-chip strong {
  font-family: var(--fuente-display);
  font-size: 17px;
  color: var(--champan);
  letter-spacing: .04em;
}
.promo-chip em { font-style: normal; font-size: 11px; color: #8a857a; }

.cinta-promo { background: #a8352f !important; color: #fff !important; }

.promos-detalle { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 14px; }
.promo-linea { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.sello-promo {
  background: #a8352f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.total-fila.promo { color: #a8352f; font-weight: 600; }
.ahorro {
  margin-top: 8px;
  text-align: center;
  background: #f7ece9;
  color: #a8352f;
  border-radius: 8px;
  padding: 7px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   Rejilla responsiva del catálogo
   ════════════════════════════════════════════════════════════
   Antes, debajo de 640 px el catálogo caía a una sola columna: una tarjeta
   enorme por renglón y ocho scrolls para ver ocho productos. Eso se lee como
   una lista de entradas de blog, no como una tienda. Ninguna tienda seria lo
   hace: en el celular siempre se ven dos productos a la vez, porque comparar
   de un vistazo es la mitad de la compra.

   Los cortes no están en números redondos sino donde la tarjeta deja de caber
   con dignidad. Con cuatro columnas antes de 720 px la tarjeta baja de 160 px
   y el nombre se parte en cuatro renglones; con dos columnas arriba de 560 px
   la tarjeta pasa de 260 px y se ve inflada. Por eso hay un escalón de tres en
   medio en vez de saltar de dos a cuatro de golpe.

     hasta 559 px      2 columnas     celular
     560 – 719 px      3 columnas     celular grande y celular acostado
     720 px o más      4 columnas     tablet, laptop y escritorio

   Lo que sí cambia arriba de 720 px es el tamaño de la tarjeta, no cuántas
   hay: con el contenedor topado en 1180 px, cuatro columnas dan 157 px en una
   tablet de 720 y 267 px en un monitor. Por eso el texto de la tarjeta tiene
   sus propios escalones más abajo.
*/

@media (max-width: 1139px) { .productos { gap: 18px; } .carrusel-item { flex: 0 0 24%; } }
@media (max-width: 899px)  { .productos { gap: 16px; } .carrusel-item { flex: 0 0 26%; } }

@media (max-width: 719px) {
  .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .carrusel-item { flex: 0 0 33%; }
}

@media (max-width: 559px) {
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* En el carrusel la tercera tarjeta asoma a propósito: es lo que le avisa
     al dedo que la fila se desliza. */
  .carrusel-item { flex: 0 0 45%; max-width: none; }
}

/* ── La tarjeta, en dos tallas más ────────────────────────────
   La tarjeta de escritorio está calculada contra 268 px de ancho, y solo los
   alcanza arriba de 1140 px. Todo lo que se midió contra ese ancho —el nombre,
   el precio, el botón— se encoge en dos escalones; si no, el nombre se come
   tres renglones, el precio choca con el conteo de presentaciones y el botón
   se desborda.

     hasta 1139 px    tarjeta de 200 a 262 px
     hasta  899 px    tarjeta de 138 a 202 px
*/
@media (max-width: 1139px) {
  .producto .cuerpo { padding: 14px 15px 16px; gap: 8px; }
  .producto h3 { font-size: 20px; }
  .producto .inspira { font-size: 11px; }
  .producto .precio { font-size: 23px; }
  .producto .mini-tenue { font-size: 10.5px; }
  .producto .btn-agregar { padding: 10px; font-size: 12px; }
}

@media (max-width: 899px) {
  .producto { border-radius: 11px; }
  .producto .cuerpo { padding: 11px 12px 13px; gap: 7px; }
  .producto h3 { font-size: 17px; }
  .producto .inspira { font-size: 10.5px; line-height: 1.35; }
  .producto .etiquetas { gap: 5px; }
  /* Una etiqueta larga no debe empujar la tarjeta a otro renglón */
  .producto .pastilla {
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: .05em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Si el precio y el conteo ya no caben juntos, el conteo se baja solo */
  .producto .precio-fila { flex-wrap: wrap; gap: 2px 8px; }
  .producto .precio { font-size: 20px; }
  .producto .mini-tenue { font-size: 10px; }
  .producto .btn-agregar { padding: 9px 6px; font-size: 11.5px; letter-spacing: .02em; }
  .producto .cinta { top: 8px; left: 8px; font-size: 8.5px; padding: 3px 8px; letter-spacing: .1em; }
  .producto .cinta-agotado { left: auto; right: 8px; }
  .producto .cuenta-fotos { bottom: 7px; right: 7px; font-size: 9px; padding: 2px 7px; }
}