/* ============================================================
   PLENIT NODE · Capa visual de las páginas internas
   Se carga DESPUÉS de theme.css y de la hoja propia de cada página.

   El inicio funciona porque tiene jerarquía: marca grande, aire, y
   secciones bien separadas. Aquí se traslada eso a las internas sin
   tocar su contenido.
   ============================================================ */

/* ---------------- Cabecera de página ---------------- */
.ph{position:relative;text-align:center;padding:52px clamp(20px,5vw,48px) 34px}

/* Halo detrás del título, como el glow del inicio */
.ph::before{
    content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:min(760px,92vw);height:230px;pointer-events:none;
    background:radial-gradient(60% 70% at 50% 35%,rgba(27,157,240,.16),transparent 70%);
    filter:blur(12px)
}

.ph-mark{position:relative;width:74px;height:74px;margin:0 auto 18px;display:grid;place-items:center;
    border-radius:20px;border:1px solid rgba(212,166,74,.3);background:rgba(5,9,18,.6);
    box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 0 30px rgba(212,166,74,.06)}
.ph-mark img{width:46px}
.ph-mark i{font-size:1.7rem;color:var(--gold-soft)}

.ph-kicker{position:relative;display:inline-block;margin:0 0 12px;padding:5px 16px;border-radius:999px;
    border:1px solid var(--line);background:rgba(5,9,18,.6);
    font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}

.ph-title{position:relative;margin:0;font-family:'Unbounded','Cinzel',serif;font-weight:800;
    font-size:clamp(1.85rem,5.2vw,3.05rem);line-height:1.1;letter-spacing:.03em;
    background:linear-gradient(95deg,#fff 12%,var(--blue-soft) 52%,var(--gold-soft));
    -webkit-background-clip:text;background-clip:text;color:transparent}

.ph-sub{position:relative;max-width:640px;margin:16px auto 0;color:var(--muted);
    font-size:.97rem;line-height:1.68}
.ph-sub b{color:#dfe7f8}

/* Línea decorativa de cierre */
.ph-rule{position:relative;width:180px;height:1px;margin:26px auto 0;
    background:linear-gradient(90deg,transparent,rgba(212,166,74,.55),transparent)}
.ph-rule::after{content:"";position:absolute;left:50%;top:-2px;transform:translateX(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--gold-soft);
    box-shadow:0 0 10px var(--gold)}

/* ---------------- Navegación ---------------- */
.nav-bar{position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    background:rgba(7,11,20,.82);border-bottom:1px solid var(--line)}
.nav-links a{position:relative}
.nav-links a.active::after{
    content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
    width:60%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}

/* ---------------- Ritmo de secciones ---------------- */
.wrap > .section-title{margin-top:8px}
.block + .block{margin-top:14px}

/* Título de sección con marca lateral en vez de sólo texto */
.section-title{position:relative;display:inline-block;padding-bottom:12px}
.section-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:46px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft))}

/* ---------------- Profundidad de las tarjetas ---------------- */
.hud-border{transition:transform .25s ease,box-shadow .25s ease}
.hud-border:hover{box-shadow:0 16px 44px rgba(0,0,0,.42)}

/* Sólo las tarjetas que invitan a pulsar se elevan */
.lvl-card:hover,.how-card:hover,.calc-card .hud-border:hover{transform:translateY(-3px)}

/* ---------------- Tablas más legibles ---------------- */
.dash-table tbody tr,.calc-table tbody tr,.mod-table tbody tr{transition:background .15s ease}
.dash-table tbody tr:hover,.mod-table tbody tr:hover{background:rgba(120,160,220,.05)}
.calc-table tbody tr:nth-child(odd),.mod-table tbody tr:nth-child(odd){background:rgba(255,255,255,.017)}

/* ---------------- Pie ---------------- */
.site-foot{margin-top:64px;border-top:1px solid var(--line);padding-top:34px}

@media (max-width:640px){
    .ph{padding:34px 20px 24px}
    .ph-mark{width:60px;height:60px;margin-bottom:14px}
    .ph-mark img{width:36px}
    .ph::before{height:160px}
}