/* ==========================================================
   VARIABLES (lo más fácil de personalizar)
   ========================================================== */
:root {
  --bg: #fafaf8; --text: #222; --muted: #777; --accent: #c2410c;
  --line: #e5e5e0;
  --max: 1200px;                 /* ancho del contenido (se amplía solo en pantallas grandes) */
  --gutter: 20px;               /* margen lateral */
  --font: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-size: clamp(16px, 0.95rem + 0.3vw, 19px);   /* tamaño fluido del texto */

  /* === Imagen en el LISTADO (miniatura) === */
  --item-direction: row;        /* row = izquierda | row-reverse = derecha | column = arriba */
  --thumb-width: 200px;         /* en "column" usa 100% */
  --thumb-ratio: 16 / 9;         /* 1 / 1, 16 / 9, 3 / 2... */
  --thumb-fit: cover;           /* cover = recorta | contain = completa */
  --thumb-radius: 6px;

  /* === Imagen destacada DENTRO de la entrada === */
  --featured-ratio: 16 / 9;     /* "auto" = proporción original */
  --featured-fit: cover;
  --featured-radius: 8px;
  --featured-margin: 24px 0 0;
}

/* ==========================================================
   BASE
   ========================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-size)/1.7 var(--font); overflow-wrap: break-word; }
a { color: var(--accent); }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================
   ENCABEZADO Y MENÚ
   ========================================================== */
.site-header { border-bottom: 1px solid var(--line); padding: 32px 0 20px; margin-bottom: 40px; font-family: var(--font-ui); }
.site-title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); font-weight: 700; text-decoration: none; color: var(--text); }
.site-tagline { margin: 4px 0 12px; color: var(--muted); font-size: .95rem; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.menu a { font-size: .95rem; text-decoration: none; }
.has-sub { position: relative; }
.sub { display: none; position: absolute; top: 100%; left: -12px; z-index: 10; min-width: 190px; margin: 0; padding: 6px 0; list-style: none;
       background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: block; }
.sub a { display: block; padding: 9px 16px; color: var(--text); white-space: nowrap; }
.sub a:hover { background: var(--bg); color: var(--accent); }

/* Menú de categorías en forma de "pastillas" ({{categories_nav}}, opcional) */
.cat-nav { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-nav a { display: inline-block; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; text-decoration: none; color: var(--text); }
.cat-nav li.active a, .cat-nav a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-nav .count { opacity: .6; font-size: .8em; }

/* ==========================================================
   LISTADO DE ENTRADAS
   ========================================================== */
.archive-title { font: 700 1.5rem var(--font-ui); margin: 0 0 28px; }
.post-item { display: flex; flex-direction: var(--item-direction); gap: 24px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.post-thumb { display: block; width: var(--thumb-width); flex-shrink: 0; }
.post-thumb img { display: block; width: 100%; aspect-ratio: var(--thumb-ratio); object-fit: var(--thumb-fit); border-radius: var(--thumb-radius); }
.post-body { flex: 1; min-width: 0; }
.post-item .post-title { margin: 0 0 4px; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); line-height: 1.25; }
.post-item .post-title a { color: var(--text); text-decoration: none; }
.post-item .post-title a:hover { color: var(--accent); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--font-ui); }
.post-date { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.post-cats .cat { display: inline-block; margin: 2px 6px 2px 0; padding: 0 10px; border-radius: 999px; background: #eee; color: #444; font-size: .78rem; text-decoration: none; }
.post-cats .cat:hover { background: var(--accent); color: #fff; }
.post-excerpt { margin: 10px 0; }
.read-more { font: .95rem var(--font-ui); }

/* ==========================================================
   ENTRADA COMPLETA
   ========================================================== */
.post-full .post-title { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); line-height: 1.2; margin: 0 0 6px; }
.post-featured { margin: var(--featured-margin); }
.post-featured img { display: block; width: 100%; aspect-ratio: var(--featured-ratio); object-fit: var(--featured-fit); border-radius: var(--featured-radius); }
.post-content { margin-top: 24px; }
.post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.post-content pre { max-width: 100%; overflow-x: auto; padding: 12px; background: #f0f0ec; border-radius: 6px; font-size: .85em; }
.post-content iframe, .post-content video { display: block; max-width: 100%; }
.back { margin-top: 40px; font-family: var(--font-ui); }

/* Paginación */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .9rem; }
.pagination a, .pagination .current { min-width: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; text-align: center; text-decoration: none; color: var(--text); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .gap { color: var(--muted); }
.pagination .btn-more { padding: 12px 28px; background: var(--accent); border-color: var(--accent); color: #fff; font-size: 1rem; }
.pagination .btn-more:hover { filter: brightness(.9); color: #fff; }
.pagination .btn-more.loading { opacity: .6; pointer-events: none; }

/* ==========================================================
   PIE
   ========================================================== */
.site-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 24px 0; color: var(--muted); font: .85rem var(--font-ui); }
.site-footer .copyright { margin: 0 0 8px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.social a { color: var(--muted); text-decoration: none; }
.social a:hover { color: var(--accent); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
/* Pantallas grandes (escritorio / laptop grande) */
@media (min-width: 1100px) {
   :root { --gutter: 24px; --thumb-width: 240px; }
}

/* Tableta */
@media (max-width: 900px) {
  :root { --thumb-width: 170px; }
  .post-item { gap: 20px; }
  .site-header { padding: 24px 0 16px; margin-bottom: 32px; }
}

/* Celular */
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .site-header { padding: 20px 0 14px; margin-bottom: 24px; }
  .post-item { flex-direction: column; gap: 14px; }
  .post-thumb { width: 100%; }
  .post-featured { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .post-featured img { border-radius: 0; }
  .menu { gap: 2px 18px; }
  /* El submenú se despliega dentro del flujo (sin flotar) para que se pueda tocar */
  .has-sub { width: 100%; }
  .sub { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 6px 0 4px 4px; padding: 0; }
  .sub a { padding: 10px 14px; }
  .site-footer { margin-top: 40px; }
}
/* Videos incrustados de Youtube */
.video-yt {
  position: relative;
  width: 100%;
  max-width: 800px;   /* ajusta al ancho de tu contenido */
  margin: 1.5em auto;
  aspect-ratio: 16 / 9;
}
.video-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}