/* Guía «Pagar con Bitcoin» (/{lang}/bitcoin). La genera _scripts/guia-bitcoin.py.
 * Colores de la maqueta aprobada el 8-nov-2026: morado de cripto como en el checkout,
 * errores en ámbar y confirmación en verde. Todo el texto con contraste de 4,5:1 o más. */

.guia-btc { max-width: 720px; margin: 0 auto; padding: 8px 16px 48px; color: var(--text); font-family: var(--font-body); }
.guia-btc h1, .guia-btc h2, .guia-btc h3 { font-family: var(--font-headline); }
.guia-btc h2 { margin: 0 0 14px; font-size: 22px; color: var(--primary); }
.guia-btc h3 { margin: 0 0 4px; font-size: 16px; }
.guia-btc p { margin: 0; line-height: 1.55; }

.gb-hero { background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 16px; padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; }
.gb-hero h1 { margin: 0; font-size: 30px; line-height: 1.15; color: #4c1d95; }
.gb-entradilla { font-size: 17px; }
.gb-ejemplo { font-size: 15px; color: var(--muted); }

.gb-seccion { margin-top: 36px; }
.gb-seccion > p { color: #334155; margin-bottom: 14px; }

.gb-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.gb-pasos li { display: flex; gap: 14px; align-items: flex-start; }
.gb-pasos p { font-size: 15px; color: #334155; }
.gb-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-headline); font-weight: 700; }
.gb-datos { margin: 10px 0 0; background: var(--light-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.gb-datos div { display: flex; gap: 10px; }
.gb-datos dt { font-weight: 700; flex: 0 0 9.5em; }
.gb-datos dd { margin: 0; }
.guia-btc .gb-nota { margin-top: 10px; font-size: 15px; color: #334155; }

.guia-btc .gb-ok { margin: 18px 0 0; display: flex; gap: 12px; align-items: center; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 14px; color: #14532d; font-size: 15px; }
.gb-ok svg { flex-shrink: 0; width: 22px; height: 22px; color: #15803d; }

.gb-app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gb-pantalla { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gb-pantalla figcaption { font-size: 14px; font-weight: 700; color: var(--primary); }
.gb-movil { min-height: 250px; box-sizing: border-box; border: 2px solid var(--text); border-radius: 18px; padding: 12px 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 12px; overflow-wrap: anywhere; }
.gb-m-sup { font-size: 11px; color: var(--muted); text-align: center; }
.gb-m-tit { font-weight: 700; text-align: center; }
.gb-m-etq { font-size: 11px; color: var(--muted); }
.gb-m-fila { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.gb-m-fila b { flex: 1; }
.gb-m-fila span { font-size: 11px; color: var(--muted); }
.gb-btc { width: 22px; height: 22px; flex-shrink: 0; }
.gb-m-hueco { flex: 1; }
.gb-m-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* overflow-wrap normal: en botones una palabra nunca se parte (el griego «Αποστολή» se partía). */
.gb-m-boton { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 17px; background: var(--primary); color: #fff; font-weight: 700; text-align: center; padding: 0 3px; overflow-wrap: normal; }
.gb-m-dos .gb-m-boton { font-size: 11px; }
.gb-m-gris { background: #f1f5f9; color: #334155; font-weight: 600; }
.gb-m-clave { box-shadow: 0 0 0 3px #e9d5ff; }
.gb-m-boton.gb-m-clave { background: #7c3aed; }
.gb-m-campo { border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; }
.gb-m-campo.gb-m-clave { border: 2px solid #7c3aed; background: #faf5ff; box-shadow: none; }
.gb-m-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.gb-m-cifra { font-family: var(--font-headline); font-size: 15px; font-weight: 700; text-align: center; }
.gb-m-selector { background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 4px; text-align: center; }
.gb-m-selector span { display: flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 6px; color: #334155; }
.gb-m-selector .gb-m-sel { background: #7c3aed; color: #fff; font-weight: 700; }
.gb-m-recibe { font-size: 11px; font-weight: 700; color: var(--success); text-align: center; }

.gb-error { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.gb-error h3 { color: #9a3412; font-size: 15px; }
.gb-error p { color: #431407; font-size: 15px; }

.guia-btc .gb-cta { margin-top: 32px; }
.gb-boton { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; background: var(--primary); color: #fff; font-family: var(--font-headline); font-size: 16px; font-weight: 600; }
.gb-boton:hover { background: #0a5a8f; }
.gb-video { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 16px; background: var(--primary); }

@media (min-width: 700px) {
  .gb-app { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* En móvil la etiqueta va encima del valor: en dos columnas el valor quedaba en 4 líneas. */
@media (max-width: 480px) {
  .gb-datos div { flex-direction: column; gap: 0; }
  .gb-datos dt { flex: none; }
}
@media (max-width: 359px) {
  .gb-app { grid-template-columns: minmax(0, 1fr); }
}