/* ================================================================
   UNIVERSO TJSX — tema compartido de las páginas propias
   (servicios/, causa/, apoyar/).
   Es el mismo tema de la portada (bloque <style> de index.html), para que cada apartado se vea
   igual en su propia página. Si cambia el tema de la portada, copiar aquí los cambios.
   Al final: ajustes de página propia (espacio superior y rótulos sin numeración de la portada).
   ================================================================ */
/* ================================================================
   TEMA "GABINETE DE CURIOSIDADES" v7 — Universo TJSX
   Catálogo de museo oculto: carbón cálido, papel hueso, oro viejo
   mate y granate seco. Serif editorial, ornamentos de grabado.
   Reemplaza al tema Haunted Game Dossier v5 + parches + capa v6.
   El contenido HTML y el JavaScript no se modifican: esta hoja
   viste las clases existentes (incluidos chatbot, lightbox,
   contador, expediente y FAQ).
   ================================================================ */

:root {
    --ink: #0d0b09;
    --ink-2: #131009;
    --ink-panel: #16120c;
    --bone: #e7ddc7;
    --bone-dim: #b9ac91;
    --bone-faint: #8b8069;
    --gold: #a9894e;
    --gold-up: #c4a568;
    --gold-line: rgba(169, 137, 78, .32);
    --gold-soft: rgba(169, 137, 78, .16);
    --gold-ghost: rgba(169, 137, 78, .07);
    --garnet: #77302a;
    --garnet-up: #a3554b;
    --garnet-deep: #4d1f1a;
    --serif: 'Cormorant Garamond', Georgia, 'Palatino Linotype', 'Times New Roman', serif;
    --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: Consolas, 'Cascadia Mono', 'Courier New', monospace;

    /* Alias de variables del tema anterior: el contenido y el chatbot
       las referencian en estilos inline; aquí adoptan la paleta nueva. */
    --neon-cyan: #c4a568;
    --neon-magenta: #a3554b;
    --accent-green: #8ba375;
    --text-dim: #b9ac91;
    --text-light: #e7ddc7;
    --brass: #c4a568;
    --font-hero: 'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; scroll-padding-top: 5rem; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 5rem; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone-dim);
    font-family: var(--sans);
    font-size: clamp(15px, .4vw + 14px, 16.5px);
    line-height: 1.75;
    overflow-x: hidden;
}

/* Textura de papel envejecido + viñeta, todo en CSS */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 50;
    background:
        repeating-linear-gradient(0deg, rgba(231, 221, 199, .012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(231, 221, 199, .009) 0 1px, transparent 1px 5px),
        radial-gradient(130% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .42) 100%);
}

img { max-width: 100%; height: auto; }
a { color: var(--gold-up); text-decoration: none; }
a:hover { color: var(--bone); }
:is(a, button, summary, input):focus-visible { outline: 2px solid var(--gold-up); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--bone); margin: 0 0 .5rem; line-height: 1.2; }
p { margin: 0 0 1rem; }

::selection { background: var(--garnet); color: var(--bone); }

* { scrollbar-width: thin; scrollbar-color: var(--gold-line) var(--ink-2); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--ink-2); }
*::-webkit-scrollbar-thumb { background: var(--gold-line); border: 2px solid var(--ink-2); }

.container { width: min(100% - 2.6rem, 1080px); margin-inline: auto; }

/* ---------- Salto de accesibilidad ---------- */
.skip-link {
    position: fixed; left: 1rem; top: .6rem; z-index: 500;
    transform: translateY(-300%);
    background: var(--garnet); color: var(--bone);
    padding: .55rem 1.1rem; font-family: var(--mono);
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--gold-line);
    transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* ---------- Preloader ---------- */
#preloader {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
    transition: opacity .6s ease, visibility .6s ease;
}
.loader {
    width: 46px; height: 46px;
    border: 2px solid var(--gold-line);
    border-top-color: var(--gold-up);
    border-radius: 50%;
}
.loader-text {
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .34em; text-transform: uppercase;
    color: var(--bone-faint);
}
@media (prefers-reduced-motion: no-preference) {
    .loader { animation: girar 1.1s linear infinite; }
    @keyframes girar { to { transform: rotate(360deg); } }
}

/* ---------- Niebla de fondo (sustituye los acentos neón) ---------- */
.hero-bg-accent, .hero-bg-accent-2 {
    position: fixed; pointer-events: none; z-index: 0;
    width: 60vw; height: 55vh; border-radius: 50%;
}
.hero-bg-accent {
    top: -18vh; right: -14vw;
    background: radial-gradient(closest-side, rgba(169, 137, 78, .07), transparent 70%);
}
.hero-bg-accent-2 {
    bottom: -22vh; left: -16vw;
    background: radial-gradient(closest-side, rgba(119, 48, 42, .09), transparent 70%);
}

/* ---------- Índice del expediente (nav fija) ---------- */
.indice {
    position: sticky; top: 0; z-index: 300;
    background: rgba(13, 11, 9, .96);
    border-bottom: 1px solid var(--gold-line);
}
.indice::after { content: ""; display: block; height: 3px; border-bottom: 1px solid var(--gold-soft); }
.indice-inner {
    width: min(100% - 2.6rem, 1080px); margin-inline: auto;
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .3rem 1.5rem; padding: .7rem 0 .6rem;
}
.nav-marca {
    font-family: var(--serif); color: var(--bone);
    text-transform: uppercase; letter-spacing: .28em; font-size: .8rem;
}
.nav-marca:hover { color: var(--gold-up); }
.indice ul {
    list-style: none; margin: 0 0 0 auto; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2rem 1.3rem;
}
.indice ul a {
    font-family: var(--mono); font-size: .66rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--bone-faint); padding: .2rem 0;
}
.indice ul a:hover { color: var(--bone); }
@media (max-width: 600px) {
    .indice-inner { justify-content: center; }
    .indice ul { margin-left: 0; justify-content: center; }
}

