/* ── Cuckold Gold — pantalla de planes ───────────────────────────────── */

.gold-wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Aviso de vista previa (solo admins, mientras el pago no está conectado) */
.gold-preview { display: flex; align-items: center; gap: 10px; background: rgba(232,147,41,.1); border: 1px solid var(--amber); border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; color: var(--amber3); font-size: 15px; }
.gold-preview svg { color: var(--amber2); flex-shrink: 0; }
/* El aviso de "esto cobra de verdad" NO puede verse igual que el de vista previa: es el
   único que advierte de un cargo real, y en ámbar se lee como una nota más. */
.gold-preview.alerta { background: rgba(244,63,94,.1); border-color: var(--red); color: var(--text); }
.gold-preview.alerta svg { color: var(--red); }

/* Encabezado */
.gold-head { text-align: center; margin: 8px 0 32px; }
.gold-kicker { display: inline-block; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--text3); margin-bottom: 10px; }
.gold-head h1 { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 33px; font-weight: 700; color: var(--text); }
.gold-head h1 svg { color: var(--gold); }
.gold-head h1 .gold-word { color: var(--gold); }
.gold-head p { color: var(--text2); font-size: 17px; line-height: 1.55; margin: 14px auto 0; max-width: 620px; }

/* Grilla de planes */
.gold-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; align-items: stretch; }

.plan-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--card-r); padding: 26px 20px 22px; transition: transform .15s ease, border-color .15s ease; }
.plan-card:hover { transform: translateY(-2px); border-color: var(--accent); }

