/* =============================================================================
   Vault Solutions — Componentes de comercio compartidos
   Tarjeta de producto, precio, rating, categoría, beneficios, pasos, FAQ.
   Cargado por las páginas públicas (home, catálogo, detalle). El mismo markup
   (vía SI.productCard) en todas: cohesión total.
   ============================================================================= */

/* --------------------------------------------------------- Tarjeta producto */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 18px 40px oklch(0.52 0.15 91 / 0.12);
  border-color: color-mix(in oklch, var(--brand) 40%, var(--border));
}

/* Cabecera tipo "ticket de licencia digital" */
.pc-ticket {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand) 16%, var(--surface)) 0%, var(--brand-50) 60%);
  border-bottom: 1px dashed color-mix(in oklch, var(--brand) 34%, var(--border));
}

.pc-ticket::before,
.pc-ticket::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
}

.pc-ticket::before {
  left: -7px;
}

.pc-ticket::after {
  right: -7px;
}

.pc-ticket__glyph {
  flex: none;
  transition: transform var(--t-slow) var(--ease-out);
}

.product-card:hover .pc-ticket__glyph {
  transform: rotate(-3deg) scale(1.05);
}

.pc-ticket__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.pc-ticket__lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-ink);
}

.pc-ticket__lbl svg {
  width: 0.85rem;
  height: 0.85rem;
}

.pc-ticket__key {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-strong);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-ticket__activa {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.pc-ticket__activa svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--brand);
}

.product-card__fav {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-faint);
  transition: color var(--t), border-color var(--t);
}

.product-card__fav:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.product-card__fav svg {
  width: 1rem;
  height: 1rem;
}

.pc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.product-card__body {
  padding: 1.1rem 1.15rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.product-card__cat {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.product-card__title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.product-card__title a:hover {
  color: var(--brand-ink);
}

.product-card__summary {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.product-card__foot {
  padding: 0.9rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.product-card__actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.product-card__actions .btn {
  flex: 1;
  justify-content: center;
}

.product-card__foot .price {
  flex-direction: row;
  align-items: baseline;
  gap: 0.55rem;
}

.add-btn {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-ink);
  transition: background-color var(--t), transform var(--t-fast);
  flex: none;
}

.add-btn:hover {
  background: var(--brand-100);
}

.add-btn:active {
  transform: scale(0.92);
}

.add-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.product-card.is-out {
  opacity: 0.94;
}

.product-card.is-out .pc-ticket {
  filter: grayscale(0.5);
}

.product-card.is-out .pc-ticket__glyph {
  opacity: 0.7;
}

/* ---------------------------------------------------------------- Precio */
.price {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.price__old {
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.price__now {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.price__now small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.price--lg .price__now {
  font-size: 2rem;
}

/* ---------------------------------------------------------------- Rating */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.stars {
  display: inline-flex;
  color: var(--warn);
}

.stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  stroke: none;
}

.stars svg.empty {
  color: var(--border-strong);
}

.rating b {
  color: var(--ink-strong);
  font-weight: 700;
}

/* -------------------------------------------------------- Lista de features */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.feature-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--ink-body);
  font-size: 0.95rem;
}

.feature-list li>svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand);
  flex: none;
  margin-top: 0.05rem;
}

/* --------------------------------------------------------------- Beneficio */
.benefit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  transition: background-color var(--t);
}

.benefit:hover {
  background: var(--surface-2);
}

.benefit h4 {
  font-size: 1.05rem;
}

.benefit p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.benefit__divider {
  width: 100%;
}

/* --------------------------------------------------------- Tarjeta categoría */
.cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t);
}

.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.cat-card:hover .cat-card__go {
  color: var(--brand-ink);
  transform: translateX(3px);
}

.cat-card h4 {
  font-size: 1.05rem;
}

.cat-card p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
  flex: 1;
}

.cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-card__count {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 500;
}

.cat-card__go {
  color: var(--ink-muted);
  display: inline-flex;
  transition: color var(--t), transform var(--t);
}

.cat-card__go svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* ------------------------------------------------------------ Cómo funciona */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.step__n {
  position: absolute;
  top: 1.25rem;
  right: 1.35rem;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--border-strong);
  line-height: 1;
  letter-spacing: -0.03em;
}

.step h4 {
  font-size: 1.02rem;
}

.step p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.step .icon-tile {
  width: 2.6rem;
  height: 2.6rem;
}

.step-connectors {
  display: none;
}

/* ------------------------------------------------------------------- FAQ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 760px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t);
}

.faq details[open] {
  border-color: var(--border-strong);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  font-size: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .chev {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-muted);
  flex: none;
  transition: transform var(--t), background-color var(--t), color var(--t);
}

.faq summary .chev svg {
  width: 1.05rem;
  height: 1.05rem;
}

.faq details[open] summary .chev {
  transform: rotate(180deg);
  background: var(--brand-50);
  color: var(--brand-ink);
}

.faq .faq__a {
  padding: 0 1.25rem 1.2rem;
  color: var(--ink-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ------------------------------------------------------ Banda de confianza */
.trust-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
  align-items: center;
}

.trust-item .ti-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r);
  background: var(--brand-50);
  color: var(--brand);
  margin-bottom: 0.35rem;
}