/* ---------- Hero · Frontispicio ---------- */
header:not(.chat-header) {
    position: relative; z-index: 1;
    text-align: center;
    padding: clamp(4rem, 10vw, 6.5rem) 0 clamp(3.5rem, 8vw, 5.5rem);
    border-bottom: 1px solid var(--gold-soft);
    background: radial-gradient(85% 120% at 50% 118%, rgba(169, 137, 78, .06), transparent 62%);
}
.hero-content h1 {
    font-size: clamp(2.3rem, 9vw, 4.8rem);
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    margin-bottom: .2rem;
    /* Marfil pulido: brillo vertical uniforme por letra, sin bandas */
    background: linear-gradient(180deg, #f7f0de 8%, #e7ddc7 48%, #b3a37d 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
/* Fantasmita de grabado sobre el título */
.hero-content h1::before {
    content: "";
    display: block; margin: 0 auto .9rem;
    width: 104px; height: 74px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg stroke='%23a9894e' stroke-width='1.2' fill='rgba(169,137,78,.08)' stroke-linecap='round'%3E%3Cpath d='M70 10 C54 10 44 26 44 44 L44 78 Q49 84 53 78 Q57.5 71 61.6 78 Q66 84 70 78 Q74 71 78.4 78 Q82.5 84 87 78 Q91 71 96 78 L96 44 C96 26 86 10 70 10 Z'/%3E%3Cellipse cx='60' cy='42' rx='3' ry='4.6' fill='%23a9894e' stroke='none' opacity='.85'/%3E%3Cellipse cx='80' cy='42' rx='3' ry='4.6' fill='%23a9894e' stroke='none' opacity='.85'/%3E%3Cellipse cx='70' cy='56' rx='3' ry='4.4' fill='none'/%3E%3Cpath d='M34 27 l3 3 l-3 3 l-3 -3 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M106 33 l2.4 2.4 l-2.4 2.4 l-2.4 -2.4 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M30 52 C34 48 38 48 42 52' fill='none' stroke-width='.9' opacity='.55'/%3E%3Cpath d='M98 52 C102 48 106 48 110 52' fill='none' stroke-width='.9' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.gradient-text {
    /* Oro pulido vertical, a juego con el marfil del resto del título */
    background: linear-gradient(180deg, #eeda9f 8%, #cfae6d 52%, #93764a 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-subtitle {
    font-family: var(--serif);
    text-transform: uppercase;
    letter-spacing: .34em;
    font-size: clamp(.72rem, 2.4vw, .95rem);
    color: var(--gold);
    margin: .5rem 0 1.2rem;
}
.hero-microcopy {
    max-width: 54ch; margin: 0 auto 1rem;
    color: var(--bone-dim); font-size: .98rem;
}
/* Filete doble con gema bajo el subtítulo */
.hero-microcopy::after {
    content: "";
    display: block; margin: 1.6rem auto 0;
    width: min(60%, 300px); height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cg stroke='%23a9894e'%3E%3Cpath d='M0 3 H136 M164 3 H300' stroke-opacity='.45'/%3E%3Cpath d='M0 7 H136 M164 7 H300' stroke-opacity='.2'/%3E%3Crect x='146' y='1' width='7' height='7' transform='rotate(45 149.5 4.5)' fill='rgba(169,137,78,.25)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    font-family: var(--serif);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    padding: .8rem 1.6rem;
    border: 1px solid var(--gold) !important;
    color: var(--bone) !important;
    background: transparent;
    box-shadow: none !important;
    transition: background .25s ease, color .25s ease;
    cursor: pointer;
}
.btn:hover { color: var(--ink) !important; background: var(--gold-up); }
.btn i { margin-right: .35em; }
.btn.btn-cyan {
    background: linear-gradient(180deg, #b3925a, #8f7440);
    color: #151009 !important;
    border-color: var(--gold-up) !important;
}
.btn.btn-cyan:hover { background: var(--gold-up); }
.btn.btn-magenta { border-color: var(--garnet-up) !important; }
.btn.btn-magenta:hover { background: var(--garnet); color: var(--bone) !important; }

/* ---------- Paneles (antes "glass") ---------- */
.glass-panel {
    position: relative;
    background: linear-gradient(180deg, var(--ink-panel), var(--ink-2));
    border: 1px solid var(--gold-line) !important;
    border-radius: 0;
    box-shadow: none;
}
/* Marco interior doble solo en los paneles protagonistas */
:is(#mission, #visitas, #collaborations, .recruiter-brief, .pf-hero, .pf-final).glass-panel::before {
    content: ""; position: absolute; inset: 7px;
    border: 1px solid var(--gold-soft); pointer-events: none;
}
:is(#mission, #visitas, #collaborations, .recruiter-brief, .pf-hero, .pf-final).glass-panel { padding: clamp(1.4rem, 4vw, 2.4rem); }
:is(#visitas, #collaborations, #mission).glass-panel { margin-bottom: 4rem; }

/* ---------- Cabeceras de sección: numeración + ornamento + filete ---------- */
.section-title {
    text-align: center;
    font-size: clamp(1.7rem, 4.6vw, 2.5rem);
    margin: 0 0 .4rem;
}
.section-title::before,
#mission .mission-text h2::before,
#collab-title::before,
#visitor-counter-title::before,
#support :is(h1, h2)::before {
    display: block;
    font-family: var(--mono); font-size: .64rem; font-weight: 400;
    letter-spacing: .4em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .7rem;
    padding-top: 62px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 52px;
}
.section-title::after,
#mission .mission-text h2::after,
#support :is(h1, h2)::after {
    content: "";
    display: block; margin: 1rem auto 0;
    width: min(55%, 260px); height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cg stroke='%23a9894e'%3E%3Cpath d='M0 3 H136 M164 3 H300' stroke-opacity='.45'/%3E%3Cpath d='M0 7 H136 M164 7 H300' stroke-opacity='.2'/%3E%3Crect x='146' y='1' width='7' height='7' transform='rotate(45 149.5 4.5)' fill='rgba(169,137,78,.25)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* I · Misión — vela encendida */
#mission .mission-text h2 {
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
}
#mission .mission-text h2::before {
    content: "Sección I · Manifiesto";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cg stroke='%23a9894e' stroke-width='1.1' fill='none' stroke-linecap='round'%3E%3Cpath d='M35 6 C40 15 42 22 35 31 C28 22 30 15 35 6 Z' fill='rgba(196,165,104,.28)'/%3E%3Cellipse cx='35' cy='23' rx='2.2' ry='4.6' fill='rgba(196,165,104,.5)' stroke='none'/%3E%3Cpath d='M35 31 L35 36'/%3E%3Cpath d='M27 36 H43 V74 H27 Z' fill='rgba(169,137,78,.07)'/%3E%3Cpath d='M27 38 C24 43 24 48 27 51'/%3E%3Cpath d='M43 40 C45.5 46 45 51 43 54'/%3E%3Cpath d='M17 74 H53'/%3E%3Cpath d='M17 74 C17 81 53 81 53 74' fill='rgba(169,137,78,.07)'/%3E%3Ccircle cx='58' cy='78' r='4.6'/%3E%3C/g%3E%3C/svg%3E");
}
/* II · Portafolio — pluma de escribano */
#portfolio .section-title::before {
    content: "Sección II · Expediente profesional";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cg stroke='%23a9894e' stroke-width='1.1' fill='none' stroke-linecap='round'%3E%3Cpath d='M86 8 C62 10 42 24 30 44 C26 51 22 58 18 66'/%3E%3Cpath d='M86 8 C78 20 66 34 52 44 C44 50 38 54 32 56 C36 46 44 34 56 24 C66 16 76 10 86 8 Z' fill='rgba(169,137,78,.08)'/%3E%3Cpath d='M44 40 L49 45 M52 32 L58 38 M62 24 L68 29'/%3E%3Cpath d='M18 66 L14 74 L21 70 Z' fill='rgba(169,137,78,.35)'/%3E%3Cpath d='M10 78 H62' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* IV · Servicios — llave antigua */
#servicios .section-title::before {
    content: "Sección IV · Encargos";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 60'%3E%3Cg stroke='%23a9894e' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Ccircle cx='22' cy='30' r='12' fill='rgba(169,137,78,.08)'/%3E%3Ccircle cx='22' cy='30' r='5.5'/%3E%3Cpath d='M34 30 H96'/%3E%3Cpath d='M88 30 V42 M96 30 V38'/%3E%3Cpath d='M74 30 V37'/%3E%3C/g%3E%3C/svg%3E");
}
/* III · Para ti — farol encendido */
#para-ti .section-title::before {
    content: "Sección III · Para ti";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cg stroke='%23a9894e' stroke-width='1.1' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 5 V11'/%3E%3Cpath d='M29 11 H41'/%3E%3Cpath d='M26 15 H44 L47 21 H23 Z' fill='rgba(169,137,78,.1)'/%3E%3Cpath d='M25 21 V63 H45 V21'/%3E%3Cpath d='M30 27 V57 M40 27 V57' opacity='.35'/%3E%3Cpath d='M25 63 L22 69 H48 L45 63' fill='rgba(169,137,78,.07)'/%3E%3Cpath d='M35 34 C39.5 40 40.5 45.5 35 51 C29.5 45.5 30.5 40 35 34 Z' fill='rgba(196,165,104,.3)'/%3E%3Cellipse cx='35' cy='45' rx='2' ry='3.6' fill='rgba(196,165,104,.55)' stroke='none'/%3E%3Cpath d='M35 51 V56'/%3E%3Cpath d='M18 36 L22 39 M52 36 L48 39' opacity='.5'/%3E%3Cpath d='M12 42 l3 3 l-3 3 l-3 -3 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M58 30 l2.4 2.4 l-2.4 2.4 l-2.4 -2.4 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M16 82 H54' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* IV · Música — luna con estrellas */
#music .section-title::before {
    content: "Sección IV · Fonoteca";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg stroke='%23a9894e' stroke-width='1.1' fill='rgba(169,137,78,.08)'%3E%3Cpath d='M60 12 C40 16 28 30 28 45 C28 60 40 74 60 78 C46 70 38 58 38 45 C38 32 46 20 60 12 Z'/%3E%3Cpath d='M70 26 l2.6 2.6 l-2.6 2.6 l-2.6 -2.6 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M76 48 l2.2 2.2 l-2.2 2.2 l-2.2 -2.2 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3Cpath d='M64 62 l1.8 1.8 l-1.8 1.8 l-1.8 -1.8 Z' fill='rgba(169,137,78,.4)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
}
/* V · Conecta — cuervo mensajero */
#connect .section-title::before {
    content: "Sección V · Correspondencia";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'%3E%3Cg stroke-linejoin='round'%3E%3Cpath d='M14 44 L34 38 C28 33 29 24 37 21 C45 18 52 23 53 30 C68 28 83 36 93 48 C101 57 108 68 121 76 L136 92 L124 90 L130 100 L117 95 L120 104 L108 96 C94 88 80 82 68 79 C58 76 50 68 47 58 C40 55 35 50 34 46 Z' fill='%238d7243' opacity='.92'/%3E%3Ccircle cx='40' cy='28' r='1.7' fill='%230d0b09'/%3E%3Cpath d='M60 80 L57 93 M68 82 L66 93' stroke='%238d7243' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 94 C50 90 100 96 132 92' stroke='%238d7243' stroke-width='2' fill='none' stroke-linecap='round' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}
/* II · Colaboraciones — sello de lacre */
#collab-title::before {
    content: "Sección II · Alianzas";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 7 C63 5 76 11 83 22 C90 32 91 46 87 57 C83 69 72 79 59 84 C46 88 31 85 21 76 C12 68 7 55 9 42 C11 29 20 17 33 11 C38 9 44 8 50 7 Z' fill='%2377302a'/%3E%3Ccircle cx='49' cy='46' r='27' fill='none' stroke='rgba(231,221,199,.4)'/%3E%3Ccircle cx='49' cy='46' r='31' fill='none' stroke='rgba(231,221,199,.18)'/%3E%3Ctext x='49' y='52' text-anchor='middle' font-family='Georgia, serif' font-size='15' letter-spacing='3' fill='rgba(238,228,206,.78)'%3ETJSX%3C/text%3E%3C/svg%3E");
}
/* VIII · Causa — corazón grabado */
#support :is(h1, h2)::before {
    content: "Sección VIII · La causa";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 56'%3E%3Cpath d='M35 14 C30 4 14 4 10 15 C6 26 20 36 35 50 C50 36 64 26 60 15 C56 4 40 4 35 14 Z' fill='rgba(169,137,78,.08)' stroke='%23a9894e' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* Apéndice · Registro — ojo del guardián */
