/* ==========================================================================
   XolloYa — PÁGINAS
   Portada, categorías, ofertas, buscador, guardados, cupones y ficha.
   ========================================================================== */

/* ================================ PORTADA ================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--esp-2xl);
  border-bottom: 1px solid var(--color-borde);
  background:
    radial-gradient(680px 320px at 92% -30%, var(--color-principal-suave), transparent 70%),
    var(--color-superficie);
}
.hero__rejilla { display: grid; gap: var(--esp-xl); }
.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: 6px 12px 6px 10px;
  border-radius: var(--radio-full);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .hero__etiqueta { color: var(--color-principal-fuerte); } }
:root[data-tema="oscuro"] .hero__etiqueta { color: var(--color-principal-fuerte); }
.hero__etiqueta svg { width: 14px; height: 14px; }
.hero__titulo { font-size: var(--t-3xl); font-weight: var(--peso-extra); margin-top: var(--esp-lg); max-width: 20ch; }
.hero__texto {
  margin-top: var(--esp-md);
  font-size: var(--t-md);
  color: var(--color-texto-suave);
  max-width: 52ch;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-md); margin-top: var(--esp-xl); }
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-xl);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-lg);
  border-top: 1px solid var(--color-borde);
}
.hero__dato { display: flex; align-items: baseline; gap: 6px; font-size: var(--t-sm); color: var(--color-texto-suave); }
.hero__dato b { font-size: var(--t-lg); font-weight: var(--peso-bold); color: var(--color-texto); font-variant-numeric: tabular-nums; }


@media (min-width: 1000px) {
  .hero { padding-block: var(--esp-3xl); }
  .hero__rejilla { grid-template-columns: 1.45fr .55fr; align-items: center; gap: var(--esp-2xl); }
  .hero__titulo { font-size: var(--t-4xl); }



}




/* ============================== REJILLAS ============================== */

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

.rejilla-cupones { display: grid; grid-template-columns: 1fr; gap: var(--esp-md); }
@media (min-width: 720px) { .rejilla-cupones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-lg); } }

/* =========================== CABECERA DE PÁGINA =========================== */

.pagina-cabecera { padding-block: var(--esp-2xl) var(--esp-xl); border-bottom: 1px solid var(--color-borde); }
.pagina-cabecera__fila { display: flex; align-items: center; gap: var(--esp-lg); }
.pagina-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--radio-full);
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pagina-icono {
    background: var(--color-principal-suave);
    color: var(--color-principal);
  }
}
:root[data-tema="oscuro"] .pagina-icono {
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
.pagina-icono svg { width: 26px; height: 26px; }
.pagina-titulo { font-size: var(--t-2xl); font-weight: var(--peso-bold); }
.pagina-sub { font-size: var(--t-sm); color: var(--color-texto-suave); margin-top: var(--esp-xs); }

/* ============================== BUSCADOR PÁGINA ============================== */

.buscador-grande {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  padding: 6px 6px 6px var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-sm);
  max-width: 640px;
}
.buscador-grande:focus-within { border-color: var(--color-principal); box-shadow: 0 0 0 3px var(--color-principal-suave); }
.buscador-grande svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-texto-tenue); }
.buscador-grande input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--t-md);
  padding-block: 12px;
}

/* ================================ FICHA ================================ */

.ficha { display: grid; gap: var(--esp-xl); }
/* Cada columna de la ficha puede encogerse por debajo de su contenido: sin esto,
   la foto (600x600 intrínsecos) imponía un ancho mínimo y la ficha entera se
   salía 85 px por la derecha en un móvil de 500 px. */
.ficha > * { min-width: 0; }
@media (min-width: 900px) { .ficha { grid-template-columns: 1.05fr 1fr; gap: var(--esp-2xl); align-items: start; } }

.ficha__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  /* en móvil la foto nunca puede ser más alta que el ancho útil */
  max-height: min(100vw - 2 * var(--esp-lg), 560px);
  padding: var(--esp-2xl);
  background: var(--color-foto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-xs);
}
.ficha__foto img { width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: contain; }

.ficha__tienda-top { font-size: var(--t-xs); font-weight: var(--peso-semi); color: var(--color-texto-tenue); }
.ficha__nombre { font-size: var(--t-2xl); font-weight: var(--peso-bold); margin-top: var(--esp-sm); }
.ficha__marca { font-size: var(--t-sm); color: var(--color-texto-suave); margin-top: var(--esp-xs); }
/* Enlaces de contexto de la ficha: marca, categoría y tienda. Son enlaces de
   navegación, no botones: subrayado fino y mismo tamaño que la línea de marca. */
.ficha__enlaces { display: flex; flex-wrap: wrap; gap: var(--esp-sm) var(--esp-md); margin-top: var(--esp-sm); }
.ficha__enlaces a { font-size: var(--t-sm); color: var(--color-principal); text-decoration: underline; text-underline-offset: 2px; }
.ficha__enlaces a:hover { color: var(--color-principal-fuerte, var(--color-principal)); }

.caja-precio {
  margin-top: 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);
}
.caja-precio__fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--esp-md); }
.caja-precio__valor {
  font-size: var(--t-3xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.caja-precio__antes { font-size: var(--t-sm); color: var(--color-texto-tenue); text-decoration: line-through; }
.caja-precio__rebaja {
  padding: 4px 8px;
  border-radius: var(--radio-xs);
  background: var(--color-descuento-suave);
  color: var(--color-descuento);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
}
.caja-precio__tienda { margin-top: var(--esp-sm); font-size: var(--t-sm); color: var(--color-texto-suave); }
.caja-precio__acciones { display: flex; flex-direction: column; gap: var(--esp-md); margin-top: var(--esp-lg); }
.caja-precio__nota { font-size: var(--t-xs); color: var(--color-texto-tenue); text-align: center; }

.bloque { margin-top: var(--esp-xl); }
.bloque__titulo { font-size: var(--t-lg); font-weight: var(--peso-semi); margin-bottom: var(--esp-md); }

.lista-puntos { display: flex; flex-direction: column; gap: var(--esp-md); }
.lista-puntos li { display: flex; gap: var(--esp-md); font-size: var(--t-sm); color: var(--color-texto-suave); }
.lista-puntos svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--color-principal); }

.tabla-tiendas { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla-tiendas th, .tabla-tiendas td { text-align: left; padding: var(--esp-md) var(--esp-sm); border-bottom: 1px solid var(--color-borde); }
.tabla-tiendas th { font-size: var(--t-xs); font-weight: var(--peso-semi); color: var(--color-texto-tenue); text-transform: uppercase; letter-spacing: .03em; }
.tabla-tiendas td:last-child, .tabla-tiendas th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-tiendas tr.mejor td { font-weight: var(--peso-semi); }
.tabla-tiendas .etiqueta-mejor {
  display: inline-block;
  margin-left: var(--esp-sm);
  padding: 2px 6px;
  border-radius: var(--radio-xs);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tabla-tiendas .etiqueta-mejor { color: var(--color-principal-fuerte); } }
:root[data-tema="oscuro"] .tabla-tiendas .etiqueta-mejor { color: var(--color-principal-fuerte); }

/* ============================== CATEGORÍAS (hub) ============================== */

.lista-categorias { display: grid; gap: var(--esp-md); grid-template-columns: 1fr; }
@media (min-width: 720px) { .lista-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.categoria-fila {
  display: flex;
  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: transform var(--mov-medio), box-shadow var(--mov-medio), border-color var(--mov-medio);
}
.categoria-fila:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
  border-color: color-mix(in srgb, var(--cat) 45%, var(--color-borde));
}
.categoria-fila__texto { min-width: 0; flex: 1; }
.categoria-fila__nombre { font-size: var(--t-base); font-weight: var(--peso-semi); }
.categoria-fila__cuenta { font-size: var(--t-xs); color: var(--color-texto-tenue); }
.categoria-fila__flecha { width: 20px; height: 20px; color: var(--color-texto-tenue); flex: 0 0 auto; }

/* ============================== CTA FINAL ============================== */

.cta-final {
  padding: var(--esp-2xl);
  border-radius: var(--radio-xl);
  background: var(--color-principal-suave);
  text-align: center;
}
.cta-final__titulo { font-size: var(--t-xl); font-weight: var(--peso-bold); }
.cta-final__texto { margin-top: var(--esp-sm); font-size: var(--t-sm); color: var(--color-texto-suave); }
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-md); justify-content: center; margin-top: var(--esp-lg); }


/* ---- Extensiones de las plantillas de conversión/usuario/contenido (fusionadas aquí; ya no existe src/plantillas/_extensiones.css) ---- */
/* ==========================================================================
   XolloYa — EXTENSIONES de las plantillas de conversión, usuario y contenido.
   Clases NUEVAS que usan mis páginas y que el sistema de diseño todavía no tiene.
   Se apoya en los tokens existentes (--esp-*, --radio-*, --color-*, --t-base…).
   Para integrar: pegar en assets/css/paginas.css (o enlazar este archivo después).
   ========================================================================== */

/* ---------- Tarjeta: CTA visible (petición del dueño: botón a la vista) ---- */
.tarjeta__accion {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--toque-min); margin-top: var(--esp-sm);
  border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-full);
  background: var(--color-superficie); color: var(--color-texto);
  font-size: var(--t-sm); font-weight: var(--peso-semi);
  transition: background var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido);
}
.tarjeta:hover .tarjeta__accion { border-color: var(--color-principal); color: var(--color-principal); }
.tarjeta__accion:hover { background: var(--color-principal-suave); }

