/* IMPOLAPTOPS · página de cada laptop (producto.html) y pasos de pago (pago.html) */

/* ---------- Migas ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 18px; font-size: 14px; color: var(--tenue); }
.migas a { color: var(--texto-2); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.migas a:hover { text-decoration-color: currentColor; }
.migas [aria-current] { color: var(--texto); font-weight: 700; }

/* ---------- Producto: galería a la izquierda, compra a la derecha ---------- */
.producto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.producto-galeria { position: sticky; top: 96px; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-tarjeta); background: var(--blanco); box-shadow: var(--sombra); }
.producto-galeria .galeria-pista { background: var(--fondo); }
.producto-galeria .galeria-pista figure { padding: 24px; }
.producto-galeria .pendiente { display: grid; justify-items: center; gap: 6px; color: var(--tenue); }
.producto-galeria .pendiente .ico { width: 56px; height: 56px; stroke-width: 1.3; }
.producto-galeria .distintivos { left: 14px; top: 14px; }
.producto-galeria .miniaturas button { background: var(--fondo); }

.producto-info { display: flex; flex-direction: column; gap: 16px; }
.producto-nombre { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.producto-specs { margin-top: -6px; font-size: 16.5px; color: var(--texto-2); }
.producto-info .ficha-precios b { font-size: 30px; }
.producto-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--texto-2); }
.producto-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: #1fa463; box-shadow: 0 0 0 4px rgba(31, 164, 99, .16); }
.producto-estado.agotada { color: var(--oferta); }

.producto-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.producto-botones .boton-principal { grid-column: 1 / -1; }
.boton-grande { min-height: 56px; font-size: 16px; }
.producto-botones [data-agregar][aria-pressed="true"] { background: var(--turquesa-suave); color: var(--turquesa-fuerte); box-shadow: none; }

.producto-entrega { display: grid; gap: 2px; list-style: none; padding: 6px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linea); }
.producto-entrega li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 0; }
.producto-entrega li + li { border-top: 1px solid var(--linea); }
.producto-entrega .ico { width: 22px; height: 22px; color: var(--turquesa-fuerte); margin-top: 1px; }
.producto-entrega b { display: block; font-size: 15px; }
.producto-entrega span { font-size: 14px; color: var(--tenue); }

/* ---------- Detalle: especificaciones y revisión ---------- */
.producto-detalle { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 40px; margin-top: 18px; }
.producto-bloque { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-tarjeta); background: var(--blanco); box-shadow: var(--sombra); }
.producto-subtitulo { font-family: var(--f-titulo); font-weight: 700; font-size: 22px; letter-spacing: -.015em; }
.producto-bloque .revisados { font-size: 15px; gap: 10px 14px; }
.producto-garantia { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--turquesa-suave); color: var(--texto); font-size: 14.5px; }
.producto-garantia .ico { flex: none; width: 26px; height: 26px; color: var(--turquesa-fuerte); }

.relacionadas { display: grid; gap: 24px; margin: 72px 0 80px; }
.relacionadas .titulo em { display: inline; }

/* ---------- Barra fija del celular ---------- */
.producto-barra { display: none; }
@media (max-width: 920px) {
  .producto { grid-template-columns: 1fr; gap: 22px; }
  .producto-galeria { position: static; padding: 10px; }
  .producto-galeria .galeria-pista { aspect-ratio: 16 / 11; }
  .producto-galeria .galeria-pista figure { padding: 12px; }
  .producto-detalle { grid-template-columns: 1fr; margin-top: 8px; gap: 18px; }
  .relacionadas { margin: 48px 0 56px; }

  .pagina-producto .barra-lista { display: none !important; }
  .pagina-producto .wa-flotante { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  .pagina-producto .aviso { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .pagina-producto .pie { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .producto-barra:not([hidden]) {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-flotante);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px;
    background: var(--vidrio-fondo, var(--blanco)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--vidrio-borde, transparent), var(--sombra-alta);
    animation: sube 280ms var(--ease-out);
  }
  .producto-barra div { display: grid; min-width: 0; }
  .producto-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--tenue); }
  .producto-barra b { font-family: var(--f-titulo); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
}
@media (max-width: 520px) {
  .migas { margin: 18px 0 12px; font-size: 13px; }
  .producto-botones { grid-template-columns: 1fr; }
  .producto-bloque { padding: 18px; }
  .producto-bloque .revisados { grid-template-columns: 1fr 1fr; font-size: 14px; }
  .producto-info .ficha-precios b { font-size: 24px; }
}

/* la pista solo se desliza de lado; cada foto cabe completa en su cuadro */
.producto-galeria .galeria-pista { overflow-y: hidden; }
.producto-galeria .galeria-pista figure { min-height: 0; height: 100%; overflow: hidden; }
.producto-galeria .galeria-pista img { min-height: 0; max-height: 100%; }

.producto-pagos { display: grid; gap: 8px; margin-top: -4px; }
.producto-pagos > span { font-size: 13.5px; font-weight: 600; color: var(--tenue); }
.producto-pagos ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.producto-pagos li { padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: 13px; font-weight: 600; color: var(--texto-2); }