/* ==========================================================================
   XolloYa — COMPONENTES
   Contrato con el resto de agentes:
   .tarjeta / __foto / __titulo / __precio / __tienda / __descuento
   .mosaico / __item / __icono / __nombre
   .cabecera · .pie · .barra-app
   ========================================================================== */

/* ================================ BOTONES ================================ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-sm);
  min-height: 48px;
  padding: 0 var(--esp-xl);
  border-radius: var(--radio-full);
  border: 1px solid var(--color-borde-fuerte);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--mov-rapido), border-color var(--mov-rapido),
              color var(--mov-rapido), box-shadow var(--mov-rapido),
              transform var(--mov-rapido);
}
.boton:hover { border-color: var(--color-texto-tenue); box-shadow: var(--sombra-sm); }
/* Pulsado: el botón cede un poco hacia abajo, como un botón de verdad */
.boton:active { transform: translateY(1px) scale(.99); box-shadow: none; }
.boton svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* El botón que gana la comisión: grande, de marca, imposible de no ver */
.boton--compra {
  gap: var(--esp-md);
  min-height: 54px;
  padding: 0 var(--esp-xl);
  background: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  box-shadow: var(--sombra-marca);
}
.boton--compra:hover {
  background: var(--color-principal-fuerte);
  border-color: var(--color-principal-fuerte);
  box-shadow: var(--sombra-marca);
}
.boton--compra svg { width: 21px; height: 21px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .boton--compra { box-shadow: var(--sombra-marca); } }
:root[data-tema="oscuro"] .boton--compra { box-shadow: var(--sombra-marca); }

/* Estado "trabajando": gira un anillo y el botón no se puede pulsar dos veces */
.boton[aria-busy="true"], .boton[disabled] { opacity: .7; pointer-events: none; }
.boton[aria-busy="true"]::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-full);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.boton--principal {
  background: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-sobre-principal);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-marca);
}
.boton--principal:hover {
  background: var(--color-principal-fuerte);
  border-color: var(--color-principal-fuerte);
  box-shadow: var(--sombra-marca);
}



.boton--bloque { width: 100%; }
.boton--sm { min-height: var(--toque-min); padding: 0 var(--esp-lg); font-size: var(--t-sm); }
.boton--lg { min-height: 56px; font-size: var(--t-md); padding: 0 var(--esp-2xl); }
@media (max-width: 380px) { .boton--lg { padding-inline: var(--esp-lg); } }

/* ================================ CHIPS ================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque-min);
  padding: 0 var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--mov-rapido), color var(--mov-rapido),
              border-color var(--mov-rapido);
}
.chip:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.chip[aria-pressed="true"] {
  background: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--color-sobre-principal);
}

/* Fila de chips: el contenedor que usan guías, ofertas, categorías, cupones y blog.
   .chips__texto usa align-self, que solo funciona en flex, así que aquí se declara
   el contenedor (antes faltaba y los chips se colocaban con el espacio en blanco). */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-sm);
}

/* ============================ CINTA BORRADOR ============================ */




/* ================================ CABECERA ================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: var(--color-cristal);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-borde);
}
.cabecera__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-md);
  min-height: var(--alto-cabecera);
  padding-block: 6px; /* cabecera esbelta: en móvil cada píxel de alto cuenta */
}
@media (min-width: 768px) { .cabecera__barra { padding-block: var(--esp-sm); } }

.logo { order: 1; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: var(--toque-min); }
.logo__marca { width: 32px; height: 32px; flex: 0 0 auto; }
.logo__nombre { font-size: var(--t-lg); font-weight: var(--peso-bold); letter-spacing: -.03em; }
.logo__nombre b { color: var(--color-principal); font-weight: var(--peso-bold); }

.buscador {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  min-width: 0;
  padding: 3px 3px 3px var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
.buscador:focus-within {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px var(--color-principal-suave);
}
.buscador__icono { width: 20px; height: 20px; flex: 0 0 auto; color: var(--color-texto-tenue); }
.buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--toque-min);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--t-md);
  padding-block: 9px;
}
.buscador__campo::placeholder { color: var(--color-texto-tenue); }
/* Si la pantalla es muy estrecha el marcador no cabe: mejor unos puntos
   suspensivos que una palabra partida por la mitad. */
