/* ═══════════════════════════════════════════════════════════
   KUMO — Estilos de la Tienda pública (TEMA "prototipo")
   Réplica fiel de la estructura visual de
   legacy/Kumo - Tienda (11).html:
   header de 2 filas con buscador, cards de marketplace con
   vista previa, banner deslizante de imágenes, secciones con
   "Ver todos", cards de producto y botón de chat flotante.
   Requiere tokens.css, base.css y components.css antes.
   Usado por: index, tienda, producto y cuenta.
   ═══════════════════════════════════════════════════════════ */

/* ══ HEADER — fila 1: logo · buscador · navegación · usuario/carrito ══ */
.header-tienda {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-fondo-fuerte);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0.5px solid var(--glass-borde);
}
.header-fila1 {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Buscador pill con ícono adentro */
.search-bar {
  flex: 1;
  max-width: 460px;
  position: relative;
  display: flex;
  align-items: center;
}
.search-bar .search-icon {
  position: absolute;
  left: 13px;
  color: var(--texto-2);
  font-size: 17px;
  pointer-events: none;
}
.search-bar input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio-pastilla);
  color: var(--texto-1);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.search-bar input:focus { border-color: var(--ac); }
.search-bar input::placeholder { color: var(--texto-2); }
/* El botón de cerrar es solo para el modo compacto de mobile
   (ver @media más abajo) — en desktop el buscador ya está
   siempre expandido, no hace falta. */
.search-cerrar { display: none; }

.hnav-lista { display: flex; gap: 2px; }

/* Botones de navegación del header */
.hnav-btn {
  padding: 8px 16px;
  border-radius: var(--radio-pastilla);
  border: none;
  background: none;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}
.hnav-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--texto-1); opacity: 1; }
.hnav-btn.activo { background: var(--ac-suave); color: var(--ac); }

.header-derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Chip de usuario con avatar */
.header-usuario {
  font-size: 13px;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.header-usuario strong { color: var(--texto-1); font-weight: 600; }
.header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menú desplegable del usuario */
.usuario-menu-envoltura { position: relative; }
.usuario-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  min-width: 190px;
  box-shadow: var(--sombra-2);
  z-index: 999;
  overflow: hidden;
}
.usuario-menu.abierto { display: block; }
.usuario-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--texto-1);
  cursor: pointer;
  transition: background 0.1s;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
}
.usuario-menu-item:hover { background: rgba(255, 255, 255, 0.06); opacity: 1; }
.usuario-menu-sep { height: 0.5px; background: var(--borde); margin: 4px 0; }
.usuario-menu-valor { margin-left: auto; font-size: 11px; color: var(--texto-2); font-weight: 400; }
#hdr-usuario-ciudades { max-height: 220px; overflow-y: auto; border-top: 0.5px solid var(--borde); }
.usuario-menu-sub { padding-left: 30px; font-size: 12px; }
.usuario-menu-sub.activo { color: var(--ac); }

