/* ==========================================================================
   Núcleo — la capa de venta: tarjeta de producto, ficha y carrito.

   Está aquí y no en el styles.css del sitio a propósito. Es interfaz que
   comparten todos los catálogos: si naciera dentro de la hoja de un sitio,
   cada catálogo nuevo se la copiaría y un arreglo dejaría de heredarse, que
   es justo lo que este proyecto existe para evitar.

   Se carga DESPUÉS de la hoja del sitio, así que da por hechas sus variables
   de marca. Todas llevan valor de reserva —var(--marron, #4a2617)— para que
   un catálogo con una hoja propia mínima no se quede sin colores.
   ========================================================================== */

/* ======================================================== TARJETA DE PRODUCTO
   La foto manda: ocupa cuatro quintos de la tarjeta y el texto se aparta
   debajo, sin caja ni borde. Una tienda de ropa se mira, no se lee. */

.card { position: relative; }

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r, 10px);
  background: var(--papel, #f4f4f4);
  aspect-ratio: 3 / 4;
}
.card__foto, .card__foto img { display: block; width: 100%; height: 100%; }
.card__foto img {
  object-fit: cover;
  transition: transform 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.card:hover .card__foto img { transform: scale(1.05); }

/* ---------------------------------------------------------- distintivos */
.card__desc,
.card__agotado {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-sm, 6px);
  background: var(--blanco, #fff);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}
.card__desc { color: var(--verde, #1f8f52); }
.card__desc span { font-weight: 500; }
.card__agotado {
  top: auto; bottom: 12px;
  background: rgba(25, 25, 25, 0.84);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Agotado no se esconde: se apaga. Sigue mereciendo la pena verlo. */
.card--agotado .card__foto img { filter: grayscale(1); opacity: 0.72; }

/* ------------------------------------------------------------ acciones */
.card__acciones {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  display: grid;
  gap: 8px;
}
.card__accion {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blanco, #fff);
  color: var(--tinta, #191919);
  box-shadow: 0 2px 10px rgba(25, 25, 25, 0.12);
  /* Entran desde la derecha en escalera, no todas a la vez. */
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.28s var(--ease, ease), transform 0.28s var(--ease, ease),
              background 0.2s, color 0.2s;
}
.card__accion:nth-child(2) { transition-delay: 0.05s; }
.card:hover .card__accion,
.card:focus-within .card__accion { opacity: 1; transform: none; }
.card__accion:hover {
  background: var(--marron, #4a2617);
  color: var(--blanco, #fff);
}
/* Con el teclado no hay «hover»: el foco las trae igual. */
.card__accion:focus-visible { opacity: 1; transform: none; }

/* En táctil no existe el paso del ratón por encima: se quedan puestas. */
@media (hover: none) {
  .card__accion { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- cuenta atrás */
.cuenta {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-sm, 6px);
  background: var(--ambar, #f7b23b);
  color: var(--marron-osc, #331a0f);
  overflow: hidden;
}
.cuenta__bloque {
  position: relative;
  padding: 7px 2px;
  text-align: center;
  line-height: 1.15;
}
.cuenta__bloque + .cuenta__bloque::before {
  content: ":";
  position: absolute;
  left: -2px; top: 50%;
  transform: translateY(-60%);
  font-weight: 700;
  opacity: 0.55;
}
.cuenta b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cuenta i {
  display: block;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* ------------------------------------------------------------- el texto */
.card__body { padding: 14px 2px 0; }

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.card__cat { font-size: 0.76rem; color: var(--tinta-2, #6b6b6b); }

.card__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.card__title a { transition: color 0.2s var(--ease, ease); }
.card:hover .card__title a { color: var(--marron, #4a2617); }

.card__precios { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.card__precio { font-size: 1.05rem; font-weight: 600; }
.card__precio--sin {
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
  color: var(--tinta-2, #6b6b6b);
}
.card__antes {
  font-size: 0.9rem;
  color: var(--tinta-3, #8f8f8f);
  text-decoration-thickness: 1px;
}

/* ================================================================== FICHA */
.section--ficha { padding-top: 46px; }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.ficha[hidden] { display: none; }

.ficha__galeria { position: relative; }

/* Carril de fotos con ajuste por toma: se arrastra con el dedo igual que se
   pasa con las flechas, sin dos maneras distintas de moverse. */
.ficha__carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--r-lg, 16px);
  background: var(--papel, #f4f4f4);
  scrollbar-width: none;
}
.ficha__carril::-webkit-scrollbar { display: none; }

.ficha__toma { margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; }
.ficha__toma img { width: 100%; height: 100%; object-fit: cover; }

.ficha__flecha {
  position: absolute;
  top: calc(50% - 60px);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tinta, #191919);
  box-shadow: 0 2px 12px rgba(25, 25, 25, 0.16);
  opacity: 0;
  transition: opacity 0.25s var(--ease, ease), background 0.2s;
}
.ficha__flecha--prev { left: 14px; }
.ficha__flecha--next { right: 14px; }
.ficha__galeria:hover .ficha__flecha,
.ficha__flecha:focus-visible { opacity: 1; }
.ficha__flecha:hover { background: #fff; }
/* En táctil no hay paso del ratón: se arrastra, y las flechas sobran. */
@media (hover: none) { .ficha__flecha { display: none; } }

.ficha__contador {
  position: absolute;
  right: 14px;
  top: calc(100% - 150px);
  margin: 0;
  padding: 4px 11px;
  border-radius: var(--r-pill, 999px);
  background: rgba(25, 25, 25, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.ficha__minis { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ficha__mini {
  width: 74px; height: 88px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  background: none;
  transition: border-color 0.2s var(--ease, ease);
}
.ficha__mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha__mini.is-active { border-color: var(--marron, #4a2617); }

.ficha__titulo {
  margin: 12px 0 6px;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ficha__precio {
  margin: 10px 0 18px;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ficha__precio--sin {
  font-size: 1.1rem;
  font-weight: 500;
  font-style: italic;
  color: var(--tinta-2, #6b6b6b);
}
.ficha__precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ficha__antes {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--tinta-3, #8f8f8f);
  text-decoration-thickness: 1px;
}
.ficha__descuento {
  padding: 4px 10px;
  border-radius: var(--r-sm, 6px);
  background: rgba(31, 143, 82, 0.12);
  color: var(--verde, #1f8f52);
  font-size: 0.78rem;
  font-weight: 600;
}

.ficha__agotado-pill {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 13px;
  border-radius: var(--r-pill, 999px);
  background: rgba(179, 57, 47, 0.11);
  color: var(--rojo, #b3392f);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ficha__descripcion { margin: 0 0 20px; color: var(--tinta-2, #6b6b6b); max-width: 52ch; }

.ficha__destacados {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px; padding: 0;
}
.ficha__destacados li {
  padding: 6px 13px;
  border-radius: var(--r-pill, 999px);
  background: var(--papel, #f4f4f4);
  font-size: 0.79rem;
}

/* ------------------------------------------------------------ variantes */
/* --------------------------------------------------------- colores
   Muestras redondas, no etiquetas de texto: el color se reconoce antes de
   leerlo. El nombre va al lado del título, que es donde se busca cuando la
   muestra no basta —dos azules parecidos, por ejemplo. */
.ficha__colores { margin: 0 0 22px; }
.ficha__color-actual {
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta, #191919);
}
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color-muestra {
  width: 34px; height: 34px;
  padding: 3px;
  display: grid; place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  transition: border-color 0.2s var(--ease, ease);
}
.color-muestra span {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* Un borde interior para que el blanco y los claros no desaparezcan sobre
     el fondo de la ficha. */
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.15);
}
.color-muestra:hover { border-color: var(--linea-2, #d8d8d8); }
.color-muestra.is-active { border-color: var(--marron, #4a2617); }

.ficha__variantes { margin: 0 0 24px; }
.ficha__variantes-titulo {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2, #6b6b6b);
}
.variantes { display: flex; flex-wrap: wrap; gap: 9px; }

.variante {
  min-width: 62px;
  padding: 11px 16px;
  border: 1.5px solid var(--linea, #e7e7e7);
  border-radius: var(--r-sm, 6px);
  background: #fff;
  text-align: center;
  transition: border-color 0.2s var(--ease, ease), background 0.2s, color 0.2s;
}
.variante:hover { border-color: var(--marron, #4a2617); }
.variante.is-active {
  background: var(--marron, #4a2617);
  border-color: var(--marron, #4a2617);
  color: #fff;
}
.variante__label { display: block; font-size: 0.85rem; font-weight: 500; }
.variante__precio { display: block; font-size: 0.76rem; opacity: 0.7; }
.variante__off {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rojo, #b3392f);
}
/* Una talla agotada se ve y no se puede elegir: esconderla haría creer que
   esa talla no existe. */
.variante.is-off { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.variante.is-off:hover { border-color: var(--linea, #e7e7e7); }

.ficha__aviso { margin: 10px 0 0; color: var(--rojo, #b3392f); font-size: 0.85rem; font-weight: 500; }
.ficha__aviso[hidden] { display: none; }

/* -------------------------------------------------------------- comprar */
.ficha__comprar { display: flex; gap: 12px; align-items: center; margin: 0 0 28px; flex-wrap: wrap; }
.ficha__anadir { flex: 1 1 220px; width: auto; padding-block: 16px; }
.ficha__agotado { margin: 0; color: var(--tinta-2, #6b6b6b); font-style: italic; }

.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--linea, #e7e7e7);
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  flex: none;
}
.cantidad button {
  width: 42px; height: 50px;
  border: 0; background: none;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.cantidad button:hover { background: var(--papel, #f4f4f4); }
.cantidad input {
  width: 44px; height: 50px;
  padding: 0; border: 0; border-radius: 0;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cantidad input:focus { box-shadow: none; }

@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; gap: 28px; }
  .ficha__precio { font-size: 1.5rem; }
}

/* ================================================================ CARRITO */
.carrito-btn {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--marron, #4a2617);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(25, 25, 25, 0.24);
  transition: transform 0.25s var(--ease, ease);
}
.carrito-btn:hover { transform: translateY(-2px); }
.carrito-btn[hidden] { display: none; }
.carrito-btn__num { font-variant-numeric: tabular-nums; }

/* El contador de la barra: un punto ámbar sobre el icono. */
.acciones__num {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill, 999px);
  background: var(--ambar, #f7b23b);
  color: var(--marron-osc, #331a0f);
  font-size: 0.62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.acciones__num[hidden] { display: none; }

.carrito {
  position: fixed; inset: 0; z-index: 120;
  visibility: hidden;
  /* El retardo es la clave: al cerrar, `visibility` espera a que el panel
     termine de salir. Sin él desaparecía de golpe y la animación solo se
     veía al abrir. */
  transition: visibility 0s linear 0.36s;
}
.carrito.is-open { visibility: visible; transition-delay: 0s; }

.carrito__fondo {
  position: absolute; inset: 0;
  background: rgba(25, 25, 25, 0.48);
  opacity: 0;
  transition: opacity 0.3s var(--ease, ease);
}
.carrito.is-open .carrito__fondo { opacity: 1; }

.carrito__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(420px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 50px rgba(25, 25, 25, 0.2);
  transform: translateX(100%);
  transition: transform 0.36s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.carrito.is-open .carrito__panel { transform: none; }

.carrito__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--linea, #e7e7e7);
}
.carrito__titulo { margin: 0; font-size: 1.1rem; }
.carrito__cerrar {
  border: 0; background: none;
  font-size: 1.8rem; line-height: 1;
  color: var(--tinta-2, #6b6b6b);
}

.carrito__lineas { flex: 1 1 auto; overflow-y: auto; padding: 6px 24px; }
.carrito__vacio { padding: 44px 24px; text-align: center; color: var(--tinta-2, #6b6b6b); }
.carrito__vacio[hidden] { display: none; }

.carrito-linea {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea, #e7e7e7);
}
.carrito-linea__img {
  width: 56px; height: 68px;
  border-radius: var(--r-sm, 6px);
  object-fit: cover;
  background: var(--papel, #f4f4f4);
}
.carrito-linea__img--vacia { display: block; }
.carrito-linea__nombre { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.carrito-linea__variante { margin: 2px 0 0; font-size: 0.78rem; color: var(--tinta-2, #6b6b6b); }
.carrito-linea__precio { margin: 3px 0 0; font-weight: 600; font-size: 0.9rem; }

.carrito-linea__cantidad {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linea, #e7e7e7);
  border-radius: var(--r-sm, 6px);
}
.carrito-linea__cantidad button {
  width: 28px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: none;
  transition: color 0.2s, background 0.2s;
}
.carrito-linea__cantidad .es-borrar { color: var(--rojo, #b3392f); }
.carrito-linea__cantidad .es-borrar:hover { background: rgba(179, 57, 47, 0.10); }
.carrito-linea__cantidad span {
  min-width: 22px; text-align: center;
  font-weight: 600; font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.carrito-linea__quitar {
  border: 0; background: none;
  font-size: 1.25rem; line-height: 1;
  color: var(--tinta-3, #8f8f8f);
}
.carrito-linea__quitar:hover { color: var(--rojo, #b3392f); }

.carrito__pie {
  padding: 18px 24px 24px;
  border-top: 1px solid var(--linea, #e7e7e7);
  background: var(--papel-2, #fafafa);
}
.carrito__pie[hidden] { display: none; }

.carrito__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.carrito__total strong { font-size: 1.35rem; font-weight: 600; }

/* Verde de WhatsApp, no el color de la marca: aquí el color es información
   —dice a dónde lleva el botón— y conviene que se reconozca. */
.carrito__pedir {
  --btn-bg: #25d366;
  --btn-fg: #06331a;
  --btn-bg-hover: #1eb85a;
  --btn-shadow: rgba(37, 211, 102, 0.35);
}
.carrito__pedir.is-disabled { opacity: 0.5; cursor: not-allowed; }
/* Mientras se guarda el pedido —un instante, antes de saltar al chat— el
   botón deja de responder y lo dice. Sin esto se puede pulsar dos veces y
   entran dos pedidos iguales. */
.carrito__pedir.is-loading { opacity: 0.7; pointer-events: none; }

.carrito__vaciar {
  display: block; width: 100%;
  margin-top: 10px; padding: 8px;
  border: 0; background: none;
  color: var(--tinta-2, #6b6b6b);
  font-size: 0.84rem;
  text-decoration: underline;
}
.carrito__nota {
  margin: 12px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--tinta-2, #6b6b6b);
}

@media (max-width: 600px) {
  .carrito-btn { right: 14px; bottom: 14px; padding: 12px 17px; }
}

/* ==========================================================================
   El pedido visto por el cliente (pedido.php)

   Sin cuenta ni contraseña: llega por el enlace que él mismo mandó al chat.
   Es una página de consulta y punto —qué pedí, cuánto y cómo va—, así que no
   compite con el catálogo: una columna estrecha, sin fotos y sin acciones que
   no sean escribir o seguir mirando.
   ========================================================================== */
.seguimiento {
  max-width: 640px;
  margin-inline: auto;
}
.seguimiento--vacio { text-align: center; }

.seguimiento__cab {
  text-align: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linea, #e7e7e7);
  margin-bottom: 26px;
}
.seguimiento__num {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3, #8f8f8f);
}
.seguimiento__cab .section-title { margin: 0; }
.seguimiento__fecha {
  margin: 6px 0 20px;
  font-size: 0.86rem;
  color: var(--tinta-2, #6b6b6b);
}

/* El estado es lo primero que se viene a mirar: se le da tamaño de titular
   pequeño, no de etiqueta perdida entre el resto. */
.seguimiento__estado {
  display: inline-block;
  margin: 0;
  padding: 8px 18px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.seguimiento__estado.es-nuevo   { background: var(--ambar-suave, #fdf1dc); color: var(--marron-osc, #331a0f); }
.seguimiento__estado.es-listo   { background: rgba(31, 143, 82, 0.12); color: #16663a; }
.seguimiento__estado.es-anulado { background: rgba(25, 25, 25, 0.08); color: var(--tinta-2, #6b6b6b); }

.seguimiento__ayuda {
  margin: 12px auto 0;
  max-width: 44ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tinta-2, #6b6b6b);
}

.seguimiento__lineas { list-style: none; margin: 0; padding: 0; }
/* Con foto: la columna de la izquierda tiene ancho fijo aunque la línea no
   tenga imagen —un producto retirado del catálogo se queda sin ella—, para
   que los nombres no bailen de una fila a otra. Y `align-items: center` en
   vez de `baseline`: con una foto de 80 px de alto al lado, alinear por la
   base del texto deja la fila descuadrada. */
.seguimiento__linea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea, #e7e7e7);
}
.seguimiento__foto {
  width: 64px; height: 80px;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  background: var(--papel, #f4f4f4);
}
.seguimiento__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Las unidades bajan a la segunda línea del nombre: en la columna de la
   izquierda las ocupa ahora la foto, que dice mucho más de un vistazo. */
.seguimiento__qty {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2, #6b6b6b);
}

/* --------------------------------------------------------------- envío
   Solo sale cuando hay algo que decir. Un «Envío: —» no informa de nada y
   sugiere que falta algo por pasar. */
.seguimiento__envio {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--linea, #e7e7e7);
  border-radius: var(--r, 10px);
  background: var(--papel-2, #fafafa);
}
.seguimiento__envio-tit {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2, #6b6b6b);
}
.seguimiento__envio-quien { margin: 0; font-weight: 600; }
.seguimiento__envio-guia {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 6px 0 0;
  font-size: 0.92rem;
}
.seguimiento__envio-guia span { color: var(--tinta-2, #6b6b6b); }
/* El número de guía se copia y se pega en la web de la agencia, así que se
   deja seleccionar entero y se escribe con cifras de ancho fijo. */
.seguimiento__envio-guia b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  user-select: all;
}
.seguimiento__recibo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--linea, #e7e7e7);
  border-radius: var(--r-sm, 6px);
  background: var(--blanco, #fff);
  font-size: 0.86rem;
  font-weight: 500;
}
.seguimiento__recibo img {
  display: block;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--papel, #f4f4f4);
}
.seguimiento__nombre { font-weight: 500; }
.seguimiento__detalle {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--tinta-2, #6b6b6b);
}
.seguimiento__importe {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.seguimiento__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 0;
  font-size: 1.05rem;
}
.seguimiento__total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.seguimiento__nota {
  margin: 18px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--tinta-2, #6b6b6b);
}

.seguimiento__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 560px) {
  .seguimiento__acciones .btn { flex: 1 1 100%; justify-content: center; }
}

/* La puerta de servicio al panel: existe, pero no compite con nada de lo que
   el cliente ha venido a ver. */
.seguimiento__panel {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea, #e7e7e7);
  font-size: 0.8rem;
}
.seguimiento__panel a {
  color: var(--tinta-3, #8f8f8f);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.seguimiento__panel a:hover { color: var(--tinta, #191919); }

/* El mismo precio en bolívares, cuando hay tasa puesta.

   Pequeño y apagado a propósito: es una referencia para hacerse una idea, no
   otro precio. El de verdad —el del pedido y el del mensaje de WhatsApp— es el
   de arriba, y si los dos pesaran lo mismo habría que mirar dos veces para
   saber cuál manda. */
/* Va pegada al precio, no a la descripción: es la misma cifra dicha de otra
   manera, y el aire tiene que separarla de lo siguiente, no de aquello a lo
   que pertenece.

   Las dos cuentas: el precio deja 18 px debajo, así que el -24 se los come y
   sube la línea 6 px más —los márgenes contiguos se funden y con uno negativo
   se suman—, y el 18 de abajo devuelve la separación que el precio tenía con
   la descripción. Sin ese 18, la línea se quedaba tocando el texto y parecía
   parte de él.

   El negativo no la hace chocar con el precio: aquella cifra va a 1,85rem con
   la interlínea del cuerpo, y eso deja un buen dedo de aire por debajo de los
   números que es lo que se está recortando aquí. */
.ficha__bolivares {
  margin: -24px 0 18px;
  font-size: 0.86rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2, #6b6b6b);
}

/* ========================================================== COLECCIONES
   Una colección es una etiqueta puesta a varias prendas. Su tarjeta es la
   foto de lo último que entró, el nombre con almohadilla —para que se lea
   como lo que es— y cuántas prendas la forman.

   Carril y no rejilla: son pocas y variables, y en una rejilla de tres una
   sola colección se estiraría hasta ocupar el ancho entero. */
.prod-cab__mas {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-2, #6b6b6b);
  white-space: nowrap;
  transition: color 0.2s var(--ease, ease);
}
.prod-cab__mas:hover { color: var(--marron, #4a2617); }

.colecciones {
  display: grid;
  grid-auto-flow: column;
  /* Ancho fijo, como el carril de producto: una colección no se ensancha
     porque haya menos. */
  grid-auto-columns: 220px;
  gap: 16px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.colecciones::-webkit-scrollbar { display: none; }

.coleccion { scroll-snap-align: start; }
.coleccion__link { display: block; }
.coleccion__media {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r, 10px);
  overflow: hidden;
  background: var(--papel, #f4f4f4);
}
.coleccion__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.coleccion__link:hover .coleccion__media img { transform: scale(1.05); }

.coleccion__cuerpo { display: block; padding: 12px 2px 0; }
.coleccion__nombre {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease, ease);
}
.coleccion__link:hover .coleccion__nombre { color: var(--marron, #4a2617); }
.coleccion__cuantos {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--tinta-2, #6b6b6b);
}

/* ========================================================= BARRA INFERIOR
   Solo en móvil y tablet. En un teléfono la navegación vive abajo, donde
   llega el pulgar, y no detrás de un botón en la esquina de arriba — que es
   justo la esquina más lejos de la mano.

   No sustituye al menú de la cabecera: aquel sigue teniendo las categorías
   dentro de Catálogo. Esta barra son los cuatro sitios a los que se va todo
   el rato.

   Va en retail.css y no en la hoja del sitio porque es la misma barra para
   cualquier catálogo: si naciera dentro de un sitio, cada catálogo nuevo se
   la copiaría y un arreglo dejaría de heredarse. */
.tabbar { display: none; }

@media (max-width: 1020px) {
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* `env(safe-area-inset-bottom)` es la franja del iPhone con gesto en
       lugar de botón: sin esto, la última fila de iconos queda debajo de la
       barra del sistema y se pulsa el gesto en vez del botón. */
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea, #e7e7e7);
  }

  .tabbar__item {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--tinta-2, #6b6b6b);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.2s var(--ease, ease);
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item.is-active { color: var(--marron, #4a2617); font-weight: 600; }
  .tabbar__item:active { color: var(--marron, #4a2617); }

  /* El contador del carrito cuelga del icono, no de la celda: pegado a la
     esquina del dibujo se lee como suyo. */
  .tabbar__icono { position: relative; display: block; }
  .tabbar__num {
    position: absolute;
    top: -5px; right: -9px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--marron, #4a2617);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
  }

  /* Sitio para la barra: sin esto tapa el final del pie y el último enlace
     no se puede pulsar. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* Y el botón flotante del carrito sobra: ya está en la barra, y dos
     carritos en la misma pantalla no ayudan a encontrarlo antes. */
  .carrito-btn { display: none !important; }
}