/* ── PP Mori ── */
@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-Extralight.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; }

/* ── Variables ── */
#jh {
    --m:    #FF00FF;
    --a:    #00FFAA;
    --line: rgba(255,255,255,0.08);
    --dim:  rgba(255,255,255,0.52);
    --px:   clamp(24px, 6vw, 100px);
}

/* ── Wrapper ── */
#jh {
    display:block; font-family:'PPMori',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:16px; font-weight:400; font-style:normal; line-height:1.5;
    color:#fff; background:#000; overflow-x:hidden; text-align:left;
    width:100vw; position:relative; left:50%; margin-left:-50vw; margin-right:0; padding:0;
    -webkit-font-smoothing:antialiased;
}
#jh *,#jh *::before,#jh *::after { box-sizing:border-box; font-family:'PPMori',-apple-system,BlinkMacSystemFont,sans-serif; font-style:normal; text-align:left; }
#jh h1,#jh h2,#jh h3,#jh h4 { margin:0; padding:0; font-weight:600; line-height:1.05; letter-spacing:-0.03em; color:#fff; text-align:left; }
#jh p { margin:0; padding:0; font-weight:400; text-align:left; }
#jh a { text-decoration:none; color:inherit; font-style:normal; }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
#jh .jh-hero { min-height:100vh; background:#000; padding:0 var(--px); display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
#jh .jh-hero__glow   { position:absolute; top:-15%; right:-10%; width:55vw; height:55vw; background:radial-gradient(circle,rgba(255,0,255,.08) 0%,transparent 55%); pointer-events:none; }
#jh .jh-hero__glow-b { position:absolute; bottom:10%; left:-5%; width:30vw; height:30vw; background:radial-gradient(circle,rgba(0,255,170,.04) 0%,transparent 60%); pointer-events:none; }
#jh .jh-hero__body   { position:relative; z-index:1; padding-top:130px; padding-bottom:clamp(64px,9vh,96px); max-width:960px; }

#jh .jh-hero__h1 { font-size:clamp(38px,6.5vw,92px); font-weight:600; line-height:1.06; letter-spacing:-0.035em; color:#fff; text-align:left; text-transform:none; }
#jh .jh-c-m { color:var(--m); font-style:normal; }
#jh .jh-c-a { color:var(--a); font-style:normal; }

#jh .jh-hero__sub { margin-top:clamp(24px,3.5vh,40px); font-size:clamp(15px,1.3vw,18px); font-weight:400; line-height:1.65; color:var(--dim); max-width:52ch; text-align:left; }
#jh .jh-hero__actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(36px,5vh,52px); }

/* ── Botones pill ── */
#jh .jh-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; background:var(--m); color:#000; font-size:13px; font-weight:600; letter-spacing:0.08em; border-radius:999px; white-space:nowrap; cursor:pointer; border:none; transition:opacity .18s,transform .18s; font-style:normal; }
#jh .jh-btn:hover { opacity:.82; color:#000; transform:translateY(-1px); }
#jh .jh-btn svg { flex-shrink:0; transition:transform .18s; }
#jh .jh-btn:hover svg { transform:translateX(3px); }

#jh .jh-btn-outline { display:inline-flex; align-items:center; gap:10px; padding:13px 28px; background:transparent; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.2); font-size:13px; font-weight:600; letter-spacing:0.08em; border-radius:999px; white-space:nowrap; transition:color .18s,border-color .18s,transform .18s; font-style:normal; }
#jh .jh-btn-outline:hover { color:#fff; border-color:rgba(255,255,255,.5); transform:translateY(-1px); }

/* ══════════════════════════════════════════
   TICKER
   ══════════════════════════════════════════ */
#jh .jh-ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; background:#000; white-space:nowrap; }
#jh .jh-ticker__track { display:inline-flex; align-items:center; animation:jh-tick 32s linear infinite; }
#jh .jh-ticker__item { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.22); padding:0 32px; white-space:nowrap; }
#jh .jh-ticker__dot { color:var(--a); font-size:8px; flex-shrink:0; }
@keyframes jh-tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════════
   SECCIÓN BASE
   ══════════════════════════════════════════ */
#jh .jh-sec { display:block; width:100%; padding:clamp(72px,10vh,128px) var(--px); background:#000; border-top:1px solid var(--line); text-align:left; }
#jh .jh-sec--dark { background:#080808; }
#jh .jh-sec--nb   { border-top:none; }