.buscador__campo { text-overflow: ellipsis; }
.buscador__campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador__boton {
  flex: 0 0 auto;
  min-height: var(--toque-min);
  padding: 0 var(--esp-lg);
  border-radius: var(--radio-full);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  transition: background var(--mov-rapido);
}
.buscador__boton:hover { background: var(--color-principal-fuerte); }

.cabecera__acciones { order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--esp-xs); }
.accion {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--radio-full);
  color: var(--color-texto-suave);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.accion:hover { background: var(--color-hover); color: var(--color-texto); }
.accion:active { transform: scale(.93); }
.accion svg { width: 22px; height: 22px; }
.accion--activo { color: var(--color-principal); background: var(--color-principal-suave); }

/* --- Botón de tema claro/oscuro: sol y luna ocupan la misma celda del grid;
       solo se ve el que toca (el otro lleva `hidden`) --- */
.accion--tema > .accion-tema__ico { display: grid; place-items: center; grid-area: 1 / 1; }
.accion--tema[aria-pressed="true"] { color: var(--color-principal); }

/* --- Estado de usuario: la inicial en un círculo --- */
.usuario-inicial {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radio-full);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.esta-dentro .usuario-inicial { display: grid; }
.accion.esta-dentro > svg { display: none; }
.accion.esta-dentro { color: var(--color-principal); }

.accion__punto {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-full);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: 10px;
  font-weight: var(--peso-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nav-principal { display: none; }
.nav-principal ul { display: flex; align-items: center; gap: var(--esp-xs); }
.nav-principal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--esp-md);
  border-radius: var(--radio-full);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  color: var(--color-texto-suave);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.nav-principal a:hover { background: var(--color-hover); color: var(--color-texto); }
.nav-principal a[aria-current="page"] { color: var(--color-texto); background: var(--color-hover); }

@media (min-width: 768px) {
  .buscador { order: 2; flex: 1 1 auto; max-width: 520px; }
  .cabecera__acciones { order: 3; }
}
/* La navegación de texto solo entra cuando de verdad cabe junto al buscador
   (a partir de 1280). Por debajo el menú va en la hamburguesa, igual que
   en móvil: así el buscador conserva su ancho y el marcador no se corta. */
@media (min-width: 1280px) {
  .cabecera__barra { flex-wrap: nowrap; }
  .nav-principal { display: block; order: 2; flex: 0 0 auto; }
  /* El buscador de la cabecera necesita ~410 px para que el marcador de posición
     ("Busca ofertas, marcas o tiendas…") quepa entero; el hueco se toma del aire
     de los enlaces de navegación, que con 44 px de alto no lo necesitan. */
  .nav-principal ul { gap: 0; }
  .nav-principal a { padding-inline: 10px; }
  .buscador { order: 3; flex: 1 1 auto; max-width: none; gap: 6px; padding-left: 12px; }
  .buscador__campo { font-size: var(--t-base); }
  .buscador__boton { padding: 0 8px; }
  .cabecera__acciones { order: 4; margin-left: 0; }
}

/* ============================= MIGAS DE PAN ============================= */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-sm);
  font-size: var(--t-sm);
  color: var(--color-texto-tenue);
  padding-block: var(--esp-lg);
}
.migas a { color: var(--color-texto-suave); display: inline-flex; align-items: center; min-height: var(--toque-min); }
.migas a:hover { color: var(--color-texto); text-decoration: underline; }
.migas span[aria-hidden] { color: var(--color-texto-tenue); }

/* ========================= MOSAICO DE CATEGORÍAS ========================= */
/* Fondo blanco, icono en un círculo suave del color de la categoría,
   nombre en semibold y contador en gris pequeño. Menos color, más elegancia. */

