/* Home v2 · cabecera y portada con paleta koi.
   Se carga después de neo-japan.css para limitar los cambios a la Home. */

:root {
    --koi-orange: #f07a32;
    --koi-orange-bright: #ff943d;
    --koi-red: #d8452f;
    --koi-red-deep: #a92820;
    --koi-cream: #fff5e7;
    --koi-ink: #0b1013;
}

/* Separadores limpios: se retira la antigua trama diagonal entre bloques. */
.neo-japan-site .divider-ultra-fine {
    height: 1px;
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(240, 122, 50, .28) 35%, rgba(216, 69, 47, .4) 50%, rgba(240, 122, 50, .28) 65%, transparent);
    box-shadow: none;
    filter: none;
}

/* Barra de desplazamiento: una pieza koi discreta, no una barra genérica. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--koi-red) #151a1c;
}

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%, var(--koi-orange) 35%, #e44f32 68%, var(--koi-red-deep) 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;
}

/* Navegación: cristal más claro y translúcido, sin la antigua trama rayada. */
.navbar {
    top: 16px;
    right: 0;
    left: 0;
    width: auto;
    margin: 0;
}
.navbar.scrolled { top: 9px; }

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

/* La navegación está visible desde el HTML. No se sacrifica el primer pintado
   ni el LCP por una animación de entrada que depende de JavaScript. */
html.js .navbar:not(.is-mounted) .nav-container,
html.js .navbar.is-mounted .nav-container {
    opacity: 1;
    animation: none;
}

.navbar.scrolled .nav-container {
    background-color: rgba(13, 18, 21, .68);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .28),
        0 2px 12px rgba(216, 69, 47, .07),
        inset 0 1px 0 rgba(255, 255, 255, .11);
}

/*
 * Firma perimetral: el borde koi permanece siempre visible y un unico
 * reflejo cobre/crema, corto y tenue, recorre solo su contorno.
 */
@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;
    will-change: --koi-border-angle;
    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;
    text-shadow: none;
    transition: color .52s ease;
}
.navbar .logo .text-accent { color: var(--koi-orange-bright); }

.navbar .logo-brand-mark {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border: 1px solid rgba(255, 148, 61, .45);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(216, 69, 47, .07), 0 5px 14px rgba(0, 0, 0, .2);
}

.navbar .nav-link {
    position: relative;
    color: rgba(255, 245, 231, .78);
    text-shadow: none;
    transition: color .52s ease, text-shadow .52s ease;
}
.navbar .nav-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--koi-orange-bright), var(--koi-red));
    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,
