/* Botón flotante al carrito */
.cart-fab{
  position:fixed; right:18px; bottom:18px;
  width:62px; height:62px; border-radius:50%;
  background:#ff6c0099; color:#0b0b0b;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; outline:0;
  box-shadow:0 14px 40px rgba(34,211,238,.35);
  z-index:9999;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cart-fab:hover{ transform: translateY(-3px); box-shadow: 0 18px 50px rgba(34,211,238,.45); }

.cart-fab__icon{ width:28px; height:28px; display:block; }

.cart-fab__badge{
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 6px;
  background:#ef4444; color:#fff;
  border-radius:999px; font-size:.75rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

@media (max-width:420px){
  .cart-fab{ width:56px; height:56px; right:14px; bottom:14px; }
  .cart-fab__icon{ width:26px; height:26px; }
}
/* Elevar FAB del carrito para no superponer con WhatsApp */
.cart-fab{
  /* 18px (separación) + 62px (alto wsp) + 12px (gap) = 92px */
  bottom: calc(env(safe-area-inset-bottom) + 92px);
}

@media (max-width:420px){
  /* En mobile: 14px + 56px + 10px = 80px */
  .cart-fab{
    bottom: calc(env(safe-area-inset-bottom) + 80px);
  }
}
/* ====== Modal Checkout ====== */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity:0; transition:opacity .18s ease;
  z-index: 10020;
}
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index:10030;
}
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }
.modal.is-open{ opacity:1; transform: translateY(0) scale(1); }
.modal-backdrop.is-open{ opacity:1; }

.modal__dialog{
  width:min(860px, 94vw);
  background: radial-gradient(1200px 500px at 20% 0%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%),
              #0d0f12;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow: 0 30px 120px rgba(0,0,0,.5);
  padding:1.1rem 1.1rem 1.2rem;
  position:relative;
}
.modal__title{ font-size:1.3rem; margin:0 0 .8rem; color:#fff; }

.modal__close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:#111; color:#fff; cursor:pointer;
}
.modal__close:hover{ background:#151515; }

.modal__grid{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:1rem;
}
@media (max-width:840px){ .modal__grid{ grid-template-columns: 1fr; } }

.modal__form .field{ margin-bottom:.7rem; }
.field label{ display:block; font-weight:600; margin-bottom:.3rem; color:#d7d7d7; }
.input{
  width:100%; border-radius:10px; border:1px solid #232323;
  background:#101216; color:#fff; padding:.6rem .8rem;
}
.field-grid-2{ display:grid; gap:.6rem; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .field-grid-2{ grid-template-columns:1fr; } }

.tarjeta-box{ margin:.4rem 0 .6rem; }

.modal__legal{ font-size:.8rem; opacity:.7; margin-top:.5rem; }

/* Summary del modal */
.modal__summary{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:.8rem;
  background:#0c0e11; color:#eaeaea;
}
.modal__summary h4{ margin:.2rem 0 .6rem; }
.mini-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.mini-list li{ display:grid; grid-template-columns:1fr auto auto; gap:.6rem; align-items:center; }
.mini-list strong{ font-weight:800; }
.mini-total{ display:flex; justify-content:space-between; margin-top:.6rem; font-weight:800; }

/* Botón “fantasma” en el resumen (mismo look que outline pero sin borde) */
.btn-ghost{
  background:transparent;
  color: var(--secundario,#22d3ee);
  border:1px solid rgba(34,211,238,.35);
}
.btn-ghost:hover{
  background: rgba(34,211,238,.08);
}

/* ————— Botón-imagen Mercado Pago ————— */
.modal__form .btn-mp{
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* centrado y ancho ajustado */
  width: fit-content;
  max-width: 100%;
  margin: .75rem auto 0;

  cursor: pointer;
}
.btn-mp img{
  height: 44px;          /* ajustá a gusto */
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  transition: transform .15s ease, filter .15s ease;
}
.btn-mp:hover img{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
}

/* ————— Botón con logo + texto (opcional) ————— */
.modal__form .mp-btn{
  display: flex;
  align-items: center;
  gap: .5rem;

  background: #fff;
  color: #0b0b0b;
  border: 0;
  border-radius: 12px;
  padding: .6rem .9rem;

  /* centrado y ancho ajustado */
  width: fit-content;
  max-width: 360px;      /* límite opcional */
  margin: .75rem auto 0;

  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.modal__form .mp-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
.mp-btn__logo{
  height: 22px;
  width: auto;
  display: block;
}
.mp-btn__text{
  font-size: .95rem;
  line-height: 1;
  font-weight: 700;
}