/* ==========================================================================
   ATLETAS DE CRISTO - hoja de estilos única
   Derechos Reservados Sistemas Digitales

   Web estática: HTML, CSS y JavaScript de navegador. Sin compilar, sin npm.
   Se comprime la carpeta, se sube al hPanel y funciona.

   Un solo archivo CSS a propósito. Son cinco páginas que comparten cabecera,
   pie, tarjetas y bolsa; partirlo en seis obligaría a decidir en cada regla
   dónde vive, y a cargar varios archivos para pintar la primera pantalla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens

   La tienda es clara desde el 2026-08-09, con tres zonas que siguen siendo
   oscuras: la cabecera, el escaparate y el pie. Antes era negra entera.

   El motivo del negro era bueno y conviene no perderlo de vista: el catálogo
   son zapatillas fotografiadas, y sobre negro el producto es lo único de la
   página con luz propia. Lo que hace que el claro funcione igual es que el
   producto se ve sobre **tarjeta blanca recortada del fondo gris**, no sobre la
   página desnuda. El contraste que antes daba el negro ahora lo da el escalón
   entre la tarjeta y el fondo.

   Y el escaparate se queda oscuro a propósito: es la primera pantalla, es donde
   la foto tiene que golpear, y es lo único que no se puede recolorear (la pista
   roja es una fotografía).

   Los acentos siguen siendo nueve, todos de la familia del logo: rojo, azul
   marino y celeste, más el naranja del balón de la mascota. Cada marca revendida
   lleva el suyo, así que una rejilla se lee por marca sin leer una palabra.
   -------------------------------------------------------------------------- */
:root {
  /* Crema y no blanco, por decisión del usuario del 2026-08-09. Y este crema en
     concreto porque es el tono cálido más marcado que **no cuesta legibilidad**:
     los nueve acentos están ajustados al límite de 4.5:1 y el precio de cada
     producto va pintado con el de su marca, así que cada punto que se oscurece el
     fondo se lo come el contraste. Medido: un arena algo más intenso (#f5f1e9)
     bajaba el rojo del logo de 4.24:1 a 4.11:1, y un lino (#f3efe6) a 4.03:1.
     Con este el rojo queda en 4.25:1, ni un punto peor que con el gris frío. */
  --bg: #f8f5ee;
  --surface: #ffffff;
  --surface-alt: #efe8da;
  /* El hueco donde va una foto, en blanco: es lo que hace que el producto siga
     recortándose del fondo ahora que la página no es negra. El escalón blanco
     contra crema hace el trabajo que antes hacía el negro. */
  --media: #ffffff;
  --line: #e5dfd2;

  /* La cabecera, un punto más tostada que la página. Tiene token propio porque
     es la única superficie que puede permitírselo: lo que lleva encima es texto
     casi negro y un rojo grande, no los nueve acentos al límite de contraste que
     viven en el listado. Aquí el beige se ve; en el fondo de página costaría
     legibilidad en cada precio. */
  --cabecera-fondo: #f4efe3;

  --ink: #14141a;
  --ink-soft: #5c6070;
  /* Sobre negro un gris tenue se lee de sobra; sobre claro se desvanece. El
     primer valor que se probó aquí daba 2.85:1 contra el fondo de página, y ahí
     dentro viven cosas que hay que poder leer: el precio anterior tachado, la
     miga de pan y el aviso de que los catálogos son de muestra. */
  --ink-faint: #6b7080;

  /* Cuatro de los nueve acentos hubo que oscurecerlos para el fondo claro, y el
     número sale de una medida, no del ojo: el precio de cada producto va pintado
     con el acento de su marca, y como texto necesita 4.5:1 contra el blanco. El
     cian original daba 1.81:1 (invisible), el balón 2.22:1 y el coral 3.05:1.
     Los otros cinco ya pasaban y se quedan como estaban.

     Sobre el escaparate y el pie NO se usan estos, sino los vivos de siempre:
     ver la zona oscura, más abajo. Un celeste apagado sobre negro se ve sucio. */
  --a-rojo: #e8121f;
  --a-vino: #9b1220;
  --a-coral: #cc484c;
  --a-marino: #302478;
  --a-indigo: #4c3bc4;
  --a-celeste: #007dad;
  --a-cian: #347c91;
  --a-acero: #12639f;
  --a-balon: #986f27;

  --whatsapp: #25d366;
  --oferta: #15803d;

  /* El velo que se enciende al pasar el ratón. Va como token porque los mismos
     botones aparecen en las dos zonas: aclarar sirve sobre negro y no se ve
     sobre blanco, y oscurecer sirve sobre blanco y no se ve sobre negro. */
  --velo-hover: rgba(0, 0, 0, 0.06);

  /* Sombras. Sobre claro tienen que ser mucho más suaves: la misma sombra que
     sobre negro daba profundidad, sobre blanco ensucia y parece un borrón. */
  --sombra-media: 0 14px 28px rgba(20, 20, 26, 0.1);
  --sombra-alta: 0 20px 44px rgba(20, 20, 26, 0.16);

  /* El acento de la pieza que se esté pintando. Cada tarjeta, catálogo o ficha
     lo redefine en su propio ámbito, y todo lo de dentro lo hereda. Es lo que
     evita escribir nueve variantes de cada regla. */
  --acento: var(--a-rojo);
  --acento-texto: #ffffff;

  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fuente-titular: "Archivo", var(--fuente);
  --fuente-cartel: "Anton", "Archivo", Impact, sans-serif;

  --ancho: 1600px;
  --cabecera-alto: 88px;
  --radio: 14px;
}

/* --- las dos zonas oscuras ---

   El escaparate y el pie no cambian de color: redefinen los tokens dentro de su
   propio ámbito y todo lo que llevan dentro los hereda. Es el mismo mecanismo de
   `--acento`, y evita tener que reescribir cada regla en versión clara y versión
   oscura.

   El escaparate porque es la primera pantalla, donde la foto tiene que golpear, y
   porque su fondo es una fotografía que no se puede recolorear. El pie porque
   cierra la página y le da suelo; un pie claro sobre fondo claro se deshilacha.

   **La cabecera estuvo aquí y salió el 2026-08-09**, a petición del usuario: la
   quiso clara para que combinara con el resto. Eso obligó además a que dejara de
   flotar sobre el escaparate, ver más abajo. */
