/* =========================================================================
   jgz.sh — Dark Editorial override (v2)
   Kyoto usa html { font-size: 62.5% } (1rem = 10px). Para evitar líos
   uso px en todos los font-size críticos.
   ========================================================================= */

:root,
html,
html[data-theme="light"],
html[data-theme="dark"],
html.is-color-mint,
html.is-color-onyx,
html.is-color-rust,
html.is-color-fossil,
html.is-color-ember,
html.is-color-ice,
html.is-color-pure,
html.is-color-default {
    --jgz-bg:            #0a0a0c;
    --jgz-bg-elev:       #101015;
    --jgz-bg-hover:      #16161c;
    --jgz-bg-code:       rgba(139, 92, 246, 0.12);
    --jgz-border:        rgba(255, 255, 255, 0.07);
    --jgz-border-strong: rgba(255, 255, 255, 0.14);
    --jgz-text:          #e6e6ea;
    --jgz-text-soft:     #b8b8c0;
    --jgz-text-secondary:#8a8a93;
    --jgz-text-muted:    #6b6b75;
    --jgz-accent:        #8b5cf6;
    --jgz-accent-strong: #a78bfa;
    --jgz-cyan:          #22d3ee;

    --jgz-font-sans: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --jgz-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --color-bg:           var(--jgz-bg) !important;
    --color-fg:           var(--jgz-text) !important;
    --color-text:         var(--jgz-text) !important;
    --color-accent:       var(--jgz-accent) !important;
    --color-primary:      var(--jgz-accent) !important;
    --background-color:   var(--jgz-bg) !important;
    --primary-text-color: var(--jgz-text) !important;
    --secondary-text-color: var(--jgz-text-secondary) !important;
    --brand-color:        var(--jgz-accent) !important;
    --base-contrast:      var(--jgz-bg-elev) !important;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
html, body, body[class] {
    background: var(--jgz-bg) !important;
    color: var(--jgz-text) !important;
    font-family: var(--jgz-font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body[class*="gh-font-heading-"],
body[class*="gh-font-body-"] {
    font-family: var(--jgz-font-sans) !important;
}

::selection { background: rgba(139, 92, 246, 0.35); color: #fff; }
* { border-color: var(--jgz-border); }

.site, .site-content { background: var(--jgz-bg) !important; }

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.container.medium,
.gh-head-inner.container.medium {
    max-width: 960px !important;
    padding-left: 28px;
    padding-right: 28px;
}

.site-main.site-layout { padding-top: 16px; }

.section-container { margin-top: 88px; }

@media (max-width: 720px) {
    .container.medium { padding-left: 20px; padding-right: 20px; }
    .section-container { margin-top: 56px; }
}

/* -------------------------------------------------------------------------
   Tipografía editorial
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--jgz-font-sans) !important;
    color: var(--jgz-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
}

/* Hero */
.hero-intro h1,
.gh-content.hero-intro h1 {
    font-size: clamp(40px, 6vw, 68px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    margin: 14px 0 22px !important;
    font-weight: 700 !important;
}

/* Section titles */
.section-title,
.feed-header-title {
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: var(--jgz-text) !important;
    position: relative;
    padding-bottom: 14px;
    margin: 0;
}
.section-title::after,
.feed-header-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 1px;
    background: var(--jgz-accent);
}

.feed-header { margin-bottom: 24px; }

/* Body */
body, p, li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--jgz-text-soft) !important;
}
.hero-intro p,
.gh-content.hero-intro p {
    color: var(--jgz-text-soft) !important;
    font-size: 17px;
    line-height: 1.7;
    max-width: 64ch;
}

a { color: var(--jgz-accent-strong); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--jgz-cyan); }
strong, b { color: var(--jgz-text) !important; font-weight: 600; }

/* -------------------------------------------------------------------------
   Code
   ------------------------------------------------------------------------- */
code, kbd, samp,
.gh-content code,
p code, li code {
    font-family: var(--jgz-font-mono) !important;
    font-size: 0.88em !important;
    background: var(--jgz-bg-code);
    color: var(--jgz-accent-strong);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.18);
    font-weight: 500;
}
h1 code, h2 code, h3 code, .hero-intro h1 code {
    font-size: 0.78em !important;
    padding: 2px 6px;
    background: rgba(139, 92, 246, 0.14);
    color: var(--jgz-accent-strong);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 6px;
}
pre {
    background: #07070a !important;
    border: 1px solid var(--jgz-border) !important;
    padding: 18px 20px !important;
    border-radius: 8px;
    overflow-x: auto;
}
pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--jgz-text-soft);
    font-size: 14px !important;
}