/* Botón circular del carrito */
.cart-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio-pastilla);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--texto-1);
  font-size: 20px;
  transition: border-color 0.2s, background 0.2s;
}
.cart-btn:hover { border-color: var(--ac); background: var(--ac-suave); }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ac);
  color: var(--sobre-ac);
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: var(--radio-pastilla);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ══ CONTENIDO PRINCIPAL ══ */
.shop-main {
  max-width: var(--max-ancho);
  margin: 0 auto;
  width: 100%;
  padding: 0 40px 80px;
  flex: 1;
}
@media (max-width: 720px) {
  .header-fila1, .shop-main { padding-inline: var(--esp-4); }

  /* Fila 1 compacta: logo sin texto, sesión solo avatar. La
     navegación (Tiendas/Diseñadores/Artistas/Otros) baja a su
     propio renglón (flex-basis:100%, más abajo) — sin ella, sobra
     lugar para que el buscador ocupe todo el medio de la fila, en
     vez de quedar como una lupita sola. */
  .header-fila1 { gap: 8px; flex-wrap: wrap; height: auto; min-height: 64px; padding-bottom: 8px; }
  .marca .nombre { display: none; }
  .header-usuario span { display: none; }
  /* Sin esto, "Entrar" + carrito se iban a un renglón aparte: el
     buscador (flex-grow) se comía TODO el espacio libre de la fila
     antes de que el navegador les reservara el suyo. flex-shrink:0
     los deja siempre con su tamaño natural, nunca empujados abajo. */
  .header-derecha { flex-shrink: 0; }

  /* Buscador: antes quedaba colapsado (una lupita de 42px) hasta
     tocarlo — ahora, con la navegación en su propio renglón, ya
     entra ocupando todo el espacio libre entre el logo y la sesión/
     el carrito de una sola vez, sin hacer falta tocarlo primero.
     flex-basis:0 (no "auto") es la parte importante: así el
     buscador arranca de CERO y crece solo con lo que sobra DESPUÉS
     de que logo y header-derecha ya tomaron lo suyo, en vez de pedir
     todo el espacio de entrada y empujarlos a otra fila. */
  .search-bar { flex: 1 1 0%; max-width: none; min-width: 0; }
  .search-bar input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    cursor: text;
  }
  .search-bar input::placeholder { color: var(--texto-2); }
  .search-bar .search-cerrar { display: none; }
  .search-bar.abierta { flex: 1 1 auto; }
  .search-bar.abierta input {
    width: 100%;
    flex: 1 1 auto;
    padding-right: 38px;
    cursor: text;
  }
  .search-bar.abierta input::placeholder { color: var(--texto-2); }
  .search-bar.abierta .search-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--texto-2);
    cursor: pointer;
    border-radius: 50%;
  }
  .search-bar.abierta .search-cerrar:hover { background: rgba(255, 255, 255, 0.08); color: var(--texto-1); }
  .header-fila1:has(.search-bar.abierta) .marca,
  .header-fila1:has(.search-bar.abierta) .hnav-lista,
  .header-fila1:has(.search-bar.abierta) .header-derecha {
    display: none;
  }

  /* Pedido explícito: la navegación baja un renglón en celular —
     flex-basis:100% fuerza el salto de línea dentro del mismo
     .header-fila1 (que ya tiene flex-wrap arriba), order:5 la manda
     después de logo/buscador/sesión (que se quedan con el order:0
     de siempre). flex-wrap:wrap es la red de seguridad: en un
     celular angosto los 4 botones con nombre no entran en una sola
     línea, y así pasan a 2+2 en vez de desbordar el ancho. */
  .hnav-lista {
    flex: 0 0 100%;
    order: 5;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    padding-top: 6px;
    border-top: 0.5px solid var(--glass-borde);
  }
  /* Con el nombre de vuelta (ya no display:none), cada botón se
     achica para que los 4 entren cómodos: menos padding y letra
     más chica que en escritorio. */
  .hnav-btn { padding: 6px 10px; font-size: 11.5px; gap: 4px; }

}

/* ── Secciones con título + "Ver todos" ── */
.shop-section { margin-bottom: 40px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.titulo-icono { color: var(--ac); margin-right: 4px; }
.section-sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.section-link {
  font-size: 12px;
  color: var(--ac);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Marketplace: título de bloque ── */
.mkp-section { padding: 32px 0; }
.mkp-title { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.mkp-sub { font-size: 13px; color: var(--texto-2); margin-bottom: 24px; }

/* Card de tienda del marketplace: info a la izquierda + productos a la derecha */
.mkp-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-xl);
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mkp-card:hover { border-color: var(--ac-borde); box-shadow: var(--sombra-2); }
@media (max-width: 720px) {
  .mkp-card { grid-template-columns: 1fr; }
}
.mkp-info {
  padding: 24px;
  border-right: 0.5px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--superficie-2);
}
/* Banner chico arriba de la tarjeta, con el logo superpuesto abajo
   (mismo estilo que la ficha completa de la tienda). La columna
   .mkp-info mide 240px de ancho SIEMPRE, incluso en escritorio (el
   grid la fija así, no crece con la pantalla) — así que la forma
   panorámica de escritorio (1400×400, ~3.5:1) queda igual de
   recortada en PC que en celular. Por eso el banner usa la forma de
   celular (ideal 800×500, ~8:5) sin depender del ancho de pantalla,
   siempre acá — mismo criterio que .banner-area-movil-dedicado en la
   página de la tienda. */
.mkp-banner {
  margin: -24px -24px 0;
  height: auto;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}
.mkp-banner img { width: 100%; height: 100%; object-fit: cover; }
.mkp-logo-fila-con-banner { margin-top: -28px; }
.mkp-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  flex-shrink: 0;
  overflow: hidden;
}
.mkp-logo img { width: 100%; height: 100%; object-fit: cover; }
.mkp-fav-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  color: var(--texto-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.mkp-fav-btn.activo { color: #e8455c; border-color: #e8455c; }
.mkp-fav-btn:hover { color: #e8455c; }
#tienda-favorita.activo { color: #e8455c; border-color: #e8455c; }

.cupon-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radio-m);
  border: 1px dashed var(--ac);
  background: transparent;
  color: var(--texto-1);
  cursor: pointer;
}
.cupon-chip strong { font-size: 14px; letter-spacing: 0.5px; }
.cupon-chip span { font-size: 12px; color: var(--texto-3); }
.cupon-chip:hover { background: var(--superficie-2); }

/* ══ Banner flotante propio de una gráfica (publicidad) ══ */
.banner-flotante-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.banner-flotante-caja {
  position: relative;
  max-width: 520px;
  width: 100%;
}
.banner-flotante-caja img {
  width: 100%;
  border-radius: var(--radio-l);
  display: block;
}
/* ══ Avatar de perfil del comprador (cuenta.html) ══ */
.perfil-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }

