/* ============================================================
   BLOG SPARK v2 — press-room grado Neko sobre tokens del sistema.
   Principios del playbook: movimiento con significado, entrada
   lenta (expo ~.6s) / salida rápida (.26s), reposos largos,
   un acento graduado, serif para lo grande.
   ============================================================ */

/* — ritmo de prensa: más aire que las páginas de producto — */
.blog-hero{padding-block:clamp(4.5rem,9vw,8rem) clamp(3rem,6vw,5rem)}
.blog-destacadas{padding-block:clamp(3.5rem,7vw,6rem);background:var(--tinte);border-block:1px solid var(--linea);overflow-x:clip}
.blog-lista{padding-block:clamp(4rem,8vw,7rem)}
.blog-infocards{padding-block:0 clamp(4.5rem,9vw,8rem)}

/* — hero asimétrico (título gigante, intro descolgada a la derecha) — */
.bh-grid{display:grid;grid-template-columns:1fr minmax(280px,38ch);gap:clamp(1.5rem,4vw,3rem);align-items:end}
.bh-grid .eyebrow{grid-column:1/-1}
.bh-grid h1{margin-top:.35em}
.bh-intro{color:var(--texto-2);padding-bottom:.6em}
@media(max-width:979px){.bh-grid{grid-template-columns:1fr}.bh-intro{padding-bottom:0}}

