/* LOW · Tienda de gemas (gemas.html + js/gemas.js). Mismo estilo que el resto (css/estilo.css): piedra oscura y oro.
   Sin estilos en linea (la CSP solo deja archivos propios). */
.tope-gemas { background-position: 50% 30%; }

.gemas-rejilla { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1170px; }
.gemas-principal, .gemas-lado { display: grid; gap: 22px; min-width: 0; }
.gemas-tarjeta { padding: 28px 30px 30px; }
.gemas-tarjeta h2 { font: 700 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); color: #fff; margin: 0 0 8px; }
.gemas-tarjeta h3 { font: 700 18px/1.3 var(--serif); color: var(--oro-claro); margin: 0; }
.gemas-nota { color: var(--suave); font-size: 14.5px; margin: 0 0 10px; }

/* aviso de modo prueba */
.gemas-prueba {
  margin: 0; padding: 12px 16px; border: 1px dashed rgba(240, 160, 80, .7); border-radius: 4px;
  background: rgba(240, 160, 80, .1); color: #ffd9a8; font-size: 15px;
}
.gemas-prueba strong { color: #ffb466; letter-spacing: 1px; text-transform: uppercase; }

/* formulario */
.gemas-form { display: grid; gap: 24px; }
.gemas-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gemas-form legend { display: block; padding: 0; margin: 0 0 12px; }
.gemas-grupo { display: grid; gap: 12px; }
.gemas-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 4px; background: var(--tarjeta-in);
  color: var(--texto); font: 400 16px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
}

/* paquetes */
.gemas-paquetes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gemas-paquetes legend { grid-column: 1 / -1; }
.gemas-paquete, .gemas-pago { position: relative; display: block; cursor: pointer; }
.gemas-paquete input, .gemas-pago input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gemas-caja {
  display: flex; flex-direction: column; align-items: center; height: 100%; padding: 10px 6px 14px;
  border: 1px solid var(--borde); border-radius: 6px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(214, 178, 104, .12), transparent 70%), var(--tarjeta-in);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gemas-caja img { width: 100%; max-width: 92px; aspect-ratio: 1; height: auto; object-fit: contain; margin: 6px 0 10px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.gemas-n { font: 700 26px/1.1 var(--serif); color: #fff; }
.gemas-g { color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.gemas-precio {
  margin-top: auto; padding: 5px 10px; border-radius: 20px; background: rgba(214, 178, 104, .12);
  color: var(--oro-claro); font: 700 14px/1.2 var(--sans); white-space: nowrap;
}
.gemas-paquete:hover .gemas-caja, .gemas-pago:hover .gemas-pago-caja { border-color: var(--borde-fuerte); }
.gemas-paquete input:checked + .gemas-caja {
  border-color: var(--oro); transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--oro), 0 6px 22px rgba(224, 184, 92, .25);
  background: radial-gradient(ellipse at 50% 30%, rgba(214, 178, 104, .25), transparent 72%), var(--tarjeta-in);
}
.gemas-paquete input:checked + .gemas-caja .gemas-precio { background: linear-gradient(#f4d98f, #d4a54c 52%, #a97a2c); color: #1b1206; }
.gemas-paquete input:focus-visible + .gemas-caja, .gemas-pago input:focus-visible + .gemas-pago-caja { outline: 2px solid var(--oro-claro); outline-offset: 3px; }

/* forma de pago */
.gemas-pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gemas-pago-caja {
  display: grid; gap: 2px; height: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--tarjeta-in); position: relative; transition: border-color .15s, box-shadow .15s;
}
.gemas-pago-caja::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--borde-fuerte); box-sizing: border-box;
}
.gemas-pago-caja strong { color: #fff; font: 700 16px/1.3 var(--sans); }
.gemas-pago-caja span { color: var(--suave); font-size: 14px; }
.gemas-pago input:checked + .gemas-pago-caja { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.gemas-pago input:checked + .gemas-pago-caja::before { border-color: var(--oro); background: radial-gradient(circle, var(--oro-claro) 0 3px, transparent 4px); }

/* total */
.gemas-total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--borde);
}
.gemas-total p { margin: 0; color: var(--suave); font-size: 17px; }
.gemas-total strong { color: #fff; font: 700 26px/1.1 var(--serif); margin: 0 4px; }
.gemas-total-g { white-space: nowrap; }
.gemas-total .boton-oro { cursor: pointer; }
.gemas-cerrada { text-align: center; color: var(--suave); margin: 10px 0 0; }
.gemas-cerrada .pronto-sello { margin-bottom: 10px; }

/* lado */
.gemas-aviso { padding: 18px 22px; border-color: rgba(229, 115, 92, .55); background: linear-gradient(rgba(229, 115, 92, .1), rgba(229, 115, 92, .04)), var(--tarjeta); }
.gemas-aviso p { margin: 0; color: #f6d9cf; }
.gemas-aviso strong { color: #ff9c84; letter-spacing: 1px; }
.gemas-pasos { margin: 6px 0 16px; padding-left: 22px; color: var(--texto); }
.gemas-pasos li { margin-bottom: 8px; padding-left: 4px; }
.gemas-pasos li::marker { color: var(--oro); font-weight: 700; }

/* una orden */
.gemas-orden { display: grid; gap: 16px; }
.gemas-orden-cab { display: flex; align-items: center; gap: 18px; }
.gemas-orden-img { width: 110px; height: 110px; flex: 0 0 110px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.gemas-orden-cab h2 { margin: 2px 0 4px; }
.gemas-orden-dato { margin: 0; color: var(--suave); }
.gemas-orden-dato strong { color: var(--oro-claro); }
.gemas-orden-sello {
  display: inline-block; margin: 0; padding: 4px 14px; border-radius: 20px; border: 1px solid var(--borde-fuerte);
  color: var(--oro-claro); background: rgba(214, 178, 104, .08); font: 700 12.5px/1.4 var(--sans); letter-spacing: 1.5px; text-transform: uppercase;
}
.gemas-orden-sello.est-pagada, .gemas-orden-sello.est-acreditada { border-color: #7fbf6a; color: #b9e6a8; background: rgba(127, 191, 106, .12); }
.gemas-orden-sello.est-parcial, .gemas-orden-sello.est-expirada, .gemas-orden-sello.est-fallida { border-color: #d9694f; color: #f3b3a3; background: rgba(217, 105, 79, .12); }
.gemas-orden-num { margin: 0; color: var(--gris); font-size: 13.5px; }
.gemas-orden-num code { color: var(--suave); font: 13.5px/1.3 ui-monospace, Consolas, monospace; word-break: break-all; }
.gemas-simular { margin: 4px 0 0; padding: 18px; border: 1px dashed rgba(240, 160, 80, .6); border-radius: 4px; background: rgba(240, 160, 80, .05); }
.gemas-otra { margin: 0; }

@media (max-width: 1000px) {
  .gemas-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .gemas-paquetes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gemas-dos, .gemas-pagos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .gemas-tarjeta { padding: 22px 16px 24px; }
  .gemas-paquetes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gemas-total { justify-content: stretch; }
  .gemas-total .boton-oro { width: 100%; min-width: 0; }
  .gemas-orden-img { width: 84px; height: 84px; flex-basis: 84px; }
}