/* Tema suricata. Paleta tomada de eandrade_landing_v2 (web/styles/globals.css:8, tailwind neutral + lime):
   fondo #0a0a0a, bordes neutral-800, texto neutral-200, acento lime-400 (#a3e635).
   Tipografía: Inter (texto) y JetBrains Mono (etiquetas y código), ambas SIL OFL, autoalojadas. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0a0a0a;
    --surface: rgb(23 23 23 / 0.5);
    --border: #262626;
    --border-strong: #404040;
    --text: #e5e5e5;
    --text-strong: #fafafa;
    --text-muted: #a3a3a3;
    --text-faint: #8a8a8a;
    --accent: #a3e635;
    --accent-text: #a3e635;
    --on-accent: #0a0a0a;
    --accent-border: rgb(163 230 53 / 0.4);
    --selection: rgb(163 230 53 / 0.3);
    --code-bg: #111111;

    --font-sans: var(--gh-font-body, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --w-narrow: 42rem;
    --w-main: 56rem;
    --w-wide: 64rem;
    color-scheme: dark;
}

/* Claro: lima-700 sobre blanco para que el acento conserve contraste de texto. */
.scheme-Light {
    --bg: #ffffff;
    --surface: #fafafa;
    --border: #e5e5e5;
    --border-strong: #d4d4d4;
    --text: #262626;
    --text-strong: #0a0a0a;
    --text-muted: #525252;
    --text-faint: #6b6b6b;
    --accent: #65a30d;
    --accent-text: #3f6212;
    --on-accent: #0a0a0a;
    --accent-border: rgb(63 98 18 / 0.45);
    --selection: rgb(163 230 53 / 0.45);
    --code-bg: #f5f5f5;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    .scheme-Auto {
        --bg: #ffffff;
        --surface: #fafafa;
        --border: #e5e5e5;
        --border-strong: #d4d4d4;
        --text: #262626;
        --text-strong: #0a0a0a;
        --text-muted: #525252;
        --text-faint: #6b6b6b;
        --accent: #65a30d;
        --accent-text: #3f6212;
        --accent-border: rgb(63 98 18 / 0.45);
        --selection: rgb(163 230 53 / 0.45);
        --code-bg: #f5f5f5;
        color-scheme: light;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
::selection { background: var(--selection); }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--accent); color: var(--on-accent);
    padding: .5rem 1rem; border-radius: 999px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--w-main); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { width: 100%; max-width: calc(var(--w-narrow) + 3rem); margin-left: auto; margin-right: auto; padding: 0 1.5rem; }
.container-wide { width: 100%; max-width: calc(var(--w-wide) + 3rem); margin-left: auto; margin-right: auto; padding: 0 1.5rem; }
.site-main { flex: 1; width: 100%; padding-bottom: 5rem; }

/* Cabecera */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4rem; }
.site-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--text-strong); }
.site-brand img { height: 1.75rem; width: auto; }
.brand-mark { font-family: var(--font-mono); color: var(--accent-text); font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.nav-item a { font-size: .9rem; color: var(--text-muted); transition: color .15s; }
.nav-item a:hover, .nav-item.nav-current a { color: var(--text-strong); }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 999px; width: 2.5rem; height: 2.5rem; cursor: pointer; padding: 0; position: relative; }
.nav-toggle-bar { position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; background: var(--text-strong); transition: transform .2s; }
.nav-toggle-bar:first-child { transform: translate(-50%, -4px); }
.nav-toggle-bar:last-child { transform: translate(-50%, 2px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translate(-50%, -1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translate(-50%, -1px) rotate(-45deg); }

@media (max-width: 720px) {
    .nav-toggle { display: inline-block; }
    .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: flex-start; gap: 1rem;
        padding: 1.25rem 1.5rem 1.5rem; background: var(--bg); border-bottom: 1px solid var(--border);
    }
    .site-nav.is-open { display: flex; }
    .nav-list { flex-direction: column; gap: 1rem; }
    .nav-item a { font-size: 1.05rem; }
}

/* Buscador: abre el modal de búsqueda de Ghost (data-ghost-search) */
.search-btn {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    background: transparent; color: var(--text-muted); font: inherit; font-size: .85rem;
    border: 1px solid var(--border-strong); border-radius: 999px; padding: .35rem .6rem .35rem .8rem;
    transition: color .15s, border-color .15s;
}
.search-btn:hover { color: var(--text-strong); border-color: var(--accent-border); }
.search-kbd { font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: .35rem; padding: 0 .35rem; }
@media (max-width: 720px) {
    .search-btn { width: 100%; justify-content: flex-start; padding: .6rem .9rem; font-size: 1rem; }
    .search-kbd { margin-left: auto; display: none; }
}

/* Modal de búsqueda y Portal: son iframes de Ghost con interfaz clara que no se puede estilizar
   desde fuera. En esquema oscuro se invierten (el giro de matiz conserva el verde del acento). */
.scheme-Dark iframe[title="portal-popup"] { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
    .scheme-Auto iframe[title="portal-popup"] { filter: invert(1) hue-rotate(180deg); }
}

/* Botones y etiquetas */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--accent); color: var(--on-accent);
    font-weight: 600; font-size: .95rem; padding: .6rem 1.1rem; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; transition: filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn-small { font-size: .8rem; padding: .35rem .8rem; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent-border); color: var(--text-strong); filter: none; }