.banner-flotante-caja .modal-cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
}
.mkp-nombre { font-size: 16px; font-weight: 900; letter-spacing: -0.3px; }
.mkp-eslogan { font-size: 12px; color: var(--texto-2); line-height: 1.5; flex: 1; }
.mkp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mkp-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--ac-suave);
  color: var(--ac);
  border-radius: var(--radio-pastilla);
  font-weight: 700;
  border: 0.5px solid var(--ac-borde);
}
.mkp-rating { font-size: 11px; color: var(--texto-2); display: flex; align-items: center; gap: 4px; }
.mkp-btn {
  margin-top: auto;
  padding: 8px 14px;
  background: var(--ac);
  color: var(--sobre-ac);
  border: none;
  border-radius: var(--radio-m);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
  text-decoration: none;
}
.mkp-btn:hover { opacity: 0.85; }

/* Vista previa de productos dentro de la card de tienda */
.mkp-products {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}
@media (max-width: 900px) {
  .mkp-products { grid-template-columns: repeat(2, 1fr); }
}
.mkp-prod {
  background: var(--superficie-2);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.mkp-prod:hover { border-color: var(--ac-borde); opacity: 1; }
.mkp-prod-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--superficie-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
  font-size: 24px;
  overflow: hidden;
}
.mkp-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.mkp-prod-body { padding: 8px 10px; }
.mkp-prod-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.mkp-prod-price { font-size: 13px; font-weight: 900; color: var(--ac); }
.mkp-empty { padding: 60px; text-align: center; color: var(--texto-2); grid-column: 1 / -1; }

/* Página "Sumate a Kumo" (solicitud.html) */
.solicitud-caja { max-width: 560px; margin: 0 auto; padding: 20px 0 60px; }
.solicitud-titulo { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.solicitud-costos {
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  padding: 16px 18px;
  margin: 18px 0;
}
.solicitud-form { display: grid; gap: 16px; margin-top: 18px; }
.solicitud-exito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 40px 0;
}

