:root {
  --bg:        #fffaf3;
  --card:      #ffffff;
  --text:      #241a10;
  --muted:     #8a7660;
  --accent:    #ff7a1a;
  --accent2:   #ffb020;
  --btn:       #e35d00;
  --border:    #f1e4d3;
  --chip-bg:   #fdf0e4;
  --danger:    #d1373d;
  --ok:        #0ea968;
}

* { box-sizing: border-box; }

/* [hidden] debe ganarle siempre a display:flex de las clases de abajo
   (misma especificidad, y el orden del archivo hace que si no, las clases
   .checkout-state / .page / etc ganen y el elemento quede visible aunque
   tenga el atributo hidden puesto por JS). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: 'Space Grotesk', sans-serif; margin: 0 0 4px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

a { color: var(--btn); }

/* ─── Botones ─────────────────────────────────────────────── */

.btn-primary, .btn-ghost, .btn-guest, .btn-secondary {
  border-radius: 11px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .15s ease, background .15s ease, transform .1s ease;
  font-family: 'Space Grotesk', sans-serif;
}
.btn-primary { background: var(--btn); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: .6; cursor: default; filter: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: rgba(0,0,0,0.03); }
/* Chip blanco discreto — para un botón secundario sobre fondos de color
   (ej. "Copiar todo" en el header de Mis cuentas) sin el look recio del
   botón nativo del navegador que tenía antes (nunca se había definido
   esta clase acá, solo en el panel admin). */
.btn-secondary {
  background: var(--card); color: var(--text); border-color: var(--border);
  font-family: 'Manrope', sans-serif;
}
.btn-secondary:hover { background: var(--chip-bg); }
.btn-secondary:active { transform: scale(0.98); }
.btn-guest { background: var(--ok); color: #fff; margin-top: 10px; }
.btn-guest:hover { filter: brightness(1.08); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }

/* ─── Acceso Mayorista — dorado, se nota aparte del resto ───────── */
.btn-gold-exclusive {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 11px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  margin-top: 10px;
  color: #3a2a00;
  background: linear-gradient(120deg, #bf8f1f, #f4e08a, #d4af37, #f4e08a, #bf8f1f);
  background-size: 300% 100%;
  box-shadow: 0 0 0 1px rgba(191,143,31,0.4), 0 4px 14px rgba(191,143,31,0.35);
  animation: goldShimmer 4.5s ease-in-out infinite, goldPulse 2.4s ease-in-out infinite;
}
.btn-gold-exclusive:hover { filter: brightness(1.05); }
.btn-gold-exclusive:active { transform: scale(0.98); }

@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(191,143,31,0.4), 0 4px 14px rgba(191,143,31,0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(191,143,31,0.6), 0 4px 20px rgba(191,143,31,0.6); }
}

/* ─── Gate de login/registro ─────────────────────────────────── */

.view-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.auth-blob {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: .16;
}
.auth-blob-1 { top: -120px; right: -120px; animation: blobFloat1 14s ease-in-out infinite; }
.auth-blob-2 {
  bottom: -140px; left: -140px; width: 300px; height: 300px;
  background: var(--accent); opacity: .12;
  animation: blobFloat2 18s ease-in-out infinite;
}
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, 30px) scale(1.08); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(25px, -25px) scale(1.1); }
}
.auth-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  animation: riseIn .5s ease both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-center { flex-direction: column; margin-bottom: 28px; }
.brand-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 28px -12px rgba(255,122,26,.35); }
.brand-logo-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .3px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 16px 40px -22px rgba(255,122,26,.28);
}

.auth-card form { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.auth-card label { font-size: 11.5px; color: var(--muted); margin: 10px 0 2px; }
.auth-card input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #fcfcfc;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.15); }
.auth-card button[type="submit"] { margin-top: 16px; }

.divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: 11px; color: var(--muted); }

.form-error { color: var(--danger); font-size: 12.5px; margin: 8px 0 0; }

/* ─── Comprar sin cuenta — pantalla de credenciales generadas ────── */