/* El plan que queremos vender: borde dorado y un escalón más alto */
.plan-card.destacado { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 28px rgba(234,179,8,.1); padding-top: 34px; }
.plan-card.destacado:hover { border-color: var(--gold); }
.plan-cinta { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #0d0d12; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 4px 14px; border-radius: 0 0 10px 10px; white-space: nowrap; }

.plan-nombre { font-size: 20px; font-weight: 600; color: var(--text); }

.plan-mensual { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; }
.plan-monto { font-size: 33px; font-weight: 700; line-height: 1.1; color: var(--text); }
.plan-periodo { font-size: 15px; color: var(--text3); }

.plan-off { font-size: 14px; font-weight: 600; color: var(--gold); background: rgba(234,179,8,.12); border-radius: 999px; padding: 3px 12px; }
.plan-off.vacio { color: var(--text3); background: transparent; padding: 3px 0; }

.plan-total { font-size: 15px; color: var(--text2); line-height: 1.5; }
.plan-total b { color: var(--text); font-weight: 600; }
.plan-ahorro { display: block; font-size: 14px; color: var(--green); margin-top: 4px; }

.plan-card .btn { width: 100%; margin-top: auto; }
.plan-card .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-gold { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.btn-gold:hover { background: rgba(234,179,8,.15); color: var(--gold); text-decoration: none; }

.plan-nota { font-size: 14px; color: var(--text3); }

/* Pago único — es el argumento de confianza, va suelto y bien visible */
.gold-unico { display: flex; align-items: flex-start; gap: 11px; margin-top: 22px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; color: var(--text2); font-size: 15px; line-height: 1.55; }
.gold-unico svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.gold-unico b { color: var(--text); }

/* Mujeres y parejas sin cargo */
.gold-gratis { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; background: rgba(219,112,172,.08); border: 1px solid var(--pink); border-radius: 14px; }
.gold-gratis svg { color: var(--pink2); flex-shrink: 0; }
.gold-gratis h3 { font-size: 17px; font-weight: 600; color: var(--pink3); }
.gold-gratis p { font-size: 15px; color: var(--text2); margin-top: 2px; }

.gold-h2 { font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 16px; }

/* Comparativa */
.gold-tabla-wrap { margin-top: 44px; }
.gold-tabla-scroll { overflow-x: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--card-r); }
.gold-tabla { width: 100%; border-collapse: collapse; min-width: 460px; }
.gold-tabla th, .gold-tabla td { padding: 13px 18px; text-align: left; font-size: 16px; }
.gold-tabla thead th { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); border-bottom: 1px solid var(--border); }
.gold-tabla tbody tr + tr th, .gold-tabla tbody tr + tr td { border-top: 1px solid var(--border); }
.gold-tabla tbody th { font-weight: 400; color: var(--text2); }
.gold-tabla td { color: var(--text); white-space: nowrap; }
.gold-tabla td.no { color: var(--text3); }
.gold-tabla td.no svg { opacity: .5; vertical-align: -2px; }
.gold-tabla .col-gold { color: var(--gold); font-weight: 600; background: rgba(234,179,8,.05); }
/* Lo que todavía no está construido: se anuncia, pero no como disponible. */
.chip-pronto { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.gold-tabla thead .col-gold { color: var(--gold); }

/* Preguntas */
.gold-faq { margin-top: 44px; }
.gold-faq details { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.gold-faq summary { cursor: pointer; list-style: none; padding: 15px 0; font-size: 17px; font-weight: 500; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gold-faq summary::-webkit-details-marker { display: none; }
.gold-faq summary::after { content: '+'; color: var(--accent2); font-size: 22px; line-height: 1; flex-shrink: 0; }
.gold-faq details[open] summary::after { content: '−'; }
.gold-faq details[open] summary { border-bottom: 1px solid var(--border); }
.gold-faq details p { padding: 14px 0 16px; color: var(--text2); font-size: 16px; line-height: 1.6; }
.gold-faq details p b { color: var(--text); }

.gold-cierre { margin-top: 32px; text-align: center; color: var(--text3); font-size: 15px; }

@media (max-width: 700px) {
  .gold-head h1 { font-size: 28px; }
  .gold-planes { grid-template-columns: 1fr; }
  .plan-card.destacado { order: -1; }
  /* Apiladas ya no hay botones que alinear: sobra el hueco de la nota vacía. */
  .plan-card.destacado .plan-nota { display: none; }
  .gold-gratis { align-items: flex-start; }
}

/* ── Mi suscripción ────────────────────────────────────────────────────────── */
.gold-sus-wrap { max-width: 620px; }
.gold-sus-tit { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; margin: 0 0 18px; }
.gold-sus-tit .icon { color: var(--gold); }
.gold-flash {
  background: rgba(139,92,246,.14); border: 1px solid var(--accent); border-radius: 12px;
  padding: 12px 15px; margin-bottom: 18px; font-size: 16px; line-height: 1.5;
}
.gold-sus-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  padding: 6px 18px 14px;
}
.gold-sus-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.gold-sus-fila:last-of-type { border-bottom: none; }
.gold-sus-lbl { font-size: 15px; color: var(--text3); }
.gold-sus-val { font-size: 17px; font-weight: 600; text-align: right; }
.gold-sus-val.es-gold { color: var(--gold); }
.gold-sus-nota { font-size: 15px; color: var(--text2); line-height: 1.55; margin: 12px 0 0; }
.gold-sus-aviso {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(232,147,41,.12); border: 1px solid var(--amber); border-radius: 12px;
  padding: 13px 15px; margin: 12px 0 4px; font-size: 15px; line-height: 1.55;
}
.gold-sus-aviso .icon { color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.gold-sus-cancelar { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gold-sus-cancelar small { font-size: 14px; color: var(--text3); }

/* ── Tus pagos ──
   Reusa .gold-sus-fila para que la tabla de cobros y la ficha de arriba se lean como una
   sola cosa. El estado va como pastilla y no como texto suelto: en una lista de fechas y
   montos, la palabra que importa es la que dice si entró o no. */
.gold-sus-h2 { font-size: 20px; font-weight: 600; margin: 26px 0 12px; }
.gold-pago-izq { display: flex; flex-direction: column; gap: 2px; }
.gold-pago-fecha { font-size: 16px; color: var(--text); }
.gold-pago-per { font-size: 14px; color: var(--text3); }
.gold-pago-der { display: flex; align-items: center; gap: 10px; }
.gold-pago-monto { font-size: 17px; font-weight: 600; }
.gold-pago-est {
  font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text2); white-space: nowrap;
}
.gold-pago-est.est-aprobado  { color: var(--green); border-color: rgba(16,185,129,.45); }
.gold-pago-est.est-rechazado { color: var(--red);   border-color: rgba(244,63,94,.45); }
.gold-pago-est.est-pendiente { color: var(--amber); border-color: var(--amber); }

/* ── Qué te falta para el Gold sin cargo ──
   Se dibuja a medida de quien mira (GoldController), con lo cumplido tildado: ver el avance
   es lo que hace que valga la pena terminar — una lista de puros pendientes desalienta. */
.gold-falta { margin-top: 16px; padding: 14px 16px; background: rgba(0,0,0,.22);
  border: 1px solid var(--border); border-radius: 12px; }
.gold-falta-t { font-size: 15px; color: var(--text); margin: 0 0 10px; }
.gold-falta-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex;
  flex-direction: column; gap: 7px; }
.gold-falta-lista li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.gold-falta-lista li svg { flex: none; }
.gold-falta-lista .pendiente { color: var(--text); }
.gold-falta-lista .pendiente svg { color: var(--gold); }
/* Lo ya cumplido va apagado y sin tachar: tachado se lee como "esto ya no cuenta". */
.gold-falta-lista .listo { color: var(--text3); }
.gold-falta-lista .listo svg { color: var(--green); }

/* ── Pantalla de confirmación del pago (/gold/suscribirme) ────────────────
   Es la última antes de un cargo real. Era una tarjeta con un campo suelto y se leía
   vacía — y una pantalla de pago vacía no parece sobria, parece sospechosa. Lo que la
   llena tiene que ser información que baje la ansiedad: qué comprás, quién cobra, cómo
   se sale. Nada decorativo. */
.auth-card.gold-pay { max-width: 480px; padding: 28px; }

.gold-pay-test { display: flex; align-items: center; gap: 9px; background: rgba(232,147,41,.1); border: 1px solid var(--amber); border-radius: 12px; padding: 10px 13px; margin-bottom: 20px; color: var(--amber3); font-size: 14px; }
.gold-pay-test svg { color: var(--amber2); flex-shrink: 0; }

.gold-pay-head { margin-bottom: 20px; }
/* El único dorado fuerte de la pantalla: es lo que se está comprando. */
.gold-pay-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px; }
.gold-pay-kicker svg { color: var(--gold); }
.gold-pay-head h1 { font-size: 28px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.gold-pay-head p { font-size: 16px; line-height: 1.5; color: var(--text2); margin: 0; }

/* Resumen del plan: el precio es lo que la persona vino a confirmar, así que se lee
   de un vistazo y no dentro de un párrafo. */
.gold-pay-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.gold-pay-plan b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.gold-pay-plan small { display: block; font-size: 14px; color: var(--text3); margin-top: 3px; line-height: 1.4; }
.gold-pay-precio { text-align: right; flex-shrink: 0; }
.gold-pay-precio b { font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1.1; }

.gold-pay-benes { list-style: none; margin: 0 0 10px; padding: 0; }
.gold-pay-benes li { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; font-size: 16px; color: var(--text2); border-bottom: 1px solid var(--border); }
.gold-pay-benes li:last-child { border-bottom: 0; }
.gold-pay-benes svg { color: var(--gold); flex-shrink: 0; transform: translateY(2px); }
.gold-pay-benes li span { flex: 1; }
/* El valor va en el color del texto principal: es la diferencia concreta, y en gris
   secundario se lee como una aclaración al pasar. */
.gold-pay-benes li em { font-style: normal; font-weight: 600; color: var(--text); text-align: right; }

.gold-pay-todo { display: inline-block; font-size: 15px; color: var(--accent2); margin-bottom: 22px; }
.gold-pay-todo:hover { color: var(--accent3); }

.gold-pay-form { margin: 0; }
/* La aclaración de privacidad del email de MercadoPago: a la vista y antes del campo. */
.gold-pay-privado { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg3); font-size: 14px; line-height: 1.45; color: var(--text2); }
.gold-pay-privado svg { flex-shrink: 0; color: var(--green); transform: translateY(2px); }
.gold-pay-privado b { color: var(--text); }
.gold-pay-form .btn-submit { margin-top: 4px; }

/* La regla del mail: arriba del campo y a la vista. Violeta y no dorado (el dorado es la
   marca de Gold, no un aviso) ni rojo (no es un error: es cómo se hace bien). */
.gold-pay-regla { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: rgba(139,92,246,.08); font-size: 14px; line-height: 1.45; color: var(--text2); }
.gold-pay-regla svg { flex-shrink: 0; color: var(--accent2); transform: translateY(2px); }
.gold-pay-regla p { margin: 0; }
.gold-pay-regla p + p { margin-top: 6px; }
.gold-pay-regla b { color: var(--text); }

/* El diálogo de confirmación: el mail en grande es TODO el punto — el que puso el del sitio
   tiene que verlo escrito para darse cuenta. `anywhere` porque un mail no tiene espacios. */
.gold-conf-mail { font-size: 17px; font-weight: 600; color: var(--text); background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; overflow-wrap: anywhere; }
.gold-conf-ojo { margin: 0 0 10px; padding: 9px 11px; border-left: 3px solid var(--red); background: rgba(244,63,94,.08); border-radius: 6px; font-size: 15px; line-height: 1.45; color: var(--text2); }
.gold-conf-ojo b { color: var(--text); }
.gold-conf-p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--text2); }
.gold-conf-p b { color: var(--text); }