.heroe,
.pie {
  --bg: #08080c;
  --surface: #101017;
  --surface-alt: #17171f;
  --media: #1c1c26;
  --line: #272733;

  --ink: #f4f4f7;
  --ink-soft: #a0a0ae;
  /* Aclarado el 2026-08-09. El valor de antes daba 3.04:1 contra el negro, y en
     ese gris van el precio anterior tachado del escaparate y el aviso legal del
     pie. Un precio tachado que no se lee es media oferta. */
  --ink-faint: #8b8b9c;

  /* Los nueve acentos NO se cambian aquí, y es a propósito.

     La tentación era devolverles el brillo que tenían cuando la web era negra.
     Pero el color del acento viaja con un color de texto encima, elegido por
     marca en `datos.js` y escrito en el propio elemento: la etiqueta de descuento
     es texto sobre el acento como fondo. Si el acento cambia de tono entre zonas
     y su texto no puede cambiar con él, uno de los dos lados queda ilegible, y no
     hay forma de acertar con los dos a la vez.

     Con una sola paleta el par acento-texto es siempre el mismo. Sobre negro los
     ajustados quedan algo más apagados, y aquí eso no cuesta nada: lo que llevan
     pintado en el escaparate son precios a cuerpo grande. */
  --oferta: #4ade80;

  --velo-hover: rgba(255, 255, 255, 0.1);
  --sombra-media: 0 14px 28px rgba(0, 0, 0, 0.5);
  --sombra-alta: 0 24px 48px rgba(0, 0, 0, 0.6);

  /* Y hay que repintar el color aquí, no basta con cambiar el token.

     `body` fija `color: var(--ink)` una sola vez, y lo resuelve con la paleta
     clara porque el body está fuera de estas zonas. A partir de ahí el texto se
     hereda **ya resuelto**: los enlaces del menú usan `color: inherit`, así que
     seguían llegando en tinta oscura aunque su `--ink` local fuera claro.

     Costó verlo porque el token estaba bien puesto. Lo que no estaba era el
     color, que es lo que de verdad pinta la letra. */
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  /* Al saltar a un ancla, la cabecera fija tapaba el título de la sección. Se
     cuenta entera, cinta incluida: lo que tapa es todo el bloque, no la barra
     del menú sola. */
  scroll-padding-top: calc(var(--cabecera-total, var(--cabecera-alto)) + 40px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* El foco solo se dibuja cuando llega por teclado. Va del color del texto, así
   que se invierte solo al entrar en la cabecera, el escaparate o el pie: sin eso
   desaparecería justo en la zona contraria a la que se hubiera elegido. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1024px) {
  .contenedor {
    padding: 0 24px;
  }
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.oculto {
  display: none !important;
}

/* Para lo que solo tiene sentido con el panel lateral delante. Por debajo de
   1024 px ese panel no se pinta, y un botón que no cambia nada al pulsarlo es
   peor que no tenerlo: ocupa sitio y deja al visitante creyendo que falló. */
@media (max-width: 1023px) {
  .solo-escritorio {
    display: none !important;
  }

  /* La banda del globo de WhatsApp, que en móvil flota fijo bajo la cabecera.
     En la portada cae sobre la foto del escaparate y no estorba a nadie; en las
     páginas interiores caía justo encima de la miga de pan y del título del
     modelo. Se le reserva el hueco en vez de moverlo: es el sitio que pidió el
     usuario, y el contenido sí se puede correr. 56 px son los 40 del globo, los
     12 que lo separan de la cabecera y un margen para que no se toquen. */
  main.contenedor {
    padding-top: 56px;
  }
}

/* --------------------------------------------------------------------------
   3. Tipografía y piezas sueltas
   -------------------------------------------------------------------------- */
.titular {
  font-family: var(--fuente-titular);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}

.antetitulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}

.seccion {
  padding: 56px 0;
}

.seccion__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.enlace-sutil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s;
}

.enlace-sutil:hover {
  color: var(--ink);
}

/* --- botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  transition: filter 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.boton--acento {
  background: var(--acento);
  color: var(--acento-texto);
}

.boton--acento:hover {
  filter: brightness(1.12);
}

.boton--claro {
  background: var(--ink);
  color: var(--bg);
}

.boton--claro:hover {
  background: #ffffff;
}

.boton--linea {
  border: 1px solid var(--line);
  color: var(--ink);
}

.boton--linea:hover {
  border-color: var(--ink);
  background: var(--velo-hover);
}

.boton--wa {
  background: var(--whatsapp);
  color: #04140a;
}

.boton--wa:hover {
  filter: brightness(1.1);
}

.boton--ancho {
  width: 100%;
}

.boton[disabled] {
  cursor: not-allowed;
  background: var(--surface-alt);
  color: var(--ink-soft);
  filter: none;
}

.icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--relleno {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   4. La cinta de avisos

   Fijos. No rotan: el dueño señaló las cintas que se mueven solas como parte de
   lo que le cuesta de las webs. Una promoción que se mueve pide atención sin dar
   información.

   Cuántos hay lo decide AVISOS en `datos.js`; desde el 2026-08-09 es uno solo.
   -------------------------------------------------------------------------- */
/* La cinta y la barra del menú son una sola cabecera, no dos cajas pegadas.

   Antes la cinta llevaba marco rojo por los cuatro lados y fondo negro macizo,
   mientras la barra de abajo flotaba transparente sobre el escaparate. Eso las
   enfrentaba: una era una caja cerrada y la otra no era nada.

   Ahora comparten estado y ya no llevan ninguna línea, ni entre ellas ni debajo.
   Sobre el escaparate las dos dejan ver la foto; al bajar las dos se vuelven
   sólidas a la vez, con la misma transición. Lo que las une es el fondo, y lo
   que las distingue es el tamaño de su texto. Cualquier raya que se les meta
   dentro vuelve a partirlas en dos piezas, que es de lo que se venía. */
/* La cinta va en vino, y la barra del menú en crema.

   Antes compartían el mismo beige y el resultado era un bloque plano sin
   jerarquía: dos franjas del mismo tono, una encima de otra, y dentro dos rojos
   compitiendo a distinta altura (el aviso de envíos y "Ofertas").

   Una franja de color resuelve las tres cosas: separa las dos mitades sin ninguna
   línea, que es lo que el usuario quitó dos veces; deja un solo rojo vivo en la
   cabecera, que es "Ofertas"; y la franja de anuncio en color de marca sobre
   cabecera clara es lo que hace media tienda que vende ropa, porque el anuncio se
   lee de una pasada y luego deja de estorbar.

   Y el color es el vino por descarte razonado, después de probar el marino:

   - El **rojo del logo** volvería a competir con "Ofertas", que es de lo que se
     venía huyendo.
   - El **negro** ataría la cabecera con el escaparate, pero en la portada dejaría
     un sándwich oscuro-claro-oscuro: cinta negra, barra crema y escaparate negro
     a dos centímetros.
   - El **marino** funcionaba, y se cambió porque el usuario pidió que no fuera
     azul.
   - El **vino** es cálido, así que empasta con el crema en vez de recortarse
     contra él; es de la familia del rojo del logo sin ser el rojo puro, así que no
     compite con "Ofertas" sino que lo jerarquiza; y es lo bastante distinto del
     negro del escaparate para que no haya sándwich. */
