/* ================================================================
   TJSX MOTION v1 — Capa de movimiento y acabado premium
   Universo TJSX · tema "Gabinete de Curiosidades" v7
   ----------------------------------------------------------------
   · Progresiva: sin JavaScript la página se ve y funciona como antes.
     Todo estado "oculto" cuelga de html.js / .is-ready / .visible,
     y el script de cabecera retira html.js si este módulo no carga.
   · Solo transform y opacity en las piezas grandes; filter únicamente
     en las letras del título (elementos diminutos).
   · prefers-reduced-motion: se reduce a fundidos, no se elimina.
   · Sin librerías: CSS + Intersection Observer (assets/tjsx-motion.js).
   ================================================================ */

:root {
    --tm-ease: cubic-bezier(.16, 1, .3, 1);     /* salida suave: entradas y reveals */
    --tm-ease-io: cubic-bezier(.4, 0, .2, 1);   /* respuesta rápida: hover y foco */
    --tm-fast: .22s;
    --tm-reveal: .95s;
    --tm-ivory: linear-gradient(180deg, #f7f0de 8%, #e7ddc7 48%, #b3a37d 96%);
    --tm-metal: linear-gradient(180deg, #eeda9f 8%, #cfae6d 52%, #93764a 96%);
    --tm-sheen: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 252, 240, .72) 50%, rgba(255, 255, 255, 0) 62%);
}