.gold-pay-pie { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Versión de una tinta (blanca) del kit oficial. La de color tiene el wordmark en
   #0a0080 y sobre este fondo no se lee. */
.gold-pay-mp { display: block; height: 33px; width: auto; opacity: .9; margin: 0 auto 16px; }
.gold-pay-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gold-pay-pie li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--text3); }
.gold-pay-pie li span { flex: 1; }
.gold-pay-pie li b { color: var(--text2); }
.gold-pay-pie svg { color: var(--text3); flex-shrink: 0; transform: translateY(2px); }

.gold-pay-volver { margin: 18px 0 0; font-size: 15px; }
.gold-pay-volver a { color: var(--text3); }
.gold-pay-volver a:hover { color: var(--text2); }

@media (max-width: 420px) {
  .auth-card.gold-pay { padding: 22px 18px; }
  .gold-pay-head h1 { font-size: 24px; }
  .gold-pay-benes li { font-size: 15px; }
  /* A este ancho el beneficio y su valor no entran en un renglón: en vez de apretarlos
     hasta partir las dos columnas, el valor baja abajo del nombre. */
  .gold-pay-benes li { flex-wrap: wrap; }
  .gold-pay-benes li em { width: 100%; text-align: left; padding-left: 24px; color: var(--gold); font-size: 14px; }
}