/* ============================================================
   Página de producto: {marca} gift card {país}
   Un solo bloque a la derecha (.pc) hace todo: elegís el monto,
   ves el precio, ves para cuánto te alcanza y comprás. Una sola
   selección de denominación en toda la página — nada duplicado.
   ============================================================ */

.breadcrumb { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); padding: 18px 0 2px; }
.breadcrumb a:hover { color: var(--stamp); }

.producto { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; padding: 18px 0 52px; align-items: start; }

/* ---------- Imagen del producto ---------- */
.producto-media {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2);
  background: var(--paper-2); margin-bottom: 22px; aspect-ratio: 16 / 9;
  box-shadow: 0 10px 30px rgba(18,21,26,.10);
}
.producto-media img, .producto-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Columna de contenido ---------- */
.contenido h1 { margin: 6px 0 12px; }
.contenido .resumen { color: var(--ink-2); margin-bottom: 26px; }
.bloque { margin-bottom: 34px; }
.bloque h2 { font-size: 1.35rem; margin-bottom: 12px; }
.bloque p + p { margin-top: 10px; }

/* ============================================================
   .pc — el bloque único: monto + precio + cobertura + comprar
   ============================================================ */
.pc {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  position: sticky; top: 84px;
  box-shadow: 0 18px 44px rgba(18,21,26,.10);
}
.pc-top {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, var(--brand, var(--stamp)), color-mix(in srgb, var(--brand, var(--stamp)) 70%, #000));
}
.pc-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; color: #fff; }
.pc-flag {
  font-family: var(--font-num); font-weight: 700; font-size: .74rem; letter-spacing: .03em;
  padding: 5px 11px; border-radius: 100px; color: #fff; background: rgba(255,255,255,.22);
  backdrop-filter: blur(2px);
}

.pc-body { padding: 22px 24px 26px; }

.stock { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--value); font-weight: 600; margin-bottom: 16px; }
.stock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--value); box-shadow: 0 0 0 4px var(--value-soft); }

.pc-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--ink); margin-bottom: 10px; }

/* Selector de monto: UNA sola vez en toda la página */
.pc-denoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 20px; }
.pc-denom {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 8px; border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer;
  background: var(--paper); transition: border-color .12s ease, background .12s ease, transform .12s ease;
  text-align: center;
}
.pc-denom:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pc-denom.sel {
  border-color: var(--brand, var(--stamp));
  background: color-mix(in srgb, var(--brand, var(--stamp)) 9%, #fff);
  box-shadow: inset 0 0 0 1.5px var(--brand, var(--stamp));
}
.pc-denom.off { opacity: .45; cursor: not-allowed; }
/* Un solo número por casillero: el VALOR de la tarjeta. El precio final vive en el botón. */
.pc-nominal { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.24rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.pc-agotado { font-family: var(--font-num); font-size: .74rem; color: var(--muted); }
.pc-explain { font-size: .78rem; color: var(--muted); margin: -10px 0 20px; line-height: 1.5; }
.pc-explain b { color: var(--ink-2); }

/* Cobertura: pastillas compactas, integradas justo debajo del selector.
   Nada de barras enormes ni un segundo selector — solo lee el resultado. */
.pc-coverage { margin-bottom: 20px; }
.pc-coverage-label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 9px;
}
.pc-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-pill {
  font-family: var(--font-num); font-size: .82rem; font-weight: 600;
  padding: 7px 12px; border-radius: 100px; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-2);
}
.pc-pill b { font-weight: 800; }
.pc-pill[data-heat="0"] { background: #FBE9E8; color: var(--heat-1); }
.pc-pill[data-heat="1"] { background: var(--gold-soft); color: var(--heat-2); }
.pc-pill[data-heat="2"] { background: var(--value-soft); color: var(--heat-3); }
.pc-pill[data-heat="3"] { background: var(--stamp-soft); color: var(--heat-4); }

/* Google Play (saldo): lista de usos en vez de cobertura en meses */
.pc-usos { margin-bottom: 20px; }
.pc-usos-list { list-style: none; display: grid; gap: 7px; }
.pc-usos-list li {
  font-family: var(--font-num); font-size: .88rem; font-weight: 600; color: var(--ink-2);
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline;
}
.pc-usos-list li::before { content: "•"; color: var(--brand, var(--stamp)); font-weight: 900; }

.pc-meta { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin-top: 16px; display: grid; gap: 5px; }
.pc-meta span { display: flex; justify-content: space-between; gap: 10px; }
.pc-meta b { color: var(--ink-2); font-weight: 500; }

/* ---------- Medios de pago del país ---------- */
.pagos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pago {
  font-family: var(--font-num); font-weight: 600; font-size: .82rem;
  padding: 8px 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: 100px;
}

/* ---------- Pasos de canje ---------- */
.pasos { list-style: none; counter-reset: p; display: grid; gap: 12px; margin-top: 12px; }
.pasos li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: .95rem; }
.pasos li::before {
  counter-increment: p; content: counter(p);
  font-family: var(--font-num); font-weight: 700; font-size: .76rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand, var(--ink)); color: #fff;
  display: grid; place-items: center;
}

/* ---------- FAQ ---------- */
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 9px; padding: 14px 16px;
}
.faq summary { font-weight: 600; cursor: pointer; font-size: .96rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-family: var(--font-mono); color: var(--brand, var(--stamp)); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--ink-2); font-size: .93rem; }

/* ---------- Otros países de la misma marca ---------- */
.otros-paises { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.otros-paises a {
  font-family: var(--font-num); font-weight: 600; font-size: .82rem;
  padding: 8px 13px; border: 1px solid var(--line-2);
  border-radius: 100px; background: var(--card);
}
.otros-paises a:hover { border-color: var(--brand, var(--stamp)); color: var(--brand, var(--stamp)); }

@media (max-width: 900px) {
  .producto { grid-template-columns: 1fr; gap: 30px; }
  .pc { position: static; }
  .pc-denoms { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .pc-denoms { grid-template-columns: repeat(2, 1fr); }
}