/* ============================================================================
   Glow Glasses — outlet de lentes de sol de firma.

   Editorial, mucho aire, titulares con remates y todo lo demás en la
   tipografía que el dueño eligió en el panel. La sensación que se busca es
   «boutique que además tiene precios de saldo», no «tienda de descuentos»: de
   ahí las líneas de un pelo en vez de bordes gruesos, las esquinas casi rectas
   y las mayúsculas espaciadas de los rótulos.

   TRES REGLAS QUE ATRAVIESAN TODO EL ARCHIVO
   ------------------------------------------
   1. Ni un color escrito a mano fuera de `:root`. El panel reescribe --marca,
      los cinco tonos de fondo y texto y la tipografía con un <style> que va
      DESPUÉS de esta hoja. Un negro suelto en `.tarjeta__precio` no lo alcanza
      ese <style>, y el tema acabaría con dos negros distintos en la página.

   2. Los negros y los blancos de este diseño son --texto y --fondo, no #000 y
      #fff. Las franjas oscuras —el pie, la cita, la barra de abajo— se pintan
      invirtiendo ese par: fondo --texto y letra --fondo. Así la franja sale
      negra sobre página clara y clara sobre página oscura, y el modo oscuro del
      panel funciona sin una regla más. Lo apagado DENTRO de esas franjas se
      hace con `opacity`, nunca con --texto-suave: sobre ese fondo, ese token no
      contrasta con nada.

   3. --marca sólo aparece como fondo con --marca-contraste encima, o como una
      línea de un pelo. Nunca como color de un texto que haya que leer. El dueño
      puede poner un amarillo, y un rótulo amarillo sobre blanco no se lee: así
      el tema aguanta cualquier color de marca sin dejar nada ilegible.
   ============================================================================ */

:root {
  /* --- los que reescribe el panel --- */
  --marca: #8f2230;
  --marca-oscuro: #6b1a24;
  --marca-contraste: #ffffff;
  --fondo: #ffffff;
  --fondo-suave: #f4f1ec;
  --borde: #e6e0d8;
  --texto: #14110f;
  --texto-suave: #6f665d;

  /* --- los del contrato que el panel no toca --- */
  --whatsapp: #25d366;
  --whatsapp-contraste: #04310f;
  --abierto: #1f9d55;
  --radio: 2px;
  --ancho: 1280px;

  /* --- propios de este tema --- */
  /* Con remates y del sistema: una fuente que se baja de fuera es medio
     segundo en blanco cuando la red va mal, y el escenario normal aquí es
     un teléfono en datos móviles dentro del navegador de Instagram. */
  --display: Georgia, 'Times New Roman', 'Nimbus Roman', 'Liberation Serif', serif;
  --paso: clamp(2.75rem, 8vw, 5rem);      /* aire entre secciones */
  --lado: clamp(1rem, 4.5vw, 2.5rem);     /* margen lateral de la página */
  --linea: 1px solid var(--borde);

  /* El filo: NADA toca el borde de la pantalla menos la marquesina.
     Las franjas oscuras —la cita, el pie— se meten estos milímetros y se
     redondean un pelo. Es el detalle que separa una página cuidada de una
     plantilla: una franja de color a sangre se lee como algo que se salió. */
  --filo: .5rem;

  /* Lo que se reserva debajo para la barra de la bolsa. El `env()` es la zona
     que se come la barra del navegador y el indicador de inicio del teléfono;
     donde no existe vale 0 y manda el mínimo. */
  --hueco-abajo: max(.85rem, env(safe-area-inset-bottom, 0px));
  --alto-barra: calc(4.6rem + var(--hueco-abajo));
}

/* ---------------------------------------------------------------- cimientos */

/* Los límites, ocultos a los lados.
   `clip` y no `hidden`: `hidden` convierte al elemento en un contenedor de
   desplazamiento y rompe el `position: sticky` de las fotos de la ficha y del
   recuadro de datos del pedido. `clip` recorta y no crea ese contenedor, que es
   exactamente lo que hace falta. Para los navegadores que no lo traen queda el
   respaldo de abajo. */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  overflow-x: clip;
  background: var(--fondo-suave);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* El respaldo centra y acolcha `main`; aquí no, porque las franjas oscuras y
   la foto de portada van de borde a borde. El aire lo pone cada `.env`. */
main { max-width: none; margin: 0; padding: 0; }

.env {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--lado);
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }

a { color: var(--texto); text-decoration: none; }
a:hover { text-decoration: none; }

/* El aro de foco va en --texto y no en --marca: contrasta con --fondo por
   construcción en los dos modos, mientras que un --marca claro —el dueño puede
   poner un amarillo— deja el aro casi invisible, y el aro de foco es lo único
   que tiene quien navega con el teclado. */
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: var(--radio); }

.saltar { background: var(--texto); color: var(--fondo); }

/* El hueco de la barra fija de abajo. Sólo cuando la barra existe: reservarlo
   siempre deja un vacío bajo el pie en todas las páginas donde no hay nada
   seleccionado. */
.tiene-barra { padding-bottom: var(--alto-barra); }

/* El rótulo pequeño en mayúsculas espaciadas, con su rayita de color.
   El texto va en --texto-suave y NO en --marca: el color vive en la rayita,
   que puede quedar apagada sin que nada deje de leerse. */
.ojo {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .45rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ojo::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  flex: 0 0 auto;
  background: var(--marca);
}
.ojo--centrado { justify-content: center; }
/* Dentro de una franja invertida la rayita toma el color del texto: un --marca
   oscuro sobre fondo oscuro no se vería. */
.ojo--claro { color: var(--fondo); opacity: .8; }
.ojo--claro::before { background: currentColor; }

.tenue { color: var(--texto-suave); }

/* --------------------------------------------------------------- marquesina

   La tira del dueño, que el sistema arma y este tema sólo coloca: va arriba del
   todo y es LO ÚNICO que llega a los dos bordes de la pantalla. El sistema
   manda un estilo mínimo de una sola clase de peso; esto lo gana. */
.marquesina {
  background: var(--texto);
  color: var(--fondo);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  overflow: hidden;
}
.marquesina__pista {
  display: flex;
  gap: 3rem;
  padding: .5rem 0;
  width: max-content;
  animation: correr 34s linear infinite;
}
.marquesina__pista > * { flex: 0 0 auto; white-space: nowrap; }
@keyframes correr { to { transform: translateX(-50%); } }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }

/* ---------------------------------------------------------------- cabecera */

/* La cabecera: UN renglón y sin fijar.
   `position: relative` es lo que necesita el panel del menú para anclarse a la
   cabecera entera y no al botón.

   Y `display: block` NO ES DE MÁS. El respaldo declara `.cabecera` como
   `display: flex` con `max-width`, `margin: 0 auto` y su propio relleno, y su
   hoja se carga antes que ésta. Sin reponerlo a bloque, la rejilla de tres
   columnas de dentro es un elemento flexible que se encoge a su contenido: el
   menú, la marca y la bolsa acababan apiñados en el centro con dos manchas de
   aire a los lados, y encima con el relleno del respaldo sumado al propio. */
.cabecera {
  display: block;
  position: relative;
  z-index: 30;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--fondo);
  border-bottom: var(--linea);
}

/* Las dos columnas de los lados miden EXACTAMENTE lo mismo, así que la del
   medio queda centrada en la pantalla por geometría y no por buena suerte. Por
   eso la bolsa deja su hueco incluso cuando no hay pedidos: sin él, la marca se
   corre hacia la derecha. */
/* Las dos columnas de los lados miden EXACTAMENTE lo mismo, así que la del
   medio queda centrada en la pantalla por geometría y no por buena suerte. El
   menú va siempre a la izquierda, la marca al centro y la bolsa a la derecha,
   en todas las páginas y a todos los anchos. */
.cabecera__barra {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: .5rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: .3rem max(var(--filo), calc(var(--lado) - .9rem));
}

.cabecera__marca {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  max-width: 100%;
  min-width: 0;
}
.cabecera__logo { width: auto; max-width: 100%; max-height: 1.9rem; object-fit: contain; }
.cabecera__nombre {
  font-family: var(--display);
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* -- el menú lateral, sin una línea de JavaScript --

   Una casilla escondida, sus <label> y `:checked ~`. La casilla se esconde con
   recorte (no con `hidden`) para que siga recibiendo el foco y se abra con la
   barra espaciadora. El panel entra por el lado con una animación corta; el
   fondo se oscurece y NO se mueve, porque una página que salta al abrir un menú
   se siente rota. */
.menu__llave { position: absolute; }

.menu__boton,
.menu__cerrar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  color: var(--texto);
  border-radius: 50%;
  transition: background-color .18s ease;
}
.menu__boton:hover,
.menu__cerrar:hover { background: var(--fondo-suave); }

/* Las tres rayas, dibujadas con cajas: así giran hasta formar la cruz al abrir
   sin cambiar el HTML ni pedirle nada a un guión. */
.menu__rayas { display: grid; gap: 5px; width: 20px; }
.menu__rayas i {
  height: 1px;
  background: currentColor;
  transition: transform .24s ease, opacity .18s ease;
}
.menu__llave:checked ~ .cabecera__barra .menu__rayas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu__llave:checked ~ .cabecera__barra .menu__rayas i:nth-child(2) { opacity: 0; }
.menu__llave:checked ~ .cabecera__barra .menu__rayas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu__velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--texto);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity .26s ease, visibility .26s;
}
.menu__llave:checked ~ .menu__velo { opacity: .45; visibility: visible; }