/* -------------------------------------------------------------------------
   HEADER — sin altura fija, sin overlapping
   ------------------------------------------------------------------------- */
:root { --navbar-height: auto !important; }

#gh-head, .gh-head {
    background: var(--jgz-bg) !important;
    border-bottom: 1px solid var(--jgz-border);
    height: auto !important;
    padding: 22px 0 18px !important;
    position: relative;
    z-index: 5;
}
.gh-head-inner.no-profile,
.gh-head-inner { background: transparent !important; }

.gh-head-brand { margin-bottom: 0 !important; align-items: center; }
.gh-head-brand-wrapper { gap: 4px !important; }

.gh-head-logo-text { height: auto !important; }
.gh-head-logo-wrapper img,
.gh-head-logo img { max-height: 44px; width: auto; }

.head-logo { height: 44px !important; aspect-ratio: 1/1; }
.head-logo.round {
    border: 1px solid var(--jgz-border-strong);
    border-radius: 999px;
    overflow: hidden;
    width: 44px; height: 44px;
}

/* Logo text fallback */
.gh-head-logo.h1, a.h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--jgz-text) !important;
}

/* Tagline — sobrescribe el estilo NERV de evangelion.css */
.sub-heading.tagline,
.tagline {
    color: var(--jgz-text-secondary) !important;
    font-family: var(--jgz-font-sans) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    margin-top: 4px;
    text-shadow: none !important;
}

/* Nav menu */
.gh-head-menu,
.gh-head-actions {
    font-size: 14px !important;
    font-weight: 500 !important;
}
.gh-head-menu .nav,
nav.gh-head-menu ul.nav {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    align-items: center;
}
.gh-head-menu .nav li { margin: 0; position: relative; }

.gh-head-menu .nav a,
.gh-head .nav a {
    color: var(--jgz-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    padding: 6px 0 !important;
    position: relative;
    transition: color 0.15s ease;
    text-transform: none !important;
}
.gh-head-menu .nav a:hover,
.gh-head-menu .nav .nav-current a,
.gh-head .nav li:hover a,
.gh-head .nav li.nav-current a {
    color: var(--jgz-text) !important;
}

/* Quita el underline animado del original (con :hover left/width) y usa uno fijo */
.gh-head .nav li::after { display: none !important; }
.gh-head .nav li.nav-current::after {
    display: block !important;
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--jgz-accent) !important;
    transition: none !important;
}

/* Icon buttons */
.gh-icon-btn,
.gh-search {
    background: transparent !important;
    border: 1px solid var(--jgz-border) !important;
    color: var(--jgz-text-soft) !important;
    border-radius: 999px !important;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    padding: 0 !important;
}
.gh-icon-btn:hover {
    border-color: var(--jgz-accent) !important;
    color: var(--jgz-text) !important;
    background: rgba(139, 92, 246, 0.08) !important;
}
.gh-icon-btn svg,
.gh-icon-btn .svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}
.gh-icon-btn:hover svg { filter: none !important; }

.head-action-social { gap: 12px !important; }

.gh-theme-toggle { display: none !important; }

/* Burger */
.gh-burger { color: var(--jgz-text) !important; }

/* -------------------------------------------------------------------------
   Wave separator — neutralizado por completo
   ------------------------------------------------------------------------- */
.wave-separator {
    background: var(--jgz-border) !important;
    background-image: none !important;
    height: 1px !important;
    width: 100%;
    border: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0.6;
    position: static !important;
    margin: 0 !important;
}
.wave-separator::before,
.wave-separator::after {
    display: none !important;
    content: none !important;
}
.head-separator {
    margin: 0 !important;
    padding: 0 !important;
}
#gh-head .head-separator { display: none !important; }

/* -------------------------------------------------------------------------
   Hero / intro
   ------------------------------------------------------------------------- */
.hero-intro,
section.hero-intro,
.tag-hash-home-intro {
    padding-top: 56px !important;
    padding-bottom: 8px !important;
    background: transparent !important;
    border: none !important;
}
.hero-intro > p:first-child {
    color: var(--jgz-text-muted) !important;
    font-family: var(--jgz-font-mono) !important;
    font-size: 13px !important;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
}
.hero-intro > p:first-child code {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--jgz-text-muted);
    font-size: inherit;
}
.hero-intro hr,
.gh-content hr {
    border: none !important;
    height: 1px !important;
    background: var(--jgz-border) !important;
    margin: 36px 0 !important;
}
.hero-intro .kg-image-card,
.hero-intro figure.kg-card {
    margin: 32px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--jgz-border);
}

