@font-face{
  font-family: 'Nunito Sans';
  src: url('../fonts/NunitoSans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Nunito Sans';
  src: url('../fonts/NunitoSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root{
  --main-color:#C8C3BC;
  --bg:#000;  
  --font:'Nunito Sans', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --fs:18px;
  --lh:27px;               /* se mantiene para cálculos de footer */
  --content-max:640px;     /* antes 700px */
  --t:0.75s;
  --nav-h:56px;
}

/* Reset + layout base */
*{ box-sizing:border-box; }
html,body{
  min-height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* Tipografía y colores globales */
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--main-color);
  font-size:var(--fs);
  line-height:1.6;         /* más fluido en bloques largos */
  word-wrap:break-word;
  padding-top:var(--nav-h); /* reserva nav fijo */
}

/* Enlaces base */
a{
  color:#C2BDB5;
  text-decoration:none;
  transition:color var(--t) ease-in-out;
}
a:hover{ color:#fff; }

/* ======================== Header & navegación ============================ */
nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  display:flex;
  justify-content:center;
  background:var(--bg);
  padding:10px 0;
  border-bottom:none;
  box-shadow:none;
}
nav a{
  margin:0 15px;
  padding:6px 10px;
  font-weight:300;
  font-size:18px;
  line-height:27px;
}

/* Header + logo */
header{
  text-align:center;
  overflow:visible;
  margin:0;
}
#logoContainer{ text-align:center; margin:24px 0 12px; }
#myLogo{
  display:block;
  width: clamp(126px, 23.8vw, 294px);  /* 180*0.7, 34*0.7, 420*0.7 */
  height:auto;
  margin:0 auto;
}

/* ============================ Contenido ================================== */
main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:clamp(18px, 6vw, 28px);
  flex:1;
}

/* Títulos genéricos */
h1, h3{
  text-align:left;
  margin:0 0 20px 0;
  font-weight:300;              /* fino y elegante */
  color:var(--main-color);
}
h2{
  text-align:left;
  margin:0 0 20px 0;
  font-weight:600;              /* NEGRITA para diferenciar */
  color:var(--main-color);
}

/* ====== Título principal de la home (si lo usas) ========================= */
.home-title{
  max-width:var(--content-max);
  margin:28px auto 48px;
  text-align:center;
  font-size:clamp(22px, 6vw, 30px);
  line-height:1.25;
}

/* ======================== Listado de posts (home) ======================== */
.post-card {
  display:block;
  max-width:var(--content-max);
  margin:50px auto; /* separación fija entre posts */
  text-align:left;
}

/* Miniatura en home (oculta para look minimal) */
.post-thumb{ display:none; }
.post-thumb img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

/* Título de cada post en home */
.post-body h2{
  margin:0 0 12px 0;
  font-weight:400;              /* sube un poco desde 300, pero sin negrita */
  font-size:clamp(22px, 4.2vw, 28px);
  line-height:1.3;
  color:var(--main-color);
}

/* Extracto */
.post-body p{
  margin:0 0 1.2em 0;      /* separación clara entre párrafos */
  color:#C2BDB5;
}

/* “Leer más” */
a.leer-mas{
  color:#C2BDB5;
  font-weight:700;
  text-decoration:none;
  transition:color var(--t) ease;
}
a.leer-mas:hover{ color:#fff; }

/* =========================== Página de post ============================== */
/* Hero centrado y limitado al canal de texto */
.post-hero{
  max-width: var(--content-max);
  margin: 12px auto 24px; /* auto para centrar el figure */
  text-align: center;
}
.post-hero img{
  display: block;
  width: 100%;   /* ocupa todo el ancho disponible del canal */
  height: auto;  /* mantiene proporción */
  border-radius: 6px;
}

main > h1{
  max-width:var(--content-max);
  margin:20px auto 30px;
  font-weight:300;
  font-size:36px;
  line-height:45px;
  text-align:center;
}

/* Fecha/lugar: alineado con el texto del post */
.fecha{
  display:block;
  max-width: var(--content-max);
  margin: 8px auto 0;      /* mismo “canal” que el contenido */
  text-align: left !important;  /* gana a la herencia de main */
  color:#C2BDB5;
}

main > div{
  max-width:var(--content-max);
  margin:0 auto 40px;
  text-align:left;
}

/* Subtítulos dentro del contenido del post */
main > div h2{
  font-weight:600;                      /* sigue siendo negrita */
  font-size:clamp(22px, 2.6vw, 26px);   /* un punto más pequeño que antes */
  line-height:1.25;
  margin:40px 0 12px;                   /* menos aire arriba/abajo */
  color:var(--main-color);              /* igual que el cuerpo de texto */
}

main > div h3{
  font-weight:400;              /* antes 300 */
  font-size:clamp(20px, 2.4vw, 24px);
  line-height:1.35;
  margin:32px 0 12px;
  color:#bbb;
  font-style:normal;            /* elimina la cursiva */
}

/* ============================== Código =================================== */
pre{
  background:#242628;
  padding:10px;
  border:1px solid #2f3234;
  overflow-x:auto;
}
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:#242628;
  padding:2px 4px;
  border-radius:4px;
}