/* ---------- Chips: contador y estado activo ---------- */
.chip__cuenta { font-size: var(--t-xs); color: var(--color-texto-tenue); }
.chip[aria-current="page"] { background: var(--color-principal); border-color: var(--color-principal); color: var(--color-sobre-principal); }
.chip[aria-current="page"] .chip__cuenta { color: inherit; opacity: .8; }
.chips__texto { flex: 0 0 auto; font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--color-texto-tenue); align-self: center; }

/* ---------- Ficha: descripción y descuento ---------- */
.ficha__descripcion { margin-top: var(--esp-md); color: var(--color-texto-suave); max-width: 56ch; }
.ficha__foto { position: relative; }
.ficha__descuento {
  position: absolute; top: var(--esp-md); left: var(--esp-md); z-index: 2;
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--esp-md);
  border-radius: var(--radio-full); background: var(--color-descuento); color: var(--color-sobre-descuento);
  font-size: var(--t-sm); font-weight: var(--peso-bold);
}

/* ---------- Compra fija (conversión) ----------
   El sistema de diseño ya trae .compra-fija; aquí solo se decide dónde se ve. */
@media (min-width: 1000px) { .compra-fija { display: none; } }

/* ---------- Filtros (selects) ---------- */
.filtros__titulo { display: flex; align-items: center; gap: var(--esp-xs); font-size: var(--t-sm); font-weight: var(--peso-bold); color: var(--color-texto-suave); margin-bottom: var(--esp-md); }
.filtros__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-md); }
@media (min-width: 720px) { .filtros__campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filtro__label { font-size: var(--t-xs); font-weight: var(--peso-bold); color: var(--color-texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.filtro__campo {
  width: 100%; min-width: 0; min-height: var(--toque-min); padding: 0 var(--esp-md);
  border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
  background: var(--color-superficie); color: var(--color-texto);
}
.filtro__campo:focus { border-color: var(--color-principal); }
.filtros__resumen { grid-column: 1 / -1; margin-top: var(--esp-md); padding-top: var(--esp-md); border-top: 1px solid var(--color-borde); color: var(--color-texto-suave); font-size: var(--t-sm); }
.filtros__resumen b { color: var(--color-texto); }

/* ---------- Tablas con scroll propio (nunca desbordan la pantalla) ---------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll .tabla-tiendas { min-width: 520px; }
.tabla-tiendas__dif { font-size: var(--t-xs); color: var(--color-texto-tenue); font-weight: var(--peso-normal); }
.tabla-tiendas__accion { text-align: right; white-space: nowrap; }

.tabla-comparativa { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); overflow: hidden; }
.tabla-comparativa th, .tabla-comparativa td { padding: var(--esp-md) var(--esp-lg); text-align: left; border-bottom: 1px solid var(--color-borde); font-size: var(--t-sm); }
.tabla-comparativa thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); background: var(--color-fondo); }
.tabla-comparativa tbody tr:last-child th, .tabla-comparativa tbody tr:last-child td { border-bottom: 0; }
.tabla-comparativa caption { caption-side: top; text-align: left; padding: var(--esp-md) var(--esp-lg) var(--esp-sm); color: var(--color-texto-tenue); font-size: var(--t-xs); }
.tabla-comparativa .gana { background: var(--color-principal-suave); font-weight: var(--peso-bold); color: var(--color-principal); }

/* ---------- Filas de enlace (relacionados, atajos) ---------- */
.enlace-ficha {
  display: flex; align-items: center; gap: var(--esp-md);
  padding: var(--esp-md) var(--esp-lg);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  background: var(--color-superficie); box-shadow: var(--sombra-xs);
  transition: border-color var(--mov-rapido), transform var(--mov-rapido);
}
.enlace-ficha + .enlace-ficha { margin-top: var(--esp-md); }
.enlace-ficha:hover { border-color: var(--color-principal); transform: translateY(-1px); }
.enlace-ficha__icono { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radio-full); background: var(--color-principal-suave); color: var(--color-principal); }
.enlace-ficha__icono svg { width: 22px; height: 22px; }
.enlace-ficha__texto { display: flex; flex-direction: column; min-width: 0; }
.enlace-ficha__texto b { font-size: var(--t-base); font-weight: var(--peso-semi); }
.enlace-ficha__texto span { font-size: var(--t-sm); color: var(--color-texto-suave); }
.enlace-ficha__flecha { margin-left: auto; width: 18px; height: 18px; color: var(--color-texto-tenue); flex: 0 0 auto; }
.bloque__sub { margin-top: 4px; color: var(--color-texto-suave); font-size: var(--t-sm); }
.bloque__nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-xs) var(--esp-sm); margin-top: var(--esp-md); color: var(--color-texto-tenue); font-size: var(--t-xs); }
.bloque__nota a { text-decoration: underline; }

/* ---------- Comparativa de dos productos ---------- */
.comparativa__columnas { display: grid; grid-template-columns: 1fr; gap: var(--esp-lg); }
@media (min-width: 860px) { .comparativa__columnas { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.comparativa__col { position: relative; display: flex; flex-direction: column; gap: var(--esp-sm); padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--sombra-xs); }
.comparativa__col--gana { border-color: var(--color-principal); box-shadow: 0 0 0 1px var(--color-principal), var(--sombra-sm); }
.comparativa__cinta { position: absolute; top: calc(-1 * var(--esp-md)); left: var(--esp-lg); display: inline-flex; align-items: center; gap: 4px; padding: 4px var(--esp-md); border-radius: var(--radio-full); background: var(--color-principal); color: var(--color-sobre-principal); font-size: var(--t-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .04em; }
.comparativa__etiqueta { font-size: var(--t-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-tenue); }
.comparativa__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: var(--esp-md); background: var(--color-foto); border: 1px solid var(--color-borde); border-radius: var(--radio-md); }
.comparativa__foto img { width: 100%; height: 100%; object-fit: contain; }
.comparativa__marca { font-size: var(--t-xs); font-weight: var(--peso-semi); color: var(--color-texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.comparativa__nombre { font-size: var(--t-md); }
.comparativa__nombre a:hover { text-decoration: underline; }
.comparativa__col .caja-precio { margin-top: var(--esp-sm); box-shadow: none; border: 0; padding: 0; background: none; }
.comparativa__vs { align-self: center; justify-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radio-full); background: var(--color-superficie); border: 1px solid var(--color-borde); font-weight: var(--peso-bold); color: var(--color-texto-suave); font-size: var(--t-sm); }
.comparativa__veredicto .comparativa__ganador { margin-top: var(--esp-md); font-size: var(--t-md); }
.comparativa__precio-ganador { display: block; margin-top: 4px; font-size: var(--t-2xl); font-weight: var(--peso-extra); color: var(--color-principal); letter-spacing: -.02em; }
.vs-mark { font-style: italic; color: var(--color-principal); padding: 0 4px; }

/* ---------- Índice de comparativas ----------
   Tarjeta VERTICAL: dos fotos reales arriba (una por producto, con el VS en
   medio), texto debajo. Antes era una fila con dos miniaturas de 52 px y el
   título recortado a dos líneas: 71 comparativas que parecían un listado.
   align-items:stretch + height:100% evita que una tarjeta más alta deje
   huecos raros en la rejilla. */
.pares { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--esp-md); align-items: stretch; }
.par { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--sombra-xs); transition: border-color var(--mov-rapido), transform var(--mov-rapido), box-shadow var(--mov-rapido); }
.par:hover, .par:focus-visible { border-color: var(--color-principal); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.par__fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--color-foto); border-bottom: 1px solid var(--color-borde); }
.par__foto { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--esp-sm); background: var(--color-foto); }
.par__fotos .par__foto + .par__foto { border-left: 1px solid var(--color-borde); }
.par__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radio-full); background: var(--color-principal); color: var(--color-sobre-principal); font-size: 11px; font-weight: var(--peso-extra); letter-spacing: .04em; box-shadow: 0 1px 0 3px var(--color-superficie); }
.par__cuerpo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: var(--esp-md); }
.par__titulo { font-size: var(--t-sm); font-weight: var(--peso-semi); line-height: 1.35; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.par__precios { font-size: var(--t-sm); font-weight: var(--peso-semi); }
.par__precios span { font-weight: var(--peso-normal); color: var(--color-texto-tenue); }
.par__resumen { font-size: var(--t-xs); line-height: 1.5; color: var(--color-texto-suave); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.par__pie { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--esp-sm); font-size: var(--t-xs); font-weight: var(--peso-semi); color: var(--color-principal); }

/* ---------- Entradas de contenido (artículos y guías) ----------
   Tarjeta VERTICAL con foto grande arriba. Antes la foto era un cuadro de
   84 px a la izquierda del texto: en /guias/ y /blog/ eso se leía como una
   lista de texto con un icono. Título y resumen se cortan con line-clamp
   RESPETANDO palabras (nunca a media palabra) y la rejilla estira todas las
   tarjetas a la misma altura para que no queden huecos. */
.rejilla-entradas { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: var(--esp-md); align-items: stretch; }
.entrada { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--sombra-xs); transition: border-color var(--mov-rapido), transform var(--mov-rapido), box-shadow var(--mov-rapido); }
.entrada:hover, .entrada:focus-visible { border-color: var(--color-principal); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.entrada__media { flex: 0 0 auto; display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0; border-bottom: 1px solid var(--color-borde); background: var(--color-foto); }
.entrada__img { width: 100%; height: 100%; object-fit: contain; padding: var(--esp-md); }
.entrada__vacia { color: var(--color-texto-tenue); }
.entrada__cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; padding: var(--esp-md); }
.entrada__cat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-principal); }
.entrada__titulo { font-size: var(--t-md); font-weight: var(--peso-semi); line-height: 1.3; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entrada__resumen { font-size: var(--t-sm); line-height: 1.5; color: var(--color-texto-suave); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entrada__meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--esp-sm); font-size: var(--t-xs); color: var(--color-texto-tenue); }

