/* ============================================================
   RECARGAS MELIODAS · Sistema de diseño
   Reglas de la casa:
     - Colores SÓLIDOS. Cero linear-gradient / radial-gradient.
     - Cero emojis. Los íconos son SVG de trazo, siempre.
     - Dos acentos y nada más: morado (acciones) y magenta (precios/énfasis).
       El resto es superficie, borde y texto. Es lo que hace que no se vea
       generada: cuando todo brilla, nada resalta.
     - Nada de imágenes detrás del contenido: el arte va DENTRO de la tarjeta
       del producto, nunca de fondo del texto.
   ============================================================ */

:root {
  /* Superficies */
  --bg:        #0A0612;
  --surface:   #140B23;
  --surface-2: #1C0F2E;
  --surface-3: #2A1745;

  /* Acentos */
  --purple:    #8B2FD9;
  --purple-hi: #A855F7;
  --magenta:   #E6218C;

  /* Texto */
  --text:      #F3EDFB;
  --soft:      #AC9BC7;
  --dim:       #7A6795;

  /* Bordes */
  --border:      #2A1745;
  --border-soft: #201233;

  /* Semánticos */
  --green: #22C55E;
  --amber: #F59E0B;
  --red:   #F43F5E;

  /* Medidas */
  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      560px;
  --gap:       12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El color de fondo va en html, no en body: así la marca de agua de abajo
   (body::before, que va detrás del contenido) no queda tapada por el fondo del body. */
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: transparent;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px;               /* aire para los botones flotantes */
}

/* ── Marca de agua del fondo ─────────────────────────────────────
   El logotipo de la marca, bien bajito, para que el fondo no se vea vacío
   en pantallas grandes. Va fijo: no se mueve al bajar. No recibe clics y
   queda detrás de todo, así que no le quita contraste a ningún texto.

   La imagen ya viene sin el fondo azul del original y con la transparencia
   aplicada encima de este mismo --bg (pesa 6 KB en vez de 158). Por eso NO
   lleva opacity acá: si se cambia --bg, hay que regenerar la imagen. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Grande a propósito: en escritorio tiene que asomar por los lados de la columna
     de contenido, si no solo se ven pedazos y parece una mancha. En teléfono se sale
     por los bordes, que es justo lo que se quiere de una marca de agua. */
  background: url('/img/fondo-marca.webp?v=2') no-repeat center 34% / min(1080px, 200%) auto;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }

/* Foco visible: accesibilidad y sensación de producto cuidado */
:focus-visible { outline: 2px solid var(--purple-hi); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 14px; }
.oculto { display: none !important; }

/* ── Barra de marca ─────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 13px 14px;
  text-align: center;
  position: relative;
}
.topbar .marca {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.topbar .marca b { color: var(--magenta); font-weight: 800; }
/* Barra compacta: ícono + nombre en una sola fila.
   El logo completo es vertical (emblema sobre la palabra) y ocupaba 200 px de alto, lo que
   empujaba el campo del ID fuera de la primera pantalla. En una tienda lo primero que se tiene
   que ver es dónde poner el ID, así que arriba va solo el ícono. */
.marca-fila { display: flex; align-items: center; justify-content: center; gap: 11px; }
.logo-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; object-fit: cover;
  /* El archivo tiene fondo negro propio (#030006); el borde lo despega de la barra. */
  border: 1px solid var(--border);
}
@media (max-width: 380px) {
  .logo-ico { width: 34px; height: 34px; }
  .topbar .marca { font-size: 15px; letter-spacing: 1.6px; }
}