/* ============================== Footer =================================== */
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:var(--bg);
  color:var(--main-color);
  width:100%;
  position:relative;
  margin-top:auto;
  overflow-x:hidden;
  text-align:center;
  font-size:80%;
  line-height:calc(var(--lh)*.8);
}
footer p{ margin:0; padding:0; }
footer a.enlace-isaac{
  color:#C2BDB5;
  text-decoration:none;
  font-weight:300;
  transition:color var(--t) ease;
}
footer a.enlace-isaac:hover{ color:#fff; }

/* ============================== Tags ===================================== */
.tag-list{
  list-style:none;
  padding:0;
  margin:20px auto 40px;
  max-width:var(--content-max);
  text-align:center;
}
.tag-list li{ margin:10px 0; }
.tag-link{
  color:#C2BDB5;
  text-decoration:none;
  transition:color var(--t) ease;
  font-size:20px;
}
.tag-link:hover{ color:#fff; }

/* ============================ Páginas estáticas =========================== */
.page-title{
  max-width:var(--content-max);
  margin:20px auto 0;
  font-weight:300;
  font-size:36px;
  line-height:45px;
  text-align:center;
}
.page-content{
  max-width:var(--content-max);
  margin:0 auto 40px;
  padding:0 20px;
  text-align:justify;         /* justificado */
  text-justify:inter-word;    /* mejora la distribución */
  hyphens:auto;               /* permite cortes de palabra elegantes */
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
}

/* Justificar SIEMPRE el contenido de los posts y páginas */
main > div p,
main > div ol,
main > div ul,
main > div li,
main > div li p,
.page-content p,
.page-content ol,
.page-content ul,
.page-content li,
.page-content li p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Cosas que NO deben justificarse */
pre, code, kbd, samp,
figure figcaption,
.no-justify{
  text-align: left !important;
}

/* (Opcional) evita que los títulos se justifiquen por herencia */
h1, h2, h3, h4, h5, h6{
  text-align: left;
}

/* ============================== Responsivo =============================== */
@media (max-width:900px){
  body{ font-size:20px; }
}
@media (max-width:768px){
  #myLogo{ width:clamp(180px, 34vw, 300px); }
}
@media (max-width:600px){
  body{ font-size:0.9rem; }
  footer{ font-size:12px; }
}
.tag-posts {
  list-style: none;       /* quita las viñetas */
  padding-left: 0;        /* elimina la sangría del ul */
  margin: 20px auto;      /* centrado del bloque */
  max-width: var(--content-max);
  text-align: left;       /* alinea el texto a la izquierda */
}

.tag-posts li {
  margin: 8px 0;          /* espacio entre posts */
}
main > div ul,
.page-content ul {
  text-align: justify;
  text-justify: inter-word;
}

main > div ul li,
.page-content ul li {
  text-align: justify;
}
.post-signature {
  margin-top: 1.25rem;
  font-style: italic;
  opacity: .8;
}
/* ===== Calendar (year view) ============================================= */
.calendar-wrap { width:100%; }
.cal-toolbar{
  max-width:var(--content-max);
  margin:0 auto 16px;
  display:flex; align-items:center;
}
.cal-toolbar .spacer{ flex:1; }
.cal-toolbar .btn{
  display:inline-block; padding:6px 10px; border:1px solid #2f3234; border-radius:6px;
  color:#C2BDB5;
}

.year-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto 40px;
}
@media (max-width:1024px){
  .year-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width:640px){
  .year-grid{ grid-template-columns: 1fr; }
}

.month{
  border:1px solid #2f3234; border-radius:8px; padding:12px;
  background:#1b1d1e;
}
.month-head{
  font-weight:600; margin:0 0 8px 0; text-align:left;
}

.weekdays, .days{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
}
.weekdays .w{
  text-align:center; font-size:12px; color:#9a968f; padding:2px 0;
}
.day{
  position:relative;
  height:32px;
  border:1px solid #2a2c2e;
  border-radius:6px;
  display:flex; align-items:center; justify-content:flex-start;
  padding:4px 6px;
}
.day.empty{ background:transparent; border:none; }
.day .n{ font-size:13px; color:#C8C3BC; }

/* El circulito que marca posts */
.day.has .dot{
  position:absolute; right:6px; width:10px; height:10px; border-radius:50%;
  background:#C8C3BC; opacity:.45; /* base */
}

/* Intensidad según nº de posts (1..5; 5 = 5 o más) */
.day.has.c1 .dot{ opacity:.45; }
.day.has.c2 .dot{ opacity:.60; }
.day.has.c3 .dot{ opacity:.75; }
.day.has.c4 .dot{ opacity:.90; }
.day.has.c5 .dot{ opacity:1.00; }
.markdown img {
  display: block;
  margin: 1.2em auto; /* margen vertical + centrado horizontal */
  max-width: 100%;    /* nunca más grande que el contenedor */
  height: auto;       /* mantiene proporción */
}

/* ===== Estilos de enlaces dentro del contenido (.markdown) ===== */
.markdown a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.02em;       /* grosor del subrayado */
  text-decoration-color: rgba(255, 255, 255, 0.3); /* tenue */
  text-underline-offset: 0.22em;           /* separación del texto */
  transition: text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.markdown a:hover {
  text-decoration-thickness: 0.1em;
  text-decoration-color: rgba(255, 255, 255, 0.7); /* más contraste en hover */
}

.markdown a:visited {
  text-decoration-color: rgba(255, 255, 255, 0.3); /* igual que normal */
}

.markdown a:focus {
  outline: 2px solid #7aa2f7;
  outline-offset: 2px;
}
/* Evitar que cada enlace del nav se parta en dos líneas */
nav a { white-space: nowrap; }

/* Ajustes solo en móvil estrecho */
@media (max-width: 420px){
  nav { padding: 8px 0; }              /* un pelín menos alto */
  nav a {
    white-space: nowrap;               /* por si otro CSS lo pisa */
    margin: 0 10px;                    /* menos separación lateral */
    font-size: 16px;                   /* un poco más pequeño */
    line-height: 24px;
  }
  /* si usas una variable para la altura del nav, ajústala */
  :root { --nav-h: 50px; }             /* opcional, según te quede */
}