/* ---------- Portada de guía y comparativa (cabecera de la página) ----------
   La foto se muestra ENTERA (object-fit:contain) sobre fondo claro: recortarla
   a sangre cortaría el producto. El pie dice de dónde sale la imagen, que es
   lo que la hace verificable. */
.portada { margin: 0 0 var(--esp-xl); }
.portada__img { display: block; width: 100%; height: auto; max-height: 420px; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--esp-md); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-foto); }
.portada__pie { margin-top: var(--esp-sm); font-size: var(--t-xs); line-height: 1.45; color: var(--color-texto-tenue); }
.portada--en-linea { margin: var(--esp-xl) 0 var(--esp-2xl); }
/* Comparativa: las dos fotos reales, enfrentadas */
.portada-pareja { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-sm); margin: 0 0 var(--esp-xl); padding: var(--esp-sm); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); }
.portada-pareja__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 300px; object-fit: contain; padding: var(--esp-sm); border-radius: var(--radio-md); background: var(--color-foto); }
.portada-pareja__vs { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radio-full); background: var(--color-principal); color: var(--color-sobre-principal); font-size: 12px; font-weight: var(--peso-extra); letter-spacing: .04em; }

/* ---------- Artículo: ancho de lectura cómodo (≈70 caracteres) ---------- */
.contenedor--lectura { max-width: 720px; }
.articulo__cabecera { margin-bottom: var(--esp-xl); }
.articulo__titulo { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; letter-spacing: -.03em; }
.articulo__entradilla { margin-top: var(--esp-md); font-size: var(--t-md); color: var(--color-texto-suave); }
.articulo__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--esp-md); font-size: var(--t-xs); color: var(--color-texto-tenue); }
.indice { margin-bottom: var(--esp-xl); padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); }
.indice__titulo { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); margin-bottom: var(--esp-md); }
.indice ol { display: grid; gap: 6px; counter-reset: t; padding-left: 0; }
.indice li { counter-increment: t; }
.indice li::before { content: counter(t) ". "; color: var(--color-principal); font-weight: var(--peso-bold); }
.indice a { text-decoration: underline; text-underline-offset: 3px; }
.indice a:hover { color: var(--color-principal); }
.prosa { max-width: 70ch; font-size: 17px; line-height: 1.7; }
.prosa p { margin-bottom: var(--esp-lg); }
.prosa h2 { margin: var(--esp-2xl) 0 var(--esp-md); font-size: var(--t-xl); scroll-margin-top: 120px; }
.prosa__lista li { margin-bottom: var(--esp-sm); }
.prosa__figura { margin: var(--esp-xl) 0; }
.prosa__figura img { border-radius: var(--radio-lg); border: 1px solid var(--color-borde); background: var(--color-foto); }
.prosa__figura figcaption { margin-top: var(--esp-sm); font-size: var(--t-xs); color: var(--color-texto-tenue); }
.prosa__productos { margin: var(--esp-2xl) 0; padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-fondo); }
.prosa__productos-titulo { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); margin-bottom: var(--esp-lg); }
.prosa__productos .rejilla-ofertas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ---------- Autenticación y ventajas ---------- */
.auth { display: grid; grid-template-columns: 1fr; gap: var(--esp-2xl); max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) { .auth { grid-template-columns: 1fr .85fr; max-width: var(--ancho-max); align-items: start; } }
.auth__caja { padding: var(--esp-2xl); border: 1px solid var(--color-borde); border-radius: var(--radio-xl); background: var(--color-superficie); box-shadow: var(--sombra-sm); }
.auth__titulo { font-size: var(--t-2xl); }
.auth__sub { margin-top: var(--esp-sm); color: var(--color-texto-suave); }
.auth__separador { display: flex; align-items: center; gap: var(--esp-md); margin: var(--esp-lg) 0; color: var(--color-texto-tenue); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }
.auth__separador::before, .auth__separador::after { content: ""; flex: 1; height: 1px; background: var(--color-borde); }
.auth__pie { margin-top: var(--esp-lg); text-align: center; font-size: var(--t-sm); color: var(--color-texto-suave); }
.auth__demo { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--esp-md); font-size: var(--t-xs); color: var(--color-texto-tenue); }
.enlace-simple { color: var(--color-texto); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--peso-semi); }
.enlace-simple:hover { color: var(--color-principal); }

/* Directorio de marcas: el nombre y el número tienen espacios propios. */
.marcas__herramientas { display: grid; gap: var(--esp-xl); margin-bottom: var(--esp-2xl); }
.marcas__herramientas .campo { max-width: 560px; }
.marcas__letras { display: flex; flex-wrap: wrap; gap: var(--esp-xs); }
.marcas__letras a {
  display: grid; place-items: center; min-width: var(--toque-min); min-height: var(--toque-min);
  padding: var(--esp-sm); border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
  background: var(--color-superficie); color: var(--color-texto); font-weight: var(--peso-semi);
}
.marcas__letras a:hover { background: var(--color-principal-suave); color: var(--color-principal); }
.marcas__letra { margin-top: var(--esp-2xl); scroll-margin-top: var(--esp-4xl); }
.marcas__letra-titulo { margin-bottom: var(--esp-lg); font-size: var(--t-2xl); color: var(--color-texto); }
.marcas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--esp-sm); }
.marcas__lista li { min-width: 0; }
.marcas__lista a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-lg);
  min-height: 56px; height: 100%; padding: var(--esp-md) var(--esp-lg);
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  background: var(--color-superficie); color: var(--color-texto); overflow-wrap: anywhere;
  font-size: var(--t-sm); font-weight: var(--peso-medio);
}
.marcas__lista a:hover { border-color: var(--color-principal); background: var(--color-principal-suave); }
.marcas__cuenta { flex: 0 0 auto; color: var(--color-texto-tenue); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.ventajas { padding: var(--esp-2xl); border: 1px solid var(--color-borde); border-radius: var(--radio-xl); background: var(--color-principal-suave); }
.ventajas__titulo { font-size: var(--t-xl); }
.ventajas__sub { margin-top: var(--esp-xs); color: var(--color-texto-suave); font-size: var(--t-sm); }
.ventajas__lista { display: grid; gap: var(--esp-lg); margin-top: var(--esp-xl); }
.ventajas__item { display: flex; gap: var(--esp-md); align-items: flex-start; }
.ventajas__icono { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radio-full); background: var(--color-superficie); color: var(--color-principal); }
.ventajas__icono svg { width: 20px; height: 20px; }
.ventajas__texto { display: flex; flex-direction: column; }
.ventajas__texto b { font-size: var(--t-base); }
.ventajas__texto span { font-size: var(--t-sm); color: var(--color-texto-suave); }
.ventajas__nota { display: flex; align-items: center; gap: 6px; margin-top: var(--esp-xl); font-size: var(--t-xs); color: var(--color-texto-suave); }

/* ---------- Formularios ---------- */
.form { display: grid; gap: var(--esp-lg); margin-top: var(--esp-xl); }
.form__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-md); flex-wrap: wrap; font-size: var(--t-sm); }
.form__aviso { font-size: var(--t-sm); color: var(--color-descuento); }
.form__aviso.ok { color: var(--color-principal); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--color-texto-suave); }
.campo { display: grid; gap: 6px; }
.campo__label { font-size: var(--t-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-tenue); }
.campo__control { display: flex; align-items: center; gap: var(--esp-sm); min-height: 50px; padding: 0 var(--esp-md); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); color: var(--color-texto-suave); transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.campo__control:focus-within { border-color: var(--color-principal); box-shadow: 0 0 0 3px var(--color-principal-suave); }
.campo__input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-texto); font-size: var(--t-base); padding: 12px 0; }
.campo__input:focus { outline: none; }
.campo__ojo { display: grid; place-items: center; width: var(--toque-min); height: var(--toque-min); color: var(--color-texto-tenue); }
.campo__ojo[aria-pressed="true"] { color: var(--color-principal); }
.campo__error { font-size: var(--t-xs); color: var(--color-descuento); min-height: 1em; }
.campo.error .campo__control { border-color: var(--color-descuento); }
.campo.ok .campo__control { border-color: var(--color-principal); }
.campo--check .campo__control--check { align-items: flex-start; padding: var(--esp-md); min-height: 0; }
.fuerza { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--color-texto-tenue); }
.fuerza i { width: 34px; height: 5px; border-radius: var(--radio-full); background: var(--color-borde); }
.fuerza i.on { background: var(--color-principal); }
.fuerza[data-nivel="1"] i.on { background: var(--color-aviso-texto); }

