/* =========================================================================
   Public landing page + sign-in card (landing.js).
   Uses the global tokens and the career-map palette (careers.css).
   ========================================================================= */

#anon-nav { display: flex; gap: .6rem; align-items: center; }
#anon-nav .btn-3d { --b: var(--lv-1); }
body:has(#anon-nav:not([hidden])) #theme-toggle-pre { display: none !important; }

#view-landing { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---------- hero ---------------------------------------------------------- */
.lp-hero {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 2rem;
    align-items: center;
    min-height: min(78vh, 640px);
    padding: 2rem 0 1rem;
}
.lp-kicker {
    margin: 0 0 .6rem;
    color: var(--lv-1-d);
    font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem;
}
.lp-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    animation: rise .6s both;
}
.lp-hero h1 code {
    background: var(--surface-3);
    padding: 0 .3rem;
    border-radius: 8px;
    font-size: .85em;
}
.lp-lead { font-size: 1.12rem; line-height: 1.55; color: var(--text-dim); max-width: 56ch; margin: 0 0 1.5rem; animation: rise .6s .1s both; }
.lp-cta { display: flex; gap: .8rem; flex-wrap: wrap; animation: rise .6s .2s both; }
.lp-cta .btn-3d:not(.secondary) { --b: var(--lv-1); }
.lp-cta .btn-3d { padding: .9rem 1.6rem; font-size: 1rem; }

.lp-stats {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    list-style: none; padding: 0; margin: 2rem 0 0;
    animation: rise .6s .3s both;
}
.lp-stats li { display: flex; flex-direction: column; }
.lp-stats b { font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.lp-stats span { color: var(--text-mute); font-size: .85rem; }

.lp-hero-art { position: relative; width: 260px; height: 380px; justify-self: center; }
.lp-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-trail {
    fill: none; stroke: var(--node-off); stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 2 18;
}
.lp-node {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 62px; height: 56px;
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--node-off);
    color: var(--text-mute);
    font-size: 1.3rem; font-weight: 900;
    box-shadow: 0 7px 0 var(--node-off-d);
    animation: pop-in .5s both;
    animation-delay: calc(.4s + var(--d) * .15s);
}
.lp-node.done { background: var(--gold); color: #fff; box-shadow: 0 7px 0 var(--gold-d); }
.lp-node.current { background: var(--lv-1); color: #fff; box-shadow: 0 7px 0 var(--lv-1-d); }
.lp-node.current::before {
    content: ""; position: absolute; inset: -11px; border-radius: 50%;
    border: 6px solid color-mix(in srgb, var(--lv-1) 35%, transparent);
    animation: pulse 1.8s ease-out infinite;
}
.lp-bubble {
    position: absolute; left: 110px; top: 128px;
    transform: translateX(-50%);
    padding: .3rem .65rem;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--lv-1-d);
    font-weight: 800; font-size: .75rem; letter-spacing: .08em;
    animation: bob 1.6s ease-in-out infinite, pop-in-b .5s 1.1s both;
}
@keyframes pop-in-b { from { opacity: 0; } }

/* ---------- sections -------------------------------------------------------- */
.lp-section { padding: 3rem 0 1rem; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.lp-section.in, .lp-final.in { opacity: 1; transform: none; }
.lp-section h2, .lp-final h2 { font-size: 1.9rem; margin: 0 0 .6rem; }
.lp-sub { color: var(--text-dim); margin: 0 0 1.5rem; }

.lp-steps {
    list-style: none; padding: 0; margin: 1.5rem 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;
    counter-reset: paso;
}
.lp-steps li {
    position: relative;
    padding: 1.25rem;
    border-radius: 18px;
    border: 2px solid var(--border); border-bottom-width: 5px;
    background: var(--surface);
}
.lp-steps li::before {
    counter-increment: paso; content: counter(paso);
    position: absolute; top: .9rem; right: 1rem;
    font-weight: 900; color: var(--text-mute); font-size: 1.4rem;
}
.lp-step-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.lp-steps b { font-size: 1.1rem; }
.lp-steps p { color: var(--text-dim); margin: .4rem 0 0; line-height: 1.45; }

.lp-careers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.lp-career {
    display: flex; flex-direction: column; gap: .3rem;
    text-align: left;
    padding: 1rem;
    border-radius: 16px;
    border: 2px solid var(--border); border-bottom-width: 5px;
    background: var(--surface); color: var(--text);
    cursor: pointer;
    transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.lp-career:hover { transform: translateY(-4px) rotate(-.5deg); border-color: var(--cc); box-shadow: 0 12px 24px -16px var(--cc); }
.lp-career-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--cc) 18%, var(--surface));
    font-size: 1.6rem;
}
.lp-career b { font-size: 1.05rem; }
.lp-career span:last-child { color: var(--text-dim); font-size: .86rem; line-height: 1.4; }

