/* penthos — paleta y estilos */
:root{
/* paleta original */
--fondo:#1A1A1E;
--azul-profundo:#29559C;
--azul:#376BBF;
--azul-lavanda:#748FD2;
--lavanda:#9D96C0;
--lavanda-azulado:#9397C7;
/* derivados (más oscuros, sacados del borde del fondo de pantalla) */
--abismo:#111114;
--superficie:#1A1A1E;
--superficie-2:#202026;
--linea:#2A2A33;
--texto:#D8DAE8;
--texto-suave:#8E92AE;
--texto-tenue:#5D6078;
--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;min-height:100vh;
background:radial-gradient(ellipse 80% 60% at 50% 30%, var(--fondo) 0%, var(--abismo) 70%) fixed, var(--abismo);
color:var(--texto);font-family:var(--sans);font-size:17px;line-height:1.7;
-webkit-font-smoothing:antialiased;
}
a{color:var(--azul-lavanda);text-decoration:none}
a:hover{color:var(--lavanda)}
::selection{background:var(--azul-profundo);color:#fff}

/* ---------- barra ---------- */
.top{position:sticky;top:0;z-index:10;background:rgba(17,17,20,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.top-in{max-width:980px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px}
.logo{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--texto)}
.logo span{color:var(--azul)}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav a{font-size:14px;color:var(--texto-suave);padding:6px 12px;border-radius:2px}
nav a:hover{color:var(--texto);background:var(--superficie-2)}
nav a.on{color:var(--texto);background:var(--superficie-2)}

main{max-width:980px;margin:0 auto;padding:0 20px 80px}

/* ---------- portada ---------- */
.hero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:64px 0 48px;border-bottom:1px solid var(--linea)}
.hero h1{font-size:clamp(40px,7vw,64px);font-weight:500;letter-spacing:-.02em;margin:0;line-height:1}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--azul),var(--lavanda));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--texto-suave);max-width:440px;margin:18px 0 0}
.flor{display:block;width:330px;height:auto;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 28px rgba(55,107,191,.18))}

.filters{display:flex;gap:8px;margin:32px 0 8px;flex-wrap:wrap}
.chip{font:inherit;font-size:13px;color:var(--texto-suave);background:none;border:1px solid var(--linea);border-radius:2px;padding:4px 14px;cursor:pointer}
.chip:hover{color:var(--texto);border-color:var(--texto-tenue)}
.chip.on{color:#fff;background:var(--azul-profundo);border-color:var(--azul-profundo)}

.list{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--linea)}
.item time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--texto-tenue)}
.item h2{font-size:20px;font-weight:500;margin:0 0 4px;letter-spacing:-.005em}
.item h2 a{color:var(--texto)}
.item:hover h2 a{color:var(--azul-lavanda)}
.hero>div,.item>div{min-width:0}
.item p{margin:0;color:var(--texto-suave);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item{position:relative;cursor:pointer}
.item h2 a::after{content:"";position:absolute;inset:0}
.item .mas{position:relative;z-index:1;color:var(--texto-suave);letter-spacing:.1em}
.item:hover .mas,.item .mas:hover{color:var(--azul-lavanda)}
.tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:2px;white-space:nowrap}
.tag.ensayo{color:var(--azul-lavanda);background:rgba(55,107,191,.14)}
.tag.poesía{color:var(--lavanda);background:rgba(157,150,192,.14)}
.tag.bitácora{color:var(--lavanda-azulado);background:rgba(147,151,199,.10);border:1px solid rgba(147,151,199,.2)}