/* ---------- Cuenta: resumen, pestañas y datos ---------- */
.cuenta { display: flex; align-items: center; gap: var(--esp-lg); flex-wrap: wrap; margin-bottom: var(--esp-xl); }
.cuenta__avatar { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--radio-full); background: var(--color-principal); color: var(--color-sobre-principal); font-size: var(--t-xl); font-weight: var(--peso-bold); }
.cuenta__identidad { min-width: 0; }
.cuenta__nombre { font-size: var(--t-xl); font-weight: var(--peso-bold); }
.cuenta__email { color: var(--color-texto-suave); font-size: var(--t-sm); }
.cuenta .boton { margin-left: auto; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-md); margin-bottom: var(--esp-xl); }
.resumen__caja { display: flex; flex-direction: column; gap: 4px; padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--sombra-xs); }
.resumen__caja--destacada { border-color: var(--color-principal); background: var(--color-principal-suave); }
.resumen__valor { font-size: var(--t-2xl); font-weight: var(--peso-extra); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.resumen__caja--destacada .resumen__valor { color: var(--color-principal); }
.resumen__etiqueta { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--color-texto-suave); }
.tabs { display: flex; gap: var(--esp-sm); overflow-x: auto; padding-bottom: var(--esp-sm); border-bottom: 1px solid var(--color-borde); margin-bottom: var(--esp-xl); }
.tabs__boton { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque-min); padding: 0 var(--esp-lg); border-radius: var(--radio-full); border: 1px solid transparent; color: var(--color-texto-suave); font-size: var(--t-sm); font-weight: var(--peso-semi); white-space: nowrap; }
.tabs__boton:hover { background: var(--color-hover); color: var(--color-texto); }
.tabs__boton--activo { background: var(--color-principal); border-color: var(--color-principal); color: var(--color-sobre-principal); }
.tabs__boton--activo:hover { background: var(--color-principal-fuerte); color: var(--color-sobre-principal); }
.panel > .bloque__titulo { margin-bottom: var(--esp-xs); }
.datos { display: grid; gap: var(--esp-sm); margin-top: var(--esp-lg); }
.dato { display: flex; align-items: center; gap: var(--esp-md); flex-wrap: wrap; padding: var(--esp-md) var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); }
.dato__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-tenue); min-width: 180px; }
.dato__valor { font-weight: var(--peso-semi); }
.dato .enlace-simple, .dato .boton { margin-left: auto; }

/* ---------- Alertas de precio ---------- */
.alerta-form { display: grid; grid-template-columns: 1fr; gap: var(--esp-md); align-items: end; padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); box-shadow: var(--sombra-xs); }
@media (min-width: 760px) { .alerta-form { grid-template-columns: 1.4fr 1fr auto; } }
.alerta-form .form__aviso { grid-column: 1 / -1; }
.alertas { display: grid; gap: var(--esp-md); }
.alerta { display: flex; align-items: center; gap: var(--esp-md); padding: var(--esp-md); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); }
.alerta__enlace { display: flex; align-items: center; gap: var(--esp-md); min-width: 0; flex: 1; }
.alerta__foto { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--color-borde); border-radius: var(--radio-sm); background: var(--color-foto); }
.alerta__foto img { width: 100%; height: 100%; object-fit: contain; }
.alerta__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alerta__nombre { font-size: var(--t-base); font-weight: var(--peso-semi); }
.alerta__ahora { font-size: var(--t-sm); color: var(--color-texto-suave); }
.alerta__objetivo { font-size: var(--t-sm); font-weight: var(--peso-bold); color: var(--color-principal); }
.alerta__quitar { flex: 0 0 auto; }
.buscador-paginacion { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--esp-md); margin-top: var(--esp-xl); }
.alerta--alcanzada { border-color: var(--color-principal); background: var(--color-principal-suave); }
.alerta [data-reintentar-alerta] { flex: 0 0 auto; }
@media (max-width: 480px) {
  .alerta { flex-wrap: wrap; }
  .alerta [data-reintentar-alerta] { margin-left: auto; }
}

/* ---------- Precios que sigo (perfil) ---------- */
.precios-seguidos { display: grid; gap: var(--esp-sm); }
.precio-seguido { display: flex; align-items: center; gap: var(--esp-md); flex-wrap: wrap; padding: var(--esp-md) var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); }
.precio-seguido__nombre { flex: 1; min-width: 180px; font-weight: var(--peso-semi); }
.precio-seguido__ahora { font-weight: var(--peso-extra); font-variant-numeric: tabular-nums; }
.precio-seguido__baja { font-size: var(--t-xs); color: var(--color-principal); }

/* ---------- Cupones ---------- */
.cupon__acciones { display: flex; gap: var(--esp-sm); align-items: center; flex-wrap: wrap; margin-top: var(--esp-md); }
.cupon__automatico { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--color-principal); }
.boton--codigo { border-style: dashed; border-color: var(--color-principal); color: var(--color-principal); background: var(--color-principal-suave); }
.boton--codigo.copiado { background: var(--color-principal); border-color: var(--color-principal); color: var(--color-sobre-principal); border-style: solid; }

/* Aviso de formulario con clase .error (usa el color de descuento, AA sobre blanco) */
.form__aviso.error { color: var(--color-descuento); }

/* ==========================================================================
   MÓVIL (≤719px): nada se corta ni desborda. Las tablas se ajustan al ancho y,
   si no caben, hacen scroll dentro de su caja — nunca arrastran la página.
   ========================================================================== */
@media (max-width: 719px) {
  .tabla-scroll > .tabla-tiendas,
  .tabla-scroll > .tabla-comparativa { min-width: 0; }
  .tabla-tiendas th, .tabla-tiendas td { padding: var(--esp-sm) var(--esp-md); font-size: var(--t-xs); }
  .tabla-tiendas td:first-child { font-weight: var(--peso-semi); }
  .tabla-tiendas__accion { display: none; }        /* el botón grande ya está arriba y fijo abajo */
  .tabla-comparativa th, .tabla-comparativa td { padding: var(--esp-sm) var(--esp-md); font-size: var(--t-xs); }
  .tabla-comparativa .gana { font-size: var(--t-sm); }
  .filtros__campos { grid-template-columns: 1fr; }
  .filtro__campo { font-size: var(--t-sm); }
  .resumen { grid-template-columns: 1fr 1fr; }
  .resumen__caja--destacada { grid-column: 1 / -1; }
  .auth__caja, .ventajas { padding: var(--esp-lg); }
  .alerta-form { grid-template-columns: 1fr; }
  .datos .dato { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dato__label { min-width: 0; }
  .dato .enlace-simple, .dato .boton { margin-left: 0; }
  .prosa { font-size: 16.5px; }
  .prosa__productos { padding: var(--esp-md); }
}
@media (max-width: 400px) {
  .filtros { padding: var(--esp-md); }
  .comparativa__nombre { font-size: var(--t-base); }
  .articulo__titulo { font-size: 26px; }
}

/* ==========================================================================
   QA · ÁREAS TÁCTILES EN COMPARATIVA (11-oct-2026)
   Medido con CDP a 390 px: los enlaces que dan nombre a cada producto medían
   19 px de alto (h2.comparativa__nombre > a → 205×19) y los de la cabecera de
   la tabla 15-17 px (table.tabla-comparativa thead a → 37×15), por debajo del
   mínimo AA de 24 px. Ahora los dos son objetivos de 44 px de alto.
   Se centra el texto en vertical para que el alto extra no deje el rótulo
   descolgado arriba (display:flex + align-items:center).
   ========================================================================== */
.comparativa__nombre > a {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
}
.tabla-comparativa thead a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  /* Las etiquetas cortas ("SONY"/"Bose") medían 37-42 px de ancho: el padding
     amplía el área de toque a ≥44 y el margen negativo deja la caja donde estaba. */
  padding-inline: var(--esp-sm);
  margin-inline: calc(-1 * var(--esp-sm));
}

/* --------------------------------------------------------------------------
   QA · RONDA 2 (11-oct-2026) — controles que seguían por debajo de 44 px
   · Casilla "recordarme" (/entrar/): el <input> mide 13×13 y su <label> ~20 px
     de alto → el objetivo real era diminuto. Se sube el LABEL a 44 px (el
     label es el objetivo: al pulsarlo se marca la casilla). El <input> nativo
     se deja de su tamaño: agrandarlo no aporta y descoloca el formulario.
   · Índice del artículo: los enlaces medían 182×19 px → 44 px de alto.
   -------------------------------------------------------------------------- */
.check { min-height: var(--toque-min); }
.campo--check .campo__control--check { min-height: var(--toque-min); }

/* ==========================================================================
   PANEL DE MENÚ · bloque de usuario, apariencia y navegación agrupada
   (11-oct-2026) Antes era una rejilla suelta de 8 enlaces donde el último
   quedaba cojo: de ahí el hueco raro que se veía al final del panel.
   ========================================================================== */