#visitor-counter-title::before {
    content: "Apéndice · Registro";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 44'%3E%3Cg stroke='%23a9894e' stroke-width='1.2' fill='none'%3E%3Cpath d='M8 22 C24 6 66 6 82 22 C66 38 24 38 8 22 Z'/%3E%3Ccircle cx='45' cy='22' r='9'/%3E%3Ccircle cx='45' cy='22' r='3.6' fill='%23a9894e' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.section-subtitle {
    text-align: center;
    max-width: 62ch; margin: 0 auto 2.6rem;
    font-family: var(--serif); font-style: italic;
    color: var(--bone-dim); font-size: 1.02rem;
}

main > section { padding: clamp(3.2rem, 7vw, 5rem) 0; }

/* ---------- Sección I · Misión ---------- */
#mission .mission-text p {
    font-family: var(--serif);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.9;
    max-width: 62ch; margin-inline: auto;
}
#mission .mission-text > p:first-of-type::first-letter {
    font-size: 3em; line-height: .82;
    float: left; padding: .08em .12em 0 0;
    color: var(--gold);
}
#mission strong { color: var(--gold-up); font-weight: 600; }
#mission .fa-ghost { color: var(--garnet-up) !important; }

/* ---------- Sección II · Portafolio ---------- */
.pf-block { margin-top: clamp(2.6rem, 6vw, 3.8rem); }
.pf-h {
    text-align: center;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin-bottom: 1.6rem;
}
.pf-h::before {
    content: "❦";
    display: block;
    color: var(--gold); font-size: 1rem;
    margin-bottom: .3rem;
}