/* ── Contadores ─────────────────────────────────────────────── */
.contadores {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.contador { display: flex; align-items: center; gap: 9px; }
.contador .n { font-size: 16px; font-weight: 800; color: var(--magenta); }
.contador .l { font-size: 11px; color: var(--soft); line-height: 1.25; max-width: 92px; }

/* ── Ticker de recargas ─────────────────────────────────────── */
.ticker {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 8px 0;
  position: relative;
}
.ticker-pista {
  display: flex;
  gap: 30px;
  white-space: nowrap;
  width: max-content;
  animation: correr 55s linear infinite;
}
.ticker:hover .ticker-pista { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-pista { animation: none; }
  .ticker { overflow-x: auto; }
}
.ticker-item { font-size: 12px; color: var(--soft); display: flex; align-items: center; gap: 7px; }
.ticker-item b { color: var(--text); font-weight: 700; }
.ticker-item .cant { color: var(--magenta); font-weight: 700; }
.ticker-item .t { color: var(--dim); }
.punto { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: none; }

/* ── Tarjeta ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}
.card-tit {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--soft);
  margin-bottom: 14px;
}
.card-tit svg { color: var(--magenta); flex: none; }

/* Cabecera de la tarjeta con el arte del juego */
.juego-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.juego-cab img { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; flex: none;
                 border: 1px solid var(--border); }
.juego-cab-nom { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 3px; }

/* Chip de paso. Sólido, sin degradado. */
.paso {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--purple); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  padding: 5px 11px; border-radius: 20px; text-transform: uppercase;
}
.paso-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; }
.paso-head h2 { font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

/* ── Campos ─────────────────────────────────────────────────── */
label.campo { display: block; font-size: 12px; color: var(--soft); margin-bottom: 6px; font-weight: 600; }
label.campo .req { color: var(--magenta); font-size: 10px; font-weight: 700; letter-spacing: .6px; margin-left: 5px; }
label.campo .opt { color: var(--dim); font-size: 10px; font-weight: 600; margin-left: 5px; }

.input, input[type=text], input[type=email], input[type=tel], input[type=number] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  font-size: 16px;                    /* 16px evita el zoom automático en iOS */
  transition: border-color .15s;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--purple-hi); }
.input.grande { font-size: 21px; font-weight: 700; letter-spacing: 1.5px; text-align: center; }
.input.error { border-color: var(--red); }

.ayuda { font-size: 11.5px; color: var(--dim); margin-top: 6px; }
.ayuda.mal { color: var(--red); }
.ayuda.bien { color: var(--green); }

.fila-input { display: flex; gap: 10px; align-items: stretch; }
.fila-input .input { flex: 1; min-width: 0; }

.prefijo {
  display: flex; align-items: center; padding: 0 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--soft); font-weight: 700; font-size: 15px;
}
.prefijo + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--purple); color: #fff;
  border: 1px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { background: var(--purple-hi); border-color: var(--purple-hi); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ancho { width: 100%; }
.btn.fantasma { background: transparent; border-color: var(--border); color: var(--text); }
.btn.fantasma:hover:not(:disabled) { background: var(--surface-2); border-color: var(--purple); }
.btn.chico { padding: 9px 14px; font-size: 13px; }
.btn.icono { padding: 14px; flex: none; }

/* ── Paquetes ───────────────────────────────────────────────── */
.grid-paq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 380px) { .grid-paq { grid-template-columns: 1fr; } }