.navbar .nav-link:focus-visible { color: #fff; text-shadow: none; }
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .has-submenu:focus-within > .nav-link::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.navbar :focus-visible {
    outline-color: var(--koi-orange-bright);
}

.navbar .nav-cta {
    border-color: rgba(255, 148, 61, .42);
    background: rgba(216, 69, 47, .055);
}
.navbar .nav-cta:hover,
.navbar .nav-cta:focus-visible {
    color: #fff;
    border-color: var(--koi-orange-bright);
    background: linear-gradient(125deg, var(--koi-red), var(--koi-orange));
    box-shadow: 0 10px 25px rgba(216, 69, 47, .22);
}

.navbar .submenu {
    border-color: rgba(240, 122, 50, .22);
    background: rgba(13, 18, 21, .86);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .38);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.navbar .submenu-link::before {
    background: linear-gradient(180deg, var(--koi-orange-bright), var(--koi-red));
    box-shadow: 0 0 9px rgba(240, 122, 50, .42);
}
.navbar .submenu-link:hover,
.navbar .submenu-link:focus-visible { background: rgba(240, 122, 50, .1); }
.navbar .submenu-link:hover .sub-title,
.navbar .submenu-link:focus-visible .sub-title,
.navbar .submenu-all-projects .sub-title { color: var(--koi-orange-bright); }
.navbar .submenu-separator {
    height: 1px;
    margin: 5px 16px;
    background: linear-gradient(90deg, transparent, rgba(240, 122, 50, .35), transparent);
}
.navbar .mobile-link-featured { color: var(--koi-orange-bright); font-size: 1.02rem; }

/* Sobre superficies claras conserva contraste con cristal gris tinta. */
.navbar.is-over-light .nav-container {
    border-color: rgba(222, 103, 51, .78);
    background-color: rgba(34, 39, 41, .82);
    box-shadow:
        0 16px 38px rgba(18, 23, 25, .2),
        0 2px 9px rgba(216, 69, 47, .055),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(18px) saturate(116%);
    -webkit-backdrop-filter: blur(18px) saturate(116%);
}

.navbar.is-over-light .logo { color: #f0e5d6; }
.navbar.is-over-light .nav-link { color: rgba(255, 245, 231, .8); }
.navbar.is-over-light .nav-link:hover,
.navbar.is-over-light .nav-link:focus-visible { color: #fff; }
.navbar.is-over-light .nav-cta {
    color: #ffd0a6;
    border-color: rgba(255, 148, 61, .4);
    background: rgba(216, 69, 47, .06);
}
.navbar.is-over-light .nav-cta:hover,
.navbar.is-over-light .nav-cta:focus-visible { color: #fffaf1; }
.navbar.is-over-light .mobile-toggle { color: #f0e5d6; }
.navbar.is-over-light .submenu {
    border-color: rgba(240, 122, 50, .22);
    background: rgba(27, 32, 34, .95);
    box-shadow: 0 24px 58px rgba(12, 16, 18, .34);
}
.navbar.is-over-light .submenu-link { color: #f0e5d6; }
.navbar.is-over-light .submenu-link .sub-desc { color: rgba(255, 245, 231, .62); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar .nav-container { background: rgba(24, 29, 31, .88); }
    .navbar .submenu { background: rgba(13, 18, 21, .97); }
}

/* Hero: el contenido ocupa la zona izquierda y la fotografía respira más. */
.hero-neo {
    --hero-scene-position: center;
    --hero-scene-scale: 1.006;
    min-height: 100svh;
    align-items: center;
    padding: 132px 0 64px;
}
.hero-neo > .container { width: 100%; }
.hero-neo-scene {
    background: #091013;
}
.hero-neo-scene img {
    object-position: var(--hero-scene-position);
    scale: var(--hero-scene-scale);
    image-rendering: auto;
    filter: none;
    will-change: auto;
    transform-origin: center center;
}
.hero-neo::before {
    background:
        linear-gradient(90deg,
            rgba(5, 9, 11, .84) 0%,
            rgba(5, 9, 11, .67) 31%,
            rgba(5, 9, 11, .24) 58%,
            rgba(5, 9, 11, .08) 100%),
        linear-gradient(0deg, rgba(7, 14, 17, .78), transparent 35%, rgba(7, 14, 17, .11));
}
.hero-neo::after {
    background:
        radial-gradient(circle at 11% 51%, rgba(240, 122, 50, .1), transparent 25%),
        linear-gradient(90deg, rgba(255, 245, 231, .035), transparent 32%);
}
.hero-neo-content {
    width: min(100%, 670px);
    max-width: 670px;
    margin: 0;
    padding: 14px 0;
    text-align: left;
}
.hero-neo .hero-title {
    max-width: 650px;
    font-size: clamp(3.15rem, 5.7vw, 6.2rem);
    line-height: .96;
    text-align: left;
    text-wrap: pretty;
    text-shadow: 0 8px 35px rgba(0, 0, 0, .34);
}
.hero-neo .hero-title em {
    color: var(--koi-orange-bright);
    background: linear-gradient(105deg, #ffbd74 0%, var(--koi-orange-bright) 42%, #e44b34 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
}
.hero-eyebrow::before {
    width: 8px;
    height: 8px;
    aspect-ratio: 1;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--koi-orange-bright);
    box-shadow: 0 0 0 3px rgba(240, 122, 50, .12);
    transform: none;
}
.hero-neo .hero-subtitle {
    max-width: 610px;
    color: rgba(255, 245, 231, .82);
    text-shadow: 0 3px 18px rgba(0, 0, 0, .55);
}
.hero-proof li::before { color: var(--koi-orange-bright); }
.hero-neo .btn-primary {
    background: linear-gradient(125deg, var(--koi-red), var(--koi-orange));
    box-shadow: 0 14px 34px rgba(216, 69, 47, .3);
}
.hero-neo .btn-primary:hover,
.hero-neo .btn-primary:focus-visible { color: var(--koi-ink); background: var(--koi-cream); }
.hero-neo .btn-secondary:hover,
.hero-neo .btn-secondary:focus-visible {
    border-color: var(--koi-orange-bright);
    background: rgba(240, 122, 50, .13);
}

/* Código ambiental: cambia sin depender de librerías o del vídeo futuro. */
.hero-code-feed {
    position: absolute;
    z-index: 1;
    top: 29%;
    right: clamp(28px, 5vw, 78px);
    width: clamp(360px, 28vw, 430px);
    padding: 16px 18px 17px;
    border: 1px solid rgba(255, 245, 231, .13);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(12, 17, 19, .43), rgba(12, 17, 19, .2));
    box-shadow: 0 20px 55px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-50%);
    pointer-events: none;
}
.hero-code-feed__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 245, 231, .56);
    font: 600 .58rem/1.4 var(--font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.hero-code-feed__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--koi-orange-bright);
    box-shadow: 0 0 0 0 rgba(255, 148, 61, .42);
    animation: koi-code-pulse 2.6s ease-out infinite;
}
.hero-code-feed__line {
    display: block;
    min-height: 1.45em;
    margin-top: 5px;
    color: rgba(255, 245, 231, .72);
    font: 400 clamp(.6rem, .72vw, .72rem)/1.45 var(--font-mono);
    white-space: nowrap;
    transition:
        opacity .24s ease,
        color .24s ease,
        transform .28s cubic-bezier(.22, 1, .36, 1),
        filter .24s ease;
    transition-delay: calc(var(--code-line-index, 0) * 34ms);
}
.hero-code-feed__line:nth-child(3) { color: #ffb66e; }
.hero-code-feed__line:nth-child(4) { color: rgba(232, 104, 75, .9); }
.hero-code-feed__line.is-leaving {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-5px);
}
.hero-code-feed__line.is-entering {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(5px);
    transition: none;
}
@keyframes koi-code-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 148, 61, .42); }
    65%, 100% { box-shadow: 0 0 0 8px rgba(255, 148, 61, 0); }
}