.mosaico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-md);
}
@media (min-width: 600px) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-lg); } }
@media (min-width: 1024px) { .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.mosaico__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-md);
  min-height: 126px;
  padding: var(--esp-lg) var(--esp-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-xs);
  text-align: center;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio), border-color var(--mov-medio);
}
.mosaico__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
  border-color: color-mix(in srgb, var(--color-principal) 45%, var(--color-borde));
}
.mosaico__icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radio-full);
  background: var(--color-fondo);
  background: var(--color-principal-suave);
  color: var(--color-texto);
  color: var(--color-principal);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .mosaico__icono {
    background: var(--color-principal-suave);
    color: var(--color-principal);
  }
}
:root[data-tema="oscuro"] .mosaico__icono {
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
.mosaico__icono svg { width: 24px; height: 24px; }
.mosaico__nombre {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  line-height: 1.25;
  color: var(--color-texto);
}
.mosaico__cuenta {
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
}

/* ======================== TARJETA DE PRODUCTO ======================== */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-xs);
  overflow: hidden;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio), border-color var(--mov-medio);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-2px); /* sube 2px, nada más */
    box-shadow: var(--sombra-md); /* y la sombra crece un poco */
    border-color: var(--color-borde-fuerte);
  }
  /* La foto se acerca un pelín: la tarjeta se siente viva */
  .tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
  .tarjeta:hover .tarjeta__titulo a { text-decoration: underline; text-decoration-color: var(--color-borde-fuerte); }
}

/* Cuadro de la foto: siempre del mismo tamaño, fondo blanco, imagen contenida */
.tarjeta__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--esp-lg);
  background: var(--color-foto);
  border-bottom: 1px solid var(--color-borde);
  overflow: hidden;
}
.tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* nunca estirada ni borrosa */
  transition: transform var(--mov-medio);
}
@media (min-width: 768px) { .tarjeta__foto { aspect-ratio: 4 / 3; } }

/* Estado de CARGA: brillo suave mientras llega la imagen */
@keyframes brillo { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.tarjeta__foto.cargando::before, .ficha__foto.cargando::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--color-fondo) 30%, var(--color-superficie) 50%, var(--color-fondo) 70%);
  background-size: 220% 100%;
  animation: brillo 1.5s linear infinite;
}

/* Estado de ERROR: aviso discreto, nunca un dibujo de colores */
.cupon__estado { color: var(--color-texto-suave); font-size: var(--t-sm); overflow-wrap: anywhere; user-select: text; }
.tarjeta__foto.error::after, .ficha__foto.error::after {
  content: "Imagen no disponible";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: var(--t-xs);
  /* El recuadro de la foto es SIEMPRE blanco (--color-foto), también en oscuro:
     el texto no puede usar el gris del tema o desaparece sobre blanco. */
  color: #6B655E;
}

.tarjeta__descuento {
  position: absolute;
  top: var(--esp-md);
  left: var(--esp-md);
  z-index: 2;
  padding: 5px 9px;
  border-radius: var(--radio-xs);
  background: var(--color-descuento);
  color: var(--color-sobre-descuento);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
  flex: 1;
  padding: var(--esp-lg);
}
.tarjeta__tienda {
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .02em;
  color: var(--color-texto-tenue);
}
.tarjeta__titulo {
  overflow-wrap: anywhere;
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  line-height: 1.45;
  color: var(--color-texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--t-sm) * 1.45 * 2);
}
.tarjeta__titulo a:hover { text-decoration: underline; }
.tarjeta__precio {
  margin-top: auto;
  padding-top: var(--esp-md);
  display: flex;
  align-items: baseline;
  gap: var(--esp-sm);
  flex-wrap: wrap;
  font-size: var(--t-precio); /* el precio es el protagonista: grande siempre */
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto);
}
.tarjeta__antes {
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
  text-decoration: line-through;
}

/* Insignia "Mejor precio": verde de marca, para lo que de verdad conviene.
   Se coloca sola (inline) dentro del cuerpo; con --flotante se pega a la foto. */


@media (prefers-color-scheme: dark) {  }

/* Variante sobre la foto (esquina inferior izquierda) */


/* Pulsar la tarjeta en táctil: una reacción breve, no un salto */
@media (hover: none) {
  .tarjeta:active { transform: scale(.985); }
}