.cinta {
  background: var(--a-vino);
  /* Su propio juego de tintas, para que el ritmo de los avisos siga funcionando
     sobre oscuro. Sin esto el primero saldría en rojo sobre marino, que es de
     los peores pares posibles. */
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

.cinta__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  /* Más apretada que antes: es una línea de aviso, no una sección. Lo que gana de
     alto la cinta se lo quita al escaparate, que es lo que la gente vino a ver. */
  padding: 7px 16px;
  font-family: var(--fuente-titular);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.cinta__icono {
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
}

/* En pantalla estrecha el aviso ocupa dos líneas y los iconos caen solos, uno
   arriba y otro abajo, como si fueran dos avisos más. Se retiran: son
   decorativos (van con aria-hidden), y un icono huérfano en su propia línea
   parece un error de maquetación. */
@media (max-width: 599px) {
  .cinta__icono {
    display: none;
  }
}

/* El ritmo por posición: el primero destacado, el segundo normal y el tercero
   apagado. Pone el peso donde está la promesa fuerte y no donde está el matiz, y
   con un solo aviso ese aviso es la promesa. Lo reparte RITMO_CINTA en
   `tienda.js`.

   El primero iba en rojo mientras la cinta fue clara. Sobre el vino el rojo no se
   lee, así que el destacado se marca con el blanco puro y el peso de la letra, no
   con otro color. */
.cinta__aviso--fuerte {
  color: var(--ink);
  font-weight: 800;
}

.cinta__aviso--normal {
  color: var(--ink);
  font-weight: 600;
}

.cinta__aviso--matiz {
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 1024px) {
  .cinta__lista {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   5. Cabecera

   En la portada arranca transparente y flota sobre el escaparate; al bajar se
   vuelve sólida. Si fuera opaca desde el principio, le cortaría la cabeza al
   escaparate, que empieza contra el borde de la pantalla.
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Sin línea gris debajo. La tuvo mientras la cabecera eran dos cajas sueltas y
   cada una necesitaba su contorno; desde que la cinta y el menú son un bloque,
   dejaba dos rayas paralelas a dos píxeles de distancia, la roja en medio y la
   gris colgando. Lo que separa la cabecera del contenido es su propio fondo.

   Y ya no cambia al desplazarse. Cuando flotaba sobre el escaparate tenía dos
   estados, transparente arriba y sólida al bajar; desde que es clara y opaca
   siempre, ese cambio no describe nada. */
.cabecera__barra {
  background: var(--cabecera-fondo);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--cabecera-alto);
}

/* 68 px y la barra a 88: el logo creció y la barra con él, porque si no se
   quedaba a 4 px del borde por arriba y por abajo y parecía que no cabía. La
   proporción de antes era 56 en 76, y se mantiene. El escaparate se recoloca
   solo, porque mide la cabecera en vez de dar por hecho su alto. */
.cabecera__logo img {
  height: 68px;
  width: auto;
  object-fit: contain;
}

.menu {
  display: none;
  height: 100%;
}

.menu__enlace {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  /* Una entrada de menú no se parte nunca. Hizo falta escribirlo el 2026-08-12,
     al pasar el menú a repartirse el espacio de la barra: hasta entonces medía
     lo que medía su contenido, y en cuanto tuvo un ancho propio del que encoger,
     "CATÁLOGOS PDF" se plegó en dos líneas y descolocó la fila entera. El
     subrayado del hover, además, está calculado sobre una sola línea. */
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.2s;
}

.menu__enlace::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  height: 2px;
  background: var(--a-celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.menu__enlace:hover {
  color: var(--a-celeste);
}

.menu__enlace:hover::after {
  transform: scaleX(1);
}

.menu__enlace--destacado {
  color: var(--a-rojo);
}

.menu__enlace--destacado::after {
  background: var(--a-rojo);
}

.menu__enlace--destacado:hover {
  color: var(--a-coral);
}

.acciones {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.accion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  transition: background-color 0.2s;
}

.accion:hover {
  background: var(--velo-hover);
}

.accion__punto {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--a-rojo);
}

.acciones__wa {
  display: none;
  margin-left: 4px;
  padding: 10px 16px;
  font-size: 14px;
}

@media (min-width: 1280px) {
  /* Quién se reparte el espacio sobrante de la barra se decide más abajo, en la
     sección 12, junto a la regla del botón Catálogo. Tiene que ser allí: esa
     regla base se escribe después que esta, y con la misma especificidad gana la
     última. Puesto aquí, el reparto no se aplicaba y no daba ningún error. */
  .menu {
    display: flex;
  }

  .acciones__wa {
    display: inline-flex;
  }

  .accion--menu {
    display: none;
  }

  .cabecera__logo img {
    height: 64px;
  }
}

/* --- menú lateral en móvil --- */
.lateral {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}

.lateral__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.lateral__panel {
  position: relative;
  width: 86%;
  max-width: 380px;
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 16px 24px 32px;
}

.lateral__cerrar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.lateral__enlace {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--fuente-titular);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.lateral__secundarios {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   6. El escaparate

   Un modelo grande en el centro y cuatro pares flotando con su precio. Enseña
   cinco modelos y cinco precios sin que el visitante pulse nada, que es lo que
   hace una tienda de calle con su vitrina.
   -------------------------------------------------------------------------- */
.heroe {
  position: relative;
  overflow: hidden;
  /* Ya no sube por detrás de la cabecera, y es consecuencia de que la cabecera
     sea clara y opaca desde el 2026-08-09. Mientras flotaba transparente, el
     escaparate tenía que pasarle por debajo o quedaba una franja negra encima.
     Contra una cabecera opaca no hay nada que tapar: lo que pasara por detrás no
     se vería, y el margen negativo solo serviría para esconder la parte de arriba
     de la foto.

     Si algún día vuelve a flotar, esto es lo que hay que devolver, y con
     `--cabecera-total`: la cinta cambia de alto según el ancho, así que el valor
     lo mide el navegador en `tienda.js`. Con el alto fijo de la barra del menú la
     franja negra reaparecía justo a la altura de la línea de envíos. */
  background: var(--bg);
}

.heroe__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Al 85% y no al 60%. El 60% venía de cuando el fondo era una pista de
     atletismo roja, clara y saturada, que había que apagar para que no compitiera
     con el producto. La foto de la cancha del 2026-08-11 ya viene subexpuesta, y
     con aquel valor se perdían el parquet, el humo y el foco: quedaba una mancha
     oscura y daba igual qué foto hubiera detrás. */
  opacity: 0.85;
}

/* Dos velos: uno hunde los bordes para que el texto se lea sin caja de color,
   otro empalma el pie del escaparate con la sección siguiente. */
.heroe__velo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(8, 8, 12, 0.75) 70%, var(--bg) 100%);
}

.heroe__velo--pie {
  background: linear-gradient(to top, var(--bg), transparent 160px);
}

.heroe__resplandor {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 560px;
  height: 560px;
  margin-left: -280px;
  border-radius: 999px;
  background: var(--a-rojo);
  /* Bajado de 0.28 el 2026-08-11. Este resplandor lo pinta el CSS, no la foto, y
     con la cancha nueva caía justo encima de su foco cenital blanco: teñía de rojo
     lo único luminoso de la imagen. Al 0.15 sigue calentando el centro sin tapar
     lo que se generó. */
  opacity: 0.15;
  filter: blur(130px);
  animation: latido 9s ease-in-out infinite;
  pointer-events: none;
}

.heroe__cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

/* `minmax(0, 1fr)` y no `1fr`, que es lo mismo salvo en el caso que rompía esto:
   un track `1fr` no baja del ancho mínimo de su contenido, así que una sola pieza
   con ancho mínimo grande estira la rejilla entera por encima de la pantalla. Es
   lo que pasaba hasta el 2026-08-12 con la caja de las flotantes, y como el
   escaparate lleva `overflow: hidden`, no había barra horizontal que lo delatara:
   simplemente se cortaba la zapatilla de la derecha. Con `minmax(0, …)` el track
   puede encogerse hasta el ancho disponible, que es lo que se quería siempre. */
.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  flex: 1;
  padding-top: 24px;
}

.heroe__columna {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  min-width: 0;
}

/* Lo mismo por dentro: un hijo de grid arranca con `min-width: auto`, así que sin
   esto vuelve a mandar el ancho mínimo del contenido en vez del hueco que hay. */
.protagonista,
.flotante {
  min-width: 0;
}

/* La columna izquierda lleva una sola zapatilla y la derecha dos: es la
   composición del boceto. No es simetría rota por descuido, es lo que deja
   sitio a que la de la izquierda sea la más grande de las tres. */
.heroe__columna--izquierda {
  padding-bottom: 40px;
}

.heroe__flotantes-movil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 14px;
}

/* Son tres flotantes y las columnas son dos, así que la última se quedaba sola
   pegada a la izquierda, leyéndose como una fila a medio pintar. Puesta a lo
   ancho y centrada, con el ancho de una columna, cierra el escaparate en vez de
   dejarlo colgando. El `nth-child(odd)` es lo que hace que esto no estorbe si
   algún día las flotantes pasan a ser dos o cuatro: solo actúa cuando sobra una. */
.heroe__flotantes-movil .flotante:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 7px);
}