.paq {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.paq:hover { border-color: var(--purple); }
.paq[aria-pressed="true"] { border-color: var(--magenta); background: var(--surface-3); }
/* El nombre puede ocupar dos líneas ("1060+106 Diamantes"), así que el ícono se alinea con la
   primera línea en vez de quedar centrado y descolgado al lado del bloque. */
.paq .cantidad { display: flex; align-items: flex-start; justify-content: center; gap: 6px;
                 font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25;
                 text-wrap: balance; }
.paq .cantidad svg { margin-top: 3px; }
.paq .cantidad svg { color: var(--magenta); flex: none; }
.paq .bs { font-size: 15px; font-weight: 700; color: var(--magenta); margin-top: 5px; }
.paq .usd { font-size: 11px; color: var(--dim); }
.paq .pts { font-size: 11px; color: var(--soft); margin-top: 4px; }
/* El arte del paquete es un banner ancho con su etiqueta ("310 DIAMANTES + 31 BONUS"), así que
   va como franja arriba de la tarjeta. Recortarlo a un cuadradito escondería justo la etiqueta. */
.paq .arte {
  display: block; width: 100%; height: auto;
  aspect-ratio: 640 / 298; object-fit: cover;
  border-radius: 8px; margin: -3px 0 10px;
}
.paq.con-arte { padding: 12px 10px 14px; }

.etiqueta {
  position: absolute; top: -8px; right: 9px;
  background: var(--magenta); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.subsec {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--soft); margin: 22px 0 11px;
  display: flex; align-items: center; gap: 8px;
}
.subsec::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Cantidad ───────────────────────────────────────────────── */
.cants { display: flex; gap: 8px; }
.cants button {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 0;
  font-size: 15px; font-weight: 700; cursor: pointer; transition: .15s;
}
.cants button[aria-pressed="true"] { border-color: var(--magenta); background: var(--surface-3); color: var(--text); }

/* ── Datos de pago copiables ────────────────────────────────── */
.dato {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 9px;
}
.dato .k { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
/* "anywhere" en vez de "break-all": parte por los espacios primero, así un nombre largo
   como el del beneficiario no queda cortado a mitad de palabra. */
.dato .v { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dato .v.plata { color: var(--green); }
.copiar {
  flex: none; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; width: 40px; height: 40px;
  display: grid; place-items: center; cursor: pointer; color: var(--soft); transition: .15s;
}
.copiar:hover { border-color: var(--purple); color: var(--text); }
.copiar.hecho { border-color: var(--green); color: var(--green); }

/* Bloque del QR. El QR va sobre fondo BLANCO siempre: sobre oscuro muchos lectores fallan. */
.qr-caja {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
}
.qr-caja img { width: 108px; height: 108px; flex: none; background: #fff;
               border-radius: 8px; padding: 6px; object-fit: contain; }
.qr-txt { min-width: 0; }
.qr-tit { font-size: 13.5px; font-weight: 700; color: var(--magenta); margin-bottom: 4px; }
.qr-txt p { font-size: 12px; color: var(--soft); line-height: 1.5; }
.qr-o { color: var(--dim); margin-top: 6px; font-size: 11.5px; }
@media (max-width: 420px) {
  .qr-caja { flex-direction: column; text-align: center; }
  .qr-caja img { width: 150px; height: 150px; }
}

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs button {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px; font-size: 13px; font-weight: 700;
  cursor: pointer; color: var(--soft);
}
.tabs button[aria-selected="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ── Subir comprobante ──────────────────────────────────────── */
.subir {
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 26px 16px; text-align: center; cursor: pointer;
  background: var(--bg); transition: .15s;
}
.subir:hover { border-color: var(--purple); }
.subir svg { color: var(--dim); margin-bottom: 8px; }
.subir .t1 { font-size: 14px; font-weight: 600; }
.subir .t2 { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.subir.cargado { border-style: solid; border-color: var(--green); }
.subir img { max-height: 150px; border-radius: 8px; margin: 0 auto; }

/* ── Total ──────────────────────────────────────────────────── */
.total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--magenta);
  border-radius: var(--radius-sm); padding: 16px; margin-top: 18px;
}
.total .k { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--soft); }
.total .v { font-size: 24px; font-weight: 800; color: var(--magenta); }
.total .usd { font-size: 12px; color: var(--dim); text-align: right; }

/* ── Jugador verificado ─────────────────────────────────────── */
.jugador {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--green);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 12px;
}
.jugador .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-3);
               display: grid; place-items: center; color: var(--green); flex: none; }