.lp-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.lp-feat-grid div { padding: 1.1rem; border-left: 4px solid var(--lv-1); background: var(--surface); border-radius: 0 14px 14px 0; }
.lp-feat-grid div:nth-child(2) { border-color: var(--lv-2); }
.lp-feat-grid div:nth-child(3) { border-color: var(--lv-3); }
.lp-feat-grid div:nth-child(4) { border-color: var(--lv-p); }
.lp-feat-grid p { color: var(--text-dim); margin: .35rem 0 0; }

.lp-faq details {
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin-bottom: .6rem;
    padding: .2rem 1rem;
}
.lp-faq summary { cursor: pointer; font-weight: 700; padding: .7rem 0; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; float: right; font-size: 1.3rem; color: var(--text-mute); transition: transform var(--t-med); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { color: var(--text-dim); margin: 0 0 .9rem; line-height: 1.5; }
.lp-faq a { color: var(--accent); }

.lp-final { text-align: center; padding: 4rem 0 2rem; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.lp-final .btn-3d { --b: var(--lv-1); padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- sign-in card ------------------------------------------------------ */
.auth-card {
    max-width: 420px;
    margin: 3rem auto;
    padding: 1.75rem;
    border-radius: 20px;
    border: 2px solid var(--border); border-bottom-width: 6px;
    background: var(--surface);
    animation: rise .35s both;
}
.auth-back { border: 0; background: none; color: var(--text-mute); cursor: pointer; padding: 0; margin-bottom: .8rem; font-weight: 700; }
.auth-back:hover { color: var(--text); }
.auth-title { margin: 0 0 1rem; font-size: 1.5rem; }

@media (max-width: 800px) {
    .lp-hero { grid-template-columns: 1fr; min-height: 0; }
    .lp-hero-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero h1, .lp-lead, .lp-cta, .lp-stats, .lp-node, .lp-node.current::before, .lp-bubble, .auth-card { animation: none !important; }
    .lp-section, .lp-final { opacity: 1; transform: none; transition: none; }
}

/* The legacy #view-login box (styles.css) now lives inside .auth-card. */
#view-login {
    max-width: none; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
}
#view-login::before { display: none; }
#view-login h2.auth-title { font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--text); }

/* =========================================================================
   Identidad cyberpunk — landing and sign-in skin (see careers.css).
   ========================================================================= */
#anon-nav .btn-3d { --b: var(--accent); }
.lp-kicker { color: var(--accent-2); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2em; }
.lp-kicker::before { content: "> "; color: var(--accent); }
.lp-hero h1 { text-transform: uppercase; letter-spacing: .02em; }
.lp-hero h1 code {
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    text-transform: none;
    box-shadow: 0 0 14px var(--accent-glow);
}
.lp-cta .btn-3d:not(.secondary) { --b: var(--accent); }
.lp-stats li { border-left: 2px solid var(--accent); padding-left: .7rem; }
.lp-stats b { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); }
.lp-stats span { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }

/* Hero art: the same square chips as the career path. */
.lp-trail { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: butt; }
.lp-node {
    width: 52px; height: 52px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-mute);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}
.lp-node.done { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 14px var(--accent-glow); }
.lp-node.current { background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 40%, transparent); }
.lp-node.current::before { inset: -8px; border-radius: var(--r-md); border: 1px solid var(--accent-2); animation: lp-pulse 1.8s ease-out infinite; }
.lp-node.quiz { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; }
@keyframes lp-pulse { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
.lp-bubble {
    border: 1px solid var(--accent-2);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--accent-2);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .18em;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 40%, transparent);
}

.lp-section h2, .lp-final h2 { text-transform: uppercase; letter-spacing: .08em; }
.lp-section h2::before, .lp-final h2::before { content: "// "; color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; }
.lp-steps li, .lp-career, .lp-faq details, .auth-card, .lp-feat-grid div {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.lp-steps li::before { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--accent); content: "0" counter(paso); }
.lp-steps li:hover, .lp-career:hover {
    transform: translateY(-2px);
    border-color: var(--cc, var(--accent));
    box-shadow: 0 0 0 1px var(--cc, var(--accent)), 0 0 18px color-mix(in srgb, var(--cc, var(--accent)) 35%, transparent);
}
.lp-career { border-left: 3px solid var(--cc); }
.lp-career b { text-transform: uppercase; letter-spacing: .05em; }
.lp-career-icon { border-radius: var(--r-sm); background: transparent; border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); }
.lp-feat-grid div { border-left: 3px solid var(--tier-fundamentals); border-radius: var(--r-md); }
.lp-feat-grid div:nth-child(2) { border-left-color: var(--tier-intermediate); }
.lp-feat-grid div:nth-child(3) { border-left-color: var(--tier-advanced); }
.lp-feat-grid div:nth-child(4) { border-left-color: var(--accent); }
.lp-feat-grid b { text-transform: uppercase; letter-spacing: .06em; }
.lp-faq details[open] { border-color: var(--accent); }
.lp-faq summary::after { color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; }
.lp-final .btn-3d { --b: var(--accent); }

.auth-card { border-top: 2px solid var(--accent); }
.auth-back { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
#view-login h2.auth-title { text-transform: uppercase; letter-spacing: .1em; font-size: 1.1rem; color: var(--accent); }