/* ==========================================================
   NEO JAPÓN — sistema visual compartido
   Oscuro editorial + papel crema + cobre + acentos técnicos.
========================================================== */
@font-face {
    font-family: 'Sora';
    src: url('../assets/fonts/sora-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 800;
    font-display: optional;
}

.page-breadcrumb {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.1rem;
    color: rgba(255,255,255,.68);
    font: 600 .72rem/1.3 var(--font-mono, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.page-breadcrumb a { color: inherit; text-decoration: none; }
.page-breadcrumb a:hover { color: #ff9955; }
.page-breadcrumb [aria-current="page"] { color: rgba(255,255,255,.92); }

.contact-v2__privacy {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr);
    gap: .7rem;
    align-items: flex-start;
    margin: .9rem 0 1rem;
    color: rgba(255,255,255,.68);
    font-size: .76rem;
    line-height: 1.55;
}
.contact-v2__privacy input { width: 18px; height: 18px; margin-top: .1rem; accent-color: #ed7d36; }
.contact-v2__privacy a { color: #ffa164; text-underline-offset: 3px; }
.contact-v2__privacy:focus-within { color: rgba(255,255,255,.88); }

/* Legales y conversión móvil compartidos */
.site-footer-response {
    display: block;
    margin-top: .65rem;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    letter-spacing: .035em;
}
.site-footer-legal a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}
.site-footer-legal a:hover { color: #f28a45; }
.mobile-contact-dock { display: none; }

.content-video__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #111922; }
.content-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.content-video__consent {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .65rem;
    padding: 1.5rem;
    text-align: center;
    background: radial-gradient(circle at 50% 20%, rgba(215,78,58,.2), transparent 55%), #111922;
    color: #f8f0e8;
}
.content-video__consent[hidden] { display: none; }
.content-demo .content-video__frame { aspect-ratio: 4 / 3; min-height: 540px; }
.content-demo .content-video__consent button { cursor: pointer; }
@media (max-width: 760px) { .content-demo .content-video__frame { aspect-ratio: auto; height: 640px; } }
.content-video__consent p { max-width: 50ch; margin: 0; color: rgba(255,255,255,.74); }
.content-video__consent button { min-height: 42px; padding: .65rem 1rem; border: 1px solid #e77e39; border-radius: 999px; background: #e77e39; color: #12161b; font-weight: 700; cursor: pointer; }
.content-video__consent a { color: #ffaf79; font-size: .8rem; }

@media (max-width: 760px) {
    body.has-mobile-contact-dock { padding-bottom: 76px; }
    .mobile-contact-dock {
        position: fixed;
        z-index: 9990;
        right: 12px;
        bottom: 10px;
        left: 12px;
        min-height: 58px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: .7rem 1rem;
        border: 1px solid rgba(255,155,86,.8);
        border-radius: 18px;
        background: rgba(17,22,28,.94);
        color: #fff;
        text-decoration: none;
        box-shadow: 0 16px 44px rgba(0,0,0,.44);
        backdrop-filter: blur(15px);
        opacity: 0;
        transform: translateY(120%);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
    }
    body.mobile-contact-dock-ready .mobile-contact-dock { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .mobile-contact-dock > span:first-child { font-weight: 700; }
    .mobile-contact-dock small { grid-column: 1; color: rgba(255,255,255,.64); font-size: .66rem; }
    .mobile-contact-dock > span:last-child { grid-column: 2; grid-row: 1 / 3; color: #ff9955; font-size: 1.1rem; }
}

:root {
    --bg-main: #07111a;
    --bg-secondary: #0d1c27;
    --bg-accent: #142936;
    --ink: #07111a;
    --ink-soft: #102331;
    --paper: #f3ebdd;
    --paper-strong: #fff9ed;
    --paper-muted: #ddd0bd;
    --copper: #c9793d;
    --vermilion: #c94b3a;
    --copper-ink: #8f4925;
    --vermilion-ink: #a83b2f;
    --sakura: #e5a6b5;
    --accent: #37c9ff;
    --accent-alt: #f2c08f;
    --accent-glow: rgba(55, 201, 255, .18);
    --text-primary: #fff9ed;
    --text-secondary: #b6c0c5;
    --text-muted: #73838c;
    --glass-bg: rgba(7, 17, 26, .68);
    --glass-border: rgba(243, 235, 221, .12);
    --font-display: 'Sora', 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --shadow-premium: 0 28px 90px rgba(2, 7, 12, .28);
    --line-paper: rgba(7, 17, 26, .12);
}

html {
    background: var(--ink);
    scrollbar-width: thin;
    scrollbar-color: #d8452f #151a1c;
}

/* Scrollbar koi compartido por Home, Sobre mí, Portfolio, Servicios y Blog. */
html::-webkit-scrollbar { width: 14px; }
html::-webkit-scrollbar-track {
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0 24px,
            rgba(240,122,50,.11) 24px 25px,
            transparent 25px 49px
        ),
        linear-gradient(90deg,#101517,#191e20 52%,#101517);
    border-inline: 1px solid rgba(255,245,231,.055);
    box-shadow: inset 0 0 12px rgba(0,0,0,.24);
}
html::-webkit-scrollbar-thumb {
    min-height: 64px;
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        radial-gradient(circle at 62% 17%,rgba(255,247,226,.92) 0 7%,transparent 8%),
        radial-gradient(circle at 35% 48%,rgba(255,236,205,.78) 0 9%,transparent 10%),
        radial-gradient(circle at 64% 76%,rgba(115,23,18,.58) 0 8%,transparent 9%),
        linear-gradient(180deg,#ffb15c 0%,#f07a32 35%,#e44f32 68%,#a92820 100%);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,245,231,.18),0 0 12px rgba(216,69,47,.2);
}
html::-webkit-scrollbar-thumb:hover {
    background:
        radial-gradient(circle at 62% 17%,#fff8e9 0 7%,transparent 8%),
        radial-gradient(circle at 35% 48%,#ffe7c1 0 9%,transparent 10%),
        radial-gradient(circle at 64% 76%,rgba(115,23,18,.68) 0 8%,transparent 9%),
        linear-gradient(180deg,#ffc06e 0%,#fa8438 35%,#ef5636 68%,#b42f24 100%);
    background-clip: padding-box;
}
body { cursor: auto; background: var(--ink); }
a,
button,
[role='button'],
input,
select,
textarea { cursor: pointer; }
input,
select,
textarea { cursor: text; }
select,
input[type='checkbox'],
input[type='radio'],
input[type='file'],
input[type='range'] { cursor: pointer; }
#cursor,
#cursor-trail,
.bg-blobs,
.space-elements,
#hero-canvas,
#portfolio-canvas,
#skills-canvas,
.work-header-ship,
#paca-police-anim,
#police-sirens-overlay { display: none !important; }
.noise-overlay { opacity: .035; mix-blend-mode: soft-light; }

::selection { color: var(--paper-strong); background: var(--vermilion); }
:focus-visible { outline: 3px solid #f07a32; outline-offset: 4px; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.skip-link {
    position: fixed;
    z-index: 2147483647;
    top: 10px;
    left: 10px;
    padding: 11px 16px;
    color: #07111a;
    font-weight: 800;
    background: #fff7e9;
    border: 2px solid #f07a32;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Navegación */
.navbar {
    top: 16px;
    right: 0;
    left: 0;
    width: auto;
    margin: 0;
    transition: top .42s cubic-bezier(.2,.8,.2,1);
}
.navbar.scrolled { top: 9px; }
.nav-container {
    position: relative;
    isolation: isolate;
    width: min(calc(100% - 32px), 1240px);
    max-width: none;
    min-height: 64px;
    margin-inline: auto;
    overflow: visible;
    border: 1px solid rgba(222, 103, 51, .72);
    background:
        linear-gradient(110deg, rgba(255, 245, 231, .1), transparent 43%, rgba(216, 69, 47, .045)),
        rgba(13, 18, 21, .58);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    transition: background-color .5s ease, border-color .5s ease, box-shadow .5s cubic-bezier(.2,.8,.2,1), backdrop-filter .5s ease;
}
.navbar.scrolled .nav-container {
    background:
        linear-gradient(110deg, rgba(255, 245, 231, .09), transparent 43%, rgba(216, 69, 47, .04)),
        rgba(13, 18, 21, .72);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .11);
}

@property --koi-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.navbar .nav-container::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    opacity: .72;
    background: conic-gradient(
        from var(--koi-border-angle),
        transparent 0deg 330deg,
        rgba(190, 105, 61, 0) 330deg,
        rgba(190, 105, 61, .24) 338deg,
        rgba(237, 187, 143, .74) 345deg,
        rgba(205, 116, 66, .34) 352deg,
        rgba(190, 105, 61, 0) 358deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: koi-nav-border-orbit 7.6s linear infinite;
    pointer-events: none;
}

@keyframes koi-nav-border-orbit { to { --koi-border-angle: 360deg; } }
.navbar .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #eadfce;
    font-family: var(--font-display);
    letter-spacing: -.055em;
    text-shadow: none;
}
.navbar .logo-brand-mark {
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 2px;
    object-fit: contain;
    background: rgba(7, 17, 26, .92);
    border: 1px solid rgba(240, 122, 50, .52);
    border-radius: 11px 3px 11px 3px;
    box-shadow: 0 0 0 3px rgba(216, 69, 47, .055), 0 7px 18px rgba(0, 0, 0, .24);
}
.logo .text-accent,
.text-accent { color: var(--copper); }
.navbar .nav-link {
    position: relative;
    color: rgba(255, 249, 237, .72);
    text-shadow: none;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--paper-strong); }
.navbar .nav-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--copper), var(--sakura));
    box-shadow: 0 0 10px rgba(240, 122, 50, .38);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .has-submenu.keyboard-open > .nav-link::after,
.navbar .has-submenu:hover > .nav-link::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.has-submenu > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav-disclosure {
    width: 13px;
    height: 10px;
    display: inline-grid;
    place-items: center;
    color: #f29655;
    opacity: .82;
    transform-origin: 50% 45%;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), color .25s ease, opacity .25s ease;
}
.nav-disclosure svg { display: block; overflow: visible; }
.has-submenu:hover > .nav-link .nav-disclosure,
.has-submenu.keyboard-open > .nav-link .nav-disclosure,
.has-submenu > .nav-link[aria-expanded='true'] .nav-disclosure {
    color: #ffc08d;
    opacity: 1;
    transform: rotate(180deg) translateY(-1px);
}
.submenu {
    background: rgba(7, 17, 26, .96);
    border-color: rgba(201, 121, 61, .24);
}
.mobile-menu { background: rgba(7, 17, 26, .97); border-color: rgba(201, 121, 61, .25); }
.btn {
    min-height: 48px;
    border-radius: 999px;
    cursor: pointer;
    transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .36s cubic-bezier(.2,.8,.2,1),
        transform .36s cubic-bezier(.2,.8,.2,1),
        filter .28s ease;
}
.btn-primary {
    color: #fff9ed;
    background: linear-gradient(135deg, #a43a30, #9f4b28);
    box-shadow: 0 14px 35px rgba(201, 75, 58, .24);
}
.btn-primary:hover { color: var(--ink); background: var(--paper-strong); box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }
.btn-secondary,
.btn-outline { color: var(--paper-strong); border-color: rgba(243, 235, 221, .22); }
.btn-secondary:hover,
.btn-outline:hover { color: var(--paper-strong); border-color: var(--copper); background: rgba(201, 121, 61, .11); }

/* Cursor Neo Japón: un punto preciso y cuatro trazos abiertos. La silueta
   evita el aro pesado del cursor anterior y conserva contraste en fondos
   claros y oscuros sin tapar el contenido. */
.neo-pointer {
    position: fixed;
    z-index: 2147483646;
    inset: 0 auto auto 0;
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-80px,-80px,0);
    transition: opacity .18s ease;
    contain: layout style;
    will-change: transform;
}
.neo-pointer::before,
.neo-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.neo-pointer::before {
    width: 20px;
    height: 20px;
    background:
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) left top / 6px 1px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) left top / 1px 6px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) right top / 6px 1px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) right top / 1px 6px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) left bottom / 6px 1px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) left bottom / 1px 6px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) right bottom / 6px 1px no-repeat,
        linear-gradient(rgba(255,246,230,.84),rgba(255,246,230,.84)) right bottom / 1px 6px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(4,9,12,.85));
    transition: width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), background .2s ease, filter .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.neo-pointer::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f2703d;
    box-shadow: none;
    transition: width .18s ease, height .18s ease, border-radius .18s ease, background .18s ease, box-shadow .18s ease, opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.neo-pointer.is-visible { opacity: 1; }