.trust-item .ti-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.trust-item .v {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.trust-item .k {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.trust-band--row {
  grid-auto-flow: column;
}

@media (max-width: 620px) {
  .trust-band {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }
}

/* ----------------------------------------------------------- "Por qué" card */
.why-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: box-shadow var(--t), border-color var(--t);
}

.why-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.why-card h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.why-card p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* =========================================================== Medios de pago */
/* Acciones de compra: botón principal (Pagar ahora) + fila de 2 secundarios */
.pd-actions__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Sin esto los botones no se dejan achicar y ensanchan toda la ficha */
.pd-actions__row>* {
  min-width: 0;
}

/* En el celular "Comprar por WhatsApp" no entra al lado de "Agregar" */
@media (max-width: 560px) {
  .pd-actions__row {
    grid-template-columns: 1fr;
  }
}

/* Tira de píldoras de medios de pago (producto, carrito, footer) */
.pay-strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pay-strip--compact {
  margin-top: 0.85rem;
  align-items: center;
}

.pay-strip__lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.pay-strip__lbl svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

.pay-strip__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pay-strip--compact .pay-strip__pills {
  justify-content: center;
}

.pay-pill {
  --pc: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.62rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: color-mix(in oklch, var(--pc) 14%, var(--surface));
  color: color-mix(in oklch, var(--pc) 68%, var(--ink));
  border: 1px solid color-mix(in oklch, var(--pc) 32%, var(--border));
}

.pay-pill[data-pay="yape"] {
  --pc: #7a33a0;
}

.pay-pill[data-pay="plin"] {
  --pc: #0faec8;
}

.pay-pill[data-pay="transfer"] {
  --pc: #5b6675;
}

.pay-pill[data-pay="mercadopago"] {
  --pc: #1e9bdd;
}

.pay-pill[data-pay="usdt"] {
  --pc: #26a17b;
}

/* (La franja de medios de pago del pie vive ahora en chrome.css, junto al
   resto del pie: .footer-pay / .footer-pay__marks. La regla que había aquí
   estaba sin uso y pisaba a la nueva, porque commerce.css carga después.) */

.pay-band {
  display: flex;
  justify-content: center;
  margin-top: 1.8rem;
}

.pay-band .pay-strip {
  align-items: center;
}

/* Modal "Pagar ahora" */
.pay-sum {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pay-sum__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--ink-body);
}

.pay-sum__tail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pay-sum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.5rem;
  margin-top: 0.2rem;
  border-top: 1px dashed var(--border);
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.pay-sum__total b {
  font-size: 1.2rem;
  color: var(--brand-ink);
}

.pay-lead {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
}

.pay-cards {
  display: grid;
  gap: 0.7rem;
}

.pay-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--surface);
}

.pay-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pay-card__note {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.pay-card__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============ LOS TRES BOTONES DE PAGO — 14-ago-2026 =======================
   Un botón largo por medio, cada uno con SU color de marca, y al pulsarlo se
   despliega sólo el suyo.

   LOS COLORES NO SON INVENTADOS. Salen de los propios carteles que dio el
   dueño, leyendo el píxel:
       Izipay    #ff4240   el rojo del cartel del QR
       Binance   #1f252c de fondo y #ebb200 de letra, los dos del QR oficial
       Yape      degradado #722089 → #9935ad, que es lo que hace su logo real
   Poner "un rojo cualquiera" al lado de un logo de marca se nota enseguida y
   resta confianza justo en la pantalla donde más hace falta.

   SOBRE EL CONTRASTE DEL ROJO. Blanco sobre #ff4240 da 3.4:1, por debajo del
   4.5:1 que se exige al texto normal. Por eso la etiqueta va a 1.2rem y en
   negrita: a ese tamaño el mínimo baja a 3:1 y cumple con margen. Si alguien
   achica esa letra, rompe la accesibilidad del botón. */
.paysel {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.3rem;
}

.paysel__item {
  border-radius: var(--r-md);
  overflow: hidden;
}

.paysel__btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  /* El degradado y el color los pone cada marca más abajo. */
  background: var(--sel-fondo, var(--surface-2));
  color: var(--sel-tinta, var(--ink));
  transition: filter var(--t), transform var(--t);
  /* EL RELIEVE. Tres sombras que hacen el volumen sin una sola imagen:
     una línea clara arriba (el canto que da la luz), una sombra interior
     abajo (la curvatura) y una sombra exterior (el botón despegado). */
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.30) inset,
    0 -16px 26px -14px oklch(0 0 0 / 0.55) inset,
    0 6px 16px -8px oklch(0 0 0 / 0.5);
}

/* EL BRILLO. Una banda clara sobre la mitad superior — el reflejo del cristal.
   Va en ::before para no meter un elemento más por botón. */
.paysel__btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  background: linear-gradient(180deg,
    oklch(1 0 0 / 0.30),
    oklch(1 0 0 / 0.10) 55%,
    oklch(1 0 0 / 0));
  pointer-events: none;
}

/* EL DESTELLO QUE CRUZA. Una franja de luz inclinada que barre el botón al
   pasar por encima. En el móvil no hay ratón, así que también se dispara al
   abrirlo — si no, el efecto no existiría para la mayoría de los clientes. */
.paysel__btn::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  width: 45%;
  left: -70%;
  background: linear-gradient(100deg,
    oklch(1 0 0 / 0),
    oklch(1 0 0 / 0.38),
    oklch(1 0 0 / 0));
  transform: skewX(-16deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}

.paysel__btn:hover::after,
.paysel__btn:focus-visible::after { left: 130%; }

.paysel__item.is-open .paysel__btn::after { animation: selDestello 0.75s var(--ease-out); }

@keyframes selDestello {
  from { left: -70%; }
  to { left: 130%; }
}

.paysel__btn:hover { filter: brightness(1.06); }
.paysel__btn:active { transform: scale(0.995); }
.paysel__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* El contenido va POR ENCIMA del brillo y del destello. */
.paysel__txt,
.paysel__logo,
.paysel__tag,
.paysel__chev { position: relative; z-index: 1; }

