/* Certificados de regalo (regalo.html). Se apoya en styles.css y cita.css.
   Layout: los campos a la izquierda y, en escritorio, la vista del certificado fija a la derecha;
   en teléfono la vista queda entre los campos y el botón, para verla justo antes de pedir. */
.regalo-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas: "campos vista" "enviar vista";
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.regalo-campos { grid-area: campos; display: grid; gap: clamp(32px, 4vw, 44px); min-width: 0; }
.regalo-enviar { grid-area: enviar; display: grid; gap: 22px; min-width: 0; }
.vista { grid-area: vista; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); display: grid; gap: 12px; }
.vista h2 { font-size: 1.1rem; font-family: var(--body); font-weight: 700; color: var(--ink-soft); }

.bloque { display: grid; gap: 18px; }
.bloque > h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.1rem); }

.compacto { gap: 8px; }
.compacto .opt { min-height: 56px; padding-block: 12px; }
.compacto .opt-price { font-size: 1.35rem; }
.opt-monto { background: var(--surface); box-shadow: none; }
.opt-monto:has(input:checked) { background: var(--surface); }

.montos { display: grid; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--surface); }
.montos .seg label { min-width: 88px; justify-content: center; }
.montos .otro { max-width: 16rem; }

/* La vista imita el certificado del generador: crema, vino y el sol para los acentos */
.cert {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 28px 22px 22px; border-radius: var(--radius);
  background: var(--plate); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 7px var(--plate), inset 0 0 0 8px var(--hero-line);
}
.cert img { width: 56px; height: 56px; border-radius: 50%; }
.cert-t { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-top: 4px; }
.cert-label { margin-top: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.cert-para { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; overflow-wrap: anywhere; }
.cert-de { color: var(--ink-soft); font-size: 0.98rem; min-height: 1.5em; }
.cert-caja { box-sizing: border-box; width: 100%; display: grid; gap: 2px; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--hero-bg); }
.cert-regalo { font-weight: 700; line-height: 1.3; }
.cert-valor { color: var(--hero-muted); font-size: 0.95rem; }
.cert-msj { font-family: var(--quote); font-style: italic; font-size: 1.1rem; line-height: 1.4; margin-top: 8px; overflow-wrap: anywhere; }
.cert-msj:empty { display: none; }
.cert-pie { margin-top: 10px; color: var(--ink-soft); font-size: 0.85rem; }
.cert .vacio { color: var(--ink-soft); }

#dato-codigo { white-space: nowrap; }
.a-pagar { align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-pagar:empty { display: none; }

@media (max-width: 900px) {
  .regalo-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "campos" "vista" "enviar"; }
  .vista { position: static; max-width: 30rem; }
}