#jh .jh-label { display:block; font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.24); text-align:left; }
#jh .jh-sec-head { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,5vh,64px); }

/* ══════════════════════════════════════════
   SERVICIOS — lista con hover + popup trigger
   ══════════════════════════════════════════ */
#jh .jh-svcs { display:flex; flex-direction:column; }
#jh .jh-svc {
    display:grid;
    grid-template-columns:56px 1fr auto;
    align-items:center;
    gap:0 clamp(20px,3vw,48px);
    padding:clamp(22px,3vh,34px) 0;
    border-bottom:1px solid var(--line);
    color:inherit;
    cursor:pointer;
    position:relative;
    transition:background .18s;
}
#jh .jh-svc:first-child { border-top:1px solid var(--line); }
#jh .jh-svc::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.02); opacity:0; transition:opacity .18s; pointer-events:none; }
#jh .jh-svc:hover::before { opacity:1; }

#jh .jh-svc__num { font-size:12px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.2); text-align:left; flex-shrink:0; }
#jh .jh-svc__main { display:flex; flex-direction:column; gap:5px; min-width:0; }
#jh .jh-svc__title { font-size:clamp(20px,2.4vw,32px); font-weight:600; letter-spacing:-0.025em; line-height:1.1; color:#fff; text-align:left; transition:color .18s; white-space:nowrap; }
#jh .jh-svc__desc  { font-size:13px; font-weight:400; line-height:1.5; color:rgba(255,255,255,.38); text-align:left; max-height:0; overflow:hidden; transition:max-height .3s ease,opacity .3s ease; opacity:0; }
#jh .jh-svc:hover .jh-svc__desc { max-height:60px; opacity:1; }
#jh .jh-svc:hover .jh-svc__title { color:var(--m); }
#jh .jh-svc--a:hover .jh-svc__title { color:var(--a); }

#jh .jh-svc__right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
#jh .jh-svc__tag { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:5px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.3); white-space:nowrap; transition:border-color .18s,color .18s; text-align:center; }
#jh .jh-svc:hover .jh-svc__tag { border-color:var(--m); color:var(--m); }
#jh .jh-svc--a:hover .jh-svc__tag { border-color:var(--a); color:var(--a); }

#jh .jh-svc__plus { width:32px; height:32px; border:1px solid rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); flex-shrink:0; transition:border-color .18s,color .18s,transform .18s; }
#jh .jh-svc:hover .jh-svc__plus { border-color:var(--m); color:var(--m); transform:rotate(45deg); }
#jh .jh-svc--a:hover .jh-svc__plus { border-color:var(--a); color:var(--a); }

@media (max-width:640px) {
    #jh .jh-svc { grid-template-columns:36px 1fr auto; }
    #jh .jh-svc__tag { display:none; }
    #jh .jh-svc__title { white-space:normal; font-size:clamp(18px,5vw,24px); }
}

/* ══════════════════════════════════════════
   POPUP / MODAL — visual, dos columnas
   ══════════════════════════════════════════ */
#jh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#jh-modal.is-open { display: flex; }

#jh-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

/* Caja principal — ancha, dos columnas */
#jh-modal__box {
    position: relative; z-index: 1;
    width: 100%;
    max-width: 780px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,.1);
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow: hidden;
    font-family: 'PPMori', -apple-system, sans-serif;
}
@media (max-width: 600px) {
    #jh-modal__box { grid-template-columns: 1fr; }
}

/* Columna izquierda */
#jh-modal__left {
    position: relative;
    padding: 44px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    overflow: hidden;
    background: #000;
}
#jh-modal__left-glow {
    position: absolute; inset: 0;
    transition: background .3s;
}
#jh-modal__big-num {
    position: absolute;
    top: -16px; left: -10px;
    font-size: 180px;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1;
    opacity: .05;
    color: #fff;
    pointer-events: none;
    font-family: 'PPMori', sans-serif;
    user-select: none;
}
/* Icono + título en fila */
#jh-modal__title-row {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}
#jh-modal__icon-wrap {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    flex-shrink: 0;
    transition: border-color .2s;
}
#jh-modal__left-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #fff;
    font-family: 'PPMori', sans-serif;
    margin: 0; padding: 0;
}
@media (max-width: 600px) {
    #jh-modal__left { min-height: auto; padding: 32px 28px 28px; }
    #jh-modal__big-num { font-size: 110px; }
}

