/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — Grupo E: PRO standalone
   ═══════════════════════════════════════════════════════════
   Requiere design-v2-tokens.css y design-v2-components.css cargados
   antes (design-v2-components.css ya viste el chasis de #pagoCaja vía
   .sesion — aquí solo se restylea SU CONTENIDO). Escopado a #planes,
   #pagoCaja y #perfil .eleccion — ver PRO_V2_MAP.md.

   REGLA DURA (riesgo nº1 del mapa): index.html/portada.css tienen su
   PROPIA copia de .ciclo, .pago (y variantes) y .pagos-otros para la
   portada, sin relación con esta hoja (que solo carga app.html). Todo selector de
   aquí empieza por #planes, #pagoCaja o #perfil .eleccion — nunca una
   clase pelada como .ciclo o .pago a secas.

   Cero cambios de HTML/JS. pro.js sigue generando el mismo DOM
   (innerHTML de [data-ventajas], [data-selector-ciclo],
   [data-otros-pagos]) con las mismas clases que lee track.js
   (.pago--pp, .pago--wa, .ciclo__op.on) — aquí solo se les da estilo.
   ═══════════════════════════════════════════════════════════ */

/* ── Chasis de #planes (mismo patrón que resultados-v2.css) ── */
#planes{
  position:relative;padding:70px 0;overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%,rgba(19,185,231,.07),transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
  color:var(--v2-text);
}
#planes .shead .tag{
  display:inline-block;color:#81dff8;font-size:.68rem;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase;margin:0 0 14px;
}
#planes .shead h2{
  font-family:var(--v2-display);color:var(--v2-text);
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,4vw,2.8rem);
  margin:0 0 14px;
}
#planes .shead p{color:var(--v2-muted)}

/* ── Tarjetas de plan ── */
#planes .plan-card{
  background:linear-gradient(180deg,rgba(18,39,52,.9),rgba(8,23,32,.94));
  border:1px solid rgba(90,184,222,.22);border-radius:22px;
  box-shadow:var(--v2-sombra-sm),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);color:var(--v2-text);
}
#planes .plan-card--pro{
  background:linear-gradient(180deg,rgba(18,39,52,.96),rgba(8,23,32,.98));
  border-color:var(--v2-cyan);box-shadow:0 0 0 1px rgba(19,185,231,.25),var(--v2-sombra);
}
#planes .plan-card__sello{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  color:#fff;box-shadow:0 6px 18px rgba(19,185,231,.3);
}
#planes .plan-card__cab{border-bottom-color:var(--v2-line)}
#planes .plan-card--pro .plan-card__cab{border-bottom-color:rgba(90,184,222,.2)}
#planes .plan-card__precio b{color:var(--v2-text)}
#planes .plan-card--pro .plan-card__precio b{
  background:linear-gradient(135deg,var(--v2-cyan2),var(--v2-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#planes .plan-card__precio span{color:var(--v2-muted)}
#planes .plan-card__sub{color:var(--v2-muted)}
#planes .plan-card--pro .plan-card__sub{color:var(--v2-muted)}

/* Lista de ventajas: el estilo cuelga del <li>, no de un wrapper — pro.js
   inyecta <li> sueltos vía innerHTML (ver mapa, riesgo 5). */
#planes .plan-card__lista li{color:var(--v2-muted)}
#planes .plan-card__lista li::before{
  border-left-color:var(--v2-cyan2);border-bottom-color:var(--v2-cyan2);
}
#planes .plan-card--pro .plan-card__lista li{color:var(--v2-text)}
#planes .plan-card--pro .plan-card__lista li::before{
  border-left-color:var(--v2-cyan);border-bottom-color:var(--v2-cyan);
}

/* Columna Gratis: acción vs. estado (app.js alterna [hidden], no tocar) */
#planes .plan-card__btn.btn--ghost{
  background:rgba(8,22,31,.72);color:var(--v2-text);
  border:1px solid var(--v2-line);box-shadow:none;
}
#planes .plan-card__btn.btn--ghost:hover{transform:translateY(-2px)}
#planes .plan-card__estado{
  border-color:rgba(90,184,222,.3);color:var(--v2-muted);background:rgba(10,25,33,.5);
}
#planes .plan-card__estado::before{color:var(--v2-cyan2)}

/* CTA de PRO — hoy es DOM muerto (pro.js apaga #btnPro incondicionalmente,
   ver mapa riesgo 6), pero debe quedar presentable por si se reactiva. */