.menu__panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 51;
  width: min(20rem, 86vw);
  padding: .6rem var(--lado) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fondo);
  border-right: var(--linea);
  /* Escondido con `visibility` además del desplazamiento: un panel sólo movido
     fuera de la pantalla sigue existiendo para el ancho de la página, y ahí
     nace el desplazamiento horizontal que no debería haber nunca. */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}
.menu__llave:checked ~ .menu__panel { transform: none; visibility: visible; }

.menu__cima {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 -.55rem 1rem 0;
  padding-bottom: .6rem;
  border-bottom: var(--linea);
}
.menu__rotulo {
  margin: 0;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.menu__nav { display: grid; margin-bottom: .5rem; }
.menu__enlace {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  font-family: var(--display);
  font-size: 1.15rem;
  transition: color .16s ease, transform .16s ease;
}
.menu__enlace:hover { transform: translateX(3px); }
.menu__enlace[aria-current="page"] { color: var(--texto-suave); }

.menu__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 .5rem;
  padding-top: 1rem;
  border-top: var(--linea);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.menu__todas { font-size: .6rem; letter-spacing: .12em; color: var(--texto); border-bottom: 1px solid var(--borde); }
.menu__todas:hover { border-bottom-color: var(--texto); }

/* Las marcas del cajón, en dos columnas: doce en una sola lista dejan el
   horario y el estado del negocio fuera de la pantalla. */
.menu__casas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.menu__casas a {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-height: 2.6rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color .16s ease;
}
.menu__casas a:hover { color: var(--texto); }
.menu__casas span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__casas em { font-style: normal; font-size: .68rem; color: var(--texto-suave); }

.menu__estado {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: var(--linea);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.menu__estado--si { color: var(--abierto); }

/* -- la bolsa -- */
.bolsa {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  grid-column: 3;
  justify-self: end;
  color: var(--texto);
}
.bolsa svg { width: 22px; height: 22px; }
.bolsa--hueco { pointer-events: none; }

/* La burbuja lleva los nombres del respaldo (`cabecera__burbuja`,
   `--vacia`, `--late`) porque son los que engancha el guión del sistema para
   actualizar la cuenta sin recargar. Cambiarlos deja la cuenta congelada. */
.cabecera__burbuja {
  position: absolute;
  top: .25rem;
  right: .1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: var(--marca);
  color: var(--marca-contraste);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}
.cabecera__burbuja--vacia { display: none; }
.cabecera__burbuja--late { animation: late .45s ease; }
@keyframes late { 40% { transform: scale(1.45); } }

/* -- el buscador: una sola pieza con la lupa dentro -- */
.buscador {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 .3rem 0 0;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: 999px;
}

.buscador:focus-within {
  border-color: var(--texto);
  /* El aro va en la píldora y no en el campo: el campo no tiene caja propia
     —comparte borde con la lupa— y un aro suyo saldría partido por la mitad. */
  outline: 2px solid var(--texto);
  outline-offset: 1px;
}
.buscador input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7rem .5rem .7rem 1.1rem;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: .92rem;
}
.buscador input:focus { outline: none; }
.buscador input::placeholder { color: var(--texto-suave); }
.buscador button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
}
.buscador button svg { width: 18px; height: 18px; }
.buscador button:hover { color: var(--texto); }

/* ----------------------------------------------------------------- botones */

/* El botón principal es negro y no del color de la marca. Es lo que pide este
   diseño, y de paso lo hace inmune al color que elija el dueño: el par
   --texto/--fondo contrasta por definición en los dos modos. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* 44 px de alto mínimo: es un objetivo táctil, no un adorno. */
  min-height: 2.9rem;
  padding: .7rem 1.5rem;
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  background: var(--texto);
  color: var(--fondo);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.boton:hover { opacity: .84; text-decoration: none; }
.boton:disabled { opacity: .45; cursor: default; }
.boton--grande { min-height: 3.25rem; padding: .9rem 1.9rem; }
.boton--chico { min-height: 2.5rem; padding: .5rem 1rem; font-size: .68rem; }

/* De línea: la acción secundaria. Pesa menos a la vista, que es el punto —si
   «preguntar» pesara lo mismo que «añadir», la mitad de la gente saldría por
   el camino que no deja el pedido guardado. */
.boton--linea {
  background: none;
  color: var(--texto);
  border-color: var(--texto);
}
.boton--linea:hover { background: var(--texto); color: var(--fondo); opacity: 1; }

/* Sobre una foto o una franja oscura. */
.boton--claro {
  background: none;
  color: var(--fondo);
  border-color: var(--fondo);
}
.boton--claro:hover { background: var(--fondo); color: var(--texto); opacity: 1; }

.boton--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--whatsapp-contraste);
}

/* ------------------------------------------------------------------ sellos */

.sello {
  display: inline-block;
  padding: .22rem .5rem;
  border-radius: var(--radio);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
/* El descuento va en el color de la marca, y el texto en su contraste: así se
   lee con cualquier color que ponga el dueño, incluido un amarillo. */
.sello--oferta { background: var(--marca); color: var(--marca-contraste); }
.sello--nuevo,
.sello--rango { background: var(--texto); color: var(--fondo); }
.sello--agotado { background: var(--fondo); color: var(--texto-suave); border: var(--linea); }

/* ----------------------------------------------------------------- tarjeta */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.tarjeta:hover { border-color: var(--texto); }

.tarjeta__enlace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 .85rem 0;
  color: var(--texto);
}
.tarjeta__enlace:hover { text-decoration: none; }

/* La foto, limpia. Nada encima: ni el botón de añadir, ni el sello del
   descuento, ni los puntitos. En un catálogo de lentes la foto ES el producto,
   y un círculo sobre la montura esconde justo lo que hay que mirar. */
.tarjeta__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 7rem;
  margin: 0 -.85rem 0;
  background: var(--fondo-suave);
  overflow: hidden;
}
.tarjeta__img { object-fit: cover; }
/* Sin JavaScript sólo existe la primera foto, y tiene que llenar el cuadro
   igual que cuando se van turnando. */
.tarjeta__foto:not([data-varias]) .tarjeta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.tarjeta__sinfoto {
  position: absolute;
  inset: 0;
  background: var(--fondo-suave);
}
.tarjeta--agotado .tarjeta__foto { opacity: .55; }

.tarjeta__casa {
  margin: 0;
  min-width: 0;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tarjeta__nombre {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.3;
}

/* El renglón de debajo del nombre existe para que todas las tarjetas midan lo
   mismo: los tonos si los hay, el resumen de la descripción si no. Una tarjeta
   más corta que sus vecinas parece la que no se puede comprar. */
.tarjeta__pie {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .6rem;
  min-height: 1.15rem;
  font-size: .78rem;
  color: var(--texto-suave);
}
.tarjeta__nota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tonos { display: inline-flex; gap: .22rem; flex: 0 0 auto; }
.tonos i {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  /* El aro va en --texto-suave y no en --borde: un tono negro rodeado del
     borde del modo oscuro no se distingue del fondo de la tarjeta, y entonces
     «3 tonos» enseña dos. */
  border: 1px solid var(--texto-suave);
}

.tarjeta__precio {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
  margin: auto 0 0;
  font-size: .95rem;
}
.tarjeta__precio strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tarjeta__precio s { color: var(--texto-suave); font-size: .85rem; text-decoration-thickness: 1px; }
.tarjeta__desde { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

/* -- el círculo de añadir, al lado del precio -- */
.tarjeta__mas { flex: 0 0 auto; }
.tarjeta__mas .pedir { margin: 0; }
/* La cantidad se queda en 1 y no se enseña: un campo numérico en cada tarjeta
   convierte el catálogo en un formulario. Se esconde, no se quita: sigue
   viajando en el envío. */
.tarjeta__mas .pedir__cantidad,
.tarjeta__mas .pedir__etiqueta { display: none; }
.tarjeta__mas .pedir__fila { display: block; }
.tarjeta__mas .pedir__opciones { display: none; }

/* El texto del botón es la etiqueta que lee un lector de pantalla («Añadir
   Aviator Classic a la bolsa»); lo que se ve es la cruz, que se pinta como
   FONDO del botón —ver más abajo— y no como un hijo suyo.

   Por eso aquí no hay rejilla: una rejilla con el texto de la etiqueta dentro
   reparte el hueco sobrante entre las filas, y eso era lo que empujaba la cruz
   hacia abajo. `font-size: 0` esconde el texto sin quitarle el nombre al
   botón. */
.mas {
  position: relative;
  display: block;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: var(--linea);
  border-radius: 50%;
  color: var(--texto);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
/* El círculo se ve de 37 px, que es lo que pide el diseño en una tarjeta de
   160 px, pero SE TOCA de 45: este pseudo-elemento transparente agranda la zona
   sensible sin agrandar el dibujo. Un botón de pedir que se falla con el pulgar
   es una venta que se cae. */
.mas::before {
  content: "";
  position: absolute;
  /* Cuadrado y no redondo a propósito: `border-radius` recorta también los
     toques, y con esquinas redondeadas se pierden justo las cuatro puntas
     donde el pulgar falla más. */
  inset: -5px;
}
.mas:disabled { opacity: .5; }

/* ------------------------------------------------------- rejilla y pistas */

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

/* La fila que se desliza con el dedo: `overflow-x` con `scroll-snap`, sin una
   línea de JavaScript. El navegador ya sabe hacerlo —con el dedo, con la rueda,
   con el teclado y con el lector de pantalla— y no se queda quieto el día que
   un guión no cargue. */
.pista {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: 2px 0 .5rem;
  /* La fila sangra hasta el borde de la pantalla y se vuelve a acolchar por
     dentro, para que la primera tarjeta quede alineada con el título y la
     última pueda salirse. */
  margin-inline: calc(var(--lado) * -1);
  padding-inline: var(--lado);
  /* Y ESTO no es de más: con `scroll-snap-align: start` el navegador alinea la
     tarjeta con el borde del área de desplazamiento, que está DENTRO del
     relleno, y arranca la fila ya desplazada esos píxeles — la primera tarjeta
     aparecía cortada por la izquierda. `scroll-padding` mueve ese borde al
     mismo sitio que el relleno y la fila empieza donde debe. */
  scroll-padding-inline: var(--lado);
  scrollbar-width: thin;
}
/* Lo que importa es el trozo de la siguiente tarjeta que asoma: es lo que
   dice, sin explicarlo, que la fila se desliza. Sin ese trozo se lee como una
   rejilla a la que le faltan cosas. */
.pista__uno { flex: 0 0 62%; scroll-snap-align: start; min-width: 0; }
.pista > .pista__uno:only-child { flex-basis: min(20rem, 80%); }

/* --------------------------------------------------------------- banners

   Los monta el sistema y el dueño elige si salen en lista o deslizables; el
   tema sólo los viste. Los puntitos son ANCLAS de verdad —por eso funcionan sin
   JavaScript— así que se pintan como puntos y no se convierten en botones.
   Y llevan el filo de la página: nada toca el borde de la pantalla. */
.cinta-banners { padding-top: 1rem; }
.banners { border-radius: calc(var(--radio) + 2px); overflow: hidden; }
.banners img { width: 100%; height: auto; display: block; }
.banners--lista { display: grid; gap: .6rem; }

.banners--slider { position: relative; }
.banners__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.banners__pista::-webkit-scrollbar { display: none; }
.banners__pista > * { flex: 0 0 100%; scroll-snap-align: center; }

.banners__puntos {
  display: flex;
  gap: .4rem;
  justify-content: center;
  padding: .7rem 0 .1rem;
}
.banners__punto {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--borde);
  transition: background-color .2s ease, transform .2s ease;
}
.banners__punto:hover { transform: scale(1.3); }
.banners__punto.activo,
.banners__punto:focus-visible { background: var(--texto); }

/* --------------------------------------------------------------- secciones */

.seccion { padding-block: var(--paso); }
.seccion + .seccion { padding-top: 0; }
/* La primera sección respira menos por arriba: encima ya están los banners o
   la cabecera, y el doble aire dejaba la pantalla casi vacía al entrar. */
main > .seccion:first-of-type,
.cinta-banners + .seccion { padding-top: clamp(1.5rem, 5vw, 2.5rem); }

.seccion__titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
  padding-bottom: .9rem;
  border-bottom: var(--linea);
}
.seccion__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.15;
}
.seccion__ver {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* Con gap y no con el espacio del HTML: en un contenedor flex el espacio
     entre el texto y la flecha se pierde, y quedaba «COLECCIÓN→». */
  gap: .35rem;
  min-height: 2.75rem;
  padding-bottom: .2rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid transparent;
}
.seccion__ver:hover { color: var(--texto); border-bottom-color: var(--texto); }