.tag-chip {
    font-family: var(--font-mono); font-size: .75rem; color: var(--accent-text);
    border: 1px solid var(--accent-border); border-radius: 999px; padding: .1rem .6rem; transition: background .15s;
}
.tag-chip:hover { background: var(--selection); }

/* Portada, etiquetas y autores */
.hero { padding: 4.5rem 0 2.5rem; }
.eyebrow { font-family: var(--font-mono); font-size: .85rem; color: var(--accent-text); margin: 0 0 .75rem; }
.hero-title, .article-title, .gh-content :is(h2, h3, h4) { font-family: var(--gh-font-heading, var(--font-sans)); }
.hero-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.02em; color: var(--text-strong); margin: 0; }
.hero-desc { color: var(--text-muted); font-size: 1.15rem; max-width: 38rem; margin: 1rem 0 0; }
.hero-count { font-family: var(--font-mono); font-size: .8rem; color: var(--text-faint); margin: 1rem 0 0; }
.author-avatar { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--border-strong); margin-bottom: 1rem; }

/* Lista de publicaciones */
.post-list { border-top: 1px solid var(--border); }
.post-card {
    position: relative; display: flex; justify-content: space-between; gap: 1.5rem;
    padding: 1.75rem .75rem; margin: 0 -.75rem; border-bottom: 1px solid var(--border);
    border-radius: .5rem; transition: background .15s;
}
.post-card:hover { background: var(--surface); }
.post-card-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--text-faint); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.post-card-title { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.01em; color: var(--text-strong); margin: .5rem 0 0; }
.post-card:hover .post-card-title { color: var(--accent-text); }
/* Toda la tarjeta es clicable sin anidar enlaces; la etiqueta queda por encima. */
.card-link::after { content: ""; position: absolute; inset: 0; }
.post-card .tag-chip { position: relative; z-index: 1; }
.post-card-excerpt { color: var(--text-muted); margin: .6rem 0 0; max-width: 38rem; }
.post-card-image { flex: none; width: 15rem; align-self: center; position: relative; z-index: 1; }
.post-card-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .5rem; border: 1px solid var(--border); }
@media (max-width: 640px) {
    .post-card { flex-direction: column-reverse; }
    .post-card-image { width: 100%; }
}

.pagination { display: flex; align-items: center; justify-content: space-between; padding-top: 2.5rem; }
.pagination-info { font-family: var(--font-mono); font-size: .8rem; color: var(--text-faint); }

/* Artículo */
.article-header { padding-top: 4rem; }
.article-title { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; letter-spacing: -.025em; color: var(--text-strong); margin: .9rem 0 0; text-wrap: balance; }
.article-excerpt { font-size: 1.25rem; line-height: 1.5; color: var(--text-muted); margin: 1.25rem 0 0; }
.article-byline { font-size: .9rem; color: var(--text-muted); margin: 1.25rem 0 0; }
.article-byline a:hover { color: var(--accent-text); }
.article-image { margin: 2.5rem auto 0; }
.article-image img { display: block; width: 100%; border-radius: .75rem; border: 1px solid var(--border); }
.article-image figcaption, .kg-card figcaption { font-size: .85rem; color: var(--text-faint); text-align: center; margin-top: .75rem; }

.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; }
.reading-progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Contenido: medida de lectura ~68 caracteres, interlineado holgado */
.gh-content { padding-top: 2.5rem; font-size: 1.125rem; line-height: 1.75; color: var(--text); }
.gh-content > * { margin-top: 0; margin-bottom: 1.5rem; }
.gh-content h2, .gh-content h3, .gh-content h4 { color: var(--text-strong); line-height: 1.25; letter-spacing: -.015em; margin-top: 3rem; margin-bottom: 1rem; position: relative; text-wrap: balance; }
.gh-content h2 { font-size: 1.75rem; }
.gh-content h3 { font-size: 1.4rem; }
.gh-content h4 { font-size: 1.15rem; }
.gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.heading-anchor) { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.gh-content a:not(.kg-btn):not(.kg-bookmark-container):hover { text-decoration-color: var(--accent-text); }
.gh-content strong { color: var(--text-strong); }
.gh-content ul, .gh-content ol { padding-left: 1.5rem; }
.gh-content li { margin-bottom: .4rem; }
.gh-content li::marker { color: var(--accent-text); }
.gh-content hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }
.gh-content blockquote:not([class]) { margin-left: 0; margin-right: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--accent); color: var(--text-muted); font-style: italic; }
.gh-content img { border-radius: .5rem; }
.heading-anchor { position: absolute; left: -1.4rem; color: var(--text-faint); font-family: var(--font-mono); font-weight: 400; opacity: 0; transition: opacity .15s; }
.gh-content :is(h2, h3, h4):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
@media (max-width: 720px) { .heading-anchor { display: none; } .gh-content { font-size: 1.05rem; } }