.neo-pointer.is-interactive::before {
    width: 30px;
    height: 30px;
    background:
        linear-gradient(#fff3dc,#fff3dc) left top / 9px 1.5px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) left top / 1.5px 9px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) right top / 9px 1.5px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) right top / 1.5px 9px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) left bottom / 9px 1.5px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) left bottom / 1.5px 9px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) right bottom / 9px 1.5px no-repeat,
        linear-gradient(#fff3dc,#fff3dc) right bottom / 1.5px 9px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(4,9,12,.94));
    transform: translate(-50%,-50%) rotate(45deg);
}
.neo-pointer.is-interactive::after {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #fff3dc;
    box-shadow: none;
    transform: translate(-50%,-50%) rotate(45deg);
}
.neo-pointer.is-pressed::before { transform: translate(-50%,-50%) scale(.72); }
.neo-pointer.is-interactive.is-pressed::before { transform: translate(-50%,-50%) rotate(45deg) scale(.72); }
.neo-pointer.is-text::before {
    width: 11px;
    height: 24px;
    background:
        linear-gradient(#fff2dd,#fff2dd) center top / 9px 1px no-repeat,
        linear-gradient(#fff2dd,#fff2dd) center bottom / 9px 1px no-repeat,
        linear-gradient(#f2703d,#f2703d) center / 1.5px 100% no-repeat;
    filter: drop-shadow(0 1px 1px rgba(4,9,12,.9));
}
.neo-pointer.is-text::after { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
    html.neo-pointer-ready,
    html.neo-pointer-ready body,
    html.neo-pointer-ready body * { cursor: none !important; }
}

@media (forced-colors: active) {
    html.neo-pointer-ready,
    html.neo-pointer-ready body,
    html.neo-pointer-ready body * { cursor: auto !important; }
    .neo-pointer { display: none !important; }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
    .navbar .logo-brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        padding: 1px;
        border-radius: 9px 2px 9px 2px;
    }
    .mobile-menu {
        gap: 7px;
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mobile-nav-group { display: grid; gap: 4px; }
    .mobile-nav-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
        gap: 4px;
    }
    .mobile-nav-row > .mobile-link { min-width: 0; }
    .mobile-submenu-toggle {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        color: #ff9a50;
        border: 1px solid rgba(240, 122, 50, .22);
        border-radius: 14px;
        background: rgba(240, 122, 50, .07);
        transition: color .25s ease, background-color .25s ease, border-color .25s ease;
    }
    .mobile-submenu-toggle svg { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
    .mobile-submenu-toggle[aria-expanded='true'] {
        color: #fff7e9;
        border-color: rgba(240, 122, 50, .54);
        background: rgba(240, 122, 50, .14);
    }
    .mobile-submenu-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
    .mobile-submenu {
        display: grid;
        gap: 2px;
        margin: 0 0 5px 16px;
        padding: 6px 0 6px 12px;
        border-left: 1px solid rgba(240, 122, 50, .28);
        animation: mobile-submenu-in .3s cubic-bezier(.2,.8,.2,1) both;
    }
    .mobile-submenu[hidden] { display: none; }
    .mobile-menu .mobile-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        color: rgba(255, 249, 237, .88);
        border-radius: 12px;
    }
    .mobile-menu .mobile-link:hover,
    .mobile-menu .mobile-link:focus-visible {
        color: #fff9ed;
        background: rgba(240, 122, 50, .1);
    }
    .mobile-menu .mobile-link-sub {
        min-height: 39px;
        padding-block: 8px;
        color: rgba(255, 249, 237, .73);
        font-size: .9rem;
    }
    .mobile-menu .mobile-link-featured { color: #ff9a50; }
}

@keyframes mobile-submenu-in {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: translateY(0); }
}

.divider-ultra-fine {
    height: 12px;
    opacity: 1;
    background:
        linear-gradient(135deg, transparent 45%, rgba(201,121,61,.55) 46% 48%, transparent 49%) 0 0 / 24px 12px repeat-x,
        linear-gradient(90deg, transparent, rgba(229,166,181,.35), transparent);
    filter: none;
}
.section-tag { color: var(--copper); }
.section-tag::before { content: '— '; color: currentColor; }
.section-title { letter-spacing: -.045em; }
.text-gradient {
    color: transparent;
    background: linear-gradient(110deg, var(--paper-strong) 5%, var(--sakura) 52%, var(--copper) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Portada */
.hero-neo {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    padding: 160px 0 72px;
}
.hero-neo-scene,
.hero-neo-scene img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-neo-scene { z-index: -4; overflow: hidden; }
.hero-neo-scene img { object-fit: cover; object-position: center; scale: 1.035; will-change: transform; }
.hero-neo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(3, 8, 13, .97) 0%, rgba(3, 8, 13, .85) 31%, rgba(3, 8, 13, .34) 61%, rgba(3, 8, 13, .2) 100%),
        linear-gradient(0deg, rgba(7, 17, 26, .96), transparent 35%, rgba(7, 17, 26, .16));
}
.hero-neo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 72%, rgba(243,235,221,.08) 72% 72.1%, transparent 72.1%),
        linear-gradient(0deg, transparent 0 20%, rgba(243,235,221,.05) 20% 20.1%, transparent 20.1%);
}
.hero-neo-content { max-width: 820px; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--paper-muted);
    font-family: var(--font-mono);
    font-size: .77rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--copper); }