/* Selector de plan (Free/Pro) arriba del formulario de "Sumate a Kumo" */
.planes-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
@media (max-width: 560px) { .planes-selector { grid-template-columns: 1fr; } }
.plan-card-sel {
  text-align: left;
  background: var(--superficie-1);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-l);
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color: var(--texto-1);
}
.plan-card-sel:hover { border-color: var(--ac-borde); }
.plan-card-sel.activo { border-color: var(--ac); box-shadow: 0 0 0 2px var(--ac-suave); }
.plan-card-nombre { font-size: 15px; font-weight: 800; }
.plan-card-precio { font-size: 22px; font-weight: 900; margin: 4px 0 2px; }
.plan-card-precio span { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.plan-card-comision { font-size: 12px; color: var(--ac); font-weight: 700; margin-bottom: 10px; }
.plan-card-lista { list-style: none; padding: 0; margin: 0 0 12px; font-size: 12px; color: var(--texto-2); display: grid; gap: 5px; }
.plan-card-lista li { padding-left: 16px; position: relative; }
.plan-card-lista li::before { content: "+"; position: absolute; left: 0; color: var(--ac); font-weight: 700; }
.plan-card-elegir {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  border-radius: var(--radio-pastilla);
  background: var(--superficie-2);
  color: var(--texto-2);
}
.plan-card-sel.activo .plan-card-elegir { background: var(--ac); color: var(--sobre-ac); }

/* Tarjeta de cupón (pestaña Cupones del home) */
.cupon-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.cupon-icono {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ac-fondo, rgba(255, 209, 0, 0.12));
  color: var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.cupon-info { flex: 1; min-width: 0; }
.cupon-codigo { font-size: 16px; font-weight: 900; letter-spacing: 0.5px; }
.cupon-desc { font-size: 13px; margin-top: 2px; }
.cupon-venc { font-size: 11px; margin-top: 2px; }
@media (max-width: 480px) {
  .cupon-card { flex-wrap: wrap; }
}

/* ══ BANNER deslizante (solo imágenes) ══ */
.banner-area {
  width: 100%;
  height: 320px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  position: relative;
  background: var(--superficie-1);
  border: 0.5px solid var(--ac-borde);
  margin-top: 24px;
  margin-bottom: 40px;
}
.banner-area.vacio { display: none; }
.banner-slider {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-slide {
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
  border: none;
  padding: 0;
}
.banner-dot.activo { background: var(--ac); width: 20px; border-radius: var(--radio-pastilla); }
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.banner-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.banner-arrow.izq { left: 14px; }
.banner-arrow.der { right: 14px; }

/* ══ GRILLA Y CARD DE PRODUCTO ══ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.prod-card {
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.prod-card:hover {
  transform: translateY(-3px);
  border-color: var(--ac-borde);
  box-shadow: var(--sombra-2);
}
.prod-img-wrap {
  width: 100%;
  height: 180px;
  background: var(--superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
  font-size: 32px;
  overflow: hidden;
  position: relative;
}
.prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Badge de descuento sobre la imagen (-15%) */
.prod-desc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--ac);
  color: var(--sobre-ac);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radio-pastilla);
}
.prod-price-old {
  font-size: 12px;
  color: var(--texto-2);
  text-decoration: line-through;
}
.prod-info { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radio-pastilla);
  margin-bottom: 6px;
  align-self: flex-start;
}
.prod-badge.dest { background: var(--ac-suave); color: var(--ac); }
/* "Publicidad" (migracion-73, posicionamiento pago) — sólido y en
   mayúsculas, a propósito distinto del "Destacado" gratis de arriba
   (ese es un tilde libre del dueño; esto es plata real, la regla de
   la casa es que nunca se disimule). */
.prod-badge.pub { background: var(--ac); color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.04em; }
.prod-shop { font-size: 11px; color: var(--texto-2); margin-bottom: 3px; }
.prod-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; line-height: 1.3; }
.prod-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.prod-price { font-size: 20px; font-weight: 900; color: var(--ac); }
.prod-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.prod-footer .btn { flex: 1; }

/* ══ Perfil de tienda: banner de portada + cabecera estilo Facebook
      (el logo "pisa" el borde inferior del banner) ══ */
.banner-portada {
  margin-top: 12px;
  margin-bottom: 0;
}
.tienda-cabecera {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 0 24px;
}
/* Si hay banner, el logo se superpone a su parte inferior */
.banner-portada:not(.vacio) + #info-tienda .tienda-cabecera {
  margin-top: -42px;
}
/* El logo se alinea arriba de la fila (no abajo, como el resto) para
   quedar pegado al borde del banner — si el bloque de texto es más
   alto que el logo, "align-items: flex-end" lo empuja bien abajo y
   pierde la superposición. */
