/* HyperPowers · boceto v1 · estilo Julian Avila (estilo-julian-avila.css va antes) */

/* ---------- Logo H en cromo (máscara del trazo) ---------- */
.hp-logo { display: inline-block; flex: none; width: 30px; aspect-ratio: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.hp-logo > span { display: block; width: 100%; height: 100%;
  --hp-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%20width%3D%22100%22%20height%3D%22100%22%3E%20%20%3Cdefs%3E%3CclipPath%20id%3D%22arriba%22%3E%3Cpath%20d%3D%22M0%2C0%20L100%2C0%20L100%2C30%20L0%2C62Z%22/%3E%3C/clipPath%3E%3CclipPath%20id%3D%22abajo%22%3E%3Cpath%20d%3D%22M0%2C66%20L100%2C34%20L100%2C100%20L0%2C100Z%22/%3E%3C/clipPath%3E%3C/defs%3E%20%20%3Cg%20clip-path%3D%22url%28%23abajo%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23000%22%20d%3D%22M24%2C6%20H76%20A18%2C18%200%200%201%2094%2C24%20V76%20A18%2C18%200%200%201%2076%2C94%20H24%20A18%2C18%200%200%201%206%2C76%20V24%20A18%2C18%200%200%201%2024%2C6%20Z%20M23.36%2C21.88%20L38.16%2C21.88%20L38.16%2C44.08%20L61.84%2C44.08%20L61.84%2C21.88%20L76.64%2C21.88%20L76.64%2C78.12%20L61.84%2C78.12%20L61.84%2C55.92%20L38.16%2C55.92%20L38.16%2C78.12%20L23.36%2C78.12Z%22/%3E%3C/g%3E%20%20%3Cg%20clip-path%3D%22url%28%23arriba%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23000%22%20d%3D%22M24%2C6%20H76%20A18%2C18%200%200%201%2094%2C24%20V76%20A18%2C18%200%200%201%2076%2C94%20H24%20A18%2C18%200%200%201%206%2C76%20V24%20A18%2C18%200%200%201%2024%2C6%20Z%20M23.36%2C21.88%20L38.16%2C21.88%20L38.16%2C44.08%20L61.84%2C44.08%20L61.84%2C21.88%20L76.64%2C21.88%20L76.64%2C78.12%20L61.84%2C78.12%20L61.84%2C55.92%20L38.16%2C55.92%20L38.16%2C78.12%20L23.36%2C78.12Z%22%20transform%3D%22translate%283%20-1%29%22/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--hp-svg) center / contain no-repeat; mask: var(--hp-svg) center / contain no-repeat;
  background: var(--ja-glint) var(--gl) 0 / 260% 100% no-repeat, var(--ja-chrome) 50% var(--env) / 100% 150% no-repeat; }
.hp-marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ja-text);
  font: 800 .98rem/1 var(--ja-font-display); letter-spacing: .02em; text-transform: uppercase; }
.hp-marca i { font-style: italic; font-weight: 600; color: var(--ja-silver); }

/* ---------- Barra ---------- */
.hp-barra { position: fixed; inset: 0 0 auto; z-index: 50; }
.hp-barra .ja-wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.hp-nav { display: flex; gap: .3rem; }
.hp-nav a { padding: .5rem .8rem; border-radius: var(--ja-r-chip); color: var(--ja-muted); text-decoration: none; font-size: .88rem; font-weight: 500; transition: color .25s var(--ja-ease), background .25s var(--ja-ease); }
.hp-nav a:hover { color: var(--ja-text); background: rgba(255,255,255,.04); }
@media (max-width: 860px) { .hp-nav { display: none; } }

