/* ============================================================
   JegoDigital — Pricing page (precios.html + pricing.html)
   Rebuilt 2026-07-29 per jegodigital-web-design-system
   Tokens locked: void/base/deep/surface + gold + WA green
   ============================================================ */

:root{
  --jd-void:#07080c; --jd-base:#0f1115; --jd-deep:#0a0c10; --jd-surface:#14171e;
  --jd-line:rgba(255,255,255,.08);
  --jd-glass:rgba(255,255,255,.045);
  --jd-gold:#C5A059; --jd-gold-2:#E5C893; --jd-gold-dim:rgba(197,160,89,.14);
  --jd-green:#25D366; --jd-green-2:#1ebe5a;
  --jd-txt:#fff; --jd-txt-2:rgba(255,255,255,.72); --jd-txt-3:rgba(255,255,255,.45);
  --fs-display:clamp(2.6rem,6.2vw,4.6rem);
  --fs-h2:clamp(1.9rem,3.6vw,2.9rem);
  --fs-h3:clamp(1.12rem,1.5vw,1.35rem);
  --fs-lead:clamp(1.02rem,1.25vw,1.2rem);
  --fs-body:clamp(.95rem,1vw,1.02rem);
  --ease-settle:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--jd-base); color:var(--jd-txt-2);
  font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

h1,h2{font-weight:300;color:var(--jd-txt);letter-spacing:-.025em;line-height:1.06}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);color:var(--jd-txt);font-weight:600;letter-spacing:-.01em}
h1 .au,h2 .au{
  background:linear-gradient(100deg,var(--jd-gold) 10%,var(--jd-gold-2) 50%,var(--jd-gold) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-family:'Roboto Mono',monospace;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--jd-txt-3);display:block;margin-bottom:18px;
}
.lead{font-size:var(--fs-lead);max-width:56ch;margin:20px 0 0}
.section-intro{max-width:62ch;margin:14px 0 0;color:var(--jd-txt-2)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  color:#0b0d12;background:linear-gradient(120deg,var(--jd-gold),var(--jd-gold-2));
  box-shadow:0 10px 40px rgba(197,160,89,.28);
  transition:transform .3s var(--ease-settle),box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(197,160,89,.4)}
.btn.ghost{
  background:transparent;color:var(--jd-txt);border:1px solid var(--jd-line);box-shadow:none;
}
.btn.ghost:hover{border-color:rgba(197,160,89,.45)}
.btn.wa{
  background:linear-gradient(120deg,var(--jd-green),var(--jd-green-2));color:#04140a;
  box-shadow:0 10px 40px rgba(37,211,102,.25);
}
.btn.wa:hover{box-shadow:0 16px 50px rgba(37,211,102,.38)}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(10,12,16,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--jd-line);
}
.nav-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:800;font-size:1.22rem;color:var(--jd-txt);letter-spacing:-.02em}
.brand span{color:var(--jd-gold)}
.nav-links{display:flex;gap:22px;color:var(--jd-txt-3);font-size:.88rem;font-weight:600}
.nav-links a{transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--jd-gold-2)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-right .btn{padding:10px 20px;font-size:.85rem}
.lang-toggle{font-size:.78rem;color:var(--jd-txt-3);font-weight:700;letter-spacing:.06em}
.lang-toggle .on{color:var(--jd-gold-2)}
@media(max-width:920px){.nav-links{display:none}}

/* ---- ambient layers ---- */
.stage{position:relative;overflow:hidden}
.stage>.wrap{position:relative;z-index:2}
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0}
.aurora i{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.14;
  animation:auroraDrift 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){width:520px;height:520px;left:-8%;top:-20%;background:var(--jd-gold)}
.aurora i:nth-child(2){width:420px;height:420px;right:-6%;top:30%;background:#8a6d35;animation-duration:26s;animation-delay:-8s}
@keyframes auroraDrift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(60px,40px) scale(1.15)}
}
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:3px 3px;opacity:.022;mix-blend-mode:screen;
}
.band-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(197,160,89,.28),transparent)}