/* -------------------------------------------------------------------------
   Subscription
   ------------------------------------------------------------------------- */
.subscription-wrapper {
    margin-top: 44px;
    padding: 26px;
    background: var(--jgz-bg-elev);
    border: 1px solid var(--jgz-border);
    border-radius: 10px;
}
.subscribe-title,
.body-1.subscribe-title {
    color: var(--jgz-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 14px;
}
.form-wrapper.cover-form,
.form-wrapper.inline-form {
    display: flex;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
}
.auth-email,
input.auth-email,
input[type="email"] {
    flex: 1;
    background: var(--jgz-bg) !important;
    border: 1px solid var(--jgz-border) !important;
    color: var(--jgz-text) !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    font-family: var(--jgz-font-sans) !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease;
}
.auth-email::placeholder { color: var(--jgz-text-muted) !important; }
.auth-email:focus {
    border-color: var(--jgz-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */
.button, button.button, a.button {
    font-family: var(--jgz-font-sans) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    padding: 11px 20px !important;
    border-radius: 8px !important;
    border: 1px solid var(--jgz-border) !important;
    background: transparent !important;
    color: var(--jgz-text) !important;
    transition: all 0.15s ease !important;
    text-transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.button:hover {
    border-color: var(--jgz-accent) !important;
    background: rgba(139, 92, 246, 0.08) !important;
}
.button-primary {
    background: var(--jgz-accent) !important;
    border-color: var(--jgz-accent) !important;
    color: #fff !important;
}
.button-primary:hover {
    background: var(--jgz-accent-strong) !important;
    border-color: var(--jgz-accent-strong) !important;
    color: #fff !important;
}
.button-secondary { color: var(--jgz-text-soft) !important; }
.button-secondary:hover { color: var(--jgz-text) !important; }
.button.round { border-radius: 999px !important; }

.button-center { display: flex; justify-content: center; margin-top: 32px; }
.button .icon, a.button svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------------------
   Cards (Creando)
   ------------------------------------------------------------------------- */
.kg-grid.kg-grid-2col,
.cards.kg-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 720px) {
    .kg-grid.kg-grid-2col,
    .cards.kg-grid { grid-template-columns: 1fr !important; }
}

.card, article.card {
    background: var(--jgz-bg-elev) !important;
    border: 1px solid var(--jgz-border) !important;
    border-radius: 10px !important;
    padding: 22px !important;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}
.card:hover {
    border-color: var(--jgz-border-strong) !important;
    background: var(--jgz-bg-hover) !important;
    transform: translateY(-1px);
}
.card-wrapper { padding: 0 !important; }
.card-title,
.card h2.card-title,
.card .h3.card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--jgz-text) !important;
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
}
.card-title .icon {
    flex-shrink: 0;
    width: 14px; height: 14px;
    margin-top: 6px;
    color: var(--jgz-accent);
    transition: transform 0.2s ease;
}
.card:hover .card-title .icon { transform: translateX(3px); }
.card-excerpt,
.sub-heading.card-excerpt {
    color: var(--jgz-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Feed (Pensamientos) — lista editorial
   ------------------------------------------------------------------------- */
.post-feed.expanded,
.post-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.feed.post,
article.feed.post {
    display: grid !important;
    grid-template-columns: 72px 1fr auto !important;
    gap: 22px;
    align-items: center;
    padding: 22px 0 !important;
    border-bottom: 1px solid var(--jgz-border) !important;
    background: transparent !important;
    transition: background 0.15s ease;
    position: relative;
}
.feed.post:hover { background: rgba(255, 255, 255, 0.015) !important; }
.feed.post:first-child { border-top: 1px solid var(--jgz-border); }

.feed-image,
.feed-image.u-placeholder {
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid var(--jgz-border);
    background: var(--jgz-bg-elev) !important;
    flex-shrink: 0;
}
.feed-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.feed-wrapper {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.feed-title,
.body-1.feed-title,
.post-feed.expanded .feed-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--jgz-text) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    text-transform: none !important;
    font-family: var(--jgz-font-sans) !important;
}
.feed-excerpt,
.post-feed:not(.expanded) .feed-excerpt {
    color: var(--jgz-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 !important;
}
.feed-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--jgz-text-muted);
    font-size: 12px;
}

/* Fecha / meta — visible pero discreta */
.feed-date,
.feed-visibility,
.feed-reading-time,
[data-month],
.feed.post[data-month]::before {
    color: var(--jgz-text-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.04em;
    font-family: var(--jgz-font-mono) !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

.feed-right .icon,
.feed-icon .icon {
    width: 14px; height: 14px;
    color: var(--jgz-text-muted);
}
.dot-spacer { display: none !important; }

@media (max-width: 600px) {
    .feed.post {
        grid-template-columns: 56px 1fr !important;
        gap: 14px;
    }
    .feed-image, .feed-image.u-placeholder { width: 56px !important; height: 56px !important; }
    .feed-right { display: none; }
    .feed-excerpt { -webkit-line-clamp: 3; }
    .feed-title { font-size: 15px !important; }
}

/* -------------------------------------------------------------------------
   Logo board / galerías
   ------------------------------------------------------------------------- */
.section-logo-board .logo-list,
.section-logo-board { background: transparent !important; }
.kg-gallery-card, .kg-image-card {
    border-radius: 8px !important;
    overflow: hidden;
}
.kg-gallery-image img, .kg-image {
    border-radius: 6px !important;
    border: 1px solid var(--jgz-border);
    filter: brightness(0.95) contrast(1.05);
    transition: filter 0.3s ease;
}
.kg-gallery-image img:hover, .kg-image:hover { filter: brightness(1) contrast(1.05); }

/* -------------------------------------------------------------------------
   Single post
   ------------------------------------------------------------------------- */
.single-content, .gh-content { color: var(--jgz-text-soft) !important; }
.gh-content h1, .gh-content h2, .gh-content h3 {
    color: var(--jgz-text) !important;
    margin-top: 1.6em !important;
    margin-bottom: 0.6em !important;
}
.gh-content h2 { font-size: clamp(22px, 2.6vw, 28px) !important; padding-top: 8px; }
.gh-content h3 { font-size: clamp(18px, 2vw, 22px) !important; }
.gh-content blockquote {
    border-left: 2px solid var(--jgz-accent) !important;
    background: rgba(139, 92, 246, 0.05);
    padding: 16px 22px !important;
    margin: 28px 0 !important;
    border-radius: 0 6px 6px 0;
    color: var(--jgz-text-soft);
    font-style: normal;
}
.gh-content blockquote p { margin: 0; color: var(--jgz-text-soft) !important; }
.gh-content a {
    color: var(--jgz-accent-strong);
    border-bottom: 1px solid rgba(139, 92, 246, 0.35);
}
.gh-content a:hover { color: var(--jgz-cyan); border-bottom-color: var(--jgz-cyan); }

/* Tags */
.post-tag, .tag, .tags a {
    background: var(--jgz-bg-elev) !important;
    color: var(--jgz-text-secondary) !important;
    border: 1px solid var(--jgz-border) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.post-tag:hover, .tag:hover {
    border-color: var(--jgz-accent) !important;
    color: var(--jgz-text) !important;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--jgz-bg) !important;
    border-top: 1px solid var(--jgz-border);
    margin-top: 96px;
    padding: 44px 0 32px;
}
.site-footer .wave-separator { display: none !important; }
.footer-inner-main {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.footer-nav .nav,
.footer-nav-flex .nav {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-nav .nav a {
    color: var(--jgz-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.footer-nav .nav a:hover { color: var(--jgz-text) !important; }

.footer-copyright,
.body-1.footer-copyright {
    text-align: center;
    color: var(--jgz-text-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em;
    font-weight: 400;
    text-transform: none;
    font-family: var(--jgz-font-sans) !important;
}
.nerv-status {
    font-family: var(--jgz-font-mono) !important;
    color: var(--jgz-accent) !important;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-right: 6px;
    text-shadow: none !important;
}
.footer-signature { display: block; margin-top: 6px; opacity: 0.7; font-size: 11px; }
.footer-signature .menu-item.badge {
    color: var(--jgz-text-secondary) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: 11px !important;
}
.footer-signature .menu-item.badge:hover { color: var(--jgz-accent-strong) !important; }

/* -------------------------------------------------------------------------
   Limpieza
   ------------------------------------------------------------------------- */
.card, .feed, .button, input { box-shadow: none !important; }
.is-color-mint, .is-color-onyx, .is-color-rust, .is-color-fossil,
.is-color-ember, .is-color-ice, .is-color-pure { background: var(--jgz-bg) !important; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #2a2a32 var(--jgz-bg); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--jgz-bg); }
*::-webkit-scrollbar-thumb { background: #2a2a32; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--jgz-accent); }