/* ---------- Fondo espacial ---------- */
#hp-cielo { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.hp-fondo { position: fixed; inset: 0; z-index: -2; }
.hp-grano { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Secciones ---------- */
.hp-sec { padding-block: var(--ja-sy); position: relative; }
.hp-cab { display: grid; justify-items: center; text-align: center; gap: 1.1rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.hp-cab .ja-lead { max-width: 46ch; }

/* ---------- Hero ---------- */
.hp-hero { display: grid; align-content: start; padding-top: clamp(7.5rem, 14vh, 10rem); padding-bottom: 4rem; position: relative; overflow: clip; }
.hp-hero .ja-haz { position: absolute; top: -10%; left: 30%; width: 40%; height: 80%; }
.hp-hero__txt { display: grid; justify-items: center; text-align: center; gap: 1.5rem; position: relative; z-index: 1; }
.hp-hero .ja-display { font-size: clamp(1.9rem, .35rem + 6.5vw, 6.2rem); }
.hp-hero .ja-display .voz { font-style: italic; font-weight: 500; letter-spacing: .005em; }
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.hp-renglon-1 > * { animation-delay: .18s; } .hp-renglon-2 > * { animation-delay: .30s; } .hp-renglon-3 > * { animation-delay: .42s; }

/* Línea de tiempo animada (motivo de editor) */
.hp-tl { margin-top: clamp(3rem, 6vw, 4.5rem); padding: 16px 18px 18px; }
.hp-tl__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 1rem; }
.hp-tl__top .ja-label { font-size: .66rem; }
.hp-pausa { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; color: var(--ja-muted); padding: .3rem .55rem; border-radius: 7px; border: 1px solid var(--ja-line-strong); }
.hp-pausa:focus-visible { outline: 2px solid var(--ja-silver); outline-offset: 2px; }
.hp-regla { height: 16px; margin-left: 46px; background: repeating-linear-gradient(90deg, rgba(200,206,214,.3) 0 1px, transparent 1px 10%), repeating-linear-gradient(90deg, rgba(200,206,214,.14) 0 1px, transparent 1px 2.5%); background-size: 100% 9px, 100% 5px; background-repeat: no-repeat; background-position: 0 0, 0 4px; }
.hp-pistas { position: relative; display: grid; gap: 6px; }
.hp-pista { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; }
.hp-pista > b { font: 600 .62rem/1 var(--ja-font-body); letter-spacing: .12em; color: var(--ja-silver-dim); text-align: center; }
.hp-carril { position: relative; height: 34px; border-radius: 6px; background: rgba(255,255,255,.02); overflow: hidden; }
.hp-carril--a { height: 42px; }
.hp-grupo { position: absolute; inset: 0; }
.hp-clip { position: absolute; top: 3px; bottom: 3px; border-radius: 5px;
  background: linear-gradient(180deg, #3A3F47, #23262C); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6); overflow: hidden; }
.hp-clip::after { content: attr(data-n); position: absolute; left: 7px; top: 5px; font-size: .6rem; font-weight: 600; letter-spacing: .06em; color: rgba(234,240,255,.62); }
.hp-clip--sub { background: linear-gradient(180deg, #2C3037, #1A1C21); }
.hp-clip--a { background: linear-gradient(180deg, #23262B, #141619); }
.hp-silencio { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; border: 1px dashed rgba(200,206,214,.22);
  background: repeating-linear-gradient(135deg, rgba(200,206,214,.06) 0 4px, transparent 4px 8px); }
.hp-onda { position: absolute; inset: 6px 4px; }
.hp-onda svg { width: 100%; height: 100%; display: block; }
.hp-cabezal { position: absolute; top: -20px; bottom: 0; left: 46px; width: 2px; background: var(--ja-silver); box-shadow: var(--ja-glow); border-radius: 2px; }
.hp-cabezal::before { content: ''; position: absolute; top: 0; left: -5px; width: 12px; height: 9px; background: var(--ja-silver); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hp-corte { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #EAF4FF; box-shadow: 0 0 10px rgba(170,200,255,.95); opacity: 0; }
.hp-palabra { position: absolute; top: 9px; font: 700 .7rem/1 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); opacity: 0; }

/* Coreografía del bucle (8 s): silencios fuera, cortes, cierre de huecos */
.hp-anima .hp-cabezal { animation: hp-cabezal 8s linear infinite; }
.hp-anima .hp-silencio { animation: hp-silencio 8s var(--ja-ease) infinite; }
.hp-anima .hp-silencio.s2 { animation-name: hp-silencio2; }
.hp-anima .hp-corte.c1 { animation: hp-corte1 8s linear infinite; }
.hp-anima .hp-corte.c2 { animation: hp-corte2 8s linear infinite; }
.hp-anima .g2 { animation: hp-g2 8s var(--ja-ease-expo) infinite; }
.hp-anima .g3 { animation: hp-g3 8s var(--ja-ease-expo) infinite; }
.hp-anima .hp-palabra { animation: hp-palabra 8s var(--ja-ease-snap) infinite; animation-delay: var(--d); }
@keyframes hp-cabezal { from { transform: translateX(0); } to { transform: translateX(calc(var(--carril) * 1px)); } }
@keyframes hp-silencio { 0%, 24% { opacity: 1; } 30%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hp-silencio2 { 0%, 49% { opacity: 1; } 55%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hp-corte1 { 0%, 21% { opacity: 0; } 23%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes hp-corte2 { 0%, 46% { opacity: 0; } 48%, 53% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes hp-g2 { 0%, 28% { transform: none; } 36%, 92% { transform: translateX(-9%); } 100% { transform: none; } }
@keyframes hp-g3 { 0%, 53% { transform: none; } 61%, 92% { transform: translateX(-7%); } 100% { transform: none; } }
@keyframes hp-palabra { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 4% { opacity: 1; transform: none; } 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.hp-pausado * { animation-play-state: paused !important; }

/* ---------- Herramientas (bento) ---------- */
.hp-bento { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 14px; }
.hp-ocho { grid-row: span 2; display: grid; place-items: center; padding: 1.5rem; }
.hp-ocho .ja-num { font-size: clamp(9rem, 16vw, 15rem); filter: drop-shadow(0 0 16px rgba(220,226,234,.22)); }
.hp-ocho p { margin: 0; text-align: center; color: var(--ja-muted); font-size: .9rem; max-width: 18ch; }
.hp-tool { padding: 18px 18px 20px; display: grid; gap: .55rem; align-content: start; min-height: 230px; }
.hp-tool .ja-num { font-size: 1.6rem; }
.hp-tool h3 { font: 800 1.02rem/1.1 var(--ja-font-display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.hp-tool h3 i { font-style: italic; font-weight: 600; color: var(--ja-silver); }
.hp-tool p { margin: 0; color: var(--ja-muted); font-size: .86rem; line-height: 1.5; font-weight: 300; }
.hp-mini { height: 64px; margin-top: auto; position: relative; border-radius: 8px; background: rgba(2,4,8,.55); border: 1px solid var(--ja-line); overflow: hidden; }
.hp-beta { justify-self: start; }
@media (max-width: 1100px) { .hp-bento { grid-template-columns: repeat(2, 1fr); } .hp-ocho { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .hp-bento { grid-template-columns: 1fr; } .hp-ocho { grid-column: auto; } }

/* mini animaciones: solo transform y opacity */
.m-lineas i { position: absolute; left: 10px; height: 5px; border-radius: 3px; background: rgba(200,206,214,.3); }
.m-lineas i.x::after { content: ''; position: absolute; left: -2px; right: -2px; top: 2px; height: 1px; background: #EAF4FF; transform-origin: left; transform: scaleX(0); animation: m-tacha 4s var(--ja-ease) infinite; }
@keyframes m-tacha { 0%, 30% { transform: scaleX(0); } 45%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.m-sub { display: grid; place-items: center; font: 800 1rem/1 var(--ja-font-display); text-transform: uppercase; }
.m-sub span { display: inline-block; animation: m-pop 3s var(--ja-ease-snap) infinite; opacity: 0; }
.m-sub span:nth-child(2) { animation-delay: .35s; } .m-sub span:nth-child(3) { animation-delay: .7s; }
@keyframes m-pop { 0% { opacity: 0; transform: translateY(8px) scale(.85); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 95%, 100% { opacity: 0; } }
.m-iconos { display: flex; gap: 10px; align-items: center; justify-content: center; }
.m-iconos i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--ja-line-strong); background: rgba(255,255,255,.04); animation: m-brillo 3.2s var(--ja-ease) infinite; }
.m-iconos i:nth-child(2) { animation-delay: .35s; } .m-iconos i:nth-child(3) { animation-delay: .7s; } .m-iconos i:nth-child(4) { animation-delay: 1.05s; } .m-iconos i:nth-child(5) { animation-delay: 1.4s; }
@keyframes m-brillo { 0%, 100% { opacity: .45; } 12% { opacity: 1; } 30% { opacity: .45; } }
.m-onda { display: flex; align-items: center; gap: 3px; padding: 0 10px; }
.m-onda i { flex: 1; height: var(--h); background: rgba(200,206,214,.42); border-radius: 2px; transform-origin: center; }
.m-onda i.q { animation: m-quita 3.6s var(--ja-ease) infinite; }
@keyframes m-quita { 0%, 35% { opacity: 1; transform: scaleY(1); } 50%, 85% { opacity: 0; transform: scaleY(.2); } 100% { opacity: 1; } }
.m-track .punto { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ja-silver); box-shadow: var(--ja-glow); left: 14px; top: 40px; animation: m-ruta 4s var(--ja-ease-move) infinite alternate; }
.m-track .rotulo { position: absolute; left: 26px; top: 26px; font: 700 .55rem/1 var(--ja-font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ja-text); animation: m-ruta 4s var(--ja-ease-move) infinite alternate; }
@keyframes m-ruta { from { transform: translate(0, 0); } to { transform: translate(150px, -16px); } }
.m-color { display: flex; }
.m-color i { flex: 1; }
.m-color i:nth-child(1) { background: linear-gradient(180deg, #4b4f57, #1b1d22); } .m-color i:nth-child(2) { background: linear-gradient(180deg, #6d7179, #2a2c31); } .m-color i:nth-child(3) { background: linear-gradient(180deg, #9a9ea6, #3a3c41); }
.m-color::after { content: ''; position: absolute; inset: 0; background: var(--ja-sweep) 0 0 / 280% 100% no-repeat; animation: m-barrido 3s var(--ja-ease-move) infinite; }
@keyframes m-barrido { from { background-position: 110% 0; } to { background-position: -10% 0; } }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 6px; }
.m-grid i { border-radius: 3px; background: rgba(200,206,214,.18); animation: m-celda 4s var(--ja-ease-expo) infinite; opacity: 0; }
.m-grid i:nth-child(2) { animation-delay: .12s; } .m-grid i:nth-child(3) { animation-delay: .24s; } .m-grid i:nth-child(4) { animation-delay: .36s; } .m-grid i:nth-child(5) { animation-delay: .48s; } .m-grid i:nth-child(6) { animation-delay: .6s; }
@keyframes m-celda { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.m-sfx i { position: absolute; bottom: 10px; width: 2px; height: 34px; background: var(--ja-silver); box-shadow: var(--ja-glow); opacity: 0; animation: m-golpe 2.4s var(--ja-ease-snap) infinite; }
.m-sfx i:nth-child(2) { animation-delay: .6s; } .m-sfx i:nth-child(3) { animation-delay: 1.2s; }
@keyframes m-golpe { 0% { opacity: 0; transform: scaleY(.2); } 8% { opacity: 1; transform: scaleY(1); } 40%, 100% { opacity: 0; } }

/* ---------- HyperChat ---------- */
.hp-split { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hp-split__txt { display: grid; gap: 1.2rem; }
.hp-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hp-transcript { padding: 22px; }
.hp-transcript p { margin: 0 0 1rem; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); line-height: 1.75; color: var(--ja-muted); font-weight: 300; }
.hp-transcript p .ok { color: var(--ja-text); font-weight: 400; }
.hp-transcript p .fuera { position: relative; color: rgba(154,161,171,.55); }
.hp-transcript p .fuera::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: #EAF4FF; box-shadow: 0 0 6px rgba(170,200,255,.8); transform-origin: left; transform: scaleX(0); }
.is-in .hp-transcript p .fuera::after { transform: scaleX(1); transition: transform .6s var(--ja-ease) calc(.4s + var(--k, 0) * .22s); }
.hp-prompt { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--ja-line-strong); background: rgba(2,4,8,.6); color: var(--ja-muted); font-size: .9rem; }
.hp-prompt b { color: var(--ja-text); font-weight: 500; }
.hp-prompt i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(170,200,255,.95); box-shadow: 0 0 8px rgba(170,200,255,.95); }
@media (max-width: 900px) { .hp-split { grid-template-columns: 1fr; } }

/* ---------- Reels (subtítulos, audio, SFX) ---------- */
.hp-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin-inline: auto; }
.hp-reel { display: grid; gap: .9rem; }
.hp-reel .ja-tarjeta { aspect-ratio: 9 / 16; display: grid; align-content: end; padding: 16px; }
.hp-poster { position: absolute; inset: 0; background:
  radial-gradient(80% 50% at 50% 30%, rgba(110,118,130,.28), transparent 70%),
  linear-gradient(180deg, rgba(5,7,14,.62), rgba(5,7,14,.1) 40%, rgba(5,7,14,.94)), #121419; }
.hp-poster .marcador { position: absolute; top: 14px; left: 14px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ja-silver-dim); font-weight: 600; }
.hp-reel .contenido { position: relative; z-index: 1; display: grid; gap: .6rem; }
.hp-reel h3 { margin: 0; font: 800 1.02rem/1.1 var(--ja-font-display); text-transform: uppercase; }
.hp-reel h3 i { font-style: italic; font-weight: 600; color: var(--ja-silver); }
.hp-reel p { margin: 0; color: var(--ja-muted); font-size: .88rem; font-weight: 300; }
.hp-cap { justify-self: center; padding: .35rem .6rem; border-radius: 7px; background: rgba(2,4,8,.72); font: 700 1.05rem/1.1 var(--ja-font-display); text-transform: uppercase; }
.hp-cap span { display: inline-block; opacity: 0; animation: m-pop 3.4s var(--ja-ease-snap) infinite; }
.hp-cap span:nth-child(2) { animation-delay: .3s; } .hp-cap span:nth-child(3) { animation-delay: .6s; font-style: italic; }
@media (max-width: 760px) { .hp-reels { grid-template-columns: 1fr; max-width: 360px; } }

/* ---------- Manifiesto BYOK ---------- */
.hp-manifiesto { text-align: center; display: grid; justify-items: center; gap: 2rem; }
.hp-manifiesto .ja-manifiesto { max-width: 18ch; }
.hp-manifiesto .w { opacity: .14; transition: opacity .4s var(--ja-ease); }
.hp-manifiesto .w.on { opacity: 1; }
.hp-ia { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ---------- Requisitos ---------- */
.hp-req { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ja-line); border-bottom: 1px solid var(--ja-line); }
.hp-req > div { padding: 1.6rem 1.4rem; display: grid; gap: .55rem; align-content: start; }
.hp-req > div + div { border-left: 1px solid var(--ja-line); }
.hp-req .ja-num { font-size: 2.2rem; }
.hp-req h3 { margin: 0; font: 800 .98rem/1.15 var(--ja-font-display); text-transform: uppercase; }
.hp-req p { margin: 0; color: var(--ja-muted); font-size: .88rem; font-weight: 300; }
@media (max-width: 900px) { .hp-req { grid-template-columns: 1fr 1fr; } .hp-req > div:nth-child(3) { border-left: 0; } .hp-req > div:nth-child(n+3) { border-top: 1px solid var(--ja-line); } }
@media (max-width: 520px) { .hp-req { grid-template-columns: 1fr; } .hp-req > div + div { border-left: 0; border-top: 1px solid var(--ja-line); } }

/* ---------- Precios ---------- */
.hp-precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; max-width: 1040px; margin-inline: auto; }
.hp-plan { padding: 28px 26px; display: grid; gap: 1rem; align-content: start; }
.hp-plan.ja-panel { transform: translateY(-10px); }
.hp-plan h3 { margin: 0; font: 600 .74rem/1 var(--ja-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ja-silver); }
.hp-precio { display: flex; align-items: baseline; gap: .4rem; }
.hp-precio b { font: 800 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--ja-font-display); letter-spacing: -.02em; }
.hp-precio span { color: var(--ja-muted); font-size: .92rem; }
.hp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--ja-muted); font-size: .9rem; font-weight: 300; }
.hp-plan li { display: flex; gap: .55rem; }
.hp-plan li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: .62em; border-radius: 50%; background: var(--ja-silver); box-shadow: var(--ja-glow); }
.hp-plan .ja-btn { margin-top: .4rem; width: 100%; }
.hp-nota { text-align: center; color: var(--ja-muted); font-size: .86rem; margin-top: 2rem; }
@media (max-width: 900px) { .hp-precios { grid-template-columns: 1fr; max-width: 440px; } .hp-plan.ja-panel { transform: none; } }

/* ---------- FAQ y cierre ---------- */
.hp-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.hp-faq details { border-radius: var(--ja-r); padding: 0; }
.hp-faq summary { list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: '+'; font: 300 1.4rem/1 var(--ja-font-display); color: var(--ja-silver); transition: transform .35s var(--ja-ease); }
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--ja-muted); font-weight: 300; max-width: 66ch; }
.hp-cierre { text-align: center; display: grid; justify-items: center; gap: 1.6rem; padding-top: clamp(4rem, 8vw, 7rem); }
.hp-firma { margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; height: clamp(3.2rem, 7.6vw, 7rem); -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
.hp-firma span { display: block; font: 800 10.4vw/.92 var(--ja-font-display); text-transform: uppercase; text-align: center; letter-spacing: -.02em; opacity: .09; white-space: nowrap; filter: none; }
.hp-pie { border-top: 1px solid var(--ja-line); padding-block: 1.6rem 2.4rem; }
.hp-pie .ja-wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; color: var(--ja-muted); font-size: .84rem; }
.hp-pie nav { display: flex; gap: 1.2rem; }
.hp-pie a { color: var(--ja-muted); text-decoration: none; }
.hp-pie a:hover { color: var(--ja-text); }
.hp-hecho { display: inline-flex; align-items: center; gap: .6rem; }
.hp-hecho .ja-logo { width: 30px; }


/* Movimiento reducido: todo quieto y visible */
@media (prefers-reduced-motion: reduce) {
  .m-sub span, .hp-cap span, .m-grid i, .hp-palabra { opacity: 1 !important; }
  .hp-silencio { opacity: .5; }
  .hp-manifiesto .w { opacity: 1; }
  .hp-transcript p .fuera::after { transform: scaleX(1); }
}

/* ---------- Portada: HyperChat ---------- */
.hp-chat__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; margin-bottom: 18px; }
.hp-chat__conv { display: grid; gap: 10px; align-content: start; }
.hp-burbuja { padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--ja-line-strong); background: rgba(2,4,8,.6); font-size: .95rem; line-height: 1.55; color: var(--ja-text); min-height: 4.9em; }
.hp-respuesta { display: flex; gap: .6rem; align-items: center; color: var(--ja-muted); font-size: .86rem; }
.hp-respuesta .hp-logo { width: 22px; }
.hp-chat__doc { padding: .85rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--ja-line); }
.hp-chat__doc p { margin: 0; font-size: clamp(.95rem, .88rem + .3vw, 1.08rem); line-height: 1.75; color: var(--ja-muted); font-weight: 300; }
.hp-chat__doc .ok { color: var(--ja-text); font-weight: 400; }
.hp-chat__doc .fuera { position: relative; }
.hp-chat__doc .fuera::after { content: ''; position: absolute; left: 0; right: 0; top: 54%; height: 1px; background: #EAF4FF; box-shadow: 0 0 6px rgba(170,200,255,.8); transform-origin: left; transform: scaleX(0); }
.hp-anima .tw { opacity: 0; animation: hp-tw 8s steps(1) infinite; animation-delay: var(--d); }
.hp-anima .hp-respuesta { opacity: 0; animation: hp-resp 8s var(--ja-ease) infinite; }
.hp-anima .fuera.f1 { animation: hp-dim1 8s var(--ja-ease) infinite; }
.hp-anima .fuera.f2 { animation: hp-dim2 8s var(--ja-ease) infinite; }
.hp-anima .fuera.f1::after { animation: hp-tacha1 8s var(--ja-ease) infinite; }
.hp-anima .fuera.f2::after { animation: hp-tacha2 8s var(--ja-ease) infinite; }
@keyframes hp-tw { 0% { opacity: 1; } 91% { opacity: 0; } }
@keyframes hp-resp { 0%, 15% { opacity: 0; transform: translateY(6px); } 19%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes hp-tacha1 { 0%, 18% { transform: scaleX(0); } 23%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hp-tacha2 { 0%, 43% { transform: scaleX(0); } 48%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes hp-dim1 { 0%, 20% { color: var(--ja-text); } 26%, 92% { color: rgba(154,161,171,.45); } 100% { color: var(--ja-text); } }
@keyframes hp-dim2 { 0%, 45% { color: var(--ja-text); } 51%, 92% { color: rgba(154,161,171,.45); } 100% { color: var(--ja-text); } }
@media (max-width: 760px) { .hp-chat__grid { grid-template-columns: 1fr; } }

/* ---------- HyperCaptions ---------- */
.hp-split--inv { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .hp-split--inv { grid-template-columns: 1fr; } }
.hp-reel-solo { justify-self: center; width: min(320px, 100%); display: grid; gap: .9rem; }
.hp-reel-solo .ja-tarjeta { aspect-ratio: 9 / 16; display: grid; align-content: end; padding: 18px 16px 64px; }
.hp-estilos { position: relative; z-index: 1; display: grid; }
.hp-estilos .hp-cap { grid-area: 1 / 1; opacity: 0; animation: hp-estilo 4.5s var(--ja-ease) infinite; }
.hp-estilos .hp-cap span { animation: none; opacity: 1; }
.hp-estilos .e1 { font-weight: 800; }
.hp-estilos .e2 { animation-delay: 1.5s; background: none; }
.hp-estilos .e2 span:nth-child(2) { background: rgba(234,240,255,.92); color: #020408; border-radius: 4px; padding: 0 .2em; }
.hp-estilos .e3 { animation-delay: 3s; font-style: italic; }
.hp-estilos .e3 span:nth-child(3) { background: var(--ja-chrome) 50% 50% / 100% 150%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes hp-estilo { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; } }
.hp-estilo-nombres { display: flex; justify-content: center; gap: .5rem; }
.hp-estilo-nombres span { font-size: .74rem; padding: .28rem .6rem; border-radius: 7px; border: 1px solid var(--ja-line-strong); color: var(--ja-muted); animation: hp-nombre 4.5s var(--ja-ease) infinite; }
.hp-estilo-nombres .n2 { animation-delay: 1.5s; } .hp-estilo-nombres .n3 { animation-delay: 3s; }
@keyframes hp-nombre { 0%, 33% { color: var(--ja-text); border-color: rgba(234,240,255,.45); } 36%, 100% { color: var(--ja-muted); border-color: rgba(200,206,214,.24); } }

/* ---------- HyperTools: barra compacta ---------- */
.hp-barra-tools { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; padding: 14px; max-width: 1040px; margin-inline: auto; }
.hp-boton { position: relative; display: grid; justify-items: center; gap: .5rem; padding: 14px 6px 12px; border-radius: 12px; border: 1px solid var(--ja-line); background: linear-gradient(180deg, rgba(28,30,35,.7), rgba(12,13,16,.7)); box-shadow: var(--ja-bevel); overflow: hidden; }
.hp-boton svg { width: 26px; height: 26px; fill: var(--ja-silver); }
.hp-boton em { font-style: normal; font-size: .66rem; color: var(--ja-muted); text-align: center; line-height: 1.2; }
.hp-boton::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 50% 0%, rgba(220,226,234,.16), transparent 60%); opacity: 0; animation: hp-recorre 3.5s var(--ja-ease) infinite; animation-delay: calc(var(--k) * .35s); }
@keyframes hp-recorre { 0%, 100% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: 0; } }
@media (max-width: 900px) { .hp-barra-tools { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 480px) { .hp-barra-tools { grid-template-columns: repeat(3, 1fr); } }

/* ---------- HyperGrid ---------- */
.hp-rejilla { position: relative; aspect-ratio: 16 / 10; padding: 14px; }
.hp-celdas { position: absolute; inset: 14px; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.hp-celdas i { border-radius: 10px; background:
  radial-gradient(80% 70% at 40% 35%, rgba(150,158,170,.28), transparent 70%), linear-gradient(160deg, #2a2d33, #121419); opacity: 0; }
.hp-celdas .c1 { grid-row: span 2; }
.is-in .hp-celdas i { animation: hp-celda 4.5s var(--ja-ease-expo) infinite; }
.is-in .hp-celdas .c2 { animation-delay: .15s; } .is-in .hp-celdas .c3 { animation-delay: .3s; } .is-in .hp-celdas .c4 { animation-delay: .45s; }
@keyframes hp-celda { 0% { opacity: 0; transform: scale(.9) translateY(10px); } 14%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.96); } }
.hp-celdas .c4 { display: none; }
.hp-div { position: absolute; background: #EAF4FF; box-shadow: 0 0 8px rgba(170,200,255,.8); opacity: 0; }
.hp-div.v { top: 14px; bottom: 14px; left: calc(14px + (100% - 28px - 6px) * 1.3 / 2.3 + 2px); width: 1px; transform-origin: top; }
.hp-div.h { left: calc(14px + (100% - 28px - 6px) * 1.3 / 2.3 + 6px); right: 14px; top: 50%; height: 1px; transform-origin: left; }
.is-in .hp-div { animation: hp-divisor 4.5s var(--ja-ease) infinite; }
.is-in .hp-div.h { animation-delay: .2s; }
@keyframes hp-divisor { 0%, 18% { opacity: 0; transform: scale(0); } 30%, 84% { opacity: .8; transform: scale(1); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tw, .hp-respuesta, .hp-celdas i, .hp-estilos .e1 { opacity: 1 !important; }
  .hp-chat__doc .fuera::after { transform: scaleX(1); }
  .hp-div { opacity: .8; }
}

/* ---------- Accesibilidad: saltar al contenido ---------- */
.hp-saltar { position: absolute; left: 12px; top: -60px; z-index: 80; padding: .6rem 1rem; border-radius: 10px; background: var(--ja-card); color: var(--ja-text); border: 1px solid var(--ja-line-strong); text-decoration: none; }
.hp-saltar:focus { top: 12px; }

/* ---------- Lista de espera ---------- */
.hp-espera { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 4vw, 2.6rem); max-width: 1040px; margin: var(--ja-sy) auto 0; }
.hp-espera__t { margin: 0 0 .8rem; font: 800 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem)/1.05 var(--ja-font-display); text-transform: uppercase; }
.hp-form { display: grid; gap: .55rem; }
.hp-form label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ja-silver); }
.hp-form__fila { display: flex; gap: .6rem; }
.hp-form input { flex: 1; min-width: 0; padding: .78rem 1rem; border-radius: var(--ja-r-btn); border: 1px solid var(--ja-line-strong); background: #020408; color: var(--ja-text); font: 400 1rem var(--ja-font-body); }
.hp-form input:focus-visible { outline: 2px solid var(--ja-silver); outline-offset: 2px; }
.hp-form input[aria-invalid="true"] { border-color: #e6a0ae; }
.hp-form__ayuda { margin: 0; font-size: .82rem; color: var(--ja-muted); }
.hp-form__ayuda a { color: var(--ja-text); }
.hp-form__estado { margin: 0; min-height: 1.3em; font-size: .88rem; color: var(--ja-text); }
.hp-form__estado.error { color: #e6a0ae; }
@media (max-width: 760px) { .hp-espera { grid-template-columns: 1fr; } .hp-form__fila { flex-direction: column; } }

/* ---------- Pie: marcas registradas ---------- */
.hp-marcas p { margin: 1rem 0 0; max-width: 90ch; color: var(--ja-silver-dim); font-size: .74rem; line-height: 1.6; font-weight: 300; }

/* ---------- Páginas legales ---------- */
.hp-legal { padding: 8rem 0 5rem; }
.hp-legal .ja-wrap { max-width: 760px; }
.hp-legal h1 { margin: 0 0 .6rem; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1 var(--ja-font-display); text-transform: uppercase; }
.hp-legal .fecha { color: var(--ja-muted); font-size: .9rem; margin: 0 0 2.4rem; }
.hp-legal h2 { margin: 2.2rem 0 .6rem; font: 800 1.05rem/1.2 var(--ja-font-display); text-transform: uppercase; letter-spacing: .01em; }
.hp-legal p, .hp-legal li { color: var(--ja-muted); font-weight: 300; line-height: 1.7; }
.hp-legal strong { color: var(--ja-text); font-weight: 600; }
.hp-legal a { color: var(--ja-text); }
.hp-legal ul { padding-left: 1.2rem; }

/* Logo en grande en el cierre y pequeño en el pie */
.hp-logo--grande { width: clamp(72px, 9vw, 104px); filter: drop-shadow(0 -1px 0 rgba(255,255,255,.35)) drop-shadow(.6px 1.4px 0 #858C95) drop-shadow(.6px 1.4px 0 #3E4248) drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.hp-logo--pie { width: 18px; }

/* Tarjetas de herramienta enlazadas a su página */
a.hp-tool { text-decoration: none; color: inherit; }
a.hp-tool .tp-mas { margin-top: .2rem; font-size: .76rem; color: var(--ja-silver-dim); transition: color .25s var(--ja-ease); }
a.hp-tool:hover .tp-mas, a.hp-tool:focus-visible .tp-mas { color: var(--ja-text); }
a.hp-tool:focus-visible { outline: 2px solid var(--ja-silver); outline-offset: 3px; }

/* ---------- Menú «Tools»: las 8 páginas ---------- */
.hp-menu { position: relative; }
.hp-menu__btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-radius: var(--ja-r-chip); color: var(--ja-muted); font-size: .88rem; font-weight: 500; transition: color .25s var(--ja-ease), background .25s var(--ja-ease); }
.hp-menu__btn svg { transition: transform .3s var(--ja-ease); }
.hp-menu__btn:hover, .hp-menu__btn[aria-expanded="true"] { color: var(--ja-text); background: rgba(255,255,255,.04); }
.hp-menu__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hp-menu__btn:focus-visible { outline: 2px solid var(--ja-silver); outline-offset: 2px; }
.hp-menu__panel { position: absolute; top: calc(100% + 12px); left: 50%; width: min(640px, calc(100vw - 2rem)); transform: translate(-50%, -6px); opacity: 0; visibility: hidden;
  padding: 10px; border-radius: var(--ja-r-lg); background: rgba(10,12,16,.96); border: 1px solid var(--ja-line-strong); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity .25s var(--ja-ease), transform .3s var(--ja-ease), visibility 0s .3s; z-index: 70; }
.hp-menu.abierto .hp-menu__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.hp-menu__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.hp-menu__panel a { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 10px; text-decoration: none; color: var(--ja-text); transition: background .2s var(--ja-ease); }
.hp-menu__panel a:hover, .hp-menu__panel a:focus-visible, .hp-menu__panel a[aria-current="page"] { background: rgba(255,255,255,.05); outline: none; }
.hp-menu__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--ja-line-strong); background: linear-gradient(180deg, #1b1e23, #0d0e11); box-shadow: var(--ja-bevel); }
.hp-menu__ico svg { width: 18px; height: 18px; fill: var(--ja-silver); }
.hp-menu__panel b { display: block; font: 800 .8rem/1.2 var(--ja-font-display); text-transform: uppercase; letter-spacing: .01em; }
.hp-menu__panel b i { font-style: italic; font-weight: 600; color: var(--ja-silver); }
.hp-menu__panel em { display: block; margin-top: .2rem; font-style: normal; font-size: .78rem; line-height: 1.35; color: var(--ja-muted); }
.hp-menu__panel .hp-menu__todas { display: block; margin-top: 6px; padding: .7rem .8rem; border-top: 1px solid var(--ja-line); border-radius: 0 0 10px 10px; font-size: .8rem; color: var(--ja-silver-dim); }
@media (max-width: 860px) {
  .hp-nav { display: flex; }
  .hp-nav > a { display: none; }
  .hp-menu { position: static; }
  .hp-menu__panel { position: fixed; top: 64px; left: 50%; }
  .hp-menu__rejilla { grid-template-columns: 1fr; max-height: calc(100vh - 140px); overflow: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HyperPowers · web v2 · parches sobre hp.css (se añaden al final de la copia de web/assets/css/hp.css)
   1 Utilidades · 2 Barra (idioma, tema, CTA) · 3 Secciones de la portada · 4 Tema Papel (colores literales de arriba) · 5 Pantallas pequeñas
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · Utilidades ---------- */
.ui { font-weight: 500; color: var(--ja-text); }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.hp-saltar { z-index: 90; }
.ja-text a, .hp-fuente a, .hp-faq a, .hp-nota a { color: var(--ja-text); text-underline-offset: 3px; }
.ja-lead strong, .tp-prob__txt strong, .hp-noche__txt strong { color: var(--ja-text); font-weight: 500; }

/* ---------- 2 · Barra: idioma, tema, CTA ---------- */
.hp-acciones { display: flex; align-items: center; gap: .6rem; }
.hp-idioma { display: flex; border: 1px solid var(--ja-line-strong); border-radius: var(--ja-r-chip); overflow: hidden; }
.hp-idioma a { padding: .42rem .62rem; font-size: .76rem; font-weight: 600; letter-spacing: .08em; color: var(--ja-muted); text-decoration: none; line-height: 1.2; transition: color .2s var(--ja-ease), background .2s var(--ja-ease); }
.hp-idioma a:hover { color: var(--ja-text); }
.hp-idioma a[aria-current] { color: var(--ja-text); background: rgba(255, 255, 255, .08); }
.hp-tema { appearance: none; cursor: pointer; padding: .42rem .7rem; border-radius: var(--ja-r-chip); border: 1px solid var(--ja-line-strong); background: transparent; color: var(--ja-muted); font: 600 .76rem/1.2 var(--ja-font-body); letter-spacing: .04em; transition: color .2s var(--ja-ease), border-color .2s var(--ja-ease); }
.hp-tema:hover { color: var(--ja-text); border-color: var(--ja-silver-dim); }
.hp-cta { padding: .55rem 1rem; font-size: .84rem; }
.hp-menu__panel b small { margin-left: .4rem; padding: .08rem .35rem; border: 1px solid var(--ja-line-strong); border-radius: 5px; font: 600 .56rem/1.4 var(--ja-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ja-silver-dim); vertical-align: .12em; }
.hp-menu__extra { display: none; }
.hp-menu__panel a[aria-current="page"] { background: rgba(255, 255, 255, .05); }

/* ---------- 3 · Portada ---------- */
.hp-pie nav { flex-wrap: wrap; }
.hp-hero .ja-lead { max-width: 62ch; }
.hp-hero .ja-lead strong { color: var(--ja-text); font-weight: 500; }
.hp-compat { margin: 0; font-size: .82rem; color: var(--ja-silver-dim); max-width: 60ch; }
.hp-hero__escena { max-width: 780px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; position: relative; z-index: 1; }

.hp-noche { max-width: 900px; margin-inline: auto; display: grid; gap: 1.4rem; }
.hp-noche__q { margin: 0; font: 700 clamp(1.45rem, 1rem + 1.9vw, 2.35rem)/1.3 var(--ja-font-display); color: var(--ja-text); text-wrap: balance; }
.hp-noche__q em { font-style: italic; font-weight: 600; }
.hp-noche__txt { display: grid; gap: 1rem; max-width: 62ch; }
.hp-noche__txt .ja-text { margin: 0; }

.hp-prom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-prom__c { padding: 24px 22px 26px; display: grid; gap: .6rem; align-content: start; }
.hp-prom__c .ja-num { font-size: 2rem; }
.hp-prom__c h3 { margin: 0; font: 800 1.02rem/1.15 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); }
.hp-prom__c p { margin: 0; color: var(--ja-muted); font-size: .94rem; line-height: 1.6; font-weight: 300; }

.hp-herr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-herr .hp-tool { display: flex; flex-direction: column; gap: .6rem; min-height: 0; padding: 20px 20px 18px; text-decoration: none; color: inherit; }
.hp-tool__cab { display: flex; align-items: center; gap: .7rem; }
.hp-tool__ico svg { width: 26px; height: 26px; display: block; fill: var(--ja-silver); }
.hp-tool__cab .hp-beta { margin-left: auto; }
.hp-herr .hp-tool h3 { margin-top: .3rem; }
.hp-herr .hp-tool p { font-size: .9rem; line-height: 1.55; }
.hp-herr .tp-mas { margin-top: auto; padding-top: .5rem; }

.hp-junto__escena { max-width: 860px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.hp-pasos8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-paso8 { padding: 18px 20px 16px; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .3rem 1rem; align-items: start; }
.hp-paso8 .ja-num { font-size: 1.7rem; grid-row: span 2; }
.hp-paso8 p { margin: 0; color: var(--ja-muted); font-size: .92rem; line-height: 1.6; font-weight: 300; }
.hp-paso8 p b { color: var(--ja-text); font-weight: 600; }
.hp-paso8__a { grid-column: 2; justify-self: start; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--ja-text); text-decoration: none; }
.hp-paso8__a i { font-style: italic; font-weight: 600; }
.hp-paso8__a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-idea { max-width: 62ch; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: center; color: var(--ja-muted); font-weight: 300; }

.hp-ia2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.hp-ia2__c { padding: 28px 26px; display: grid; gap: .9rem; align-content: start; }
.hp-ia2__c h3 { margin: 0; font: 800 1.2rem/1.15 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); }
.hp-ia2__c p { margin: 0; color: var(--ja-muted); font-weight: 300; }
.hp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; color: var(--ja-muted); font-size: .94rem; font-weight: 300; }
.hp-lista li { display: flex; gap: .6rem; }
.hp-lista li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: .66em; border-radius: 50%; background: var(--ja-silver); }
.hp-lista b { color: var(--ja-text); font-weight: 600; }
.hp-fuente { font-size: .8rem !important; color: var(--ja-silver-dim) !important; line-height: 1.55; }
.hp-sub { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.1rem; font: 800 1.15rem/1.2 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); }
.hp-cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-cmd, .hp-ia2__c, .hp-usa__c, .hp-prom__c, .hp-paso8 { min-width: 0; }
.hp-cmd { padding: 18px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-content: start; }
.hp-cmd__f { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem .5rem .85rem; border: 1px solid var(--ja-line-strong); border-radius: 10px; background: rgba(2, 4, 8, .6); }
.hp-cmd__f code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ja-text); }
.hp-copiar { flex: none; appearance: none; cursor: pointer; padding: .3rem .6rem; border-radius: 7px; border: 1px solid var(--ja-line-strong); background: transparent; color: var(--ja-muted); font: 600 .72rem/1.2 var(--ja-font-body); transition: color .2s var(--ja-ease), border-color .2s var(--ja-ease); }
.hp-copiar:hover { color: var(--ja-text); border-color: var(--ja-silver-dim); }
.hp-cmd__nota { margin: 0; font-size: .82rem; color: var(--ja-silver-dim); }
.hp-nota--izq { text-align: left; max-width: 80ch; margin-top: 1rem; }
.hp-usa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.hp-usa__c { padding: 22px 22px 24px; display: grid; gap: .9rem; align-content: start; }
.hp-usa__c h3 { margin: 0; font: 800 .98rem/1.2 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); }
.hp-priv { margin-top: 14px; padding: 20px 22px 22px; display: grid; gap: .5rem; }
.hp-priv h3 { margin: 0; font: 800 .98rem/1.2 var(--ja-font-display); text-transform: uppercase; color: var(--ja-text); }
.hp-priv p { margin: 0; color: var(--ja-muted); font-weight: 300; max-width: 70ch; }
.hp-req p { font-size: .9rem; line-height: 1.55; }
.hp-plan ul { font-size: .92rem; }
.hp-plan .hp-precio span { font-size: .82rem; }
.hp-nota a { color: var(--ja-text); }
.hp-cierre__p { max-width: 52ch; }
.hp-logo--grande { width: clamp(72px, 9vw, 104px); }

/* ---------- 4 · Tema Papel: los colores literales de hp.css que no usan variables ---------- */
[data-tema="papel"] { --ja-silver-dim: #565D67; }
[data-tema="papel"] .hp-fondo { background: var(--ja-bg); }
[data-tema="papel"] #hp-cielo, [data-tema="papel"] .hp-grano, [data-tema="papel"] .ja-haz { display: none; }
[data-tema="papel"] .ja-vidrio { background: rgba(244, 245, 247, .88); border-color: var(--ja-line); }
[data-tema="papel"] .hp-nav a:hover, [data-tema="papel"] .hp-menu__btn:hover, [data-tema="papel"] .hp-menu__btn[aria-expanded="true"] { background: rgba(13, 14, 17, .06); }
[data-tema="papel"] .hp-menu__panel { background: rgba(255, 255, 255, .97); border-color: var(--ja-line-strong); box-shadow: 0 24px 50px -24px rgba(13, 14, 17, .28); }
[data-tema="papel"] .hp-menu__panel a:hover, [data-tema="papel"] .hp-menu__panel a:focus-visible, [data-tema="papel"] .hp-menu__panel a[aria-current="page"] { background: rgba(13, 14, 17, .05); }
[data-tema="papel"] .hp-menu__ico { background: var(--ja-bg); box-shadow: none; }
[data-tema="papel"] .hp-menu__ico svg, [data-tema="papel"] .hp-tool__ico svg { fill: var(--ja-text); }
[data-tema="papel"] .hp-idioma a[aria-current] { background: rgba(13, 14, 17, .08); }
[data-tema="papel"] .ja-chip { background: var(--ja-card); border-color: var(--ja-line-strong); }
[data-tema="papel"] .ja-chip--clave { border-color: var(--ja-silver); color: var(--ja-text); }
[data-tema="papel"] .ja-btn--principal { background: #0D0E11; border-color: #0D0E11; color: #FFFFFF; }
[data-tema="papel"] .ja-btn--principal::after { display: none; }
[data-tema="papel"] .hp-logo--grande { filter: none; }
[data-tema="papel"] .hp-logo { filter: none; }
[data-tema="papel"] .ja-horizonte { background: var(--ja-line); }
[data-tema="papel"] .ja-horizonte::after { display: none; }
[data-tema="papel"] .hp-firma span { opacity: .07; }
[data-tema="papel"] .hp-cmd__f { background: var(--ja-bg); }
[data-tema="papel"] .hp-menu__panel b small, [data-tema="papel"] .hp-menu__panel em { color: var(--ja-muted); }
[data-tema="papel"] .hp-plan.ja-panel { border-color: var(--ja-text); }
[data-tema="papel"] .tp-saber dt::before, [data-tema="papel"] .hp-lista li::before, [data-tema="papel"] .hp-plan li::before { box-shadow: none; }
[data-tema="papel"] .tp-saber dt.beta::before { background: #9A6A00; }
[data-tema="papel"] .hp-faq details[open] { border-color: var(--ja-line-strong); }
[data-tema="papel"] .ja-page ::selection, [data-tema="papel"] ::selection { background: rgba(13, 14, 17, .14); color: #0D0E11; }

/* ---------- 5 · Pantallas pequeñas ---------- */
@media (max-width: 1100px) { .hp-cta { display: none; } }
@media (max-width: 980px) {
  .hp-prom, .hp-herr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-ia2, .hp-cmds, .hp-usa, .hp-pasos8 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hp-menu__extra { display: grid; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ja-line); }
  .hp-menu__panel .hp-menu__extra a { padding: .6rem .8rem; font-size: .9rem; font-weight: 500; }
}
@media (max-width: 600px) {
  .hp-prom, .hp-herr { grid-template-columns: minmax(0, 1fr); }
  .hp-barra .ja-wrap { gap: .4rem; }
  .hp-acciones { gap: .35rem; }
  .hp-menu__btn { padding: .45rem .4rem; font-size: .82rem; }
  .hp-idioma a { padding: .4rem .5rem; font-size: .7rem; }
  .hp-tema { padding: .4rem .55rem; font-size: .7rem; }
}
@media (max-width: 480px) {
  .hp-marca > span:last-child { display: none; }
  .hp-hero .ja-display { font-size: clamp(2rem, 1rem + 8vw, 3rem); }
}

.hp-borrador { margin: 0 0 1.4rem; }
.hp-legal .hp-resumen { padding: 1rem 1.2rem; border: 1px solid var(--ja-line-strong); border-radius: var(--ja-r); background: var(--ja-card); }