/* ==========================================================================
   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;
}

/* ------------------------------------------- lo que cambió al prepararlo
   Una línea que al final no va se TACHA y se apaga, no desaparece: el cliente
   la pidió y tiene que ver que no está, que es justo el motivo por el que
   vuelve al enlace. Borrarla dejaría la lista más corta sin explicar por qué.

   Las marcas son dos píldoras pequeñas y de colores contrarios —lo que entra
   en verde, lo que sale en rojo— para que se lean de un vistazo sin tener que
   comparar cantidades a mano. */
.seguimiento__intro {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm, 6px);
  background: var(--papel, #f4f4f4);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--tinta-2, #6b6b6b);
}

.seguimiento__linea.is-fuera { opacity: 0.6; }
/* El tachón va SOLO en el nombre de la prenda. Puesto en el bloque entero se
   heredaba hacia dentro —y `text-decoration` no se puede apagar desde el
   hijo—, así que tachaba también la talla y las cantidades: la línea se leía
   como si estuviera todo mal, en vez de como «esto no va». */
.seguimiento__linea.is-fuera .seguimiento__prenda { text-decoration: line-through; }

.seguimiento__marca {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.seguimiento__marca--mas   { background: #e4f4ea; color: #1f6d42; }
.seguimiento__marca--menos { background: #f7e3e3; color: #94302f; }

/* «pediste 3», al lado de las unidades que van. En una línea aparte no: es un
   matiz de esa cifra, no otro dato. */
.seguimiento__pediste {
  margin-left: 8px;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--tinta-3, #8f8f8f);
  text-decoration: line-through;
}

.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__total-antes {
  margin: 4px 0 0;
  text-align: right;
  font-size: 0.78rem;
  color: var(--tinta-3, #8f8f8f);
}

.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); }

/* ------------------------------------------------------------------ rebajas
   La franja del final de la portada. La tarjeta en sí —`.oferta`— es de la
   hoja del sitio, porque es marca; lo que va aquí es lo que pasa cuando hay
   más de una, que es igual en cualquier catálogo.

   Con una sola, esto no hace nada: una rejilla de una columna es la franja de
   siempre. Con dos o más se convierte en carril, y ahí está la razón de que
   exista la clase. Apiladas, tres rebajas serían tres pantallas de scroll
   para decir tres frases, y ninguna parecería la principal. */
.ofertas { display: grid; }

.ofertas--carril {
  grid-auto-flow: column;
  /* Las tarjetas no llenan el ancho: la siguiente asoma por la derecha, que
     es lo que dice «hay más» sin escribirlo. */
  grid-auto-columns: min(88%, 860px);
  gap: 18px;
  /* Sangra a los dos lados para que el carril salga por el borde de la
     pantalla en vez de morir dentro de la columna de texto. */
  margin-inline: var(--sangra, calc(50% - 50vw));
  padding-inline: max(20px, calc(50vw - var(--wrap, 1200px) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ofertas--carril::-webkit-scrollbar { display: none; }
/* La parada es la tarjeta y no `> *`: es la misma lección que dejó el carril
   de categorías, donde un envoltorio sin caja se llevaba el snap y el carril
   volvía solo al principio. */
.ofertas--carril .oferta {
  scroll-snap-align: start;
  height: 100%;
}

@media (max-width: 1020px) {
  .ofertas--carril { grid-auto-columns: 88%; gap: 14px; padding-inline: 20px; }
}

.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.

       Los 18 px de suelo no son estética, son la razón de que la barra
       funcione al primer toque. Con 8 px, el centro de cada pestaña caía a
       unos 35 px del borde inferior de la pantalla — justo dentro de la
       franja que Chrome y Safari de móvil se reservan para sacar su propia
       barra de direcciones cuando está plegada. El primer toque se lo
       quedaba el navegador para desplegarla y solo el segundo llegaba al
       enlace: de ahí lo de «hay que pulsar dos veces». Subiendo los iconos,
       el objetivo queda fuera de esa franja. */
    padding: 9px 6px calc(18px + env(safe-area-inset-bottom, 0px));
    /* Opaca, y no cristal esmerilado. `backdrop-filter` en un elemento fijo
       obliga al navegador a componer una capa nueva sobre todo lo que pasa
       por debajo al hacer scroll, y en iOS es una fuente conocida de toques
       que se pierden. Encima de fotos de ropa, un blanco macizo también se
       lee mejor que un velo translúcido. */
    background: var(--blanco, #fff);
    border-top: 1px solid var(--linea, #e7e7e7);
    box-shadow: 0 -6px 22px rgba(25, 25, 25, 0.07);
    /* Sin esto el navegador guarda el toque un instante por si viene un
       segundo y es un doble toque para hacer zoom. En una barra de
       navegación ese instante solo sirve para que la pulsación parezca que
       no ha llegado. */
    touch-action: manipulation;
  }

  .tabbar__item {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    /* 52 px de alto mínimo: es el objetivo táctil que recomiendan tanto Apple
       como Google, y aquí además aleja el centro del borde de la pantalla. */
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--tinta-2, #6b6b6b);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    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(80px + 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; }
}

/* ============================================ QUE NO SE HAGA ZOOM AL ESCRIBIR
   Safari de iOS amplía la página entera al enfocar un campo cuya letra mida
   MENOS DE 16 PX. Los campos de aquí están a 0,9 rem —14,4 px—, así que
   tocar el buscador del catálogo daba un salto de escala, y al salir del
   campo la página se quedaba ampliada: se ve enorme, hay que hacer pinza para
   volver, y deja de parecer una aplicación.

   SE ARREGLA SUBIENDO LA LETRA A 16, no con
   `maximum-scale=1, user-scalable=no` en el viewport. Esa es la receta que
   circula y es mala idea por dos motivos: le quita la pinza para ampliar a
   quien no ve bien —un fallo de accesibilidad de manual— y además Safari la
   ignora desde iOS 10, así que ni siquiera funciona.

   Va en la hoja del motor y no en la del sitio porque la hoja del sitio se
   carga ANTES que esta: puesta allí, cualquier regla de aquí con la misma
   especificidad la pisaría.

   `!important` porque esto tiene que ganarle a la regla de CADA componente
   —el buscador, el select de orden, el contador del carrito—, y perder una
   sola significa que esa pantalla salta al tocarla. No es un ajuste de
   diseño: es la diferencia entre que la página se amplíe o no.

   La condición lleva las dos formas a propósito: por ancho para los teléfonos
   y por `hover: none` para las tabletas, que en horizontal pasan de 1020 px y
   se quedarían fuera. */
@media (max-width: 1020px), (hover: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}