.banner-portada:not(.vacio) + #info-tienda .tienda-logo {
  align-self: flex-start;
}
.banner-portada:not(.vacio) + #info-tienda .tienda-cabecera > div:not(.tienda-logo) {
  padding-top: 48px;   /* el texto queda debajo del banner, no encima */
}
@media (max-width: 720px) {
  .banner-area { height: 110px; }
  /* Banner "para celular" dedicado: proporción más parecida a la
     recomendada al subirlo (ideal 800×500px, ~8:5) en vez de la
     franja ancha/bajita del banner de escritorio — si no, un banner
     de celular bien armado se recorta igual de mal que el de
     escritorio en esta pantalla, que es justo lo que se quería evitar. */
  .banner-area.banner-area-movil-dedicado { height: auto; aspect-ratio: 8 / 5; }
  .tienda-cabecera { gap: 8px; padding: 0 16px; }
  .banner-portada:not(.vacio) + #info-tienda .tienda-cabecera { margin-top: -24px; }
  .banner-portada:not(.vacio) + #info-tienda .tienda-cabecera > div:not(.tienda-logo) { padding-top: 14px; }
  .tienda-logo { width: 72px; height: 72px; font-size: 26px; border-width: 3px; }
}
.tienda-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  flex-shrink: 0;
  overflow: hidden;
  border: 4px solid var(--fondo);   /* aro estilo foto de perfil */
  box-shadow: var(--sombra-1);
  position: relative;
  z-index: 2;
}
.tienda-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Botones de contacto (Favorita/Chatear/WhatsApp/Instagram/Ubicación):
   envuelven en vez de desbordar la pantalla en celular. */
.tienda-contacto { display: flex; gap: 8px; flex-wrap: wrap; }

/* Fila de estadísticas públicas (⭐ · pedidos · clientes) */
.tienda-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 10px 0 4px;
}
.tienda-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-2);
}
.tienda-stat strong { color: var(--texto-1); font-size: 14px; }
.tienda-stat i { color: var(--ac); font-size: 15px; }

/* Integrantes del equipo */
.integrantes-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.integrante {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie-2);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-pastilla);
  padding: 5px 14px 5px 6px;
  font-size: 12px;
}
.integrante .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integrante .rol { color: var(--texto-2); }

/* ══ Volver / migas ══ */
.back-bar { padding: 12px 0 4px; }
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--texto-2);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radio-m);
  transition: background 0.1s;
  text-decoration: none;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.06); opacity: 1; }

/* ══ Página de producto ══ */
.detalle-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-6);
  margin-block: var(--esp-6);
}
@media (max-width: 760px) {
  .detalle-producto { grid-template-columns: 1fr; }
}
.detalle-producto .imagen-grande {
  border-radius: var(--radio-xl);
  aspect-ratio: 1;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detalle-producto .imagen-grande img { width: 100%; height: 100%; object-fit: cover; }
.detalle-producto .precio-grande {
  font-size: 32px;
  font-weight: 900;
  color: var(--ac);
}
.selector-cantidad {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}

/* ══ Drawer del carrito ══ */
.drawer-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
  /* Por encima del header (sticky, z-index 100) — si no, la barra
     superior tapaba la parte de arriba del carrito/chat. */
  z-index: 190;
}
.drawer-fondo.abierto { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--superficie-1);
  border-left: 0.5px solid var(--borde);
  box-shadow: var(--sombra-3);
  transform: translateX(105%);
  transition: transform 220ms ease;
  z-index: 195;
  display: flex;
  flex-direction: column;
}
.drawer.abierto { transform: none; }
.drawer-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 0.5px solid var(--borde);
}
.drawer-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-4) var(--esp-5);
  display: grid;
  gap: var(--esp-3);
  align-content: start;
}
.drawer-pie {
  padding: var(--esp-4) var(--esp-5);
  border-top: 0.5px solid var(--borde);
  display: grid;
  gap: var(--esp-3);
}
.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--texto-l);
}
.carrito-total strong { color: var(--ac); }
.carrito-cupon-fila {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.carrito-cupon-fila input { flex: 1; }
#carrito-cupon-aplicado {
  justify-content: space-between;
  font-size: var(--texto-s);
  background: var(--exito-suave, rgba(111,215,154,.12));
  border-radius: var(--radio-m);
  padding: var(--esp-2) var(--esp-3);
}
.carrito-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
}
.carrito-item-info { display: grid; }
.carrito-item-acciones { display: flex; align-items: center; gap: var(--esp-1); }

