/* =====================================================================
   blog-index.css · sección «Ideas, medios y casos prácticos» de la home
   Sustituye al carrusel. Datos en /blog/posts.json
   ===================================================================== */
#blog{--b-ink:#16211f;--b-body:#4b5551;--b-mut:#8b938f;--b-dim:#b3bab6;
      --b-hair:#e2e0d9;--b-hair2:#e6e4de;--b-teal:#32717E;--b-teal-d:#22525C;--b-teal-soft:#EAF0F1;
      /* Los casos practicos llevan su propio acento: un bronce apagado.
         Es calido, del mismo tono que los filetes del sitio, y no compite
         con el verde azulado; sirve para saber de un vistazo que una
         entrada es un caso y no un articulo. */
      --b-clay:#8A6A3F;--b-clay-d:#6F5330;--b-clay-soft:#F3EFE8}
#blog .b-eyebrow{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--b-teal)}
#blog .section-sub{margin:0 0 30px;max-width:64ch;font-size:17px;line-height:1.6;color:#5c6662}

/* filtros */
#blog .ftype{display:flex;gap:28px;flex-wrap:wrap;align-items:baseline;padding:0 0 15px;
  border-bottom:1px solid var(--b-hair)}
#blog .ftype button{font:inherit;background:none;border:0;padding:2px 0;cursor:pointer;
  color:var(--b-mut);font-size:16px;position:relative;transition:color .18s}
#blog .ftype button:hover{color:var(--b-ink)}
#blog .ftype button sup{font-size:10.5px;font-weight:600;color:var(--b-dim);margin-left:5px;
  top:-.55em;position:relative}
#blog .ftype button[aria-pressed="true"]{color:var(--b-ink);font-weight:600}
#blog .ftype button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;
  bottom:-16px;height:2px;background:var(--b-teal)}
#blog .ftype button[aria-pressed="true"] sup{color:var(--b-teal)}
#blog .ftheme{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:15px 0 3px}
#blog .ftheme .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--b-dim);margin-right:6px}
#blog .ftheme button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;background:none;border:1px solid var(--b-hair);color:var(--b-mut);
  padding:5px 11px;border-radius:2px;cursor:pointer;transition:.16s}
#blog .ftheme button:hover{border-color:#c9c4b7;color:var(--b-ink)}
#blog .ftheme button[aria-pressed="true"]{background:var(--b-teal);border-color:var(--b-teal);color:#fff}

/* lista */
#blog .idx{list-style:none;margin:8px 0 0;padding:0}
#blog .idx>li{border-bottom:1px solid var(--b-hair);position:relative;transition:background .2s}
#blog .idx>li:hover{background:#fff}
#blog .idx>li[hidden]{display:none}
#blog .idx>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--b-teal);transform:scaleY(0);transition:transform .22s;z-index:2}
#blog .idx>li:hover::before,#blog .idx>li:focus-within::before{transform:scaleY(1)}
#blog .art{display:grid;grid-template-columns:132px 1fr 168px;gap:26px;align-items:start;
  padding:26px 8px;transition:padding .2s;position:relative;color:inherit;text-decoration:none}
#blog .art:focus-visible{outline:none}
#blog .idx>li:hover .art,#blog .idx>li:focus-within .art{padding-left:20px}
#blog .idx>li:hover .c-press,#blog .idx>li:focus-within .c-press{padding-left:178px}

#blog .a-meta{padding-top:6px}
#blog .a-date{display:block;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--b-dim);white-space:nowrap;transition:color .2s}
#blog .idx>li:hover .a-date{color:var(--b-teal)}
#blog .a-kind{display:block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--b-mut)}
/* Un cuadradito del color de cada familia delante del rotulo: articulo
   en gris, medio en verde azulado, caso practico en bronce. Con eso la
   lista se lee como una leyenda sin necesidad de explicarla. */
#blog .a-kind::before{content:"";display:inline-block;width:5px;height:5px;
  background:currentColor;vertical-align:.16em;margin-right:7px;opacity:.9}
#blog .a-kind.is-medio{color:var(--b-teal-d)}
#blog .a-kind.is-caso{color:var(--b-clay-d)}

#blog .a-t{margin:0 0 8px;font-size:clamp(20px,2vw,26px);line-height:1.22;color:var(--b-ink);
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;letter-spacing:-.028em}
#blog .a-d{margin:0;font-size:15px;line-height:1.55;color:#6f7773;max-width:64ch}

#blog .m-out{margin:0 0 6px;font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  letter-spacing:-.02em;font-size:clamp(19px,1.8vw,23px);line-height:1.2;color:var(--b-ink);
  display:flex;gap:9px;align-items:baseline}
#blog .m-out .ext{font-size:14px;color:var(--b-dim);transition:color .2s}
#blog .idx>li:hover .m-out .ext{color:var(--b-teal)}
#blog .m-t{margin:0 0 6px;font-size:16.5px;line-height:1.4;color:var(--b-body);font-style:italic}
#blog .m-d{margin:0;font-size:14.5px;line-height:1.5;color:#7b837f;max-width:60ch}
#blog .m-q{margin:10px 0 0;padding:2px 0 2px 15px;border-left:2px solid var(--b-teal);max-width:60ch;
  font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-size:16px;line-height:1.45;color:var(--b-ink)}