/* ---------- entrada ---------- */
.post{max-width:680px;margin:0 auto;padding:56px 0 0}
.back{font-size:14px;color:var(--texto-suave)}
.post header{margin:28px 0 40px;padding-bottom:28px;border-bottom:1px solid var(--linea)}
.post h1{font-size:clamp(30px,5vw,42px);font-weight:500;line-height:1.15;letter-spacing:-.015em;margin:14px 0 14px}
.meta{font-variant-numeric:tabular-nums;font-size:13px;color:var(--texto-tenue);display:flex;gap:16px;flex-wrap:wrap}
.prose p{margin:0 0 1.3em}
.prose.verse p{white-space:pre-wrap;line-height:1.85;margin-bottom:1.8em}
.prose.verse{tab-size:4}
.prose.verse pre{white-space:pre-wrap;line-height:1.85;margin:0 0 1.8em;padding-left:4ch;font:inherit;color:inherit;background:none}
.prose.verse pre code{font:inherit;background:none;padding:0}
.prose h3{font-size:15px;font-weight:500;color:var(--azul-lavanda);letter-spacing:.05em;margin:2.4em 0 1em}
.prose h3::before{content:"// ";color:var(--texto-tenue)}
.prose em{color:#e6e4f2}
.prose a{border-bottom:1px solid rgba(116,143,210,.4)}
.prose blockquote{margin:1.5em 0;padding-left:18px;border-left:2px solid var(--azul-profundo);color:var(--texto-suave)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.post-nav a{display:block;padding:16px 18px;border:1px solid var(--linea);border-radius:2px;background:var(--superficie)}
.post-nav a:hover{border-color:var(--azul-profundo)}
.post-nav small{display:block;font-size:11px;color:var(--texto-tenue);text-transform:uppercase;letter-spacing:.06em}
.post-nav span{color:var(--texto);font-size:15px}
.post-nav .next{text-align:right}

/* ---------- archivo ---------- */
.page{max-width:680px;margin:0 auto;padding:56px 0 0}
.page h1{font-size:36px;font-weight:500;letter-spacing:-.015em;margin:0 0 8px}
.lede{color:var(--texto-suave);margin:0 0 40px}
.year{font-variant-numeric:tabular-nums;font-size:13px;color:var(--azul);margin:40px 0 8px;letter-spacing:.08em}
.arch a{display:flex;gap:16px;padding:10px 0;border-bottom:1px dashed var(--linea);color:var(--texto)}
.arch a:hover{color:var(--azul-lavanda)}
.arch time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--texto-tenue);min-width:70px}

/* ---------- sobre ---------- */
.about{display:grid;grid-template-columns:180px 1fr;gap:40px;margin-top:8px}
.avatar{width:180px;aspect-ratio:1;border-radius:14px;border:1px solid var(--linea);background:var(--superficie);display:grid;place-items:center;overflow:hidden}
.avatar .flor{width:78%;filter:none}
.bio p{margin:0 0 1.1em}
details.bib{margin-top:48px;border-top:1px solid var(--linea);padding-top:24px}
details.bib summary{cursor:pointer;font-size:20px;font-weight:500;list-style:none}
details.bib summary::-webkit-details-marker{display:none}
details.bib summary::after{content:" +";color:var(--azul-lavanda);}
details.bib[open] summary::after{content:" −"}
details.bib ol{list-style:none;padding:0;margin:20px 0 0;font-size:14.5px;color:var(--texto-suave)}
details.bib li{padding:8px 0 8px 2em;text-indent:-2em;border-bottom:1px dashed var(--linea)}
.links{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:8px}
.links a{display:flex;justify-content:space-between;padding:12px 16px;border:1px solid var(--linea);border-radius:2px;background:var(--superficie);color:var(--texto)}
.links a:hover{border-color:var(--azul-profundo)}
.links small{color:var(--texto-tenue)}
.note{font-size:13px;color:var(--texto-tenue);border:1px dashed var(--linea);border-radius:2px;padding:10px 14px;margin-top:28px}


footer.site{max-width:980px;margin:0 auto;padding:28px 20px 40px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;font-size:12px;color:var(--texto-tenue)}

@media (max-width:760px){
body{font-size:16px}
.top-in{flex-direction:column;align-items:flex-start;gap:8px}
nav{margin-left:-12px}
.hero{grid-template-columns:1fr;padding:40px 0 32px}
.hero .flor{display:none}
.item{grid-template-columns:1fr;gap:6px}
.item .tag{justify-self:start;order:-1}
.about{grid-template-columns:1fr}
.post-nav{grid-template-columns:1fr}
}
.item[hidden]{display:none}