/* ==========================================================================
   Página de producto, pago y confirmación
   ========================================================================== */

/* ═══════════════════════════════════════════════ PÁGINA DE PRODUCTO ═══ */
.ficha{padding-block:clamp(28px,4vw,48px) clamp(52px,7vw,88px)}
.ficha__rejilla{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.6vw,58px);align-items:start}
@media (max-width:940px){.ficha__rejilla{grid-template-columns:minmax(0,1fr)}}

.galeria__grande{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-grande);background:var(--papel)}
.galeria__grande img{width:100%;height:100%;object-fit:cover;transition:opacity 180ms var(--sale)}
.galeria__tiras{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:10px}
.galeria__tiras button{aspect-ratio:1;overflow:hidden;border-radius:var(--r-chico);background:var(--papel);box-shadow:inset 0 0 0 2px transparent;transition:box-shadow 140ms ease}
.galeria__tiras button[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--cancha)}
.galeria__tiras img{width:100%;height:100%;object-fit:cover}

.ficha h1{margin-block:14px 14px}
.ficha__precio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-block:22px 6px}
.ficha__precio b{font-family:var(--fuente-mono);font-weight:700;font-size:clamp(36px,5.4vw,48px);color:var(--cancha-hondo);line-height:1;letter-spacing:-0.03em}
.ficha__precio s{font-family:var(--fuente-mono);color:var(--tinta-suave);font-size:var(--t-md)}
.ficha__nota{font-size:var(--t-sm);color:var(--texto-suave)}

/* Escalones de cantidad, como talones pequeños */
.escalones{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-block:26px}
@media (max-width:480px){.escalones{grid-template-columns:minmax(0,1fr)}}
.escalon{
  padding:15px 12px;border-radius:var(--r-medio);background:var(--superficie);
  box-shadow:inset 0 0 0 1.5px var(--raya);cursor:pointer;text-align:left;
  transition:box-shadow 140ms ease;
}
.escalon[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--cancha)}
.escalon__cuantos{display:block;font-weight:700;font-size:var(--t-sm)}
.escalon__cu{display:block;font-family:var(--fuente-mono);font-weight:700;font-size:var(--t-sm);margin-top:4px}
.escalon__ahorro{display:block;font-size:10.5px;font-weight:700;color:var(--sello);margin-top:3px;min-height:14px}

.ficha__comprar{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-block:24px 14px}
.ficha__comprar .cantidad{border-width:2px}
.ficha__comprar .cantidad button{width:46px;min-height:52px}
.ficha__comprar .cantidad__valor{min-width:46px;font-size:var(--t-md)}
.ficha__comprar .btn{flex:1;min-width:210px}

.ficha__lista{display:flex;flex-direction:column;gap:11px;margin-top:26px;padding-top:24px;border-top:2px solid var(--raya)}
.ficha__lista li{display:flex;gap:11px;font-size:var(--t-sm);line-height:1.55}
.ficha__lista .ico{margin-top:2px;stroke:var(--cancha);stroke-width:2.4}

/* ═══════════════════════════════════════════════════════════ PAGO ═══ */
.pago-pag{padding-block:clamp(26px,4vw,44px) clamp(52px,7vw,88px)}
.pago-pag__rejilla{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,42px);align-items:start}
@media (max-width:940px){
  .pago-pag__rejilla{grid-template-columns:minmax(0,1fr)}
  .pago-pag__lado{order:-1;position:static!important}
}

.bloque{
  background:var(--superficie);border-radius:var(--r-grande);
  padding:clamp(22px,3vw,30px);margin-bottom:18px;
  box-shadow:var(--sombra-baja);
}
.bloque__paso{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-weight:900;font-size:20px;letter-spacing:-0.025em}
.bloque__paso span{
  display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:var(--cancha);color:var(--cal);
  font-family:var(--fuente-mono);font-size:14px;font-weight:700;
}

.pago-pag__lado{position:sticky;top:calc(var(--nav-h) + 18px)}
.resumen{background:var(--cancha-hondo);color:var(--cal);border-radius:var(--r-grande);padding:24px}
.resumen h2{font-size:20px;margin-bottom:18px;color:var(--amarillo)}
.resumen__linea{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(242,244,239,.12);font-size:var(--t-sm)}
.resumen__linea small{display:block;color:rgba(242,244,239,.55);font-size:11.5px}
.resumen__linea span:last-child{font-family:var(--fuente-mono);font-weight:700;white-space:nowrap}
.resumen__suma{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:var(--t-sm);color:rgba(242,244,239,.76)}
.resumen__suma span:last-child{font-family:var(--fuente-mono);font-weight:700}
.resumen__suma--total{
  margin-top:12px;padding-top:14px;border-top:2px dashed rgba(255,206,0,.4);
  color:var(--cal);font-weight:700;align-items:baseline;
}
.resumen__suma--total span:last-child{font-size:28px;color:var(--amarillo)}
.resumen__seguro{display:flex;gap:10px;margin-top:18px;font-size:11.5px;line-height:1.5;color:rgba(242,244,239,.62)}
.resumen__seguro .ico{stroke:var(--amarillo);margin-top:1px}

.aviso{
  display:none;gap:12px;align-items:flex-start;padding:15px 17px;
  border-radius:var(--r-medio);margin-bottom:18px;font-size:var(--t-sm);line-height:1.55;
  background:#FCE9EB;box-shadow:inset 0 0 0 1.5px var(--sello);color:#8E0C1A;
}
.aviso.se-ve{display:flex}
.aviso b{display:block;margin-bottom:3px}
.aviso .ico{stroke:var(--sello);margin-top:2px}

.pago-pag__vacio{text-align:center;padding:76px 20px}
.pago-pag__vacio p{margin:14px auto 24px}