.paysel__txt {
  min-width: 0;
  font-size: 1.2rem;      /* ver la nota de contraste de arriba */
  font-weight: 700;
  line-height: 1.2;
  /* Sin partir. «Pagar con tarjeta» es el más largo de los tres y en un móvil
     estrecho caería a dos líneas, dejando el botón el doble de alto que sus
     compañeros. Quien cede sitio es el logotipo, que se escala.
     El `overflow` es la red de seguridad: sin él, dos hijos que no caben en un
     flex no se recortan, se MONTAN uno encima de otro — y eso fue exactamente
     lo que pasó al alargar la etiqueta. Antes de superponerse, se recorta. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A 360 px y menos, «Pagar con tarjeta» + logotipo + flecha van justos. */
@media (max-width: 380px) {
  .paysel__txt { font-size: 1.08rem; }
  .paysel__btn { padding-inline: 0.85rem; gap: 0.4rem; }
}

/* EL LOGOTIPO DE LA MARCA, en su propia tipografía.
   La altura se ajusta marca por marca porque cada logotipo tiene su peso
   óptico: el de Yape es manuscrito y necesita más alto para leerse igual que
   la palabra de Binance, que va en mayúsculas. Igualar el número daría tres
   tamaños que se ven distintos. */
/* OJO CON EL `flex` DE AQUÍ. Estuvo en `flex: 1` para que empujara la flecha al
   borde, y con la etiqueta larga («Pagar con tarjeta») más la píldora «Pronto»
   el logotipo se quedó sin sitio y se aplastó hasta ser una brizna de 4 px.
   Ahora manda su ancho natural y quien empuja a la derecha es la flecha. */
.paysel__logo {
  flex: 0 1 auto;
  min-width: 1.6rem;          /* por estrecho que venga, nunca desaparece */
  height: var(--sel-logo, 1.25rem);
  width: auto;
  object-fit: contain;
  object-position: left center;
  /* Una sombra muy leve los despega del degradado sin ensuciar el color. */
  filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.28));
}

/* La TARJETA GENÉRICA del primer botón. No es un <img> como Binance o Yape,
   sino un dibujo que hereda el color del botón, así que las reglas de arriba
   pensadas para imágenes —`object-fit`, `object-position`— no pintan nada
   sobre él: aquí solo hay que decirle que se comporte como una caja de alto
   fijo y dejar que el SVG se escale dentro. */
.paysel__logo--card {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

.paysel__logo--card svg {
  height: 100%;
  width: auto;
  display: block;
}

/* El hueco flexible va aquí: la flecha —o la píldora, si la hay— se pega a la
   derecha y todo lo demás queda junto a la izquierda, como se lee. */
.paysel__chev { margin-left: auto; }
.paysel__tag { margin-left: auto; }
/* El `:not([hidden])` importa. Sin él, la píldora «Pronto» le quitaba el hueco
   flexible a la flecha AUNQUE estuviera oculta —basta con que exista en el
   HTML—, y la flecha del botón de tarjeta se quedaba pegada al logotipo
   mientras las de Binance y Yape sí llegaban al borde derecho. Tres botones
   iguales con la flecha en tres sitios distintos. */
.paysel__tag:not([hidden]) + .paysel__chev { margin-left: 0.5rem; }

/* La píldora de «Pronto» cuando un medio aún no está conectado. */
.paysel__tag {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.22);
  color: inherit;
}

.paysel__chev {
  flex: none;
  display: inline-grid;
  place-items: center;
  transition: transform var(--t) var(--ease-out);
}

.paysel__chev svg { width: 1.15rem; height: 1.15rem; }
.paysel__item.is-open .paysel__chev { transform: rotate(180deg); }

/* Apagado: sigue pulsable —dentro se explica por qué— pero no compite con los
   medios que sí funcionan.
   Se hace con OPACIDAD y no con `saturate()`. Se probó desaturando y el rojo de
   Izipay se volvía un marrón sucio que parecía un fallo de la web, no un medio
   en preparación. Bajando la opacidad el color sigue siendo el suyo, solo que
   más apagado, y la píldora «Pronto» es la que explica el porqué. */
.paysel__item.is-off .paysel__btn { opacity: 0.72; }
.paysel__item.is-off .paysel__btn:hover { opacity: 0.85; }
.paysel__item.is-off .paysel__btn::after { display: none; }   /* sin destello */

/* Apagado, el logotipo SOBRA. La píldora «Pronto» y «Pagar con tarjeta» ya
   dicen todo lo que hay que saber, y en un móvil de 320 px los tres elementos
   más la píldora no caben: el logotipo acababa recortado a una brizna o
   pisando el texto. Cuando la pasarela se enciende, la píldora desaparece y el
   logotipo vuelve solo. */
.paysel__item.is-off .paysel__logo { display: none; }

/* ---- El deslizamiento ----
   La altura la escribe el JavaScript midiendo el contenido real; aquí sólo se
   define cuánto tarda. `overflow: hidden` es lo que hace que el panel se
   recorte mientras crece en vez de asomar de golpe. */
.paysel__pan {
  overflow: hidden;
  height: 0;
  transition: height 0.32s var(--ease-out), opacity 0.24s var(--ease-out);
  opacity: 0;
}

.paysel__item.is-open .paysel__pan { opacity: 1; }
.paysel__pan[hidden] { display: none; }

.paysel__in {
  padding: 0.95rem 0.15rem 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .paysel__pan { transition: none; }
  .paysel__chev { transition: none; }
  .paysel__btn::after { transition: none; animation: none; }
  .paysel__item.is-open .paysel__btn::after { animation: none; }
}

/* ---- Cada marca ----
   El degradado va de claro arriba a oscuro abajo: es lo que hace que el brillo
   superior se lea como luz cayendo y no como una banda pegada encima. */