.menu-usuario {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  padding: var(--esp-md);
  margin-bottom: var(--esp-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  min-height: var(--toque-min);
  text-decoration: none;
}
.menu-usuario:hover { border-color: var(--color-principal); }
.menu-usuario__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
.menu-usuario__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-usuario__nombre { font-size: var(--t-md); font-weight: var(--peso-semi); color: var(--color-texto); }
.menu-usuario__sub { font-size: var(--t-xs); color: var(--color-texto-suave); }
.menu-usuario__flecha { margin-left: auto; color: var(--color-texto-suave); flex: 0 0 auto; }

.menu-usuario__accesos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-sm);
  margin-bottom: var(--esp-lg);
}
.menu-usuario__accesos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: var(--esp-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
  text-decoration: none;
  text-align: center;
}
.menu-usuario__accesos a:hover { border-color: var(--color-principal); color: var(--color-principal); }
.menu-usuario__accesos .ico { color: var(--color-principal); }

.menu-tema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--esp-sm) var(--esp-md);
  margin-bottom: var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-weight: var(--peso-semi);
  cursor: pointer;
}
.menu-tema__izq { display: inline-flex; align-items: center; gap: var(--esp-sm); }
.menu-tema__estado { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--color-principal); }
.menu-tema:hover { border-color: var(--color-principal); }

.panel-menu__grupo {
  margin: var(--esp-md) 0 var(--esp-sm);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-texto-suave);
}
.panel-menu__grupo:first-of-type { margin-top: 0; }

/* Índice del artículo: número y enlace en la MISMA línea, con el enlace a 44 px.
   (Corregido el 11-oct: `display:inline-flex` en el enlace rompía el índice —
   el número se quedaba en su propia línea y el texto se descolgaba.) */
.indice ol { gap: 0; }
.indice li { display: flex; align-items: center; gap: 6px; }
.indice li::before { content: counter(t) "."; flex: 0 0 auto; }
.indice a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
}

/* ==========================================================================
   CONVERSIÓN · Comparativa: escenario con CTA (11-oct-2026)
   Cada escenario ("si ya juegas en PlayStation...") lleva su botón a 44 px
   que lleva a la ficha del ganador. Antes era un enlace de texto de 17 px
   dentro de la frase: mal objetivo de toque y peor conversión.
   ========================================================================== */
.escenario {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  flex-wrap: wrap;
}
.escenario__texto { flex: 1 1 260px; min-width: 0; }
.escenario__cta { margin-left: auto; flex: 0 0 auto; }

/* ==========================================================================
   CONVERSIÓN · Señales de confianza bajo el CTA de compra
   ========================================================================== */
.ventajas-mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-md) var(--esp-lg);
  margin-top: var(--esp-md);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde);
}
.ventajas-mini span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  color: var(--color-texto-suave);
}
.ventajas-mini svg { width: 15px; height: 15px; color: var(--color-principal); flex: 0 0 auto; }

/* Los avisos dentro de un bloque de contenido (notas de ficha y veredicto) */
.bloque__texto { color: var(--color-texto-suave); }
.bloque__texto + .bloque__texto { margin-top: var(--esp-md); }

/* Ficha editorial: la tabla de características se lee como una ficha técnica */
.tabla-specs th {
  width: 42%;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
  text-transform: none;
  letter-spacing: 0;
}
.tabla-specs td { font-size: var(--t-sm); color: var(--color-texto); }
/* La tabla de características NO es un comparador de precios: el valor va a la
   izquierda, no pegado al borde derecho (lo heredaba de .tabla-tiendas). */
.tabla-specs td:last-child,
.tabla-specs th:last-child { text-align: left; }

/* El precio "consulta en la tienda" no debe competir con un precio real */


/* CONVERSIÓN · dos acciones de usuario a la misma altura (guardar + alerta) */
.acciones-pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-sm);
}
@media (max-width: 360px) { .acciones-pareja { grid-template-columns: 1fr; } }
.acciones-pareja .boton { width: 100%; padding-inline: var(--esp-md); }

/* ==========================================================================
   PAGINACIÓN de /ofertas/ (11-oct-2026)
   Antes la página listaba los 120 productos de golpe: scroll sin fin.
   ========================================================================== */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-md);
  margin-top: var(--esp-2xl);
  padding-top: var(--esp-lg);
  border-top: 1px solid var(--color-borde);
  flex-wrap: wrap;
}
.paginacion__actual {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.paginacion .boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque-min);
}
.paginacion .boton.espejo { visibility: hidden; }
.ico.girado { transform: rotate(180deg); }

/* ==========================================================================
   CUPONES · índice por comercio y confirmación al copiar (11-oct-2026)
   ========================================================================== */
.rejilla-comercios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--esp-sm);
}
/* Ficha de comercio: logo + nombre + nº de cupones, en una fila compacta que
   se lee de un vistazo. Antes era solo texto y no había forma de distinguir
   una tienda de otra sin leer. */
.comercio-cupon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--esp-md);
  min-height: 56px;
  padding: var(--esp-sm) var(--esp-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  text-decoration: none;
}
.comercio-cupon__logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xs);
  background: var(--color-superficie);
  color: var(--color-texto-tenue);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
}
.comercio-cupon__logo--inicial { border-style: dashed; background: var(--color-superficie-2); }
.comercio-cupon__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  background: var(--color-superficie);
}
.comercio-cupon__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* El nombre del comercio es un enlace dentro de la tarjeta de cupón: necesita
   área táctil de verdad (medido: salía a ~17 px y el barrido lo marcaba). */
.rejilla-cupones .cupon__tienda {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-weight: var(--peso-semi);
}
.comercio-cupon:hover { border-color: var(--color-principal); }
.comercio-cupon__nombre {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
  /* "La Tienda de las Licencias" ocupaba tres líneas y descuadraba la fila
     entera: tres líneas como máximo (en escritorio nunca pasa de dos) y puntos
     suspensivos solo si el nombre es realmente kilométrico. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.comercio-cupon__cuenta { font-size: var(--t-xs); color: var(--color-texto-suave); }
.comercio-cupon:hover .comercio-cupon__nombre { color: var(--color-principal); }

.cupon__accion--ok { background: var(--color-principal); color: var(--color-sobre-principal); border-color: var(--color-principal); }

/* ==========================================================================
   Tarjeta de cupón (rediseño 20-oct-2026).
   Tres ideas, en este orden:
     1. La MARCA del comercio se ve (logo real; si falta, inicial discreta).
     2. El DESCUENTO es el protagonista (rojo de descuento, grande).
     3. CÓDIGO y OFERTA no se confunden: etiqueta y botón distintos. La fecha
        lejana deja de ocupar el sitio de honor: pasa a pie, en gris pequeño.
   ========================================================================== */
.cupon {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--esp-sm);
  min-width: 0;
}
.cupon__cabecera { display: flex; align-items: center; gap: var(--esp-md); min-width: 0; }
/* Un botón con un código largo dentro de una rejilla imponía su ancho a TODA
   la columna y la página se salía en móvil: los hijos pueden encogerse. */
.rejilla-cupones > * { min-width: 0; }
.cupon__texto { overflow-wrap: anywhere; }

/* Logo del comercio. La inicial va DEBAJO del logo: si la imagen no carga (o
   el comercio no tiene logo), se queda una inicial sobria en vez de un hueco. */
.cupon__logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
}
.cupon__logo--inicial { border-style: dashed; background: var(--color-superficie-2); }
.cupon__inicial {
  font-size: var(--t-lg);
  font-weight: var(--peso-semi);
  letter-spacing: .02em;
  color: var(--color-texto-suave);
}
.cupon__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  background: var(--color-superficie);
}
.cupon__quien { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1 1 auto; }

/* Etiqueta de TIPO: verde = hay código que copiar; neutra = es una oferta. */
.cupon__tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radio-full);
  font-size: var(--t-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: .02em;
  line-height: 1.5;
}
.cupon__tipo--codigo { background: var(--color-principal-suave); border-color: #C9E3D6; color: var(--color-principal-fuerte); }
.cupon__tipo--oferta { background: var(--color-superficie-2); border-color: var(--color-borde); color: var(--color-texto-suave); }
.cupon--codigo { border-left: 3px solid var(--color-principal); }
.cupon--oferta { border-left: 3px solid var(--color-borde-fuerte); }

/* El descuento, lo primero que se lee. Antes era una caja FIJA de 64×64
   (componentes.css) y las etiquetas largas asomaban cortadas por el borde:
   ahora es una pastilla que se ajusta al texto. */
.cupon__descuento {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
  text-align: center;
  background: var(--color-descuento-suave);
  color: var(--color-descuento);
  font-size: var(--t-md);
  border-radius: var(--radio-sm);
}

/* Pie: la fecha (discreta) a la izquierda y la acción a la derecha. */
.cupon__pie { display: flex; align-items: center; gap: var(--esp-sm); flex-wrap: wrap; margin-top: auto; }
.cupon__caduca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-2xs);
  color: var(--color-texto-tenue);
  overflow-wrap: anywhere;
}
.cupon__caduca--pronto { color: var(--color-descuento); font-weight: var(--peso-semi); }
.cupon__codigo {
  padding: 1px 6px;
  border: 1px dashed currentColor;
  border-radius: var(--radio-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-2xs);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.cupon__accion {
  align-self: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque-min);
}
/* Copiar es la acción fuerte (hay algo que llevarse); «Ver la oferta» es
   navegación, así que va en botón normal y sin icono de check. */
.cupon__accion--codigo { background: var(--color-principal); border-color: var(--color-principal); color: var(--color-sobre-principal); font-weight: var(--peso-semi); }
.cupon__accion--codigo:hover { background: var(--color-principal-fuerte); border-color: var(--color-principal-fuerte); }
.cupon__accion--oferta { color: var(--color-texto-suave); }