.hero-scene-caption { color: rgba(255, 245, 231, .48); }
.scroll-indicator .mouse { border-color: rgba(255, 245, 231, .58); }
.scroll-indicator .wheel { background: var(--koi-orange-bright); }

/* El efecto de hoja ha sido retirado por decisión visual. */
.sakura-scroll-leaf { display: none !important; }

@media (max-width: 1179px) {
    .hero-code-feed { display: none; }
    .hero-neo-content { max-width: 660px; }
}

@media (max-width: 900px) {
    .navbar .nav-container {
        width: auto;
        margin-inline: 14px;
        padding: 9px 20px;
        background-color: rgba(13, 18, 21, .62);
    }
    .navbar .mobile-menu {
        right: 14px;
        left: 14px;
        border-color: rgba(240, 122, 50, .24);
        background: rgba(13, 18, 21, .9);
        backdrop-filter: blur(20px) saturate(125%);
        -webkit-backdrop-filter: blur(20px) saturate(125%);
    }
    .navbar.is-over-light .mobile-menu {
        border-color: rgba(240, 122, 50, .24);
        background: rgba(27, 32, 34, .96);
        box-shadow: 0 24px 58px rgba(12, 16, 18, .36);
    }
    .navbar.is-over-light .mobile-link { color: #f0e5d6; }
    .navbar .mobile-link:hover,
    .navbar .mobile-link:focus-visible { color: var(--koi-orange-bright); }
}

@media (max-width: 700px) {
    .hero-neo {
        --hero-scene-position: center top;
        --hero-scene-scale: 1;
        min-height: 100svh;
        align-items: end;
        padding: 122px 0 52px;
    }
    .hero-neo-scene img { object-position: var(--hero-scene-position); scale: var(--hero-scene-scale); }
    .hero-neo::before {
        background:
            linear-gradient(180deg, rgba(5,9,11,.08) 0%, rgba(5,9,11,.2) 28%, rgba(5,9,11,.88) 62%, rgba(5,9,11,.97) 100%),
            linear-gradient(90deg, rgba(5,9,11,.28), transparent 70%);
    }
    .hero-neo-content { width: 100%; padding: 0; }
    .hero-neo .hero-title {
        max-width: 11ch;
        font-size: clamp(2.85rem, 13vw, 4.4rem);
        letter-spacing: -.065em;
    }
    .hero-neo .hero-subtitle {
        max-width: 37rem;
        font-size: .98rem;
        line-height: 1.65;
    }
    .hero-neo .hero-actions { gap: 10px; margin-top: 25px; }
    .hero-neo .hero-actions .btn { width: 100%; padding-inline: 18px; }
    .hero-proof { gap: 8px 17px; margin-top: 27px; }
    .scroll-indicator,
    .hero-scene-caption { display: none; }
}

@media (max-width: 430px) {
    .navbar .logo { gap: 7px; font-size: 1.12rem; }
    .navbar .logo-brand-mark { width: 29px; height: 29px; flex-basis: 29px; }
    .hero-eyebrow { font-size: .65rem; letter-spacing: .08em; }
    .hero-neo .hero-title { font-size: clamp(2.6rem, 12.6vw, 3.45rem); }
}

@media (max-width: 700px) {
    .navbar .nav-container {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
    .navbar .nav-container::after {
        --koi-border-angle: 38deg;
        opacity: .46;
        animation: none;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js .navbar.is-mounted .nav-container { animation: none; }
    .navbar .nav-container::after,
    .hero-code-feed__pulse { animation: none; }
    .navbar .nav-container::after {
        --koi-border-angle: 38deg;
        opacity: .38;
        will-change: auto;
    }
    .hero-code-feed__line { transition: none; }
}

/* ========================================================================== 
   IDENTIDAD C4 V15 · marca origami sin recorte circular
   ========================================================================== */

.navbar .logo-brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 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);
}

@media (max-width: 700px) {
    .navbar .logo-brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        padding: 1px;
        border-radius: 9px 2px 9px 2px;
    }
}