.paysel__item--izipay .paysel__btn {
  --sel-fondo: linear-gradient(180deg, #ff5250, #d92f2c 62%, #c22a27);
  --sel-tinta: #fff;
  /* Más alto que los otros dos (1.15rem cuando aquí iba un logotipo escrito):
     una tarjeta dibujada es apaisada y a la altura de una palabra se quedaba
     en una pastilla diminuta que no se reconocía. */
  --sel-logo: 1.4rem;
}

.paysel__item--binance .paysel__btn {
  --sel-fondo: linear-gradient(180deg, #333b45, #1a2027 62%, #0e1216);
  --sel-tinta: #f0b90b;
  --sel-logo: 1.05rem;
}

.paysel__item--yape .paysel__btn {
  --sel-fondo: linear-gradient(180deg, #a63cbb, #8b2a9e 62%, #6d1f83);
  --sel-tinta: #fff;
  --sel-logo: 1.45rem;
}

/* Tarjeta (link de PayPal por dentro) y PayPal: antes las dos se quedaban con
   el fondo gris por defecto y se perdían entre Binance y Yape (22-sep-2026,
   pedido del dueño). Verde azulado para la tarjeta —no se parece a ningún
   otro botón de la lista— y el azul real de PayPal para la suya, que es la
   única que sí puede nombrar la marca. */
.paysel__item--paypal-link .paysel__btn {
  --sel-fondo: linear-gradient(180deg, #22b8a6, #129c8f 62%, #0a7368);
  --sel-tinta: #fff;
  --sel-logo: 1.4rem;
}

.paysel__item--paypal .paysel__btn {
  --sel-fondo: linear-gradient(180deg, #189bd7, #0070ba 62%, #003087);
  --sel-tinta: #fff;
}

/* ================= OTRAS FORMAS DE PAGAR — 14-ago-2026 =====================
   Binance Pay y cualquier otro medio manual. Van DEBAJO de la tarjeta y
   separados por una línea con rótulo: tienen que leerse como una alternativa
   de verdad, no como el aviso de que algo ha fallado. */
.pay-otros {
  margin-top: 1.1rem;
}

/* La línea con el «o paga con» en medio. Dos rayas y el texto centrado, sin
   fondo: el separador tiene que ser más discreto que las tarjetas que separa. */
.pay-otros__sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pay-otros__sep::before,
.pay-otros__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- El QR ----------------------------------------------------------------
   Fondo BLANCO SIEMPRE y con margen alrededor, en los dos temas. No es una
   decisión estética: un lector de QR necesita contraste oscuro sobre claro y
   una zona de silencio en el borde. Sobre el fondo negro de la tienda, un QR
   sin su placa blanca se escanea mal o no se escanea. */
.pay-card__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pay-card__qr[hidden] { display: none; }

.pay-card__qr img {
  width: min(200px, 62vw);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  padding: 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

.pay-card__qrhint {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Etiqueta del dato que se copia («Pay ID de Binance»). */
.pay-card__lbl {
  font-size: 0.78rem;
  color: var(--ink-muted);
  flex: none;
}

/* ---- A nombre de quién ----------------------------------------------------
   Destacado a propósito. En cripto una transferencia a la cuenta equivocada no
   se recupera: este es el dato que el cliente tiene que reconocer en su
   pantalla ANTES de confirmar, así que no puede ser una línea gris más. */
.pay-card__holder {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  border: 1px solid oklch(0.72 0.17 91 / 0.32);
  background: oklch(0.72 0.17 91 / 0.08);
  font-size: 0.88rem;
  color: var(--ink-body);
}

.pay-card__holder svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--brand);
}

.pay-card__holder b {
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

/* ---- Cuánto enviar --------------------------------------------------------
   El importe en USDT es el dato que más se mira y el que más caro sale si se
   equivoca, así que va en grande y con cifras de ancho fijo. */
.pay-card__monto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}

.pay-card__monto > span:first-child {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.pay-card__monto b {
  font-size: 1.15rem;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.pay-card__monto .pay-card__meta {
  width: 100%;
  margin: 0;
}

/* El aviso de que este pago NO es automático. */
.pay-note--pasos {
  margin-top: 0.7rem;
}

/* ---- El botón de «Ya pagué» ------------------------------------------------
   Verde de WhatsApp, porque eso es exactamente lo que abre. Antes era gris como
   cualquier otro botón secundario y se perdía justo en el paso que cierra la
   venta: el cliente pagó, y este es el botón que nos lo tiene que contar.

   Letra OSCURA sobre el verde, no blanca. Blanco sobre #25D366 da 2.0:1 —
   ilegible—; el casi negro de la marca da 10.4:1. Es el mismo criterio que ya
   sigue el resto de la web con los fondos claros de color. */
.btn.btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: var(--on-brand, #0b0b0d);
  font-weight: 700;
}

.btn.btn--wa:hover {
  background: #1fbe5a;
  border-color: #1fbe5a;
  color: var(--on-brand, #0b0b0d);
}

.btn.btn--wa svg { color: currentColor; }

/* ---- La onda al pulsar ----------------------------------------------------
   El círculo que se expande desde el punto exacto donde se tocó. Lo crea
   checkout.js y se borra solo al terminar. `currentColor` hace que herede el
   color del botón, así funciona igual en el verde, en el rojo o en el morado
   sin una regla por cada uno. */
.co-onda {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.32;
  transform: translate(-50%, -50%) scale(0);
  animation: coOnda 0.55s var(--ease-out) forwards;
}

@keyframes coOnda {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Para que la onda no se salga del botón hace falta recorte y contexto. */
.co2-main .btn,
.co2-main button {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .co-onda { display: none; }
}

.pay-card__val {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-strong);
}

.pay-card__copy {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  transition: color var(--t), border-color var(--t);
}

.pay-card__copy:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
}

.pay-card__copy svg {
  width: 1.05rem;
  height: 1.05rem;
}

.pay-card__meta {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0;
}

.pay-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid color-mix(in oklch, var(--brand) 28%, var(--border));
  font-size: 0.86rem;
  color: var(--ink-body);
  line-height: 1.45;
}

.pay-note svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--brand-ink);
  margin-top: 0.05rem;
}

/* ---- Checkout: elegir cuenta o invitado ---- */
/* Ilustración opcional bajo el título del modal: si assets/img/checkout-bg.png
   no existe, el onerror la quita y el modal queda exactamente como antes. */
.co-art {
  display: block;
  width: 100%;
  height: 7.5rem;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 620px) {
  .co-art {
    height: 5.5rem;
  }
}

/* Este modal lleva dos columnas con formulario: necesita más ancho que los
   560 px del resto, o el texto se parte en demasiadas líneas. */
.modal__panel--co {
  width: min(720px, 100%);
}

.co-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: stretch;
}

@media (max-width: 700px) {
  .co-opts {
    grid-template-columns: 1fr;
  }
}

.co-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.co-opt--rec {
  border-color: color-mix(in oklch, var(--brand) 40%, var(--border));
  background: var(--brand-50);
}

.co-opt__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.25rem;
}

.co-opt__head svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--brand-ink);
  flex: none;
}