/* ---------- Fotogramas compartidos ---------- */
@keyframes tm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tm-fade { to { opacity: 1; } }
@keyframes tm-letter {
    from { opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(9px); }
    55%  { filter: blur(0); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes tm-sheen {
    0%   { background-position: 200% 0, 0 0; }
    13%  { background-position: -100% 0, 0 0; }
    100% { background-position: -100% 0, 0 0; }
}
@keyframes tm-draw { to { stroke-dashoffset: 0; } }
@keyframes tm-marca { from { opacity: 0; letter-spacing: .7em; transform: translateY(6px); } to { opacity: 1; letter-spacing: .42em; transform: none; } }
@keyframes tm-line { to { transform: scaleX(1); } }
@keyframes tm-fog { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4vw, 3vh, 0) scale(1.08); } }
@keyframes tm-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes tm-scrollcue { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }
@keyframes tm-bump { 0% { transform: scale(1); } 35% { transform: scale(1.09); color: var(--gold-up, #c4a568); } 100% { transform: scale(1); } }

/* ---------- Preloader (portada) ---------- */
#preloader {
    gap: 1.1rem;
    transition: opacity .7s var(--tm-ease), visibility .7s, transform .9s var(--tm-ease);
}
#preloader.is-done { opacity: 0; visibility: hidden; transform: scale(1.015); }
.pre-ghost { width: 96px; height: 70px; overflow: visible; }
.pre-ghost .pre-body {
    stroke: #a9894e; fill: rgba(169, 137, 78, .06); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: tm-draw 1.7s var(--tm-ease) .1s forwards;
}
.pre-ghost .pre-eye { fill: #a9894e; opacity: 0; animation: tm-fade .5s ease 1.25s forwards; }
.pre-marca {
    font-family: var(--serif, Georgia, serif); font-size: 1.02rem; font-weight: 600;
    letter-spacing: .42em; text-transform: uppercase; color: var(--bone, #e7ddc7);
    padding-left: .42em; opacity: 0;
    animation: tm-marca 1.1s var(--tm-ease) .35s forwards;
}
.pre-line { width: 150px; height: 1px; background: rgba(169, 137, 78, .22); overflow: hidden; }
.pre-line span {
    display: block; height: 100%; background: linear-gradient(90deg, #a9894e, #c4a568);
    transform: scaleX(0); transform-origin: left;
    animation: tm-line 1.9s var(--tm-ease-io) .2s forwards;
}
#preloader .loader-text { font-size: .58rem; letter-spacing: .3em; opacity: 0; animation: tm-fade .8s ease .8s forwards; }

/* ---------- Niebla de fondo en deriva lenta ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero-bg-accent { animation: tm-fog 28s ease-in-out infinite alternate; }
    .hero-bg-accent-2 { animation: tm-fog 34s ease-in-out infinite alternate-reverse; }
}

/* ---------- Hero · entrada escalonada ---------- */
.hero-content { position: relative; z-index: 1; }
.tjsx-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .9; }

html.js .hero-content > :not(h1),
html.js .hero-content > h1:not(.is-split),
html.js .hero-content .btn { opacity: 0; }
html.js.is-ready .hero-content > h1:not(.is-split) { opacity: 1; animation: tm-rise 1.1s var(--tm-ease) .05s backwards; }
html.js.is-ready .hero-content > .hero-subtitle { opacity: 1; animation: tm-rise 1s var(--tm-ease) .8s backwards; }
html.js.is-ready .hero-content > .hero-microcopy { opacity: 1; animation: tm-rise 1s var(--tm-ease) .95s backwards; }
html.js.is-ready .hero-content > div { opacity: 1; }
html.js.is-ready .hero-content .btn {
    opacity: 1;
    animation: tm-rise .8s var(--tm-ease) backwards;
    animation-delay: calc(1.1s + var(--i, 0) * 70ms);
}

/* Título partido en letras (solo si el h1 lleva translate="no") */
html.js .hero-content h1.is-split,
html.js .hero-content h1.is-split .gradient-text { background: none; color: transparent; }
.hero-content h1 .ch {
    display: inline-block;
    background-image: var(--tm-sheen), var(--tm-ivory);
    background-size: 200% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.hero-content h1 .gradient-text .ch { background-image: var(--tm-sheen), var(--tm-metal); }
html.js .hero-content h1.is-split .ch { opacity: 0; }
html.js.is-ready .hero-content h1.is-split .ch {
    opacity: 1;
    animation: tm-letter 1s var(--tm-ease) backwards, tm-sheen 9s linear infinite;
    animation-delay: calc(80ms + var(--i, 0) * 42ms), calc(2.6s + var(--i, 0) * 55ms);
}

/* Indicador de scroll bajo el hero */
.hero-scroll {
    position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%);
    width: 44px; height: 44px; display: grid; place-items: center; z-index: 1;
    opacity: 0; color: var(--gold, #a9894e);
}
html.js.is-ready .hero-scroll { animation: tm-fade 1s ease 1.9s forwards; }
html:not(.js) .hero-scroll { opacity: 1; }
.hero-scroll span { display: block; width: 1px; height: 30px; background: rgba(169, 137, 78, .32); position: relative; overflow: hidden; }
.hero-scroll span::after {
    content: ""; position: absolute; left: 0; top: -30px; width: 100%; height: 30px;
    background: linear-gradient(180deg, transparent, #c4a568);
    animation: tm-scrollcue 2.2s var(--tm-ease-io) infinite;
}
.hero-scroll:hover span { background: rgba(196, 165, 104, .6); }
@media (max-height: 640px) { .hero-scroll { display: none; } }

/* ---------- Cinta (marquee) ---------- */
.tjsx-marquee {
    position: relative; z-index: 1; overflow: hidden;
    border-bottom: 1px solid var(--gold-soft, rgba(169, 137, 78, .16));
    background: rgba(13, 11, 9, .6);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tjsx-marquee-track { display: flex; width: max-content; will-change: transform; }
html.js .tjsx-marquee-track { animation: tm-marquee 80s linear infinite; }
.tjsx-marquee:hover .tjsx-marquee-track,
.tjsx-marquee:focus-within .tjsx-marquee-track,
.tjsx-marquee.is-paused .tjsx-marquee-track { animation-play-state: paused; }
.tjsx-marquee-group {
    display: flex; align-items: center; gap: 2.2rem; padding: .72rem 1.1rem;
    font-family: var(--mono, Consolas, monospace); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--bone-faint, #8b8069); white-space: nowrap;
}
.tjsx-marquee-group i { color: var(--gold, #a9894e); font-style: normal; font-size: .68rem; }
.tjsx-marquee-pause {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
    background: rgba(13, 11, 9, .9); border: 1px solid var(--gold-line, rgba(169, 137, 78, .32));
    color: var(--bone-faint, #8b8069); cursor: pointer; font-size: .62rem;
    opacity: 0; transition: opacity .3s, color .2s, border-color .2s;
}
.tjsx-marquee:hover .tjsx-marquee-pause, .tjsx-marquee-pause:focus-visible, .tjsx-marquee.is-paused .tjsx-marquee-pause { opacity: 1; }
.tjsx-marquee-pause:hover { color: var(--bone, #e7ddc7); border-color: var(--gold, #a9894e); }
html:not(.js) .tjsx-marquee-pause { display: none; }

/* ---------- Aparición al hacer scroll ---------- */
html.js .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity var(--tm-reveal) var(--tm-ease), transform var(--tm-reveal) var(--tm-ease);
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* Hijos escalonados (contenedores con data-stagger) */
html.js [data-stagger] > * { opacity: 0; }
html.js .visible[data-stagger] > * {
    opacity: 1;
    animation: tm-rise .85s var(--tm-ease) backwards;
    animation-delay: calc(120ms + var(--i, 0) * 70ms);
}

/* Títulos de sección: emergen del desenfoque (elementos pequeños; el texto no se parte) */
html.js .section-title,
html.js #mission .mission-text h2,
html.js #collab-title,
html.js #visitor-counter-title,
html.js #support h2 {
    opacity: 0; transform: translateY(14px); filter: blur(7px);
    transition: opacity 1s var(--tm-ease), transform 1s var(--tm-ease), filter 1s var(--tm-ease);
}
html.js .section-title.visible,
html.js .visible .section-title,
html.js #collaborations.visible #collab-title,
html.js #visitas.visible #visitor-counter-title,
html.js #mission.visible .mission-text h2,
html.js #support.visible h2 { opacity: 1; transform: none; filter: none; }

/* Cabeceras de sección: ornamento que sube y filete que se traza */
html.js .section-title::before,
html.js #mission .mission-text h2::before,
html.js #collab-title::before,
html.js #visitor-counter-title::before,
html.js #support h2::before {
    opacity: 0; transform: translateY(10px);
    transition: opacity .9s var(--tm-ease) .15s, transform .9s var(--tm-ease) .15s;
}
html.js .section-title.visible::before,
html.js .visible .section-title::before,
html.js #collaborations.visible #collab-title::before,
html.js #visitas.visible #visitor-counter-title::before,
html.js #mission.visible .mission-text h2::before,
html.js #support.visible h2::before { opacity: 1; transform: none; }

html.js .section-title::after,
html.js #mission .mission-text h2::after,
html.js #support h2::after { transform: scaleX(0); transition: transform 1.2s var(--tm-ease) .4s; }
html.js .section-title.visible::after,
html.js .visible .section-title::after,
html.js #mission.visible .mission-text h2::after,
html.js #support.visible h2::after { transform: scaleX(1); }

/* ---------- Índice (nav): progreso, estado al desplazar, enlace activo ---------- */
.indice { transition: background .35s ease, box-shadow .35s ease; }
html.js .indice.is-scrolled {
    background: rgba(13, 11, 9, .84);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: 0 12px 34px -20px rgba(0, 0, 0, .9);
}
.tjsx-progress {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    transform: scaleX(var(--p, 0)); transform-origin: left;
    background: linear-gradient(90deg, var(--gold, #a9894e), var(--gold-up, #c4a568));
    pointer-events: none; will-change: transform;
}
.indice ul:not(.rail-list) a { position: relative; transition: color var(--tm-fast) var(--tm-ease-io); }
.indice ul:not(.rail-list) a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--gold-up, #c4a568);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--tm-ease);
}
.indice ul:not(.rail-list) a:hover::after,
.indice ul:not(.rail-list) a[aria-current="location"]::after { transform: scaleX(1); }
.indice ul:not(.rail-list) a[aria-current="location"] { color: var(--bone, #e7ddc7); }
.nav-marca { transition: color var(--tm-fast), letter-spacing .4s var(--tm-ease); }
.nav-marca:hover { letter-spacing: .34em; }

/* La altura real del índice manda sobre el desplazamiento a las anclas */
html { scroll-padding-top: calc(var(--nav-h, 5rem) + .75rem); }
[id] { scroll-margin-top: 1rem; } /* se suma al scroll-padding: aire bajo el índice */

/* ---------- Índice deslizable único (rail de capítulos) ---------- */
.indice-inner:has(.rail) { flex-wrap: nowrap; align-items: center; gap: .4rem 1.4rem; padding: .45rem 0 .4rem; }
.rail { display: flex; align-items: center; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.rail-viewport {
    position: relative; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
    padding: .3rem 0 .45rem; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.4rem, #000 calc(100% - 1.4rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.4rem, #000 calc(100% - 1.4rem), transparent);
}
.rail-viewport::-webkit-scrollbar { display: none; }
.rail-viewport.is-dragging { cursor: grabbing; }
.rail-viewport.is-dragging a { pointer-events: none; }
.indice .rail-list {
    list-style: none; margin: 0; padding: 0 1.2rem;
    display: flex; flex-wrap: nowrap; gap: .1rem; width: max-content;
}
.indice .rail-list a {
    display: inline-flex; align-items: baseline; gap: .45rem;
    padding: .42rem .7rem; min-height: 34px;
    font-family: var(--mono, Consolas, monospace); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--bone-faint, #8b8069); white-space: nowrap;
    transition: color .25s var(--tm-ease-io);
}
.indice .rail-list a:hover, .indice .rail-list a.is-active { color: var(--bone, #e7ddc7); }
.indice .rail-list a:focus-visible { outline: 2px solid var(--gold-up, #c4a568); outline-offset: -2px; }
.rail-num { color: var(--gold, #a9894e); font-size: .58rem; letter-spacing: .1em; opacity: .85; transition: color .25s, opacity .25s; }
.indice .rail-list a.is-active .rail-num { color: var(--gold-up, #c4a568); opacity: 1; }
.rail-line {
    position: absolute; left: 0; bottom: .3rem; height: 1px; width: 100px;
    background: linear-gradient(90deg, var(--gold, #a9894e), var(--gold-up, #c4a568));
    transform-origin: left; transform: translateX(0) scaleX(0);
    transition: transform .55s var(--tm-ease), opacity .3s;
    opacity: 0; pointer-events: none;
}
.rail-arrow {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
    background: transparent; border: 1px solid transparent; color: var(--bone-faint, #8b8069);
    cursor: pointer; font-size: .62rem;
    transition: color .2s, border-color .2s, opacity .25s, transform .25s var(--tm-ease);
}
.rail-arrow:hover { color: var(--bone, #e7ddc7); border-color: var(--gold-line, rgba(169, 137, 78, .32)); }
.rail-arrow:active { transform: scale(.92); }
.rail-arrow:focus-visible { outline: 2px solid var(--gold-up, #c4a568); outline-offset: 2px; }
.rail.at-start .rail-prev, .rail.at-end .rail-next { opacity: .22; pointer-events: none; }
.rail.no-overflow .rail-arrow { display: none; }
html:not(.js) .rail-arrow { display: none; }
html.js .rail-list li { opacity: 0; }
html.js.is-ready .rail-list li { opacity: 1; animation: tm-rise-down .6s var(--tm-ease) backwards; animation-delay: calc(.15s + var(--i, 0) * 40ms); }
@keyframes tm-rise-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    .indice-inner:has(.rail) { flex-wrap: wrap; justify-content: center; gap: .1rem; padding: .5rem 0 .2rem; }
    .indice-inner:has(.rail) .nav-marca { width: 100%; text-align: center; font-size: .72rem; }
    .rail { width: 100%; }
    .rail-arrow { display: none; }
    .indice .rail-list { padding: 0 .6rem; }
    .indice .rail-list a { font-size: .6rem; letter-spacing: .14em; padding: .4rem .55rem; }
}

/* ---------- Menú desplegable del hero: un solo índice para toda la página ---------- */
.menu-launch { display: flex; justify-content: center; }
.menu-halo { position: relative; display: inline-block; }
.menu-halo::before {
    content: ""; position: absolute; inset: -7px; pointer-events: none;
    border: 1px solid rgba(196, 165, 104, .38); opacity: .3;
}
html.js.is-ready .menu-halo::before { animation: tm-halo 3.4s ease-in-out 1.8s infinite; }
@keyframes tm-halo { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .75; transform: scale(1.035); } }
.menu-trigger { display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; padding: .95rem 1.8rem; }
.menu-trigger i { margin: 0; }
.menu-trigger .menu-caret { font-size: .72em; transition: transform .35s var(--tm-ease); }
.menu-trigger[aria-expanded="true"] .menu-caret { transform: rotate(180deg); }

.indice-menu { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 1rem; }
.indice-menu[hidden] { display: none; }
.indice-menu-backdrop {
    position: absolute; inset: 0; background: rgba(8, 7, 5, .68);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .35s ease;
}
.indice-menu.is-open .indice-menu-backdrop { opacity: 1; }
.indice-menu-panel {
    position: relative; width: min(780px, 100%); max-height: min(86dvh, 760px); overflow: auto;
    background: linear-gradient(180deg, var(--ink-panel, #16120c), var(--ink-2, #131009));
    border: 1px solid var(--gold-line, rgba(169, 137, 78, .32));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
    padding: clamp(1.2rem, 3vw, 2rem);
    opacity: 0; transform: translateY(16px) scale(.97);
    transition: opacity .35s var(--tm-ease), transform .5s var(--tm-ease);
}
.indice-menu-panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-soft, rgba(169, 137, 78, .16)); pointer-events: none; }
.indice-menu.is-open .indice-menu-panel { opacity: 1; transform: none; }
.indice-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.indice-menu-kicker { display: block; margin-bottom: .35rem; font-family: var(--mono, Consolas, monospace); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold, #a9894e); }
.indice-menu-head h3 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.indice-menu-close {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--gold-line, rgba(169, 137, 78, .32)); background: transparent; color: var(--bone-faint, #8b8069);
    cursor: pointer; transition: color .2s, border-color .2s, transform .35s var(--tm-ease);
}
.indice-menu-close:hover { color: var(--bone, #e7ddc7); border-color: var(--gold, #a9894e); transform: rotate(90deg); }
.indice-menu-close:focus-visible { outline: 2px solid var(--gold-up, #c4a568); outline-offset: 2px; }
.indice-menu-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.2rem 2rem; }
.indice-menu-group h4 {
    margin: 0 0 .55rem; padding-bottom: .45rem; border-bottom: 1px dotted var(--gold-line, rgba(169, 137, 78, .32));
    font-family: var(--mono, Consolas, monospace); font-size: .62rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-faint, #8b8069);
}
.indice-menu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; }
.indice-menu-list--direct { grid-template-columns: 1fr; }
.indice-menu-list a {
    display: flex; align-items: baseline; gap: .7rem; padding: .5rem .55rem;
    color: var(--bone-dim, #b9ac91); text-decoration: none; border: 1px solid transparent;
    transition: border-color .25s, background .25s, transform .3s var(--tm-ease);
}
.indice-menu-list a:hover, .indice-menu-list a:focus-visible { border-color: var(--gold-line, rgba(169, 137, 78, .32)); background: var(--gold-ghost, rgba(169, 137, 78, .07)); transform: translateX(3px); outline: none; }
.im-num { flex: none; min-width: 2em; text-align: right; font-family: var(--mono, Consolas, monospace); font-size: .62rem; letter-spacing: .1em; color: var(--gold, #a9894e); }
.im-num i { font-size: .8rem; }
.im-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.im-name { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1.02rem; color: var(--bone, #e7ddc7); }
.im-name .im-ext { font-size: .6em; color: var(--gold, #a9894e); margin-left: .3em; }
.im-desc { font-size: .74rem; color: var(--bone-faint, #8b8069); }
.indice-menu-list a.is-current { border-color: rgba(196, 165, 104, .35); background: var(--gold-ghost, rgba(169, 137, 78, .07)); }
.indice-menu-list a.is-current .im-name { color: var(--gold-up, #c4a568); }
.indice-menu-list a.is-current .im-name::after { content: " · estás aquí"; font-family: var(--mono, Consolas, monospace); font-size: .56rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #a9894e); }
.indice-menu-note { margin: 1rem 0 0; font-family: var(--mono, Consolas, monospace); font-size: .64rem; letter-spacing: .06em; color: var(--bone-faint, #8b8069); }
.indice-menu-note i { color: var(--gold, #a9894e); margin-right: .2em; }
html.js .indice-menu li { opacity: 0; }
html.js .indice-menu.is-open li { opacity: 1; animation: tm-rise .5s var(--tm-ease) backwards; animation-delay: calc(90ms + var(--i, 0) * 32ms); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* Índice flotante: aparece al dejar atrás el hero y abre el mismo menú */
.indice-fab {
    position: fixed; left: 50%; bottom: 1.5rem; z-index: 1190;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 40px; padding: .6rem 1.05rem;
    background: rgba(22, 18, 12, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--gold-line, rgba(169, 137, 78, .32)); color: var(--bone, #e7ddc7);
    font-family: var(--mono, Consolas, monospace); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
    transition: opacity .35s ease, transform .4s var(--tm-ease), border-color .25s;
}
.indice-fab[hidden] { display: none; }
.indice-fab span { color: var(--gold-up, #c4a568); }
.indice-fab.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.indice-fab:hover { border-color: var(--gold, #a9894e); }
.indice-fab:focus-visible { outline: 2px solid var(--gold-up, #c4a568); outline-offset: 3px; }
html.menu-open .indice-fab { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
    .indice-menu { place-items: end center; padding: 0; }
    .indice-menu-panel { width: 100%; max-height: 88dvh; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateY(28px); }
    .indice-menu-grid, .indice-menu-list { grid-template-columns: 1fr; }
    .indice-fab { bottom: 1.35rem; }
}

/* ---------- Botones: barrido dorado y leve elevación ---------- */
.btn {
    position: relative; overflow: hidden; isolation: isolate;
    transition: color var(--tm-fast) var(--tm-ease-io), border-color var(--tm-fast) var(--tm-ease-io),
                transform var(--tm-fast) var(--tm-ease-io), background var(--tm-fast) var(--tm-ease-io);
}
.btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--gold-up, #c4a568);
    transform: translateX(-102%) skewX(-8deg); transform-origin: left;
    transition: transform .42s var(--tm-ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(0); }
.btn:hover { background: transparent; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.btn-cyan, .btn.btn-cyan:hover { background: linear-gradient(180deg, #b3925a, #8f7440); }
.btn.btn-magenta::before { background: var(--garnet, #77302a); }
.btn.btn-magenta:hover { background: transparent; }
.btn.btn-linkedin i { color: #7fb0dd; transition: color var(--tm-fast); }
.btn.btn-linkedin:hover i { color: inherit; }

/* Botones de la capa profesional (perfil-profesional) */
.boton { transition: transform var(--tm-fast) var(--tm-ease-io), border-color var(--tm-fast), background var(--tm-fast), color var(--tm-fast); }
.boton:hover { transform: translateY(-1px); }

/* ---------- Enlaces del árbol (Conecta) ---------- */
.link-tree-btn { transition: border-color .3s var(--tm-ease-io), background .3s var(--tm-ease-io), transform .35s var(--tm-ease); }
.link-tree-btn:hover { transform: translateX(4px); }
.link-tree-btn > i:last-of-type { transition: transform .35s var(--tm-ease), opacity .3s; }
.link-tree-btn:hover > i:last-of-type { transform: translateX(4px); opacity: 1 !important; }

/* ---------- Paneles: foco de luz que sigue al cursor y elevación ---------- */
.glass-panel { isolation: isolate; }
.tjsx-spot {
    position: absolute !important; inset: 0 !important; margin: 0 !important; padding: 0 !important;
    z-index: -1; pointer-events: none; opacity: 0; font-size: 0; line-height: 0;
    transition: opacity .45s var(--tm-ease-io);
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 165, 104, .11), transparent 60%);
}
.glass-panel:hover > .tjsx-spot { opacity: 1; }
a.glass-panel, .album-card, .para-ti-card, .project-card, .patreon-card, .stat-tile, .info-card {
    transition: border-color .35s var(--tm-ease-io), transform .5s var(--tm-ease);
}
a.glass-panel:hover, .album-card:hover, .para-ti-card:hover, .project-card:hover, .patreon-card:hover {
    border-color: rgba(196, 165, 104, .6) !important;
}
.album-card:hover, .para-ti-card:hover, .project-card:hover, .patreon-card:hover { transform: translateY(-4px); }
[data-tilt] { transition: transform .35s var(--tm-ease), border-color .35s var(--tm-ease-io); transform-style: preserve-3d; }
.badge, .tag { transition: border-color var(--tm-fast), color var(--tm-fast); }
.album-card { overflow: hidden; }
.album-cover { transition: transform .9s var(--tm-ease), filter .6s ease; }
.album-card:hover .album-cover { transform: scale(1.04); filter: sepia(.1) saturate(.95) brightness(1); }
.spotify-embed-wrap { transition: border-color .4s var(--tm-ease-io); }
.spotify-embed-wrap:hover { border-color: var(--gold, #a9894e); }
.social-links a { display: inline-block; transition: color var(--tm-fast), transform .3s var(--tm-ease); }
.social-links a:hover { transform: translateY(-3px); }

/* ---------- Contador: pequeño latido al cambiar la cifra ---------- */
.visitas-numero { display: inline-block; }
.visitas-numero.is-bump { animation: tm-bump .6s var(--tm-ease); }

/* ---------- Farol: luz suave que acompaña al cursor ---------- */
.tjsx-lantern {
    position: fixed; left: -340px; top: -340px; width: 680px; height: 680px;
    border-radius: 50%; pointer-events: none; z-index: 45;
    background: radial-gradient(circle, rgba(196, 165, 104, .085), rgba(196, 165, 104, .03) 40%, transparent 64%);
    opacity: 0; transition: opacity .8s ease; will-change: transform;
}
html.has-pointer .tjsx-lantern.is-on { opacity: 1; }

/* ---------- Volver arriba flotante ---------- */
.tjsx-top {
    position: fixed; right: 5.5rem; bottom: 1.75rem; z-index: 1190;
    width: 42px; height: 42px; border-radius: 50%; padding: 0;
    border: 1px solid var(--gold-line, rgba(169, 137, 78, .32));
    background: rgba(22, 18, 12, .92); color: var(--gold-up, #c4a568);
    display: grid; place-items: center; cursor: pointer;
    opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
    transition: opacity .35s ease, transform .35s var(--tm-ease), border-color .25s;
}
.tjsx-top svg { width: 16px; height: 16px; }
.tjsx-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.tjsx-top:hover { border-color: var(--gold, #a9894e); transform: translateY(-2px); }
.tjsx-top:focus-visible { outline: 2px solid var(--gold-up, #c4a568); outline-offset: 3px; }
html.chat-open .tjsx-top { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .tjsx-top { right: 5.1rem; bottom: 1.6rem; } }

/* ---------- Capa profesional: entrada del encabezado ---------- */
html.js:not(.is-ready) .encabezado > * { opacity: 0; }
html.js.is-ready .encabezado > * { animation: tm-rise .9s var(--tm-ease) backwards; }
html.js.is-ready .encabezado > :nth-child(2) { animation-delay: .08s; }
html.js.is-ready .encabezado > :nth-child(3) { animation-delay: .16s; }
html.js.is-ready .encabezado > :nth-child(4) { animation-delay: .24s; }
html.js.is-ready .encabezado > :nth-child(5) { animation-delay: .32s; }
html.js.is-ready .encabezado > :nth-child(n+6) { animation-delay: .4s; }

/* ---------- Menos movimiento: fundidos breves, sin desplazamientos ----------
   Cada regla lleva :not(.tm-full): la clase html.tm-full (URL ?motion=full) permite
   previsualizar la versión animada aunque el sistema pida menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    html.js:not(.tm-full) .reveal { transform: none; transition: opacity .5s ease; }
    html.js:not(.tm-full) [data-stagger] > *, html.js:not(.tm-full) .visible[data-stagger] > * { opacity: 1; animation: none !important; }
    html.js:not(.tm-full) .hero-content > :not(h1), html.js:not(.tm-full) .hero-content > h1, html.js:not(.tm-full) .hero-content .btn,
    html.js.is-ready:not(.tm-full) .hero-content > *, html.js.is-ready:not(.tm-full) .hero-content .btn { animation: none !important; opacity: 1; transform: none; transition: opacity .5s ease; }
    html.js:not(.tm-full) .hero-content h1.is-split .ch, html.js.is-ready:not(.tm-full) .hero-content h1.is-split .ch { animation: none !important; opacity: 1; transform: none; filter: none; }
    html.js:not(.is-ready):not(.tm-full) .encabezado > * { opacity: 1; }
    html.js.is-ready:not(.tm-full) .encabezado > * { animation: none !important; }
    html.js:not(.tm-full) .section-title::after, html.js:not(.tm-full) #mission .mission-text h2::after, html.js:not(.tm-full) #support h2::after { transform: none; transition: none; }
    html.js:not(.tm-full) .section-title, html.js:not(.tm-full) #mission .mission-text h2, html.js:not(.tm-full) #collab-title,
    html.js:not(.tm-full) #visitor-counter-title, html.js:not(.tm-full) #support h2 { transform: none; filter: none; transition: opacity .5s ease; }
    html.js:not(.tm-full) .section-title::before, html.js:not(.tm-full) #mission .mission-text h2::before, html.js:not(.tm-full) #collab-title::before,
    html.js:not(.tm-full) #visitor-counter-title::before, html.js:not(.tm-full) #support h2::before { transform: none; transition: opacity .5s ease; }
    html.js:not(.tm-full) .rail-list li, html.js.is-ready:not(.tm-full) .rail-list li { opacity: 1; animation: none !important; }
    html.js:not(.tm-full) .indice-menu li, html.js:not(.tm-full) .indice-menu.is-open li { opacity: 1; animation: none !important; }
    html:not(.tm-full) .indice-menu-panel { transform: none; transition: opacity .3s ease; }
    html.js.is-ready:not(.tm-full) .menu-halo::before { animation: none; }
    html:not(.tm-full) .indice-menu-list a:hover, html:not(.tm-full) .indice-menu-close:hover { transform: none; }
    html:not(.tm-full) .indice-fab { transform: translate(-50%, 0); }
    html:not(.tm-full) .rail-line { transition: opacity .3s; }
    html.js:not(.tm-full) .tjsx-marquee-track { animation: none; }
    html:not(.tm-full) .tjsx-marquee-pause { display: none; }
    html:not(.tm-full) .hero-scroll span::after { animation: none; }
    html:not(.tm-full) .hero-bg-accent, html:not(.tm-full) .hero-bg-accent-2 { animation: none; }
    html:not(.tm-full) .tjsx-lantern, html:not(.tm-full) .tjsx-motes { display: none; }
    html:not(.tm-full) .hero-content, html:not(.tm-full) .tjsx-motes { transform: none !important; }
    html:not(.tm-full) .btn::before { transition: none; }
    html:not(.tm-full) :is(.btn, .link-tree-btn, .album-card, .para-ti-card, .project-card, .patreon-card, .social-links a, .tjsx-top):hover { transform: none; }
    html:not(.tm-full) .album-card:hover .album-cover { transform: none; }
    html:not(.tm-full) .visitas-numero.is-bump { animation: none; }
    html:not(.tm-full) .pre-ghost .pre-body { animation-duration: .01s; stroke-dashoffset: 0; }
    html:not(.tm-full) .pre-marca, html:not(.tm-full) #preloader .loader-text, html:not(.tm-full) .pre-ghost .pre-eye { animation-duration: .01s; opacity: 1; }
    html:not(.tm-full) .pre-line span { animation-duration: .01s; transform: scaleX(1); }
}