/* ══ Cuenta / pedidos ══ */
.lista-pedidos { display: grid; gap: var(--esp-4); margin-block: var(--esp-5); }
.pedido-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2);
}

/* ══ Botón de chat flotante (FAB) ══ */
.chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 150;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--sobre-ac);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-fab:hover { transform: scale(1.08); }
.chat-fab:active { transform: scale(0.95); }

/* Puntito rojo: hay mensajes sin leer */
.chat-fab-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--fondo);
}

/* (Los estilos compartidos del chat — burbujas, lista de
   conversaciones, fila de envío — viven en components.css,
   porque también los usa el Panel en su página Chats.) */

/* ══ Pie de página (estilo prototipo) ══ */
.pie-kumo {
  background: #111110;
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
  margin-top: auto;
}
.pie-inner {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 40px 40px 28px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pie-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}
.pie-marca img { height: 64px; margin-bottom: 12px; opacity: 0.92; }
.pie-tagline {
  font-size: 11px;
  color: var(--texto-2);
  line-height: 1.5;
  max-width: 180px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pie-centro { flex: 1; min-width: 240px; }
.pie-cta { font-size: 15px; color: var(--texto-1); line-height: 1.6; margin-bottom: 14px; }
.pie-cta strong { color: var(--ac); }
.pie-cta-botones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pie-cta-nuevo { font-size: 13px; color: var(--texto-2); text-decoration: underline; }
.pie-cta-nuevo:hover { color: var(--ac); }
.pie-contacto { display: flex; flex-wrap: wrap; gap: 16px; }
.pie-contacto-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: none;
  transition: color 0.15s;
}
.pie-contacto-item:hover { color: var(--ac); opacity: 1; }

/* ── Avisos de plataforma (interruptores del Admin) ────────── */
/* Cartel de mantenimiento: tapa toda la tienda */
.plataforma-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--fondo, #0D0D0C);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.plataforma-overlay img { width: 72px; opacity: 0.9; }
.plataforma-overlay .titulo { font-size: 22px; font-weight: 900; color: var(--ac); }
.plataforma-overlay .texto { font-size: 14px; color: var(--texto-2); }

/* Franja de "compras pausadas" arriba de todo */
.plataforma-franja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ac);
  color: #0D0D0C;
  font-size: 13px;
  font-weight: 700;
}

/* ══ HOME: bandas, atajos, puertas y carruseles ══
   Orden inspirado en cómo lo resuelven PedidosYa y Mercado Libre:
   primero lo que le toca al comprador, después los atajos, y recién
   ahí la oferta — con las gráficas arriba de todo. */

/* Banda de "tu pedido en curso" / "calificá tu último pedido" */
.home-banda {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-left: 3px solid var(--ac);
  border-radius: var(--radio-l);
  text-decoration: none;
  color: var(--texto-1);
  transition: border-color 0.2s;
}
.home-banda:hover { border-color: var(--ac-borde); }
.home-banda > i:first-child { font-size: 22px; color: var(--ac); flex-shrink: 0; }
.home-banda div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.home-banda strong { font-size: 14px; }
.home-banda span { font-size: 12px; color: var(--texto-2); }
.home-banda-flecha { color: var(--texto-2); flex-shrink: 0; }

/* Fila de atajos de categorías (se desliza en celular) */
.home-atajos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 20px 0 6px;
  scrollbar-width: none;
}
.home-atajos::-webkit-scrollbar { display: none; }
.home-atajo {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 84px;
  padding: 12px 6px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  text-decoration: none;
  color: var(--texto-1);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.2s;
}
.home-atajo:hover { border-color: var(--ac-borde); }
.home-atajo i { font-size: 22px; color: var(--ac); }
.home-atajo span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* Puertas de entrada por intención (no por rubro) */
.home-puertas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 32px;
}
@media (max-width: 620px) { .home-puertas { grid-template-columns: repeat(2, 1fr); } }
.home-puerta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-l);
  text-decoration: none;
  color: var(--texto-1);
  font-size: 13px;
  font-weight: 700;
  transition: border-color 0.2s;
}
.home-puerta:hover { border-color: var(--ac-borde); }
.home-puerta i { font-size: 18px; color: var(--ac); flex-shrink: 0; }

