/* jp-system.css: shared look for soyjpprieto.com, same visual language as the carousels and /comunidad
   (Barlow Condensed headlines, Share Tech Mono labels, green halos, grain and vignette).
   Each page keeps its own layout; this file is linked after the page's <style> and restyles the
   shared pieces (headlines, eyebrows, cards, buttons, back links). Pages opt in with <body class="jp">. */

body.jp {
  --jp-green: #b0d12a; --jp-green-2: #9ebc24; --jp-green-3: #c4e33a;
  --jp-green-faint: rgba(176,209,42,0.09); --jp-green-line: rgba(176,209,42,0.28);
  --jp-cond: "Barlow Condensed", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --jp-type: "Share Tech Mono", "Courier New", monospace;
  --jp-ease: cubic-bezier(.2,.8,.2,1);
  background-color: #030301;
  font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- ambient layers ---------- */
.jp-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.jp-fx-halo1 { background: radial-gradient(circle at 82% 10%, rgba(176,209,42,0.18) 0%, rgba(176,209,42,0) 38%); animation: jpFloat1 18s ease-in-out infinite alternate; }
.jp-fx-halo2 { background: radial-gradient(circle at 8% 90%, rgba(120,150,30,0.14) 0%, rgba(120,150,30,0) 36%); animation: jpFloat2 22s ease-in-out infinite alternate; }
.jp-fx-grid { background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 70%); }
.jp-fx-grain { z-index: 60; opacity: 0.10; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.jp-fx-vig { z-index: 59; background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,0.55) 100%); }
@keyframes jpFloat1 { to { transform: translate(-4%, 6%) scale(1.08); } }
@keyframes jpFloat2 { to { transform: translate(5%, -5%) scale(1.1); } }
body.jp > *:not(.jp-fx):not(.jpc-canvas):not(.jpc-frame):not(.jpc-vig):not(script):not(.modal-overlay):not(#jpbk-overlay) { position: relative; z-index: 1; }

/* ---------- type ---------- */
body.jp h1 {
  font-family: var(--jp-cond) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -0.01em !important;
  line-height: 0.92 !important; color: #f4f4f4; text-shadow: 0 8px 50px rgba(0,0,0,.5);
}
body.jp .wrap h1, body.jp .page h1 { font-size: clamp(2.6rem, 9vw, 4.6rem) !important; }
body.jp h1 .gr, body.jp h2 .gr { color: var(--jp-green); }
body.jp h2.sec, body.jp .sec, body.jp .s-title, body.jp .post-body h2, body.jp article h2 {
  font-family: var(--jp-cond) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0 !important; line-height: 0.95 !important;
}
body.jp h2.sec, body.jp .sec { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; padding-left: 0 !important; border-left: none !important; }
body.jp h2.sec::before, body.jp .sec::before { content: '// '; font-family: var(--jp-type); color: var(--jp-green); font-size: .7em; font-weight: 400; }
body.jp .eyebrow {
  font-family: var(--jp-type) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .03em !important;
  font-size: clamp(.9rem, 2.3vw, 1.05rem) !important; color: var(--jp-green) !important; background: none !important; border: none !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; gap: 12px;
}
body.jp .wrap .eyebrow::before, body.jp .page .eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--jp-green); display: inline-block; }
body.jp .lede { font-weight: 300; color: #d8d8d8; }
/* The wordmark matches /links: lowercase, green, 900 and compact Helvetica tracking. */
body.jp .logo-text, body.jp .footer-logo {
  font-family: "Helvetica Neue", Helvetica, "Barlow", Arial, sans-serif !important;
  font-weight: 900 !important; letter-spacing: -0.04em !important;
  color: var(--jp-green) !important; text-transform: lowercase !important;
  font-size: 1.65rem !important; line-height: 1 !important;
}

/* ---------- back links: big and obvious ---------- */
body.jp .back-link, body.jp .home-link {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px !important; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); color: #f4f4f4 !important; font-weight: 700 !important;
  font-size: .9rem !important; text-decoration: none !important; transition: border-color .2s, background .2s;
}
body.jp .back-link:hover, body.jp .home-link:hover { border-color: var(--jp-green); background: var(--jp-green-faint); color: var(--jp-green) !important; }