.hero-neo .hero-title {
    max-width: 780px;
    margin: 0 0 24px;
    color: var(--paper-strong);
    font-size: clamp(3.4rem, 7vw, 7.1rem);
    line-height: .94;
    letter-spacing: -.075em;
    text-wrap: balance;
}
.hero-neo .hero-title em { color: var(--sakura); font-style: normal; }
.hero-neo .hero-subtitle { max-width: 660px; color: #ccd2d3; font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.75; }
.hero-neo .hero-actions { margin-top: 34px; }
.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 42px;
    padding: 0;
    list-style: none;
    color: rgba(255,249,237,.62);
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hero-proof li::before { content: '◇'; margin-right: 8px; color: var(--copper); }
.hero-scene-caption {
    position: absolute;
    right: clamp(22px, 4vw, 70px);
    bottom: 74px;
    writing-mode: vertical-rl;
    color: rgba(255,249,237,.42);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.scroll-indicator { color: var(--paper-muted); }

/* Servicios — papel editorial con tarjetas que avanzan en scroll */
.services-section {
    position: relative;
    color: var(--ink);
    background:
        linear-gradient(rgba(7,17,26,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7,17,26,.035) 1px, transparent 1px),
        var(--paper);
    background-size: 42px 42px;
}
.services-section::before,
#proyectos::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 8% 8%, rgba(229,166,181,.22), transparent 24%), radial-gradient(circle at 90% 74%, rgba(201,121,61,.14), transparent 26%);
}
.services-section .section-title,
.services-section .section-desc { color: var(--ink); }
.services-section .text-gradient,
#proyectos .text-gradient {
    background: linear-gradient(105deg, var(--vermilion-ink), var(--copper-ink));
    -webkit-background-clip: text;
    background-clip: text;
}
.service-layout.service-rail {
    display: block;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.service-rail .service-card {
    position: sticky;
    top: 112px;
    width: min(100%, 980px);
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(26px, 5vw, 74px);
    margin: 0 0 12vh;
    padding: clamp(28px, 5vw, 60px);
    overflow: hidden;
    color: var(--ink);
    background: rgba(255, 249, 237, .97);
    border: 1px solid rgba(7,17,26,.15);
    border-radius: 3px 3px 24px 3px;
    box-shadow: 0 28px 80px rgba(31, 35, 35, .18);
}
.service-rail .service-card:nth-child(2) { top: 132px; margin-left: auto; background: #efe0cd; }
.service-rail .service-card:nth-child(3) { top: 152px; margin-inline: auto; background: #f7efe4; }
.service-rail .service-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(225deg, rgba(201,121,61,.25), transparent 65%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.service-rail .service-topline { grid-column: 1 / -1; }
.service-rail .service-anim { grid-column: 1; grid-row: 2 / 6; align-self: center; }
.service-rail .service-anim svg { filter: sepia(.3) saturate(.8); }
.services-section .section-tag { color: var(--copper-ink); }
.service-rail .service-kicker { color: var(--vermilion-ink); }
.service-rail .service-index { color: rgba(7,17,26,.12); }
.service-rail .service-card h3 { color: var(--ink); font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.05em; }
.service-rail .service-card p,
.service-rail .service-card ul { color: #465159; }
.service-rail .service-card li::marker { color: var(--copper-ink); }
.service-rail .service-meta { color: var(--vermilion-ink); }
.service-evolution {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 32px;
    align-items: center;
    margin-top: 10vh;
    padding: clamp(28px, 5vw, 58px);
    color: var(--paper-strong);
    background: var(--ink);
    border: 1px solid rgba(201,121,61,.45);
    border-radius: 22px;
    box-shadow: var(--shadow-premium);
}
.service-evolution h3 { margin: 8px 0 12px; font-size: clamp(1.8rem, 3vw, 3.2rem); letter-spacing: -.05em; }
.service-evolution p { color: var(--text-secondary); line-height: 1.75; }
.service-evolution-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.service-evolution-list li { padding: 12px 14px; color: var(--paper-muted); border-left: 2px solid var(--copper); background: rgba(255,255,255,.035); }

/* Método — camino de puertas */
.work-section {
    position: relative;
    background:
        radial-gradient(circle at 72% 18%, rgba(201,75,58,.17), transparent 24%),
        linear-gradient(160deg, #07111a, #0d202b 56%, #07111a);
}
.work-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(90deg, rgba(243,235,221,.09) 1px, transparent 1px), linear-gradient(rgba(243,235,221,.06) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(to bottom, transparent, #000 20% 80%, transparent);
}
.work-board { align-items: start; background: rgba(3,9,14,.5); border-color: rgba(201,121,61,.23); }
.work-board-visual {
    position: sticky;
    top: 150px;
    display: block;
    min-height: 430px;
    background:
        linear-gradient(var(--vermilion), var(--vermilion)) 15% 18% / 70% 18px no-repeat,
        linear-gradient(var(--copper), var(--copper)) 22% 25% / 56% 12px no-repeat,
        linear-gradient(var(--vermilion), var(--vermilion)) 26% 18% / 14px 64% no-repeat,
        linear-gradient(var(--vermilion), var(--vermilion)) 74% 18% / 14px 64% no-repeat,
        radial-gradient(ellipse at 50% 78%, rgba(229,166,181,.23), transparent 48%);
    filter: drop-shadow(0 24px 35px rgba(0,0,0,.45));
}
.work-board-visual::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--sakura), transparent); box-shadow: 0 -28px 45px rgba(229,166,181,.32); }
.work-cube,
.work-orbit { display: none; }
.work-flow { grid-template-columns: 1fr; gap: 14px; }
.work-flow::before { display: none; }
.work-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px;
    border: 1px solid rgba(243,235,221,.08);
    border-radius: 2px 16px 16px 2px;
    background: rgba(255,255,255,.025);
    transition: transform .45s ease, border-color .45s ease, background .45s ease;
}
.work-step.is-active { transform: translateX(10px); border-color: rgba(201,121,61,.56); background: rgba(201,121,61,.08); }
.work-step span { width: 48px; height: 48px; border-color: rgba(201,121,61,.42); color: var(--copper); }
.work-step h3 { color: var(--paper-strong); font-size: 1.08rem; }
.work-step p { color: var(--text-secondary); font-size: .9rem; }
.work-cta { border-color: rgba(201,121,61,.24); background: rgba(7,17,26,.76); }

/* Portfolio home sobre papel */
#proyectos { position: relative; color: var(--ink); background: #efe4d4; }
#proyectos .section-title,
#proyectos .section-desc,
#proyectos .category-title,
#proyectos .project-name { color: var(--ink); }
#proyectos .section-tag { color: var(--copper-ink); }
#proyectos .category-title { border-left-color: var(--vermilion-ink); }
#proyectos .carousel-integrated { padding: clamp(22px, 4vw, 46px); background: rgba(255,249,237,.68); border: 1px solid var(--line-paper); border-radius: 20px; }
#proyectos .project-text { color: #4f5a60; }
#proyectos .project-mockup { border-color: rgba(7,17,26,.16); box-shadow: 0 24px 55px rgba(52,45,36,.2); }
#proyectos .carousel-arrow { color: var(--ink); background: rgba(255,249,237,.8); border-color: rgba(7,17,26,.18); }
#proyectos .carousel-arrow:hover { color: var(--paper-strong); background: var(--vermilion-ink); }
#proyectos .carousel-indicator { border: 0; background: rgba(7,17,26,.2); }
#proyectos .carousel-indicator.active { background: var(--vermilion-ink); }
#proyectos .project-link-detail { color: var(--vermilion-ink); }

/* Perfil técnico */
#habilidades {
    background:
        linear-gradient(135deg, rgba(55,201,255,.05), transparent 35%),
        var(--ink-soft);
}
.tech-badge,
.tech-orb { border-radius: 6px; }
.tech-orb:hover { border-color: var(--copper); color: var(--paper-strong); box-shadow: 0 12px 30px rgba(201,121,61,.14); }

/* Cuaderno / teaser */
.journal-teaser {
    position: relative;
    overflow: hidden;
    color: var(--paper-strong);
    background: #081521;
}
.journal-teaser::before { content: ''; position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .42; }
.journal-teaser.is-media-ready::before { background-image: url('../assets/midnight-tokyo-blog-v1.jpg'); }
.journal-teaser::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,17,26,.96), rgba(7,17,26,.72) 55%, rgba(7,17,26,.3)); }
.journal-teaser .container { position: relative; z-index: 1; }
.journal-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 40px; align-items: end; }
.journal-teaser h2 { max-width: 740px; font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -.065em; }
.journal-teaser p { max-width: 650px; margin: 20px 0 30px; color: #c5cfd3; font-size: 1.06rem; line-height: 1.75; }
.journal-series { display: grid; gap: 10px; }
.journal-series span { padding: 14px 16px; border: 1px solid rgba(243,235,221,.12); background: rgba(7,17,26,.56); color: var(--paper-muted); }

/* Contacto pixel */
#contacto.contact-ultra-minimalist {
    min-height: 100svh;
    background-color: #07111b !important;
    background-image: none !important;
    background-position: center !important;
    background-size: cover !important;
    image-rendering: auto;
}
#contacto.contact-ultra-minimalist.is-media-ready { background-image: url('../assets/neo-japan-contact-pixel-v1.jpg') !important; }
#contacto > div:first-child { background: linear-gradient(180deg, rgba(6,14,23,.5), rgba(4,10,17,.8)) !important; }
#contacto .contact-header-minimal { max-width: 780px; margin-inline: auto; }
#contacto .c-title { font-size: clamp(3rem, 7vw, 6.2rem); letter-spacing: -.065em; }
#contacto .contact-form-wrapper { max-width: 620px !important; }
#contactForm {
    padding: clamp(22px, 4vw, 38px) !important;
    background: rgba(5, 12, 20, .82) !important;
    border: 1px solid rgba(201,121,61,.35) !important;
    border-radius: 20px !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.44);
}
#contactForm input,
#contactForm select,
#contactForm textarea {
    border-color: rgba(243,235,221,.16) !important;
    background: rgba(0,0,0,.38) !important;
}
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus { border-color: var(--copper) !important; box-shadow: 0 0 0 3px rgba(201,121,61,.15); }
.flying-paca-container { filter: drop-shadow(0 14px 24px rgba(0,0,0,.46)); }
.paca-dialog { background: var(--paper-strong); border-color: var(--ink); }