.co-opt__head b {
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
}

/* La etiqueta vive SOBRE el borde de la tarjeta: nunca pelea espacio con el
   título ("Con cuenta" ya no se parte en dos líneas). */
.co-badge {
  position: absolute;
  top: -0.62rem;
  right: 0.85rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--on-brand);
  background: var(--brand-strong);
  padding: 0.22rem 0.55rem;
  border-radius: var(--r-pill);
  box-shadow: 0 3px 8px oklch(0 0 0 / 0.16);
}

/* Sin flex:1 (antes lo tenía): estiraba la descripción y dejaba un hueco
   enorme en la tarjeta de invitado. Ahora al fondo se pega .co-opt__foot y los
   dos botones quedan a la misma altura sin vacíos en medio. */
.co-opt__desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

.co-opt__foot {
  margin-top: auto;
  padding-top: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Ventajas de la compra como invitado */
.co-perks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.co-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-body);
}

.co-perks b {
  color: var(--ink);
}

.co-perks svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
  margin-top: 0.18rem;
}

/* Aquí vivía .co-opt__gift, el recuadro del cupón de bienvenida entre las
   ventajas de crear cuenta. Fuera el anuncio, fuera la regla (4-sep-2026). */

.co-opt__you {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--ink-body);
  margin: 0;
  line-height: 1.45;
}

.co-opt__you svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--brand-ink);
  flex: none;
  margin-top: 0.12rem;
}

.co-opt__you>span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.co-opt__hint {
  font-size: 0.78rem;
  text-align: center;
  margin: 0;
}

.co-guest {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* País + celular (opcional, para recibir la licencia también por WhatsApp).
   minmax(0,…) en las dos columnas: con la letra grande de Android, un `auto`
   pelado empujaba el input fuera de la tarjeta a 320px. */
.co-guest__wa {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.45rem;
}

.co-guest__country {
  min-width: 0;
  text-overflow: ellipsis;
}

@media (max-width: 430px) {
  .co-guest__wa { grid-template-columns: minmax(0, 1fr); }
}

.co-guest__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: -0.1rem 0 0;
}

.co-guest__hint svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  margin-top: 0.13rem;
}

/* ---- Cupón de descuento (en el modal de pago) ---- */
.pay-cup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pay-cup__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-ink);
  background: none;
  border: none;
  padding: 0.15rem 0;
  cursor: pointer;
}

.pay-cup__toggle svg {
  width: 1rem;
  height: 1rem;
}

.pay-cup__toggle:hover {
  text-decoration: underline;
}

.pay-cup__form {
  display: flex;
  gap: 0.5rem;
}

.pay-cup__form[hidden],
.pay-cup__toggle[hidden] {
  display: none;
}

.pay-cup__form .input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.pay-cup__form .input::placeholder {
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: normal;
}

.pay-cup__ok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-body);
  background: var(--brand-50);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--border));
  border-radius: var(--r-md);
  padding: 0.6rem 0.75rem;
}

.pay-cup__ok svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--brand-ink);
  flex: none;
}

.pay-cup__ok b {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.pay-cup__ok button {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.pay-cup__ok button:hover {
  color: var(--ink);
  text-decoration: underline;
}

.pay-sum__disc {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--brand-ink);
  font-weight: 600;
}

/* ------------------------------------------- Pago con tarjeta (Izipay) ----- */
/* Bloque dentro del modal de pago: botón primario, formulario incrustado y
   separador "o si prefieres" antes de la vía WhatsApp. */
.pay-gw {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1rem 0 0.4rem;
}

.pay-gw[hidden] {
  display: none;
}

/* Aceptación de Términos y Condiciones antes de pagar */
.pay-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-body);
  cursor: pointer;
}

.pay-terms input {
  margin-top: 0.18rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand);
  flex: none;
  cursor: pointer;
}

.pay-terms a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pay-terms input:disabled {
  cursor: default;
}

/* Falta marcar Términos: se resalta la casilla al pulsar "Pagar". Sustituye al
   antiguo botón gris deshabilitado, que no explicaba nada. El latido es corto
   y respeta prefers-reduced-motion. */
.pay-terms.is-missing {
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin: -0.5rem -0.6rem;
  background: color-mix(in oklab, var(--warn, #d97706) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn, #d97706) 45%, transparent);
  animation: payTermsPulse 0.5s ease 2;
}

.pay-terms.is-missing input {
  accent-color: var(--warn, #d97706);
  outline: 2px solid color-mix(in oklab, var(--warn, #d97706) 65%, transparent);
  outline-offset: 2px;
}

@keyframes payTermsPulse {
  50% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .pay-terms.is-missing { animation: none; }
}

.pay-gw__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0;
}

.pay-gw__meta svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}

.pay-gw__box {
  margin-top: 0.35rem;
}

/* Barra de confianza del pago: candado + marcas de tarjeta reconocibles */
.pay-trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin: 0.1rem 0 0.2rem;
}
.pay-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.pay-secure svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}
.pay-brands {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- Marca de pago (Visa, Mastercard, Amex, Diners, Izipay) ---------------
   La pinta SI.payMark (icons.js) en SVG. Va SIEMPRE sobre tarjetita blanca,
   también en modo oscuro: es como se ven en cualquier pasarela real y así los
   azules de las marcas conservan su contraste. */
.paymark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 1.82rem;
  padding: 0.18rem 0.26rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent);
  flex: none;
}