/* ---- reveal primitives ---- */
.jd-rv{opacity:0;transform:translateY(26px);transition:opacity .72s var(--ease-settle),transform .72s var(--ease-settle)}
.jd-rvs{opacity:0;transform:scale(.965);transition:opacity .72s var(--ease-settle),transform .72s var(--ease-settle)}
.jd-rv.is-in,.jd-rvs.is-in{opacity:1;transform:none}
.jd-rv[data-delay="1"],.jd-rvs[data-delay="1"]{transition-delay:.07s}
.jd-rv[data-delay="2"],.jd-rvs[data-delay="2"]{transition-delay:.14s}
.jd-rv[data-delay="3"],.jd-rvs[data-delay="3"]{transition-delay:.21s}
.jd-rv[data-delay="4"],.jd-rvs[data-delay="4"]{transition-delay:.28s}
.jd-rv[data-delay="5"],.jd-rvs[data-delay="5"]{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .jd-rv,.jd-rvs{opacity:1 !important;transform:none !important;transition:none !important}
  .aurora i{animation:none !important}
  html{scroll-behavior:auto}
}

/* ---- hero ---- */
.hero{padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,96px);background:var(--jd-base)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}}

/* hero plaque */
.plaque{
  position:relative;border-radius:24px;padding:30px 28px;
  background:linear-gradient(160deg,rgba(197,160,89,.12),rgba(255,255,255,.03) 40%);
  border:1px solid rgba(197,160,89,.3);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  overflow:hidden;
}
.plaque::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-120%);
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.plaque::after{animation:none}}
.plaque-label{
  font-family:'Roboto Mono',monospace;font-size:.68rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--jd-gold-2);
}
.plaque-amt{
  display:block;font-size:clamp(2.6rem,4.5vw,3.6rem);font-weight:300;color:var(--jd-txt);
  letter-spacing:-.03em;line-height:1.1;margin:10px 0 2px;
}
.plaque-amt small{font-size:.95rem;color:var(--jd-txt-3);font-weight:500;letter-spacing:0}
.plaque-sub{font-size:.85rem;color:var(--jd-txt-3)}
.plaque .btn{margin-top:20px;width:100%}

/* hero route pipeline */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;position:relative}
.route::before{
  content:"";position:absolute;left:6%;right:6%;top:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(197,160,89,.5),transparent);
}
.route-node{position:relative;text-align:center;padding:14px 6px 10px;border-radius:16px;background:var(--jd-glass);border:1px solid var(--jd-line)}
.route-node em{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin:0 auto 8px;border-radius:50%;
  background:var(--jd-gold-dim);border:1px solid rgba(197,160,89,.4);
  font-style:normal;font-size:.68rem;font-weight:800;color:var(--jd-gold-2);
  position:relative;z-index:1;
}
.route-node strong{display:block;font-size:.78rem;color:var(--jd-txt);font-weight:700}
.route-node span{display:block;font-size:.68rem;color:var(--jd-txt-3);line-height:1.35;margin-top:3px}

/* ---- sections ---- */
.block{padding:clamp(72px,9vw,120px) 0}
.block.deep{background:var(--jd-deep)}