.salida { padding-bottom: var(--paso); text-align: center; }
.salida .boton { width: min(100%, 24rem); }

/* -------------------------------------------------------- casas de moda */

/* ---------------------------------------------- el índice de casas de moda

   Un índice de revista y no una fila de píldoras: dos columnas, línea de un
   pelo entre renglones, el nombre con remates y la cuenta pequeña al lado.
   Enseña TODAS las marcas de un vistazo —que es lo primero que se busca en un
   outlet de firma— en vez de esconder la mitad detrás de un gesto que nadie
   sabe que puede hacer. */
.indice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 4vw, 2.5rem);
  border-top: var(--linea);
}
.indice__uno {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  min-height: 3.1rem;
  padding: .5rem 0;
  border-bottom: var(--linea);
  color: var(--texto);
}
.indice__nombre {
  font-family: var(--display);
  font-size: clamp(.92rem, 3.6vw, 1.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indice__cuantos {
  flex: 0 0 auto;
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--texto-suave);
}
.indice__uno:hover .indice__nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* -------------------------------------------- las pestañas del catálogo

   Mayúsculas espaciadas con una línea de un pelo bajo la elegida. Las cajas
   redondeadas con borde se ven en cualquier tienda de saldo; esto se ve en las
   de firma. Sigue deslizándose con el dedo —con doce marcas no hay pantalla que
   las aguante en un renglón— pero ya no parece un cinturón de botones. */
.pestanas { border-bottom: var(--linea); margin-bottom: 1.1rem; }
.pestanas__pista {
  display: flex;
  gap: clamp(1.1rem, 5vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--lado) * -1);
  padding-inline: var(--lado);
}
.pestanas__pista::-webkit-scrollbar { display: none; }
.pestana {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  border-bottom: 2px solid transparent;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-suave);
}
.pestana:hover { color: var(--texto); }
.pestana--activa { color: var(--texto); border-bottom-color: var(--texto); }

/* ------------------------------------------------------------------- cita */

.cita {
  margin-block: var(--paso);
  padding-block: clamp(2.5rem, 9vw, 4.5rem);
  background: var(--texto);
  color: var(--fondo);
  text-align: center;
}
.cita .ojo { justify-content: center; }
.cita__texto {
  max-width: 34rem;
  margin: .5rem auto .9rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.35rem, 5.6vw, 2rem);
  line-height: 1.3;
}
.cita__pie {
  margin: 0;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .68;
}

/* ------------------------------------------------ concierge y diario visual */

.concierge { border-top: var(--linea); background: var(--fondo); }
.concierge__dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: clamp(2rem, 7vw, 3rem);
}
.concierge__texto {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  line-height: 1.25;
}
.concierge .boton { flex: 0 0 auto; }

.diario { padding-bottom: 0; }
.diario__redes { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; }
.diario__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  padding-bottom: .15rem;
}
.diario__redes a:hover { color: var(--texto); border-bottom-color: var(--texto); }

/* --------------------------------------------------------------- catálogo */

.encabezado { padding-block: var(--paso) 1.25rem; }
.encabezado--centrado { text-align: center; }
.encabezado--centrado .ojo { justify-content: center; }
.encabezado__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1.08;
}
.encabezado__texto { max-width: 40rem; margin-top: .85rem; color: var(--texto-suave); font-size: .95rem; }

.barra-orden {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: .9rem 0 1.15rem;
  border-bottom: var(--linea);
  margin-bottom: 1.25rem;
}
.barra-orden__cuenta {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.barra-orden__cuenta strong { color: var(--texto); font-size: .85rem; }

/* La barra de filtros la pinta el sistema (un formulario GET de los de
   siempre, que funciona sin JavaScript). Aquí sólo se viste. */
.filtros-catalogo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.filtros-catalogo select,
.filtros-catalogo input[type=text] {
  min-height: 2.5rem;
  padding: .45rem .8rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: .8rem;
}
.filtros-catalogo select { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600; }
.filtros-catalogo select:focus,
.filtros-catalogo input:focus { border-color: var(--texto); }
/* Y el aro, de vuelta: el respaldo lo quita con `outline: none` en una regla
   de dos clases, que gana por especificidad al `:focus-visible` general. */
.filtros-catalogo select:focus-visible,
.filtros-catalogo input:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.filtros-catalogo__precio { display: inline-flex; gap: .35rem; }
.filtros-catalogo__precio input { width: 5.5rem; }
.filtros-catalogo__casilla {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .2rem;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.filtros-catalogo__casilla input { accent-color: var(--texto); width: 1.15rem; height: 1.15rem; }
.filtros-catalogo__aplicar {
  min-height: 2.5rem;
  padding: .45rem 1.1rem;
  background: var(--texto);
  color: var(--fondo);
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.filtros-catalogo__limpiar {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
}
.filtros-catalogo__vista { display: inline-flex; gap: .25rem; }
.filtros-catalogo__ver {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto-suave);
}
.filtros-catalogo__ver.activa { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.icono-vista { width: 16px; height: 16px; }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--paso);
  padding-top: 1.25rem;
  border-top: var(--linea);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.paginacion a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto); border-bottom: 1px solid var(--borde); }
.paginacion a:hover { border-bottom-color: var(--texto); }
.paginacion__cuenta { color: var(--texto-suave); text-align: center; }

.vacio {
  padding: clamp(2.5rem, 10vw, 5rem) 0;
  text-align: center;
  color: var(--texto-suave);
  font-size: .95rem;
}
.vacio a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .75rem; color: var(--texto); border-bottom: 1px solid var(--borde); }

/* ---------------------------------------------------------- ficha de pieza */

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-block: 1.25rem .35rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.migas a { color: var(--texto-suave); }
.migas a:hover { color: var(--texto); }
.migas [aria-current] { color: var(--texto); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.producto { display: grid; gap: 1.5rem; padding-block: 1rem var(--paso); }

.producto__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.producto__principal img,
.producto__foto { width: 100%; height: 100%; object-fit: cover; }
.producto__sinfoto {
  aspect-ratio: 1 / 1;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
}
.producto__visorvideo { position: absolute; inset: 0; background: var(--texto); display: grid; align-items: center; }
.producto__visorvideo .video { margin: 0; padding-top: 56.25%; border-radius: 0; }

.producto__tira { margin-top: .7rem; }
.producto__galeria {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding-bottom: .35rem;
  scrollbar-width: thin;
}
.producto__miniatura {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  min-height: 2.75rem;
  padding: 0;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: pointer;
  color: var(--texto-suave);
}
.producto__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.producto__miniatura svg { width: 20px; height: 20px; }
.producto__miniatura:hover,
.producto__miniatura.activo { border-color: var(--texto); }
.producto__puntos { display: flex; gap: 4px; justify-content: center; margin-top: .5rem; }
.producto__puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--borde); }
.producto__puntos i.activo { background: var(--texto); }