/* Código */
.gh-content code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); border: 1px solid var(--border); border-radius: .35rem; padding: .1em .35em; }
.gh-content pre { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: .6rem; padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .9rem; line-height: 1.6; tab-size: 4; }
.gh-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.copy-btn {
    position: absolute; top: .5rem; right: .5rem; font-family: var(--font-mono); font-size: .7rem;
    background: var(--bg); color: var(--text-muted); border: 1px solid var(--border-strong);
    border-radius: 999px; padding: .15rem .65rem; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.gh-content pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }
.gh-content table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.gh-content th, .gh-content td { border-bottom: 1px solid var(--border); padding: .6rem .9rem; text-align: left; }
.gh-content th { color: var(--text-strong); font-weight: 600; }

/* Tarjetas del editor (Koenig). kg-width-wide y kg-width-full los exige gscan. */
.kg-card { margin-bottom: 1.5rem; }
.kg-width-wide { width: min(var(--w-wide), 100vw - 3rem); position: relative; left: 50%; transform: translateX(-50%); }
.kg-width-full { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }
.kg-image { display: block; margin-left: auto; margin-right: auto; }
.kg-gallery-container { display: flex; flex-direction: column; gap: .75rem; }
.kg-gallery-row { display: flex; gap: .75rem; }
.kg-gallery-image { flex: 1 1 0; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-card { margin-bottom: 1.5rem; }
.kg-bookmark-container { display: flex; border: 1px solid var(--border-strong); border-radius: .6rem; overflow: hidden; color: var(--text); transition: border-color .15s; }
.kg-bookmark-container:hover { border-color: var(--accent-border); }
.kg-bookmark-content { flex: 1; padding: 1.1rem 1.25rem; min-width: 0; }
.kg-bookmark-author, .kg-bookmark-publisher { color: var(--text-faint); }
.kg-bookmark-publisher::before { content: "·"; margin: 0 .35rem; }
.kg-bookmark-title { color: var(--text-strong); font-weight: 600; }
.kg-bookmark-description { color: var(--text-muted); font-size: .9rem; margin-top: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-faint); margin-top: .75rem; }
.kg-bookmark-icon { width: 1.25rem; height: 1.25rem; margin: 0; border-radius: 0; }
.kg-bookmark-thumbnail { flex: none; width: 10rem; position: relative; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 560px) { .kg-bookmark-thumbnail { display: none; } }
.kg-callout-card { display: flex; gap: .9rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: .6rem; background: var(--surface); }
.kg-callout-text { flex: 1; }
.kg-toggle-card { border: 1px solid var(--border-strong); border-radius: .6rem; padding: 1rem 1.25rem; }
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.kg-toggle-heading-text { margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.kg-toggle-card-icon { background: none; border: 0; color: var(--text-muted); cursor: pointer; }
.kg-toggle-content { display: none; margin-top: .75rem; }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content { display: block; }
.kg-btn { display: inline-flex; background: var(--accent); color: var(--on-accent); font-weight: 600; padding: .6rem 1.2rem; border-radius: 999px; }
.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }
.kg-video-card video, .kg-audio-card audio { width: 100%; }
.kg-file-card-container { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border-strong); border-radius: .6rem; padding: 1rem 1.25rem; color: var(--text); }
.kg-product-card .kg-product-card-container { border: 1px solid var(--border-strong); border-radius: .6rem; padding: 1.25rem; }
.kg-header-card { padding: 3rem 1.5rem; text-align: center; border: 1px solid var(--border); border-radius: .75rem; }
.kg-quote-card blockquote, .kg-blockquote-alt { border-left: 3px solid var(--accent); padding-left: 1.25rem; font-size: 1.25rem; }

/* Pie del artículo */
.article-footer { padding-top: 2rem; }
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.5rem; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.post-nav-item { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: .6rem; transition: border-color .15s; }
.post-nav-item:hover { border-color: var(--accent-border); }
.post-nav-next { grid-column: 2; text-align: right; }
.post-nav-label { font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint); }
.post-nav-title { color: var(--text-strong); font-weight: 600; line-height: 1.35; }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { grid-column: 1; } }

.article-comments { margin-top: 3rem; }
/* Sin esto el navegador pinta de blanco el iframe de comentarios: su documento es claro y la
   página declara color-scheme oscuro, y cuando difieren el iframe recibe un fondo opaco. */
.article-comments iframe { color-scheme: normal; }

/* Pie del sitio */
.site-footer { border-top: 1px solid var(--border); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; padding-bottom: 2rem; font-size: .85rem; color: var(--text-faint); }
.footer-line, .footer-nav { margin: 0; }
.footer-nav { display: flex; gap: 1.25rem; }
.footer-nav a:hover { color: var(--text-strong); }

.error-details { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
    .site-header, .site-footer, .reading-progress, .post-nav, .copy-btn { display: none; }
    body { background: #fff; color: #000; }
}