#blog .m-q cite{display:block;margin-top:5px;font-style:normal;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--b-mut)}

#blog .c-role{margin:13px 0 0;padding:2px 0 2px 15px;border-left:2px solid var(--b-teal);
  max-width:64ch;font-size:14.5px;line-height:1.5;color:var(--b-ink)}
#blog .c-role b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b-teal-d);margin-bottom:3px}
#blog .c-facts{margin:12px 0 0;padding:0;list-style:none;display:flex;gap:10px 26px;flex-wrap:wrap}
#blog .c-facts li{border:0;padding:0;font-size:13.5px;color:var(--b-body);display:flex;gap:7px;align-items:baseline}
#blog .c-facts li b{font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-.02em;color:var(--b-teal-d)}

#blog .c-press{margin:-6px 0 0;padding:0 8px 24px 166px;transition:padding .2s}
#blog .c-press .inner{padding-top:13px;border-top:1px solid #eceae3;max-width:calc(100% - 194px)}
#blog .c-press .lbl{display:block;margin-bottom:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--b-dim)}
#blog .c-press .outs{display:flex;gap:8px;flex-wrap:wrap}
#blog .c-press .outs a{position:relative;z-index:3;font-size:13px;font-weight:600;letter-spacing:-.01em;
  color:var(--b-body);border:1px solid var(--b-hair);background:#fff;padding:6px 12px;border-radius:2px;
  display:inline-flex;gap:7px;align-items:center;transition:.16s;text-decoration:none}
#blog .c-press .outs a:hover{border-color:var(--b-teal);color:var(--b-teal-d)}
#blog .c-press .outs a::after{content:"↗";font-size:11px;color:var(--b-dim)}
#blog .c-press .outs a:hover::after{color:var(--b-teal)}

#blog .a-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-top:8px}
#blog .a-tags i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--b-mut);border:1px solid var(--b-hair);padding:4px 9px;
  border-radius:2px;white-space:nowrap}
#blog .idx>li:hover .a-tags i{border-color:#d3cfc6}
#blog .a-new{display:inline-block;margin-left:10px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--b-teal-d);background:var(--b-teal-soft);padding:3px 8px;
  border-radius:2px;vertical-align:middle}

#blog .b-foot{display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  margin-top:26px;font-size:14.5px;color:var(--b-mut);flex-wrap:wrap}
#blog .b-foot a{color:var(--b-teal);font-weight:600;text-underline-offset:4px}
#blog .b-empty{padding:40px 8px;color:var(--b-mut);font-size:15.5px}
#blog .b-empty[hidden]{display:none}

/* miniatura flotante (solo ratón) */
#blog-peek{position:fixed;z-index:60;width:280px;aspect-ratio:3/2;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.97);transition:opacity .2s,transform .2s;
  border:1px solid var(--b-hair,#e2e0d9);background:#fff;box-shadow:0 18px 40px rgba(22,33,31,.13)}
#blog-peek img{width:100%;height:100%;object-fit:cover;display:block}
#blog-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){#blog-peek{display:none}}

@media (max-width:900px){
  #blog .art{grid-template-columns:1fr;gap:9px;padding:22px 6px}
  #blog .a-meta{padding-top:0;display:flex;gap:12px;align-items:baseline}
  #blog .a-kind{margin-top:0}
  #blog .a-tags{justify-content:flex-start;padding-top:2px}
  #blog .idx>li:hover .art{padding-left:12px}
  #blog .c-press{padding:0 6px 20px 6px}
  #blog .idx>li:hover .c-press{padding-left:12px}
  #blog .c-press .inner{max-width:100%}
  #blog .ftype{gap:20px}
}

/* ═══ Casos practicos ══════════════════════════════════════════════
   Misma retorica que los articulos —filete, tipografia, aire— pero en
   bronce. Solo cambia el acento; el ritmo de la lista no se toca. */
/* Un filete de bronce muy palido en el canto izquierdo, permanente:
   asi la familia se distingue de un vistazo, sin tener que leer el
   rotulo ni pasar el raton. Al pasar por encima, el filete se llena. */
#blog .idx>li[data-type="caso"]{box-shadow:inset 3px 0 0 #E7DBC4}
#blog .idx>li[data-type="caso"]::before{background:var(--b-clay)}
#blog .idx>li[data-type="caso"]:hover .a-date{color:var(--b-clay-d)}
#blog .idx>li[data-type="caso"] .c-role{border-left-color:var(--b-clay)}
#blog .idx>li[data-type="caso"] .c-role b{color:var(--b-clay-d)}
#blog .idx>li[data-type="caso"] .c-facts li b{color:var(--b-clay-d)}
#blog .idx>li[data-type="caso"] .a-new{color:var(--b-clay-d);background:var(--b-clay-soft)}
#blog .idx>li[data-type="caso"]:hover .a-tags i{border-color:#ddd2bd}
#blog .idx>li[data-type="caso"] .c-press .outs a:hover{border-color:var(--b-clay);color:var(--b-clay-d)}
#blog .idx>li[data-type="caso"] .c-press .outs a:hover::after{color:var(--b-clay)}
/* Y un fondo apenas insinuado al pasar por encima, para separarlos del
   blanco que se queda en los articulos. */
#blog .idx>li[data-type="caso"]:hover{background:#FCFAF6}