.jugador .k { font-size: 10.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
.jugador .v { font-size: 16px; font-weight: 700; }
.jugador.aviso { border-color: var(--amber); }
.jugador.aviso .ic { color: var(--amber); }

/* Cargando: barra sólida que recorre, sin degradado */
.cargando { text-align: center; padding: 26px 0; }
.cargando .txt { font-size: 12px; font-weight: 700; letter-spacing: 1.8px;
                 text-transform: uppercase; color: var(--soft); margin-bottom: 13px; }
.barra { height: 3px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 38%; background: var(--magenta); border-radius: 3px;
           animation: vaiven 1.1s ease-in-out infinite; }
@keyframes vaiven { 0% { transform: translateX(-100%); } 100% { transform: translateX(365%); } }

/* ── Último ID ──────────────────────────────────────────────── */
.ultimo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px; margin-top: 11px;
}
.ultimo .k { font-size: 11.5px; color: var(--soft); }
.ultimo .v { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 15px;
             font-weight: 700; color: var(--magenta); }

/* ── Otros juegos ───────────────────────────────────────────── */
.seccion {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--soft); margin: 32px 0 14px;
}
.juego {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .15s;
}
.juego:hover { border-color: var(--purple); }
.juego .arte { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none;
               background: var(--surface-3); }
.juego .arte-txt { width: 44px; height: 44px; border-radius: 9px; flex: none;
                   background: var(--surface-3); display: grid; place-items: center;
                   font-weight: 800; font-size: 15px; color: var(--soft); }
.juego .nom { font-size: 15px; font-weight: 700; }
.juego .info { flex: 1; min-width: 0; }
.juego .flecha { color: var(--dim); flex: none; }
.juego.no { opacity: .55; cursor: default; }
.juego.no:hover { border-color: var(--border); }

.badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-top: 4px;
}
.badge.si   { background: var(--green); color: #06240F; }
.badge.pron { background: var(--surface-3); color: var(--soft); }

/* ── Flotantes ──────────────────────────────────────────────── */
.flotantes { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column;
             gap: 9px; z-index: 40; align-items: flex-end; }
.flot {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 10px 15px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s;
}
.flot:hover { border-color: var(--purple); }
.flot.wa { background: var(--green); border-color: var(--green); color: #06240F; }

/* ── Mensajes ───────────────────────────────────────────────── */
.msg { border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 14px;
       font-size: 13.5px; border: 1px solid; }
.msg.err  { background: #2A0A15; border-color: var(--red);   color: #FFB3C1; }
.msg.ok   { background: #08240F; border-color: var(--green); color: #A7F3C0; }
.msg.info { background: var(--surface-2); border-color: var(--border); color: var(--soft); }

/* Aviso que aparece al copiar */
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--purple);
  color: var(--text); padding: 11px 18px; border-radius: 22px;
  font-size: 13px; font-weight: 600; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.ver { opacity: 1; }

/* ── Pie ────────────────────────────────────────────────────── */
/* El sitio para los botones flotantes ya lo da el padding-bottom del body */
.pie { text-align: center; padding: 30px 14px 18px; color: var(--dim); font-size: 11.5px;
       border-top: 1px solid var(--border-soft); margin-top: 34px; }
.pie a { color: var(--soft); }
.pie .redes { display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; }
.pie .redes a { color: var(--soft); }
.pie .redes a:hover { color: var(--magenta); }
/* Descargo de marcas: chico y al final, como en cualquier tienda seria. */
.pie-legal { max-width: 480px; margin: 10px auto 0; font-size: 10.5px; line-height: 1.6;
             color: var(--dim); }

/* ============================================================
   PÁGINA DEL PEDIDO (confirmacion.html)
   Mismos colores planos: el estado se distingue por el color del
   borde y del ícono, nunca por degradados ni resplandores.
   ============================================================ */

/* Referencia del pedido, arriba de todo: es el dato que el cliente necesita a mano */
.ref-caja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
}
.ref-caja .k { font-size: 10.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .9px; }
.ref-caja .v { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 20px;
               font-weight: 800; color: var(--magenta); letter-spacing: 1px; }

/* Bloque de estado. El color lo pone la clase (.esperando/.listo/.parcial/.malo). */
.estado { display: flex; gap: 13px; align-items: flex-start;
          border: 1px solid var(--border); border-radius: var(--radius-sm);
          background: var(--surface-2); padding: 15px; }
.estado .ic { width: 38px; height: 38px; border-radius: 9px; flex: none;
              display: grid; place-items: center;
              background: var(--surface-3); color: var(--soft); }
.estado h1 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 4px; }
.estado p  { font-size: 13px; color: var(--soft); line-height: 1.55; }
.estado.esperando { border-color: var(--purple); }
.estado.esperando .ic { color: var(--purple-hi); }
.estado.listo     { border-color: var(--green); }
.estado.listo .ic { color: var(--green); }
.estado.parcial     { border-color: var(--amber); }
.estado.parcial .ic { color: var(--amber); }
.estado.malo     { border-color: var(--red); }
.estado.malo .ic { color: var(--red); }

/* Punto que late mientras se verifica el pago: la única animación de la página */
.late { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Filas de resumen (total, fecha, método) */
.linea { display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.linea:last-child { border-bottom: 0; }
.linea .k { color: var(--soft); }
.linea .v { font-weight: 700; text-align: right; }

/* Lo entregado: cada recarga con su resultado */
.entrega { background: var(--bg); border: 1px solid var(--border);
           border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 9px; }
.entrega .nom { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.entrega .sub { font-size: 11.5px; color: var(--dim); }
.entrega .cod { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                background: var(--surface-2); border: 1px solid var(--green);
                border-radius: 8px; padding: 11px 12px; margin-top: 10px; }
.entrega .cod code { font-family: ui-monospace, 'Cascadia Code', monospace;
                     font-size: 15px; font-weight: 700; color: var(--green);
                     word-break: break-all; line-height: 1.4; }
.entrega .est { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
                font-size: 12px; font-weight: 700; color: var(--soft); }

/* ============================================================
   PÁGINAS DE TEXTO (términos, privacidad, preguntas)
   ============================================================ */
.texto h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.texto h1 b { color: var(--magenta); font-weight: 800; }
.texto .fecha { font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.texto h2 { font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
            color: var(--soft); margin: 22px 0 8px; }
.texto h2:first-of-type { margin-top: 18px; }
.texto p { font-size: 13.5px; color: var(--soft); line-height: 1.65; }
.texto ul { margin: 6px 0 0 18px; }
.texto li { font-size: 13.5px; color: var(--soft); line-height: 1.65; margin-bottom: 5px; }
.texto b, .texto strong { color: var(--text); font-weight: 700; }

/* Acordeón de preguntas: cerrado por defecto, sin scroll infinito de texto */
.preg { border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--bg); margin-bottom: 9px; overflow: hidden; }
.preg > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 14px 15px; font-size: 14.5px; font-weight: 700; color: var(--text);
}
.preg > button svg { flex: none; color: var(--dim); transition: transform .2s, color .2s; }
.preg .r { max-height: 0; overflow: hidden; padding: 0 15px;
           font-size: 13.5px; color: var(--soft); line-height: 1.65;
           transition: max-height .25s ease, padding .25s ease; }
.preg.abierta { border-color: var(--purple); }
.preg.abierta > button svg { transform: rotate(90deg); color: var(--magenta); }
.preg.abierta .r { max-height: 320px; padding: 0 15px 15px; }

/* Pasos numerados de "qué sigue ahora" */
.pasos { counter-reset: p; }
.pasos li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0;
            font-size: 13px; color: var(--soft); line-height: 1.5; }
.pasos li .n { counter-increment: p; flex: none;
               width: 22px; height: 22px; border-radius: 50%;
               background: var(--surface-3); color: var(--text);
               font-size: 11px; font-weight: 800;
               display: grid; place-items: center; }
.pasos li .n::before { content: counter(p); }