/*
Theme Name: Marín Grúas · Blog
Theme URI: https://maringruas.com.mx/blog/
Author: Marín Grúas
Description: El blog con el mismo encabezado, el mismo pie y la misma tipografía del sitio. El encabezado y el pie se generan desde build.py, así que no pueden separarse del sitio.
Version: 1.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: marin-blog
*/

/* ══════════════════════════════════════════════════════════════════════
   El blog hereda de site.css: colores, tipografía, encabezado, pie,
   botones, burbujas de contacto y barra de pestañas del celular.
   Aquí solo va lo propio del artículo.
   ══════════════════════════════════════════════════════════════════════ */

.blog-main{display:block}



/* ── Encabezado del artículo ─────────────────────────────────────────── */
/* El aire de arriba no es decorativo: el encabezado del sitio flota fijo
   (position:fixed, 64px de alto a 10px del borde). Sin él, el título del
   artículo queda debajo del menú. */
.bl-head{background:var(--tint);border-bottom:1px solid var(--line);
  padding:calc(var(--hd) + 30px) 0 30px}
.bl-head .in{width:min(var(--wrap),100%);margin:0 auto;padding:0 22px}
.bl-mig{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mut);margin-bottom:12px}
.bl-mig a{color:var(--int);text-decoration:none;font-weight:600}
.bl-mig a:hover{text-decoration:underline}
.bl-mig span{opacity:.5}
.bl-head h1{font-size:clamp(26px,3.6vw,42px);line-height:1.14;letter-spacing:-1px;color:var(--azul);
  max-width:22ch;margin:0 0 12px}
.bl-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--mut)}
.bl-meta .chip{background:var(--ysoft);color:#6b5400;border-radius:999px;padding:4px 12px;font-weight:700;font-size:12px}
.bl-meta .cat{background:var(--soft);color:var(--azul);border-radius:999px;padding:4px 12px;font-weight:700;font-size:12px;text-decoration:none}

/* ── Cuerpo ──────────────────────────────────────────────────────────── */
.bl-wrap{width:min(var(--wrap),100%);margin:0 auto;padding:0 22px}
.bl-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px;align-items:start;padding:34px 0 8px}
.bl-art{min-width:0;font-size:17px;line-height:1.72;color:#22364e}
.bl-art>*:first-child{margin-top:0}
.bl-art p{margin:0 0 18px}
.bl-art p:first-of-type{font-size:19px;line-height:1.62;color:var(--ink)}
.bl-art h2{font-size:clamp(21px,2.4vw,27px);line-height:1.25;letter-spacing:-.5px;color:var(--azul);
  margin:34px 0 12px}
.bl-art h3{font-size:19px;color:var(--azul);margin:26px 0 9px}
/* Los enlaces del cuerpo van subrayados. Sin subrayado quedaban del mismo azul
   que las negritas —var(--int) y var(--ink) son el mismo #0A3D6A— y el lector
   no tenía forma de saber que había algo que pulsar. El subrayado va tenue y
   separado de la letra para no ensuciar la lectura; al pasar el cursor se marca. */
.bl-art a{color:var(--int);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:rgba(10,61,106,.34);transition:text-decoration-color .16s}
.bl-art a:hover{text-decoration-color:var(--yl)}
.bl-art strong{color:var(--ink)}
.bl-art ul,.bl-art ol{margin:0 0 18px;padding-left:4px;list-style:none}
.bl-art ol{counter-reset:bl}
.bl-art li{position:relative;padding-left:28px;margin-bottom:9px}
.bl-art ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--yl)}
.bl-art ol li{counter-increment:bl}
.bl-art ol li::before{content:counter(bl);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--soft);color:var(--azul);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.bl-art blockquote{margin:24px 0;padding:20px 24px;background:var(--ysoft);border-radius:var(--r,16px);
  font-size:18px;line-height:1.6;color:#5c4a00;font-weight:600}
.bl-art blockquote p{margin:0}
.bl-art blockquote cite{display:block;margin-top:8px;font-size:13.5px;font-weight:600;font-style:normal;opacity:.8}
.bl-art img{max-width:100%;height:auto;border-radius:16px;display:block}
.bl-art figure{margin:24px 0}
.bl-art figcaption{font-size:13px;color:var(--mut);margin-top:8px;text-align:center}
.bl-art table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.bl-art th{background:var(--azul);color:#fff;text-align:left;padding:11px 14px;font-size:12px;
  letter-spacing:.8px;text-transform:uppercase}
.bl-art td{padding:11px 14px;border-bottom:1px solid var(--line)}
.bl-art hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* La foto principal del artículo */
.bl-foto{margin:0 0 26px;border-radius:18px;overflow:hidden;background:var(--soft);
  display:flex;justify-content:center}
.bl-foto img{max-width:100%;max-height:620px;width:auto;height:auto;display:block;border-radius:0}

/* ── Columna de la derecha ───────────────────────────────────────────── */
.bl-aside{position:sticky;top:calc(var(--hd) + 16px)}
.bl-caja{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  margin-bottom:14px;box-shadow:var(--sh)}
.bl-caja h3{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--azul);margin:0 0 11px}
.bl-caja p{font-size:14px;color:var(--mut);line-height:1.6;margin:0 0 12px}
.bl-caja .btn{width:100%;justify-content:center;margin-bottom:8px}
.bl-caja .btn:last-child{margin-bottom:0}
.bl-otros a{display:block;text-decoration:none;color:var(--ink);font-size:14.5px;line-height:1.45;
  font-weight:600;padding:11px 0;border-bottom:1px solid var(--line)}