/* Guardar en la lista local */
.tarjeta__guardar {
  position: absolute;
  top: var(--esp-sm);
  right: var(--esp-sm);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--radio-full);
  background: var(--color-cristal);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  box-shadow: var(--sombra-xs);
  transition: color var(--mov-rapido), background var(--mov-rapido),
              border-color var(--mov-rapido), transform var(--mov-rapido);
}
.tarjeta__guardar:hover { color: var(--color-texto); transform: scale(1.06); }
.tarjeta__guardar:active { transform: scale(.9); }
.tarjeta__guardar[aria-pressed="true"] {
  color: var(--color-principal);
  border-color: color-mix(in srgb, var(--color-principal) 40%, var(--color-superficie));
  background: var(--color-foto);
}
.tarjeta__guardar[aria-pressed="true"] svg { fill: currentColor; }
.tarjeta__guardar svg { width: 19px; height: 19px; transition: transform var(--mov-rapido); }

/* Al guardar: el corazón late (una sola vez) — feedback inmediato */
@keyframes latido-corazon {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.3); }
  55%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.tarjeta__guardar.reaccion { animation: latido-corazon 360ms cubic-bezier(.34, 1.56, .64, 1); }
.tarjeta__guardar.reaccion[aria-pressed="true"] { color: var(--color-descuento); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tarjeta__guardar { background: var(--color-cristal); border-color: var(--color-borde); }
  :root:not([data-tema="claro"]) .tarjeta__guardar[aria-pressed="true"] { background: var(--color-superficie-2); }
}
:root[data-tema="oscuro"] .tarjeta__guardar { background: var(--color-cristal); border-color: var(--color-borde); }
:root[data-tema="oscuro"] .tarjeta__guardar[aria-pressed="true"] { background: var(--color-superficie-2); }

/* ================================ CUPONES ================================ */

.cupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-lg);
  padding: var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-xs);
  transition: box-shadow var(--mov-medio), border-color var(--mov-medio);
}
.cupon:hover { box-shadow: var(--sombra-md); border-color: var(--color-borde-fuerte); }
.cupon__descuento {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radio-md);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  font-size: var(--t-md);
  font-weight: var(--peso-extra);
  line-height: 1;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cupon__descuento { color: var(--color-principal-fuerte); }
}
:root[data-tema="oscuro"] .cupon__descuento { color: var(--color-principal-fuerte); }
.cupon__info { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cupon__tienda {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  /* el nombre de la tienda es un enlace propio: 29 px de ancho no llegan al
     mínimo táctil, así que se le da área con relleno y margen negativo (el texto
     no se mueve de sitio) */
  display: inline-flex;
  align-items: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding-inline: var(--esp-xs);
  margin-inline: calc(-1 * var(--esp-xs));
}
.cupon__texto { font-size: var(--t-sm); color: var(--color-texto-suave); }
.cupon__meta { font-size: var(--t-xs); color: var(--color-texto-tenue); }
.cupon__accion { flex: 0 1 auto; margin-left: auto; }
@media (max-width: 560px) { .cupon__accion { flex: 1 1 100%; margin-left: 0; } }

/* ================================= PIE ================================= */

.pie {
  margin-top: var(--esp-xl);
  padding-block: var(--esp-2xl);
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
}
.pie__rejilla { display: grid; gap: var(--esp-xl); grid-template-columns: 1fr; }
@media (min-width: 600px) { .pie__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pie__rejilla { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--esp-2xl); } }

.pie__marca { display: flex; flex-direction: column; gap: var(--esp-md); }
.pie__desc { font-size: var(--t-sm); color: var(--color-texto-suave); max-width: 38ch; }
.pie__titulo { font-size: var(--t-sm); font-weight: var(--peso-semi); margin-bottom: var(--esp-md); }
.pie__lista { display: flex; flex-direction: column; gap: 2px; }
.pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-size: var(--t-sm);
  color: var(--color-texto-suave);
  transition: color var(--mov-rapido);
}
.pie__lista a:hover { color: var(--color-texto); text-decoration: underline; }
@media (min-width: 768px) { .pie__lista a { min-height: 36px; } }

.pie__legal {
  margin-top: var(--esp-xl);
  padding-top: var(--esp-lg);
  border-top: 1px solid var(--color-borde);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-md);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--color-texto-tenue);
}
.pie__afiliados { max-width: 62ch; }

/* ========================= BARRA INFERIOR TIPO APP ========================= */

