/* ════════════════════════════════════════════════════════════════
   ESTILO JULIAN AVILA — hoja del estilo (kit)
   La guía completa está en la nota «Estilo Julian Avila» de Brain.
   La fuente de la verdad es la web publicada, estebanavila.com.

   Uso: enlaza esta hoja y pon la clase `ja-page` en <body>.
   Todo va con el prefijo `ja-` para no chocar con otras hojas.
   Para documentos claros (imprimir): <body class="ja-page" data-tema="papel">.

    1 Fuentes            5 Materiales (cromo, satén, plata)   9 Superficies (tarjeta, panel, metal, vidrio)
    2 Propiedades        6 Rayas y horizonte                 10 Fondo espacial y luz
    3 Tokens             7 Etiquetas y chips                 11 Movimiento
    4 Base y tipografía  8 Botones                           12 Variante papel y movimiento reducido
   ════════════════════════════════════════════════════════════════ */

/* ---------- 1. Fuentes (OFL; los archivos van en fuentes/, junto a esta hoja) ---------- */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-italic-latin.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-italic-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Propiedades animables (por pieza, nunca heredadas: así va a 60 fps) ---------- */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 210deg; }
@property --gl   { syntax: '<percentage>'; inherits: false; initial-value: 42%; }
@property --env  { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --sw   { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

/* ---------- 3. Tokens ---------- */
:root {
  /* Noche (pantalla) */
  --ja-bg: #020408;
  --ja-card: #0D0E11;
  --ja-metal-top: #17191D;
  --ja-metal-bottom: #0B0C0F;
  --ja-text: #EAF0FF;
  --ja-muted: #9AA1AB;
  --ja-silver: #DADFE6;
  --ja-silver-dim: #A7AEB8;
  --ja-line: rgba(200, 206, 214, .13);
  --ja-line-strong: rgba(200, 206, 214, .24);
  --ja-glint-blue: rgba(170, 200, 255, .8);      /* el único azul: destellos finos */

  /* Materiales */
  --ja-chrome: linear-gradient(165deg, #FFFFFF 0%, #F1F3F6 12%, #CDD2D8 30%, #8C939C 41%, #2A2D33 47%, #0F1114 50%, #3B3F46 53%, #9EA5AD 60%, #E6E9ED 72%, #FFFFFF 82%, #B7BDC4 92%, #E9ECEF 100%);
  --ja-satin: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 48%, #B3BBC5 100%);
  --ja-silver-grad: linear-gradient(115deg, #FFFFFF, #CDD2D9 45%, #8E969F);
  --ja-graphite: linear-gradient(165deg, #1B1E23 0%, #3E4248 40%, #0D0E11 50%, #5D636B 58%, #1B1E23 100%);
  --ja-glint: linear-gradient(115deg, transparent 41%, rgba(255, 255, 255, .9) 48.5%, rgba(170, 200, 255, .8) 50%, rgba(255, 255, 255, .9) 51.5%, transparent 59%);
  --ja-sweep: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .03) 55%, transparent 62%);
  --ja-glass-edge: linear-gradient(155deg, rgba(255, 255, 255, .34), rgba(160, 168, 178, .10) 42%, rgba(255, 255, 255, .04) 70%, rgba(214, 220, 227, .18));
  --ja-bevel: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .55);
  --ja-glow: 0 0 18px rgba(220, 226, 234, .28);
  --ja-shadow-float: 0 50px 90px -46px rgba(0, 0, 0, .95);
  --ja-extrude: drop-shadow(0 -.012em 0 rgba(255, 255, 255, .38))
                drop-shadow(.005em .012em 0 #B3B9C1) drop-shadow(.005em .012em 0 #858C95)
                drop-shadow(.005em .012em 0 #5D636B) drop-shadow(.005em .012em 0 #3E4248)
                drop-shadow(.005em .012em 0 #26292E) drop-shadow(0 .09em .1em rgba(0, 0, 0, .6));
  --ja-extrude-soft: drop-shadow(.004em .012em 0 #8E959E) drop-shadow(.004em .012em 0 #4F545B) drop-shadow(0 .07em .09em rgba(0, 0, 0, .55));

  /* Tipografía */
  --ja-font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ja-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Formas y espacio */
  --ja-r-chip: 10px; --ja-r-btn: 12px; --ja-r: 14px; --ja-r-lg: 18px;
  --ja-wrap: 1216px;
  --ja-sy: clamp(6rem, 11vw, 10rem);

  /* Movimiento */
  --ja-ease: cubic-bezier(.22, 1, .36, 1);
  --ja-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ja-ease-snap: cubic-bezier(.34, 1.4, .64, 1);
  --ja-ease-move: cubic-bezier(.65, 0, .35, 1);
  --ja-stagger: 70ms;
}

/* ---------- 4. Base y tipografía ---------- */
.ja-page {
  margin: 0; background: var(--ja-bg); color: var(--ja-text);
  font-family: var(--ja-font-body); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.ja-page *, .ja-page *::before, .ja-page *::after { box-sizing: border-box; }
.ja-page :focus-visible { outline: 2px solid var(--ja-silver); outline-offset: 3px; }
.ja-page ::selection { background: rgba(200, 206, 214, .35); color: #fff; }
.ja-wrap { width: min(100% - 2.5rem, var(--ja-wrap)); margin-inline: auto; }

.ja-display, .ja-h2, .ja-h3 { font-family: var(--ja-font-display); font-weight: 800; text-transform: uppercase; margin: 0; }
.ja-display { font-size: clamp(3rem, 1rem + 6.4vw, 7.4rem); line-height: .9; letter-spacing: -.02em; }
.ja-h2 { font-size: clamp(2rem, 1.1rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -.005em; }
.ja-h3 { font-size: 1.15rem; line-height: 1.15; letter-spacing: 0; }
.ja-manifiesto { font-family: var(--ja-font-display); font-weight: 800; font-size: clamp(1.9rem, .9rem + 3vw, 3.7rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.ja-lead { font-weight: 300; font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); color: var(--ja-muted); max-width: 46ch; margin: 0; }
.ja-text { font-weight: 300; color: var(--ja-muted); max-width: 60ch; }
.ja-text strong, .ja-text b { color: var(--ja-text); font-weight: 600; }
.ja-label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ja-silver); }

/* ---------- 5. Materiales ---------- */
/* Satén: titulares */
.ja-satin { background: var(--ja-satin); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--ja-extrude-soft); }
/* Plata: números y detalles */
.ja-plata { background: var(--ja-silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Cromo 3D: la palabra que manda (1–2 por pieza). Su reflejo se mueve con el scroll (§11) */
.ja-cromo {
  display: inline-block;
  background: var(--ja-glint) var(--gl) 0 / 260% 100% no-repeat, var(--ja-chrome) 50% var(--env) / 100% 150% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--ja-extrude);
}
/* Cursiva con aire (la cursiva sobresale de su caja) */
.ja-it { font-style: italic; padding-right: .12em; margin-right: -.12em; }
/* Números grandes en cursiva fina */
.ja-num { font-family: var(--ja-font-display); font-style: italic; font-weight: 300; letter-spacing: -.02em; line-height: 1; padding-right: .14em; margin-right: -.14em;
  background: var(--ja-silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 6. Rayas y horizonte ---------- */
.ja-raya { width: 54px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5E656E, #FFFFFF 50%, #5E656E); box-shadow: 0 0 14px rgba(220, 226, 234, .35); }
.ja-horizonte { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(120, 175, 255, .12) 18%, rgba(150, 205, 255, .75) 40%, #EAF4FF 50%, rgba(150, 205, 255, .75) 60%, rgba(120, 175, 255, .12) 82%, transparent 100%); }
.ja-horizonte::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 7px; background: radial-gradient(ellipse 42% 100% at 50% 50%, rgba(205, 215, 235, .42), transparent 72%); }

/* ---------- 7. Etiquetas y chips ---------- */
.ja-filo, .ja-etiqueta, .ja-btn, .ja-tarjeta, .ja-panel, .ja-metal {
  --metal-ring: conic-gradient(from var(--ring), rgba(255, 255, 255, .62), rgba(128, 136, 146, .2) 16%, rgba(255, 255, 255, .07) 33%, rgba(214, 220, 227, .42) 52%, rgba(86, 92, 100, .16) 72%, rgba(255, 255, 255, .62));
  --metal-ring-strong: conic-gradient(from var(--ring), #F5F7FA, #7C848D 16%, #2B2F35 33%, #CDD3DA 52%, #545B63 72%, #F5F7FA);
}
.ja-etiqueta {
  display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem .38rem .7rem;
  border: 1px solid transparent; border-radius: var(--ja-r-chip);
  background: linear-gradient(rgba(12, 13, 16, .7), rgba(12, 13, 16, .7)) padding-box, var(--metal-ring) border-box;
  font-size: .82rem; font-weight: 500; color: var(--ja-text);
}
.ja-etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ja-silver); box-shadow: var(--ja-glow); }
.ja-chip { display: inline-block; padding: .28rem .6rem; border-radius: 7px; border: 1px solid var(--ja-line-strong); background: rgba(14, 15, 18, .6); font-size: .72rem; font-weight: 500; color: var(--ja-muted); white-space: nowrap; }
.ja-chip--clave { color: var(--ja-text); border-color: rgba(234, 240, 255, .4); }

/* ---------- 8. Botones: rectángulo de 12 px, vidrio grafito y filo de metal ---------- */
.ja-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.35rem; border: 1px solid transparent; border-radius: var(--ja-r-btn);
  font: 600 .92rem/1.2 var(--ja-font-body); letter-spacing: .01em; color: var(--ja-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--ja-sweep) var(--sw) 0 / 280% 100% no-repeat padding-box, linear-gradient(180deg, rgba(20, 22, 26, .84), rgba(10, 11, 14, .84)) padding-box, var(--metal-ring) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
  transition: transform .25s var(--ja-ease), box-shadow .25s var(--ja-ease);
}
.ja-btn--principal {
  color: #fff;
  background: var(--ja-sweep) var(--sw) 0 / 280% 100% no-repeat padding-box, linear-gradient(180deg, rgba(74, 80, 89, .95), rgba(38, 41, 47, .95) 48%, rgba(20, 22, 26, .96)) padding-box, var(--metal-ring-strong) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 3px rgba(0, 0, 0, .5), 0 12px 30px -16px rgba(0, 0, 0, .95);
}
.ja-btn::after {   /* destello que cruza al pasar el ratón */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .26) 48%, rgba(170, 200, 255, .16) 51%, transparent 62%) 140% 0 / 240% 100% no-repeat;
  transition: background-position .9s var(--ja-ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .ja-btn:hover { transform: translateY(-2px); background-image: var(--ja-sweep), linear-gradient(180deg, rgba(28, 30, 35, .88), rgba(16, 17, 21, .88)), var(--metal-ring-strong); }
  .ja-btn--principal:hover { background-image: var(--ja-sweep), linear-gradient(180deg, rgba(86, 92, 102, .96), rgba(44, 47, 54, .96) 48%, rgba(24, 26, 31, .97)), var(--metal-ring-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .5), 0 16px 34px -16px rgba(0, 0, 0, .95), 0 0 22px rgba(220, 226, 234, .16); }
  .ja-btn:hover::after { background-position: -40% 0; }
}
.ja-btn:active { transform: scale(.97); transition-duration: .1s; }

/* ---------- 9. Superficies ---------- */
.ja-filo { border: 1px solid transparent; background: linear-gradient(var(--ja-card), var(--ja-card)) padding-box, var(--metal-ring) border-box; }
.ja-tarjeta {
  position: relative; border: 1px solid transparent; border-radius: var(--ja-r); overflow: clip;
  background: linear-gradient(var(--ja-card), var(--ja-card)) padding-box, var(--metal-ring) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .45s var(--ja-ease), box-shadow .45s var(--ja-ease);
}
@media (hover: hover) and (pointer: fine) { .ja-tarjeta:hover { transform: translateY(-4px); background: linear-gradient(var(--ja-card), var(--ja-card)) padding-box, var(--metal-ring-strong) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 50px -28px rgba(0, 0, 0, .95); } }
.ja-panel {
  position: relative; border: 1px solid transparent; border-radius: var(--ja-r-lg);
  background: var(--ja-sweep) var(--sw) 0 / 280% 100% no-repeat padding-box, linear-gradient(rgba(10, 11, 14, .88), rgba(10, 11, 14, .88)) padding-box, var(--metal-ring-strong) border-box;
  box-shadow: var(--ja-bevel), var(--ja-shadow-float), 0 0 80px -40px rgba(220, 226, 234, .14);
}
.ja-metal {   /* metal cepillado con luz de esquina */
  position: relative; border: 1px solid transparent; border-radius: var(--ja-r); overflow: clip;
  background:
    var(--ja-sweep) var(--sw) 0 / 280% 100% no-repeat padding-box,
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .075), transparent 50%) padding-box,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px) padding-box,
    linear-gradient(180deg, var(--ja-metal-top), var(--ja-metal-bottom)) padding-box,
    var(--metal-ring) border-box;
  box-shadow: var(--ja-bevel), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.ja-vidrio { background: rgba(2, 4, 8, .72); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); border: 1px solid var(--ja-line); }

/* Logo VA en cromo: el dibujo va incrustado (así funciona también abriendo el archivo sin servidor) */
.ja-logo { display: inline-block; flex: none; width: 48px; aspect-ratio: 2 / 1; filter: drop-shadow(.5px 1px 0 #8E959E) drop-shadow(.5px 1px 0 #3E4248) drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.ja-logo > span {
  display: block; width: 100%; height: 100%;
  --ja-logo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 85'%3E%3Cpath fill-rule='evenodd' d='M27,0 49,54 72,0 96,0 96,29 109,0 133,0 170,84 72,85 72,58 60,84 36,84 1,0ZM120,25 105,65 136,65Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--ja-logo-svg) center / contain no-repeat; mask: var(--ja-logo-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;
}
[data-tema="papel"] .ja-logo { filter: none; }
[data-tema="papel"] .ja-logo > span { background: #0D0E11; }

/* ---------- 10. Fondo espacial y luz ---------- */
.ja-espacio {
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(220, 230, 255, .7), transparent),
    radial-gradient(1px 1px at 34% 72%, rgba(220, 230, 255, .5), transparent),
    radial-gradient(1.4px 1.4px at 66% 12%, rgba(220, 230, 255, .6), transparent),
    radial-gradient(1px 1px at 78% 64%, rgba(220, 230, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 92% 38%, rgba(220, 230, 255, .55), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(220, 230, 255, .4), transparent),
    radial-gradient(ellipse 46% 36% at 80% 10%, rgba(28, 72, 180, .12), transparent 60%),
    radial-gradient(ellipse 42% 32% at 8% 60%, rgba(10, 40, 150, .09), transparent 64%),
    radial-gradient(ellipse 96% 88% at 50% 40%, transparent 40%, rgba(1, 2, 6, .95) 100%),
    var(--ja-bg);
}
.ja-haz {   /* haz de luz cenital: posiciónalo con absolute sobre la pieza principal */
  pointer-events: none; background: linear-gradient(to bottom, rgba(230, 234, 240, .14), rgba(200, 206, 214, .05) 45%, transparent 75%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); transform: rotate(-22deg); transform-origin: 50% 0; filter: blur(38px);
}

/* ---------- 11. Movimiento ---------- */
/* Aparición al entrar en pantalla: pon `ja-aparece` y añade `is-in` con un IntersectionObserver (ver la muestra) */
.ja-js .ja-aparece { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ja-ease), transform .8s var(--ja-ease); transition-delay: calc(var(--i, 0) * var(--ja-stagger)); }
.ja-js .ja-aparece.is-in { opacity: 1; transform: none; }
/* Titular que sube por su renglón */
.ja-renglon { display: block; overflow-y: clip; padding-bottom: .12em; margin-bottom: -.08em; }
.ja-renglon > * { display: inline-block; animation: ja-word-up 1s var(--ja-ease-expo) backwards; }
@keyframes ja-word-up { from { transform: translateY(108%); } }
@keyframes ja-glint-in { from { --gl: -25%; } }
@keyframes ja-chrome-pass { from { --gl: -12%; --env: 100%; } to { --gl: 112%; --env: 0%; } }
@keyframes ja-metal-pass { from { --ring: 150deg; --sw: -8%; } to { --ring: 390deg; --sw: 108%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ja-cromo { animation: ja-chrome-pass linear both; animation-timeline: view(); }
    .ja-btn, .ja-tarjeta, .ja-panel, .ja-metal, .ja-etiqueta { animation: ja-metal-pass linear both; animation-timeline: view(); }
  }
}

/* ---------- 12. Variante papel (documentos para imprimir) y movimiento reducido ---------- */
[data-tema="papel"] {
  --ja-bg: #F4F5F7; --ja-card: #FFFFFF; --ja-metal-top: #FFFFFF; --ja-metal-bottom: #F4F5F7;
  --ja-text: #0D0E11; --ja-muted: #5B626C; --ja-silver: #4A5058; --ja-silver-dim: #6A717A;
  --ja-line: #D6DBE1; --ja-line-strong: #C3C9D0;
  --ja-satin: var(--ja-graphite); --ja-chrome: var(--ja-graphite); --ja-silver-grad: var(--ja-graphite);
  --ja-glint: linear-gradient(transparent, transparent); --ja-sweep: linear-gradient(transparent, transparent);
  --ja-glow: none; --ja-shadow-float: none; --ja-bevel: none;
  --ja-extrude: none; --ja-extrude-soft: none;
}
[data-tema="papel"] .ja-raya { background: #0D0E11; box-shadow: none; }
[data-tema="papel"] .ja-filo, [data-tema="papel"] .ja-tarjeta, [data-tema="papel"] .ja-panel, [data-tema="papel"] .ja-metal, [data-tema="papel"] .ja-etiqueta { background: var(--ja-card); border-color: var(--ja-line); box-shadow: none; }
[data-tema="papel"] .ja-btn, [data-tema="papel"] .ja-btn--principal { background: var(--ja-card); border-color: var(--ja-line-strong); color: var(--ja-text); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .ja-page *, .ja-page *::before, .ja-page *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ja-js .ja-aparece { opacity: 1; transform: none; }
}
@media print {
  .ja-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ja-page *, .ja-page *::before, .ja-page *::after { animation: none !important; transition: none !important; }
}