/* Expediente (resumen para reclutadores) */
.recruiter-brief { margin-bottom: 2.2rem; }
.rb-stamp {
    display: inline-block;
    font-family: var(--mono); font-size: .64rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--garnet-up);
    border: 1px solid rgba(163, 85, 75, .55);
    padding: .3rem .9rem;
    transform: rotate(-1.2deg);
    margin-bottom: 1.1rem;
}
.rb-grid {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 1.6rem 2.2rem; align-items: start;
}
@media (max-width: 760px) { .rb-grid { grid-template-columns: 1fr; } }
.rb-datos { margin: 0; }
.rb-datos dt {
    font-family: var(--mono); font-size: .64rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold);
    border-top: 1px dotted var(--gold-line);
    padding-top: .55rem; margin-top: .55rem;
}
.rb-datos dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.rb-datos dd { margin: .15rem 0 0; font-size: .93rem; }
.rb-actions { display: flex; flex-direction: column; gap: .55rem; }
.rb-actions .btn { text-align: center; font-size: .72rem; padding: .65rem 1rem; }
.rb-copyline {
    margin: 1.4rem 0 0;
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .06em; color: var(--bone-faint);
    border-top: 1px dotted var(--gold-line); padding-top: .8rem;
}

/* Ficha de presentación */
.pf-hero {
    display: grid; grid-template-columns: 1.7fr 1fr;
    gap: clamp(1.4rem, 4vw, 2.4rem);
    margin-bottom: 2.2rem;
}
@media (max-width: 820px) { .pf-hero { grid-template-columns: 1fr; } }
.pf-status {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .66rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent-green); margin-bottom: .8rem;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); }
@media (prefers-reduced-motion: no-preference) {
    .dot { animation: latido 2.4s ease-in-out infinite; }
    @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.pf-role {
    font-family: var(--serif); font-style: italic;
    color: var(--gold-up); font-size: 1.05rem; margin-bottom: .6rem;
}
.pf-pitch { font-size: .95rem; }
.pf-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.pf-cta .btn { font-size: .72rem; padding: .65rem 1.15rem; }
.pf-reply {
    margin: 1.1rem 0 0;
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .04em; color: var(--bone-faint);
}
.pf-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .8rem; align-content: start;
}
.stat-tile {
    border: 1px solid var(--gold-line);
    background: var(--gold-ghost);
    padding: 1rem .8rem; text-align: center;
    display: flex; flex-direction: column; gap: .2rem;
}
.stat-tile .big {
    font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
    color: var(--gold-up); line-height: 1.1;
}
.stat-tile .lbl {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bone-faint); line-height: 1.7;
}

/* Instrumental (stack) */
.tech-group { max-width: 56rem; margin: 0 auto 1.3rem; }
.tech-group .cat {
    font-family: var(--mono); font-size: .66rem;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold);
    border-left: 2px solid var(--gold-line);
    padding-left: .8rem; margin-bottom: .5rem;
}
.tech-badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.badge {
    font-family: var(--mono); font-size: .72rem;
    color: var(--bone-dim);
    border: 1px solid rgba(169, 137, 78, .22);
    background: transparent;
    padding: .25rem .7rem;
}
.badge:hover { border-color: var(--gold); color: var(--bone); }

/* Piezas del catálogo (proyectos) */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 1.6rem;
}
.project-card { display: flex; flex-direction: column; }
.project-card::after {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid rgba(169, 137, 78, .1); pointer-events: none;
}
.project-shot {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--gold-line);
    background: #0f0c08;
}
.project-shot img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    filter: sepia(.22) saturate(.82) contrast(1.02) brightness(.94);
    transition: transform .5s ease;
}
.project-card:hover .project-shot img { transform: scale(1.03); }
.project-shot--icon {
    display: grid; place-items: center;
    font-size: 3rem; color: var(--gold);
    background:
        radial-gradient(60% 80% at 50% 45%, rgba(169, 137, 78, .1), transparent 75%),
        #0f0c08;
}
.proj-badge-live {
    position: absolute; top: .7rem; left: .7rem;
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bone);
    background: rgba(119, 48, 42, .92);
    border: 1px solid rgba(231, 221, 199, .25);
    padding: .25rem .6rem;
}
.project-body { padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.proj-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.proj-head h4 { font-size: 1.18rem; margin: 0; }
.proj-type {
    font-family: var(--mono); font-size: .6rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); border: 1px solid var(--gold-line);
    padding: .15rem .5rem; white-space: nowrap;
}
.proj-desc { font-size: .9rem; margin: 0; }
.proj-thumbs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
}
.proj-thumbs img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top;
    border: 1px solid var(--gold-line); padding: 2px; background: #0f0c08;
    filter: sepia(.22) saturate(.82) brightness(.94);
}
.proj-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
    font-family: var(--mono); font-size: .62rem;
    color: var(--bone-faint);
    border: 1px solid rgba(169, 137, 78, .18);
    padding: .15rem .5rem;
}
.proj-links { margin-top: auto; padding-top: .5rem; }
.proj-link {
    font-family: var(--mono); font-size: .72rem;
    letter-spacing: .08em; color: var(--gold-up);
}
.proj-link:hover { color: var(--bone); }
.proj-link.muted { color: var(--bone-faint); }
.zoomable { cursor: zoom-in; }

/* Crónica (experiencia) */
.timeline { display: flex; flex-direction: column; gap: 1.3rem; }
.tl-item {
    position: relative;
    border-left: 2px solid var(--gold-line);
    padding: 0 0 .2rem 1.2rem;
}
.tl-item::before {
    content: ""; position: absolute; left: -5px; top: .45rem;
    width: 8px; height: 8px;
    background: var(--gold); transform: rotate(45deg);
}
.tl-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.tl-role { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--bone); }
.tl-date {
    font-family: var(--mono); font-size: .64rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold);
}
.tl-org { font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--bone-faint); }
.tl-desc { font-size: .9rem; margin-top: .3rem; }