@media (min-width: 1024px) {
  .heroe__cuerpo {
    min-height: calc(100vh - var(--cabecera-alto) - 40px);
    padding-bottom: 24px;
  }

  .heroe__rejilla {
    grid-template-columns: 1.05fr 1.9fr 1.05fr;
    gap: 20px;
    padding-top: 0;
  }

  .heroe__columna {
    display: flex;
  }

  .heroe__flotantes-movil {
    display: none;
  }
}

.punto-vivo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--acento);
  margin-right: 8px;
  vertical-align: middle;
}


/* --- el modelo protagonista --- */
.protagonista {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Altura en vh y no proporción: con una caja cuadrada, la zapatilla crece con
   el ancho de la columna y en un monitor panorámico empuja el titular fuera de
   la pantalla. */
/* Más alto desde el 2026-08-09, y no es un retoque estético: la protagonista
   dejó de ser una zapatilla suelta y pasó a ser una persona agachada que la
   ofrece. En una caja apaisada, una figura de pie se ajusta por el alto y la
   zapatilla, que es lo que se vende, acaba midiendo cuatro dedos. */
.protagonista__foto {
  height: 44vh;
  min-height: 190px;
  max-height: 560px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.75));
}

.protagonista__texto {
  position: relative;
  margin-top: -16px;
}

.protagonista__marca {
  font-family: var(--fuente-titular);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.protagonista__nombre {
  font-family: var(--fuente-cartel);
  font-size: clamp(3.25rem, 11vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 400;
}

.protagonista__colorway {
  margin-top: 6px;
  font-family: var(--fuente-titular);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.protagonista__lema {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.protagonista__precio {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

.protagonista__precio strong {
  color: var(--ink);
}

.protagonista .boton {
  margin-top: 24px;
  padding: 16px 32px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (min-width: 1024px) {
  .protagonista__foto {
    height: 50vh;
  }

  .protagonista__texto {
    margin-top: -32px;
  }

  .protagonista__colorway {
  margin-top: 6px;
  font-family: var(--fuente-titular);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.protagonista__lema {
    font-size: 16px;
  }
}

/* --- las que flotan --- */
.flotante {
  display: block;
}

.flotante__caja {
  position: relative;
  height: 22vh;
  min-height: 150px;
  max-height: 260px;
}

/* El `min-height: 150px` de la regla de arriba es de la versión de escritorio, y
   aquí no era inofensivo: con `aspect-ratio: 4/3`, 150 px de alto mínimo se
   traducen en 200 px de ancho mínimo por tarjeta. Dos tarjetas y su hueco daban
   416 px fijos, más que cualquier móvil, y el escaparate entero salía estirado y
   cortado por la derecha. Anularlo es lo que devuelve el mando al ancho de la
   pantalla. */
.heroe__flotantes-movil .flotante__caja {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
}

/* La de la derecha se empuja un poco hacia fuera, para que su hueco con el borde
   de la pantalla sea el mismo que el de la Yeezy por el lado izquierdo.

   Las dos columnas miden lo mismo y las dos fotos van centradas en su caja, así
   que sobre el papel ya estaban simétricas. Lo que rompe la simetría es la foto:
   la Yeezy es una chancla que llena su rectángulo de lado a lado, mientras la
   Air Force va en diagonal, es algo más estrecha de proporción y lo que llega a
   su borde derecho es la zona negra del talón, que sobre la pista oscura no se
   ve. Medido con guías a la misma distancia de cada borde: unos 6 px de más por
   la derecha.

   Va en porcentaje del ancho de la caja y no en píxeles, para que la corrección
   se mantenga igual de proporcionada en un teléfono de 360 y en uno de 430. Y
   mueve la caja, no la foto: la foto lleva la animación de flotado, y un
   `transform` propio se lo comería el primer fotograma. El texto se queda donde
   está, alineado con su columna, igual que en la de la izquierda. */
.heroe__flotantes-movil .flotante:nth-child(2) .flotante__caja {
  transform: translateX(3.5%);
}

/* El brochazo del boceto: una mancha de pintura roja, seca y rasgada, detrás de
   cada zapatilla. Es lo que le da suelo y profundidad; sin él las tres parecen
   recortes pegados sobre el fondo.

   Va más ancho que su caja a propósito (140 %) y desbordando por los lados: un
   brochazo que empieza y acaba justo donde acaba la foto se lee como un marco,
   no como pintura. Cada zapatilla lo gira distinto para que no se note que es
   el mismo archivo. */
.flotante__brochazo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  transform: translate(-50%, -50%) rotate(var(--giro-brochazo, -4deg));
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(1.1);
}

.heroe__columna--izquierda .flotante__brochazo {
  --giro-brochazo: -7deg;
}

.heroe__columna--derecha .flotante:first-child .flotante__brochazo {
  --giro-brochazo: 5deg;
}

.heroe__columna--derecha .flotante:last-child .flotante__brochazo {
  --giro-brochazo: -3deg;
  transform: translate(-50%, -50%) rotate(-3deg) scaleX(-1);
}

/* La sombra respira al revés que la zapatilla: cuando sube, se encoge y se
   aclara. Es lo que convierte un dibujo que sube y baja en un objeto que flota
   sobre algo. */
.flotante__sombra {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 2px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  filter: blur(8px);
  animation: sombra-flotante var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
}

.flotante__foto {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.7));
  animation: flotar var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
  will-change: transform;
  transition: transform 0.4s;
}

.flotante:hover .flotante__foto {
  transform: scale(1.04);
}

/* Los cuatro datos, en el orden del boceto: qué es, de qué color, cuánto se
   descuenta y cuánto cuesta. Alineados a la izquierda en los dos lados, también
   como en el boceto: alinear a la derecha la columna derecha parece más
   ordenado sobre el papel, pero rompe la lectura, porque el ojo tiene que
   buscar dónde empieza cada línea. */
.flotante__datos {
  margin-top: 6px;
}

.flotante__nombre {
  font-family: var(--fuente-titular);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.flotante__colorway {
  margin-top: 2px;
  font-family: var(--fuente-titular);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.flotante .descuento {
  display: inline-block;
  margin-top: 10px;
}

.flotante__precios {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.precio {
  font-family: var(--fuente-titular);
  font-size: 26px;
  font-weight: 800;
  color: var(--acento);
}

/* En el escaparate el precio se aclara, y no es un capricho: los acentos están
   calculados para leerse sobre blanco, que es donde vive el resto de la tienda.
   Sobre el negro del escaparate el más oscuro de los nueve, el vino de Yeezy,
   caía a 2.38:1 y el precio de la Yeezy Slide no se leía.

   Se aclara aquí, sobre el color ya heredado, en vez de dar a la zona oscura sus
   propios acentos. Un acento distinto por zona rompería la etiqueta de descuento,
   que es texto sobre ese mismo color como fondo y lleva su tono elegido por marca.
   Aclarando solo donde el acento hace de texto, la etiqueta no se entera.

   Si `color-mix` no existiera, se queda el acento tal cual: se lee peor, pero no
   desaparece nada. */
.heroe .precio {
  color: color-mix(in srgb, var(--acento) 62%, #ffffff);
}

.precio-antes {
  font-size: 16px;
  color: var(--ink-faint);
  text-decoration: line-through;
}

.descuento {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--a-rojo);
  color: #fff;
  font-family: var(--fuente-titular);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 1023px) {
  .flotante__nombre {
    font-size: 16px;
  }

  .flotante__colorway {
    font-size: 13px;
  }

  .precio {
    font-size: 20px;
  }

  /* El 44 vh de la regla general está pensado para un monitor apaisado. En un
     teléfono, 44 vh de una pantalla alta son casi 400 px de foto, y con el
     titular y el botón debajo el "Comprar ahora" se caía por debajo del pliegue:
     lo primero que se ve de la tienda acababa siendo media zapatilla sin sitio
     donde pulsar. Con 38 vh el bloque entero cabe en la primera pantalla. */
  .protagonista__foto {
    height: 38vh;
    max-height: 340px;
  }

  .protagonista .boton {
    margin-top: 18px;
    padding: 14px 26px;
  }
}

/* --------------------------------------------------------------------------
   7. Animaciones

   El flotado es corto y lento a propósito: la consigna fue "que floten sin
   moverse mucho". Y cada zapatilla lleva su propia duración desde el HTML: si
   dos comparten ciclo acaban subiendo a la vez y el ojo lo lee como un
   carrusel, no como cuatro objetos flotando.
   -------------------------------------------------------------------------- */
@keyframes flotar {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, var(--sube, -14px), 0) rotate(var(--gira, 1deg));
  }
}

@keyframes sombra-flotante {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(0.86);
    opacity: 0.24;
  }
}

@keyframes latido {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.06);
  }
}

/* No basta con acortar la duración: una animación infinita de 0,01 ms no se
   detiene, se vuelve un parpadeo constante. Para quien pidió menos movimiento
   eso es peor que el movimiento, así que las de bucle se apagan del todo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .flotante__foto,
  .flotante__sombra,
  .heroe__resplandor,
  .globo-wa {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   8. Tarjeta de producto
   -------------------------------------------------------------------------- */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 16px;
}

@media (min-width: 1024px) {
  .rejilla-productos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rejilla-productos--con-panel {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  .rejilla-productos--con-panel {
    grid-template-columns: repeat(3, 1fr);
  }
}

.producto {
  position: relative;
}

.producto__marco {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--media);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* El producto se levanta al pasar por encima. Sobre negro no hacía falta, porque
   la foto ya era lo único iluminado de la pantalla; sobre claro la rejilla se
   queda plana y esto es lo que dice cuál se está mirando. */
.producto:hover .producto__marco {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
}

.producto:hover .producto__marco {
  border-color: var(--ink-faint);
}

/* El filo de color es lo que hace legible la marca de un vistazo en una rejilla
   larga, sin leer el texto de cada tarjeta. */
.producto__filo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--acento);
  z-index: 2;
}