.barra-app {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra);
  display: flex;
  height: calc(var(--alto-barra-app) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-cristal);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--color-borde);
}
.barra-app__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--toque-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  color: var(--color-texto-tenue);
  padding-top: 6px;
  transition: color var(--mov-rapido);
}
.barra-app__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 26px;
  border-radius: var(--radio-full);
  transition: background var(--mov-rapido), color var(--mov-rapido), transform var(--mov-rapido);
}
.barra-app__item svg { width: 22px; height: 22px; }
.barra-app__item:active .barra-app__icono { transform: scale(.9); }
.barra-app__item[aria-current="page"] { color: var(--color-principal); font-weight: var(--peso-semi); }
.barra-app__item[aria-current="page"] .barra-app__icono { background: var(--color-principal-suave); }
.barra-app__item:hover .barra-app__icono { background: var(--color-hover); }

/* Pestaña de cuenta con sesión: la inicial ocupa el icono, en verde de marca */
.barra-app__item .usuario-inicial { width: 24px; height: 24px; font-size: var(--t-2xs); }
.barra-app__item.esta-dentro .barra-app__icono { background: var(--color-principal); color: var(--color-sobre-principal); }
.barra-app__item.esta-dentro .barra-app__icono svg { display: none; }
.barra-app__item.esta-dentro { color: var(--color-principal); font-weight: var(--peso-semi); }
@media (min-width: 1000px) { .barra-app { display: none; } }

/* ======================= PANEL DE MENÚ (MÓVIL) ======================= */

.panel-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.panel-menu__fondo { position: absolute; inset: 0; background: var(--color-velo); }
.panel-menu__caja {
  position: relative;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--esp-xl) var(--esp-lg) calc(var(--esp-xl) + env(safe-area-inset-bottom, 0px));
  background: var(--color-superficie);
  border-radius: var(--radio-xl) var(--radio-xl) 0 0;
  box-shadow: var(--sombra-lg);
  animation: panel-subir var(--mov-medio);
}
@keyframes panel-subir {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.panel-menu__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-lg);
  margin-bottom: var(--esp-lg);
}
.panel-menu__titulo { font-size: var(--t-lg); }
.panel-menu__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-sm); }
@media (min-width: 600px) { .panel-menu__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.panel-menu .mosaico__item { min-height: 108px; }

body.sin-scroll { overflow: hidden; }

/* =============================== FILTROS =============================== */

.filtros {
  display: flex;
  gap: var(--esp-sm);
  margin-bottom: var(--esp-xl);
  padding-bottom: var(--esp-xs);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtros > * { flex: 0 0 auto; }
/* En escritorio sobra sitio y una fila que se corta sin barra visible solo
   desconcierta: los filtros se reparten en varias líneas. En móvil se mantiene
   el carrusel horizontal (ahí sí se espera arrastrar). */
@media (min-width: 768px) {
  .filtros { flex-wrap: wrap; overflow-x: visible; }
}

/* ==================== TIRA (carrusel de la portada) ==================== */

.tira {
  display: flex;
  gap: var(--esp-md);
  padding-bottom: var(--esp-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tira::-webkit-scrollbar { display: none; }
.tira > .tarjeta { flex: 0 0 72%; max-width: 260px; scroll-snap-align: start; }
@media (min-width: 600px) { .tira > .tarjeta { flex-basis: 42%; } }

@media (min-width: 768px) {
  .tira {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--esp-lg);
    overflow: visible;
    padding-bottom: 0;
  }
  .tira > .tarjeta { flex: none; max-width: none; }
}

/* ============================ ESTADOS ============================ */
/* Vacío · error · cargando: cuidados, con icono, título y una acción. */

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-lg);
  padding: clamp(32px, 6vw, 56px) var(--esp-xl);
  text-align: center;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-xs);
}
.estado__icono {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radio-full);
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
.estado__icono svg { width: 30px; height: 30px; }
.estado--error .estado__icono { background: var(--color-descuento-suave); color: var(--color-descuento); }
.estado__titulo { font-size: var(--t-xl); font-weight: var(--peso-bold); letter-spacing: -.01em; }
.estado__texto { font-size: var(--t-sm); line-height: 1.55; color: var(--color-texto-suave); max-width: 44ch; }
.estado__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-md); justify-content: center; margin-top: var(--esp-xs); }

