/* Gift card: el formulario de compra, el canje y la tarjeta. */

/* ── comprarla ── */
.mp-gc-form{ display:grid; gap:1.1rem; margin-bottom:1.2rem }
.mp-gc-form__montos{ border:0; margin:0; padding:0 }
.mp-gc-form__montos legend{
  padding:0; margin-bottom:.5rem;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mp-tinta-3);
}
.mp-gc-form__fila{ display:flex; flex-wrap:wrap; gap:.5rem }
/* el marco lo pone la etiqueta, no el precio de adentro: si no, caja dentro de caja */
.mp-gc-form__monto span .amount,
.mp-gc-form__monto span bdi{ border:0; padding:0; background:none; font:inherit }
.mp-gc-form__monto{ position:relative; cursor:pointer }
.mp-gc-form__monto input{ position:absolute; opacity:0; width:0; height:0 }
.mp-gc-form__monto span{
  display:block; padding:.6rem 1rem; border:1px solid var(--mp-hilo-firme);
  font-size:.9375rem; transition:border-color var(--mp-rapido), background-color var(--mp-rapido);
}
.mp-gc-form__monto input:checked + span{ border-color:var(--mp-tinta); background:var(--mp-tinta); color:var(--mp-papel) }
/* el foco del teclado tiene que verse: el input real está oculto */
.mp-gc-form__monto input:focus-visible + span{ outline:2px solid var(--mp-vino); outline-offset:2px }
 /* el campo libre se oculta por clase, no con `hidden`: el atributo pierde contra
   cualquier `display` que traiga el tema */
.mp-gc-form__libre{ display:none; margin-top:.6rem }
.mp-gc-form__libre.is-visible{ display:block }
.mp-gc-form__libre input{
  width:100%; padding:.7rem .8rem; font:inherit; font-size:16px; box-sizing:border-box;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel);
}

.mp-gc-form__campo{ display:grid; gap:.3rem }
.mp-gc-form__campo > span{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mp-tinta-3);
}
.mp-gc-form__campo > span em{ text-transform:none; letter-spacing:0; font-style:normal; color:var(--mp-tinta-3) }
.mp-gc-form__campo input, .mp-gc-form__campo textarea{
  /* 16px o iOS hace zoom al enfocar y descuadra la ficha entera */
  width:100%; padding:.7rem .8rem; font:inherit; font-size:16px;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel); color:var(--mp-tinta);
  box-sizing:border-box;
}
.mp-gc-form__campo small{ color:var(--mp-tinta-3); font-size:.8125rem; line-height:1.5 }

/* ── canjearla ── */
.mp-gc-canje{ margin:0 0 1.5rem; padding:1.1rem 1.2rem; background:var(--mp-lino) }
.mp-gc-canje label{ display:block; margin-bottom:.5rem; font-size:.875rem; color:var(--mp-tinta-2) }
.mp-gc-canje__fila{ display:flex; gap:.5rem; flex-wrap:wrap }
.mp-gc-canje__fila input{
  flex:1 1 14rem; min-width:0; padding:.7rem .8rem; font:inherit; font-size:16px;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel); box-sizing:border-box;
}
.mp-gc-canje__boton{
  flex:0 0 auto; padding:.7rem 1.4rem; border:0; cursor:pointer;
  background:var(--mp-tinta); color:var(--mp-papel); font:inherit; font-size:.875rem;
}
.mp-gc-canje__ok{ margin:0; font-size:.9375rem; color:var(--mp-tinta-2) }
.mp-gc-canje__quitar{
  margin-left:.6rem; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:.8125rem; color:var(--mp-vino); text-decoration:underline;
}

/* ── la tarjeta ── */
.mp-gcard{
  display:grid; gap:var(--mp-e5); align-items:start;
  grid-template-columns:1fr; margin-block:var(--mp-e6) var(--mp-e7);
}
@media (min-width:860px){ .mp-gcard{ grid-template-columns:1fr 1fr; gap:var(--mp-e6) } }

/* la pieza es la tarjeta misma: proporción de tarjeta, no de caja de texto */
.mp-gcard__pieza{
  aspect-ratio:1.586/1; padding:1.8rem; display:flex; flex-direction:column;
  background:var(--mp-tinta); color:var(--mp-papel); position:relative; overflow:hidden;
}
.mp-gcard__marca{ font-family:var(--mp-serif); font-size:1.05rem; letter-spacing:.12em }
.mp-gcard__eti{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-top:.2rem;
}
.mp-gcard__monto{ margin:auto 0 0; font-family:var(--mp-serif); font-size:2.6rem; line-height:1 }
.mp-gcard__original{ margin:.2rem 0 0; font-size:.8125rem; opacity:.6 }
.mp-gcard__para, .mp-gcard__de{ margin:.5rem 0 0; font-size:.875rem; opacity:.85 }
.mp-gcard__mensaje{
  margin:.6rem 0 0; padding:0; border:0;
  font-family:var(--mp-serif); font-size:.9375rem; line-height:1.5; opacity:.9;
}
.mp-gcard__codigo{
  margin:.9rem 0 0; font-size:.9375rem; letter-spacing:.14em;
  padding-top:.7rem; border-top:1px solid rgba(255,255,255,.18);
}

.mp-gcard__lado h1{ margin:0 0 .6rem; font-size:1.6rem }
.mp-gcard__como, .mp-gcard__vence, .mp-gcard__aviso{
  margin:0 0 .8rem; max-width:44ch; color:var(--mp-tinta-2); line-height:1.6;
}
.mp-gcard__vence{ font-size:.875rem; color:var(--mp-tinta-3) }
.mp-gcard__aviso{ color:var(--mp-vino) }
.mp-gcard__ir{
  display:inline-block; padding:.75rem 1.5rem; background:var(--mp-tinta); color:var(--mp-papel);
  text-decoration:none; font-size:.875rem;
}
.mp-gcard__enviar{ margin-top:var(--mp-e5); padding-top:1.2rem; border-top:1px solid var(--mp-hilo) }
.mp-gcard__enviar p{ margin:0 0 .6rem; font-size:.875rem; color:var(--mp-tinta-3) }
.mp-gcard__wa, .mp-gcard__copiar{
  display:inline-block; margin-right:.5rem; padding:.6rem 1.1rem; cursor:pointer;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel); color:var(--mp-tinta);
  font:inherit; font-size:.875rem; text-decoration:none;
}
.mp-gcard__wa:hover, .mp-gcard__copiar:hover{ border-color:var(--mp-tinta) }

/* ── en la pantalla de gracias ── */
.mp-gc-gracias{ margin:0 0 var(--mp-e5); padding:1.4rem 1.5rem; background:var(--mp-lino) }
.mp-gc-gracias h2{ margin:0 0 .4rem; font-size:1.2rem }
.mp-gc-gracias p{ margin:0 0 .9rem; color:var(--mp-tinta-2); font-size:.9375rem }
.mp-gc-gracias ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.mp-gc-gracias li{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem }
.mp-gc-gracias code{
  font-size:1rem; letter-spacing:.1em; padding:.4rem .7rem;
  background:var(--mp-papel); border:1px solid var(--mp-hilo-firme);
}

/* El campo genérico de cupón de WooCommerce se esconde: la tienda no tiene cupones y
   mostrar un buscador de códigos sólo invita a salir a buscarlos. Es cosmética — lo
   que de verdad impide usar otro código es el filtro `woocommerce_coupon_is_valid`. */
.woocommerce form.woocommerce-cart-form .coupon,
.woocommerce-cart .coupon,
.woocommerce-checkout .checkout_coupon,
.woocommerce-form-coupon-toggle{ display:none !important }