.guest-success-card { text-align: center; }
.guest-success-icon {
  font-size: 40px; width: 72px; height: 72px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg); border-radius: 50%;
}
.guest-creds-box {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 16px; padding: 18px 20px; margin: 18px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.guest-creds-row { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.guest-creds-label { font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.guest-creds-value { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .5px; }

/* ─── App (post-login) ───────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topnav { display: flex; align-items: center; gap: 6px; }
.nav-btn {
  border: none; background: transparent; color: var(--muted);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13.5px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
}
.nav-btn:hover { background: var(--chip-bg); color: var(--text); }
.nav-btn.active { background: var(--accent); color: #fff; }
.nav-btn-ghost { color: var(--muted); }
.nav-btn-logout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: none; background: transparent; color: var(--danger); cursor: pointer;
}
.nav-btn-logout:hover { background: rgba(209,55,61,.1); }
.nav-support-btn {
  display: inline-flex; align-items: center;
  background: #25D366; color: #fff; text-decoration: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13.5px;
  padding: 8px 14px; border-radius: 9px; margin-left: 2px;
}
.nav-support-btn:hover { filter: brightness(1.05); }

.notif-wrap { position: relative; }
.nav-btn-bell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; position: relative;
  border: none; background: var(--chip-bg); cursor: pointer;
  transition: filter .15s ease;
}
.nav-btn-bell:hover { filter: brightness(0.97); }
.nav-btn-bell-icon { font-size: 18px; line-height: 1; filter: saturate(1.15); }
.notif-dot {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(36,26,16,.25);
  z-index: 20; overflow: hidden;
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.notif-clear-btn {
  border: none; background: none; color: var(--muted); font-size: 13px;
  cursor: pointer; padding: 2px 4px; border-radius: 6px; line-height: 1;
}
.notif-clear-btn:hover { background: var(--chip-bg); color: var(--danger); }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--chip-bg); }
.notif-item-msg { font-size: 13.5px; line-height: 1.4; }
.notif-item-time { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.notif-item-unread { background: var(--chip-bg); }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.content { max-width: 980px; margin: 0 auto; padding: 28px 20px 60px; }
.page { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Catálogo ────────────────────────────────────────────────── */

.section-chip {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .4px;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 26px 0 14px;
}
.section-chip:first-child { margin-top: 0; }
.section-chip-exclusive {
  background: linear-gradient(135deg, #ffd76a, #e35d00);
  color: #fff;
}
.section-chip-combos {
  background: linear-gradient(135deg, #7b3fe4, #e35d00);
  color: #fff;
  font-size: 14px;
  padding: 9px 20px;
}

/* Mismo tamaño de tarjeta en todo el catálogo (Exclusivos y Perfiles)
   — centrado y sin estirarse a lo ancho aunque haya pocos productos
   en la fila, para que todas las secciones se vean parejas. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 14px;
}
.product-card-exclusive {
  border: 1px solid #f0c86a;
  box-shadow: 0 10px 26px -16px rgba(227,93,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card-exclusive:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 34px -16px rgba(227,93,0,.55);
}
.product-card-exclusive:active { transform: translateY(-2px) scale(.985); }
.badge-exclusive {
  background: linear-gradient(135deg, #ffd76a, #e35d00); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .3px;
}

/* Etiqueta (★ EXCLUSIVO / ANUAL) flotando sobre la esquina de la foto,
   separada del precio para que no compitan por la atención. */
.product-badge-overlay {
  position: absolute; top: 10px; left: 10px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.4);
}

/* Precio como píldora flotante debajo del nombre — más vistoso que una
   banda plana, sin ocupar un botón Comprar propio (la card entera ya
   abre el detalle, con su botón Comprar, al hacer click). */
.product-body-pill { align-items: center; text-align: center; padding: 14px 16px 18px; gap: 9px; }
.product-price-pill {
  display: inline-flex; align-items: baseline; gap: 2px;
  background: linear-gradient(135deg, #ffb020, #e35d00); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  padding: 4px 28px; border-radius: 999px;
  box-shadow: 0 8px 16px -9px rgba(227,93,0,.65);
}
.product-price-pill-currency { font-size: 10.5px; opacity: .85; }
.product-price-pill-amount { font-size: 17px; line-height: 1; }
.product-price-pill-reserve {
  background: linear-gradient(135deg, #9a9a9a, #5a5a5a);
  box-shadow: 0 8px 16px -9px rgba(40,40,40,.5);
}
.product-reserve-tag-sm {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted);
}

/* Sin stock — se puede pagar igual para reservar (no se bloquea la
   compra), solo queda marcada distinto para que se note que es una
   reserva y no una entrega al toque. */
.product-card-outofstock { opacity: .85; }
.detail-reserve-note {
  background: var(--chip-bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: cardIn .4s ease forwards;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(255,122,26,.35); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.product-img-wrap { width: 100%; aspect-ratio: 16/10; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-img-fallback { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--accent); font-size: 22px; }

.product-body { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-title { font-weight: 700; font-size: 14.5px; }
.badge-annual {
  background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; letter-spacing: .3px;
}
.product-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; font-size: 17px; }

/* ─── Modal de detalle de producto ───────────────────────────── */

.detail-img-wrap {
  width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
  background: var(--chip-bg); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.detail-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.detail-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-title-row h2 { font-size: 19px; }
#detail-desc { font-size: 13.5px; margin: 8px 0 0; }
.detail-canva-email { margin-top: 14px; text-align: left; }
.detail-canva-email label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.detail-canva-email input {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: #fcfcfc; color: var(--text);
  font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.detail-canva-email input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.15); }

.detail-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.detail-footer .product-price { font-size: 19px; color: var(--accent); }

.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-list li { font-size: 13.5px; color: var(--text); }

/* ─── Modal de detalle — vidrio claro con fondo bokeh y fichas tipo
   bento (el resto de modales del sitio, checkout/combo, no cambian). */
#product-detail-modal {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,178,90,.16), transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(255,210,140,.14), transparent 45%),
    radial-gradient(circle at 30% 85%, rgba(255,150,70,.1), transparent 50%),
    rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#product-detail-modal.closing { animation: modalFadeOut .18s ease forwards; }
#product-detail-modal.closing .modal-card { animation: modalShrinkOut .18s ease forwards; }
@keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalShrinkOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(.96); }
}
#product-detail-modal .modal-card {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 60px -24px rgba(227,93,0,.35);
  border-radius: 22px;
}
#product-detail-modal .detail-img-wrap { box-shadow: 0 10px 24px -14px rgba(227,93,0,.5); }
#product-detail-modal .detail-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
#product-detail-modal .detail-list li {
  background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.9);
  border-radius: 13px; padding: 12px 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
#product-detail-modal .detail-list li:first-child { grid-column: 1 / -1; }
#product-detail-modal .detail-list li::before {
  content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(227,93,0,.14); color: var(--btn); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
#product-detail-modal .detail-reserve-note { background: rgba(255,255,255,.6); }
#product-detail-modal .detail-footer {
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px; padding: 14px 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#product-detail-modal .detail-footer .product-price { font-size: 23px; color: var(--btn); }
#product-detail-modal #detail-buy-btn {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 10px 20px -10px rgba(227,93,0,.55);
}

/* ─── Soporte dentro del checkout ─────────────────────────────── */

.yape-info {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--chip-bg); border-radius: 12px; padding: 12px 14px; margin: 4px 0;
}
.yape-info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yape-info-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.yape-info-value { font-size: 13.5px; color: var(--text); font-weight: 700; flex: 1; text-align: right; }

.yape-copy-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 4px 8px; font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.yape-copy-btn:hover { background: var(--chip-bg); }
.yape-copy-btn-amount { margin-left: 8px; }

.checkout-support-row {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); width: 100%;
}
.checkout-wrong-amount { font-size: 12.5px; color: var(--danger); font-weight: 600; text-align: center; }
.checkout-wa-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
}
.checkout-wa-btn:hover { filter: brightness(1.05); }