/* Esqueleto de carga: la silueta EXACTA de la tarjeta, mientras llegan los datos.
   Nada de ruedas girando: gris que respira. */
.esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-md);
  height: 100%;
  padding: var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-xs);
  overflow: hidden;
}
.esqueleto__bloque {
  border-radius: var(--radio-sm);
  background-color: var(--color-borde);
  background-image: linear-gradient(100deg,
    var(--color-borde) 30%,
    var(--color-superficie-2) 50%,
    var(--color-borde) 70%);
  background-size: 220% 100%;
  animation: brillo 1.5s linear infinite;
}
.esqueleto__foto { aspect-ratio: 1 / 1; border-radius: var(--radio-md); }
@media (min-width: 768px) { .esqueleto__foto { aspect-ratio: 4 / 3; } }
.esqueleto__linea { height: 12px; }
.esqueleto__linea--titulo { height: 16px; }
.esqueleto__linea--corta { width: 60%; }
.esqueleto__linea--precio { height: 22px; width: 45%; margin-top: auto; }

/* ==========================================================================
   CAPA PREMIUM Y DE CONVERSIÓN
   Insignias, barra de compra fija (móvil), tostadas y remates táctiles.
   Contrato para el agente de páginas:
     · Insignia "Mejor precio"      →  <span class="tarjeta__mejor">…</span>
     · Barra de compra fija         →  ver .compra-fija más abajo
     · Origen que la revela         →  [data-compra-fija-origen] en el CTA de la ficha
   ========================================================================== */

/* --------------------------- INSIGNIAS GENÉRICAS --------------------------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  line-height: 1.35;
}
.insignia svg { width: 13px; height: 13px; flex: 0 0 auto; }
.insignia--mejor { background: var(--color-principal); color: var(--color-sobre-principal); box-shadow: var(--sombra-marca); }

@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .insignia:not(.insignia--mejor) { color: var(--color-principal-fuerte); } }
:root[data-tema="oscuro"] .insignia:not(.insignia--mejor) { color: var(--color-principal-fuerte); }

/* ------------------------------ ICONOS -------------------------------
   .ico() emite el SVG con width/height 24 (tamaño base). Estos modificadores
   -los que el diseño pedía en textos, chips, notas y botones- se usaban pero
   NO estaban definidos en el CSS, así que todo icono pequeño salía a 24px.
   Aquí se recupera la escala 14/16/18 para dejar el sistema completo. */
.ico { flex: 0 0 auto; }
.ico--14 { width: 14px; height: 14px; }
.ico--16 { width: 16px; height: 16px; }
.ico--18 { width: 18px; height: 18px; }
/* El icono del buscador de la cabecera conserva su tamaño propio */
.ico.buscador__icono { width: 20px; height: 20px; }

/* ------------------------ BARRA DE COMPRA FIJA (MÓVIL) ------------------------
   Se queda pegada abajo, justo por encima de la barra de app, para que el botón
   de compra esté siempre a un toque. Se muestra con el atributo [data-visible]
   (lo pone el JS al dejar de verse el CTA principal de la ficha). */
.compra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--alto-barra-app) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-compra);
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  min-height: var(--alto-compra-fija);
  padding: var(--esp-md) var(--esp-lg);
  padding-left: max(var(--esp-lg), env(safe-area-inset-left, 0px));
  padding-right: max(var(--esp-lg), env(safe-area-inset-right, 0px));
  background: var(--color-cristal);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--color-borde);
  box-shadow: var(--sombra-flotante);
}
.compra-fija[hidden] { display: none; }
.compra-fija[data-visible] { animation: compra-subir var(--mov-medio); }
@keyframes compra-subir {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.compra-fija__info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.compra-fija__precio {
  display: flex;
  align-items: baseline;
  gap: var(--esp-sm);
  font-size: var(--t-precio);
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.compra-fija__antes {
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
  text-decoration: line-through;
}
.compra-fija__nota {
  font-size: var(--t-2xs);
  font-weight: var(--peso-medio);
  color: var(--color-texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compra-fija__boton { flex: 0 0 auto; }

/* El contenido gana hueco para que la barra no tape nada */
body.tiene-compra-fija {
  padding-bottom: calc(var(--alto-compra-fija) + var(--alto-barra-app) + var(--esp-lg) + env(safe-area-inset-bottom, 0px));
}
/* En escritorio el patrón no se usa: el CTA vive dentro de la caja de precio */
@media (min-width: 1000px) {
  .compra-fija { display: none !important; }
  body.tiene-compra-fija { padding-bottom: 0; }
}

/* ------------------------------- TOSTADAS -------------------------------
   Confirmación breve ("Guardado en tu lista"). Se anuncia por lectores
   de pantalla porque el contenedor lleva aria-live="polite". */
.aviso-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-barra-app) + var(--esp-xl) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-aviso);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  max-width: min(92vw, 420px);
  padding: 12px var(--esp-lg);
  border-radius: var(--radio-full);
  background: var(--color-texto);
  color: var(--color-fondo);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-lg);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mov-medio), transform var(--mov-medio);
}
.aviso-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-toast svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (min-width: 1000px) { .aviso-toast { bottom: var(--esp-xl); } }