/* Fichas de información */
.pf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 820px) { .pf-grid-3 { grid-template-columns: 1fr; } }
.info-card { padding: 1.4rem 1.3rem; }
.info-card h4 { font-size: 1.1rem; margin-bottom: .7rem; }
.info-card h4 i { color: var(--gold); margin-right: .4rem; font-size: .9em; }
.info-card p { margin-bottom: .2rem; font-size: .92rem; }
.muted { color: var(--bone-faint); }
.lang-row {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .92rem; padding: .35rem 0;
    border-bottom: 1px dotted var(--gold-line);
}
.lang-row:last-child { border-bottom: 0; }
.lang-row span:last-child { font-family: var(--serif); font-style: italic; color: var(--gold-up); }
.strength-li {
    display: flex; align-items: baseline; gap: .6rem;
    font-size: .9rem; margin-bottom: .55rem;
}
.strength-li i { color: var(--gold); font-size: .8em; }

/* FAQ para reclutadores */
.faq-reclutadores details {
    border: 1px solid rgba(169, 137, 78, .2);
    background: var(--gold-ghost);
    margin-bottom: .6rem;
}
.faq-reclutadores summary {
    cursor: pointer;
    font-family: var(--serif); font-weight: 600;
    font-size: 1rem; color: var(--bone);
    padding: .85rem 1.1rem;
    list-style: none;
}
.faq-reclutadores summary::-webkit-details-marker { display: none; }
.faq-reclutadores summary::before {
    content: "✦"; color: var(--gold);
    margin-right: .6rem; font-size: .8em;
}
.faq-reclutadores details[open] summary { border-bottom: 1px dotted var(--gold-line); color: var(--gold-up); }
.faq-reclutadores details > div { padding: .9rem 1.1rem 1rem; font-size: .92rem; }

/* Cierre del expediente */
.pf-final { text-align: center; }
.pf-final h3 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); max-width: 30ch; margin-inline: auto; }
.pf-final .pf-cta { justify-content: center; }
.pf-contact-list {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem 1.6rem; margin-top: 1.2rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
    color: var(--bone-faint);
}

/* ---------- Sección III · Servicios para ti ---------- */
#para-ti .section-subtitle { margin-bottom: 2.2rem; }
.para-ti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.4rem; max-width: 900px; margin: 0 auto;
}
.para-ti-card {
    display: flex; flex-direction: column; gap: .9rem;
    padding: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--bone-dim); text-decoration: none;
}
.para-ti-card::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(169, 137, 78, .12); pointer-events: none; }
.para-ti-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.para-ti-icon {
    width: 46px; height: 46px; display: grid; place-items: center; flex: none;
    border: 1px solid var(--gold-line); color: var(--gold-up); font-size: 1.15rem;
    background: rgba(13, 11, 9, .55);
}
.para-ti-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent-green);
}
.para-ti-body { display: block; }
.para-ti-name { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--bone); line-height: 1.2; transition: color .25s ease; }
.para-ti-kind { display: block; font-family: var(--serif); font-style: italic; color: var(--gold-up); font-size: .95rem; margin-top: .15rem; }
.para-ti-desc { display: block; font-size: .92rem; margin-top: .55rem; }
.para-ti-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.para-ti-cta {
    margin-top: auto; padding-top: .7rem; border-top: 1px dotted var(--gold-line);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--gold-up);
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.para-ti-cta i { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.para-ti-card:hover .para-ti-cta i { transform: translate(3px, -3px); }
.para-ti-card:hover .para-ti-name { color: var(--gold-up); }
.para-ti-card--next { border-style: dashed !important; justify-content: center; align-items: center; text-align: center; color: var(--bone-faint); }
.para-ti-card--next .para-ti-icon { color: var(--bone-faint); border-style: dashed; }
.para-ti-card--next .para-ti-name { color: var(--bone-dim); }
.para-ti-note {
    text-align: center; max-width: 60ch; margin: 1.6rem auto 0;
    font-family: var(--serif); font-style: italic; color: var(--bone-faint); font-size: .95rem;
}

/* ---------- Sección V · Música ---------- */
.spotify-embed-wrap {
    max-width: 720px; margin: 0 auto;
    border: 1px solid var(--gold-line);
    padding: 7px; background: #0f0c08;
}
.spotify-embed-wrap iframe { display: block; border-radius: 0 !important; border: 0 !important; }
.embed-note {
    text-align: center;
    font-family: var(--serif); font-style: italic;
    font-size: .9rem; color: var(--bone-faint);
    margin: 1rem auto 0;
}
.discography-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem; max-width: 820px;
    margin: 2.4rem auto 0;
}
.album-card { border-color: var(--gold-line) !important; display: flex; flex-direction: column; }
.album-card::after {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid rgba(169, 137, 78, .1); pointer-events: none;
}
.album-cover { filter: sepia(.2) saturate(.85) brightness(.95); border-bottom: 1px solid var(--gold-line); }
.album-info { padding: 1.2rem 1.2rem 1.3rem; }
.album-info h3 { font-size: 1.25rem; }
.album-info h3 span { color: var(--garnet-up) !important; font-family: var(--mono); letter-spacing: .08em; }
.album-info ul { color: var(--bone-dim) !important; }
.album-info .btn { border-color: var(--gold) !important; color: var(--bone) !important; }

/* ---------- Sección VI · Conecta ---------- */
#connect > .container > div > h3 {
    color: var(--gold) !important;
    font-family: var(--mono);
    font-size: .72rem !important;
    letter-spacing: .3em !important;
}
.link-tree-btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .95rem 1.15rem;
    color: var(--bone-dim);
    transition: border-color .25s ease, background .25s ease;
}
.link-tree-btn:hover { border-color: var(--gold) !important; background: var(--gold-ghost); color: var(--bone); }
.link-tree-btn > i:first-child { font-size: 1.15rem; filter: saturate(.35) sepia(.25) brightness(.95); width: 1.6rem; text-align: center; }
.link-tree-btn > span { flex: 1; margin-left: .6rem; font-family: var(--serif); font-weight: 600; color: var(--bone); }
.link-tree-btn span { font-family: var(--serif); font-weight: 600; color: var(--bone); letter-spacing: .02em; }
.link-tree-btn div div { font-family: var(--sans); font-weight: 400; color: var(--bone-dim); letter-spacing: 0; }

/* ---------- Sección VIII · Causa ---------- */
#support .glass-panel { border-color: rgba(163, 85, 75, .5) !important; padding: clamp(1.6rem, 5vw, 2.4rem) !important; }
#support :is(h1, h2) { font-size: clamp(1.5rem, 4vw, 2rem) !important; color: var(--bone) !important; }
#support p { color: var(--bone-dim) !important; }