html[data-motion='reduced'] .navbar .nav-container::after,
html[data-motion='reduced'] .hero-code-feed__pulse { animation: none; }
html[data-motion='reduced'].js .navbar.is-mounted .nav-container { animation: none; }
html[data-motion='reduced'] .navbar .nav-container::after {
    --koi-border-angle: 38deg;
    opacity: .38;
    will-change: auto;
}

/* ========================================================================== 
   RESPONSIVE V19 · navegación y portada sin recortes
   ========================================================================== */

.hero-neo-content,
.hero-neo-content > *,
.navbar .nav-container,
.navbar .nav-links,
.navbar .nav-item { min-width: 0; }

.hero-neo :is(.hero-title, .hero-subtitle),
.navbar :is(.logo, .nav-link, .mobile-link, .sub-title, .sub-desc) {
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .navbar .mobile-menu {
        max-height: calc(100dvh - 104px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(240, 122, 50, .72) rgba(255, 255, 255, .06);
    }
}

@media (max-width: 768px) {
    /* Neutraliza la regla histórica de .hero que reducía la escena a contenido. */
    .hero.hero-neo {
        min-height: 100svh !important;
        padding: 118px 0 50px !important;
    }
}

@media (max-width: 430px) {
    .navbar .nav-container {
        margin-inline: 9px;
        padding-inline: 13px;
    }

    .navbar .mobile-menu {
        right: 9px;
        left: 9px;
        gap: 15px;
        padding: 17px;
    }

    .hero.hero-neo { padding-bottom: 38px !important; }
    .hero-neo .hero-subtitle { font-size: .94rem; line-height: 1.58; }
    .hero-proof { column-gap: 13px; }
}

@media (max-width: 350px) {
    .navbar .logo > span { font-size: 1rem; }
    .navbar .logo-brand-mark { width: 31px; height: 31px; flex-basis: 31px; }
    .hero-neo .hero-title { font-size: 2.48rem; }
}

.hero-response-pledge {
    margin: .8rem 0 0;
    color: rgba(255,255,255,.7);
    font-size: .76rem;
    letter-spacing: .045em;
}