/* ---- sprint split ---- */
.sprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:44px}
@media(max-width:920px){.sprint-grid{grid-template-columns:1fr}}
.shot{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--jd-line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  background:var(--jd-surface);
}
.shot .bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--jd-line);background:rgba(255,255,255,.03)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.shot .bar i:first-child{background:rgba(197,160,89,.6)}
.shot img{width:100%;height:auto}
.shot-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:7px 14px;border-radius:999px;font-size:.75rem;font-weight:800;
  background:linear-gradient(120deg,var(--jd-gold),var(--jd-gold-2));color:#0b0d12;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.plan-card{
  border-radius:24px;padding:34px 32px;
  background:var(--jd-surface);border:1px solid rgba(197,160,89,.3);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
}
.plan-tag{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--jd-gold-dim);color:var(--jd-gold-2);border:1px solid rgba(197,160,89,.35);
}
.plan-price{
  font-size:clamp(2.4rem,4vw,3.2rem);font-weight:300;color:var(--jd-txt);
  letter-spacing:-.03em;margin:16px 0 4px;
}
.plan-price small{font-size:.95rem;color:var(--jd-txt-3);font-weight:500}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:22px 0 6px}
@media(max-width:560px){.check-grid{grid-template-columns:1fr}}
.check-grid li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--jd-txt-2)}
.check-grid li::before{
  content:"";flex:0 0 16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--jd-gold-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5C893' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
  border:1px solid rgba(197,160,89,.35);
}
.plan-card .btn{margin-top:22px}
.mini-acc{margin-top:20px;border-top:1px solid var(--jd-line);padding-top:16px}
.mini-acc summary{
  cursor:pointer;font-size:.85rem;font-weight:700;color:var(--jd-txt-3);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.mini-acc summary::-webkit-details-marker{display:none}
.mini-acc summary::before{content:"+";color:var(--jd-gold);font-size:1rem;font-weight:400;transition:transform .3s}
.mini-acc[open] summary::before{transform:rotate(45deg)}
.mini-acc ul{margin-top:12px;display:grid;gap:7px}
.mini-acc li{font-size:.82rem;color:var(--jd-txt-3);padding-left:14px;position:relative}
.mini-acc li::before{content:"·";position:absolute;left:2px;color:var(--jd-gold)}

/* ---- filter chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 8px}
.chip{
  padding:9px 18px;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer;
  background:transparent;color:var(--jd-txt-3);border:1px solid var(--jd-line);
  font-family:inherit;transition:all .25s;
}
.chip:hover{color:var(--jd-txt);border-color:rgba(197,160,89,.45)}
.chip.on{background:var(--jd-gold-dim);color:var(--jd-gold-2);border-color:rgba(197,160,89,.5)}

/* ---- service grid (image-forward) ---- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:26px}
@media(max-width:680px){.svc-grid{grid-template-columns:1fr;gap:16px}}
.svc{
  position:relative;border-radius:20px;overflow:hidden;
  background:var(--jd-surface);border:1px solid var(--jd-line);
  transition:transform .45s var(--ease-settle),border-color .45s,box-shadow .45s;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-5px);border-color:rgba(197,160,89,.45);box-shadow:0 24px 60px -24px rgba(0,0,0,.75)}
.svc.hide{display:none}
.svc::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(197,160,89,.1),transparent 55%);
}
.svc:hover::before{opacity:1}
.svc-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#101218}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-settle)}
.svc:hover .svc-media img{transform:scale(1.06)}
.svc-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,8,12,.82),transparent 55%);
}
.svc-price{
  position:absolute;left:14px;bottom:12px;z-index:2;
  padding:7px 14px;border-radius:999px;
  background:rgba(7,8,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(197,160,89,.4);
  font-size:.8rem;font-weight:800;color:var(--jd-gold-2);white-space:nowrap;
}
.svc-price small{font-weight:500;color:var(--jd-txt-3);font-size:.72rem}
.svc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-body p{font-size:.88rem;color:var(--jd-txt-3);line-height:1.55;flex:1}
.svc-link{
  font-size:.84rem;font-weight:700;color:var(--jd-gold-2);
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
}
.svc-link::after{content:"→";transition:transform .3s}
.svc:hover .svc-link::after{transform:translateX(4px)}

/* ---- bundles ---- */
.bundle-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media(max-width:860px){.bundle-grid{grid-template-columns:1fr}}
.bundle{
  position:relative;border-radius:24px;overflow:hidden;
  background:var(--jd-surface);border:1px solid var(--jd-line);
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease-settle),border-color .45s;
}
.bundle:hover{transform:translateY(-5px)}
.bundle.featured{border-color:rgba(197,160,89,.5);box-shadow:0 24px 70px -20px rgba(197,160,89,.18)}
.bundle-media{position:relative;aspect-ratio:16/8;overflow:hidden}
.bundle-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.bundle-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--jd-surface) 4%,rgba(20,23,30,.25) 55%,transparent);
}
.bundle-pop{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:7px 14px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:linear-gradient(120deg,var(--jd-gold),var(--jd-gold-2));color:#0b0d12;
}
.bundle-body{padding:6px 28px 30px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1;margin-top:-8px}
.bundle-body h3{font-size:1.3rem}
.bundle-price{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:300;color:var(--jd-txt);letter-spacing:-.03em;margin:8px 0 14px}
.bundle-price small{font-size:.9rem;color:var(--jd-txt-3);font-weight:500}
.bundle ul{display:grid;gap:9px;margin-bottom:22px;flex:1}
.bundle li{display:flex;gap:9px;font-size:.9rem;align-items:flex-start}
.bundle li::before{
  content:"";flex:0 0 16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--jd-gold-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5C893' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
  border:1px solid rgba(197,160,89,.35);
}