/* Hoja de sakura conectada al scroll */
.sakura-scroll-leaf {
    position: fixed;
    top: 12vh;
    right: clamp(12px, 2.5vw, 38px);
    z-index: 900;
    width: 16px;
    height: 28px;
    pointer-events: none;
    opacity: .78;
    border-radius: 90% 0 90% 0;
    background: linear-gradient(145deg, #f2bcc8, #bb6f80);
    box-shadow: 0 0 20px rgba(229,166,181,.28);
    transform-origin: center;
    will-change: transform, top;
}
/* Pie compartido */
.site-footer { padding: 64px max(5vw, 24px) 24px; color: var(--paper-muted); background: #040b11; border-top: 1px solid rgba(201,121,61,.24); }
.site-footer-inner { width: min(1180px, 100%); display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .7fr) minmax(150px, .4fr); gap: 42px; margin: 0 auto 52px; }
.site-footer-brand { color: var(--paper-strong); font: 700 1.6rem var(--font-display); letter-spacing: -.055em; }
.site-footer-brand span { color: var(--copper); }
.site-footer p { max-width: 420px; margin-top: 12px; color: var(--text-muted); }
.site-footer-nav,
.site-footer-social { display: grid; align-content: start; gap: 10px; }
.site-footer a:hover { color: var(--sakura); }
.site-footer-bottom { width: min(1180px, 100%); display: flex; justify-content: space-between; gap: 20px; margin: 0 auto; padding-top: 20px; color: #71828b; border-top: 1px solid rgba(243,235,221,.08); font: .7rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 980px) {
    .hero-neo::before { background: linear-gradient(90deg, rgba(3,8,13,.94), rgba(3,8,13,.58)), linear-gradient(0deg, rgba(7,17,26,.98), transparent 50%); }
    .service-rail .service-card { position: relative; top: auto !important; width: 100%; min-height: auto; margin: 0 0 22px; grid-template-columns: 1fr; }
    .service-rail .service-anim { grid-column: 1; grid-row: auto; max-width: 220px; }
    .service-evolution,
    .journal-grid { grid-template-columns: 1fr; }
    .work-board { grid-template-columns: 1fr; }
    .work-board-visual { display: none; }
}

@media (max-width: 700px) {
    .hero-neo { min-height: 100svh; padding: 132px 0 68px; align-items: end; }
    .hero-neo-scene img { object-position: center top; }
    .hero-neo::before { background: linear-gradient(180deg, rgba(3,8,13,.18) 0%, rgba(3,8,13,.48) 35%, rgba(3,8,13,.98) 72%); }
    .hero-neo .hero-title { font-size: clamp(3rem, 14vw, 4.6rem); }
    .hero-scene-caption { display: none; }
    .hero-proof { gap: 9px 16px; }
    .service-rail .service-card { padding: 26px 22px; }
    .service-evolution { padding: 28px 22px; }
    .work-step { grid-template-columns: 48px minmax(0,1fr); padding: 18px 14px; }
    .journal-teaser.is-media-ready::before { background-image: url('../assets/midnight-tokyo-blog-mobile-v1.jpg'); }
    #contacto.contact-ultra-minimalist.is-media-ready { background-image: url('../assets/neo-japan-contact-pixel-mobile-v1.jpg') !important; }
    .sakura-scroll-leaf { right: 8px; opacity: .58; }
    .site-footer-inner { grid-template-columns: 1fr; }
    .site-footer-bottom { flex-direction: column; }
}

/* V10 · cursor adaptativo: la tinta cambia según la luminosidad de la
   superficie. No necesita halo, borde ni sombra para conservar contraste. */
.neo-pointer {
    --pointer-core: #e87847;
    --pointer-corners: #ffc08c;
}
.neo-pointer.is-on-light {
    --pointer-core: #943024;
    --pointer-corners: #b63e2d;
}
.neo-pointer.is-on-dark {
    --pointer-core: #ff9155;
    --pointer-corners: #ffd2a8;
}
.neo-pointer::before { filter: none; }
.neo-pointer::after {
    background: var(--pointer-core);
    border: 0;
    box-shadow: none;
}
.neo-pointer.is-interactive::before {
    background:
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) left top / 9px 1.5px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) left top / 1.5px 9px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) right top / 9px 1.5px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) right top / 1.5px 9px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) left bottom / 9px 1.5px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) left bottom / 1.5px 9px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) right bottom / 9px 1.5px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) right bottom / 1.5px 9px no-repeat;
    filter: none;
}
.neo-pointer.is-interactive::after {
    background: var(--pointer-core);
    border: 0;
    box-shadow: none;
}
.neo-pointer.is-text::before {
    background:
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) center top / 9px 1px no-repeat,
        linear-gradient(var(--pointer-corners),var(--pointer-corners)) center bottom / 9px 1px no-repeat,
        linear-gradient(var(--pointer-core),var(--pointer-core)) center / 1.5px 100% no-repeat;
    filter: none;
}