/* Complemento marcable antes de pagar */
.anexo{
  display:flex;gap:14px;align-items:flex-start;padding:16px;margin-top:6px;
  background:var(--papel);border-left:4px solid var(--amarillo);cursor:pointer;
}
.anexo input{width:19px;height:19px;accent-color:var(--cancha);margin-top:2px;flex-shrink:0}
.anexo img{width:56px;height:56px;border-radius:var(--r-chico);object-fit:cover;flex-shrink:0}
.anexo b{display:block;font-size:var(--t-sm)}
.anexo p{font-size:var(--t-xs);color:var(--texto-suave);line-height:1.5;margin-top:2px}

/* ══════════════════════════════════════════════════════ GRACIAS ═══ */
.gracias{min-height:62vh;display:grid;place-items:center;padding-block:clamp(46px,8vw,88px)}
.gracias__caja{
  max-width:600px;width:100%;
  background:var(--superficie);border-radius:var(--r-grande);
  padding:clamp(28px,5vw,50px);box-shadow:var(--sombra-media);
}
.gracias__marca{
  width:82px;height:82px;margin-bottom:24px;border-radius:50%;
  display:grid;place-items:center;
}
.gracias__marca .ico{width:38px;height:38px;stroke-width:2.4}
.gracias__marca--ok{background:rgba(23,89,63,.12)}
.gracias__marca--ok .ico{stroke:var(--cancha)}
.gracias__marca--espera{background:rgba(255,206,0,.2)}
.gracias__marca--espera .ico{stroke:var(--amarillo-hondo)}
.gracias__marca--mal{background:rgba(206,17,38,.1)}
.gracias__marca--mal .ico{stroke:var(--sello)}

.gracias__dato{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--raya);font-size:var(--t-sm)}
.gracias__dato:last-child{border-bottom:0}
.gracias__dato span:last-child{font-family:var(--fuente-mono);font-weight:700;text-align:right}
.gracias__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.girando{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--raya);border-top-color:var(--cancha);
  animation:gira360 800ms linear infinite;
}
@keyframes gira360{to{transform:rotate(360deg)}}

/* ─────────────────────────────────────────── Pago por enlace (VPOS)
   Se abre cuando el servidor responde que Wompi no tiene llaves todavía.
   El monto manda sobre todo lo demás en la jerarquía visual: con un enlace
   de pago el cliente puede teclear la cifra, y una cifra mal tecleada es
   plata que no entra. Por eso va grande, en mono, y con botón de copiar. */
.enlace-pago{
  position:fixed;z-index:120;
  left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);
  width:min(470px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
  padding:30px 26px 26px;
  background:var(--cal);
  border-radius:var(--r-grande);
  box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;
  transition:opacity 240ms var(--sale),transform 240ms var(--cajon),visibility 240ms;
}
.enlace-pago.abierto{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){
  .enlace-pago{transition-duration:1ms;transform:translate(-50%,-50%)}
  .enlace-pago.abierto{transform:translate(-50%,-50%)}
}

.enlace-pago__cerrar{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;display:grid;place-items:center;
  background:none;border:0;border-radius:50%;cursor:pointer;
  color:var(--tinta);
}
.enlace-pago__cerrar:hover{background:var(--papel-hondo)}
.enlace-pago__cerrar .ico{stroke:currentColor}

.enlace-pago h2{font-size:var(--t-lg);margin:0 34px 0 0}
#enlaceIntro{margin-top:8px;font-size:var(--t-sm);color:var(--texto-suave)}

.enlace-pago__monto{
  margin-top:20px;padding:18px 20px 16px;
  background:var(--cancha-hondo);color:var(--cal);
  border-radius:var(--r-medio) var(--r-medio) 0 0;
  text-align:center;
}
.enlace-pago__monto span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(242,244,239,.72);
}
.enlace-pago__monto b{
  display:block;margin-top:5px;
  font-family:var(--fuente-mono);font-size:2.1rem;font-weight:900;
  letter-spacing:-.02em;color:var(--amarillo);
}
.enlace-pago__copiar{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border:0;cursor:pointer;
  border-radius:0 0 var(--r-medio) var(--r-medio);
  background:var(--papel-hondo);color:var(--tinta);
  font-family:inherit;font-size:var(--t-sm);font-weight:700;
}
.enlace-pago__copiar:hover{background:var(--papel)}
.enlace-pago__copiar .ico{stroke:var(--cancha)}

.enlace-pago__codigo{
  margin-top:14px;padding:12px 15px;
  background:var(--superficie);border-left:4px solid var(--cancha);
  border-radius:0 var(--r-medio) var(--r-medio) 0;
  font-size:var(--t-sm);line-height:1.5;
}
.enlace-pago__codigo b{font-family:var(--fuente-mono);letter-spacing:-.01em}
.enlace-pago__codigo span{color:var(--texto-suave);font-size:var(--t-xs)}

/* base.css quita los bullets de toda ul/ol; aqui los numeros son el
   contenido: sin ellos los pasos se leen como parrafos sueltos. */
.enlace-pago__pasos{
  margin:18px 0 0;padding-left:23px;
  list-style:decimal;
  font-size:var(--t-sm);line-height:1.55;
}
.enlace-pago__pasos::marker,.enlace-pago__pasos li::marker{
  font-weight:900;color:var(--cancha);
}
.enlace-pago__pasos li{margin-top:7px;max-width:none}
.enlace-pago__pasos li b{color:var(--roja-texto)}

#enlaceAbrir{margin-top:20px}
.enlace-pago__wpp{margin-top:10px}

.enlace-pago__nota{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:16px;font-size:var(--t-xs);line-height:1.5;color:var(--texto-suave);
}
.enlace-pago__nota .ico{stroke:var(--cancha);margin-top:1px;flex-shrink:0}