/* FACTOR PARTIDO — Penca Fase 8: onboarding crear/unirse */
.penca-onboarding-page{
  --fp-bg:#07111f;
  --fp-card:rgba(255,255,255,.075);
  --fp-card-strong:rgba(255,255,255,.12);
  --fp-border:rgba(255,255,255,.14);
  --fp-text:#f7fbff;
  --fp-muted:rgba(247,251,255,.72);
  --fp-cyan:#13d8ff;
  --fp-green:#32ff9d;
  --fp-yellow:#ffcf4a;
  --fp-danger:#ff5d73;
  background:radial-gradient(circle at top left,rgba(19,216,255,.16),transparent 34%),radial-gradient(circle at top right,rgba(50,255,157,.14),transparent 30%),linear-gradient(180deg,#07111f 0%,#0b1628 55%,#08111f 100%);
  color:var(--fp-text);
  min-height:100vh;
  padding:92px 0 56px;
}
.penca-onboarding-container{width:min(1160px,calc(100% - 32px));margin:0 auto;}
.penca-onboarding-hero{position:relative;overflow:hidden;padding:44px 0 32px;}
.penca-onboarding-hero:before{content:"";position:absolute;inset:0;background:url('/pages/img/penca-hero.jpg') center/cover no-repeat;opacity:.12;filter:saturate(1.2);transform:scale(1.08);animation:pencaHeroDrift 16s ease-in-out infinite alternate;}
.penca-onboarding-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,.94),rgba(7,17,31,.76),rgba(7,17,31,.92));}
.penca-onboarding-hero>*{position:relative;z-index:2;}
.penca-onboarding-hero .penca-onboarding-container{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;}
.penca-onboarding-copy{animation:pencaFadeUp .7s ease both;}
.penca-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(19,216,255,.12);border:1px solid rgba(19,216,255,.24);color:var(--fp-cyan);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;}
.penca-onboarding-copy h1{font-size:clamp(34px,5vw,62px);line-height:.98;margin:18px 0 14px;letter-spacing:-.045em;color:#fff;}
.penca-onboarding-copy p{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--fp-muted);max-width:650px;margin:0;}
.penca-steps-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;max-width:660px;}
.penca-steps-mini div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid var(--fp-border);backdrop-filter:blur(12px);}
.penca-steps-mini strong{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--fp-cyan),var(--fp-green));color:#04101d;font-weight:1000;}
.penca-steps-mini span{font-weight:800;font-size:13px;color:#f8fbff;}
.penca-preview-card,.penca-join-card{border:1px solid var(--fp-border);background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.06));border-radius:30px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.34);backdrop-filter:blur(18px);animation:pencaCardIn .75s ease .08s both;}
.penca-preview-card{transform-origin:center;}
.penca-preview-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--fp-muted);font-weight:800;font-size:13px;}
.penca-preview-top b{color:var(--fp-green);background:rgba(50,255,157,.12);border:1px solid rgba(50,255,157,.22);border-radius:999px;padding:6px 10px;}
.penca-preview-trophy,.penca-join-icon{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.24),transparent 26%),linear-gradient(135deg,var(--fp-yellow),#ff8a00);font-size:34px;box-shadow:0 14px 34px rgba(255,166,0,.22);margin-bottom:14px;}
.penca-preview-card h2,.penca-join-card h2{font-size:28px;line-height:1.06;margin:0 0 10px;letter-spacing:-.025em;color:#fff;}
.penca-preview-card p,.penca-join-card p{margin:0 0 18px;color:var(--fp-muted);line-height:1.55;}
.penca-preview-code{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 14px;border-radius:18px;background:rgba(0,0,0,.22);border:1px dashed rgba(19,216,255,.35);margin:12px 0 16px;}
.penca-preview-code span{color:var(--fp-muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;}
.penca-preview-code strong{color:var(--fp-cyan);font-size:13px;}
.penca-preview-ranking{display:grid;gap:8px;}
.penca-preview-ranking div{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);}
.penca-preview-ranking span{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:rgba(19,216,255,.15);color:var(--fp-cyan);font-weight:1000;}
.penca-preview-ranking b{color:#fff;}
.penca-preview-ranking em{font-style:normal;color:var(--fp-green);font-weight:900;}
.penca-form-section{padding-top:30px;}
.penca-form-card{background:#fff;color:#102033;border-radius:30px;padding:28px;box-shadow:0 22px 70px rgba(0,0,0,.20);border:1px solid rgba(8,17,31,.08);}
.penca-form-heading{margin-bottom:22px;}
.penca-form-heading span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#edf9ff;color:#04708a;font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:12px;margin-bottom:10px;}
.penca-form-heading h2{margin:0 0 6px;color:#08111f;font-size:28px;letter-spacing:-.025em;}
.penca-form-heading p{margin:0;color:#607086;}
.penca-onboarding-form{display:grid;gap:18px;}
.penca-field{display:grid;gap:8px;}
.penca-field>span{font-weight:900;color:#102033;}
.penca-field small{color:#7b8797;text-align:right;}
.penca-input-pro{width:100%;box-sizing:border-box;border:1px solid #d7e0ea;border-radius:18px;background:#f7fafc;color:#101927;padding:15px 16px;font-size:16px;outline:none;transition:border .2s ease,box-shadow .2s ease,background .2s ease;}
.penca-input-pro:focus{border-color:#13bfe4;box-shadow:0 0 0 4px rgba(19,216,255,.14);background:#fff;}
.penca-textarea-pro{resize:vertical;min-height:110px;}
.penca-code-input{text-transform:uppercase;letter-spacing:.08em;font-weight:1000;text-align:center;font-size:22px;}
.penca-suggestion-wrap{display:grid;gap:8px;margin-top:-4px;}
.penca-suggestion-wrap small{font-weight:800;color:#66758a;}
.penca-suggestion-list{display:flex;flex-wrap:wrap;gap:8px;}
.penca-suggestion-chip{appearance:none;border:1px solid #d6e4ef;background:#f1f8fc;color:#0d5265;border-radius:999px;padding:9px 12px;font-weight:850;cursor:pointer;transition:transform .18s ease,background .18s ease,border .18s ease;}
.penca-suggestion-chip:hover{transform:translateY(-2px);background:#e7faff;border-color:#9cefff;}
.penca-privacy-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.penca-privacy-card{position:relative;display:grid;gap:6px;padding:16px;border:1px solid #d8e2ea;border-radius:20px;background:#fbfdff;cursor:pointer;transition:transform .18s ease,border .18s ease,box-shadow .18s ease,background .18s ease;}
.penca-privacy-card:hover{transform:translateY(-2px);}
.penca-privacy-card input{position:absolute;opacity:0;pointer-events:none;}
.penca-privacy-card strong{color:#102033;font-size:16px;}
.penca-privacy-card span{color:#69798c;line-height:1.45;font-size:14px;}
.penca-privacy-card.is-selected{border-color:#13d8ff;background:linear-gradient(180deg,#f0fbff,#fff);box-shadow:0 12px 34px rgba(19,216,255,.13);}
.penca-submit-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px;}
.penca-action-main,.penca-action-ghost{appearance:none;border:0;text-decoration:none;border-radius:16px;padding:14px 18px;font-weight:1000;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.penca-action-main{background:linear-gradient(135deg,#13d8ff,#32ff9d);color:#06111f;box-shadow:0 16px 34px rgba(19,216,255,.18);}
.penca-action-main:hover,.penca-action-ghost:hover{transform:translateY(-2px);}
.penca-action-main[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4);}
.penca-action-ghost{background:#eef4f9;color:#102033;border:1px solid #dbe6ef;}
.penca-alert{padding:13px 15px;border-radius:18px;font-weight:850;line-height:1.45;}
.penca-alert-error{background:#fff0f3;color:#9b1830;border:1px solid #ffd3dc;}
.penca-alert-ok{background:#effff6;color:#097044;border:1px solid #beffd9;}
.penca-info-soft{background:#f5f9fd;border:1px solid #dfeaf3;border-radius:18px;padding:14px;color:#56677b;font-weight:800;}
.penca-onboarding-hero.compact{padding-bottom:18px;}
.penca-join-card{min-height:280px;}
.penca-join-meta{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;}
.penca-join-meta span{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--fp-muted);}
.penca-join-meta b{color:#fff;}
@keyframes pencaHeroDrift{from{transform:scale(1.08) translateX(-1%)}to{transform:scale(1.14) translateX(1%)}}
@keyframes pencaFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pencaCardIn{from{opacity:0;transform:translateX(28px) rotate(1.5deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@media (max-width:860px){
  .penca-onboarding-page{padding-top:78px;}
  .penca-onboarding-hero .penca-onboarding-container{grid-template-columns:1fr;}
  .penca-steps-mini{grid-template-columns:1fr;}
  .penca-privacy-options{grid-template-columns:1fr;}
  .penca-form-card{padding:20px;border-radius:24px;}
  .penca-preview-card,.penca-join-card{border-radius:24px;padding:20px;}
  .penca-submit-row{display:grid;grid-template-columns:1fr;}
  .penca-action-main,.penca-action-ghost{width:100%;}
}