/* ==========================================================================
   Invitación de cuenta en /perfil/ (11-oct-2026)
   ========================================================================== */
.invitacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-xl);
}
@media (min-width: 900px) { .invitacion { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.invitacion__caja {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  padding: var(--esp-xl);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
}
.invitacion__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--esp-sm);
  border-radius: 50%;
  background: var(--color-principal-suave);
  color: var(--color-principal);
}
.invitacion__titulo { font-size: var(--t-2xl); font-weight: var(--peso-bold); color: var(--color-texto); }
.invitacion__texto { font-size: var(--t-md); color: var(--color-texto-suave); max-width: 48ch; }
.invitacion__acciones { display: grid; gap: var(--esp-sm); margin-top: var(--esp-md); }
.invitacion__separador { display: flex; align-items: center; gap: var(--esp-md); margin: var(--esp-sm) 0; color: var(--color-texto-tenue); font-size: var(--t-sm); }
.invitacion__separador::before,
.invitacion__separador::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-borde); }
.invitacion__ventajas { display: grid; gap: var(--esp-md); list-style: none; margin: 0; padding: 0; }
.invitacion__ventajas li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--esp-md);
  align-items: center;
  padding: var(--esp-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
}
.invitacion__ventajas .ico { grid-row: 1 / 3; color: var(--color-principal); }
.invitacion__ventajas b { font-size: var(--t-md); color: var(--color-texto); }
.invitacion__ventajas span { font-size: var(--t-sm); color: var(--color-texto-suave); }

/* ==========================================================================
   ALERTAS · pasos, sugerencias y pastilla de cuenta (11-oct-2026)
   ========================================================================== */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-md);
  list-style: none;
  margin: var(--esp-xl) 0 0;
  padding: 0;
}
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--esp-md);
  row-gap: 2px;
  align-items: center;
  padding: var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
}
.paso__num { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-principal); color: var(--color-sobre-principal); font-weight: var(--peso-bold); }
.paso__icono { display: none; }
.paso__titulo { font-size: var(--t-md); color: var(--color-texto); }
.paso__texto { font-size: var(--t-sm); color: var(--color-texto-suave); }

.sugerencias {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-sm);
}
@media (min-width: 700px) { .sugerencias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sugerencias { grid-template-columns: repeat(3, 1fr); } }
.sugerencia {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--esp-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sugerencia:hover { border-color: var(--color-principal); }
.sugerencia__foto { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radio-sm); overflow: hidden; background: var(--color-fondo); }
.sugerencia__foto img { width: 100%; height: 100%; object-fit: contain; }
.sugerencia__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sugerencia__txt b { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--color-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sugerencia__txt span { font-size: var(--t-xs); color: var(--color-texto-suave); }
.sugerencia__pct { flex: 0 0 auto; font-size: var(--t-xs); font-weight: var(--peso-bold); color: var(--color-principal); }

.cuenta-pastilla {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  vertical-align: middle;
}
/* Tipos de comercio (cupones por sector) */
.rejilla-comercios--tipo { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.comercio-cupon--tipo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.comercio-cupon--tipo .comercio-cupon__nombre { display: inline-flex; align-items: center; gap: 6px; line-height: 1.25; }
.comercio-cupon--tipo .ico { flex: 0 0 auto; color: var(--color-principal); }

/* ==========================================================================
   Tira de accesos rápidos por comercio (/cupones/, 20-oct-2026)
   Lo primero que se ve tras el titular: 29 tiendas con su logo y su número
   de cupones. Sirve para responder de un vistazo a «¿cuántas tiendas hay?».
   ========================================================================== */
.accesos {
  margin-top: var(--esp-xl);
  padding: var(--esp-lg);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
}
.accesos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-xs) var(--esp-md);
  margin-bottom: var(--esp-md);
}
.accesos__titulo { font-size: var(--t-lg); font-weight: var(--peso-bold); color: var(--color-texto); }
.accesos__sub { font-size: var(--t-sm); color: var(--color-texto-suave); }
.accesos__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--esp-sm);
}
/* En móvil no caben 29 fichas de golpe: tira horizontal con carril propio. */
@media (max-width: 640px) {
  .accesos { padding: var(--esp-md); }
  .accesos__rejilla {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, max-content);
    overflow-x: auto;
    padding-bottom: var(--esp-xs);
    scroll-snap-type: x proximity;
  }
  .accesos__rejilla .comercio-cupon { scroll-snap-align: start; }
}
.accesos .bloque__nota { margin-top: var(--esp-md); }

/* Cabecera de una página con el logo del comercio en vez del icono genérico. */
.pagina-icono--logo { overflow: hidden; border: 1px solid var(--color-borde); background: var(--color-superficie); }
.pagina-icono--logo img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }

/* ==========================================================================
   PORTADA PREMIUM (11-oct-2026)
   Héroe sobre fondo CREMA con un collage de FOTOS REALES de producto (antes
   era un dibujo de cuatro cuadraditos), tira de confianza, mosaico de
   categorías con imagen y un segundo carril de ofertas.
   Todo acotado a la portada: .mosaico__item también se usa en el menú.
   ========================================================================== */
.hero {
  background: linear-gradient(180deg, var(--color-crema) 0%, var(--color-crema-2) 100%);
  border-bottom: 1px solid var(--color-crema-borde);
}
.hero__col { display: flex; flex-direction: column; gap: var(--esp-md); }
.hero__titulo em { font-style: normal; color: var(--color-principal); }

.boton--crema { background: var(--color-superficie); border-color: var(--color-crema-borde); color: var(--color-texto); }
.boton--crema:hover { border-color: var(--color-principal); color: var(--color-principal); }

/* Collage: cuatro fichas con la foto del producto y su precio real */
.hero__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-md);
  align-content: center;
}
@media (min-width: 900px) { .hero__collage { gap: var(--esp-lg); } }
.hero__ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--esp-md);
  border: 1px solid var(--color-crema-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-md);
  text-decoration: none;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio);
}
/* Un poco descolocadas a propósito: da vida sin romper la rejilla */
.hero__ficha:nth-child(1) { transform: rotate(-1.4deg) translateY(-8px); }
.hero__ficha:nth-child(2) { transform: rotate(1.2deg) translateY(8px); }
.hero__ficha:nth-child(3) { transform: rotate(1deg) translateY(-4px); }
.hero__ficha:nth-child(4) { transform: rotate(-1deg) translateY(12px); }
.hero__ficha:hover,
.hero__ficha:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: var(--sombra-lg); z-index: 2; }
.hero__ficha-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radio-md);
  background: var(--color-superficie-2);
}
.hero__ficha-foto img { width: 100%; height: 100%; object-fit: contain; }
.hero__ficha-pct {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: var(--radio-full);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-xs);
  font-weight: var(--peso-extra);
  line-height: 1.7;
}
.hero__ficha-precio { font-size: var(--t-md); font-weight: var(--peso-bold); color: var(--color-texto); }

/* Tira de confianza bajo el héroe */
.confianza {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-lg);
  list-style: none;
  margin: 0;
  padding: var(--esp-xl) 0;
}
@media (min-width: 700px) { .confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .confianza { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Colocación EXPLÍCITA: si se deja automática, el <span> cae en una tercera
   columna implícita y el texto se parte palabra por palabra (medido). */
.confianza li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--esp-md); row-gap: 2px; align-items: center; }
.confianza .ico { grid-column: 1; grid-row: 1 / 3; width: 24px; height: 24px; color: var(--color-principal); }
.confianza b { grid-column: 2; grid-row: 1; font-size: var(--t-sm); color: var(--color-texto); }
.confianza span { grid-column: 2; grid-row: 2; font-size: var(--t-xs); color: var(--color-texto-suave); line-height: 1.45; }

/* Franja crema para alternar secciones */
.seccion--crema { background: var(--color-crema); border-top: 1px solid var(--color-crema-borde); border-bottom: 1px solid var(--color-crema-borde); }

/* Mosaico de categorías CON IMAGEN (solo portada) */
.mosaico--fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-md); }
@media (min-width: 640px) { .mosaico--fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mosaico--fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .mosaico--fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mosaico--fotos .mosaico__item {
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-sm);
  padding: var(--esp-sm);
  border-radius: var(--radio-lg);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), transform var(--mov-rapido);
}
.mosaico--fotos .mosaico__item:hover,
.mosaico--fotos .mosaico__item:focus-visible { border-color: var(--color-principal); box-shadow: var(--sombra-md); transform: translateY(-3px); }
.mosaico--fotos .mosaico__foto {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radio-md);
  background: var(--color-superficie-2);
}
/* El icono de la categoría va DEBAJO de la foto: si la foto no carga (hay
   tiendas que bloquean el enlace directo), se quita la imagen y queda el
   icono. Antes quedaba un hueco en blanco. */
.mosaico--fotos .mosaico__icono {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  color: var(--color-principal);
  opacity: .8;
}
.mosaico--fotos .mosaico__icono > svg { width: 42%; height: 42%; }
/* Fuera del flujo: el tamaño intrínseco de la foto no agranda la pista grid. */
.mosaico--fotos .mosaico__foto img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; background: var(--color-superficie-2); }
.mosaico--fotos .mosaico__txt { display: flex; flex-direction: column; gap: 1px; padding: 0 4px 4px; }
.mosaico--fotos .mosaico__nombre { font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--color-texto); }
.mosaico--fotos .mosaico__cuenta { font-size: var(--t-xs); color: var(--color-texto-tenue); }