/* El logo se ajusta dentro de la tarjetita sin deformarse (cada marca trae su
   propia proporción: Visa es alargado, Amex y Diners son cuadrados). */
.paymark svg,
.paymark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Amex y Diners son cuadrados: con menos aire se ven del mismo peso visual
   que Visa y Mastercard, que sí aprovechan todo el ancho de la tarjetita. */
.paymark--amex,
.paymark--diners {
  padding: 0.1rem 0.16rem;
}

/* ---- Yape y Binance: azulejo de color, no blanco -------------------------
   Las cuatro tarjetas van sobre blanco porque sus logos son de color. Estos
   dos son al revés: Yape es un logotipo BLANCO y Binance uno DORADO, y los dos
   sobre blanco se pierden. Cada uno recibe el fondo de su propia marca, que es
   además con el que el cliente los reconoce en la app.

   Yape entra con el icono de la aplicación (cuadrado, con su morado dentro),
   así que su azulejo es cuadrado y transparente: el propio icono es la pieza,
   solo se le redondea la esquina. Binance entra como logotipo apaisado y sí
   necesita fondo: el negro de su marca (#0B0E11), sobre el que el oro rinde. */
.paymark--yape {
  width: 1.82rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.paymark--yape img {
  border-radius: 6px;
}

/* El logo de PayPal (22-sep-2026) es azul sobre transparente, así que sí
   queda bien sobre el fondo blanco de las tarjetas de Visa/Mastercard —a
   diferencia de Yape (blanco) y Binance (dorado)—, pero es una palabra
   apaisada y necesita el mismo aire extra que Binance para no quedar
   diminuta dentro de la tarjetita. */
.paymark--paypal {
  width: 3.6rem;
  padding: 0.22rem 0.3rem;
}

/* Más ancho y con menos aire que las tarjetas: el logotipo de Binance es una
   palabra en una sola línea (proporción 5:1). Con el ancho y el relleno de una
   tarjeta, `object-fit: contain` lo encogía por el lado largo y la palabra
   quedaba ilegible dentro de un azulejo medio vacío. */
.paymark--binance {
  width: 3.6rem;
  background: #0b0e11;
  border-color: color-mix(in oklch, #f0b90b 32%, transparent);
  padding: 0.16rem 0.3rem;
}

/* Variante suelta: el logo dentro de una frase ("procesado por [izipay]"),
   sin tarjetita ni borde, a la altura del texto que lo rodea. */
.paymark--inline {
  width: auto;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  vertical-align: -0.2em;
}

.paymark--inline img,
.paymark--inline svg {
  width: auto;
}

[data-theme="dark"] .paymark {
  border-color: color-mix(in oklch, #fff 16%, transparent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

/* La regla de arriba lleva un selector más pesado (0,2,0) que `.paymark--yape`
   y `.paymark--binance` (0,1,0): en oscuro les devolvía el borde y la sombra de
   las tarjetas. Se vuelven a fijar aquí, ya dentro del mismo peso. */
[data-theme="dark"] .paymark--yape {
  border: 0;
  box-shadow: none;
}

[data-theme="dark"] .paymark--binance {
  border-color: color-mix(in oklch, #f0b90b 32%, transparent);
}

.pay-gw__box[hidden] {
  display: none;
}

.pay-gw__box .kr-smart-form {
  width: 100%;
}

/* El formulario incrustado de Izipay, vestido con la marca: botón dorado de la
   casa, esquinas y bordes como el resto de la web. Solo tocamos la CÁSCARA
   (botón, cajas, errores); los campos internos son iframes de Izipay y no se
   alteran, así el pago sigue certificado. */
.pay-gw__box .kr-embedded .kr-payment-button,
.pay-gw__box .kr-smart-form .kr-payment-button {
  background: var(--brand-strong) !important;
  color: var(--on-brand) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 6px 16px color-mix(in oklch, var(--brand) 30%, transparent) !important;
  transition: filter var(--t), transform var(--t) !important;
}

.pay-gw__box .kr-embedded .kr-payment-button:hover,
.pay-gw__box .kr-smart-form .kr-payment-button:hover {
  filter: brightness(1.06);
}

.pay-gw__box .kr-embedded .kr-payment-button:active,
.pay-gw__box .kr-smart-form .kr-payment-button:active {
  transform: translateY(1px);
}

.pay-gw__box .kr-embedded .kr-field-wrapper,
.pay-gw__box .kr-embedded .kr-field-element,
.pay-gw__box .kr-embedded .kr-select-wrapper {
  border-radius: var(--r-md) !important;
}

.pay-gw__box .kr-embedded .kr-methods-list-header,
.pay-gw__box .kr-smart-form .kr-methods-list-header {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

.pay-gw__box .kr-embedded .kr-form-error,
.pay-gw__box .kr-smart-form .kr-form-error {
  border-radius: var(--r-md) !important;
}

/* Las cajas grises vacías que salían entre el nombre del titular y el botón de
   pagar (16-ago-2026). No eran campos: son los ESQUELETOS de carga que Izipay
   pinta mientras resuelve la lista de OTROS medios de pago (`kr-skeleton`, un
   encabezado + cuatro filas con brillo animado). Como la cuenta solo tiene
   tarjeta habilitada, nunca llegan a convertirse en nada y se quedaban ahí como
   huecos muertos que en móvil parecían datos de pago rotos. Se ocultan solo
   ellos: los campos reales y el botón son otros elementos y no se tocan, así el
   formulario sigue siendo el certificado de Izipay. */
.pay-gw__box .kr-skeleton-wrapper,
.pay-gw__box .kr-skeleton {
  display: none !important;
}

.pay-gw__sep {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

.pay-gw__sep::before,
.pay-gw__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Pantalla de éxito tras el cobro: comprobante + qué sigue */
.pay-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  padding: 0.5rem 0.1rem 0.2rem;
}

.pay-ok__check {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
  animation: payPop 0.45s var(--ease-out) both, payRing 0.9s var(--ease-out) 0.35s;
}

.pay-ok__check svg {
  width: 2rem;
  height: 2rem;
}

@keyframes payPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes payRing {
  from {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 40%, transparent);
  }

  to {
    box-shadow: 0 0 0 18px transparent;
  }
}

.pay-ok h4 {
  font-size: 1.32rem;
  letter-spacing: -0.01em;
}

.pay-ok__sub {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-top: -0.4rem;
}

.pay-rcpt {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.6rem;
}

.pay-rcpt__line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.pay-rcpt__line>span:not(.pay-rcpt__thumb) {
  flex: 1;
}

.pay-rcpt__thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--border);
  background: #fff;
}

.pay-rcpt__thumb--glyph {
  display: grid;
  place-items: center;
  background: var(--surface);
}

.pay-rcpt__thumb--glyph[hidden] {
  display: none !important;
}

.pay-rcpt__total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  color: var(--ink);
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
}

.pay-rcpt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0;
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
}

.pay-rcpt__meta>div {
  display: grid;
  gap: 0.12rem;
}

.pay-rcpt__meta dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pay-rcpt__meta dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

/* Número de pedido con botón de copiar. El área tocable llega a 44px con un
   ::after invisible (mismo truco que los botones de cantidad del carrito), así
   el icono se ve pequeño sin ser imposible de acertar con el pulgar. */
.pay-rcpt__id {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pay-rcpt__copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--r-xs);
  color: var(--ink-muted);
  transition: color var(--t), background-color var(--t);
}