/* ---------- Sección IX · Dos formas de apoyar ---------- */
#patreon { padding: 0 0 4rem; }
#patreon .section-title::before {
    content: "Sección IX · Dos formas de apoyar";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cg stroke='%23a9894e' stroke-width='1.15' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 75 C26 52 20 29 34 18 C45 10 55 20 60 28 C65 20 75 10 86 18 C100 29 94 52 60 75 Z' fill='rgba(119,48,42,.22)'/%3E%3Cpath d='M22 75 H98' opacity='.55'/%3E%3Cpath d='M33 71 C40 62 51 59 60 62 C69 59 80 62 87 71' opacity='.5'/%3E%3Ccircle cx='60' cy='43' r='6' fill='rgba(196,165,104,.2)'/%3E%3C/g%3E%3C/svg%3E");
}
.patreon-panel {
    max-width: 940px;
    margin: 0 auto;
    padding: clamp(1.7rem, 5vw, 2.7rem);
    border-color: rgba(163, 85, 75, .55) !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(163, 85, 75, .16), transparent 34%),
        radial-gradient(circle at 88% 80%, rgba(196, 165, 104, .14), transparent 34%),
        linear-gradient(180deg, var(--ink-panel), var(--ink-2));
}
.patreon-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-line);
    padding: .35rem .7rem;
    margin-bottom: 1rem;
}
.patreon-copy {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.patreon-copy p {
    color: var(--bone-dim);
    font-size: clamp(.95rem, 1vw + .72rem, 1.08rem);
}
.patreon-copy .patreon-lead {
    color: var(--bone);
    font-family: var(--serif);
    font-size: clamp(1.08rem, 1.4vw + .78rem, 1.34rem);
    line-height: 1.65;
}
.patreon-copy strong { color: var(--bone); font-weight: 600; }
.patreon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.6rem 0 1.8rem;
}
.patreon-card {
    border: 1px solid rgba(169, 137, 78, .24);
    background: rgba(15, 12, 8, .58);
    padding: 1rem;
    text-align: left;
}
.patreon-card i { color: var(--gold-up); margin-bottom: .65rem; }
.patreon-card span {
    display: block;
    font-family: var(--serif);
    color: var(--bone);
    font-weight: 600;
    margin-bottom: .25rem;
}
.patreon-card small { color: var(--bone-faint); line-height: 1.5; }
.patreon-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .9rem;
}
.patreon-actions .btn:first-child {
    background: linear-gradient(180deg, #c4a568, #8f7440);
    color: #151009 !important;
    border-color: var(--gold-up) !important;
}
.patreon-note {
    max-width: 700px;
    margin: 1rem auto 0;
    text-align: center;
    color: var(--bone-faint);
    font-size: .86rem;
    font-style: italic;
}
.share-support-panel {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--gold-line);
    text-align: center;
}
.share-support-panel :is(h2, h3) {
    max-width: 700px;
    margin: 0 auto .8rem;
    color: var(--bone);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.25;
}
.share-support-intro {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    color: var(--bone-dim);
}
.share-direct-title,
.share-fallback-title,
.manual-share-title {
    display: block;
    margin-bottom: .7rem;
    color: var(--gold);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.share-direct-block {
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
}
.share-direct-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .65rem;
}
.share-direct-note {
    margin: .8rem auto 1rem;
    color: var(--bone-faint);
    font-size: .8rem;
    text-align: center;
}
.share-fallback-panel {
    max-width: 780px;
    margin: 1.4rem auto 0;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid rgba(169, 137, 78, .34);
    background: rgba(8, 7, 5, .68);
    text-align: left;
}
.share-fallback-note {
    margin: 0 0 1rem;
    color: var(--bone-dim);
    font-size: .88rem;
}
.share-variant-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1rem;
}
.share-variant-btn,
.share-copy-btn {
    min-height: 44px;
    border: 1px solid var(--gold-line);
    background: transparent;
    color: var(--bone);
    padding: .6rem .8rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .06em;
    cursor: pointer;
}
.share-variant-btn:hover,
.share-copy-btn:hover { border-color: var(--gold); background: var(--gold-ghost); }
.share-variant-btn:focus-visible,
.share-copy-btn:focus-visible,
.share-message-text:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.share-variant-btn[aria-pressed="true"] {
    border-color: var(--gold);
    background: var(--gold-ghost);
    color: var(--gold-up);
}
.share-message-label {
    display: block;
    margin-bottom: .55rem;
    color: var(--bone);
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .08em;
}
.share-message-text {
    display: block;
    width: 100%;
    min-height: 10.5rem;
    resize: vertical;
    padding: .9rem;
    border: 1px solid var(--gold-line);
    border-radius: 0;
    background: var(--ink);
    color: var(--bone-dim);
    font: 400 .9rem/1.6 var(--sans);
}
.share-copy-tools {
    display: flex;
    justify-content: flex-end;
    margin-top: .8rem;
}
.share-copy-notice {
    position: fixed;
    top: 5.4rem;
    left: 50%;
    z-index: 1400;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    width: min(560px, calc(100% - 2rem));
    padding: .9rem 1rem;
    border: 1px solid var(--gold);
    background: rgba(15, 12, 8, .97);
    color: var(--bone);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .58);
    transform: translateX(-50%);
}
.share-copy-notice[hidden] { display: none !important; }
.share-copy-notice > i { color: var(--accent-green); font-size: 1.1rem; }
.share-copy-notice strong,
.share-copy-notice span { display: block; }
.share-copy-notice strong {
    margin-bottom: .15rem;
    color: var(--gold-up);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .06em;
}
.share-copy-notice span { color: var(--bone-dim); font-size: .84rem; line-height: 1.45; }
.share-copy-notice-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--gold-line);
    background: transparent;
    color: var(--bone);
    cursor: pointer;
}
.share-copy-notice-close:hover { border-color: var(--gold); background: var(--gold-ghost); }
.share-copy-notice-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.share-copy-mobile-instruction { display: none !important; }
.share-actions,
.manual-share-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.manual-share-panel {
    max-width: 780px;
    margin: 1.4rem auto 0;
    padding: 1.25rem;
    border: 1px solid rgba(163, 85, 75, .36);
    background: rgba(20, 10, 9, .42);
    text-align: left;
}
.manual-share-panel p {
    margin: 0 0 1rem;
    color: var(--bone-dim);
    font-size: .88rem;
}
.manual-share-actions {
    justify-content: flex-start;
}
.share-ready-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem .85rem;
    border: 1px solid var(--gold-line);
    color: var(--bone);
    font-family: var(--mono);
    font-size: .72rem;
    text-decoration: none;
}
.share-ready-link:hover { border-color: var(--gold); background: var(--gold-ghost); }
.share-ready-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.share-status {
    min-height: 1.4rem;
    margin: .8rem auto 0;
    color: var(--gold-up);
    font-size: .82rem;
}
@media (max-width: 820px) {
    .patreon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .share-direct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .patreon-grid { grid-template-columns: 1fr; }
    .patreon-actions .btn { width: 100%; text-align: center; }
    .share-direct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .share-actions .btn,
    .manual-share-actions .share-ready-link,
    .share-ready-link { width: 100%; }
    .share-variant-controls { display: grid; grid-template-columns: 1fr; }
    .share-variant-btn,
    .share-copy-btn { width: 100%; }
    .share-copy-notice { top: 4.5rem; align-items: start; }
    .share-copy-desktop-instruction { display: none !important; }
    .share-copy-mobile-instruction { display: block !important; }
}