.bl-otros a:last-child{border-bottom:0;padding-bottom:0}
.bl-otros a:hover{color:var(--int)}
.bl-otros small{display:block;font-weight:400;color:var(--mut);font-size:12px;margin-top:3px}

/* ── Listado de artículos ────────────────────────────────────────────── */
.bl-lista{padding:30px 0 10px}
.bl-tit{text-align:center;max-width:44ch;margin:0 auto 26px}
.bl-tit h1{font-size:clamp(26px,3.4vw,38px);line-height:1.16;letter-spacing:-1px;color:var(--azul);margin:0 0 10px}
.bl-tit p{color:var(--mut);font-size:16.5px;line-height:1.6;margin:0}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.bl-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:var(--sh);
  transition:transform .18s ease,box-shadow .18s ease}
.bl-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,61,106,.13)}
.bl-card .im{aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.bl-card .im img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card .tx{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.bl-card h2{font-size:18px;line-height:1.32;letter-spacing:-.3px;color:var(--azul);margin:0 0 8px}
.bl-card p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0 0 12px;flex:1}
.bl-card .pie{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--mut)}
.bl-card .pie .cat{background:var(--soft);color:var(--azul);border-radius:999px;padding:3px 10px;font-weight:700}

.bl-vacio{background:var(--card);border:1px dashed var(--line);border-radius:18px;padding:44px 24px;
  text-align:center;color:var(--mut)}

/* ── Paginación ──────────────────────────────────────────────────────── */
.bl-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:26px 0 6px}
.bl-nav .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;
  font-size:14px;background:var(--card)}
.bl-nav .page-numbers.current{background:var(--azul);color:#fff;border-color:var(--azul)}
.bl-nav .page-numbers:hover:not(.current){border-color:var(--azul);color:var(--azul)}

/* ── Cierre del artículo ─────────────────────────────────────────────── */
.bl-cierre{background:var(--tint);border-top:1px solid var(--line);margin-top:34px;padding:34px 0}
.bl-cierre .in{width:min(var(--wrap),100%);margin:0 auto;padding:0 22px;display:flex;gap:20px;
  align-items:center;flex-wrap:wrap}
.bl-cierre b{font-size:20px;letter-spacing:-.4px;color:var(--azul);display:block;margin-bottom:4px}
.bl-cierre p{margin:0;color:var(--mut);font-size:15px}
.bl-cierre .acc{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ── Comentarios: apagados a propósito ───────────────────────────────── */
.bl-art .wp-block-comments,.comments-area{display:none}

/* ── Celular ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .bl-cols{grid-template-columns:1fr;gap:26px;padding-top:24px}
  .bl-aside{position:static}
}
@media(max-width:760px){
  .bl-head{padding:22px 0 20px;padding-top:calc(var(--hd) + 22px)}
  .bl-head .in,.bl-wrap,.bl-cierre .in{padding:0 16px}
  .bl-head h1{max-width:none}
  .bl-art{font-size:16.5px}
  .bl-art p:first-of-type{font-size:17.5px}
  .bl-grid{grid-template-columns:1fr;gap:14px}
  .bl-cierre .acc{margin-left:0;width:100%}
  .bl-cierre .acc .btn{flex:1 1 100%;justify-content:center}
}