/* ==========================================================================
   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;
}
/* SIN OPACIDAD, y no es un descuido: «Días», «Horas», «Min» y «Seg» miden
   9,3 px, que es el texto más pequeño de todo el catálogo. Llevaban un
   `opacity: 0.75` que le come una cuarta parte del contraste a un texto que ya
   no va sobrado, y eso lo pagan los temas de fondo suave: medido en los cuatro,
   con esa opacidad Editorial caía a 3,71:1 y Cosméticos V2 a 3,29:1. Con 0,85
   seguían suspendiendo los dos; sin ella pasan los cuatro.

   La jerarquía no se pierde: la etiqueta ya mide dos tercios del número y va un
   peso por debajo. Bajar además la opacidad era decir tres veces lo mismo, y la
   tercera era la que se cobraba en legibilidad. */
.cuenta i {
  display: block;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------- 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);
}
/* EL PRECIO TACHADO VA EN EL SECUNDARIO, NO EN EL TERCIARIO, y esto es la
   corrección de un uso que estaba mal en NUEVE sitios de este archivo.

   Las cuatro hojas de tema declaran `--tinta-3` con su límite escrito al lado
   —«terciario: solo texto grande o iconos»— porque da entre 3,0 y 3,3:1. Y este
   archivo lo estaba usando para texto de 12,5 a 20 px: el precio tachado, los
   títulos de la página de contacto, el seguimiento del pedido. Texto pequeño
   pide 4,5:1, así que los cuatro temas salían suspendiendo en las mismas
   frases; medido, entre 2,83 y 3,66:1 según el tema y el fondo.

   No es un color mal elegido: es un token usado fuera de su contrato. Se
   arregla pidiendo el que corresponde —`--tinta-2` da entre 5,4 y 6,2:1 en las
   cuatro hojas— y no bajando el valor de `--tinta-3`, que sigue sirviendo para
   lo que dice servir.

   El único uso de `--tinta-3` que se quedó es `.carrito-linea__quitar`, que es
   un icono. Al añadir texto pequeño gris, mirar cuál de los dos se pide. */
.card__antes {
  font-size: 0.9rem;
  color: var(--tinta-2, #6b6b6b);
  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-2, #6b6b6b);
  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; }
}

/* ==========================================================================
   ELEGIR TALLA DESDE LA PARRILLA

   Lo que abre la bolsa de una tarjeta cuando el producto viene en tallas.

   VA CENTRADO Y NO ES UN CAJÓN LATERAL como el carrito, y la diferencia no es
   de gusto: el cajón es un sitio al que se va —el pedido, que está ahí
   mientras se navega—, y esto es una pregunta que interrumpe. Una pregunta se
   pone delante y se responde; se contesta y desaparece.

   Se abre con `is-open`, igual que el carrito y con el mismo retardo en
   `visibility`, para que la salida se vea entera en lugar de cortarse.

   Los mandos de dentro —`.colores`, `.color-muestra`, `.variantes`,
   `.variante`— son LOS MISMOS de la ficha y se estilan una sola vez, más
   arriba en este archivo. Elegir una talla tiene que verse igual en los dos
   sitios: son la misma decisión tomada desde dos pantallas.
   ========================================================================== */