/* En móvil el collage va debajo del texto y algo más apretado */
@media (max-width: 899px) {
  .hero__ficha:nth-child(n) { transform: none; }
  .hero__collage { gap: var(--esp-sm); margin-top: var(--esp-lg); }
}

.cuenta-pastilla[hidden] { display: none !important; }

/* ============================== /tiendas/ ============================== */
/* Directorio de tiendas: rejilla de fichas + filtro en el propio navegador.
   Todo con las variables del sistema, nada inventado. */
.buscador-interno { margin: var(--esp-lg) 0 var(--esp-md); max-width: 420px; }
.buscador-interno__cuenta { margin-top: 6px; font-size: var(--t-sm); color: var(--color-texto-suave); }
.rejilla-tiendas {
  display: grid; gap: var(--esp-md);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tienda-ficha {
  display: flex; flex-direction: column; gap: 10px; padding: var(--esp-md);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  background: var(--color-superficie); color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tienda-ficha:hover { border-color: var(--color-principal); box-shadow: var(--sombra-lg); }
.tienda-ficha[hidden] { display: none; }
.tienda-ficha__cabeza { display: flex; align-items: center; gap: 10px; }
.tienda-ficha__avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radio-md);
  display: grid; place-items: center; font-weight: var(--peso-semi); font-size: var(--t-lg);
  background: var(--color-crema-2); color: var(--color-principal);
}
.tienda-ficha__nombre { font-weight: var(--peso-semi); line-height: 1.25; letter-spacing: -.01em; }
.tienda-ficha__datos {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--color-texto-suave);
}
.tienda-ficha__datos b { color: var(--color-texto); }
.tienda-ficha__cupon {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-principal); font-weight: var(--peso-medio);
}

/* En pantallas muy estrechas, una ficha por fila y sin apretar */
@media (max-width: 420px) { .rejilla-tiendas { grid-template-columns: 1fr; } }

/* ============================== /legal/ ============================== */
/* Índice legal: cada apartado es una ficha enlazada, no un ancla muerta. */
.enlaces-legales { display: grid; gap: var(--esp-sm); margin-top: var(--esp-md); }
.enlace-ficha {
  display: flex; align-items: center; gap: var(--esp-md);
  padding: var(--esp-md) var(--esp-lg);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  background: var(--color-superficie); color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.enlace-ficha:hover { border-color: var(--color-principal); background: var(--color-hover); }
.enlace-ficha__icono { flex: 0 0 24px; color: var(--color-principal); }
.enlace-ficha__texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.enlace-ficha__texto b { font-weight: var(--peso-semi); color: var(--color-texto); }
.enlace-ficha__texto span { font-size: var(--t-sm); color: var(--color-texto-suave); }
.enlace-ficha__flecha { flex: 0 0 18px; color: var(--color-texto-tenue); }
/* Enlace de correo dentro de un párrafo: subrayado y hereda el color del texto */
.enlace-simple { color: var(--color-principal); text-decoration: underline; text-underline-offset: 2px; }

/* ============================== Confianza en la ficha ============================== */
/* Precio comprobado (historial real) y valoraciones con fuente.
   El bloque de valoraciones NO se pinta si no hay datos, así que aquí no hay
   nada preparado para "quedar bien vacío". */

.bloque--verificado { border-left: 3px solid var(--color-principal); }
.verificado__dato { font-size: var(--t-md); color: var(--color-texto); margin-bottom: 4px; }
.verificado__dato b { font-weight: var(--peso-semi); }
.verificado__aviso {
  display: inline-block; margin: 6px 0 2px; padding: 4px 10px;
  border-radius: var(--radio-full); font-size: var(--t-sm); font-weight: var(--peso-medio);
  background: var(--color-principal-suave); color: var(--color-principal-fuerte);
}
.verificado__fecha { font-size: var(--t-sm); color: var(--color-texto-suave); margin-top: 6px; }

/* Nota propia (solo con datos) */
.nota-propia {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: 4px 10px; margin-bottom: var(--esp-md);
  padding: var(--esp-md); border-radius: var(--radio-lg);
  background: var(--color-crema); border: 1px solid var(--color-crema-borde);
}
.nota-propia__valor { font-size: var(--t-4xl); font-weight: var(--peso-bold); line-height: 1; color: var(--color-texto); }
.nota-propia__de { font-size: var(--t-lg); color: var(--color-texto-suave); align-self: start; margin-top: 6px; }
.nota-propia__estrellas { grid-column: 3; }
.nota-propia__texto { grid-column: 1 / -1; margin-top: 4px; font-size: var(--t-sm); color: var(--color-texto-suave); }

/* Estrellas */
.estrella { font-size: var(--t-lg); line-height: 1; color: var(--color-borde-fuerte); }
.estrella--llena { color: var(--color-principal); }

/* Lista de fuentes: cada nota SIEMPRE con su origen debajo */
.fuentes-nota { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.fuente-nota {
  display: grid; align-items: center; gap: 2px 12px;
  grid-template-columns: 1fr auto auto;
  padding: 12px 0; border-bottom: 1px solid var(--color-borde);
}
.fuente-nota:last-child { border-bottom: 0; }
.fuente-nota__nombre { font-weight: var(--peso-semi); color: var(--color-texto); }
.fuente-nota__estrellas { display: inline-flex; }
.fuente-nota__estrellas .estrella { font-size: var(--t-base); }
.fuente-nota__nota { font-weight: var(--peso-semi); }
.fuente-nota__n { grid-column: 1; font-size: var(--t-sm); color: var(--color-texto-suave); }
.fuente-nota__enlace { grid-column: 3; font-size: var(--t-sm); }
@media (max-width: 520px) {
  .fuente-nota { grid-template-columns: 1fr auto; }
  .fuente-nota__enlace { grid-column: 1 / -1; }
}

/* Lista de enlaces (comparativas de la ficha, enlaces relacionados) */
.lista-enlaces { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lista-enlaces li { min-width: 0; }
.lista-enlaces a { color: var(--color-principal); text-decoration: none; }
.lista-enlaces a:hover { text-decoration: underline; }
@media (min-width: 700px) {
  .lista-enlaces { grid-template-columns: 1fr 1fr; column-gap: var(--esp-lg); }
}

/* Texto solo para lectores de pantalla (etiquetas invisibles) */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Puertas de entrada al catálogo: mismo ritmo y paleta que las fichas. */
.descubrir-cabecera { max-width: 52rem; margin-bottom: var(--esp-xl); }
.descubrir-etiqueta { color: var(--color-principal); font-weight: var(--peso-bold); margin-bottom: var(--esp-sm); }
.descubrir-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--esp-lg); }
.descubrir-enlace { display: flex; flex-direction: column; gap: var(--esp-sm); padding: var(--esp-lg); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); text-decoration: none; color: var(--color-texto); }
.descubrir-enlace h2 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.descubrir-enlace p { margin: 0; color: var(--color-texto-suave); }
.descubrir-enlace > span { margin-top: auto; padding-top: var(--esp-md); color: var(--color-principal); font-weight: var(--peso-bold); }
.descubrir-enlace:hover { border-color: var(--color-principal); }
.descubrir-titulo { margin: var(--esp-2xl) 0 var(--esp-lg); font-size: 1.5rem; }
.descubrir-nota { max-width: 60rem; padding: var(--esp-lg); margin-bottom: var(--esp-xl); background: var(--color-superficie-2); border-radius: var(--radio-lg); }
.descubrir-fecha { color: var(--color-texto-suave); font-size: .875rem; }
.descubrir-salida { display: flex; flex-wrap: wrap; gap: var(--esp-md); margin-top: var(--esp-2xl); }

/* ==========================================================================
   PORTADA 2026 (rediseño 19-oct-2026)
   --------------------------------------------------------------------------
   Qué sustituye y por qué:
   · El héroe tenía un collage de 4 fotos de 90 px y una píldora verde que se
     estiraba a todo el ancho (era un inline-flex dentro de una columna flex).
   · El mosaico de categorías usaba fotos calientes de las tiendas: varias
     bloquean el hotlinking y salían 8 recuadros en blanco. Ahora icono + nombre
     + número, que no se puede romper.
   · Había dos carriles de ofertas casi idénticos y ningún bloque editorial.

   Todo lo de aquí es NUEVO y con prefijo propio (.inicio-hero, .chollo-dia,
   .cifras, .cats, .cat, .editorial). No pisa .hero, .mosaico, .tarjeta,
   .confianza ni .cupon, que se usan en categorías, ofertas, guías y fichas.
   ========================================================================== */