/* --------------------------- REMATES TÁCTILES --------------------------- */
/* Sin "hover pegado" en pantallas táctiles: el efecto solo existe con ratón */
@media (hover: none) {
  .mosaico__item:hover { transform: none; box-shadow: var(--sombra-xs); border-color: var(--color-borde); }
}
/* A 360px y menos: nada se sale de la pantalla */
@media (max-width: 360px) {
  .contenedor { padding-inline: var(--esp-md); }
  .tarjeta__cuerpo { padding: var(--esp-md); }
  .tarjeta__precio { font-size: var(--t-xl); }
  .barra-app__item { font-size: var(--t-2xs); }
}

/* ==========================================================================
   QA · ÁREAS TÁCTILES (11-oct-2026)
   Medido con CDP (`getBoundingClientRect`), no a ojo.
   · Título de tarjeta: el enlace medía 17 px de alto cuando el título cabía en
     una línea (y 37 px en dos) → por debajo incluso del mínimo AA de 24 px.
     Ahora es un bloque de 44 px. La tarjeta crece 3,5 px; el recorte a 2
     líneas (‑webkit-line-clamp) sigue funcionando: scrollHeight 81 > 44.
   · Migas de pan: el enlace medía 35 px de ANCHO ("Inicio"). Se le da padding
     horizontal y se compensa con margen negativo → la caja ocupa lo mismo y el
     ritmo visual de las migas NO cambia, pero el área de toque pasa a ≥44×44.
     Entre dos migas siempre va un separador no interactivo, así que las áreas
     ampliadas no se solapan entre sí.
   ========================================================================== */
.tarjeta__titulo a {
  display: block;
  min-height: var(--toque-min);
}
.migas a {
  padding-inline: var(--esp-sm);
  margin-inline: calc(-1 * var(--esp-sm));
}

/* ==========================================================================
   QA · ESPACIADO EN ESCALA DE 4 (11-oct-2026)
   Los remates de insignias usaban padding fuera de escala (5px 9px, 4px 9px,
   4px 10px, 2px 6px, 6px 12px 6px 10px). Se alinean a la escala del sistema.
   Es una corrección de 1-2 px por lado: no cambia la maquetación.
   ========================================================================== */
.tarjeta__descuento { padding: 4px 8px; }

.insignia           { padding: 4px 8px; }


/* ==========================================================================
   BUSCADOR · Panel de filtros (categoría, tienda, precio y orden)
   Existía en la web anterior con cinco desplegables; se perdió al rehacer
   /buscar/ y esta vez se resuelve sobre el catálogo completo (worker), no
   sobre la página visible. Reutiliza .filtro/.filtro__campo de paginas.css:
   aquí solo va el contenedor.
   ========================================================================== */
.filtros-panel {
  margin: var(--esp-lg) 0 var(--esp-xl);
  padding: var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie-2);
}
.filtros-panel__titulo {
  margin: 0 0 var(--esp-md);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--color-texto-suave);
}
.filtros-panel .filtros__resumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-xs);
  margin: 0;
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde);
}
.filtros-panel [data-limpiar-filtros] {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.filtros-panel [data-limpiar-filtros][hidden] { display: none; }