.pay-rcpt__copy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

.pay-rcpt__copy:hover { color: var(--brand-ink); background: var(--surface); }
.pay-rcpt__copy svg { width: 0.85rem; height: 0.85rem; }

/* ---- Comprobante con dirección propia (/gracias) --------------------------
   Mismo lenguaje visual que el comprobante del modal, pero como página: se
   puede recargar, guardar en favoritos y mandar por WhatsApp. */
.gracias {
  max-width: 34rem;
  margin: 1.5rem auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.gracias h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin: 0;
}

.gracias__check {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-ink);
  margin-bottom: 0.3rem;
}

.gracias__check svg { width: 2.2rem; height: 2.2rem; }

.gracias__id {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-2);
}

.gracias__id > span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

/* minmax(0,…) y `wrap`: con la letra grande de Android el código y el botón
   no caben en una línea a 320px y tienen que poder bajar. */
.gracias__id-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.gracias__id-row code {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
  min-width: 0;
}

.gracias__meta {
  width: 100%;
  display: grid;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: left;
}

.gracias__meta > div {
  display: flex;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  flex-wrap: wrap;
}


.gracias__meta dt {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.gracias__meta dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  min-width: 0;
}

/* Pantalla angosta (o letra grande de Android): la etiqueta y el dato van uno
   debajo del otro y alineados a la izquierda. En una sola línea, un nombre de
   producto largo se partía y quedaba colgando a la derecha. */
@media (max-width: 430px) {
  .gracias__meta > div { flex-direction: column; }
  .gracias__meta dd { text-align: left; }
}

.gracias__acts {
  width: 100%;
  display: grid;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.gracias__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 1rem 0 0;
}

.gracias__tip svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; }

/* ---- /pagar: el enlace de pago que arma Sofía por WhatsApp ---------------
   El cliente ya decidió comprar en el chat; aquí solo revisa su pedido, pone su
   correo y paga. Una sola columna, todo a la vista sin desplazarse: se abre casi
   siempre desde el navegador de WhatsApp, en un celular. */
.cot {
  max-width: 30rem;
  margin: 1rem auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cot h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  margin: 0;
}

/* La marca encabeza la página (no un icono suelto): el cliente acaba de saltar
   desde el chat y lo primero que tiene que reconocer es de quién es la tienda
   a la que le va a dar su tarjeta. */
.cot__logo {
  display: block;
  margin: 0 auto 0.9rem;
  width: 3.4rem;
}

.cot__logo .brand-mark { width: 3.4rem; height: 3.4rem; }

.cot__sum {
  width: 100%;
  margin-top: 1rem;
  text-align: left;
}

/* Fila con icono + texto (plazo de entrega, pago seguro, correo de la cuenta).
   `align-items: flex-start` y `flex: none` en el icono: con la letra grande de
   Android el texto ocupa dos o tres líneas y el icono no debe estirarse. */
.cot__eta,
.cot__mail,
.cot__secure {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  min-width: 0;
}

.cot__eta svg,
.cot__mail svg,
.cot__secure svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.15rem;
}

.cot__eta {
  margin-top: 0.7rem;
  color: var(--ink-body);
  font-weight: 600;
}

.cot__mail { margin-top: 0.9rem; }
.cot__secure { margin-top: 0.9rem; }
.cot__mail span,
.cot__secure span,
.cot__eta span { min-width: 0; word-break: break-word; }

.cot__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.1rem;
  text-align: left;
}