/* Columna derecha */
#jh-modal__right {
    padding: 44px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
#jh-modal__close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    z-index: 2;
}
#jh-modal__close:hover { border-color: #fff; color: #fff; }

/* Items */
#jh-modal__items { display: flex; flex-direction: column; gap: 0; flex: 1; }
.jh-modal-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.jh-modal-item:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.jh-modal-item__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--m); flex-shrink: 0; margin-top: 6px;
}
.jh-modal-item__dot.is-a { background: var(--a); }
.jh-modal-item__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'PPMori', sans-serif;
}
.jh-modal-item__title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    font-family: 'PPMori', sans-serif;
    display: block;
    margin-bottom: 2px;
}
.jh-modal-item__desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    line-height: 1.55;
    font-family: 'PPMori', sans-serif;
    display: block;
}

/* CTA */
#jh-modal__cta {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px;
    background: var(--m); color: #000;
    font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity .18s;
    font-family: 'PPMori', sans-serif;
    align-self: flex-start;
}
#jh-modal__cta.is-a { background: var(--a); }
#jh-modal__cta:hover { opacity: .82; color: #000; }

/* ══════════════════════════════════════════
   DISTRIBUCIÓN
   ══════════════════════════════════════════ */
#jh .jh-two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,112px); align-items:start; text-align:left; }
@media (max-width:700px) { #jh .jh-two-col { grid-template-columns:1fr; gap:40px; } }

#jh .jh-dist__intro { font-size:clamp(28px,3.8vw,52px); font-weight:600; letter-spacing:-0.035em; line-height:1.15; color:rgba(255,255,255,.28); margin-bottom:clamp(48px,6vh,72px); text-align:left; }
#jh .jh-dist__intro .jh-c-m { color:#fff; }

#jh .jh-dist__title { font-size:clamp(22px,2.8vw,38px); font-weight:600; letter-spacing:-0.03em; line-height:1.15; color:#fff; text-align:left; }
#jh .jh-dist__body  { font-size:15px; line-height:1.7; color:var(--dim); font-weight:400; margin-top:16px; text-align:left; }
#jh .jh-dist__cta   { margin-top:32px; }

#jh .jh-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:32px; }
#jh .jh-stat  { padding:24px 20px; background:#0d0d0d; text-align:left; }
#jh .jh-stat__val   { display:block; font-size:clamp(28px,3vw,40px); font-weight:600; letter-spacing:-0.04em; color:var(--a); line-height:1; margin-bottom:8px; text-align:left; }
#jh .jh-stat__label { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.28); line-height:1.4; text-align:left; }

#jh .jh-feats { display:flex; flex-direction:column; }
#jh .jh-feat  { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); text-align:left; }
#jh .jh-feat:first-child { border-top:1px solid var(--line); }
#jh .jh-feat__dot   { width:28px; height:28px; border:1px solid rgba(0,255,170,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; color:var(--a); }
#jh .jh-feat__title { font-size:14px; font-weight:600; color:#fff; margin-bottom:4px; letter-spacing:-0.01em; text-align:left; }
#jh .jh-feat__desc  { font-size:13px; color:rgba(255,255,255,.36); line-height:1.62; font-weight:400; text-align:left; }

/* ══════════════════════════════════════════
   CTA FINAL — centrado
   ══════════════════════════════════════════ */
#jh .jh-final {
    position:relative; overflow:hidden;
    text-align:center !important;
}
#jh .jh-final::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,0,255,.07) 0%, transparent 70%);
    pointer-events:none;
}
#jh .jh-final * { text-align:center !important; }

#jh .jh-final__inner {
    position:relative; z-index:1;
    display:flex; flex-direction:column;
    align-items:center; gap:clamp(32px,4vh,48px);
    max-width:680px; margin:0 auto;
}
#jh .jh-final__h {
    font-size:clamp(36px,5.5vw,76px);
    font-weight:600; line-height:1.04;
    letter-spacing:-0.04em; color:#fff;
    text-align:center !important;
}
#jh .jh-final__sub {
    font-size:clamp(15px,1.2vw,17px);
    line-height:1.68; color:var(--dim);
    font-weight:400; max-width:44ch;
    text-align:center !important;
}

@media (prefers-reduced-motion:reduce) {
    #jh .jh-ticker__track { animation:none; }
    #jh .jh-svc__desc { transition:none; }
}