#planes .plan-card__btn:not(.btn--ghost){
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  border:0;color:#fff;box-shadow:0 8px 30px rgba(13,147,176,.25);
}
#planes .plan-card__btn:not(.btn--ghost):hover{transform:translateY(-2px)}
#planes .plan-card__btn[disabled]{
  background:transparent;color:var(--v2-muted);
  border:1px solid var(--v2-line);box-shadow:none;cursor:not-allowed;transform:none;
}
#planes .plan-card__nota{color:var(--v2-muted)}

/* ── Selector de ciclo (mensual/anual) — #planes, #pagoCaja y el
   post-diagnóstico (#perfil .eleccion), la única lista permitida por el
   mapa para evitar tocar `.ciclo` pelado. ── */
#planes .ciclo,
#pagoCaja .ciclo,
#perfil .eleccion .ciclo{
  background:rgba(10,25,33,.7);border:1px solid var(--v2-line);
}
#planes .ciclo__op,
#pagoCaja .ciclo__op,
#perfil .eleccion .ciclo__op{color:var(--v2-muted)}
#planes .ciclo__op:hover,
#pagoCaja .ciclo__op:hover,
#perfil .eleccion .ciclo__op:hover{color:var(--v2-text)}
#planes .ciclo__op.on,
#pagoCaja .ciclo__op.on,
#perfil .eleccion .ciclo__op.on{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  color:#fff;box-shadow:0 4px 14px rgba(19,185,231,.3);
}
#planes .ciclo__op.on small,
#pagoCaja .ciclo__op.on small,
#perfil .eleccion .ciclo__op.on small{color:rgba(255,255,255,.85)}

/* ── Métodos de pago (#planes y #pagoCaja comparten el mismo
   [data-otros-pagos]; .pagos-otros:empty sigue ocultando el hueco a
   quien ya es PRO — ver mapa riesgo 4, no anidar nada más adentro). ── */
#planes .pagos-otros,
#pagoCaja .pagos-otros{margin-top:14px}
#planes .pago,
#pagoCaja .pago{
  background:rgba(10,25,33,.6);border:1.5px solid var(--v2-line);
  border-radius:16px;color:var(--v2-text);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
#planes a.pago:hover,
#pagoCaja a.pago:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
#planes .pago__marca,
#pagoCaja .pago__marca{background:rgba(90,184,222,.14);color:var(--v2-cyan2)}
#planes .pago__txt b,
#pagoCaja .pago__txt b{color:var(--v2-text)}
#planes .pago__txt small,
#pagoCaja .pago__txt small{color:var(--v2-muted)}

/* La marca conserva su color de identidad (Hotmart naranja, PayPal azul,
   WhatsApp verde) — son las mismas clases que lee track.js, solo se les da
   fondo oscuro alrededor en vez del blanco original. */
#planes .pago--principal,
#pagoCaja .pago--principal{border-color:#F04E23;box-shadow:0 0 0 1px #F04E23}
#planes .pago--principal .pago__marca,
#pagoCaja .pago--principal .pago__marca{background:#F04E23;color:#fff}
#planes a.pago--principal:hover,
#pagoCaja a.pago--principal:hover{box-shadow:0 10px 26px rgba(240,78,35,.35)}

#planes a.pago--pp .pago__marca,
#pagoCaja a.pago--pp .pago__marca{background:#003087;color:#fff}
#planes a.pago--pp:hover,
#pagoCaja a.pago--pp:hover{box-shadow:0 10px 26px rgba(0,48,135,.35)}

#planes .pago--wa .pago__marca,
#pagoCaja .pago--wa .pago__marca{background:#25D366;color:#fff}
#planes a.pago--wa:hover,
#pagoCaja a.pago--wa:hover{box-shadow:0 10px 26px rgba(37,211,102,.32)}

#planes .pago--pronto,
#pagoCaja .pago--pronto{cursor:default;background:rgba(10,25,33,.35);border-style:dashed}
#planes .pago--pronto .pago__marca,
#pagoCaja .pago--pronto .pago__marca{background:rgba(90,184,222,.08);color:var(--v2-muted)}
#planes .pago--pronto .pago__txt b,
#pagoCaja .pago--pronto .pago__txt b{color:var(--v2-muted)}
#planes .pago--pronto .pago__txt small,
#pagoCaja .pago--pronto .pago__txt small{font-style:italic;color:var(--v2-muted)}

/* ── #pagoCaja: solo su contenido (el chasis .sesion ya es V2 vía
   design-v2-components.css). El overlay/cierre por identidad de nodo no
   se toca — ver mapa riesgo 11. ── */
#pagoCaja .pago__resumen b{color:var(--v2-text)}
#pagoCaja .pago__resumen span{color:var(--v2-muted)}
#pagoCaja .pago__resumen small{color:var(--v2-muted)}
#pagoCaja .sesion__aviso{color:var(--v2-pink)}