/* ------------------------------- 1. Héroe -------------------------------- */
.inicio-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--esp-2xl);
  background: var(--color-hero-fondo);
  border-bottom: 1px solid var(--color-borde);
  overflow: hidden;
}
/* Halo de marca: un solo degradado muy suave, sin texturas ni ruido. */
.inicio-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -380px;
  right: -260px;
  width: 880px;
  height: 880px;
  border-radius: 50%;
  /* Degradado largo: si el corte es seco se ve una elipse dura al hacer scroll
     bajo la cabecera translúcida. */
  background: radial-gradient(circle, var(--color-principal-suave) 0%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.inicio-hero__rejilla {
  display: grid;
  gap: var(--esp-2xl);
  align-items: center;
}

.inicio-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.inicio-hero__punto {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-principal);
  box-shadow: 0 0 0 4px var(--color-principal-suave);
}
.inicio-hero__titulo {
  margin-top: var(--esp-lg);
  font-size: clamp(2.125rem, 6vw, 3.5rem);
  font-weight: var(--peso-extra);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 16ch;
}
.inicio-hero__titulo em {
  display: block;
  font-style: normal;
  color: var(--color-principal);
}
.inicio-hero__sub {
  margin-top: var(--esp-lg);
  max-width: 48ch;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--color-texto-suave);
}

/* Buscador del héroe: la acción principal de la página. */
.inicio-buscar {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  max-width: 560px;
  margin-top: var(--esp-xl);
  padding: 6px 6px 6px var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-md);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
.inicio-buscar:focus-within {
  border-color: var(--color-principal);
  box-shadow: var(--sombra-lg), 0 0 0 4px var(--color-principal-suave);
}
.inicio-buscar__icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--color-texto-tenue);
}
.inicio-buscar__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--t-md);
}
.inicio-buscar__campo::placeholder { color: var(--color-texto-tenue); }
.inicio-buscar__campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.inicio-buscar__boton {
  flex: 0 0 auto;
  min-height: 52px;
  padding-inline: var(--esp-xl);
  border-radius: var(--radio-full);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  font-size: var(--t-md);
  font-weight: var(--peso-semi);
  transition: background var(--mov-rapido), transform var(--mov-rapido);
}
.inicio-buscar__boton:hover { background: var(--color-principal-fuerte); }
.inicio-buscar__boton:active { transform: scale(.98); }

.inicio-hero__sugerencias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--esp-sm);
  margin-top: var(--esp-lg);
  font-size: var(--t-xs);
  color: var(--color-texto-tenue);
}
.inicio-hero__sugerencias > span {
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.inicio-hero__sugerencias a {
  padding: 5px 11px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-weight: var(--peso-medio);
  transition: border-color var(--mov-rapido), color var(--mov-rapido);
}
.inicio-hero__sugerencias a:hover { border-color: var(--color-principal); color: var(--color-principal); }
/* Las sugerencias del héroe son el primer atajo táctil bajo el buscador: en
   móvil tienen que llegar a los 44 px del resto de controles. */
@media (max-width: 767px) {
  .inicio-hero__sugerencias a {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-min);
    padding-inline: var(--esp-md);
  }
}

.inicio-hero__nota {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 52ch;
  margin-top: var(--esp-xl);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--color-texto-tenue);
}
.inicio-hero__notaico {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex: 0 0 auto;
  color: var(--color-principal);
}

/* --------------------------- 2. Bajada del día --------------------------- */
.chollo-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-md);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-chollo);
}
.chollo-dia__etiqueta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: var(--color-descuento-suave);
  color: var(--color-descuento);
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chollo-dia__etiqueta svg { width: 12px; height: 12px; }
.chollo-dia__foto {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--color-superficie-2);
}
.chollo-dia__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--esp-sm);
}
.chollo-dia__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.chollo-dia__tienda {
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.chollo-dia__titulo {
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  line-height: 1.25;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chollo-dia__titulo a:hover { color: var(--color-principal); }
.chollo-dia__precios {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-sm);
  margin-top: 6px;
}
.chollo-dia__precios b {
  font-size: var(--t-3xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.chollo-dia__precios s { font-size: var(--t-sm); color: var(--color-texto-tenue); }
.chollo-dia__pct {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--radio-full);
  background: var(--color-descuento);
  color: var(--color-sobre-descuento);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
}
.chollo-dia__ahorro {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--color-texto-suave);
}
.chollo-dia .boton { margin-top: var(--esp-sm); }

/* ------------------------------ 3. Cifras -------------------------------- */
.cifras {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}
.cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-lg) var(--esp-md);
  padding-block: var(--esp-xl);
}
.cifras__item { display: flex; flex-direction: column; gap: 1px; }
.cifras__item b {
  font-size: var(--t-2xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cifras__item span {
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--color-texto-suave);
}

/* ---------------------------- 4. Categorías ------------------------------ */
.cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-sm);
}
.cat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--esp-md);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), transform var(--mov-rapido);
}
.cat:hover,
.cat:focus-visible {
  border-color: var(--color-principal);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}
.cat__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: var(--radio-md);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.cat__icono svg { width: 22px; height: 22px; }
.cat:hover .cat__icono { background: var(--color-principal); color: var(--color-sobre-principal); }
.cat__nombre {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  line-height: 1.3;
  color: var(--color-texto);
}
.cat__cuenta {
  font-size: var(--t-xs);
  color: var(--color-texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------- 5. Editorial ------------------------------ */
.editorial { display: grid; gap: var(--esp-lg); }
.editorial__panel {
  display: flex;
  flex-direction: column;
  padding: var(--esp-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
}
.editorial__rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding-bottom: var(--esp-md);
  border-bottom: 1px solid var(--color-borde);
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.editorial__rotulo svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-principal); }
.editorial__lista { display: flex; flex-direction: column; }
.editorial__lista li + li { border-top: 1px solid var(--color-borde); }
.editorial__lista a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-md);
  padding-block: var(--esp-md);
}
.editorial__num {
  padding-top: 2px;
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  color: var(--color-texto-tenue);
  font-variant-numeric: tabular-nums;
}
.editorial__vs {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radio-xs);
  background: var(--color-principal-suave);
  color: var(--color-principal);
  font-size: var(--t-2xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
}
.editorial__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.editorial__txt b {
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  line-height: 1.35;
  color: var(--color-texto);
  transition: color var(--mov-rapido);
}
.editorial__txt span {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--color-texto-suave);
  /* Dos líneas y el navegador corta al final del renglón: nunca un "…" a mitad
     de frase como cuando se recortaba en el generador. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editorial__lista a:hover .editorial__txt b { color: var(--color-principal); }
.editorial__mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* enlace "Las N guías": ocupa todo el ancho del panel, así que la altura es
     la única dimensión que puede quedarse corta para el dedo */
  min-height: var(--toque-min);
  margin-top: auto;
  padding-top: var(--esp-md);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--color-principal);
}
.editorial__mas:hover { text-decoration: underline; }
.editorial__mas svg { width: 15px; height: 15px; }

/* ------------------------- 6. Cómo trabajamos ---------------------------- */
/* Variante de .confianza para usarla dentro de una sección con su propio aire. */
.confianza--pelada { padding-top: 0; padding-bottom: 0; }

/* --------------------------- Adaptación fina ----------------------------- */
@media (min-width: 560px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .cifras__rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-block: var(--esp-xl);
  }
  .cifras__item + .cifras__item {
    padding-left: var(--esp-xl);
    border-left: 1px solid var(--color-borde);
  }
}
@media (min-width: 820px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-md); }
  .editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-xl); }
}
@media (min-width: 1000px) {
  .inicio-hero { padding-block: 72px; }
  .inicio-hero__rejilla {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: var(--esp-3xl);
  }
}
@media (min-width: 1100px) {
  .cats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .inicio-hero__nota { font-size: var(--t-xs); }
  /* En móvil, 16 fichas verticales hacen una columna larguísima: icono a la
     izquierda y el dato a la derecha, la mitad de alto y más fácil de recorrer. */
  .cat { flex-direction: row; align-items: center; gap: var(--esp-md); padding: var(--esp-md); }
  .cat__icono { width: 36px; height: 36px; margin-bottom: 0; flex: 0 0 auto; }
  .cat__icono svg { width: 20px; height: 20px; }
  .cat__cuenta { margin-left: auto; }
  .inicio-buscar { padding-left: var(--esp-md); }
  .inicio-buscar__boton { padding-inline: var(--esp-lg); }
  .chollo-dia { max-width: none; }
}

/* ==========================================================================
   PÁGINAS DE INTENCIÓN (/categoria/<cat>/<tipo-y-modificador>/)
   Dos columnas: texto propio a la izquierda y ficha de datos a la derecha.
   En móvil se apila y la ficha va después del texto.
   ========================================================================== */
.intencion-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-xl);
  margin-top: var(--esp-lg);
  align-items: start;
}

.intencion-intro .prosa { max-width: 68ch; }
.intencion-intro .prosa p:last-child { margin-bottom: 0; }

.intencion-ficha {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie-2);
  padding: var(--esp-lg);
}

.intencion-ficha__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--esp-lg) 0 var(--esp-md);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-texto-suave);
}

.intencion-ficha__titulo svg { color: var(--color-principal); }

.intencion-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-md);
}

.intencion-datos > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--esp-sm);
  border-bottom: 1px solid var(--color-borde);
}

.intencion-datos__ancho { grid-column: 1 / -1; }

.intencion-datos__k {
  font-size: var(--t-xs);
  color: var(--color-texto-tenue);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.intencion-datos__v {
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  color: var(--color-texto);
}

.intencion-enlaces {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-sm);
}

@media (min-width: 720px) {
  .intencion-enlaces { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .intencion-intro { grid-template-columns: minmax(0, 1fr) 320px; }
  .intencion-ficha { position: sticky; top: 96px; }
}