:root{
  --paper:#ffffff;
  --ink:#1c1a17;
  --ink-soft:#6b6b6b;
  --line:#e2e2e2;
  --type:'Special Elite', 'Courier New', Courier, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--type);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* Cabecera */
header.top{
  height:60px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  flex:none;
}
.home{font-size:18px}
.home:hover{opacity:.7}
.menu{display:flex;gap:24px;font-size:16px}
.menu a{color:var(--ink-soft)}
.menu a:hover,.menu a.on{color:var(--ink)}

main{
  flex:1;
  padding:72px 16px 0;
}
h1{
  font-weight:400;
  font-size:clamp(30px, 6.5vw, 76px);
  line-height:1.1;
  letter-spacing:.02em;
  text-align:center;
}
.pronto{text-align:center;color:var(--ink-soft);margin-top:96px}

/* Entrada */
.entry{
  max-width:640px;
  margin:96px auto 0;
}
.date{
  font-size:14px;
  color:var(--ink-soft);
}
.entry h2{
  font-weight:400;
  font-size:clamp(26px, 4.5vw, 38px);
  line-height:1.2;
  margin:10px 0 40px;
}
.entry p{
  font-size:18px;
  line-height:1.85;
  margin-bottom:1.4em;
}
.entry img{max-width:100%;height:auto;display:block;margin:1.6em auto;filter:grayscale(1)}
.end{
  text-align:center;
  color:var(--ink-soft);
  margin-top:40px;
}

/* Compartir · comentar · suscribirme */
.share{
  max-width:640px;
  margin:40px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  position:relative;
}
.share .btn{
  color:var(--ink);
  font:inherit;
  font-size:15px;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  padding:0 0 2px;
  cursor:pointer;
}
.share .btn:hover{border-color:var(--ink)}
.share-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  background:var(--paper);
  border:1px solid var(--line);
  padding:6px 0;
  min-width:160px;
  z-index:5;
}
.share-menu[hidden]{display:none}
.share-menu a{display:block;padding:8px 18px;font-size:15px}
.share-menu a:hover{background:#f6f6f6}

/* Suscripción */
.sus-form{
  max-width:360px;
  margin:24px auto 0;
  display:flex;
  border-bottom:1px solid var(--ink);
}
.sus-form[hidden]{display:none}
.sus-form input{
  flex:1;min-width:0;
  font:inherit;font-size:16px;color:var(--ink);
  background:none;border:0;padding:10px 0;outline:none;
}
.sus-form input::placeholder{color:var(--ink-soft)}
.sus-form button{
  font:inherit;font-size:15px;background:none;border:0;
  color:var(--ink);cursor:pointer;padding:0 0 0 12px;
}
.sus-form button:hover{opacity:.6}
.sus-ok{text-align:center;font-size:15px;color:var(--ink-soft);margin-top:24px}

/* Comentarios */
.comments{
  max-width:640px;
  margin:56px auto 0;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.comments[hidden]{display:none}
.comment{margin-bottom:32px}
.comment .who{font-size:15px}
.comment .who span{color:var(--ink-soft);font-size:13px;margin-left:10px}
.comment p{font-size:16px;line-height:1.75;margin-top:8px;white-space:pre-line}
.comment .reply-btn{
  background:none;border:0;font:inherit;font-size:13px;
  color:var(--ink-soft);cursor:pointer;margin-top:8px;padding:0;
}
.comment .reply-btn:hover{color:var(--ink)}
.replies{
  margin:20px 0 0 24px;
  padding-left:20px;
  border-left:1px solid var(--line);
}
.replies .comment{margin-bottom:20px}
.form{margin-top:16px}
.form input,.form textarea{
  width:100%;
  font:inherit;font-size:16px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;outline:none;margin-bottom:14px;
}
.form textarea{resize:vertical;min-height:90px;line-height:1.6}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-soft)}
.form .row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.form small{font-size:12px;color:var(--ink-soft)}
.form button{
  font:inherit;font-size:15px;
  background:var(--ink);color:var(--paper);
  border:0;padding:8px 18px;cursor:pointer;
}
.form button:hover{opacity:.85}
.form .cancel{background:none;color:var(--ink-soft);padding:8px 0;margin-right:16px}
.form .cancel:hover{color:var(--ink);opacity:1}
.thanks{font-size:15px;color:var(--ink-soft);margin-top:8px}

/* Siguiente (izquierda) / Anterior (derecha) */
.pager{
  max-width:640px;
  margin:56px auto 0;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:15px;
}
.pager a{display:block;max-width:48%}
.pager a:hover{opacity:.7}
.pager small{display:block;color:var(--ink-soft);font-size:13px;margin-bottom:4px}
.pager .prev{text-align:right;margin-left:auto}

/* Archivo */
.archive{
  max-width:640px;
  margin:96px auto 0;
}
.archive h3{
  font-weight:400;
  font-size:20px;
  margin:48px 0 12px;
  color:var(--ink-soft);
}
.archive h3:first-child{margin-top:0}
.archive ul{list-style:none}
.archive li{
  display:flex;
  gap:24px;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.archive .date{flex:none;width:64px}
.archive li a{font-size:18px}
.archive li a:hover{opacity:.7}

/* 404 */
.nf{max-width:640px;margin:96px auto 0;text-align:center}
.nf .code{font-size:14px;color:var(--ink-soft)}
.nf h2{font-weight:400;font-size:clamp(24px, 4vw, 32px);margin:12px 0 20px}
.nf p{font-size:18px;line-height:1.85;color:var(--ink-soft)}
.nf .links{display:flex;justify-content:center;gap:24px;margin-top:40px}
.nf .links a{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:2px}
.nf .links a:hover{border-color:var(--ink)}

/* Pie */
footer{
  flex:none;
  padding:96px 16px 32px;
  text-align:center;
  font-size:14px;
  color:var(--ink-soft);
}
footer #visitas{letter-spacing:.12em;margin-bottom:20px}
footer #visitas:empty{display:none}
footer #contacto{margin-bottom:28px}
footer a:hover{color:var(--ink)}

@media (max-width:600px){
  header.top{padding:0 16px}
  .home{font-size:16px}
  .menu{font-size:15px}
  main{padding-top:48px}
  .entry,.archive,.nf{margin-top:64px}
  .entry p{font-size:17px}
  .archive li{gap:16px}
  .archive li a{font-size:17px}
  .replies{margin-left:8px;padding-left:14px}
}