/* ---------- Apéndice · Registro de visitas ---------- */
.visitor-counter-section { text-align: center; }
.visitor-counter-copy :is(h1, h2) { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
.visitor-counter-eyebrow {
    display: none; /* la numeración de sección ya cumple este papel */
}
.visitor-counter-widget {
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    margin-top: 1rem;
}
.visitor-counter-badge-link {
    display: inline-block;
    border: 1px solid var(--gold-line);
    padding: 6px; background: #0f0c08;
}
.visitor-counter-badge { display: block; filter: sepia(.15) saturate(.9); }
.visitor-counter-status {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--bone-faint);
}
.visitor-counter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); }

/* Contador propio (base de datos del sitio). Oculto mientras no haya dato. */
.visitas-propio[hidden] { display: none !important; }
.visitas-propio {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    justify-content: center; gap: .5rem .8rem;
    max-width: 100%;
    border: 1px solid var(--gold-line);
    background: #0f0c08;
    padding: .55rem 1.1rem;
}
.visitas-etiqueta {
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold);
}
.visitas-numero {
    font-family: var(--serif); font-size: clamp(1.3rem, 4.5vw, 1.9rem);
    font-weight: 600; letter-spacing: .06em; color: var(--bone);
    line-height: 1.1; overflow-wrap: anywhere;
}
@media (max-width: 360px) {
    .visitas-propio { padding: .5rem .7rem; gap: .3rem .5rem; }
}

/* ---------- Sección VII · Colaboraciones ---------- */
.collab-section {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1.4rem 2.4rem; text-align: left;
}
.collab-copy { flex: 1 1 320px; }
.collab-eyebrow { display: none; }
.collab-copy p { margin: 0; font-size: .95rem; }
.collab-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.collab-note {
    font-family: var(--mono); font-size: .62rem;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--bone-faint);
}

/* ---------- Footer · Colofón ---------- */
footer {
    position: relative;
    border-top: 1px solid var(--gold-line);
    padding: 2.6rem 1.3rem 3rem;
    text-align: center;
}
footer::before {
    content: ""; position: absolute; top: 3px; left: 0; right: 0;
    border-top: 1px solid var(--gold-soft);
}
footer p { font-family: var(--serif); font-size: .88rem; color: var(--bone-faint); }
.social-links {
    display: flex; justify-content: center; gap: 1.6rem;
    margin-bottom: 1.2rem; font-size: 1.25rem;
}
.social-links a { color: var(--bone-faint); }
.social-links a:hover { color: var(--gold-up); }