/* ---- extras shelf ---- */
.extras{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
@media(max-width:760px){.extras{grid-template-columns:1fr}}
.extra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 18px;border-radius:14px;
  background:var(--jd-glass);border:1px solid var(--jd-line);
  transition:border-color .3s;
}
.extra:hover{border-color:rgba(197,160,89,.4)}
.extra strong{font-size:.9rem;color:var(--jd-txt);font-weight:600}
.extra em{font-style:normal;font-size:.88rem;font-weight:800;color:var(--jd-gold-2);white-space:nowrap}
.extra em small{font-weight:500;color:var(--jd-txt-3);font-size:.74rem}

/* ---- FAQ ---- */
.faq-list{margin-top:36px;max-width:820px}
.faq-item{border-bottom:1px solid var(--jd-line)}
.faq-item summary{
  cursor:pointer;padding:20px 44px 20px 0;list-style:none;position:relative;
  font-size:1.02rem;font-weight:600;color:var(--jd-txt);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(197,160,89,.4);
  color:var(--jd-gold-2);font-weight:300;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease-settle),background .3s;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--jd-gold-dim)}
.faq-item p{padding:0 44px 22px 0;font-size:.92rem;color:var(--jd-txt-3);max-width:68ch}

/* ---- closing CTA ---- */
.cta-final{text-align:center;padding:clamp(84px,10vw,140px) 0}
.cta-final h2{margin-bottom:14px}
.cta-final .btn{margin-top:30px;padding:17px 36px;font-size:1.02rem}
.cta-note{font-size:.82rem;color:var(--jd-txt-3);margin-top:16px}

/* ---- footer ---- */
.foot{background:var(--jd-void);border-top:1px solid var(--jd-line);padding:44px 0 0;font-size:.85rem;color:var(--jd-txt-3)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.socials{display:flex;gap:14px}
.socials a{display:flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--jd-line);color:var(--jd-txt-3);transition:all .25s}
.socials a:hover{color:var(--jd-gold-2);border-color:rgba(197,160,89,.45)}
.socials svg{width:17px;height:17px}
.foot-links{display:flex;flex-wrap:wrap;gap:16px}
.foot-links a:hover{color:var(--jd-gold-2)}

/* ── Pay-now door (2026-08-01) ──────────────────────────────────────────────
   Buy buttons for the low-ticket tier only. Deliberately quieter than the
   gold price pill: the service card still leads with the demo link, and the
   buy action sits beside it rather than shouting over it. Services at
   12,900 MXN and up have no button at all — those close on a call. */
.svc-buy{
  align-self:flex-start;margin-top:10px;
  font:inherit;font-size:.82rem;font-weight:800;letter-spacing:.01em;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  color:#07080c;background:var(--jd-gold);
  border:1px solid var(--jd-gold);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.svc-buy:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(197,160,89,.28)}
.svc-buy:active{transform:translateY(0)}
.svc-buy[aria-busy="true"]{opacity:.7;cursor:progress}

.extra-buy{
  flex:0 0 auto;
  font:inherit;font-size:.74rem;font-weight:800;
  padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  color:var(--jd-gold-2);background:transparent;
  border:1px solid rgba(197,160,89,.45);
  transition:background .25s ease, color .25s ease;
}
.extra-buy:hover{background:var(--jd-gold);color:#07080c;border-color:var(--jd-gold)}
.extra-buy[aria-busy="true"]{opacity:.7;cursor:progress}

/* The extras row is strong + em + button; keep the price from being squeezed. */
.extra{flex-wrap:wrap}
.extra > em{margin-left:auto}

@media (max-width:520px){
  .extra{gap:10px}
  .extra-buy{width:100%;text-align:center}
}