/* ---------- cards ---------- */
body.jp .res-card, body.jp .post-card, body.jp .install-card, body.jp .link-card, body.jp .soon-card, body.jp .confirm-box, body.jp .summary {
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: 20px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s var(--jp-ease), border-color .3s, box-shadow .3s !important; overflow: hidden;
}
body.jp a.res-card:hover, body.jp a.post-card:hover, body.jp a.link-card:hover {
  transform: translateY(-4px) !important; border-color: var(--jp-green-line) !important; box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
body.jp .link-card.featured { background: linear-gradient(135deg, var(--jp-green-3), var(--jp-green-2)) !important; border-color: transparent !important; }
body.jp .res-title, body.jp .post-title, body.jp .link-title {
  font-family: var(--jp-cond) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0 !important; font-size: 1.35rem !important; line-height: 1.02 !important;
}
body.jp .res-badge, body.jp .post-tag, body.jp .link-badge, body.jp .meta-chip { font-family: var(--jp-type) !important; font-weight: 400 !important; letter-spacing: .02em !important; text-transform: none !important; }
body.jp .flow-steps .fn, body.jp .steps .n { font-family: var(--jp-cond) !important; font-weight: 900 !important; color: var(--jp-green) !important; font-size: 1.25rem !important; }

/* ---------- buttons ---------- */
body.jp .cta-btn, body.jp .dl-btn, body.jp .wa-btn { position: relative; overflow: hidden; min-height: 52px; }
body.jp .cta-btn::after, body.jp .dl-btn::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none;
}
body.jp .cta-btn:hover::after, body.jp .dl-btn:hover::after { transform: translateX(120%); transition: transform .8s var(--jp-ease); }
body.jp .cta-btn { background: linear-gradient(135deg, var(--jp-green-3), var(--jp-green-2)) !important; color: #030301 !important; border: none !important; font-weight: 800 !important;
  padding: 0 28px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; box-shadow: 0 10px 30px rgba(176,209,42,.22); }
body.jp .cta-btn:hover { transform: translateY(-2px); }

/* ---------- article pages ---------- */
body.jp article p, body.jp .post-body p { line-height: 1.75; }
body.jp .pull { font-family: var(--jp-cond) !important; font-weight: 800 !important; text-transform: uppercase; font-size: clamp(1.5rem, 4.5vw, 2.1rem) !important; line-height: 1.05 !important; color: #f4f4f4 !important; }

/* ---------- scroll reveal (added by jp-system.js only to elements below the fold) ---------- */
.jp-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--jp-ease, ease), transform .8s var(--jp-ease, ease); }
.jp-reveal.jp-in { opacity: 1; transform: none; }

/* ---------- hero entrance ---------- */
body.jp .wrap > h1, body.jp .wrap > .eyebrow, body.jp .wrap > .lede, body.jp .wrap > .meta-row { animation: jpUp .8s var(--jp-ease) both; }
body.jp .wrap > .eyebrow { animation-delay: .05s; } body.jp .wrap > h1 { animation-delay: .12s; } body.jp .wrap > .lede { animation-delay: .24s; } body.jp .wrap > .meta-row { animation-delay: .32s; }
@keyframes jpUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- main page (/serviciomkt-VSL1): visual layer only, form logic untouched ---------- */
body.jp-vsl .hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem) !important; line-height: .95 !important; }
@media (max-width: 640px) { body.jp-vsl .hero h1 { font-size: clamp(1.55rem, 7.4vw, 2rem) !important; } }
body.jp-vsl .hero h1 .thin { font-weight: 700 !important; }
body.jp-vsl .s-title { font-size: clamp(2.1rem, 6vw, 3.6rem) !important; }
body.jp-vsl .hs-num { font-family: var(--jp-cond) !important; font-weight: 900 !important; }
#jpbk-overlay .jpbk-question { font-family: var(--jp-cond) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0 !important; line-height: .98 !important; font-size: clamp(1.9rem, 6vw, 3rem) !important; }
#jpbk-overlay .jpbk-eyebrow { font-family: var(--jp-type) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .03em !important; font-size: .95rem !important; }
#jpbk-overlay .jpbk-iconbtn.jpbk-labeled { width: auto !important; height: 48px !important; padding: 0 16px 0 12px; border-radius: 999px !important; gap: 6px;
  color: #f4f4f4 !important; font-weight: 700; font-size: .95rem; background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(255,255,255,.14) !important; }
#jpbk-overlay #jpbkCloseBtn.jpbk-labeled { padding: 0 12px 0 16px; background: none !important; border-color: transparent !important; color: #9a9a98 !important; }
#jpbk-overlay .jpbk-iconbtn.jpbk-labeled:hover { border-color: var(--jp-green) !important; background: var(--jp-green-faint) !important; }
#jpbk-overlay .jpbk-iconbtn.jpbk-labeled svg { width: 20px !important; height: 20px !important; }
#jpbk-overlay .jpbk-progress-track { height: 6px !important; }
#jpbk-overlay .jpbk-progress-fill { box-shadow: 0 0 10px var(--jp-green); }
#jpbk-overlay .jpbk-option { min-height: 60px; border-radius: 14px !important; }

@media (prefers-reduced-motion: reduce) {
  body.jp *, body.jp *::before, body.jp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .jp-reveal { opacity: 1; transform: none; }
}