.producto__datos h1 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  line-height: 1.1;
}
.producto__meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .5rem;
}
.producto__casa {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.producto__casa:hover { color: var(--texto); }

.producto__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: var(--linea);
}
.producto__precio strong { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.producto__precio s { color: var(--texto-suave); font-size: 1rem; }
.producto__desde { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.producto__pista { flex: 1 0 100%; font-size: .8rem; color: var(--texto-suave); }

.producto__acciones { display: grid; gap: .55rem; margin: 1.35rem 0; }
.producto__acciones .boton { width: 100%; }
/* El formulario de añadir lo pinta el sistema: cantidad y botón en el mismo
   renglón, con la cantidad estrecha porque casi nunca se toca. */
.producto__acciones .pedir__fila {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  /* Sin envolver: el respaldo lo deja envolver y con la etiqueta larga el botón
     se bajaba a su propio renglón, dejando la cantidad sola arriba. */
  flex-wrap: nowrap;
}
.pedir__cantidad {
  width: 3.7rem;
  flex: 0 0 auto;
  padding: .7rem .6rem;
  text-align: center;
  background: var(--fondo);
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
}
.producto__acciones .pedir__fila .boton { flex: 1 1 auto; width: auto; min-width: 0; white-space: nowrap; }
.pedir__opciones { display: grid; gap: .3rem; margin-bottom: .6rem; }
.pedir__etiqueta { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.pedir__select {
  min-height: 2.9rem;
  padding: .6rem .8rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
}

.producto__descripcion { color: var(--texto-suave); font-size: .95rem; }
.producto__descripcion p { margin: 0 0 .8rem; }
.producto__sku {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: var(--linea);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.aviso {
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  border: var(--linea);
  border-left: 2px solid var(--marca);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  font-size: .9rem;
}

/* ------------------------------------------------------------ variaciones */

/* El selector lo pinta `partes/variaciones.php` del respaldo, que este tema no
   sobrescribe a propósito: sus clases y sus `data-…` son los que engancha el
   guión del sistema para cambiar la foto y el precio al elegir. Aquí sólo se
   viste. El <select> oculto sigue siendo el único campo que se manda de verdad;
   los botones y los círculos sólo escriben en él. */
.variaciones-elegir { margin: 0 0 1.35rem; }
.variaciones-elegir__selectores { display: grid; gap: 1rem; }
.variaciones-elegir__uno { display: grid; gap: .45rem; max-width: none; }
.variaciones-elegir__uno > label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.variaciones-elegir__uno select {
  min-height: 2.9rem;
  padding: .6rem .8rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
}

.muestras { display: flex; flex-wrap: wrap; gap: .45rem; }
.muestra {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .8rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .15s ease;
}
.muestra:hover { border-color: var(--texto); }
/* La clase que pone el guión al elegir. Se marca con el borde y con un aro, no
   sólo con el color: quien no distingue bien los colores tiene que poder ver
   cuál eligió. */
.muestra--elegida {
  border-color: var(--texto);
  box-shadow: 0 0 0 2px var(--fondo) inset, 0 0 0 1px var(--texto);
}
.muestras--color .muestra { min-width: 2.4rem; padding: .3rem; border-radius: 50%; }
.muestra__color { display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.muestras--imagen .muestra { padding: .2rem; }
.muestra img { width: 2.2rem; height: 2.2rem; object-fit: cover; }
.muestra__texto { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; font-weight: 600; }

.variaciones-elegir__aviso { margin: 0; font-size: .85rem; color: var(--marca); }
.variaciones-rango { margin: 0 0 1rem; font-size: .9rem; color: var(--texto-suave); }
.variaciones-todas { margin: 0 0 1.25rem; font-size: .9rem; }
.variaciones-todas summary {
  cursor: pointer;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.variaciones-lista { max-height: 15rem; overflow-y: auto; margin-top: .6rem; }
.variaciones-lista li { border-bottom: var(--linea); }
.variaciones-lista strong { color: var(--texto); }

/* --------------------------------------------------------------- el pedido */

/* Esta página la pinta el respaldo. Este tema NO la sobrescribe, y no es
   descuido: el contrato prohíbe que un tema escriba los formularios de cambiar
   la cantidad y quitar una línea —son del sistema—, así que reescribirla
   costaría poder editar el pedido. Se hereda y se viste. */
.pagina--pedido main,
.pagina--guardado main,
.pagina--caducado main {
  max-width: var(--ancho);
  margin-inline: auto;
}
.pagina--pedido main { padding: 0 var(--lado) var(--paso); }
.encabezado h1 { margin: 0; font-size: clamp(1.9rem, 8vw, 2.6rem); }

.pedido { display: grid; gap: 1.75rem; }
.pedido-vacio { padding: clamp(2.5rem, 10vw, 5rem) 0; text-align: center; color: var(--texto-suave); }
.pedido-vacio .boton { margin-top: 1rem; }

.linea {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .35rem .9rem;
  padding: 1rem 0;
  border-bottom: var(--linea);
}
.linea__foto img,
.linea__sinfoto {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  display: block;
}
.linea__nombre { margin: 0 0 .2rem; font-family: var(--display); font-size: 1rem; font-weight: 400; }
.linea__opciones,
.linea__precio { margin: 0; font-size: .8rem; color: var(--texto-suave); }
.linea__total { grid-column: 2; margin: .3rem 0 0; font-weight: 700; }
.linea__acciones { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.linea__cantidad { display: inline-flex; gap: .35rem; }
.linea__cantidad input {
  width: 3.6rem;
  min-height: 2.4rem;
  padding: .35rem;
  text-align: center;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
}
.linea__cantidad button,
.linea__quitar {
  min-height: 2.4rem;
  padding: .35rem .8rem;
  background: none;
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto-suave);
  font: inherit;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.linea__cantidad button:hover,
.linea__quitar:hover { border-color: var(--texto); color: var(--texto); }

.pedido__resumen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--texto);
}
.pedido__resumen span { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.pedido__resumen strong { font-size: 1.5rem; letter-spacing: -.02em; }
.pedido__seguir { margin: 1rem 0 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.pedido__seguir a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }

.pedido__datos {
  padding: 1.5rem var(--lado) 1.75rem;
  margin-inline: calc(var(--lado) * -1);
  background: var(--fondo);
  border-top: var(--linea);
  border-bottom: var(--linea);
}
.pedido__datos h2 { margin: 0 0 1.1rem; font-size: 1.35rem; }

/* Los campos, las casillas y el orden los pinta `formulario_pedido()`: es la
   pieza que guarda el pedido ANTES de abrir WhatsApp y no se reescribe. Lo que
   es del tema es el aspecto. */
.pedido-form { display: grid; gap: .9rem; }
.pedido-form__campo { display: grid; gap: .35rem; margin: 0; }
.pedido-form__campo label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.pedido-form__campo input,
.pedido-form__campo textarea {
  min-height: 2.9rem;
  padding: .7rem .9rem;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;      /* 16 px: por debajo, iOS hace zoom al enfocar */
}
.pedido-form__campo textarea { min-height: 4.5rem; resize: vertical; }
.pedido-form__campo input:focus,
.pedido-form__campo textarea:focus { border-color: var(--texto); }
.pedido-form__casilla { margin: 0; }
.pedido-form__casilla label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--texto-suave);
  cursor: pointer;
}
.pedido-form__casilla input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .12rem;
  accent-color: var(--texto);
}
.pedido-form__enviar {
  min-height: 3.25rem;
  margin-top: .4rem;
  padding: .95rem 1.5rem;
  background: var(--whatsapp);
  border: 1px solid var(--whatsapp);
  border-radius: var(--radio);
  color: var(--whatsapp-contraste);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.pedido-form__enviar:hover { opacity: .88; }
.pedido-form__enviar:disabled { opacity: .5; cursor: default; }
.pedido-form__aviso { margin: 0; font-size: .8rem; color: var(--texto-suave); }
.pedido-form__error {
  margin: 0;
  padding: .7rem .9rem;
  border-left: 2px solid var(--marca);
  background: var(--fondo-suave);
  font-size: .88rem;
}

/* --------------------------------------------- pedido guardado y caducado */

.guardado { max-width: 34rem; margin-inline: auto; padding: var(--paso) var(--lado); }
.guardado__ok {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.5rem;
  padding: .8rem 1rem;
  background: var(--fondo);
  border: var(--linea);
  border-left: 2px solid var(--abierto);
  border-radius: var(--radio);
  font-size: .9rem;
  font-weight: 600;
}
.guardado__tic { display: grid; place-items: center; color: var(--abierto); }
.guardado__tic svg { width: 18px; height: 18px; }
.guardado__folio {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: .02em;
}
.guardado__fecha { margin: 0 0 1.5rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.guardado__accion { margin: 0 0 .6rem; }
.guardado__accion .boton { width: 100%; }
.guardado__nota { margin: 0 0 1.75rem; font-size: .82rem; color: var(--texto-suave); }

.guardado__lineas { list-style: none; margin: 0; padding: 0; border-top: var(--linea); }
.guardado__linea {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: .3rem .8rem;
  padding: .8rem 0;
  border-bottom: var(--linea);
}
.guardado__linea img,
.guardado__sinfoto {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  display: block;
}
.guardado__nombre { font-family: var(--display); font-size: .98rem; }
.guardado__nombre em { display: block; font-family: inherit; font-style: normal; font-size: .78rem; color: var(--texto-suave); }
.guardado__cantidad { font-size: .8rem; color: var(--texto-suave); }
.guardado__importe { grid-column: 3; font-weight: 700; font-size: .95rem; }
.guardado__resumen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--texto);
}
.guardado__resumen span { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.guardado__resumen strong { font-size: 1.4rem; letter-spacing: -.02em; }
.guardado__quien,
.guardado__nota-pedido { margin: 1rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.guardado__vigencia {
  margin: 1.5rem 0 0;
  padding: .85rem 1rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  font-size: .82rem;
  color: var(--texto-suave);
}
.guardado__volver { margin: 1.75rem 0 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.guardado__volver a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }

.aviso-pagina { padding-bottom: var(--paso); }
.aviso-pagina__texto { max-width: 30rem; margin: .9rem auto 1.75rem; color: var(--texto-suave); }
.aviso-pagina__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; }
.aviso-pagina__acciones .boton { flex: 1 1 14rem; }

.caducado__folio {
  display: grid;
  gap: .3rem;
  max-width: 18rem;
  margin: 0 auto 1.75rem;
  padding: 1rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
}
.caducado__folio span { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.caducado__folio strong { font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; }

/* -------------------------------------------------- la barra de selección */

/* Fija abajo, donde está el pulgar. Es un enlace normal a la página del
   pedido, no un salto a WhatsApp: ahí es donde el pedido se guarda ANTES de
   saltar, y ése es el motivo por el que este sistema existe. */
.barra {
  position: fixed;
  left: .6rem;
  right: .6rem;
  bottom: .6rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .6rem;
  background: var(--texto);
  color: var(--fondo);
  border-radius: calc(var(--radio) + 6px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
}
.barra:hover { text-decoration: none; }
.barra__bolsa { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; }
.barra__bolsa svg { width: 22px; height: 22px; }
.barra__num {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .22rem;
  border-radius: 999px;
  background: var(--marca);
  color: var(--marca-contraste);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.barra__texto { flex: 1 1 auto; min-width: 0; display: grid; }
.barra__texto strong { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__texto em {
  font-style: normal;
  font-size: .68rem;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__ir {
  flex: 0 0 auto;
  padding: .6rem .85rem;
  background: var(--fondo);
  color: var(--texto);
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

   Cuatro columnas de cosas que sirven, y no un renglón de cortesía: las casas
   de moda una por una, la colección por atajos, el teléfono para tocarlo, el
   mapa, el horario y las redes. Es donde llega quien recorrió el catálogo y no
   encontró lo suyo, y ahí un pie vacío es una visita que se va.

   Se invierte con los mismos tokens: fondo --texto, letra --fondo. Lo apagado
   de dentro va con `opacity`, no con --texto-suave, que sobre este fondo no
   contrasta con nada. */

.pie { background: var(--texto); color: var(--fondo); }
.pie a { color: var(--fondo); }

.pie__dentro {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.5rem, 9vw, 4rem);
}
.pie__col { min-width: 0; }

.pie__logo { max-height: 2.1rem; width: auto; object-fit: contain; }
.pie__nombre {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pie__frase { margin: .7rem 0 0; max-width: 24rem; font-size: .9rem; line-height: 1.55; opacity: .68; }
.pie__garantia {
  margin: 1rem 0 0;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .5;
}

.pie__titulo {
  margin: 0 0 .35rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .5;
}

.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista a,
.pie__lista .pie__direccion {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: .88rem;
  opacity: .82;
}
.pie__lista a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pie__lista .pie__direccion { opacity: .68; min-height: auto; padding-block: .5rem; }
.pie__todas { font-weight: 600; letter-spacing: .06em; }
.pie__tel { font-family: var(--display); font-size: 1.15rem !important; letter-spacing: .04em; }

.pie__abierto {
  margin: 1.1rem 0 .5rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pie__abierto--si { color: var(--abierto); }
.pie__abierto--no { opacity: .55; }
.pie__horario { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .8rem; opacity: .68; }
.pie__horario li { display: flex; gap: .6rem; }
.pie__horario span { flex: 0 0 4.5rem; font-weight: 600; }
.pie__horas-planas { margin: 1rem 0 0; font-size: .82rem; opacity: .68; }

.pie__redes { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 1.1rem 0 0; }
.pie__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
  border-bottom: 1px solid currentColor;
}
.pie__redes a:hover { opacity: 1; }

/* El renglón legal: centrado, pequeño y apagado. La firma va del MISMO tamaño
   que el aviso de derechos y no del de un enlace del menú: es una atribución,
   no una sección del sitio. */
.pie__legal {
  padding-block: 1.15rem;
  border-top: 1px solid currentColor;
  text-align: center;
}
.pie__legal p {
  margin: 0;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .45;
}
.pie__legal p + p { margin-top: .4rem; }
.pie__legal a { border-bottom: 1px solid currentColor; }

/* --------------------------------- el recuadro rápido y el aviso flotante */

/* Estas dos piezas las crea el guión del sistema, no el tema: el recuadro que
   abre una ficha encima del catálogo y el aviso de «añadido». El tema no las
   escribe, sólo las viste, y por eso los nombres de clase son los suyos. */
.capa__fondo { background: var(--texto); opacity: .72; }
.capa__caja {
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
}
.capa__cerrar {
  width: 2.5rem;
  height: 2.5rem;
  border: var(--linea);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--texto);
}
.capa__cerrar:hover { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.capa__cargando { color: var(--texto-suave); }
.capa .producto { padding-block: .5rem 0; }

.aviso-flotante {
  background: var(--texto);
  color: var(--fondo);
  border: 0;
  border-radius: calc(var(--radio) + 4px);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5);
}
.aviso-flotante--malo { background: var(--marca); color: var(--marca-contraste); }
/* Con la barra de selección puesta, el aviso se levanta para no taparla. */
.tiene-barra .aviso-flotante { bottom: calc(var(--alto-barra) + .6rem); }

/* --------------------------------------------------------- la entrada suave */

/* Decoración y nada más: sin JavaScript no hay clase `tema-js`, no hay
   animación, y todo se ve desde el primer momento. Nunca al revés —esconder
   con CSS y enseñar con JavaScript deja la página en blanco el día que el
   guión no carga. */
.tema-js .revelar { opacity: 0; transform: translateY(14px); }
.tema-js .revelar--visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tema-js .revelar,
  .tema-js .revelar--visible { opacity: 1; transform: none; transition: none; }
  .cabecera__burbuja--late { animation: none; }
  .tarjeta { transition: none; }
}

/* ------------------------------------------------------------- pantallas */

@media (min-width: 560px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .pie__dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu__casas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pista { gap: 1.1rem; }
  .pista__uno { flex-basis: 42%; }
  .barra {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(34rem, calc(100% - 1.2rem));
    gap: .8rem; padding: .6rem .7rem;
  }
  .barra__ir { padding: .65rem 1.05rem; font-size: .66rem; letter-spacing: .1em; }
  .barra__texto strong { font-size: .88rem; }
  .aviso-pagina__acciones .boton { flex: 0 1 auto; }
}

@media (min-width: 900px) {
  :root { --alto-barra: 5.25rem; }

  .cabecera__barra { padding-block: .5rem; }
  .indice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu__casas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu__dentro { padding-block: 1.5rem 2rem; }

  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  .pista { gap: 1.4rem; }
  .pista__uno { flex-basis: 24%; }


  /* La ficha en dos columnas, y las fotos SIN pegarse al techo al desplazar:
     el botón de pedir tiene que seguir a la vista mientras se lee la
     descripción larga. */
  .producto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .producto__fotos { position: sticky; top: 1.5rem; }
  .producto__acciones { grid-template-columns: 1fr auto; align-items: center; }
  .producto__acciones .boton--linea { width: auto; }

  .pedido { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .pedido__datos {
    position: sticky;
    top: 1.5rem;
    margin-inline: 0;
    padding: 1.75rem;
    border: var(--linea);
    border-radius: var(--radio);
  }

  .pie__dentro { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; }
  .concierge__dentro { flex-wrap: nowrap; }
  .mas { width: 2.6rem; height: 2.6rem; }
}

@media (min-width: 1200px) {
  .rejilla { gap: 1.75rem; }
  .pista { gap: 1.75rem; }
}

/* La vista de lista del catálogo: la MISMA tarjeta, acostada. El círculo de
   añadir sigue en la esquina, que es donde el dedo ya lo busca. */
.rejilla--lista { grid-template-columns: 1fr; gap: .7rem; }
.rejilla--lista .tarjeta__enlace { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1rem; align-items: center; padding: .7rem .7rem .7rem 0; }
.rejilla--lista .tarjeta__foto { margin: 0; grid-row: span 4; }
.rejilla--lista .tarjeta__casa,
.rejilla--lista .tarjeta__nombre,
.rejilla--lista .tarjeta__pie,
.rejilla--lista .tarjeta__precio { margin-right: 3.5rem; }
.rejilla--lista .tarjeta__precio { margin-top: .25rem; }
@media (min-width: 700px) {
  .rejilla--lista .tarjeta__enlace { grid-template-columns: 8.5rem 1fr; }
}

/* ============================================================================
   LO QUE HAY QUE DESHACER DEL RESPALDO

   La hoja del diseño de respaldo se carga ANTES de ésta —es lo que hace
   `estilos_tema()`— y está escrita para un tema oscuro con el precio del color
   de la marca. Dos familias de reglas suyas no sirven aquí, y las dos se
   arreglan a mano porque no hay forma de «desheredar» CSS:

   1. Los textos pintados con var(--marca). El precio es el peor: es el número
      más importante de la tarjeta, y el dueño puede poner un amarillo desde el
      panel. Aquí el precio va en --texto, que contrasta por definición.

   2. Los colores escritos a pelo para fondo oscuro —un rosa pálido para los
      errores, un verde pálido para el «quedó guardado»—. Sobre papel claro no
      se leen.
   ============================================================================ */

.tarjeta__precio,
.tarjeta__precio strong,
.producto__precio,
.producto__precio strong,
.variaciones-rango strong,
.variaciones-lista strong { color: var(--texto); }
.tarjeta__precio s,
.producto__precio s { color: var(--texto-suave); }

/* Los avisos dicen lo suyo con la letra y con la rayita del lado, no con el
   color de la letra: así se leen con cualquier marca. */
.variaciones-elegir__aviso { color: var(--texto); }
.aviso--agotado { color: var(--texto); }
.pedido-form__error { color: var(--texto); background: var(--fondo-suave); border: var(--linea); border-left: 2px solid var(--marca); }
.guardado__ok { color: var(--texto); }
.aviso-flotante--malo { border-left-color: var(--marca); }

.producto__miniatura--video:hover { color: var(--texto); border-color: var(--texto); }

/* Los puntitos de la tarjeta con varias fotos.
   Éstos NO se atan a los tokens del tema, y es la única excepción a propósito
   de todo el archivo: van encima de una FOTO, cuyo brillo no lo decide el modo
   claro u oscuro del panel sino quien subió la imagen. Atarlos a --texto los
   dejaba blancos sobre una foto de estudio clara —invisibles— justo en el modo
   oscuro. Blancos con un filo oscuro se ven encima de las dos. */
/* Los puntitos de «hay más fotos», debajo de la foto y no encima. La franja se
   reserva siempre —también con una sola foto— para que dos tarjetas de la misma
   fila midan lo mismo. Ya no van sobre la imagen, así que se pintan con los
   tokens del tema como todo lo demás. */
.tarjeta__puntos {
  position: static;
  display: flex;
  gap: 4px;
  justify-content: center;
  height: 1.1rem;
  align-items: center;
}
.tarjeta__puntos i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--borde);
  box-shadow: none;
  opacity: 1;
}
.tarjeta__puntos i.activo { background: var(--texto); }

/* El renglón de la marca y el sello, debajo de la foto. */
.tarjeta__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .3rem;
  min-height: 1.05rem;
}

/* El cierre de la tarjeta: el precio a la izquierda y el botón a la derecha,
   uno al lado del otro y fuera del enlace —`boton_agregar()` es un <form>, y un
   formulario dentro de un <a> es HTML inválido—. */
.tarjeta__cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .1rem .85rem .85rem;
}
.tarjeta__precio--sin {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* El respaldo levanta la tarjeta al pasar el ratón. Aquí no: el catálogo se
   lee como una página impresa y las tarjetas no rebotan. El borde ya avisa. */
.tarjeta:hover { transform: none; }
.muestra--elegida { transform: none; }

/* Un poco de relieve bajo el círculo de añadir: sobre una foto clara, un
   círculo blanco con filo de un pelo se pierde. */
.mas { box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .45); }

/* La barra de filtros, compacta: a 390 px se apilaba en tres renglones y
   pesaba más que los productos. */
.filtros-catalogo { flex: 1 1 auto; justify-content: flex-start; }
.filtros-catalogo__orden { display: inline-flex; }
.filtros-catalogo__precio input { width: 4.6rem; }
.filtros-catalogo__vista { margin-left: auto; }

/* El precio de la tarjeta, en un solo renglón: el tachado al lado y no debajo. */
.tarjeta__precio { flex-wrap: nowrap; gap: .35rem; align-items: baseline; margin: 0; min-width: 0; }
.tarjeta__precio s { font-size: .78rem; white-space: nowrap; }
.tarjeta__precio strong { white-space: nowrap; }

/* La barra de filtros a lo ancho de un celular: el desplegable de orden se
   queda estrecho para que comparta renglón con la cuenta de piezas, y el resto
   de los controles se acomodan debajo. El texto largo de una opción
   («Precio: de mayor a menor») hacía que el <select> midiera media pantalla. */
.barra-orden { gap: .5rem .75rem; }
.filtros-catalogo { gap: .4rem; }
.filtros-catalogo select { max-width: 11rem; text-overflow: ellipsis; }
.filtros-catalogo__casilla { min-height: 2.5rem; }
@media (min-width: 560px) {
  .filtros-catalogo select { max-width: 16rem; }
}

/* El aro de foco dentro de las franjas invertidas.
   El aro general va en --marca, y sobre el pie o la cita —cuyo fondo es
   --texto— una marca oscura se pierde contra el fondo: quien navega con el
   teclado dejaría de ver dónde está. Ahí el aro toma el color de la letra, que
   contrasta con ese fondo por construcción. */
.marquesina :focus-visible,
.cita :focus-visible,
.pie :focus-visible,
.barra:focus-visible { outline-color: currentColor; }

/* ============================================================================
   AJUSTES DEL CIERRE DE LA TARJETA

   En una tarjeta de 143 px —dos columnas en un teléfono de 390— el precio, el
   precio tachado y el botón no caben en un renglón, y el botón acabó tapando
   el tachado («$180.00» se leía «$18»). Que envuelva: el precio se parte en dos
   líneas cuando hay oferta y se queda en una cuando no la hay, que es el caso
   normal. No sale desparejo porque en una rejilla todas las tarjetas de la
   misma fila miden lo mismo, así que la fila entera crece a la vez.
   ============================================================================ */

.tarjeta__cierre { align-items: center; }
.tarjeta__precio {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 0;
}
.tarjeta__precio strong { font-size: 1rem; }
.tarjeta__precio s { font-size: .74rem; }

/* El sello, más chico: cada píxel que se lleva es un píxel que le falta al
   nombre de la marca, y «SAINT LAURENT» ya andaba justo. */
.tarjeta__meta .sello { flex: 0 0 auto; font-size: .55rem; padding: .2rem .38rem; letter-spacing: .08em; }
.tarjeta__casa { font-size: .6rem; letter-spacing: .1em; }

/* El círculo, un poco menor de dibujo y la misma zona de toque. */
.mas { width: 2.15rem; height: 2.15rem; }
.mas::before { inset: -6px; }

/* El velo del cajón del menú.
   Va en un pseudo-elemento con z-index negativo: se pinta detrás del fondo del
   propio panel —así el panel se sigue viendo limpio— y asoma por debajo, sobre
   el resto de la página. `pointer-events: none` para que el toque llegue al
   documento y el guión pueda cerrar el cajón. */
.menu__capa::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--texto);
  opacity: .32;
  pointer-events: none;
}

/* El renglón de la marca: sola y a todo el ancho de la tarjeta. Compartiéndolo
   con el sello, «Saint Laurent» se cortaba en un teléfono de 360 px. */
.tarjeta__meta { display: block; }
.tarjeta__casa { display: block; max-width: 100%; }

/* El sello, junto al precio. Ahí un «−51%» dice algo —está al lado de la cifra
   que baja— y el renglón puede envolver si no cabe. */
.tarjeta__precio .sello { flex: 0 0 auto; font-size: .55rem; padding: .2rem .4rem; letter-spacing: .08em; }

/* En pantallas de 360 px o menos, la tarjeta respira menos por los lados: es lo
   que hace que «$4,900.00» y el botón quepan en el mismo renglón. */
@media (max-width: 380px) {
  .tarjeta__enlace { padding-inline: .6rem; }
  .tarjeta__foto { margin-inline: -.6rem; }
  .tarjeta__cierre { padding: .1rem .6rem .7rem; gap: .35rem; }
  .tarjeta__precio strong { font-size: .92rem; }
  .tarjeta__precio s { font-size: .7rem; }
  .rejilla { gap: .6rem; }
}

/* Los días del horario, de vuelta a la vista.
   El respaldo los pinta con `.pie__horario span { color: var(--texto) }` porque
   su pie va sobre --fondo. En este pie --texto ES el fondo, así que ese renglón
   salía negro sobre negro: los días del horario, invisibles. Y su `min-width`
   de 9.5rem partía el renglón en dos. */
.pie__horario span {
  color: inherit;
  min-width: 0;
  flex: 0 0 4.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pie__horario li { gap: .75rem; align-items: baseline; }

/* La cuenta de piezas de cada marca en el cajón: --texto-suave rebajado otro
   40% con opacidad no llegaba ni a 2.5:1 sobre papel claro. */
.menu__casas em { opacity: 1; color: var(--texto-suave); }

/* El «abierto ahora» del pie: el color va en el punto, no en la letra.
   --abierto es un verde pensado para fondo oscuro; en el modo oscuro del panel
   este pie se vuelve claro y ese verde sobre papel claro no llega a 3:1. Con el
   punto de color y la letra en el color del pie se lee siempre, y de paso lo
   entiende quien no distingue bien los verdes. */
.pie__abierto {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--fondo);
}
.pie__abierto::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--abierto);
}
.pie__abierto--no { opacity: .7; }
.pie__abierto--no::before { background: currentColor; opacity: .5; }

/* El renglón legal, un poco menos apagado: al 45% no llegaba a 3:1 en el modo
   oscuro, y un aviso de derechos que no se puede leer no es un aviso. */
.pie__legal p { opacity: .62; }

/* El sello del descuento, lo justo para que quepa AL LADO del precio tachado.
   Con 44 px se pasaba por un pelo del hueco de una tarjeta de 390 y el bloque
   del precio se partía en tres renglones: la cifra, el tachado y el sello, cada
   uno en su línea. Con dos basta y la tarjeta no crece. */
.tarjeta__precio .sello { letter-spacing: .04em; padding: .18rem .3rem; }

/* El precio tachado, sin el margen derecho que le pone el respaldo.
   Eran 6.4 px, y con ellos el renglón «tachado + sello» medía 100.3 px en un
   hueco de 99: el sello se caía a un tercer renglón por poco más de un píxel.
   El aire entre los dos ya lo da el `gap` del contenedor. */
.tarjeta__precio s { margin: 0; }

/* ============================================================================
   REVISIÓN 1.2.0
   ============================================================================ */

/* ---------------------------------------------------- el filo de la página

   Nada toca el borde de la pantalla menos la marquesina. Las franjas oscuras
   se meten unos milímetros y se redondean un pelo: es el detalle que separa una
   página cuidada de una plantilla. */
.cita,
.pie,
.concierge {
  margin-inline: var(--filo);
  border-radius: calc(var(--radio) + 4px);
}
.cita { margin-block: var(--paso); }
.pie { margin-bottom: var(--filo); }
.concierge { border: var(--linea); border-radius: calc(var(--radio) + 4px); }

/* Y las filas que se deslizan sangran hasta el filo, no hasta el borde: el
   trozo de la tarjeta siguiente sigue asomando, que es lo que dice sin
   explicarlo que la fila se mueve. */
.pista,
.pestanas__pista {
  margin-inline: calc((var(--lado) - var(--filo)) * -1);
  padding-inline: calc(var(--lado) - var(--filo));
  scroll-padding-inline: calc(var(--lado) - var(--filo));
}

/* ------------------------------------------------ el círculo de añadir

   LA CRUZ ES EL FONDO DEL PROPIO BOTÓN, no un elemento dentro.

   Dos intentos anteriores salieron torcidos, y por el mismo motivo las dos
   veces: la cruz era un hijo del botón, y el botón es una rejilla que ADEMÁS
   contiene el texto de su etiqueta —«Añadir tal a la bolsa», que un lector de
   pantalla necesita—. Aunque ese texto mida cero de alto, sigue ocupando su
   propia fila de la rejilla, y `align-content` reparte el hueco que sobra entre
   las DOS filas: la del texto vacío se estira y empuja la cruz hacia abajo.
   Ésa es la razón de que el signo se viera bajo, y no la tipografía.

   Pintada como fondo no hay filas ni hijos que repartir: `center` de un fondo
   es el centro de la caja de relleno del elemento, y punto. La etiqueta se
   sigue leyendo y ya no puede mover nada. */
.mas {
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat,
    var(--fondo);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mas:hover,
.mas:focus-visible {
  color: var(--fondo);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat,
    var(--texto);
  border-color: var(--texto);
}

/* --------------------------------------------- la barra de la bolsa, entera

   Se cortaba por abajo en algunos teléfonos: `bottom` fijo no sabe nada de la
   barra del navegador ni del indicador de inicio, que se comen los últimos
   milímetros de la pantalla. Con `max()` y `env()` la barra se levanta lo que
   haga falta donde esa zona existe, y donde no existe queda el mínimo. */
.barra {
  bottom: var(--hueco-abajo);
  left: var(--filo);
  right: var(--filo);
  min-height: 3.6rem;
}
@media (min-width: 560px) {
  .barra {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(34rem, calc(100% - var(--filo) * 2));
  }
}
.tiene-barra .aviso-flotante { bottom: calc(var(--alto-barra) + .5rem); }

/* --------------------------------------------- selecciona por marca (portada)

   Una tira que se desliza con el logo de cada casa. La foto de la categoría es
   opcional, así que cuando no hay va la inicial sobre el color de la marca: el
   cuadro mide lo mismo con foto y sin ella, y una tira donde unas fichas son
   altas y otras bajas se lee como un error de carga. */
.pista--marcas { padding-bottom: .4rem; }
.marca {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: .5rem;
  width: 6.5rem;
  color: var(--texto);
}
.marca__cuadro {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  overflow: hidden;
  background: var(--fondo);
  border: var(--linea);
  border-radius: 50%;
  transition: border-color .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
.marca:hover .marca__cuadro { border-color: var(--texto); transform: translateY(-3px); }
.marca__img { width: 100%; height: 100%; object-fit: contain; padding: .55rem; }
.marca__inicial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--marca);
  color: var(--marca-contraste);
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
}
.marca__nombre {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marca__cuantos { font-size: .6rem; letter-spacing: .1em; color: var(--texto-suave); margin-top: -.3rem; }

/* ------------------------------------------------ todas las marcas (/categorias) */

.casas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  padding-bottom: var(--paso);
}
.casa {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: 1.1rem .8rem 1.2rem;
  background: var(--fondo);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  transition: border-color .2s ease, transform .2s cubic-bezier(.22, .61, .36, 1);
}
.casa:hover { border-color: var(--texto); transform: translateY(-2px); }
/* El cuadro mide lo mismo con foto y sin ella: es lo que mantiene la rejilla
   cuadrada cuando el dueño sólo subió el logo de la mitad de sus marcas. */
.casa__cuadro {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--fondo-suave);
  border-radius: var(--radio);
}
.casa__img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.casa__inicial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--marca);
  color: var(--marca-contraste);
  font-family: var(--display);
  font-size: clamp(2rem, 11vw, 3.2rem);
  line-height: 1;
}
.casa__nombre {
  margin-top: .35rem;
  font-family: var(--display);
  font-size: clamp(.95rem, 3.8vw, 1.15rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.casa__cuantos { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.encabezado__cuenta {
  margin: .6rem 0 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------ el cupón

   Lo pinta `campo_cupon()` cuando el negocio tiene alguno vivo, y cadena vacía
   cuando no: aquí sólo se viste. */
.cupon { margin: 0 0 1.25rem; }
.cupon__campo { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 0; }
.cupon__campo label {
  grid-column: 1 / -1;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.cupon__campo input {
  min-height: 2.9rem;
  padding: .7rem .9rem;
  background: var(--fondo-suave);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cupon__aplicar,
.cupon__quitar {
  min-height: 2.9rem;
  padding: .7rem 1.2rem;
  background: none;
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.cupon__aplicar:hover,
.cupon__quitar:hover { background: var(--texto); color: var(--fondo); }

/* ------------------------------------------------------------ el pie, centrado */

.pie__dentro { justify-items: center; text-align: center; }
.pie__col { display: grid; justify-items: center; width: 100%; }
.pie__col--marca { justify-items: center; }
.pie__frase { max-width: 26rem; margin-inline: auto; }
.pie__lista { display: grid; justify-items: center; width: 100%; }
.pie__lista a,
.pie__lista .pie__direccion { justify-content: center; text-align: center; }
.pie__abierto { justify-content: center; }
.pie__horario { justify-items: center; }
.pie__horario li { justify-content: center; }
.pie__horario span { flex: 0 0 auto; }
.pie__redes { justify-content: center; }

/* Las redes con icono y no con la palabra: seis nombres escritos en mayúsculas
   espaciadas ocupaban tres renglones y competían con el resto del pie. El
   nombre sigue ahí, oculto, para el lector de pantalla. */
.pie__redes { gap: .6rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  min-height: 2.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
}
.pie__redes a:hover { opacity: 1; transform: translateY(-2px); }
.pie__redes svg { width: 17px; height: 17px; }

@media (min-width: 560px) {
  /* En dos y cuatro columnas cada una se sigue centrando en su hueco: es lo
     que pidió el cliente y lo que hace que el pie se lea como un bloque. */
  .pie__dentro { align-items: start; }
}

/* --------------------------------------------------- las animaciones sutiles

   Todas cortas, todas de una sola propiedad barata —opacidad y transformación,
   que el navegador mueve sin repintar— y todas apagadas para quien pidió menos
   movimiento en su sistema. Lo que se mueve al pasar por encima nunca cambia el
   tamaño de nada: una tarjeta que empuja a sus vecinas al crecer se siente
   rota, no viva. */

/* La foto de la tarjeta se acerca un pelo. `overflow: hidden` del cuadro es lo
   que hace que la foto crezca DENTRO y la tarjeta no se mueva. */
.tarjeta__img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .45s ease; }
.tarjeta:hover .tarjeta__img { transform: scale(1.04); }

/* Los botones se hunden un pelo al tocarlos: es el acuse de recibo que hace
   que un toque en un teléfono no se sienta perdido. */
.boton:active,
.mas:active,
.pedido-form__enviar:active,
.filtros-catalogo__aplicar:active,
.cupon__aplicar:active { transform: translateY(1px); }
.boton { transition: opacity .16s ease, background-color .18s ease, color .18s ease, transform .1s ease; }

/* El subrayado del «ver todos» crece desde la izquierda en vez de aparecer. */
.seccion__ver {
  position: relative;
  border-bottom: 0;
}
.seccion__ver::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.seccion__ver:hover::after { transform: scaleX(1); }

/* La entrada al desplazarse, con un desfase pequeño entre bloques para que no
   aparezcan todos de golpe. */
.tema-js .revelar { opacity: 0; transform: translateY(16px); }
.tema-js .revelar--visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.tema-js .revelar--visible .pista__uno:nth-child(2),
.tema-js .revelar--visible .rejilla > :nth-child(2) { transition-delay: .05s; }
.tema-js .revelar--visible .pista__uno:nth-child(3),
.tema-js .revelar--visible .rejilla > :nth-child(3) { transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  /* Sin transición, no sin menú: el panel sigue abriéndose, sólo que de golpe. */
  .menu__panel,
  .menu__velo,
  .menu__rayas i,
  .marquesina__pista,
  .tarjeta__img,
  .marca__cuadro,
  .casa,
  .seccion__ver::after,
  .pie__redes a,
  .cabecera__volver,
  .mas { transition: none; animation: none; }
  .tarjeta:hover .tarjeta__img,
  .marca:hover .marca__cuadro,
  .cabecera__volver:hover,
  .casa:hover { transform: none; }
  .seccion__ver::after { transform: scaleX(1); opacity: .35; }
}

@media (min-width: 900px) {
  .casas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  .marca, .marca__cuadro { width: 7.5rem; }
  .marca__cuadro { height: 7.5rem; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .casas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
}

/* El punto de «abierto ahora», pegado al texto y no al borde.
   Como hermano de una caja flex centrada, cuando la frase salta a dos
   renglones el punto se quedaba solo en el extremo izquierdo. Inline dentro del
   texto viaja con la primera palabra, y ahí es donde significa algo. */
.pie__abierto {
  display: block;
  text-align: center;
  gap: 0;
}
.pie__abierto::before {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .4rem;
  vertical-align: .05em;
}

/* El respaldo le pone 2rem de margen al encabezado, pensados para una barra de
   filtros debajo. Aquí lo que sigue son las pestañas de marca, que ya traen su
   propia línea: con los dos aires seguidos la primera fila de productos se iba
   por debajo de lo que se ve sin bajar. */
.encabezado { margin-bottom: 1rem; }
.pie__dentro { padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }

/* ------------------------------------------------- salir de la bolsa

   De la página del pedido no había cómo salir: el menú lleva a otras partes, la
   bolsa de la derecha apunta a la página en la que ya estás y lo único que
   quedaba era el logo. Ahora hay dos salidas y las dos se ven: la flecha de
   arriba a la izquierda, donde el pulgar la busca, y el enlace del cuerpo, con
   forma de botón para que no se pase por alto.

   En esa página el menú no se pinta, y no es un olvido: el contrato pide que
   ahí no haya distracciones ni el menú completo. Una salida, y que se vea. */
.cabecera__volver {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--texto);
  transition: background-color .18s ease, transform .18s ease;
}
.cabecera__volver svg { width: 22px; height: 22px; }
.cabecera__volver:hover { background: var(--fondo-suave); transform: translateX(-2px); }

.pedido__seguir,
.guardado__volver { margin: 1.5rem 0 0; text-align: center; }
.pedido__seguir a,
.guardado__volver a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .18s ease, background-color .18s ease;
}
.pedido__seguir a:hover,
.guardado__volver a:hover { border-color: var(--texto); background: var(--fondo); }

/* ------------------------------------------- aire antes del pie

   El último renglón de productos quedaba pegado al pie: `main` no tenía suelo y
   el pie no tenía techo, así que la rejilla y la franja negra se tocaban. Con
   pocos productos en el catálogo es lo primero que se ve al llegar al final.

   El aire va como RELLENO de `main` y no como margen del pie: los márgenes
   verticales de dos hermanos se colapsan —el del pie se comía la mitad y el
   hueco salía a 16 px en vez de 32— y el relleno no se colapsa con nada. */
main { padding-bottom: clamp(2rem, 6vw, 3.25rem); }
.pie { margin-top: var(--filo); }

/* ============================================================================
   REVISIÓN 1.4.0
   ============================================================================ */

/* --------------------------------------------- el pie, a todo lo ancho

   Mismo tropiezo que tuvo la cabecera, y por la misma causa: el respaldo
   declara `.pie` como `display: flex` CON su propio `max-width: var(--ancho)`,
   `margin: 0 auto` y `padding: 2rem 1.25rem 3rem`, y su hoja se carga antes que
   ésta. Sin reponer las cuatro, las cuatro columnas de dentro son elementos
   flexibles que se encogen a su contenido y se apiñan a la izquierda, con media
   franja vacía a la derecha — que es exactamente cómo se veía en una laptop.

   La lección, apuntada para el próximo bloque que se herede: cuando este tema
   reutiliza una clase del respaldo como CONTENEDOR, hay que reponer `display`,
   `max-width` y `padding`, no sólo los colores. Hay una prueba que lo vigila
   —«las franjas llenan el ancho»— justamente porque ya pasó tres veces. */
.pie {
  display: block;
  max-width: none;
  padding: 0;
  color: var(--fondo);
}

/* Y el ancho del contenido del pie lo pone su `.env`, como en todas las demás
   franjas: así el pie se alinea con el catálogo en vez de con nada. */
.pie__dentro,
.pie__legal { max-width: var(--ancho); margin-inline: auto; }

/* -------------------------------------------------------------- el logo

   Se veía pequeño porque estaba limitado a 30 px de alto en la cabecera y 34 en
   el pie. Es la marca del negocio: si es un logotipo cuadrado se queda en un
   cuadrado de esa altura, y en una cabecera de 60 px eso es un sello, no una
   marca.

   Se limita el ALTO y el ANCHO a la vez, porque no se sabe qué va a subir el
   dueño: con un logotipo cuadrado manda el alto, y con una firma alargada manda
   el ancho y el alto baja solo. Así crece sin comerse la barra ni deformarse. */
.cabecera__barra { padding-block: .4rem; }
.cabecera__logo {
  height: 2.5rem;
  width: auto;
  /* `max-height: none` no es de más: la regla de más arriba de esta misma hoja
     lo tenía en 1.9rem, y `max-height` gana a `height` — el logo se quedaba en
     30 px por más que se le pidieran 40. */
  max-height: none;
  max-width: min(58vw, 13rem);
  object-fit: contain;
  object-position: center;
}
.cabecera__marca { min-height: 3.1rem; }

.pie__logo {
  height: 3.1rem;
  width: auto;
  max-width: min(70vw, 15rem);
  max-height: none;
  object-fit: contain;
}

@media (min-width: 900px) {
  .cabecera__barra { padding-block: .55rem; }
  .cabecera__logo { height: 2.7rem; max-width: 15rem; }
  .pie__logo { height: 3.5rem; max-width: 17rem; }
}

/* ============================================================================
   REVISIÓN 1.5.0
   ============================================================================ */

/* -------------------------------------- la imagen de la marca, llenando

   No llenaba el círculo por dos razones a la vez: `object-fit: contain`, que
   mete la imagen dentro dejando barras, y un `padding` que además la separaba
   del borde. Con `cover` y sin relleno, la imagen llena el círculo de lado a
   lado, que es como se ve el logotipo de una casa de moda.

   `cover` recorta lo que sobra para llenar, así que lo que conviene subir en
   esa foto es una imagen CUADRADA: en un cuadrado no recorta nada —el círculo
   también es cuadrado— y con una imagen muy alargada se quedaría con el centro.
   Está anotado en las notas de entrega. */
.marca__img,
.casa__img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------ el logo, en placa

   El logo se veía pequeño porque estaba metido dentro de la barra: para que
   creciera había que crecer la barra, y una cabecera alta se come la pantalla
   del teléfono.

   Así que el logo sale de la barra. Va en una placa que CRUZA el borde de
   abajo de la cabecera —media dentro, media fuera— anclada al borde con
   `bottom: 0` y `translateY(50%)`, que la deja centrada exactamente sobre la
   línea. La barra no crece ni un píxel: la placa está fuera del flujo, así que
   no empuja nada. El hueco que necesita por debajo lo pone `main`, y sólo
   cuando de verdad hay logo.

   Sin logo no hay placa: el nombre del negocio se queda dentro de la barra
   como siempre. Un nombre largo en una placa que cruza el borde se lee como un
   error, y el primer día de cualquier catálogo todavía no hay logo. */
.cabecera--conlogo .cabecera__marca {
  position: absolute;
  /* Anclada a los DOS lados y centrada con `margin-inline: auto`, no con
     `left: 50%`. Con sólo `left`, el hueco que le queda a una caja absoluta va
     de ahí al borde derecho: nunca podía pasar del 50% del ancho, y el logo se
     encogía —122 px en vez de 185— dejando aire a los lados dentro de la placa. */
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  /* -1px y no 0: `bottom` se resuelve contra la caja de relleno, que excluye el
     borde de un píxel de la cabecera. Con esto la placa queda centrada sobre la
     línea de verdad, no un píxel arriba. */
  bottom: -1px;
  z-index: 3;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: .5rem 1.1rem;
  max-width: min(72vw, 20rem);
  background: var(--fondo);
  border: var(--linea);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s ease;
}
.cabecera--conlogo .cabecera__marca:hover {
  transform: translateY(50%) scale(1.03);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.cabecera--conlogo .cabecera__logo {
  height: var(--placa-logo);
  max-height: none;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* El hueco que la placa necesita por debajo, y sólo con logo: es la mitad de
   su alto más un poco de aire. Va en `main`, que es hermano de la cabecera. */
.cabecera--conlogo + main { padding-top: var(--placa-hueco); }

:root {
  --placa-logo: 2.9rem;                      /* el logo dentro de la placa */
  --placa-hueco: 2.9rem;                     /* lo que asoma, más aire */
}
@media (min-width: 900px) {
  :root { --placa-logo: 3.4rem; --placa-hueco: 3.4rem; }
  .cabecera--conlogo .cabecera__marca { padding: .55rem 1.4rem; max-width: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera--conlogo .cabecera__marca { transition: none; }
  .cabecera--conlogo .cabecera__marca:hover { transform: translateY(50%); }
}