/* ============================================================
   tienda.css — PlugLoop Tienda de Servicios
   Tarjetas, filtros, modal de checkout, estados de pago
============================================================ */

/* ── Hero tienda ─────────────────────────────────────────── */
.tienda-hero {
  background:var(--grd-dark); padding:clamp(90px,11vw,130px) 5% clamp(60px,7vw,90px);
  text-align:center; position:relative; overflow:hidden;
}
.tienda-hero::after {
  content:'TIENDA'; position:absolute;
  font-family:var(--display); font-size:min(28vw,260px);
  color:rgba(255,255,255,.025); top:50%; left:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  letter-spacing:10px; white-space:nowrap;
}
.tienda-hero h1 {
  font-family:var(--display); font-size:clamp(2.5rem,6vw,5rem);
  color:#fff; line-height:.95; margin-bottom:14px; position:relative; z-index:1;
}
.tienda-hero h1 em {
  font-family:var(--serif); font-style:italic; color:var(--gold);
  -webkit-text-fill-color:var(--gold);
}
.tienda-hero p {
  color:rgba(255,255,255,.6); font-size:clamp(.9rem,1.5vw,1.1rem);
  max-width:540px; margin:0 auto 32px; line-height:1.7; position:relative; z-index:1;
}

/* ── Filtros ─────────────────────────────────────────────── */
.tienda-filtros {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-bottom:44px;
}
.filtro {
  padding:8px 20px; border-radius:var(--r-pill);
  border:2px solid var(--border); background:#fff;
  color:var(--muted); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.filtro:hover, .filtro.on {
  border-color:var(--pink); background:var(--pink); color:#fff;
}

/* ── Grid productos ──────────────────────────────────────── */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,295px),1fr));
  gap:22px;
}
.prod-card {
  background:#fff; border-radius:var(--r-lg);
  border:1.5px solid transparent; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .3s;
  position:relative;
}
.prod-card:hover {
  transform:translateY(-8px); box-shadow:var(--sh-md);
  border-color:rgba(255,45,122,.2);
}
.prod-card.destacado { border-color:rgba(255,45,122,.2); }
.prod-bar { height:4px; }
.prod-bdg {
  position:absolute; top:16px; right:16px;
  background:var(--grd-pink); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(255,45,122,.35);
}
.prod-body { padding:26px 22px; flex:1; display:flex; flex-direction:column; }
.prod-ic {
  width:50px; height:50px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:14px;
}
.prod-nombre {
  font-family:var(--serif); font-size:1.1rem; font-weight:700;
  color:var(--charcoal); margin-bottom:7px;
}
.prod-desc {
  font-size:.83rem; color:var(--muted); line-height:1.65;
  margin-bottom:14px; flex:1;
}
.prod-inc { margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.prod-inc li {
  font-size:.78rem; color:var(--muted);
  display:flex; align-items:flex-start; gap:7px;
}
.prod-inc li::before { content:'✓'; color:var(--mint); font-weight:700; flex-shrink:0; }
.prod-precio {
  font-family:var(--display); font-size:2rem; line-height:1;
  background:var(--grd-pink);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.prod-antes {
  font-size:.84rem; color:#C0B0D0; text-decoration:line-through;
  margin-left:8px;
}
.prod-tipo { font-size:.7rem; color:var(--muted); letter-spacing:1px; margin:4px 0 6px; }
.prod-entrega { font-size:.73rem; color:var(--mint); font-weight:600; margin-bottom:18px; }
.prod-cta { display:flex; gap:8px; }
.prod-cta .btn { flex:1; }

/* ── Modal checkout ──────────────────────────────────────── */
.co-ov {
  position:fixed; inset:0; z-index:4000;
  background:rgba(26,10,46,.9); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden;
  transition:opacity .35s, visibility .35s;
}
.co-ov.open { opacity:1; visibility:visible; }
.co-box {
  background:var(--cream); border-radius:var(--r-lg);
  width:100%; max-width:660px; max-height:93vh; overflow-y:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  transform:translateY(28px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.co-ov.open .co-box { transform:translateY(0) scale(1); }

.co-hd {
  background:var(--grd-dark); padding:26px 28px 22px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.co-hd h2 {
  font-family:var(--display);
  font-size:1.5rem; letter-spacing:2px; color:#fff;
}
.co-cls {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; cursor:pointer;
  color:#fff; font-size:.95rem; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.co-cls:hover { background:rgba(255,45,122,.4); }

/* Resumen del producto */
.co-prod {
  background:var(--lavender); border:1px solid var(--border);
  border-radius:var(--r-md); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  margin:22px 24px 0;
}
.co-prod-ic { font-size:1.8rem; flex-shrink:0; }
.co-prod strong { display:block; color:var(--charcoal); font-size:.92rem; }
.co-prod span   { font-size:.78rem; color:var(--muted); }
.co-prod-price {
  margin-left:auto; flex-shrink:0;
  font-family:var(--display); font-size:1.55rem;
  background:var(--grd-pink);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Body / steps */
.co-body { padding:18px 24px 24px; }
.co-steps {
  display:flex; justify-content:center; gap:4px;
  align-items:center; margin-bottom:24px;
}
.co-step { display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--muted); }
.co-step.on   { color:var(--pink); }
.co-step.done { color:var(--mint); }
.step-n {
  width:24px; height:24px; border-radius:50%; border:2px solid currentColor;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700;
}
.co-step.on   .step-n { background:var(--pink); color:#fff; border-color:var(--pink); }
.co-step.done .step-n { background:var(--mint); color:#fff; border-color:var(--mint); }
.step-ln { flex:1; height:2px; background:var(--border); max-width:60px; margin:0 6px; }

/* Botón Mercado Pago */
.btn-mp {
  width:100%; padding:15px;
  background:linear-gradient(135deg,#009EE3,#0067B3);
  color:#fff; border:none; border-radius:var(--r-md);
  font-size:.95rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:11px;
  box-shadow:0 8px 26px rgba(0,103,179,.35);
  transition:transform .25s, box-shadow .25s; margin-top:18px;
}
.btn-mp:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,103,179,.45); }
.btn-mp:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.mp-ico { font-size:1.2rem; }
.co-garantia {
  text-align:center; font-size:.73rem; color:var(--muted);
  margin-top:12px; line-height:1.6;
}

/* ── Resultado de pago ───────────────────────────────────── */
.pago-result {
  text-align:center; padding:clamp(70px,9vw,110px) 5%;
  max-width:580px; margin:0 auto;
}
.pago-ico { font-size:5rem; margin-bottom:18px; animation:fadeUp .5s ease; }
.pago-result h2 {
  font-family:var(--display); font-size:clamp(2rem,5vw,3.5rem); margin-bottom:12px;
}
.pago-result p { color:var(--muted); line-height:1.7; margin-bottom:24px; }
.orden-box {
  background:var(--lavender); border:2px solid var(--border);
  border-radius:var(--r-md); padding:13px 22px;
  font-weight:700; color:var(--pink); font-size:1.1rem;
  display:inline-block; margin-bottom:28px;
}

@media(max-width:580px) {
  .co-body, .co-hd  { padding-left:16px; padding-right:16px; }
  .co-prod           { margin-left:12px; margin-right:12px; flex-wrap:wrap; }
  .co-prod-price     { margin-left:0; }
}