/* ---------- Chatbot · El archivista (v6) ---------- */
.chatbot-toggler {
    position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 1200;
    width: 58px; height: 58px; border-radius: 50%; padding: 0;
    background: linear-gradient(180deg, #b3925a, #8f7440);
    color: #151009; font-size: 1.25rem;
    border: 1px solid var(--gold-up);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, opacity .3s ease;
}
.chatbot-toggler:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.chatbot-toggler > i { grid-area: 1 / 1; transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.chatbot-toggler > .fa-xmark { opacity: 0; transform: rotate(-90deg) scale(.6); }
html.chat-open .chatbot-toggler > .fa-message { opacity: 0; transform: rotate(90deg) scale(.6); }
html.chat-open .chatbot-toggler > .fa-xmark { opacity: 1; transform: none; }
.chatbot-toggler.is-nudging { animation: chat-pulse 2.2s ease-in-out 3; }
@keyframes chat-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 0 rgba(196, 165, 104, .5); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 14px rgba(196, 165, 104, 0); }
}
.chat-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--garnet-up); color: var(--bone);
    font-family: var(--mono); font-size: .62rem; font-weight: 700; line-height: 18px; text-align: center;
    border: 1px solid rgba(231, 221, 199, .35);
}
.chat-badge[hidden] { display: none; }
.chat-nudge {
    position: fixed; right: 1.3rem; bottom: 5.4rem; z-index: 1199;
    max-width: min(270px, calc(100vw - 2.6rem));
    padding: .75rem 1.9rem .75rem 1rem;
    background: rgba(22, 18, 12, .97); color: var(--bone-dim);
    border: 1px solid var(--gold-line); border-right: 3px solid var(--gold);
    font-size: .84rem; line-height: 1.45; cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.chat-nudge.is-visible { opacity: 1; transform: none; }
.chat-nudge[hidden] { display: none; }
.chat-nudge b { color: var(--bone); font-family: var(--serif); font-size: .95rem; }
.chat-nudge button {
    position: absolute; top: 2px; right: 3px; width: 28px; height: 28px;
    background: none; border: 0; color: var(--bone-faint); cursor: pointer; font-size: .8rem;
}
.chat-nudge button:hover { color: var(--bone); }
.chatbot-window {
    position: fixed; right: 1.3rem; bottom: 5.6rem; z-index: 1200;
    width: min(392px, calc(100vw - 2rem));
    height: min(600px, calc(100vh - 7.5rem));
    height: min(600px, calc(100dvh - 7.5rem));
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97);
    transform-origin: 100% 100%;
    transition: opacity .32s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility .32s;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    overflow: hidden;
}
.chatbot-window.active { opacity: 1; visibility: visible; transform: none; }
.chat-header {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem .8rem .8rem 1rem;
    border-bottom: 1px solid var(--gold-line);
    background: var(--gold-ghost);
}
.chat-avatar {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border: 1px solid var(--gold-line); background: rgba(13, 11, 9, .6);
}
.chat-avatar svg { width: 28px; height: 20px; }
.chat-title { flex: 1; min-width: 0; }
.chat-header h2 { margin: 0; font-size: 1.02rem; letter-spacing: .05em; line-height: 1.15; }
.chat-header h2::before { content: "✦ "; color: var(--gold); }
.chat-status {
    display: flex; align-items: center; gap: .4rem; margin-top: .15rem;
    font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--bone-faint);
}
.chat-status .dot { width: 6px; height: 6px; }
.chat-tools { display: flex; gap: .2rem; }
.chat-tools button {
    width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
    background: transparent; border: 1px solid transparent; color: var(--bone-faint);
    cursor: pointer; font-size: .9rem;
    transition: color .2s ease, border-color .2s ease;
}
.chat-tools button:hover { color: var(--bone); border-color: var(--gold-line); }
.chat-tools #close-chat:hover { color: var(--garnet-up); }
.chat-body {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.message {
    max-width: 88%; padding: .7rem .9rem;
    font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere;
    animation: chat-msg .45s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes chat-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.message.bot-msg {
    align-self: flex-start;
    background: var(--gold-ghost);
    border: 1px solid rgba(169, 137, 78, .2);
    border-left: 3px solid var(--gold);
    color: var(--bone-dim);
}
.message.bot-msg b { color: var(--bone); }
.message.bot-msg a { text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(196, 165, 104, .45); }
.message.user-msg {
    align-self: flex-end;
    background: rgba(119, 48, 42, .28);
    border: 1px solid rgba(163, 85, 75, .4);
    border-right: 3px solid var(--garnet-up);
    color: var(--bone);
}
.message.typing { display: flex; gap: 5px; align-items: center; padding: .85rem .95rem; }
.message.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .35; animation: chat-dot 1.2s ease-in-out infinite; }
.message.typing span:nth-child(2) { animation-delay: .18s; }
.message.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-options { display: flex; flex-wrap: wrap; gap: .4rem; animation: chat-msg .45s cubic-bezier(.16, 1, .3, 1) both; }
.option-chip {
    font-family: var(--mono); font-size: .68rem;
    color: var(--bone-dim);
    background: transparent;
    border: 1px solid rgba(169, 137, 78, .3);
    padding: .42rem .72rem; min-height: 32px; cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.option-chip:hover { border-color: var(--gold); color: var(--bone); background: var(--gold-ghost); transform: translateY(-1px); }
.chat-suggest {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: .55rem .8rem 0; background: var(--ink-2); border-top: 1px solid var(--gold-line);
}
.chat-suggest[hidden] { display: none; }
.chat-suggest button {
    font-family: var(--sans); font-size: .76rem; color: var(--bone-dim); text-align: left; max-width: 100%;
    background: rgba(169, 137, 78, .06); border: 1px solid rgba(169, 137, 78, .25);
    padding: .3rem .6rem; cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.chat-suggest button:hover { border-color: var(--gold); color: var(--bone); }
.chat-suggest button b { color: var(--gold-up); font-weight: 600; }
.chat-input-area {
    display: flex; gap: .5rem;
    padding: .7rem .8rem; border-top: 1px solid var(--gold-line);
    background: var(--ink-2);
}
.chat-suggest:not([hidden]) + .chat-input-area { border-top: 0; }
.chat-input {
    flex: 1; min-width: 0;
    background: var(--ink); color: var(--bone);
    border: 1px solid var(--gold-line);
    padding: .65rem .8rem;
    font-family: var(--sans); font-size: .9rem;
    transition: border-color .2s ease;
}
.chat-input::placeholder { color: var(--bone-faint); }
.chat-input:focus { outline: none; border-color: var(--gold); }
.send-btn {
    width: 46px; flex: none;
    background: linear-gradient(180deg, #b3925a, #8f7440);
    color: #151009; border: 1px solid var(--gold-up);
    cursor: pointer; font-size: .95rem;
    transition: background .2s ease, transform .2s ease;
}
.send-btn:hover { background: var(--gold-up); }
.send-btn:active { transform: scale(.95); }
.chat-foot {
    padding: .35rem .9rem .55rem; background: var(--ink-2);
    font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bone-faint); text-align: center;
}
@media (max-width: 560px) {
    .chatbot-window.active { inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0 !important; }
    .chatbot-window.active .chat-header { padding-top: max(.8rem, env(safe-area-inset-top)); }
    .chatbot-window.active .chat-foot { padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
    .chatbot-window.active { touch-action: pinch-zoom; }
    .chatbot-window.active .chat-body { touch-action: pan-y pinch-zoom; }
    .chat-input { font-size: 16px; }
    html.chat-open .chatbot-toggler, html.chat-open .chat-nudge,
    html.chat-open .tjsx-gear, html.chat-open .tjsx-gear-panel { opacity: 0; pointer-events: none; }
}

/* ---------- Lightbox · Vitrina ---------- */
.lightbox-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(6, 5, 4, .95);
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    overflow: auto;
}
.lightbox-content {
    max-width: min(92vw, 1100px); max-height: 82vh;
    width: auto; height: auto;
    margin: 0 auto;
    border: 1px solid var(--gold-line);
    padding: 6px; background: #0f0c08;
}
.lightbox-close {
    position: fixed; top: 1rem; right: 1.4rem;
    font-size: 1.7rem; color: var(--bone);
    cursor: pointer; z-index: 2001;
}
.lightbox-close:hover { color: var(--garnet-up); }
#lightbox-caption {
    margin-top: .9rem;
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--bone-faint);
}

/* ---------- Aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
/* Con :where() la especificidad no cambia; html.tm-full (animación completa elegida en el engranaje)
   conserva las transiciones aunque el sistema pida menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    :where(html:not(.tm-full)) .reveal { opacity: 1; transform: none; transition: none; }
    :where(html:not(.tm-full)) .skip-link, :where(html:not(.tm-full)) .btn, :where(html:not(.tm-full)) .link-tree-btn,
    :where(html:not(.tm-full)) .project-shot img, :where(html:not(.tm-full)) .chatbot-window,
    :where(html:not(.tm-full)) .chatbot-toggler { transition: none; }
}

/* ---------- Ajustes móviles ---------- */
@media (max-width: 560px) {
    .hero-content h1::before { width: 84px; height: 60px; }
    .pf-stats { grid-template-columns: 1fr 1fr; }
    .proj-thumbs { grid-template-columns: repeat(3, 1fr); }
    .collab-section { text-align: center; }
    .collab-actions { align-items: center; width: 100%; }
    .chatbot-window { right: 1rem; }
}


/* ================================================================
   Página propia
   ================================================================ */
main.pagina-propia { padding-top: clamp(2.4rem, 7vw, 4.6rem); }
.pagina-propia > section:last-child { margin-bottom: 1rem; }
/* Rótulos: en su propia página no llevan el número de sección de la portada */
#servicios .section-title::before { content: "Universo TJSX · Encargos"; }
#support :is(h1, h2)::before { content: "Universo TJSX · La causa"; }
#patreon .section-title::before { content: "Universo TJSX · Dos formas de apoyar"; }