/* — destacadas: tarjetas panel sobre banda quieta; carrusel con snap en móvil — */
.bd-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.4rem);margin-top:var(--space-m)}
.blog-card{display:flex;flex-direction:column;background:var(--panel,#fdfbf8);border:1px solid var(--linea);
  border-radius:var(--r-l,24px);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .55s var(--e-expo,cubic-bezier(.16,1,.3,1)),box-shadow .55s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(21,17,20,.4);transition-duration:.45s}
.blog-card:not(:hover){transition-duration:.26s}
.bc-marco{overflow:hidden}
.bc-marco img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .8s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.blog-card:hover .bc-marco img{transform:scale(1.045)}
.bc-cuerpo{padding:clamp(1.1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.bc-meta{display:flex;align-items:center;gap:.4rem .5rem;flex-wrap:wrap;color:var(--texto-2);font-size:.82rem}
.bc-meta>*{white-space:nowrap}
.bc-meta .chip-tipo{flex:none}
.bc-fuente{font-weight:500;color:var(--texto)}
.blog-card h3{font-family:var(--serif,inherit);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.32}
.bc-leer{margin-top:auto;padding-top:1rem;font-size:.92rem;color:var(--carmin,#bd0e31);display:inline-flex;gap:.4rem;align-items:center}
.bc-leer .fl{display:inline-block;transition:transform .3s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.blog-card:hover .bc-leer .fl{transform:translateX(5px)}
@media(max-width:1100px){.bd-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  /* carrusel: mismas tarjetas, riel horizontal con snap (patrón Neko móvil) */
  .bd-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:6vw;
    margin-inline:calc(-1*var(--xpad,6vw));padding-inline:var(--xpad,6vw);padding-bottom:1rem;
    scrollbar-width:none}
  .bd-track::-webkit-scrollbar{display:none}
  .blog-card{flex:0 0 78vw;scroll-snap-align:start}
}

/* — chips — */
.chip-tipo{display:inline-block;padding:.16rem .55rem;border-radius:999px;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;background:var(--tinte);border:1px solid var(--linea);color:var(--texto-2)}
.chip-tipo.prensa{color:var(--carmin,#bd0e31);border-color:currentColor;background:transparent}
.chip-tipo.borrador{background:#f6e8b8;border-color:#d8bd6a;color:#6d5605}

/* — listado — */
.bl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.blog-tabs{display:flex;gap:.35rem;flex-wrap:wrap}
.blog-tabs button{border:1px solid var(--linea);background:transparent;border-radius:999px;
  padding:.48rem 1rem;font-size:.88rem;color:var(--texto-2);cursor:pointer;
  transition:background .26s,color .26s,border-color .26s}
.blog-tabs button:hover{border-color:var(--texto-2)}
.blog-tabs button[aria-selected="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.blog-filas{margin-top:var(--space-m);border-top:1px solid var(--linea)}
.fila-art{display:grid;grid-template-columns:112px 1fr auto;gap:clamp(1rem,2.4vw,2rem);align-items:center;
  padding:clamp(1.2rem,2.2vw,1.7rem) clamp(.4rem,1vw,.9rem);border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;border-radius:var(--r-s,12px);
  transition:background .26s}
.fila-art:hover{background:var(--tinte)}
.fa-thumb{overflow:hidden;border-radius:var(--r-s,12px)}
.fa-thumb img{width:112px;height:76px;object-fit:cover;display:block}
.fa-meta{display:flex;gap:.55rem;align-items:center;color:var(--texto-2);font-size:.8rem;margin-bottom:.45rem;flex-wrap:wrap}
.fa-fuente{font-weight:500;color:var(--texto)}
.fila-art h3{font-family:var(--serif,inherit);font-weight:400;font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.35;
  text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color .26s}
.fila-art:hover h3{text-decoration-color:var(--linea-fuerte,currentColor)}
.fa-flecha{color:var(--texto-2);transition:transform .3s var(--e-expo,cubic-bezier(.16,1,.3,1)),color .26s}
.fila-art:hover .fa-flecha{transform:translateX(5px);color:var(--texto)}
.fila-art[hidden]{display:none}
@media(max-width:700px){.fila-art{grid-template-columns:84px 1fr}.fa-flecha{display:none}.fa-thumb img{width:84px;height:58px}}

/* — ver más (icon-label, patrón Neko) — */
.bl-mas{display:flex;justify-content:center;margin-top:clamp(1.6rem,3vw,2.4rem)}
.bl-mas[hidden]{display:none}
.ver-mas{display:inline-flex;align-items:center;gap:.6rem;border:0;background:transparent;cursor:pointer;
  font-size:.92rem;color:var(--texto);padding:.4rem .6rem}
.vm-ico{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--linea);border-radius:999px;
  transition:background .26s,border-color .26s}
.vm-ico svg{width:14px;height:14px}
.ver-mas:hover .vm-ico{background:var(--texto);color:var(--fondo);border-color:var(--texto)}

/* — info-cards (2-up, oscura + carmín claro) — */
.ic-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.info-card{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:clamp(1.5rem,3vw,2.3rem);border-radius:var(--r-l,24px);text-decoration:none;
  transition:transform .45s var(--e-expo,cubic-bezier(.16,1,.3,1)),box-shadow .45s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.info-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -32px rgba(21,17,20,.45)}
.info-card:not(:hover){transition-duration:.26s}
.ic-oscura{background:var(--tinta,#221713);color:#f2ede8}
.ic-oscura p{color:#b3a69e}
.ic-carmin{background:color-mix(in srgb,var(--carmin,#bd0e31) 7%, var(--fondo,#f4f0ec));border:1px solid color-mix(in srgb,var(--carmin,#bd0e31) 25%, transparent);color:var(--texto)}
.ic-carmin p{color:var(--texto-2)}
.ic-texto h3{font-size:1.18rem;font-weight:500}
.ic-texto p{margin-top:.45rem;font-size:.93rem;max-width:34ch;line-height:1.5}
.ic-accion{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:none}
.ic-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.12)}
.ic-carmin .ic-btn{background:var(--carmin,#bd0e31);color:#fff}
.ic-btn svg{width:22px;height:22px;transition:transform .3s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.info-card:hover .ic-btn svg{transform:translateX(3px)}
.ic-lbl{font-size:.82rem;letter-spacing:.02em}
.ic-oscura .ic-lbl{color:#b3a69e}
@media(max-width:900px){.ic-grid{grid-template-columns:1fr}}

/* — artículo — */
.art-hero{padding-block:clamp(4rem,8vw,7rem) clamp(1.6rem,3vw,2.6rem)}
.art-hero .eyebrow{color:var(--carmin,#bd0e31)}
.art-titulo{font-family:var(--serif,inherit);font-weight:400;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(2.5rem,6vw,4.6rem);max-width:22ch;margin-top:.4em}
.brand-rule{display:flex;align-items:center;gap:1.2rem;padding-block:.4rem}
.brand-rule .br-nombre{white-space:nowrap;display:flex;align-items:center;gap:.55rem}
.brand-rule .br-nombre::before{content:"";width:.55em;height:.55em;border-radius:999px;background:var(--carmin,#bd0e31);display:inline-block}
.brand-rule .br-linea{flex:1;height:1px;background:var(--linea)}
.art-cuerpo{padding-block:clamp(2.5rem,5vw,4rem) clamp(4.5rem,9vw,8rem)}
.art-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.art-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem}
.art-volver{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--texto-2);font-size:.9rem;transition:color .26s}
.art-volver:hover{color:var(--texto)}
.art-volver span{transition:transform .3s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.art-volver:hover span{transform:translateX(-4px)}
.art-meta{border:1px solid var(--linea);border-radius:var(--r-m,16px);background:var(--tinte);padding:1.1rem 1.2rem}
.art-meta dl{display:flex;flex-direction:column;gap:.55rem;margin:0}
.art-meta .fila{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}
.art-meta dt{color:var(--texto-2)}
.art-meta dd{margin:0;text-align:right}
.art-media{overflow:hidden;border-radius:var(--r-l,24px)}
.art-media img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
@media(max-width:979px){.art-grid{grid-template-columns:1fr}.art-aside{position:static;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}}

/* — prosa editorial — */
.prosa{max-width:66ch;margin-top:clamp(2rem,4vw,3rem)}
.prosa>p:first-child,.prosa .destacado,.prosa blockquote:first-child{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.55;color:var(--texto)}
.prosa blockquote{border:0;margin:0;padding:0}
.prosa blockquote p{font-size:inherit;color:inherit}
.prosa p{color:var(--texto-2);line-height:1.75;margin-top:1.15rem}
.prosa h2{font-family:var(--serif,inherit);font-weight:400;font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.25;margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.prosa h3{font-size:1.14rem;font-weight:500;margin-top:1.8rem}
.prosa ul,.prosa ol{margin:1.1rem 0 0 1.2rem;color:var(--texto-2);line-height:1.7}
.prosa li+li{margin-top:.55rem}
.prosa li strong{color:var(--texto)}
/* 2-sep: Questrial tiene un solo peso y el sistema apaga la negrita sintética (body{font-synthesis:none}), así que
   b,strong{font-weight:500} no se distingue del texto. En la prosa del blog la negrita SÍ tiene que verse, como en el
   editor: se permite sintetizar el peso y se sube el contraste. Solo aplica dentro de .prosa. */
.prosa strong,.prosa b{font-weight:700;color:var(--texto)}
.prosa em,.prosa i{font-style:italic}
.prosa strong,.prosa b,.prosa em,.prosa i{font-synthesis:weight style}
/* 2-sep: el sistema pone a{color:inherit;text-decoration:none}, así que un enlace en la prosa era invisible.
   En el blog el enlace se ve como enlace: carmín + subrayado fino; al pasar, carmín activo. */
.prosa a{color:var(--carmin,#bd0e31);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(189,14,49,.45);transition:color .2s,text-decoration-color .2s}
.prosa a:hover,.prosa a:focus-visible{color:var(--carmin-activo,#97081f);text-decoration-color:currentColor}
.prosa a strong,.prosa a b{color:inherit}
.prosa em{color:var(--texto-2)}
.prosa .firma{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--linea);font-size:.9rem}
.prosa table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.92rem}
.prosa th,.prosa td{border:1px solid var(--linea);padding:.6rem .75rem;text-align:left}
.prosa th{background:var(--tinte)}