.producto__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s, transform 0.5s;
}

.producto__foto--hover {
  opacity: 0;
  transform: scale(1.05);
}

.producto:hover .producto__foto--principal {
  opacity: 0;
}

.producto:hover .producto__foto--hover {
  opacity: 1;
  transform: scale(1);
}

.producto__etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.producto__etiqueta--agotado {
  background: rgba(0, 0, 0, 0.8);
  color: var(--ink);
}

.producto__etiqueta--descuento {
  background: var(--acento);
  color: var(--acento-texto);
}

.producto__favorito {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: transform 0.2s, color 0.2s;
}

.producto__favorito:hover {
  transform: scale(1.06);
}

.producto__favorito[aria-pressed="true"] {
  color: var(--a-rojo);
}

.producto__datos {
  padding-top: 14px;
}

.producto__nombre {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.producto__marca {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

.producto__categoria {
  font-size: 13px;
  color: var(--ink-soft);
}

.producto__precios {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.producto__precio {
  font-size: 16px;
  font-weight: 700;
}

.estrellas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-soft);
}

.estrellas__iconos {
  display: flex;
  color: var(--a-balon);
}

.estrellas svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   9. Catálogos
   -------------------------------------------------------------------------- */
.catalogos {
  border-top: 1px solid var(--line);
  padding: 56px 0;
}

.fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.fichas__titulo {
  margin-right: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.ficha-chip {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.ficha-chip:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.ficha-chip[aria-pressed="true"] {
  background: var(--a-celeste);
  border-color: var(--a-celeste);
  color: #04141d;
}

.rejilla-catalogos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .rejilla-catalogos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .rejilla-catalogos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1536px) {
  .rejilla-catalogos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.catalogo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.catalogo:hover {
  transform: translateY(-4px);
  border-color: var(--ink-faint);
  box-shadow: var(--sombra-alta);
}

.catalogo--destacado {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
}

.catalogo__sello {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fff;
  color: #000;
}

.catalogo__sello--destacado {
  background: var(--acento);
  color: var(--acento-texto);
}

.catalogo__sello--liquidacion {
  background: var(--a-rojo);
  color: #fff;
}

.catalogo__portada {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--media);
}

.catalogo__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.catalogo:hover .catalogo__portada img {
  transform: scale(1.05);
}

.catalogo__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
}

.catalogo__abrir {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.catalogo:hover .catalogo__abrir,
.catalogo__abrir:focus-visible {
  opacity: 1;
}

.catalogo__abrir span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 700;
}

.catalogo__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.catalogo__titulo {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.catalogo__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* Monogramas de texto, no logotipos ajenos: esta tienda revende ocho marcas y
   no representa a ninguna. */
.catalogo__marca {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalogo__separador {
  height: 1px;
  background: var(--line);
  margin-bottom: 12px;
}

.catalogo__datos {
  flex: 1;
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 11px;
}

.catalogo__dato {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.catalogo__dato dt {
  color: var(--ink-soft);
}

.catalogo__dato dd {
  font-weight: 600;
}

.catalogo__botones {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.catalogo__botones .boton {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.catalogos__nota {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

/* --- el visor de PDF --- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.visor__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.visor__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.visor__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.visor__filo {
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--acento);
}

.visor__titulo {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visor__marco {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (min-width: 640px) {
  .visor {
    padding: 24px;
  }
}

/* --- el aviso flotante de los catálogos ---

   Va abajo a la izquierda y acompaña al visitante por toda la página. El lado
   importa: a la derecha del escaparate flotan la Air Force y la Jordan 6 Rings
   con su precio, y ahí el aviso les tapaba la cifra. La columna izquierda tiene
   una sola zapatilla y deja libre el pie de la vitrina.

   Es además el único título que tiene la sección de catálogos, así que solo se
   va con su X. Mientras esté en pantalla dice de qué es la rejilla de abajo. */
/* --- el globo de WhatsApp, solo en móvil ---

   Arriba a la izquierda, que es donde lo pidió el usuario el 2026-08-12, y
   colgado de `--cabecera-total`: esa variable la mide `tienda.js` en cada carga
   y en cada cambio de tamaño, porque la cinta de envíos ocupa dos líneas en
   móvil y una en pantalla ancha. El 138 px del respaldo es el valor de un móvil
   normal, para que sin JavaScript no se meta debajo de la barra.

   Se va a partir de 1024 px porque ahí la pantalla ya tiene sitio para la
   cabecera entera, y de 1280 en adelante la barra trae su propio botón de
   WhatsApp: dos llamadas a lo mismo en la misma pantalla se anulan. */
.globo-wa {
  position: fixed;
  top: calc(var(--cabecera-total, 138px) + 12px);
  left: 12px;
  z-index: 44; /* Justo debajo del aviso de catálogos, que está en la otra punta. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #04140a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  font-family: var(--fuente-titular);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  animation: globo-entra 0.4s ease-out 0.6s both, globo-late 3.2s ease-in-out 2s infinite;
}

/* La cola del bocadillo, abajo a la izquierda: es lo que lo hace un globo de
   conversación y no una pastilla más. Va en el mismo verde y sin sombra propia,
   que si no se ve el triángulo despegado de la burbuja. */
.globo-wa::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: var(--whatsapp);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.globo-wa__icono {
  display: flex;
  width: 22px;
  height: 22px;
}

.globo-wa__icono .icono {
  width: 22px;
  height: 22px;
}

@keyframes globo-entra {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Un solo pulso cada tres segundos largos, y del 4 %. Lo justo para que el ojo
   lo encuentre sin que la página parezca que respira. */
@keyframes globo-late {
  0%,
  88%,
  100% {
    transform: scale(1);
  }
  94% {
    transform: scale(1.04);
  }
}

@media (min-width: 1024px) {
  .globo-wa {
    display: none;
  }
}

.aviso-flotante {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 45; /* Sobre la página, por debajo de la cabecera y de los paneles. */
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--sombra-alta);
  --acento: var(--a-rojo);
  animation: aviso-entra 0.35s ease-out both;
}

/* Hasta 560 px ocupa el ancho de la pantalla menos los márgenes: una tarjeta de
   330 px en un móvil de 390 deja un hueco que no sirve para nada. A cambio se
   aprieta, porque ahí cada píxel de alto es contenido que tapa. */
@media (max-width: 559px) {
  .aviso-flotante {
    padding: 14px;
  }

  .aviso-flotante__titulo {
    font-size: 16px;
  }

  .aviso-flotante__texto {
    margin-top: 6px;
    font-size: 12.5px;
  }

  .aviso-flotante__botones {
    margin-top: 12px;
  }
}

/* 480 px, y el número está medido, no elegido: el titular pide 398 px a 21 px de
   cuerpo, más los dos paddings de 22 y el hueco de 32 que le deja a la X. Por
   debajo se parte en "CATÁLOGOS ATLETAS DE / CRISTO", que corta el nombre del
   negocio por la mitad. Si se toca el cuerpo del titular, hay que rehacer esta
   cuenta. */
@media (min-width: 560px) {
  .aviso-flotante {
    right: auto;
    width: 480px;
    bottom: 24px;
    left: 24px;
  }
}

.aviso-flotante__filo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--acento);
}

.aviso-flotante__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

.aviso-flotante__cerrar:hover {
  background: var(--velo-hover);
  color: var(--ink);
}

.aviso-flotante__cerrar .icono {
  width: 16px;
  height: 16px;
}

/* El hueco de la X. Sin él, un título largo se le mete debajo. */
.aviso-flotante .antetitulo,
.aviso-flotante__titulo {
  padding-right: 32px;
}

.aviso-flotante__titulo {
  margin-top: 8px;
  font-family: var(--fuente-titular);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.aviso-flotante__texto {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.aviso-flotante__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Los botones de la casa miden para una sección: aquí se quedan un punto por
   debajo, para que los dos entren en una línea sin apretar la tarjeta. */
.aviso-flotante .boton {
  flex: 1 1 auto;
  padding: 11px 16px;
  font-size: 14px;
}

.aviso-flotante .boton .icono {
  width: 18px;
  height: 18px;
}

@keyframes aviso-entra {
  from {
    opacity: 0;
    transform: translate3d(-12px, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Al cerrarlo, el JS espera 250 ms antes de retirarlo del documento. La
   animación de entrada se apaga aquí: con `fill-mode: both` sigue mandando
   sobre opacity y transform, y sin quitarla la salida no se vería. */
.aviso-flotante.se-va {
  animation: none;
  opacity: 0;
  transform: translate3d(-12px, 12px, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* --------------------------------------------------------------------------
   10. Listado con filtros
   -------------------------------------------------------------------------- */
.migas {
  padding-top: 24px;
  font-size: 13px;
  color: var(--ink-soft);
}

.migas a:hover {
  color: var(--ink);
}

.listado__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.listado__titulo {
  font-family: var(--fuente-titular);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
}

.listado__titulo span {
  color: var(--ink-soft);
}

/* `flex-wrap` y no una fila rígida: son cuatro botones de texto variable ("Más
   filtros", "Ordenar por Destacados"…) y en un teléfono no caben en 370 px. Sin
   envolver, el último se salía por la derecha y quedaba cortado a media palabra:
   se veía "Ordenar por Destacad". */
.listado__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1023px) {
  .listado__acciones .boton-texto {
    padding: 8px 10px;
    font-size: 14px;
  }
}

.boton-texto {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 15px;
  transition: background-color 0.2s;
}

.boton-texto:hover {
  background: var(--velo-hover);
}

/* La talla, siempre a la vista y en el mismo sitio. */
.talla-pildora {
  width: 44px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.talla-pildora:hover {
  border-color: var(--ink);
}

.talla-pildora[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.listado__cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 80px;
}

.panel-filtros {
  display: none;
  width: 260px;
  flex: 0 0 auto;
  position: sticky;
  top: 126px;
  max-height: calc(100vh - 146px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.panel-filtros.esta-abierto {
  display: block;
}

@media (max-width: 1023px) {
  .panel-filtros {
    display: none !important;
  }
}

.listado__productos {
  flex: 1;
  min-width: 0;
}

.grupo-filtro {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.grupo-filtro__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
}

.grupo-filtro__cuerpo {
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.opcion input {
  width: 18px;
  height: 18px;
  accent-color: var(--a-celeste);
}

.opcion__color {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.rejilla-tallas-filtro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.vacio {
  padding: 96px 0;
  text-align: center;
}

.vacio p {
  font-size: 18px;
  font-weight: 600;
}

/* --- panel de filtros en móvil --- */
.cajon {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
}

.cajon__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.cajon__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 88%;
  max-width: 380px;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.cajon__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.cajon__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.cajon__pie {
  padding: 16px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   11. Ficha de producto
   -------------------------------------------------------------------------- */
.ficha {
  display: grid;
  gap: 40px;
  padding: 32px 0 80px;
}

@media (min-width: 1024px) {
  .ficha {
    grid-template-columns: 1fr 420px;
  }
}

.ficha__galeria {
  display: flex;
  gap: 16px;
}

.ficha__miniaturas {
  display: none;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}

.ficha__miniatura {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--media);
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}

.ficha__miniatura[aria-pressed="true"],
.ficha__miniatura:hover {
  opacity: 1;
  border-color: var(--ink);
}

.ficha__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha__principal {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--media);
}

.ficha__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .ficha__miniaturas {
    display: flex;
  }
}

.ficha__marca {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

.ficha__nombre {
  margin-top: 4px;
  font-family: var(--fuente-titular);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ficha__categoria {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 15px;
}

.ficha__precios {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.ficha__precio {
  font-size: 24px;
  font-weight: 800;
}

.ficha__nota {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.ficha__bloque {
  margin-top: 32px;
}

.ficha__bloque-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rejilla-tallas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 640px) {
  .rejilla-tallas {
    grid-template-columns: repeat(4, 1fr);
  }
}

.talla-opcion {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
}

.talla-opcion:hover:not([disabled]) {
  border-color: var(--acento);
  transform: translateY(-2px);
}

.talla-opcion[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.talla-opcion[disabled] {
  color: var(--ink-faint);
  text-decoration: line-through;
  cursor: not-allowed;
}

.aviso {
  margin-top: 8px;
  font-size: 13px;
}

.aviso--alerta {
  color: var(--a-rojo);
}

.ficha__acciones {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.ficha__descripcion {
  margin-top: 24px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.ficha__detalles {
  margin-top: 24px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.ficha__detalles div {
  display: flex;
  gap: 8px;
}

.ficha__detalles dt {
  font-weight: 600;
  color: var(--ink);
}

.ficha__envio {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   12. La tienda física y el pie

   El bloque de la tienda es el que más pesa de lo que pidió el dueño: el freno
   para comprar por web en Bolivia no es que los filtros sean difíciles, es no
   saber a quién le estás dando el dinero.
   -------------------------------------------------------------------------- */
/* Mucho menos alto que una sección normal, y a propósito. Las secciones respiran
   56 px arriba y abajo porque llevan dentro un titular y una rejilla; esto es una
   línea de datos de contacto y con ese aire quedaban 110 px de blanco alrededor de
   70 px de texto. Aquí el espacio no jerarquiza nada, solo separa el escaparate de
   los catálogos. */
.tienda {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 20px 0;
}

/* Cuatro datos del mismo peso, repartidos a lo ancho. Sin logotipo (ya está en la
   cabecera y en el pie) y sin botón de WhatsApp (también en los dos), que era lo
   que obligaba a que la fila no fuera pareja. */
.tienda__datos {
  display: grid;
  gap: 24px 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.dato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}

.dato a:hover {
  text-decoration: underline;
}


/* El mapa iba invertido para que no fuera una mancha blanca en una web negra.
   Con la tienda en claro sobra: se ve tal cual lo sirve Google, que es como
   todo el mundo lo reconoce. */
.mapa {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .tienda__datos {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* En pantalla ancha los cuatro se agrupan en el centro, y dejan de ser columnas.

   Con cuatro columnas iguales de 251 px repartidas en 1100, el bloque estaba
   centrado pero no lo parecía: los datos son cortos, así que cada uno flotaba
   suelto en su celda y lo que se veía era una fila estirada de lado a lado.

   Con `flex` cada dato ocupa lo que mide y la separación entre ellos es siempre la
   misma, así que el grupo se lee como un solo bloque en mitad de la página. Es lo
   contrario de lo que se hizo el 2026-08-10 al pedir "expandido y simétrico": lo
   simétrico ahora es el espacio entre ellos, no el ancho de cada celda. */
@media (min-width: 1100px) {
  .tienda__datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 64px;
  }
}

.pie {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.pie__filo {
  height: 3px;
  background: linear-gradient(90deg, var(--a-celeste), var(--a-indigo), var(--a-rojo));
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 28px 0;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pie__marca img {
  height: 36px;
  width: auto;
}

.pie__marca span {
  font-family: var(--fuente-titular);
  font-size: 13px;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}

.pie__redes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pie__red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background-color 0.2s;
}

.pie__red:hover {
  background: var(--velo-hover);
}

.pie__legal {
  border-top: 1px solid var(--line);
}

/* Las tres páginas que pide Meta para el portafolio empresarial. Van aquí y no
   en el menú: quien busca una política de privacidad mira al pie, y quien viene
   a por zapatillas no tiene por qué encontrárselas por delante.

   Los separadores son `<span>` con `aria-hidden`, no `border-left`: al envolver
   en el teléfono, un borde deja una raya huérfana al principio de la línea
   nueva y el punto simplemente se va con el enlace que le toca. */
.pie__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 14px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.pie__legal-enlaces a {
  color: var(--ink-soft);
}

.pie__legal-enlaces a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.pie__legal-enlaces span {
  color: var(--ink-faint);
}

.pie__legal-fila {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  font-size: 12px;
  color: var(--ink-faint);
}

.pie__legal-fila strong {
  color: var(--ink-soft);
  font-weight: 500;
}

@media (min-width: 768px) {
  .pie__legal-fila {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Cuando un panel está abierto, el fondo no se mueve. */
body.sin-scroll {
  overflow: hidden;
}

/* ==========================================================================
   12. El catálogo por talla y la bolsa

   El camino que pidió el usuario el 2026-08-12: un botón en mitad de la barra
   superior, las trece tallas detrás, los modelos de la talla elegida, la bolsa
   y WhatsApp con todo dentro.
   ========================================================================== */

/* --- el botón de la barra ---

   Va en un contenedor elástico entre el logo y el menú, no pegado a ninguno de
   los dos. Por eso `flex: 1`: se queda centrado en el hueco que sobra, que en
   el teléfono es el que hay entre el logo y las tres rayas, y en escritorio el
   que hay entre el logo y "INICIO". Es donde lo situó el usuario sobre dos
   capturas suyas, una de cada tamaño de pantalla. */
.cabecera__centro {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* El reparto de la barra ancha, pedido por el usuario el 2026-08-12: el botón
   pegado al logo, y el menú centrado en lo que queda.

   Lo único que cambia entre los dos tamaños de pantalla es **quién se queda el
   espacio sobrante**. En el teléfono lo absorbe el botón, y por eso queda
   centrado entre el logo y las tres rayas, que es donde el usuario lo situó.
   Aquí lo absorbe el menú, así que el botón se recoge junto al logo.

   Va aquí abajo y no en el bloque de escritorio de la sección 5, aunque sea una
   regla de escritorio: la regla base de `.cabecera__centro` está escrita después
   que aquel bloque y tiene la misma especificidad, así que allí el reparto no se
   aplicaba. No daba ningún error, solo dejaba la barra como estaba.

   El menú se centra en el hueco entre el botón y las acciones, no en el punto
   medio exacto de la pantalla. Es a propósito: centrarlo con posición absoluta
   lo descolgaría del reparto, y el día que una entrada crezca se montaría encima
   del botón sin que nada avise. */
@media (min-width: 1280px) {
  .cabecera__centro {
    flex: 0 0 auto;
    /* Separado del logo, no pegado a él. Los 16 px del `gap` de la fila dejaban
       el botón tocando el logotipo, y el usuario pidió apartarlo un poco: con
       estos 32 más, la separación es del orden del ancho del propio logo y las
       dos piezas se leen como dos cosas, no como una. */
    margin-left: 32px;
  }

  .menu {
    flex: 1;
    justify-content: center;
  }
}

.boton-catalogo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  /* Vino y no el rojo vivo, por decisión del usuario del 2026-08-12. Se le
     enseñaron seis colores pintados sobre la barra y pidió "rojo oscuro".

     Es el mismo vino de la cinta, y eso juega a favor: la cabecera pasa a tener
     un solo tono fuerte repetido arriba y abajo, en vez de dos rojos distintos a
     dos alturas. El rojo vivo se queda donde tiene que estar, que es el logotipo
     y "Ofertas". Con el rojo del logo, el botón competía con las dos cosas. */
  background: var(--a-vino);
  color: #ffffff;
  font-family: var(--fuente-titular);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(155, 18, 32, 0.3);
  transition: filter 0.2s, transform 0.2s;
}

.boton-catalogo:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.boton-catalogo .icono {
  width: 18px;
  height: 18px;
}

/* En pantalla estrecha el logo ya ocupa lo suyo, así que el botón encoge en vez
   de empujar las tres rayas fuera de la barra. Es la lección de agosto con el
   escaparate: en móvil manda el ancho de la pantalla, y hay que escribirlo. */
@media (max-width: 559px) {
  .boton-catalogo {
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .boton-catalogo .icono {
    display: none;
  }
}

/* --- el contador de la bolsa ---

   Una cifra, no un punto. El corazón de favoritos lleva punto porque ahí solo
   importa si hay algo; en la bolsa importa cuánto, porque es lo que el visitante
   está a punto de mandar al chat. */
.accion__cuenta {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--a-rojo);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* --- la capa de las tallas --- */
.capa-tallas {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.capa-tallas__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.capa-tallas__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 24px 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--sombra-alta);
}

.capa-tallas__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
}

.capa-tallas__titulo {
  font-family: var(--fuente-cartel);
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Cuatro columnas en el teléfono y siete en cuanto hay sitio. Trece tallas en
   cuatro columnas son cuatro filas, que caben sin desplazar en una pantalla de
   móvil con el título encima.

   El margen de arriba subió a 24 px al quitarse la línea de instrucciones que
   había bajo el título: sin ella, los 20 de antes dejaban los números pegados a
   la pregunta. */
.capa-tallas__rejilla {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 560px) {
  .capa-tallas__rejilla {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.talla-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.talla-grande strong {
  font-family: var(--fuente-titular);
  font-size: 22px;
  font-weight: 800;
}

.talla-grande span {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}

.talla-grande:hover {
  border-color: var(--a-rojo);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

/* La talla sin modelos se apaga, pero se pulsa. Apagarla del todo sería cerrar
   una puerta que sí lleva a algún sitio: lleva al chat, que es donde se pregunta
   por lo que no está subido a la web. */
.talla-grande--vacia {
  background: var(--surface-alt);
  color: var(--ink-faint);
}

.talla-grande--vacia strong {
  font-weight: 600;
}

.capa-tallas__respuesta {
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: var(--surface-alt);
  display: grid;
  gap: 10px;
}

.capa-tallas__respuesta p {
  font-size: 15px;
  color: var(--ink-soft);
}

.capa-tallas__respuesta strong {
  color: var(--ink);
  font-size: 17px;
}

/* --- añadir desde la tarjeta --- */
.producto__anadir {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.producto__anadir .boton {
  padding: 10px 14px;
  font-size: 14px;
}

.producto__tallas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}

/* --- la bolsa --- */
.bolsa {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}

.bolsa__velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.bolsa__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.bolsa__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.bolsa__cabeza h2 {
  font-family: var(--fuente-titular);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.bolsa__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}

.bolsa__linea {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.bolsa__foto {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--media);
}

.bolsa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bolsa__datos {
  min-width: 0;
}

.bolsa__nombre {
  font-weight: 600;
  font-size: 15px;
}

.bolsa__marca {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-soft);
}

.bolsa__derecha {
  text-align: right;
}

/* El precio de la línea va con el acento de su marca, como en la tarjeta y en
   la ficha. Es lo que hace que una bolsa de cuatro pares se lea por marca sin
   leer una palabra. */
.bolsa__precio {
  font-weight: 700;
  color: var(--acento);
}

.bolsa__unidad {
  font-size: 12px;
  color: var(--ink-faint);
}

.bolsa__quitar {
  margin-top: 8px;
  color: var(--ink-faint);
  transition: color 0.2s;
}

.bolsa__quitar:hover {
  color: var(--a-rojo);
}

.contador {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}

.contador button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transition: background-color 0.2s;
}

.contador button:hover {
  background: var(--velo-hover);
}

.contador .icono {
  width: 16px;
  height: 16px;
}

.contador span {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.bolsa__vacia {
  padding: 72px 0;
  text-align: center;
  display: grid;
  gap: 16px;
  justify-items: center;
  color: var(--ink-soft);
}

.bolsa__pie {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
}

.bolsa__pie:empty {
  display: none;
}

.bolsa__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--fuente-titular);
}

.bolsa__total span {
  font-size: 15px;
  color: var(--ink-soft);
}

.bolsa__total strong {
  font-size: 26px;
  font-weight: 800;
}

.bolsa__nota {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.bolsa__vaciar {
  justify-self: center;
  font-size: 13px;
}

/* --- el aviso de que algo entró en la bolsa --- */
.aviso-anadido {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--sombra-alta);
  /* Fuera de pantalla y sin poder recibir clics mientras no se ve. Sin el
     `visibility`, una caja transparente se queda encima del catálogo tragándose
     los toques del visitante, y eso no da ningún error. */
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}

.aviso-anadido.se-ve {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.aviso-anadido img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--media);
}

.aviso-anadido div {
  flex: 1;
  min-width: 0;
}

.aviso-anadido p {
  font-size: 13px;
  line-height: 1.35;
}

.aviso-anadido p:last-child {
  color: rgba(255, 255, 255, 0.7);
}

.aviso-anadido button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #04140a;
  font-size: 13px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .aviso-anadido {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 360px;
  }
}


/* ==========================================================================
   13. Las páginas de texto legal

   `privacidad.html`, `terminos.html` y `eliminar-datos.html`. Existen porque
   Meta las exige para aprobar el portafolio empresarial, y las lee gente en dos
   situaciones muy distintas: un revisor que comprueba que dicen algo, y un
   cliente que ya está molesto por algo. Las dos leen mejor un texto ancho de
   línea corta que una página de tienda.

   `informacion.html` resuelve lo suyo con estilos en línea porque es una página
   sola. Aquí son tres con la misma forma, así que el estilo vive en clases: el
   día que haya que cambiar el aire entre apartados no se toca en tres sitios.
   ========================================================================== */
.legal {
  max-width: 780px;
  /* Los mismos 56 px que se escribe `informacion.html` en línea. En el teléfono
     coinciden con el hueco que `main.contenedor` reserva para el globo de
     WhatsApp; en escritorio no hay ninguna otra regla que separe el título de la
     cabecera, y sin esto el titular sale pegado a ella. */
  padding-top: 56px;
  padding-bottom: 88px;
}

/* 34 px y no los 36 del título de `informacion.html`: "Instrucciones para
   eliminar tus datos" no cabe en una línea de teléfono a 36 px, y partir un
   titular en versalitas por la mitad se lee peor que bajarlo dos píxeles. */
.legal__titulo {
  font-size: 30px;
  font-weight: 900;
}

.legal__filo {
  margin-top: 16px;
  height: 4px;
  width: 96px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a-rojo), var(--a-balon), var(--a-celeste));
}

.legal__fecha {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* La entradilla dice en dos frases lo que la página tarda diez apartados en
   decir. Quien viene a comprobar algo concreto sigue leyendo; quien viene a
   saber si le espián, ya tiene su respuesta. */
.legal__entrada {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.legal__sec {
  margin-top: 40px;
}

.legal__sec h2 {
  font-size: 19px;
  font-weight: 700;
}

.legal__sec h3 {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
}

.legal__sec p,
.legal__sec li {
  margin-top: 10px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.legal__sec ul {
  margin-top: 12px;
  padding-left: 20px;
  list-style: disc;
}

.legal__sec li::marker {
  color: var(--a-rojo);
}

.legal__sec a {
  color: var(--ink);
}

/* El subrayado va solo en la prosa. Dentro de un párrafo es lo único que
   distingue un enlace del texto que lo rodea, pero en un botón verde de WhatsApp
   o en la ficha de contacto no distingue nada: solo ensucia. */
.legal__sec p a,
.legal__sec li:not(.dato) a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__sec .boton {
  text-decoration: none;
}

.legal__sec strong {
  color: var(--ink);
  font-weight: 600;
}

/* Para lo que no es prosa sino un dato que hay que poder copiar o pulsar: el
   canal de contacto, las claves que guarda el navegador, el botón de borrado. */
.legal__caja {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--surface);
}

.legal__caja p:first-child {
  margin-top: 0;
}

/* La ficha de contacto del responsable es una `ul`, porque son datos de la misma
   clase y no una lista de viñetas. Hay que apagarle lo que `.legal__sec ul` le
   pone por defecto: sin esto sale con puntos rojos y con la sangría sumada a la
   del propio recuadro. */
ul.legal__caja {
  list-style: none;
  padding: 20px;
  display: grid;
  gap: 14px;
}

ul.legal__caja li {
  margin-top: 0;
  color: var(--ink);
}

/* Dentro del recuadro, la lista de viñetas sí las lleva, pero sin heredar el
   margen de arriba de la primera: el recuadro ya la separa del texto. */
.legal__caja ul {
  margin-top: 8px;
}

.legal__botones {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* El resultado de pulsar "Borrar los datos de este navegador". Nace oculto y no
   se pinta hasta que el borrado ocurre: un mensaje de éxito visible desde antes
   de hacer nada es peor que no tenerlo. */
.legal__resultado {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 14px;
  color: var(--ink);
}

.legal__clave {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
}

@media (min-width: 768px) {
  .legal__titulo {
    font-size: 38px;
  }
}