.elegir {
  position: fixed; inset: 0; z-index: 130;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.elegir.is-open { visibility: visible; transition-delay: 0s; }

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

.elegir__panel {
  position: absolute;
  top: 50%; left: 50%;
  width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 40px);
  overflow-y: auto;
  border-radius: var(--r-lg, 16px);
  background: var(--blanco, #fff);
  box-shadow: 0 24px 60px rgba(25, 25, 25, 0.28);
  /* Entra creciendo un pelo desde el centro. La traslación va en el mismo
     `transform` que la escala porque son la misma propiedad: separarlas en
     `top`/`left` animaría la maquetación en vez de la pintura. */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.3s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 0.3s var(--ease, ease);
}
.elegir.is-open .elegir__panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.elegir__cerrar {
  position: absolute;
  top: 8px; right: 12px;
  z-index: 2;
  border: 0; background: none;
  font-size: 1.9rem; line-height: 1;
  color: var(--tinta-2, #6b6b6b);
}
.elegir__cerrar:hover { color: var(--tinta, #191919); }

.elegir__cuerpo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}

.elegir__foto {
  display: block;
  /* La foto llena su columna entera, de esquina a esquina del cuadro: es lo
     que hace que se reconozca la prenda de la que se viene sin leer nada. */
  height: 100%;
  min-height: 260px;
  border-radius: var(--r-lg, 16px) 0 0 var(--r-lg, 16px);
  overflow: hidden;
  background: var(--papel, #f4f4f4);
}
.elegir__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.elegir__datos { padding: 26px 26px 24px; }

.elegir__titulo {
  margin: 0 0 8px;
  /* Sitio para la cruz de cerrar, que va en absoluto sobre esta esquina. */
  padding-right: 26px;
  font-size: 1.16rem;
  line-height: 1.3;
}

.elegir__precios {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 20px;
}
.elegir__precio { font-size: 1.2rem; font-weight: 600; }
.elegir__antes {
  font-size: 0.92rem;
  color: var(--tinta-2, #6b6b6b);
}

.elegir__grupo { margin-bottom: 18px; }
.elegir__etiqueta {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2, #6b6b6b);
}
/* El nombre del color elegido, al lado de su etiqueta. En caja baja y en el
   color de la tinta: es un dato, no otro rótulo. */
.elegir__color-actual {
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta, #191919);
}

.elegir__aviso {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--rojo, #b3392f);
}

.elegir__anadir { margin-bottom: 14px; }
.elegir__anadir[disabled] { opacity: 0.45; pointer-events: none; }

/* El enlace a la ficha, discreto: es la salida para quien quería leer el
   producto y no solo pedirlo, no una segunda llamada a la acción. */
.elegir__ficha {
  display: block;
  text-align: center;
  font-size: 0.86rem;
  color: var(--tinta-2, #6b6b6b);
}
.elegir__ficha:hover { color: var(--marron, #4a2617); }

/* En estrecho la foto pasa a ser una banda de arriba. Mantenerla de pie a la
   izquierda dejaba los mandos en una columna de 130 px, y elegir una talla en
   una rejilla de un botón por fila es peor que no ver la foto entera. */
@media (max-width: 620px) {
  .elegir__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .elegir__foto {
    height: 180px;
    min-height: 0;
    border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
  }
  .elegir__datos { padding: 20px 20px 22px; }

  /* AQUÍ LA CRUZ SE APOYA SOBRE LA FOTO, y en escritorio no: allí cae sobre la
     columna blanca de los datos. Una aspa gris sobre una fotografía se pierde
     —y las de este catálogo son de todo tipo, así que no hay un color que
     sirva—, de modo que se le pone su propio disco debajo. */
  .elegir__cerrar {
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--blanco, #fff);
    box-shadow: 0 2px 10px rgba(25, 25, 25, 0.22);
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   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-2, #6b6b6b);
}
.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-2, #6b6b6b);
  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-2, #6b6b6b);
}

.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-2, #6b6b6b);
  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;
  }
}

/* ==========================================================================
   BARRA DE AVISOS, FAVORITOS Y TIRA DE INSTAGRAM

   Las tres nacen APAGADAS en Configuración › Tienda, así que un catálogo que
   no las use no emite ni este marcado ni carga los scripts.

   Van aquí y no en la hoja de un sitio por la regla de siempre: son interfaz
   que comparten todos los catálogos, y naciendo dentro de un sitio cada
   catálogo nuevo se las copiaría y un arreglo dejaría de heredarse. Un tema las
   recolorea con sus tokens; la estructura es esta.
   ========================================================================== */

/* ------------------------------------------------------- barra de avisos */

/* La franja de arriba del todo. Va por encima de la cabecera y NO es fija: se
   lee una vez y se va con el scroll. Fija se comería 38 px de pantalla en cada
   página para repetir lo mismo. */
.avisos {
  background: var(--marron, #2b2422);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.avisos__pista {
  max-width: var(--wrap, 1200px);
  margin: 0 auto;
  padding: 10px var(--gutter, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.aviso {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.aviso__icono { flex: none; opacity: 0.85; }

/* En estrecho no caben tres. Se deja UNO —el primero, que es el que el dueño
   escribe primero— y se esconden los otros dos.

   No se convierte en carrusel a propósito: un texto que se mueve solo en la
   franja de arriba obliga a esperar a que pase el que interesa, y esto es un
   aviso, no una sección. */
@media (max-width: 720px) {
  .avisos__pista { justify-content: center; }
  .aviso:not(:first-child) { display: none; }
}

/* ------------------------------------------------ el corazón de la tarjeta */

/* Arriba a la derecha de la foto, que es donde no pisa ni el porcentaje de
   descuento ni el «Agotado» —los dos van a la izquierda—.

   SE VE SIEMPRE, no solo al pasar por encima como las otras acciones de la
   tarjeta: en un teléfono no hay «pasar por encima», y un botón que solo
   aparece con el ratón no existe para la mitad de quien mira. */
.card__fav {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink, #2b2422);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.card__fav:hover { background: #fff; transform: scale(1.08); }
.card__fav svg { display: block; transition: fill 0.2s; }

/* Guardado: el corazón se rellena. Es el único sitio del catálogo donde un
   icono cambia de contorno a macizo, y ahí significa algo — «esto ya es tuyo». */
.card__fav.is-fav { color: var(--ambar-osc, #b0473f); }
.card__fav.is-fav svg { fill: currentColor; }

.card__fav:focus-visible {
  outline: 2px solid var(--ambar-osc, #b0473f);
  outline-offset: 2px;
}

/* ------------------------------------------------- el cajón de favoritos */

/* Reutiliza `.carrito*` entero: es el mismo cajón, y aprenderse dos maneras de
   abrir una lista no le aporta nada a nadie. Aquí solo va lo suyo. */
.favlinea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #e8e2dd);
}
.favlinea:last-child { border-bottom: 0; }
.favlinea__foto { display: block; border-radius: var(--r-sm, 6px); overflow: hidden; }
.favlinea__foto img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.favlinea__cuerpo { min-width: 0; }
.favlinea__nombre {
  margin: 0 0 2px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
}
.favlinea__nombre a { color: inherit; text-decoration: none; }
.favlinea__nombre a:hover { text-decoration: underline; }
.favlinea__precio { margin: 0; font-size: 0.88rem; color: var(--muted, #6b625c); }
.favlinea__quitar {
  border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  color: var(--muted, #6b625c);
  padding: 4px 6px;
}
.favlinea__quitar:hover { color: var(--ambar-osc, #b0473f); }

/* Sin foto guardada la primera columna se queda vacía, y una columna de 64 px
   en blanco descoloca el nombre respecto a las demás líneas. */
.favlinea:not(:has(.favlinea__foto)) { grid-template-columns: 1fr auto; }

/* --------------------------------------------------- la tira de Instagram */

.iglinea { padding: 26px 0; }
.iglinea__wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.iglinea__marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.iglinea__marca:hover { text-decoration: underline; }

/* En carril y no en rejilla: son nueve fotos y en una pantalla estrecha una
   rejilla las dejaría en tres filas de miniaturas ilegibles. Arrastrando, se
   ven a su tamaño. */
.iglinea__fotos {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 1fr);
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.iglinea__fotos::-webkit-scrollbar { display: none; }
.iglinea__foto { display: block; border-radius: var(--r-sm, 6px); overflow: hidden; }
.iglinea__foto img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 0.5s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.iglinea__foto:hover img { transform: scale(1.07); }

@media (max-width: 860px) {
  .iglinea__wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* A ancho completo el carril tiene que poder desbordar del `wrap`, o las
     nueve se apretarían hasta no verse. */
  .iglinea__fotos { width: 100%; }
}

/* ==========================================================================
   CATEGORÍAS EN CARRIL

   La estructura, no la presentación. La usan ya dos temas —Cosmetics y
   Cosméticos V2—, y esa es la señal de que pertenece al motor: dos temas
   necesitando lo mismo significa que lo mismo se arregla en dos sitios.

   Cada tema sigue vistiendo SU tarjeta —el color, el borde, dónde va la foto—
   en su propia hoja, y con `.tema-<id>` delante le gana a esto por
   especificidad. Aquí solo está lo que se rompe igual en todos.

   DOS TRAMPAS, y las dos ya se pagaron:

   · `grid-template-columns: none` es obligatorio. La `.categorias` de
     escritorio deja dos columnas de `1fr` declaradas, y en un carril que
     desborda esas dos se resuelven a CERO: la primera categoría salía con 0 px
     de ancho.
   · Las paradas van sobre `.catcard`, NUNCA sobre `.categorias > *`. El
     segundo hijo es `.categorias__col`, que ahí es `display: contents` y no
     tiene caja, así que no puede ser parada de nada — quedaba UNA sola parada
     válida y con `scroll-snap-type: mandatory` el navegador está obligado a
     acabar en ella: el carril se arrastraba y volvía solo al principio, que
     desde fuera se lee como que no se mueve. Por eso además es `proximity` y
     no `mandatory`.
   ========================================================================== */

/* ==========================================================================
   LA ÚLTIMA LÍNEA NO SE QUEDA CON UNA PALABRA SUELTA

   `text-wrap: pretty` en los textos que el dueño escribe y que caen en una
   columna estrecha. La bandeja de promesas son cuatro columnas, y «De lunes a
   sábado, de 10 a 20 h» dejaba la «h» sola en su renglón — medido en Cosmetics
   y en Cosméticos V2, la última línea acababa a 8 px del margen.

   No se arregla acortando el texto: lo escribe el dueño desde el panel y
   mañana es otro. Se le dice al navegador que reparta mirando el párrafo
   entero en vez de línea a línea, que es exactamente para lo que existe.

   Va en el motor y no en la hoja del sitio porque de aquella hay una copia por
   catálogo. Un navegador que no lo entienda lo ignora y queda como estaba: es
   una mejora, no un requisito de la maqueta.
   ========================================================================== */
.ventaja__texto,
.ventaja__titulo,
.catcard__lead,
.oferta__lead,
.hero__lead {
  text-wrap: pretty;
}
.categorias--carril {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(180px, 1fr);
  /* Todas las tarjetas del carril acaban a la misma altura. Es el valor por
     defecto de la rejilla, pero se dice a la cara porque el carril es una fila
     de tarjetas CON BORDE y ahí una que acabe veinte píxeles antes que sus
     vecinas se ve como un escalón — medido en Cosméticos V2, «Accesorios»
     cerraba en 275 contra los 295 de las otras dos, por tener una línea menos
     de texto. Cualquier `align-items` que un tema quiera para su rejilla de
     categorías no debe llegar hasta aquí. */
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.categorias--carril .catcard {
  scroll-snap-align: start;
  grid-template-columns: minmax(0, 1fr);
  /* El alto de la foto va en PÍXELES. Con la fila en `1fr` cada tarjeta parte
     por un sitio distinto —el cuerpo mide lo que mida su texto— y una
     categoría con seis productos listados empuja su foto muy por encima de
     otra con uno: cinco fotos a cinco alturas se leen como una maqueta rota. */
  grid-template-rows: 200px minmax(0, 1fr);
  min-height: 0;
}
.categorias--carril .catcard__foto { grid-row: 1; width: 100%; height: 100%; object-fit: cover; }
.categorias--carril .catcard__cuerpo { grid-row: 2; align-self: stretch; }

/* ==========================================================================
   LA SEGUNDA LÍNEA DEL TITULAR DEL HERO

   `slides.title_2` es su propio campo, y va EN SU PROPIO RENGLÓN por defecto.

   No es decoración: en línea, los dos campos se pegan sin espacio —«Realza tu»
   y «belleza natural» salían como «Realza tubelleza natural»—. Un espacio en el
   HTML tampoco valdría, porque entonces un tema que sí la quiera en su renglón
   arrastraría un espacio de más al final de la primera línea.

   Se dice AQUÍ y no en la hoja de un tema: quien escribe la segunda línea en el
   panel espera dos renglones, y un tema que no supiera de esta clase la
   pintaría pegada. El color sí es de cada tema.
   ========================================================================== */
.hero__titulo-2 { display: block; }

/* ==========================================================================
   LA BANDEJA DE PROMESAS REPARTE EN LO QUE HAYA

   La hoja del sitio declara `repeat(3, minmax(0, 1fr))`, de cuando eran tres
   fijas. Desde que la cuarta existe —vacía por defecto—, un catálogo que la
   escriba veía la fila partida en dos con las dos primeras apiladas.

   Con `auto-fit` se reparte solo: tres dan tres columnas y cuatro dan cuatro.
   Con tres el resultado es idéntico al de antes, así que esto no cambia ni un
   píxel en los catálogos que no usen la cuarta.
   ========================================================================== */
.ventajas { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ==========================================================================
   EL CORAZÓN NO PUEDE COMPARTIR ESQUINA CON LAS ACCIONES

   `.card__acciones` vive arriba a la derecha y `.card__fav` se puso ahí mismo:
   medidos, el corazón ocupaba 34×34 en (318,1465) y las acciones 34×76 en
   (316,1467) — encima exactamente. Al acercar el ratón, las acciones aparecen
   y se quedan el clic: el corazón dejaba de existir justo cuando se veía.

   Con `:has()`, las acciones se van ABAJO solo en las tarjetas que llevan
   corazón. Los catálogos con los favoritos apagados no cambian ni un píxel, y
   además la disposición resultante —guardar arriba, comprar abajo— es la que
   usan las tiendas de las que salen estas referencias.
   ========================================================================== */
.card__media:has(.card__fav) .card__acciones {
  top: auto;
  bottom: 12px;
}

/* ==========================================================================
   DOS COLUMNAS DE PRODUCTO EN EL TELÉFONO

   La parrilla iba en `minmax(248px, 1fr)`: a 390 px de ancho, quitando los
   márgenes, solo cabía UNA columna. Una tienda de ropa en una sola columna
   obliga a recorrer la pantalla entera por prenda, y la foto tampoco gana
   nada — ya se veía a tamaño de sobra.

   Se baja el mínimo en vez de fijar `repeat(2, 1fr)`: así una pantalla de 320
   px sigue pudiendo caer a una sola columna si no caben dos legibles.

   ------------------------------------------------------------------------
   Y LA REGLA SE ACOTA A LA PARRILLA, con `:not(.grid-products--carril)`. Sin
   eso rompía el carril de la portada, que es el MISMO elemento con una clase
   más, y lo rompía de la manera más difícil de leer: en un carril las columnas
   tienen que ser todas IMPLÍCITAS —el sitio declara `grid-template-columns:
   none` justo para eso— y esta regla se lo devolvía, porque vale lo mismo
   (0,1,0) y `retail.css` se carga después de la hoja del sitio.

   Con columnas explícitas y `grid-auto-flow: column`, las primeras tarjetas
   caen en las tres columnas declaradas y el resto en columnas implícitas de
   otro ancho. Medido en Blossie a 620 px:

       grid-template-columns: 150px 150px 150px 266.8px 266.8px 266.8px

   Tres prendas estrechas y luego una que ocupa casi el doble. Y como
   `.card__media` guarda su 3/4, la foto ancha es también más alta y el nombre
   y el precio de esa tarjeta empiezan más abajo que los de sus vecinas: se lee
   como que las fotos «no están normalizadas», cuando lo que no estaba
   normalizado eran las COLUMNAS.

   Es el mismo fallo que ya se pagó en `.categorias` y por la misma causa. La
   regla vale para cualquier carril: **si un carril hereda columnas explícitas
   de otra regla, deja de ser un carril uniforme.**
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .grid-products { gap: 14px; }
  .grid-products:not(.grid-products--carril) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  /* El carril enseña dos y deja ver que hay más: con una por pantalla no se
     intuye que la fila siga. */
  .grid-products--carril { grid-auto-columns: minmax(46%, 1fr); }
}

/* ==========================================================================
   EL ENLACE DEL MENÚ CON DESPLEGABLE SE PULSA ENTERO

   `.nav__link` medía solo lo que el texto —20 px de alto dentro de una fila
   mucho más alta—, así que «Catálogo» tenía un blanco arriba y otro abajo que
   no respondían al clic. Y entre el final del enlace y el desplegable quedaba
   un hueco de 8 px sin nada: al bajar el ratón hacia el submenú se cruzaba
   tierra de nadie y el menú se cerraba antes de llegar.

   El relleno vertical arregla lo primero. El puente invisible —un pseudo que
   cubre el hueco y solo existe con el desplegable abierto— arregla lo segundo,
   y no puede tapar nada porque vive por debajo del enlace y solo mientras el
   ratón ya está dentro.

   Solo en escritorio: en móvil el desplegable se abre con su propio botón y
   estas reglas no pintan nada ahí.
   ========================================================================== */
@media (min-width: 1021px) {
  .nav__it--con-sub > .nav__link { padding-block: 14px; }

  .nav__it--con-sub { position: relative; }
  .nav__it--con-sub::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
    /* Por debajo del submenú (60) y del enlace: es un puente, no una tapa. */
    z-index: 1;
    display: none;
  }
  .nav__it--con-sub:hover::after,
  .nav__it--con-sub:focus-within::after { display: block; }
}

/* ==========================================================================
   EL BUSCADOR

   El cajón que abren la lupa de la cabecera y «Buscar» de la barra de abajo.
   Va aquí y no en la hoja de un tema porque buscar no es una decisión de
   diseño: es una función de la tienda, y un catálogo no debe tenerla mejor o
   peor según el color que haya elegido. Cada tema la recolorea con sus tokens.

   A PANTALLA COMPLETA, en todos los anchos. No es un cajón que se asoma: es una
   pantalla de buscar, y mientras se busca no hay nada más que hacer. Un panel
   flotando sobre la tienda invita a mirar lo de debajo, que es justo lo que se
   estaba dejando atrás al abrirlo.

   PERO EL FONDO OCUPA LA PANTALLA Y EL CONTENIDO NO. A 1440 px una fila de
   resultado de pared a pared deja el precio a medio metro del nombre, y el ojo
   tiene que cruzar el monitor para juntar dos datos de la misma prenda. El
   campo, la lista y el botón se quedan en una columna centrada; lo que se
   estira es el papel.
   ========================================================================== */

.buscador {
  position: fixed; inset: 0; z-index: 130;
  visibility: hidden;
  /* El retardo hace que `visibility` espere a que la caja termine de subir. Sin
     él desaparece de golpe y la animación solo se ve al abrir. Es el mismo
     truco que el carrito. */
  transition: visibility 0s linear 0.28s;
}
.buscador.is-open { visibility: visible; transition-delay: 0s; }

.buscador__fondo {
  position: absolute; inset: 0;
  background: rgba(28, 22, 22, 0.45);
  opacity: 0;
  transition: opacity 0.28s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.buscador.is-open .buscador__fondo { opacity: 1; }

.buscador__caja {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--blanco, #fff);
  /* Entra subiendo un poco y apareciendo, no deslizándose de arriba: a pantalla
     completa un deslizamiento de 100 % de alto es medio segundo de nada
     moviéndose, y lo que se quiere es empezar a escribir. */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.28s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.buscador.is-open .buscador__caja { opacity: 1; transform: none; }

/* LA COLUMNA DE CONTENIDO. El fondo va de borde a borde y esto no: una fila de
   resultado a 1400 px separa el nombre de su precio media pantalla.

   `--wrap-buscador` y no `--wrap`: el del sitio es el ancho de la tienda —hasta
   1240— y una lista de texto ahí dentro sigue siendo demasiado larga. 680 es la
   medida en la que el nombre, el precio y las tallas se leen de una pasada. */
.buscador__cab,
.buscador__cuerpo,
.buscador__pie {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

/* ------------------------------------------------------------- el campo */

.buscador__cab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Más aire arriba que abajo: el campo es lo único que hay en esta franja y
     tiene que quedar a la altura donde se mira, no pegado al techo. */
  padding: clamp(18px, 4vh, 34px) 18px 16px;
  border-bottom: 1px solid var(--line, #e8e2dd);
}
.buscador__lupa { flex: none; display: grid; color: var(--muted, #6b625c); }

/* DOS CLASES, y hacen falta: la hoja del sitio estiliza los campos POR TIPO
   —`input[type="search"]`, que vale (0,1,1)— y una sola clase vale (0,1,0), así
   que perdía por especificidad aunque esta hoja se cargue después. El campo se
   quedaba con su recuadro y la lupa flotando fuera de él, como si fueran dos
   cosas sin relación.

   Aquí el campo NO es una caja: la caja es la franja entera, con la lupa dentro
   y la línea de abajo como suelo. Es la misma trampa que ya se pagó al añadir
   `type="url"` a esa lista. */
.buscador__cab .buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--ink, #2b2422);
  font: inherit;
  /* Más grande que un campo de formulario: a pantalla completa es EL elemento
     de la página. Y nunca por debajo de 16 px, o iOS amplía al enfocarlo. */
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  padding: 6px 0;
}
.buscador__cab .buscador__campo:focus { outline: none; box-shadow: none; }
.buscador__campo::placeholder { color: var(--muted, #6b625c); }
/* La equis que pinta el navegador en un `type=search`: la del cajón ya cierra,
   y dos equis a dos centímetros no ayudan a entender cuál hace qué. */
.buscador__campo::-webkit-search-cancel-button { display: none; }

.buscador__cerrar {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill, 999px);
  background: none;
  color: var(--muted, #6b625c);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.buscador__cerrar:hover { background: var(--papel, #f4f4f4); color: var(--ink, #2b2422); }

/* ---------------------------------------------------------- los resultados */

.buscador__cuerpo {
  flex: 1 1 auto;
  /* La columna centrada tiene que poder crecer a lo alto: sin `width: 100%` en
     un contenedor flexible en columna, `margin-inline: auto` la encoge a su
     contenido y la lista deja de estar centrada. */
  /* `min-height: 0` es obligatorio: un hijo flexible se niega a encoger por
     debajo de su contenido, y sin esto la caja crece con la lista en vez de
     desplazarla — la misma trampa que la ficha de un pedido. */
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 10px;
}

.buscador__pista {
  margin: 8px 8px 10px;
  font-size: 0.84rem;
  color: var(--muted, #6b625c);
}
.buscador__pista-2 { display: block; margin-top: 3px; }

.buscador__lista { list-style: none; margin: 0; padding: 0; }

.buscador__link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--r, 8px);
  color: inherit;
  text-decoration: none;
}
.buscador__link:hover,
.buscador__link:focus-visible { background: var(--papel, #f7f4f2); }

.buscador__foto {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  background: var(--papel, #f4f4f4);
}
.buscador__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.buscador__datos { min-width: 0; display: grid; gap: 3px; }
.buscador__nombre {
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.3;
  /* Un nombre largo no puede empujar el precio fuera de la fila. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buscador__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.82rem;
}
.buscador__precio { font-weight: 600; }

/* Las tallas, en pastillas pequeñas. Son un dato de un vistazo —«¿está mi
   talla?»— y no una lista que haya que leer. */
.buscador__tallas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted, #6b625c);
}
.buscador__tallas i { font-style: normal; }
.buscador__tallas em {
  font-style: normal;
  padding: 1px 6px;
  border: 1px solid var(--line, #e8e2dd);
  border-radius: var(--r-sm, 4px);
  font-size: 0.74rem;
  color: var(--ink, #2b2422);
}
.buscador__agotado { color: var(--rojo, #b03a3a); }

/* ----------------------------------------------------------------- el pie */

.buscador__pie {
  flex: none;
  padding: 14px 18px clamp(18px, 4vh, 30px);
  border-top: 1px solid var(--line, #e8e2dd);
}

/* En el teléfono no hace falta nada aparte: ya era pantalla completa antes de
   que lo fuera en todas partes, y la columna de 680 px sencillamente no llega a
   aplicarse porque no cabe.

   La fila sí se aprieta: a 390 px, 56 de foto más el hueco dejan poco sitio
   para un nombre largo. */
@media (max-width: 480px) {
  .buscador__link { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .buscador__cab { padding-inline: 14px; }
  .buscador__pie { padding-inline: 14px; }
}

/* Quien prefiere no ver movimiento no lo ve: el cajón aparece y ya está. */
@media (prefers-reduced-motion: reduce) {
  .buscador__caja, .buscador__fondo { transition: none; }
}

/* ==========================================================================
   EL MENÚ DE LA TIENDA, A PANTALLA COMPLETA EN ESTRECHO

   Va aquí y no en la hoja del sitio a propósito: lo comparten todos los
   catálogos y hay TRES copias de aquella hoja. Un arreglo escrito allí habría
   que escribirlo tres veces, y el próximo catálogo nacería con la versión
   vieja. `retail.css` se carga después, así que estas reglas ganan a las de la
   hoja del sitio a igualdad de especificidad — que es como está pensado el
   reparto.

   Antes el menú era un panel colgado de la cabecera que se desplegaba hacia
   abajo (`0fr → 1fr`). Con dos entradas funcionaba; con las categorías dentro
   ya no: el desplegable acababa más alto que la pantalla y se desplazaba
   contra la página que seguía ahí debajo, compitiendo por el mismo scroll.

   A pantalla completa es el MISMO gesto que ya tienen el buscador y el panel,
   y eso es lo que se buscaba: tres pantallas completas del mismo producto que
   entraran distinto se leerían como tres mecanismos distintos.

   SIN VELO DETRÁS, y no es un olvido: la hoja es opaca y ocupa los cuatro
   bordes, así que detrás no hay nada que oscurecer. Un velo ahí sería una capa
   que nadie llega a ver.
   ========================================================================== */
/* En ancho el menú es la barra de la cabecera: no se abre, no se cierra y no
   tiene cabecera propia. Sin esta línea, «MENÚ ✕» se quedaba flotando en mitad
   de la barra de escritorio — se vio en la primera captura, y es el precio de
   escribir una pieza nueva solo dentro de su media query. */
.nav__cab { display: none; }

@media (max-width: 860px) {
  .nav__cab { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 120;          /* por encima de la cabecera fija y de la barra de abajo */
    top: 0;                /* la hoja del sitio lo colgaba de `--header-h` */
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: var(--blanco, #fff);
    /* Entra subiendo un poco y apareciendo. Se hereda de la hoja del sitio un
       `transition` sobre `grid-template-rows` que aquí ya no significa nada. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.28s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                visibility 0s linear 0.28s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav__cab {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* `env()` porque en un iPhone la primera franja se la queda el sistema. */
    padding: calc(16px + env(safe-area-inset-top)) 14px 16px 22px;
    border-bottom: 1px solid var(--linea, #e7e7e7);
  }
  /* La marca de la cabecera del menú. No crece: es una referencia, no el
     encabezado de la pantalla, y a tamaño de titular competiría con la lista
     que hay debajo — que es a lo que se ha venido.

     EL `order` HAY QUE ESCRIBIRLO, y esta es la trampa que costó encontrar: la
     hoja del sitio le pone `order: 1` a `.marca` para colocarla dentro de la
     FILA DE LA CABECERA, junto al botón de menú y los iconos. `.marca` es una
     clase, así que esa regla viaja con ella a cualquier contenedor flexible
     nuevo — y aquí ponía la marca DETRÁS del aspa, que salía pegada al borde
     izquierdo. Medido: el aspa en x=22 y la marca en 74, con el `order` de la
     una a 1 y el de la otra a 0.

     Y el aspa se manda a la derecha con `margin-left: auto` en vez de fiarlo
     todo a `justify-content`: con márgenes negativos y órdenes heredadas de
     otro sitio, un `auto` es una instrucción que no se puede malinterpretar. */
  .nav__marca { order: 0; flex: 0 1 auto; min-width: 0; }
  .nav__cerrar { order: 1; margin-left: auto; }
  .nav__marca .marca__logo { height: 34px; width: auto; max-width: 100%; }
  .nav__marca .marca__nombre { font-size: 1rem; }
  .nav__cerrar {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-right: -6px;
    border: 0;
    border-radius: var(--r-sm, 6px);
    background: none;
    color: var(--tinta, #191919);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* SOLO LA LISTA SE DESPLAZA. Con las categorías desplegadas hay más entradas
     que pantalla, y la cabecera con el aspa tiene que seguir ahí después de
     bajar. `min-height: 0` es imprescindible: un hijo flexible se niega a
     encoger por debajo de su contenido, y sin eso el `overflow` no tiene de qué
     desbordar. */
  .nav__list {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;   /* que las filas no se estiren a rellenar la pantalla */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* EL ANCHO ENTERO. Estaba en `min(100% - 28px, 520px)`, que en una
       tableta dejaba la lista en una columna de 520 px centrada con dos palmos
       de blanco a los lados: los renglones parecían recortados dentro de su
       propia pantalla. Una lista de destinos que ocupa el ancho es más fácil de
       acertar con el pulgar, y es lo que ya hace el menú del panel. */
    width: 100%;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
    gap: 2px;
  }

  /* Sin líneas entre renglones: separan lo que ya separa el espacio, y con la
     entrada activa pintada de la marca dos rayas alrededor la encajonan. */
  .nav__link,
  .nav__it--con-sub > .nav__link {
    min-height: 58px;
    border-bottom: 0;
    border-radius: var(--r-sm, 6px);
  }

  /* LA SECCIÓN ACTIVA, CON EL COLOR DE LA MARCA. Es la diferencia deliberada
     con el menú del panel, que va en gris neutro: allí se trabaja y el color de
     la tienda compite con lo único que un panel tiene que dejar claro; aquí se
     compra, y el color ES la tienda.

     Se leen los tokens de marca con reserva encadenada: el que eligió el dueño
     si eligió alguno, el de la marca del sitio si no. Así un catálogo con hoja
     mínima o un tema que no conozca `--marca` siguen pintando algo. */
  .nav__link[aria-current="page"],
  .nav__it--con-sub > .nav__link[aria-current="page"] {
    background: var(--marca-fondo, var(--marron, #4a2617));
    color: var(--marca-contraste, var(--blanco, #fff));
    font-weight: 600;
  }
  /* El subrayado animado del escritorio sobraría debajo de la píldora. */
  .nav__link[aria-current="page"]::after { display: none; }

  /* La flecha se centra en el renglón, que ahora tiene esquinas. */
  .nav__desplegar { height: 58px; }
  .nav__it--con-sub > .nav__link[aria-current="page"] + .nav__desplegar {
    color: var(--marca-contraste, var(--blanco, #fff));
  }

  /* --------------------------------------------- las categorías desplegadas
     El aire va al revés que arriba, igual que en el panel: las dos secciones
     van apretadas porque se recorren de un vistazo, y las categorías aparecen
     de golpe y son una ELECCIÓN — separadas se leen como cosas entre las que
     decidir, y no como más renglones de lo mismo. */
  .nav__sub .submenu {
    display: grid;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  /* La hoja del sitio separa las categorías con una raya entre cada dos
     (`li + li .submenu__link`). Aquí las separa el espacio, que es lo mismo que
     hacen las secciones de arriba: dos lenguajes de separación en la misma
     lista se leen como dos listas. */
  .submenu li + li .submenu__link { border-top: 0; }
  .submenu__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 14px;
    border-radius: var(--r-sm, 6px);
    font-size: 0.94rem;
    text-align: center;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ==========================================================================
   LA PÁGINA DE CONTACTO

   En el motor porque la página es del motor: un catálogo la tiene con solo
   poner su cascarón, y un arreglo aquí lo heredan todos. Cada tema la viste
   desde su hoja con `.tema-<id>` delante, que le gana por especificidad — no
   hace falta que ninguno copie la plantilla.

   Todo con `var(--x, reserva)`: un catálogo con hoja mínima o un tema que no
   declare un token siguen pintando algo legible.
   ========================================================================== */
.contacto { padding: clamp(34px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }

.contacto__cab {
  max-width: 620px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.contacto__titulo {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.1;
  color: var(--tinta, #191919);
}
.contacto__lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tinta-2, #6b6b6b);
}

/* Dos bloques que se apilan solos. `auto-fit` y no `repeat(2, 1fr)`: con un
   solo bloque —un catálogo sin tienda física— la columna que sobra dejaría
   media pantalla en blanco al lado del WhatsApp. */
.contacto__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
}

/* LA TIPOGRAFÍA DEL CUERPO, aunque sea un <h2>. Los tres temas visten
   `h1, h2, h3…` con su letra de exhibición —una serif de titular—, y eso está
   bien para el titular de la página: se adapta solo a cada diseño y por eso
   aquí no hay una regla por tema. Pero estos dos no son titulares, son
   ETIQUETAS: versalitas de 12 px que dicen «escríbenos» y «dónde estamos». Una
   serif de exhibición a ese tamaño y con ese espaciado no se lee como una
   etiqueta, se lee como un titular que se ha quedado pequeño. */
.contacto .contacto__h2 {
  font-family: inherit;
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2, #6b6b6b);
}

.contacto__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.contacto__dato { margin: 16px 0 0; line-height: 1.6; }
.contacto__etiqueta {
  display: block;
  font-size: 0.78rem;
  color: var(--tinta-2, #6b6b6b);
}
.contacto__dato a { color: var(--tinta, #191919); text-decoration: underline; }

/* `<address>` viene en cursiva de fábrica, y una dirección en cursiva se lee
   como una cita. Las líneas van una por renglón sin `<br>`: el bloque las
   arma de una lista, y una lista no debería depender de un salto escrito. */
.contacto__sede {
  display: grid;
  gap: 4px;
  font-style: normal;
  line-height: 1.6;
  color: var(--tinta, #191919);
}
.contacto__ir { margin-top: 18px; }

/* EL MAPA, con proporción y no con alto fijo. Un `height: 400px` deja el mapa
   como una rendija en un teléfono y como una franja perdida en un monitor
   ancho; la proporción se adapta y el tope evita que en escritorio se coma la
   pantalla entera. */
.contacto__mapa {
  margin-top: clamp(32px, 5vw, 56px);
  border-radius: var(--r, 10px);
  overflow: hidden;
  background: var(--papel, #f4f4f4);
  border: 1px solid var(--linea, #e7e7e7);
}
.contacto__mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  border: 0;
}
@media (max-width: 620px) {
  /* En vertical un 16/9 son cuatro dedos de mapa: no se ve ni la manzana. */
  .contacto__mapa iframe { aspect-ratio: 4 / 5; max-height: none; }
}

/* ==========================================================================
   EL HERO SE COMPONE DE TRES MANERAS

   Va en el motor y no en la hoja del sitio por lo de siempre —de aquella hay
   una copia por catálogo— y porque estas tres son del MECANISMO: lo que cada
   diseño decide es el color y la letra, no si la foto va al lado o detrás.

     partido  la foto al lado del texto. El de siempre, y por eso aquí no hay
              ni una regla suya: se sigue pintando con lo que ya estaba
              escrito. Lo único nuevo es cómo TERMINA contra el texto.
     fondo    la foto llena el hero y el texto va encima.
     imagen   solo la foto, sin texto: el cartel ya diseñado.

   Cada bloque se acota a ≥1021 px cuando hace falta, porque por debajo el hero
   YA es la foto con el texto encima —eso lo decidió la hoja del sitio hace
   tiempo— y volver a decirlo aquí sería pelearse con ella.
   ========================================================================== */

/* ==========================================================================
   LA FRANJA DE PAPEL BAJO LA FOTO

   Los pases del carrusel se apilan en UNA celda de rejilla, así que todos
   miden lo que mide el más alto — y el más alto es el que más texto tiene. La
   columna de la foto, en cambio, solo medía su propio contenido, así que en
   los pases cortos la foto terminaba antes que el pase y debajo quedaba una
   franja del papel de fondo.

   NO LO TRAJERON LAS COMPOSICIONES NUEVAS: medido con el código anterior y los
   mismos pases, la franja era de 215 px; con el nuevo, de 110. Lo que la
   destapó fue tener ocho pases con textos de longitudes muy distintas — con
   tres parecidos, la diferencia no se veía.

   Que el interior llene el pase lo arregla para cualquier catálogo, no solo
   para este: la foto llega abajo se escriba lo que se escriba en los demás
   pases. El pase es un elemento de rejilla estirado, así que su alto ES
   definido y el 100% del hijo se resuelve contra él.
   ========================================================================== */
/* SIN ACOTAR A ESCRITORIO. Se escribió primero dentro de `min-width: 1021px`
   pensando que en estrecho la foto ya llena el hero por su cuenta, y es verdad
   en un teléfono — pero no en la banda de 861 a 1020, donde el hero es el de
   móvil y el pase puede seguir siendo más alto que su contenido. Llenar el
   pase no estorba en ninguna anchura. */
.hero__pase > .hero__inner { height: 100%; }

/* ==========================================================================
   EL DISTINTIVO MIDE LO QUE MIDE SU TEXTO

   Es `inline-flex`, así que debería encogerse a su contenido — y no lo hacía:
   en el hero de móvil, `.hero__texto` es una columna flexible, y en un
   contenedor flexible el valor por defecto de `align-items` es `stretch`. Eso
   estira a los hijos a lo ancho del eje transversal **da igual que sean
   `inline-`algo**: el `inline-flex` decide cómo se comporta por dentro, no cómo
   lo trata su padre.

   Resultado: una píldora tan ancha como la columna entera, con dos palabras a
   la izquierda y el resto vacío. Se lee como una franja, no como una etiqueta.

   `align-self` lo saca de esa regla y `width: fit-content` cubre el caso de que
   el padre no sea flexible. Las dos, porque el hero cambia de maqueta con la
   anchura y no conviene depender de cuál toca.
   ========================================================================== */
.hero__oferta {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;   /* un distintivo largo se ajusta en vez de desbordar */
}

/* Y sigue al texto cuando el pase lo centra o lo alinea a la derecha: una
   etiqueta pegada a la izquierda sobre un titular centrado se lee como que se
   ha quedado descolgada. */
@media (min-width: 1021px) {
  .hero__pase--fondo.hero__pase--texto-centro .hero__oferta { align-self: center; }
  .hero__pase--fondo.hero__pase--texto-derecha .hero__oferta { align-self: flex-end; margin-left: auto; }
}

/* --------------------------------------------------------------- el cartel

   La imagen entera es el enlace. Sin texto no hay botón, así que sin esto un
   cartel no llevaría a ninguna parte — y un anuncio que no se puede pulsar es
   peor que no ponerlo.

   `object-fit: cover` y no `contain`: el hero tiene su alto y una imagen
   ajustada dentro dejaría dos franjas de fondo arriba y abajo. Quien sube un
   cartel lo diseña a la medida que el panel recomienda, y si no cuadra es
   preferible recortar un poco de sangre que enmarcarlo. */
/* EL CARTEL NO PUEDE DECIDIR EL ALTO DEL HERO, y aquí estuvo el segundo
   fallo de esta pieza — el mismo de fondo, en otro sitio.

   Los pases comparten UNA celda de rejilla: el más alto manda sobre los ocho.
   Con la foto en el flujo, el cartel pedía su proporción natural, y por debajo
   de 1020 px la que carga es la VERTICAL: a 900 px de ancho, 900 × 992 ÷ 660 =
   1353 px de alto. Los otros siete median 980 y se estiraban a 1353, dejando
   373 px de papel entre la foto y los mandos.

   No se veía ni en escritorio ni en un teléfono: solo en la banda intermedia
   —861 a 1020 px— donde la barra ya es la de escritorio pero el hero es el de
   móvil. Una tableta en vertical cae justo ahí.

   Sacando la foto del flujo, el cartel deja de aportar alto y el hero vuelve a
   medir lo que miden los pases con texto, que es lo que medía antes de que
   esta composición existiera. Y el `min-height` es para el caso contrario: un
   carrusel de solo carteles se quedaría sin nadie que le diera altura. Se usa
   la misma medida que el hero de móvil tiene escrita desde siempre. */
.hero__pase--imagen {
  display: block;
  position: relative;
  min-height: min(72vh, 560px);
}
.hero__pase--imagen .hero__cartel {
  display: block;
  position: absolute;
  inset: 0;
}
.hero__pase--imagen .hero__cartel-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------------- el fondo */

/* LA FOTO Y EL TEXTO SE APILAN CON REJILLA, no con posición absoluta.

   Con `position: absolute; inset: 0` el fondo se cuelga de la CAJA DE RELLENO
   del pase, no de su borde, así que basta con que algo tenga relleno para que
   la foto se quede corta: medido, 1240×610 dentro de un pase de 1280×853.

   `grid-area: 1 / 1` en los dos hijos los pone en la misma celda y los deja
   ocupar el pase entero sin depender de eso. Es además el idioma que esta
   hoja ya usa para apilar los propios pases del carrusel: una manera de
   superponer, no dos. */
.hero__pase--fondo { display: grid; }
.hero__pase--fondo > .hero__fondo,
.hero__pase--fondo > .hero__inner { grid-area: 1 / 1; }

.hero__fondo {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* LA FOTO SE COLOCA EN ABSOLUTO DENTRO DE SU CELDA, y hace falta: el alto de
   la celda lo decide el TEXTO —es el otro hijo de la rejilla—, así que un
   `height: 100%` sobre un contenedor de alto automático se resuelve a cero y la
   imagen cae debajo con su tamaño natural. Sacándola del flujo, la celda mide
   lo que mida el texto y la foto la llena entera, que es lo que se pedía. */
.hero__fondo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* EL VELO NO ES DECORACIÓN. El texto va encima de una foto que elige el dueño,
   y una foto clara con un titular blanco encima no se lee. No se puede dejar a
   suertes ni a que alguien se acuerde: se pinta siempre, y del lado donde está
   el texto — un velo uniforme apagaría la foto entera, que es justo lo que esta
   composición existe para lucir. */
.hero__pase--fondo .hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__pase--fondo.hero__pase--texto-izquierda .hero__fondo::after {
  background: linear-gradient(to right, rgba(18, 14, 12, 0.62) 0%, rgba(18, 14, 12, 0.34) 46%, rgba(18, 14, 12, 0) 76%);
}
.hero__pase--fondo.hero__pase--texto-derecha .hero__fondo::after {
  background: linear-gradient(to left, rgba(18, 14, 12, 0.62) 0%, rgba(18, 14, 12, 0.34) 46%, rgba(18, 14, 12, 0) 76%);
}
.hero__pase--fondo.hero__pase--texto-centro .hero__fondo::after {
  background: rgba(18, 14, 12, 0.42);
}
/* Con la tinta oscura el velo se da la vuelta: lo que hay que separar del
   texto entonces es una foto oscura, no una clara. */
.hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-izquierda .hero__fondo::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 46%, rgba(255, 255, 255, 0) 76%);
}
.hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-derecha .hero__fondo::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 46%, rgba(255, 255, 255, 0) 76%);
}
.hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-centro .hero__fondo::after {
  background: rgba(255, 255, 255, 0.55);
}

@media (min-width: 1021px) {
  /* Una sola columna: la figura de al lado no existe en esta composición. */
  .hero__pase--fondo .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__pase--fondo .hero__figura { display: none; }

  .hero__pase--fondo .hero__texto { max-width: 560px; }
  .hero__pase--fondo.hero__pase--texto-centro .hero__texto {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
  }
  .hero__pase--fondo.hero__pase--texto-centro .hero__botones { justify-content: center; }
  .hero__pase--fondo.hero__pase--texto-derecha .hero__texto { margin-left: auto; text-align: right; }
  .hero__pase--fondo.hero__pase--texto-derecha .hero__botones { justify-content: flex-end; }

  /* La tinta. Se nombran los elementos uno a uno y no se hereda de un `color`
     en el pase: el titular, el lead y el distintivo tienen cada uno su color
     escrito en la hoja del sitio, y un `color` en el padre no le gana a
     ninguno. */
  /* EL DISTINTIVO NO SE TOCA, y esto es la marcha atrás de un retoque mío.
     Le había puesto el mismo cristal traslúcido que usa el hero de móvil,
     razonando que sobre una foto una píldora blanca maciza tapa lo que se
     quiere enseñar. Pero ahí ese cristal convive con un velo que oscurece la
     foto entera, y aquí el velo es un degradado lateral: el resultado era una
     mancha gris sin forma donde antes había una píldora.

     La píldora blanca se lee sobre cualquier fotografía por sí sola, que es
     justo para lo que se diseñó. Se queda como estaba. */
  .hero__pase--fondo.hero__pase--tinta-claro .hero__titulo,
  .hero__pase--fondo.hero__pase--tinta-claro .hero__titulo-2,
  .hero__pase--fondo.hero__pase--tinta-claro .hero__lead { color: #fff; }
  .hero__pase--fondo.hero__pase--tinta-oscuro .hero__titulo,
  .hero__pase--fondo.hero__pase--tinta-oscuro .hero__titulo-2,
  .hero__pase--fondo.hero__pase--tinta-oscuro .hero__lead { color: var(--tinta, #191919); }

  /* EL SEGUNDO BOTÓN TAMBIÉN CAMBIA DE TINTA, y esto se vio en pantalla y no
     escribiendo: con el texto en claro, el titular y el lead se pasaban a
     blanco pero el botón fantasma se quedaba con su contorno y su letra
     oscuros — encima del velo oscuro era una caja vacía que había que adivinar.

     El botón principal no lo necesita: va relleno del color de la marca y se
     lee sobre cualquier cosa. El de contorno vive del contraste con lo que
     tenga detrás, y detrás ahora hay una fotografía. */
  .hero__pase--fondo.hero__pase--tinta-claro .btn--ghost,
  .hero__pase--fondo.hero__pase--tinta-claro .hero__btn-2 {
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .hero__pase--fondo.hero__pase--tinta-claro .btn--ghost:hover,
  .hero__pase--fondo.hero__pase--tinta-claro .hero__btn-2:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #fff;
    color: var(--tinta, #191919);
  }

  /* El sello y la trama de puntos se apagan con foto de fondo: compiten con el
     texto que ahora está justo encima de la imagen. Es la misma decisión que
     ya estaba tomada para el hero de móvil, y por el mismo motivo. */
  .hero__pase--fondo .hero__sello,
  .hero__pase--fondo .hero__puntos,
  .hero__pase--imagen .hero__sello,
  .hero__pase--imagen .hero__puntos { display: none; }

  /* ------------------------------------------- cómo acaba la foto en `partido`

     Con el borde recto —el de siempre— no se escribe nada: la foto termina
     donde termina, que es como se ha visto hasta hoy.

     Los otros dos van con `mask-image`, que recorta el elemento sin tocar la
     imagen: la misma foto sirve para las tres y no hay que subir una versión
     por borde. Se escribe también con prefijo porque Safari lo pide, y sin él
     el borde no se aplica — que en este caso no rompe nada, solo se ve el
     recto. Degradar así es aceptable; lo que no lo sería es que desapareciera
     la foto. */
  /* LOS DOS PIERDEN LA ESQUINA REDONDEADA, y esto va aquí y no en la hoja de
     cada sitio porque es del remate, no de la marca.

     `.hero__foto` trae de la hoja del sitio una curva grande arriba a la
     izquierda —180 px en el esqueleto—, que es el remate del borde RECTO: lo
     que le da aire al bloque de texto cuando la foto llega entera. Los otros
     dos rematan ese mismo borde de otra manera, así que sumarles la curva es
     rematarlo dos veces.

     Con el desvanecido se veía como una contradicción: un lado que se disuelve
     y, encima, un arco duro cortándolo. Con la diagonal era peor y más obvio
     —`border-radius` y `clip-path` recortan LOS DOS, y el resultado es la
     intersección—, así que la punta de la diagonal salía mordida. */
  .hero__pase--borde-desvanecido .hero__foto,
  .hero__pase--borde-diagonal .hero__foto { border-radius: 0; }

  .hero__pase--borde-desvanecido .hero__foto {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
            mask-image: linear-gradient(to right, transparent 0%, #000 22%);

    /* Y SE ESTIRA HACIA EL TEXTO. No es agrandar por agrandar: el degradado
       disuelve su primer 22 %, así que en el mismo hueco de siempre cabía
       menos foto que con el borde recto — la composición se quedaba corta
       justo por el lado que quería acercarse. Estirarla por la izquierda
       devuelve ese tamaño y acerca la imagen al texto de una vez.

       Se mueve LA FOTO y no `.hero__figura`: de la figura cuelgan también el
       sello y las dos tramas de puntos, y esos no llevan máscara —arrastrarlos
       hacia el texto los dejaría enteros y opacos encima de él.

       EL ANCHO SE ESCRIBE, NO SE DEDUCE DE `left` Y `right`, y aquí hubo un
       error que solo se ve en pantalla ancha. Lo natural es poner `left`
       negativo, `right: 0` y `width: auto` para que el ancho lo decidan los
       dos bordes. En un `<div>` funcionaría; en un `<img>` no, porque es un
       ELEMENTO REEMPLAZADO: ahí `width: auto` no significa «estírate entre los
       dos bordes» sino «usa tu proporción», y con `height: 100%` la foto se
       quedaba clavada en alto × 1,5 = 915 px.

       A 1440 no se notaba —la sangría sobra tanto que seguía tapando—, pero a
       1680 aparecía una franja desnuda de 53 px a la derecha, a 1920 de 192 y
       a 2560 de 559. Justo la sangría hasta el borde de la ventana, que es la
       mitad de la fuerza del hero.

       Con el ancho puesto a mano, el borde derecho cae donde caía. `right`
       vuelve a `auto` para no sobredeterminar la caja.

       Y `max-width: none`, que es la segunda mitad del mismo problema y no se
       ve por ninguna parte: la hoja del sitio abre con
       `img, svg { max-width: 100% }`, así que el ancho que se acaba de pedir
       —100 % + lo que se estira— quedaba recortado otra vez al 100 % justo. La
       foto no daba error ni aviso: se limitaba a moverse a la izquierda sin
       crecer, que es exactamente lo que parecía funcionar. */
    --estira: clamp(40px, 8vw, 200px);
    left: calc(-1 * var(--estira));
    right: auto;
    width: calc(100% + var(--estira));
    max-width: none;
  }

  /* El texto, por encima. Lo que se solapa es la franja transparente del
     degradado, así que no tapa nada de lo que hay que leer — pero un `<img>`
     transparente SIGUE RECIBIENDO EL RATÓN, y `.hero__figura` está posicionada:
     sin esto el botón del hero quedaría debajo de la foto y dejaría de
     pulsarse en la parte donde ahora se montan. */
  .hero__pase--borde-desvanecido .hero__texto {
    position: relative;
    z-index: 1;
  }

  .hero__pase--borde-diagonal .hero__foto {
    -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ==========================================================================
   EN ESTRECHO, LA FOTO DE FONDO ES LA FOTO DEL HERO

   Aquí estuvo un error de bulto, y conviene dejarlo escrito porque nació de una
   suposición razonable: por debajo de 1020 px el hero YA es la foto con el
   texto encima —eso lo decidió la hoja del sitio hace tiempo—, así que escondí
   `.hero__fondo` dando por hecho que la foto la pondría la figura de siempre.

   Pero para esta composición la figura NO trae foto: se la quité a propósito en
   `hero.php` para no descargar la misma imagen dos veces. Las dos decisiones
   eran correctas por separado y juntas dejaban los pases de fondo **sin ninguna
   imagen en el teléfono** — un bloque pálido con un titular encima.

   Se ve solo en móvil, así que una revisión de escritorio pasa por encima sin
   enterarse: es la clase de fallo que solo aparece mirando la maqueta que no
   estabas mirando.

   Aquí el fondo SÍ se pinta, y hace exactamente el papel que hace la foto en
   el hero de móvil de siempre.
   ========================================================================== */
@media (max-width: 1020px) {
  .hero__pase--fondo .hero__fondo { display: block; }

  /* EL VELO, SIEMPRE OSCURO Y DESDE ABAJO, se diga lo que se diga arriba. La
     elección de tinta y de posición es de ESCRITORIO: en un teléfono no hay
     ancho que repartir, el texto va abajo sobre la foto y ahí la hoja del sitio
     lo pinta en blanco. Un velo claro debajo de un texto blanco sería
     exactamente el fallo que la elección de tinta existe para evitar. */
  .hero__pase--fondo .hero__fondo::after,
  .hero__pase--fondo.hero__pase--tinta-oscuro .hero__fondo::after,
  .hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-izquierda .hero__fondo::after,
  .hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-centro .hero__fondo::after,
  .hero__pase--fondo.hero__pase--tinta-oscuro.hero__pase--texto-derecha .hero__fondo::after {
    background: linear-gradient(to top, rgba(18, 14, 12, 0.78) 0%, rgba(18, 14, 12, 0.3) 52%, rgba(18, 14, 12, 0) 100%);
  }

  /* LOS PUNTOS DEL CARRUSEL SE PUEDEN TOCAR CON UN DEDO. Miden 9×9 px, que es
     el tamaño que tienen que tener —son una señal de posición, no un botón que
     se anuncie— y era también todo lo que respondía al toque: nueve píxeles,
     con siete de separación, para cambiar de pase en un teléfono.

     El punto no se agranda: se agranda lo que escucha. Un `::before` sin nada
     dentro extiende la zona sensible a 25×25 sin pintar un solo píxel, y el
     hueco sube a 16 px para que las zonas de dos puntos vecinos se toquen sin
     llegar a solaparse — si se solapan, el de al lado se queda el toque y
     cambiar de pase se vuelve una lotería.

     Va aquí y no en la hoja del sitio a propósito: aquella tiene una copia por
     catálogo, y Blossie y The Sami llevan la suya con la regla de 9 px dentro.
     Desde el motor lo arreglan los tres sin tocar ninguna. */
  .hero__puntitos { gap: 16px; }
  .hero__puntito { position: relative; }
  .hero__puntito::before {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* Y EL «VER MÁS» TAMBIÉN SE TOCA. Mide 22 px de alto —lo que mide su texto—
     y en un teléfono eso es medio dedo. No se agranda con más letra: se le da
     aire arriba y abajo, que de paso lo separa del titular que lleva al lado.

     Va solo en su renglón, así que el relleno no descoloca nada. Un enlace
     DENTRO de un párrafo no entra aquí, y por eso se nombra uno a uno en vez
     de escribir una regla para todo `a`. */
  .prod-cab__mas {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
}

/* ==========================================================================
   EL DISTINTIVO SE PINTA CONTRA LO QUE TIENE DETRÁS

   Lo decide `main.js` midiendo, no una regla escrita a ojo, y estas dos clases
   son lo único que pinta. Sin JavaScript no se emite ninguna y manda lo que ya
   dijera la hoja — que es el aspecto de siempre, no un texto invisible.

   Por qué hizo falta: el distintivo tiene SUPERFICIE PROPIA —píldora blanca en
   el diseño de siempre, cristal sobre foto en otros— así que su tinta no puede
   depender de la elección de tinta del PASE. Se intentó y salió lo evidente en
   cuanto se vio: pase con «tinta clara» + píldora blanca = texto blanco sobre
   blanco. Un distintivo vacío con un icono al lado.
   ========================================================================== */
.hero__oferta.is-sobre-claro { color: var(--tinta, #191919); }
.hero__oferta.is-sobre-oscuro { color: #fff; }
/* El icono va dentro de un círculo con su propio relleno: se le da la vuelta
   junto al texto o queda un disco claro sobre un disco claro. */
.hero__oferta.is-sobre-oscuro .hero__oferta-icono { background: #fff; color: var(--tinta, #191919); }