/* ─── Mis cuentas ─────────────────────────────────────────────── */

/* Columna angosta y centrada — a todo el ancho de .content (980px) las
   filas de correo/contraseña quedaban demasiado largas y perdían lectura. */
#page-dashboard { max-width: 600px; margin: 0 auto; }

.dashboard-subtitle-row { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.dashboard-subtitle-row:first-of-type { margin-top: 0; }
.dashboard-subtitle-row .dashboard-subtitle { margin: 0; }
.icon-btn-sm {
  border: none; background: var(--chip-bg); color: var(--text);
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Modal de checkout ───────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(36,26,16,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
  animation: fadeIn .2s ease both;
}
.modal-card {
  background: var(--card); border-radius: 20px; padding: 28px 24px;
  width: 100%; max-width: 380px; position: relative;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
  animation: riseIn .25s ease both;
}
.modal-card--wide { max-width: 520px; max-height: 88vh; overflow-y: auto; text-align: left; }
.modal-close {
  position: absolute; top: 12px; right: 12px; border: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.modal-close:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.checkout-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.checkout-amount-row { display: flex; align-items: center; justify-content: center; margin: 6px 0; }
.checkout-amount { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; color: var(--accent); }
.checkout-qr { width: 190px; height: 190px; object-fit: contain; border: 1px solid var(--border); border-radius: 14px; padding: 8px; margin: 4px 0; }
.checkout-waiting { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ─── Checkout "Completa tu pago" — cabecera oscura con el monto en
   grande, cuerpo claro con el QR y los datos (resto de estados del
   checkout — carga/éxito/error — quedan igual). Fondo del backdrop
   también pasa a blanco/desenfocado en vez del dim oscuro genérico. */
#checkout-modal {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Mismo criterio de fondo difuminado que el checkout. */
#support-modal, #support-options-modal {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#support-modal .mini-account, #support-options-modal .mini-account {
  background: var(--chip-bg); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; margin: 10px 0 14px;
}
#support-modal .mini-account b, #support-options-modal .mini-account b { font-family: 'Space Grotesk', sans-serif; }
#support-modal .sup-input {
  width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px;
  font-family: 'Manrope', sans-serif; font-size: 13.5px; resize: vertical; box-sizing: border-box;
}
#support-modal .form-error { margin: 8px 0 0; }
#support-modal .btn-row, #support-options-modal .btn-row { display: flex; gap: 8px; margin-top: 14px; }
#support-modal .btn-row .btn-ghost, #support-options-modal .btn-row .btn-ghost { flex: 1; }
#support-modal .btn-row .btn-primary, #support-options-modal .btn-row .btn-primary { flex: 2; }

/* ── Menú de opciones de Soporte (por plataforma: Netflix, Crunchyroll,
   Prime Video, Disney, ChatGPT — ver SUPPORT_OPTIONS_CONFIG) ── */
.support-tabs-bar { display: flex; background: var(--chip-bg); border-radius: 12px; padding: 3px; margin: 10px 0 14px; gap: 3px; }
.support-tab-btn {
  flex: 1; text-align: center; padding: 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  cursor: pointer; color: var(--muted); background: none; border: none; font-family: inherit;
}
.support-tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.support-options-list { display: flex; flex-direction: column; gap: 8px; }
.support-option-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--chip-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font-family: inherit;
}
.support-option-btn:hover { border-color: var(--accent); }
.support-option-icon { font-size: 19px; line-height: 1; }
.support-option-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.support-option-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.support-tab-human { background: var(--chip-bg); border-radius: 14px; padding: 16px; text-align: center; }
.support-tab-human-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.support-tab-human p { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }

.support-options-help p { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.support-options-help img { width: 100%; border-radius: 12px; margin-bottom: 10px; display: block; }
/* padding en 0 y repartido en cada sección (header/body) en vez del
   viejo truco de márgenes negativos — ese dejaba un filo blanco
   asimétrico en las esquinas porque el radio de la cabecera y el de
   la tarjeta no terminaban de coincidir en el pixel exacto. */
#checkout-modal .modal-card { overflow: hidden; padding: 0; }
#checkout-modal #checkout-loading,
#checkout-modal #checkout-error { padding: 28px 24px; }
.checkout-ready-header {
  align-self: stretch; box-sizing: border-box;
  padding: 32px 24px 28px;
  background: #141413; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.checkout-ready-header h2 { color: rgba(255,255,255,.65); font-size: 13px; font-weight: 600; margin: 0; }
.checkout-ready-header .muted { color: rgba(255,255,255,.5); font-size: 11.5px; margin: 0; }
.checkout-ready-header .checkout-amount { color: #FFB13D; font-size: 36px; }
.checkout-ready-body { align-self: stretch; box-sizing: border-box; padding: 20px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.checkout-ready-body .checkout-waiting { color: var(--btn); font-weight: 600; }

.success-check {
  width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: #fff;
  font-size: 28px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  position: relative;
  animation: successPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.success-check::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--ok); animation: successRing .6s ease-out .05s both;
}
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes successRing {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.checkout-success-accounts { width: 100%; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.success-account-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-align: left;
}
/* Al tocar una notificación, "Mis cuentas" resalta la tarjeta exacta unos
   segundos para que el cliente la identifique de un vistazo — un marco
   punteado "marchando" alrededor (tipo marquee de selección), para que se
   note incluso sobre el header de color. Las 4 franjas en background-image
   son el truco clásico de "marching ants" en CSS puro, sin JS ni SVG —
   inset:0 (no afuera) para que no lo recorte el overflow:hidden de arriba. */
.success-account-card-highlight::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: 14px; overflow: hidden;
  background-image:
    repeating-linear-gradient(90deg, #e35d00 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, #e35d00 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg,  #e35d00 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg,  #e35d00 0 8px, transparent 8px 16px);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 3px, 16px 3px, 3px 16px, 3px 16px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: accountHighlightAnts .6s linear infinite;
}
@keyframes accountHighlightAnts {
  to { background-position: 16px 0, -16px 100%, 0 16px, 100% -16px; }
}
/* El resto de las tarjetas se atenúa mientras dura el marco punteado, para
   que la resaltada salte más a la vista — misma duración (2.4s) desde JS. */
.success-account-card-dimmed { opacity: .45; transition: opacity .3s ease; }
/* Franja de color del header — naranja normal, o rojo/naranja "urgente"
   cuando la cuenta ya se puede renovar (ver canRenew en successAccountHtml),
   para que el estado se note sin tener que leer el texto. */
/* Grid, no flex — con space-between la píldora de vencimiento no queda
   realmente centrada, se corre según cuánto midan el nombre y "Copiar"
   (ADOBE vs CRUNCHYROLL ANUAL quedaban disparejos). El track del medio
   es "auto" y los de los costados "1fr" iguales, así el centro es el
   centro real de la tarjeta sin importar el largo del texto. */
.success-account-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 4px 14px; color: #fff;
}
.success-account-head .success-account-platform { justify-self: start; }
.success-account-head .success-account-expiry-pill { justify-self: center; }
.success-account-head .success-account-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
/* Píldora translúcida igual que .success-account-expiry-pill, no el chip
   blanco sólido de .btn-secondary — ese se veía pesado/tosco flotando
   sobre la franja de color, sin importar cuánto se achicara el padding.
   Mismo tratamiento para "Soporte" — deben verse del mismo tamaño. */
.success-account-head .success-copy-btn,
.success-account-head .success-support-btn {
  background: rgba(255,255,255,.22); border: none; color: #fff;
  padding: 4px 9px; font-size: 11px; font-weight: 700; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.success-account-head .success-copy-btn:hover,
.success-account-head .success-support-btn:hover { background: rgba(255,255,255,.32); }
/* Botón "Soporte" — por ahora no hace nada al tocarlo (sin backend todavía,
   ver pedido del 17/10). El puntito pulsante es lo único "vivo" acá. */
.success-support-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: successSupportPulse 1.4s ease infinite;
}
@keyframes successSupportPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.5); }
}
/* Con reporte activo, "Soporte" se vuelve esta etiqueta de estado — mismo
   tamaño que Copiar (hereda el estilo de .success-support-btn), pero sin
   el puntito ni hover, ya no es un botón, es solo información. */
.success-support-btn.success-support-status { cursor: default; }
.success-support-btn.success-support-status:hover { background: rgba(255,255,255,.22); }
.success-account-head.ok     { background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.success-account-head.urgent { background: linear-gradient(120deg, #e24b3d, #ff8a3d); }
.success-account-platform { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13.5px; }
.success-account-expiry-pill {
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.28); padding: 3px 8px; border-radius: 999px;
}
.success-account-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
/* Ya se ve como píldora en el header — esta línea de texto plano solo se
   reactiva en el recibo de compra (#checkout-success-accounts), que no
   usa el header de color. */
.success-account-expiry { display: none; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.success-account-row { font-size: 13px; color: var(--text); word-break: break-all; }
.success-account-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.success-account-link:hover { text-decoration: underline; }

/* ─── Pantalla de entrega ("¡Listo!") — cabecera verde con el check y
   los datos como recibo (filas con línea punteada), en vez de la
   tarjeta plana. "Mis cuentas" sigue usando la misma successAccountHtml
   pero sin este estilo, así que todo acá va escopeado a esta pantalla. */
.checkout-success-header {
  align-self: stretch; box-sizing: border-box;
  padding: 24px 24px 20px;
  background: linear-gradient(120deg, var(--ok), #0a7f4e);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.checkout-success-header .success-check { background: rgba(255,255,255,.22); }
.checkout-success-header .success-check::after { border-color: rgba(255,255,255,.55); }
.checkout-success-header h2 { color: #fff; font-size: 19px; margin: 0; }
.checkout-success-header .muted { color: rgba(255,255,255,.85); font-size: 11.5px; text-align: center; margin: 0; }
.checkout-success-body { width: 100%; padding: 18px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-sizing: border-box; }
#checkout-goto-dashboard { background: linear-gradient(135deg, var(--accent2), var(--accent)); }

#checkout-success-accounts .success-account-card {
  background: transparent; border: none; border-radius: 0; overflow: visible;
  padding: 0 0 12px; border-bottom: 1px dashed var(--border);
}
#checkout-success-accounts .success-account-card:last-child { border-bottom: none; padding-bottom: 0; }
/* El recibo de compra no usa el header de color — se queda con el look
   plano de siempre (plataforma + copiar, vencimiento como texto abajo). */
/* Sin píldora acá — vuelve a 2 columnas (plataforma / copiar), si no el
   grid de 3 columnas de arriba deja el botón flotando en la del medio. */
#checkout-success-accounts .success-account-head {
  grid-template-columns: 1fr auto; background: none; padding: 0; color: var(--text); margin-bottom: 2px;
}
#checkout-success-accounts .success-account-expiry-pill { display: none; }
/* Recién compró, no tiene sentido ofrecerle soporte todavía. */
#checkout-success-accounts .success-support-btn { display: none; }
#checkout-success-accounts .success-account-body { padding: 0; }
#checkout-success-accounts .success-account-expiry { display: block; }
#checkout-success-accounts .success-account-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px dashed var(--border); word-break: normal;
}
#checkout-success-accounts .success-account-row:last-of-type { border-bottom: none; }

/* ─── Pantalla de reserva ("¡Reservado!") — se muestra cuando el cliente
   paga sin stock disponible; el polling sigue corriendo en segundo plano
   y pasa solo a "¡Listo!" cuando la cuenta aparece. */
.checkout-reserved-header {
  align-self: stretch; box-sizing: border-box;
  padding: 24px 24px 20px;
  background: linear-gradient(120deg, #ff9d42, #ff7a1a);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.checkout-reserved-icon {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.checkout-reserved-icon span { display: inline-block; animation: hourglassFlip 2.6s ease-in-out infinite; }
@keyframes hourglassFlip {
  0%, 38%  { transform: rotate(0deg); }
  50%, 88% { transform: rotate(180deg); }
  100%     { transform: rotate(360deg); }
}
.checkout-reserved-header h2 { color: #fff; font-size: 19px; margin: 0; }
.checkout-reserved-body {
  width: 100%; padding: 20px 24px 28px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.checkout-reserved-body p {
  font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; text-align: center;
}
.checkout-reserved-order {
  align-self: stretch; background: var(--chip-bg); border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; text-align: left; box-sizing: border-box;
}
#checkout-reserved-goto-dashboard { background: linear-gradient(135deg, var(--accent2), var(--accent)); }
#checkout-success-accounts .success-account-value { font-weight: 700; color: var(--text); text-align: right; word-break: break-all; }
#checkout-success-accounts .success-copy-btn {
  background: rgba(14,169,104,.12); color: var(--ok); border: none;
  font-weight: 700; font-size: 10.5px; padding: 6px 12px; border-radius: 999px;
}
.success-account-renew-box { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.success-account-renew-status { font-size: 12px; font-weight: 600; color: var(--btn); }
.badge-no-renewable {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: 600; color: var(--danger);
  background: rgba(209, 55, 61, .1); border: 1px solid var(--danger);
  border-radius: 999px; padding: 3px 10px;
}

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.spinner-sm { width: 13px; height: 13px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* El topbar (logo + hasta 5 botones de nav) no entra en una sola fila en
   celulares angostos — sin esto los botones se salían de pantalla o se
   apretaban hasta ser ilegibles/difíciles de tocar. Se apila en dos filas
   y el nav se deja envolver (wrap) en vez de desbordar. */
@media (max-width: 680px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .topnav { flex-wrap: wrap; justify-content: center; gap: 6px; }
}

@media (max-width: 480px) {
  .nav-btn, .nav-support-btn { font-size: 12px; padding: 7px 10px; }
  .brand-name { font-size: 16px; }
  .content { padding: 20px 14px 48px; }
  .checkout-amount { font-size: 26px; }
  .checkout-qr { width: 160px; height: 160px; }
}

/* ─── Renovaciones (público, sin login) ──────────────────────── */

.renewal-accounts-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; text-align: left; }
.renewal-account-card {
  background: var(--chip-bg); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.renewal-account-card-due { border: 1.5px solid var(--accent); }
.renewal-account-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.renewal-account-platform { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; }
.renewal-account-status { font-size: 12px; color: var(--muted); }
.renewal-account-card-due .renewal-account-status { color: var(--btn); font-weight: 600; }
.renewal-account-email { font-size: 13px; color: var(--text); word-break: break-all; }
.renewal-account-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.renewal-account-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--btn); }

.dashboard-subtitle { font-size: 15px; margin: 18px 0 8px; color: var(--muted); }
.dashboard-subtitle:first-of-type { margin-top: 0; }

/* ─── Códigos ─────────────────────────────────────────────────── */

.codes-value {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: 2px; color: var(--btn); background: rgba(0,0,0,.04);
  border-radius: 10px; padding: 6px 10px; text-align: center;
}
.codes-meta { font-size: 12px; color: var(--muted); }
.codes-remaining { font-size: 12px; color: var(--muted); }

/* ─── Arma tu combo (carrito interactivo) ────────────────────── */

.build-combo-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; margin: 20px 0 8px; padding: 22px 18px;
  background: var(--chip-bg); border-radius: 16px; border: 1.5px dashed var(--accent);
}
.build-combo-prompt-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; margin: 0; }

.build-combo-catalog {
  display: flex; flex-direction: column; gap: 8px; max-height: 240px;
  overflow-y: auto; margin: 12px 0 18px; padding-right: 2px;
}
.build-combo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--chip-bg); border-radius: 12px;
}
.build-combo-item-name { font-weight: 600; font-size: 13.5px; flex: 1; }
.build-combo-item-price {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--btn);
  font-size: 13px; white-space: nowrap;
}

.build-combo-cart { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.build-combo-cart h3 { font-size: 15px; margin: 0 0 8px; }
.build-combo-cart-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.build-combo-cart-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.build-combo-remove-btn {
  border: none; background: transparent; color: var(--danger); cursor: pointer;
  font-size: 14px; padding: 2px 6px; line-height: 1;
}
.build-combo-summary { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; gap: 10px; }
.build-combo-discount-label { font-size: 12.5px; color: var(--muted); }
.build-combo-total { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--btn); }