/* JellyPay Diseño e Impresión · páginas de servicio (mismo lenguaje visual que index.html) */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; background: #0A0711; color: #EDEAF2; font-family: 'Sora', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; min-height: 100vh; }
a { color: #EDEAF2; text-decoration: none; }
a:hover { color: #35C6CF; }
img { max-width: 100%; }
::selection { background: #35C6CF; color: #0A0711; }
.jp-glow { position: absolute; top: -240px; left: 50%; width: min(1100px, 160vw); height: 700px; transform: translateX(-50%); background: radial-gradient(50% 50% at 40% 50%, rgba(53,198,207,0.2), transparent 70%), radial-gradient(50% 50% at 68% 42%, rgba(142,42,139,0.28), transparent 70%); filter: blur(30px); pointer-events: none; }

.jp-head { position: sticky; top: 0; z-index: 60; background: rgba(10,7,17,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(237,234,242,0.09); }
.jp-head-in { max-width: 1300px; margin: 0 auto; padding: 10px clamp(14px, 3vw, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(8px, 2vw, 20px); }
.jp-logo { display: flex; align-items: center; flex-shrink: 0; }
.jp-logo img { height: clamp(30px, 6vw, 44px); width: auto; display: block; }
.jp-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; font-size: clamp(13px, 1.5vw, 14px); }
.jp-nav a { padding: 9px 10px; border-radius: 999px; white-space: nowrap; color: #EDEAF2; }
.jp-nav a:hover { background: rgba(237,234,242,0.07); color: #EDEAF2; }
.jp-cta { font-size: clamp(13px, 1.6vw, 14px); font-weight: 600; padding: 11px 16px; border-radius: 999px; background: linear-gradient(100deg, #35C6CF, #8E2A8B); color: #fff; white-space: nowrap; flex-shrink: 0; }
.jp-cta:hover { filter: brightness(1.15); color: #fff; }
@media (max-width: 760px) {
  .jp-nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
  .jp-cta { margin-left: auto; }
}

.jp-serv { position: relative; max-width: 1300px; margin: 0 auto; padding: clamp(34px, 6vw, 64px) clamp(18px, 4vw, 30px) clamp(48px, 7vw, 80px); }
.jp-migas { display: flex; flex-wrap: wrap; gap: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: rgba(237,234,242,0.55); margin-bottom: 26px; }
.jp-migas a { color: rgba(237,234,242,0.7); }
.jp-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: clamp(11px, 1.5vw, 12px); letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(237,234,242,0.18); background: rgba(237,234,242,0.05); margin-bottom: 24px; }
.jp-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #35C6CF; display: block; flex-shrink: 0; }
.jp-serv h1 { font-size: clamp(36px, 7vw, 80px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
.jp-serv h1 em { font-style: normal; background: linear-gradient(100deg, #35C6CF 20%, #B444B0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jp-intro { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.65; margin: 0 0 30px; max-width: 62ch; color: rgba(237,234,242,0.74); text-wrap: pretty; }
.jp-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.jp-btn { font-size: clamp(15px, 2vw, 17px); font-weight: 600; padding: 16px 28px; border-radius: 999px; background: linear-gradient(100deg, #35C6CF, #8E2A8B); color: #fff; box-shadow: 0 14px 40px -14px rgba(53,198,207,0.6); }
.jp-btn:hover { filter: brightness(1.15); color: #fff; }
.jp-btn2 { font-size: clamp(15px, 2vw, 17px); font-weight: 500; padding: 16px 28px; border-radius: 999px; border: 1px solid rgba(237,234,242,0.22); background: rgba(237,234,242,0.04); color: #EDEAF2; }
.jp-btn2:hover { border-color: #35C6CF; color: #EDEAF2; }

.jp-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: clamp(44px, 7vw, 72px) 0; }
.jp-bloque { border-radius: 24px; border: 1px solid rgba(237,234,242,0.12); background: rgba(237,234,242,0.035); padding: clamp(22px, 3vw, 32px); }
.jp-bloque h2, .jp-faq h2, .jp-otros h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.035em; line-height: 1.1; font-weight: 600; margin: 0 0 14px; }
.jp-bloque p { font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; color: rgba(237,234,242,0.74); }
.jp-bloque p:last-child { margin-bottom: 0; }
.jp-bloque ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.55; color: rgba(237,234,242,0.78); }
.jp-bloque li { display: flex; gap: 11px; align-items: baseline; border-bottom: 1px solid rgba(237,234,242,0.08); padding-bottom: 9px; }
.jp-bloque li::before { content: '·'; color: #35C6CF; flex-shrink: 0; }

.jp-faq { margin-bottom: clamp(44px, 7vw, 72px); }
.jp-faq-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.jp-faq-item { border-radius: 20px; border: 1px solid rgba(237,234,242,0.12); background: rgba(237,234,242,0.025); padding: clamp(18px, 2.4vw, 24px); }
.jp-faq-item h3 { font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; font-weight: 600; margin: 0 0 10px; }
.jp-faq-item p { font-size: 15px; line-height: 1.65; margin: 0; color: rgba(237,234,242,0.72); }

.jp-cierre { border-radius: 30px; border: 1px solid rgba(237,234,242,0.14); background: linear-gradient(115deg, rgba(53,198,207,0.18), rgba(142,42,139,0.26)); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 44px); margin-bottom: clamp(44px, 7vw, 72px); }
.jp-cierre h2 { font-size: clamp(26px, 4.6vw, 48px); letter-spacing: -0.045em; line-height: 1.02; font-weight: 600; margin: 0 0 14px; max-width: 20ch; }
.jp-cierre p { font-size: clamp(15px, 2vw, 17px); line-height: 1.6; margin: 0 0 26px; max-width: 54ch; color: rgba(237,234,242,0.82); }

.jp-otros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.jp-otro { display: flex; flex-direction: column; gap: 8px; border-radius: 20px; border: 1px solid rgba(237,234,242,0.12); background: rgba(237,234,242,0.035); padding: 20px; color: #EDEAF2; }
.jp-otro:hover { border-color: rgba(53,198,207,0.55); color: #EDEAF2; }
.jp-otro strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.jp-otro span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #35C6CF; }
.jp-secciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.jp-pie { border-top: 1px solid rgba(237,234,242,0.1); padding: clamp(36px, 5vw, 48px) clamp(18px, 4vw, 30px) 32px; }
.jp-pie-in { max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.jp-pie-in img { height: 48px; width: auto; display: block; margin-bottom: 14px; }
.jp-pie-in p { font-size: 14px; margin: 0; color: rgba(237,234,242,0.55); max-width: 34ch; line-height: 1.55; }
.jp-redes { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.jp-redes a { padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(237,234,242,0.18); }
.jp-redes a:hover { border-color: #35C6CF; }
.jp-pie-serv { max-width: 1300px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; }
.jp-pie-serv a { color: rgba(237,234,242,0.62); }
.jp-pie-local { max-width: 1300px; margin: 22px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; line-height: 1.5; color: rgba(237,234,242,0.66); }
.jp-pie-local a { color: #35C6CF; text-decoration: underline; text-underline-offset: 3px; }
.jp-pie-local a:hover { color: #EDEAF2; }
.jp-pie-legal { max-width: 1300px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(237,234,242,0.08); display: flex; flex-wrap: wrap; gap: 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,234,242,0.4); }
.jp-pie-legal nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.jp-pie-legal a { color: rgba(237,234,242,0.4); }
.jp-pie-legal a:hover { color: #35C6CF; }
.jp-pie-legal .jp-mx { margin-left: auto; }