/* Validación propia: sustituye los globos genéricos del navegador por una
   respuesta breve y consistente con el sistema visual. */
.form-field-error {
    display: block;
    margin-top: 7px;
    color: #d95135;
    font: 700 .68rem/1.4 var(--font-mono, monospace);
    letter-spacing: .02em;
}
.has-field-error :is(input, select, textarea),
:is(input, select, textarea).has-field-error {
    border-color: #d95135 !important;
    box-shadow: 0 0 0 3px rgba(217, 81, 53, .12) !important;
}

@media (prefers-reduced-motion: reduce) {
    .sakura-scroll-leaf { display: none; }
    .hero-neo-scene img { transform: none !important; }
    .service-rail .service-card { position: relative; top: auto !important; }
}

html[data-motion='reduced'] .sakura-scroll-leaf { display: none; }
html[data-motion='reduced'] *,
html[data-motion='reduced'] *::before,
html[data-motion='reduced'] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
}

body.neo-japan-site button.img-contained {
    padding: 0;
    color: inherit;
    text-align: initial;
    font: inherit;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: zoom-in;
}

.project-image-placeholder {
    display: grid;
    place-items: center;
    padding: 28px;
    color: var(--paper-muted);
    background: linear-gradient(145deg, #111c25, #07111a);
    font: 700 .78rem/1.5 var(--font-mono);
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.project-access-note {
    display: grid;
    gap: 3px;
    max-width: 42ch;
    margin: 0;
    color: #4b585f;
    font-size: .84rem;
    line-height: 1.5;
}
.project-access-note strong { color: var(--vermilion-ink); }

/* Footer compartido V7 · navegación completa y nueva identidad de Paca. */
.site-footer--shared {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(64px, 7vw, 90px);
    background:
        radial-gradient(circle at 8% 10%, rgba(201, 78, 43, .18), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(226, 149, 166, .09), transparent 24rem),
        linear-gradient(148deg, #071117, #03090d 72%);
    border-top: 2px solid #d85a32;
}

.site-footer--shared .site-footer-inner {
    grid-template-columns: minmax(280px, 1.3fr) minmax(130px, .48fr) minmax(170px, .62fr) minmax(140px, .48fr);
    gap: clamp(30px, 4vw, 58px);
}

.site-footer-intro > p {
    max-width: 470px;
    margin: 17px 0 20px;
    color: #96a5a8;
    line-height: 1.65;
}

.site-footer--shared .site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff6e8;
}

.site-footer--shared .site-footer-brand img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 1px solid rgba(240, 122, 50, .5);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(240, 122, 50, .055), 0 12px 28px rgba(0, 0, 0, .23);
}

.site-footer--shared .site-footer-brand > span { color: #fff6e8; }
.site-footer--shared .site-footer-brand > span > span { color: #f07a32; }

.site-footer-title {
    margin: 2px 0 9px;
    color: #e77c4c;
    font: 700 .66rem/1 var(--font-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
}

.site-footer--shared .site-footer-nav,
.site-footer--shared .site-footer-social { gap: 12px; }

.site-footer--shared .site-footer-nav a,
.site-footer--shared .site-footer-social a { width: fit-content; color: #c7d0d1; font-size: .86rem; }
.site-footer--shared .site-footer-nav a:hover,
.site-footer--shared .site-footer-social a:hover { color: #fff1df; }

.site-footer--shared .site-footer-social > span {
    margin-top: 8px;
    color: #718187;
    font: 600 .64rem/1.5 var(--font-mono);
    text-transform: uppercase;
}

.site-footer-mail-link {
    display: inline-block;
    padding-bottom: 7px;
    color: #f4b086;
    border-bottom: 1px solid rgba(240, 122, 50, .28);
    font: 650 .72rem/1.4 var(--font-mono);
}

.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.site-footer-legal span { color: #64757a; }
.site-footer-legal .site-footer-legal-label { color: #b8c3c2; }

@media (max-width: 920px) {
    .site-footer--shared .site-footer-inner { grid-template-columns: minmax(270px, 1.25fr) repeat(2, minmax(140px, .7fr)); }
    .site-footer--shared .site-footer-social { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
    .site-footer--shared .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer-intro { grid-column: 1 / -1; }
    .site-footer--shared .site-footer-social { grid-column: 1 / -1; }
    .site-footer-legal { justify-content: flex-start; }
}

@media (max-width: 460px) {
    .site-footer--shared .site-footer-inner { grid-template-columns: 1fr; }
    .site-footer-intro,
    .site-footer--shared .site-footer-social { grid-column: 1; }
}

/* ========================================================================== 
   FOOTER V8 · tinta neo-tradicional monocromática compartida
   ========================================================================== */

.site-footer:is(.site-footer--home, .site-footer--shared) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 7vw, 92px) max(5vw, 24px) 25px;
    color: #c6cecf;
    background:
        radial-gradient(ellipse at 76% 34%, rgba(231, 226, 216, .035), transparent 48%),
        linear-gradient(150deg, #071117 0%, #03090d 72%, #02070a 100%);
    border-top: 2px solid #d96836;
}

.site-footer:is(.site-footer--home, .site-footer--shared)::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(3, 9, 13, .97) 0 27%, rgba(3, 9, 13, .74) 50%, rgba(3, 9, 13, .24) 100%),
        linear-gradient(0deg, rgba(2, 7, 10, .54), transparent 42%);
}

.site-footer__aurora {
    display: none;
}

.site-footer__art {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    display: block;
    width: min(76vw, 1320px);
    height: 100%;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .12;
    -webkit-mask-image: linear-gradient(90deg, transparent 0 18%, rgba(0, 0, 0, .52) 45%, #000 70% 100%);
    mask-image: linear-gradient(90deg, transparent 0 18%, rgba(0, 0, 0, .52) 45%, #000 70% 100%);
}

.site-footer__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    filter: grayscale(1) sepia(.06) contrast(1.24) brightness(1.3);
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner,
.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-bottom {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner {
    display: grid;
    grid-template-columns: minmax(290px, 1.34fr) minmax(130px, .48fr) minmax(170px, .62fr) minmax(140px, .48fr);
    gap: clamp(30px, 4vw, 60px);
    margin: 0 auto 52px;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-intro > p {
    max-width: 500px;
    margin: 17px 0 21px;
    color: #98a5a7;
    line-height: 1.68;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: #f8f3e9;
    font: 700 clamp(1.35rem, 2vw, 1.78rem)/1 var(--font-display);
    letter-spacing: -.055em;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-brand img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 1px solid rgba(218, 104, 54, .5);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(218, 104, 54, .045), 0 12px 28px rgba(0, 0, 0, .24);
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-brand > span { color: #f8f3e9; }
.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-brand > span > span { color: #de713d; }

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-title {
    margin: 2px 0 10px;
    color: #d9ddda;
    font: 700 .65rem/1 var(--font-mono);
    letter-spacing: .115em;
    text-transform: uppercase;
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-nav, .site-footer-social) {
    display: grid;
    align-content: start;
    gap: 12px;
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-nav, .site-footer-social) a {
    width: fit-content;
    color: #b9c3c4;
    font-size: .86rem;
    transition: color .2s ease, transform .2s ease;
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-nav, .site-footer-social) a:hover {
    color: #fff4e6;
    transform: translateX(3px);
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-social > span {
    margin-top: 8px;
    color: #718084;
    font: 600 .63rem/1.5 var(--font-mono);
    letter-spacing: .035em;
    text-transform: uppercase;
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-mail, .site-footer-mail-link) {
    display: inline-block;
    max-width: 100%;
    width: fit-content;
    padding: 9px 0 7px;
    color: #d8ddda;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(218, 104, 54, .34);
    cursor: pointer;
    font: 650 .72rem/1.4 var(--font-mono);
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-mail, .site-footer-mail-link):hover,
.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-mail, .site-footer-mail-link):focus-visible {
    color: #fff4e6;
    border-bottom-color: #de713d;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding-top: 20px;
    color: #718084;
    border-top: 1px solid rgba(235, 230, 219, .1);
    font: .68rem/1.5 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-legal span { color: #8d9a9c; }
.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-legal .site-footer-legal-label { color: #aeb9b9; }

.site-footer:is(.site-footer--home, .site-footer--shared) :is(a, button):focus-visible {
    outline: 2px solid #e27b46;
    outline-offset: 4px;
}

@media (max-width: 1080px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner {
        grid-template-columns: minmax(270px, 1.3fr) repeat(3, minmax(120px, .7fr));
        gap: 32px;
    }
}

/* ========================================================================== 
   SISTEMA COMPARTIDO V10 · navegación koi y movimiento editorial
   ========================================================================== */

/* La navegación conserva la misma identidad en Inicio, Sobre mí, Servicios,
   Portfolio y Blog. La ruta actual queda indicada sin recurrir al azul. */
.navbar .nav-links { gap: clamp(15px, 1.8vw, 25px); }
.navbar .nav-link.active-page,
.navbar .nav-link[aria-current='page'] {
    color: var(--paper-strong);
}
.navbar .nav-link.active-page::after,
.navbar .nav-link[aria-current='page']::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.navbar .mobile-link[aria-current='page'] {
    color: #ff9a50;
    background: rgba(216, 69, 47, .1);
    border-left: 2px solid #f07a32;
}

body.neo-japan-site .navbar .nav-icon {
    color: #f07a32;
    text-shadow: 0 0 8px rgba(240, 122, 50, .35);
}
body.neo-japan-site .navbar .submenu-link::before {
    background: linear-gradient(180deg, #ff9a50, #d8452f);
    box-shadow: 0 0 10px rgba(240, 122, 50, .4);
}
body.neo-japan-site .navbar .submenu-link:hover,
body.neo-japan-site .navbar .submenu-link:focus-visible {
    background: rgba(240, 122, 50, .09);
}
body.neo-japan-site .navbar .submenu-link .sub-title {
    color: #fff9ed !important;
}
body.neo-japan-site .navbar .submenu-link:hover .sub-title,
body.neo-japan-site .navbar .submenu-link:focus-visible .sub-title {
    color: #ff9a50 !important;
}

/* CTA principal: más visible, pero integrado en el cristal Midnight. */
body.neo-japan-site .navbar .nav-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff8eb;
    border: 1px solid rgba(255, 158, 86, .68);
    background:
        linear-gradient(135deg, rgba(202, 64, 45, .88), rgba(224, 115, 53, .8)),
        rgba(10, 16, 20, .82);
    box-shadow:
        0 10px 28px rgba(155, 42, 29, .26),
        inset 0 1px rgba(255, 255, 255, .2);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
body.neo-japan-site .navbar .nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0 34%, rgba(255, 245, 226, .3) 48%, transparent 62% 100%);
    transform: translateX(-125%);
    transition: transform .62s cubic-bezier(.2,.8,.2,1);
}
body.neo-japan-site .navbar .nav-cta:hover,
body.neo-japan-site .navbar .nav-cta:focus-visible {
    color: #fffdf7;
    border-color: #ffad68;
    background:
        linear-gradient(135deg, #d74e38, #ee843e),
        #11181c;
    box-shadow:
        0 15px 34px rgba(155, 42, 29, .34),
        0 0 0 4px rgba(240, 122, 50, .07),
        inset 0 1px rgba(255, 255, 255, .24);
    transform: translateY(-2px);
}
body.neo-japan-site .navbar .nav-cta:hover::before,
body.neo-japan-site .navbar .nav-cta:focus-visible::before { transform: translateX(125%); }

/* Apariciones discretas: títulos desde la izquierda, etiquetas con un giro
   corto y tarjetas con profundidad. Solo se ocultan cuando JS está listo. */
html.motion-system-ready:not([data-motion='reduced']) [data-motion-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity .72s cubic-bezier(.2,.8,.2,1) var(--motion-delay, 0ms),
        transform .78s cubic-bezier(.16,1,.3,1) var(--motion-delay, 0ms);
}
html.motion-system-ready:not([data-motion='reduced']) [data-motion-reveal='title'] {
    transform: translate3d(-28px, 0, 0);
}
html.motion-system-ready:not([data-motion='reduced']) [data-motion-reveal='flip'] {
    transform: perspective(520px) rotateX(-68deg) translateY(8px);
    transform-origin: center bottom;
}
html.motion-system-ready:not([data-motion='reduced']) [data-motion-reveal='rise'] {
    transform: translate3d(0, 24px, 0) scale(.985);
}
html.motion-system-ready:not([data-motion='reduced']) [data-motion-reveal].is-motion-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (max-width: 900px) {
    .navbar .nav-links { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-motion-reveal] {
        opacity: 1 !important;
        clip-path: none !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
    body.neo-japan-site .navbar .nav-cta::before { display: none; }
    .navbar .nav-container::after {
        --koi-border-angle: 38deg;
        animation: none;
    }
}

/* Responsive V19 · cierre compartido legible en tablet y móvil. */
.site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-inner, .site-footer-intro, .site-footer-nav, .site-footer-bottom, .site-footer-legal) {
    min-width: 0;
}

.site-footer:is(.site-footer--home, .site-footer--shared) :is(a, p, span, strong) {
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-legal {
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) {
        padding-inline: 18px;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-mail-link {
        font-size: .64rem;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 920px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-intro {
        grid-column: 1 / -1;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-social {
        grid-column: auto;
    }

    .site-footer__art {
        width: 100%;
        opacity: .1;
        -webkit-mask-image: linear-gradient(90deg, transparent 0 6%, rgba(0, 0, 0, .72) 35%, #000 70% 100%);
        mask-image: linear-gradient(90deg, transparent 0 6%, rgba(0, 0, 0, .72) 35%, #000 70% 100%);
    }
}

@media (max-width: 700px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) {
        padding-inline: max(6vw, 22px);
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-intro, .site-footer-social) {
        grid-column: 1 / -1;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-legal {
        justify-content: flex-start;
    }

    .site-footer__art {
        top: 0;
        height: 68%;
        opacity: .08;
        -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
    }
}

/* ========================================================================== 
   IDENTIDAD C4 V15 · aplicaciones compartidas
   ========================================================================== */

.logo-brand-mark {
    object-fit: contain;
    padding: 2px;
    background: #07111a;
    border-color: rgba(240, 122, 50, .5);
    border-radius: 10px 3px 10px 3px;
}

.site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-brand img,
.site-footer--shared .site-footer-brand img {
    width: 60px;
    height: 60px;
    padding: 4px;
    object-fit: contain;
    background: rgba(7, 17, 26, .9);
    border-color: rgba(222, 113, 61, .58);
    border-radius: 16px 4px 16px 4px;
    box-shadow: 0 0 0 5px rgba(218, 104, 54, .04), 0 12px 28px rgba(0, 0, 0, .24);
}

@media (max-width: 460px) {
    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) :is(.site-footer-intro, .site-footer-social) {
        grid-column: 1;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared) .site-footer-mail {
        font-size: .66rem;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer:is(.site-footer--home, .site-footer--shared) :is(a, button) {
        transition: none;
    }
}

/* ========================================================================== 
   FOOTER V9 · tinta neo-tradicional extendida por toda la superficie
   ========================================================================== */

.site-footer:is(.site-footer--home, .site-footer--shared) {
    background: #03090d;
}

.site-footer:is(.site-footer--home, .site-footer--shared)::before {
    background:
        linear-gradient(180deg, rgba(2, 8, 11, .6), rgba(2, 8, 11, .7)),
        linear-gradient(90deg, rgba(2, 8, 11, .68) 0%, rgba(2, 8, 11, .48) 48%, rgba(2, 8, 11, .6) 100%);
}

.site-footer__art {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .28;
    -webkit-mask-image: none;
    mask-image: none;
}

.site-footer__art::before {
    content: none;
}

.site-footer__art img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    opacity: .78;
    filter: grayscale(1) sepia(.04) contrast(1.2) brightness(1.2);
    transform: scale(1.035);
}

@media (max-width: 920px) {
    .site-footer__art {
        width: 100%;
        opacity: .24;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .site-footer:is(.site-footer--home, .site-footer--shared)::before {
        background: rgba(2, 8, 11, .66);
    }
}

@media (max-width: 700px) {
    .site-footer__art {
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: .2;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .site-footer__art img {
        object-position: 58% center;
        transform: scale(1.08);
    }

    .site-footer__art::before {
        background-position: 42% center;
        opacity: .5;
        transform: scaleX(-1) scale(1.08);
    }

    .site-footer:is(.site-footer--home, .site-footer--shared)::before {
        background:
            linear-gradient(180deg, rgba(2, 8, 11, .69), rgba(2, 8, 11, .78)),
            linear-gradient(90deg, rgba(2, 8, 11, .24), transparent, rgba(2, 8, 11, .3));
    }
}