.cot__lbl {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.cot__hint {
  margin: -0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.cot__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
}

.cot__wa:hover { color: var(--brand-ink); }
.cot__wa svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* Aviso para quien compró sin cuenta: cómo recuperar la licencia más adelante. */
.pay-ok__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  width: 100%;
  margin: 0.1rem 0 0;
}

.pay-ok__tip svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.15rem;
}

.pay-next {
  list-style: none;
  margin: 0;
  padding: 0.1rem 0.15rem;
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0.55rem;
}

.pay-next li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.pay-next li i {
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-faint);
  font-style: normal;
}

.pay-next li i svg {
  width: 0.85rem;
  height: 0.85rem;
}

.pay-next li.is-done i {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pay-next li.is-done {
  color: var(--ink-body);
}

.pay-next li.is-now {
  color: var(--ink);
  font-weight: 600;
}

.pay-next__dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
  animation: payDot 1.4s var(--ease-out) infinite;
}

@keyframes payDot {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.pay-next__t {
  display: block;
  padding-top: 0.12rem;
}

.pay-next__t span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 400;
}

.pay-ok .btn {
  margin-top: 0.2rem;
}

.pay-ok__hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .pay-ok__check {
    animation: none;
  }

  .pay-next__dot::after {
    animation: none;
  }
}

/* Miniatura única del producto en el resumen del pago. El glifo es solo el
   respaldo de una imagen rota y debe permanecer oculto cuando la portada carga. */
.pay-sum__line {
  align-items: center;
}

.pay-sum__name {
  flex: 1;
  min-width: 0;
}

.pay-sum__thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  flex: none;
  border: 1px solid var(--border);
  background: #fff;
}

.pay-sum__thumb--glyph {
  display: grid;
  place-items: center;
  border: none;
  background: none;
}

.pay-sum__thumb--glyph[hidden] {
  display: none !important;
}

.pay-sum__thumb--glyph .brand-glyph {
  border-radius: 10px;
}
/* ------------------------------------------------- Vitrina de estuches --- */
/* Carrusel con flechas (pedido del dueño, 20-jul-2026; vitrina 3D 23-jul-2026):
   pedestal claro con cuadrícula técnica y halo dorado (mismo lenguaje de la
   tarjeta larga 3D de liccard.css). El estuche del centro se destaca con halo
   de marca y check, y GIRA en perspectiva siguiendo el cursor con brillo
   especular (ui.js pone --gx/--gy y el transform inline). Debajo: etiqueta,
   nombre, precio y compra del producto centrado. Tokens del sitio. */
.deck { margin: 0.5rem 0 1.5rem; }

.deck__stage {
  --deck-box: clamp(120px, 32vw, 176px);
  position: relative;
  height: calc(var(--deck-box) + 4rem);
  overflow: hidden;
  background: linear-gradient(170deg, #fff, oklch(0.966 0 0 ));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

/* Cuadrícula técnica del pedestal (se desvanece hacia los bordes) */
.deck__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(oklch(0 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0 0 0 / 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(62% 84% at 50% 50%, #000, transparent 82%);
  mask-image: radial-gradient(62% 84% at 50% 50%, #000, transparent 82%);
  opacity: 0.5;
}

/* Halo oro de marca bajo el estuche central */
.deck__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--deck-box) * 1.7);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.72 0.15 91 / 0.18), transparent 72%);
}

.deck__box {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--deck-box);
  height: var(--deck-box);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .55s var(--ease-out), opacity .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change: transform, opacity;
}

.deck__box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Brillo especular sobre el estuche (sigue al cursor mientras gira) */
.deck__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 40%),
      oklch(1 0 0 / 0.42), oklch(1 0 0 / 0.1) 45%, transparent 66%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}

.deck__box.is-tilt::after { opacity: 1; }

/* Mientras gira, el transform inline debe seguir al cursor casi 1:1 */
.deck__box.is-tilt {
  transition: transform .12s linear, opacity .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

.deck__box.is-center {
  border-color: oklch(0.6 0.14 91 / 0.5);
  box-shadow:
    0 22px 46px oklch(0 0 0 / 0.16),
    0 0 0 3px oklch(0.69 0.16 91 / 0.25),
    0 14px 34px oklch(0.52 0.15 91 / 0.22);
}

/* Check verde del estuche centrado (como la referencia, en oro de marca) */
.deck__check {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
  box-shadow: 0 4px 12px oklch(0.52 0.15 91 / 0.45), 0 0 0 2px #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}

.deck__box.is-center .deck__check { opacity: 1; transform: scale(1); }
.deck__check svg { width: 1rem; height: 1rem; }

.deck__glyph { display: grid; place-items: center; }

/* Flechas: mismas píldoras circulares del sistema (superficie + borde) */
.deck__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--ink-body);
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}

.deck__nav:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.deck__nav svg { width: 1.25rem; height: 1.25rem; }
.deck__nav--prev { left: clamp(0.25rem, 4vw, 4rem); }
.deck__nav--next { right: clamp(0.25rem, 4vw, 4rem); }

/* Ficha del producto centrado, debajo del carrusel */
.deck__info {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  text-align: center;
}

.deck__info.is-swap > * { animation: deck-swap .38s var(--ease-out) both; }

@keyframes deck-swap {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.deck__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-body);
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.deck__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.deck__info .price { justify-content: center; }

/* Enlace discreto a la ficha, bajo el "Comprar ahora" de la vitrina: el botón
   ahora abre el pago directo, así que la ficha necesita su propia puerta. */
.deck__detail {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
}

.deck__detail:hover { color: var(--brand-ink); }

@media (max-width: 560px) {
  .deck__stage { --deck-box: clamp(118px, 36vw, 150px); }
  .deck__nav { width: 2.4rem; height: 2.4rem; }
  .deck__nav--prev { left: 0; }
  .deck__nav--next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .deck__box, .deck__box::after, .deck__check, .deck__nav { transition: none; }
  .deck__info.is-swap > * { animation: none; }
}