/* Carrusel horizontal: una fila por sección, nunca mezcla áreas */
.home-carrusel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.home-carrusel > * { flex: 0 0 220px; scroll-snap-align: start; }
@media (max-width: 520px) { .home-carrusel > * { flex-basis: 165px; } }

/* Tarjeta chica de gráfica (la del listado es ancha y con productos) */
.home-tarjeta {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: var(--superficie-1);
  border: 0.5px solid var(--borde);
  border-radius: var(--radio-xl);
  text-decoration: none;
  color: var(--texto-1);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.home-tarjeta:hover { border-color: var(--ac-borde); box-shadow: var(--sombra-2); }

/* Banner de la tarjeta chica (carruseles del Home) — bordo a bordo
   arriba de todo (por eso el margen negativo, para tapar el padding
   de la tarjeta) y con un alto moderado: la tarjeta mide ~220px de
   ancho, mucho menos que la ficha ancha del listado, así que un
   panorámico 3.5:1 (el de escritorio) se recortaba de más — de ahí
   que htmlCardTiendaChica priorice el banner de celular. */
.home-tarjeta-banner {
  margin: -14px -14px 0;
  aspect-ratio: 2 / 1;
  border-radius: var(--radio-xl) var(--radio-xl) 0 0;
  overflow: hidden;
  background: var(--superficie-2);
}
.home-tarjeta-banner img { width: 100%; height: 100%; object-fit: cover; }
/* El logo (y el corazón de favorito, que vive en la misma fila) pisan
   el borde de abajo del banner — mismo criterio que
   .mkp-logo-fila-con-banner en la ficha ancha del listado. -36px y
   no -28px porque acá el logo vive en un grid con gap:8px (ahí no
   hay gap de por medio): 28px de superposición real + 8px que hay
   que descontar del espacio que ya pone el gap. */
.home-tarjeta-top-con-banner { margin-top: -36px; position: relative; z-index: 1; }

/* Rótulo de posicionamiento pago (migracion-73) — regla de la casa:
   un destacado nunca se disimula, siempre dice "Publicidad" bien
   visible. Va arriba de TODO lo demás de la tarjeta (z-index),
   esquina superior izquierda para no tapar el corazón de favorito
   (que vive arriba a la derecha). */
.badge-publicidad {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--ac);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: var(--radio-pastilla);
}
.home-tarjeta-top { display: flex; align-items: flex-start; justify-content: space-between; }
.home-tarjeta-nombre {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-tarjeta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--texto-2);
}
.home-tarjeta-meta span { display: flex; align-items: center; gap: 3px; }
.home-tarjeta-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* Bloque de confianza del pie del home */
.home-confianza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 40px;
  padding-top: 28px;
  border-top: 0.5px solid var(--borde);
}
@media (max-width: 620px) { .home-confianza { grid-template-columns: 1fr; } }
.home-confianza-item { display: grid; gap: 4px; align-content: start; }
.home-confianza-item i { font-size: 22px; color: var(--ac); }
.home-confianza-item strong { font-size: 13px; }
.home-confianza-item span { font-size: 12px; color: var(--texto-2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   VIDRIO en la tienda — los tokens viven en tokens.css, porque
   ahora el Panel y el Admin usan el mismo efecto. Acá va solo a
   qué componentes de la tienda se aplica.
   ══════════════════════════════════════════════════════════ */

/* Las manchas de marca van como capas del fondo del body y NO como un
   ::before: un pseudo-elemento con z-index negativo queda detrás del
   fondo del propio body, o sea invisible — probado. El orden importa:
   manchas arriba, después el velo, y la foto de marca al final. */
body {
  /* El velo que pone base.css (65%) se afloja acá: con las tarjetas
     de vidrio hace falta que llegue algo de la foto de marca, si no
     el desenfoque no tiene qué mostrar. Sigue alcanzando para que el
     texto claro se lea. */
  --fondo-pagina: linear-gradient(rgba(6, 10, 18, 0.58), rgba(6, 10, 18, 0.58));
  background-image:
    var(--manchas-marca),
    var(--fondo-pagina),
    url("../assets/fondo-marca.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* ── Las tarjetas de la tienda pasan a vidrio ── */
.card,
.mkp-card,
.home-tarjeta,
.home-banda,
.home-atajo,
.home-puerta {
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-luz);
}

/* El hover levanta el brillo del borde en vez de cambiar el fondo */
.mkp-card:hover,
.home-tarjeta:hover,
.home-banda:hover,
.home-atajo:hover,
.home-puerta:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* Segundas capas adentro de una tarjeta: un pelín más claras que el
   vidrio, sin blur propio (ya está difuminado lo de atrás). */
.card .mkp-prod,
.mkp-card .mkp-prod,
.mkp-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--vidrio-borde);
}

/* La franja separadora interna de la card de tienda, más suave */
.mkp-info { border-right-color: var(--vidrio-borde); }

/* Navegadores sin backdrop-filter (Firefox viejo): se ve opaco pero
   legible, nunca un panel transparente con el texto encima del fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .mkp-card,
  .home-tarjeta,
  .home-banda,
  .home-atajo,
  .home-puerta {
    background: rgba(24, 24, 22, 0.94);
  }
}


/* Las tarjetas de producto también van de vidrio — son las que más
   ocupan la pantalla, si quedan opacas el efecto no se entiende. */
.prod-card {
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-luz);
}
.prod-card:hover {
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
/* El recuadro de la foto, apenas más claro que el vidrio (antes era
   un gris sólido que cortaba el efecto justo en el medio de la card) */
.prod-img-wrap { background: rgba(255, 255, 255, 0.05); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .prod-card { background: rgba(24, 24, 22, 0.94); }
}

/* El encabezado ya era de vidrio, pero con un negro al 90% quedaba
   casi opaco y cortaba en seco con las tarjetas translúcidas de
   abajo. Se afloja SOLO acá (el token global lo sigue usando el
   Panel, donde no hay fondo que mostrar). Igual conserva bastante
   cuerpo: es sticky y le pasa contenido por debajo. */
.header-tienda {
  background: rgba(13, 13, 12, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border-bottom: 1px solid var(--vidrio-borde);
}

/* ── Arreglos del vidrio: recortes y contraste ── */

/* Los carruseles scrollean con overflow-x, y eso recorta TODO lo que
   sobresalga: la sombra de las tarjetas se cortaba de golpe y el
   corazón de favorito quedaba comido. Se les da aire adentro del área
   que scrollea y se compensa a los costados para no correr el
   contenido de su lugar. */
.home-carrusel,
.home-atajos {
  padding-top: 14px;
  padding-bottom: 28px;   /* cubre los 28px de alcance de la sombra */
  padding-inline: 8px;
  margin-inline: -8px;
}
.home-atajos { padding-top: 20px; }

/* En la tarjeta chica el corazón va en la fila del logo, no flotando:
   .mkp-fav-btn es absolute con top/right negativos (así se cuelga del
   borde en la tarjeta ancha del listado), y acá eso lo dejaba fuera
   del recorte del carrusel. */
.home-tarjeta .mkp-fav-btn {
  position: static;
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--vidrio-borde);
}

/* La tarjeta ancha del listado sí cuelga el corazón del borde: como
   ahora es de vidrio y recorta (overflow:hidden), se lo trae adentro
   para que no se coma el círculo. */
.mkp-card .mkp-fav-btn { top: 6px; right: 6px; }

/* ── Contraste sobre vidrio ──
   El gris de siempre (#6E6E68) se apoyaba en un fondo negro fijo.
   Con vidrio, atrás pasa el degradado de marca y ese gris deja de
   leerse: se pasa a blanco atenuado.
   La sombra que acompañaba a este texto se sacó — hacía falta
   cuando el contraste venía justo, y con el blanco atenuado y el
   naranja del acento ya no aporta nada más que suciedad. */
body {
  --texto-2: rgba(255, 255, 255, 0.74);
  --texto-3: rgba(255, 255, 255, 0.52);
}

/* ── Durazno para los detalles que tienen que saltar ──
   La paleta es azul de punta a punta; si el precio también fuera
   azul se perdería entre todo lo demás. El durazno es el único
   contraste cálido del manual (10:1 sobre el fondo) y por eso queda
   reservado para lo que el comprador busca con la vista: el precio. */
.mkp-prod-price,
.detalle-producto .precio-grande,
.prod-price {
  color: var(--detalle);
}