/* ══════════════════════════════════════════════════════════════════════════════
   BLOG · Promo Bags
   Hereda TODO de tokens-v1.css: colores, tipos, espaciado, radios. Aquí no se
   inventa ni un color ni un tamaño — sólo se compone la lectura larga, que es lo
   único que el sitio no tenía todavía.

   Regla de la casa aplicada: quien declara `background` declara `color`, y al
   revés. Cada bloque de abajo lleva la pareja completa; nada hereda media pareja
   a través de un cambio de superficie.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ÍNDICE ─────────────────────────────────────────────────────────────────── */
.posts{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
.post{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-6);
  background:var(--panel); color:var(--crema);
  border:1px solid var(--panel-borde); border-radius:var(--r-lg);
  text-decoration:none;
  transition:transform var(--dur,.22s) var(--ease,ease), border-color var(--dur,.22s) var(--ease,ease);
}
.post:hover,.post:focus-visible{ transform:translateY(-3px); border-color:rgba(162,237,85,.34); }
.post__top{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.post__cat{
  font-family:var(--font-body); font-size:var(--t-eyebrow); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:var(--r-pill);
  background:rgba(125,192,93,.16); color:#CDEBB6;      /* pareja fondo↔tinta, declarada */
}
.post__top time{ font-family:var(--font-body); font-size:.85rem; color:rgba(244,241,232,.62); }
.post h2{
  font-family:var(--font-display); font-weight:800; line-height:1.15;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.55rem); color:var(--crema); margin:0;
}
.post p{ font-family:var(--font-body); color:rgba(244,241,232,.76); margin:0; line-height:1.6; }
.post__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-body); font-weight:700; color:var(--verde-vibrante);
}
.post__link svg{ width:18px; height:18px; }
.blog__vacio{ font-family:var(--font-body); color:rgba(244,241,232,.72); }

/* ── ARTÍCULO ───────────────────────────────────────────────────────────────── */
/* 68ch: el rango donde la lectura larga no cansa. Es el número que manda aquí,
   no el ancho del sitio (--maxw), que está pensado para rejillas de producto. */
.art{ --lectura:68ch; padding:var(--sp-8) 0 var(--sp-9); }
.art__head,.art__cuerpo,.art__cta{
  max-width:var(--lectura); margin-inline:auto;
  padding-inline:var(--gutter);
}
.art__migas{ font-family:var(--font-body); font-size:.85rem; color:rgba(244,241,232,.55); margin-bottom:var(--sp-5); }
.art__migas a{ color:rgba(244,241,232,.72); text-decoration:none; }
.art__migas a:hover{ color:var(--verde-vibrante); }

.art__borrador{
  background:#FFF7EA; color:#5A3E12;                    /* pareja completa: vive sobre fondo oscuro */
  border:1px solid #E7C98C; border-left:5px solid #C8922B;
  border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-family:var(--font-body); font-size:.95rem; line-height:1.55;
  margin-bottom:var(--sp-6);
}
.art__borrador b{ color:#4A320D; }

.art__metas{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.art__cat{
  font-family:var(--font-body); font-size:var(--t-eyebrow); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:.3rem .7rem; border-radius:var(--r-pill);
  background:rgba(125,192,93,.16); color:#CDEBB6;
}
.art__metas time{ font-family:var(--font-body); font-size:.9rem; color:rgba(244,241,232,.62); }

.art h1{
  font-family:var(--font-display); font-weight:800; line-height:1.06;
  font-size:clamp(2.1rem,1.6rem + 2.4vw,3.3rem);
  color:var(--crema); margin:0 0 var(--sp-4);
}
.art__lead{
  font-family:var(--font-accent); font-style:italic;
  font-size:clamp(1.12rem,1rem + .55vw,1.42rem); line-height:1.5;
  color:#CDEBB6; margin:0 0 var(--sp-6);
}
.art__autor{ display:flex; align-items:center; gap:var(--sp-3);
  padding-top:var(--sp-5); border-top:1px solid var(--linea); }
.art__autor-av{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--verde-bosque); color:var(--verde-vibrante);
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.art__autor b{ display:block; font-family:var(--font-body); font-weight:700; color:var(--crema); }
.art__autor small{ display:block; font-family:var(--font-body); font-size:.85rem; color:rgba(244,241,232,.62); }

.art__cuerpo{ margin-top:var(--sp-7); }
.art__cuerpo h2{
  font-family:var(--font-display); font-weight:800; line-height:1.15;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem);
  color:var(--crema); margin:var(--sp-8) 0 var(--sp-4);
}
.art__cuerpo h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  color:var(--crema); margin:var(--sp-6) 0 var(--sp-3);
}
.art__cuerpo p{
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.75;
  color:rgba(244,241,232,.84); margin:0 0 var(--sp-4);
}
.art__cuerpo strong{ color:var(--crema); font-weight:700; }
.art__cuerpo em{ font-family:var(--font-accent); font-style:italic; color:#CDEBB6; }
.art__cuerpo a{ color:var(--verde-vibrante); text-underline-offset:.22em; }
.art__cuerpo a:hover{ color:var(--crema); }

.art__lista{ margin:0 0 var(--sp-5); padding-left:1.15rem; }
.art__lista li{
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.7;
  color:rgba(244,241,232,.84); margin-bottom:var(--sp-2);
}
.art__lista li::marker{ color:var(--verde-marca); }

.art__dato{
  background:rgba(125,192,93,.10); color:var(--crema) !important;
  border-left:4px solid var(--verde-marca); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0 !important;
  font-family:var(--font-body); font-size:1.02rem; line-height:1.65;
}

/* Tabla: en móvil se desplaza DENTRO de su caja. La página nunca hace scroll horizontal. */
.art__tabla-wrap{ overflow-x:auto; margin:var(--sp-5) 0 var(--sp-6);
  border:1px solid var(--panel-borde); border-radius:var(--r-md); }
.art__tabla{ width:100%; border-collapse:collapse; min-width:min(520px,100%);
  background:var(--panel); color:var(--crema); }
.art__tabla th,.art__tabla td{
  font-family:var(--font-body); font-size:.96rem; line-height:1.5;
  padding:var(--sp-3) var(--sp-4); text-align:left;
  border-bottom:1px solid var(--panel-borde);
}
.art__tabla th{ background:rgba(32,71,48,.55); color:#CDEBB6; font-weight:700;
  letter-spacing:.02em; white-space:nowrap; }
.art__tabla td{ color:rgba(244,241,232,.84); }
.art__tabla tbody tr:last-child td{ border-bottom:0; }

.art__faq{
  background:var(--panel); color:var(--crema);
  border:1px solid var(--panel-borde); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-3);
}
.art__faq summary{
  font-family:var(--font-display); font-weight:700; font-size:1.04rem;
  color:var(--crema); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  min-height:44px;                                   /* tap target */
}
.art__faq summary::-webkit-details-marker{ display:none; }
.art__faq summary::after{ content:"+"; color:var(--verde-vibrante); font-size:1.5rem; line-height:1; }
.art__faq[open] summary::after{ content:"−"; }
.art__faq p{
  font-family:var(--font-body); font-size:.98rem; line-height:1.7;
  color:rgba(244,241,232,.8); margin:var(--sp-3) 0 0;
}

.art__video{ margin:var(--sp-6) 0; }
.art__video video{ width:100%; height:auto; display:block;
  border-radius:var(--r-md); background:var(--carbon-profundo); }
.art__video figcaption{
  font-family:var(--font-body); font-size:.88rem; line-height:1.55;
  color:rgba(244,241,232,.62); margin-top:var(--sp-3);
}

.art__cta{
  margin-top:var(--sp-8); padding-block:var(--sp-6);
  border-top:1px solid var(--linea);
}
.art__cta h2{ font-family:var(--font-display); font-weight:800; color:var(--crema);
  font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem); margin:0 0 var(--sp-3); }
.art__cta p{ font-family:var(--font-body); font-size:var(--t-body); line-height:1.7;
  color:rgba(244,241,232,.8); margin:0 0 var(--sp-5); }
.art__cta-links{ margin-top:var(--sp-4) !important; font-size:.95rem !important; }
.art__cta-links a{ color:var(--verde-vibrante); }

@media (max-width:520px){
  .art{ padding-top:var(--sp-6); }
  .art__tabla th,.art__tabla td{ padding:var(--sp-3); font-size:.9rem; }
}

/* ── Tap targets ────────────────────────────────────────────────────────────────
   El QC operando marcó 6 enlaces por debajo de 44 px. Tres son enlaces DENTRO de
   una frase ("el catálogo", "probarlo en la bolsa"): WCAG 2.5.8 los exime a
   propósito, y agrandarlos rompería el renglón. Los otros tres SÍ son navegación
   suelta y sí se arreglan: migas, chip de categoría y los enlaces del cierre. */
.art__migas a, .art__cta-links a{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:.15rem;
}
.art__migas{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.art__cta-links{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.art__cat, .post__cat{ min-height:44px; display:inline-flex; align-items:center; }

/* Bio del autor bajo el byline. Fondo y tinta declarados los dos (regla fondo↔tinta):
   el bloque cae sobre la cabecera oscura del artículo y no puede heredar media pareja. */
.art__bio {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  background: var(--carbon, #232B2D);
  color: var(--crema, #F4F1E8);
  font-family: var(--font-body); font-size: .9rem; line-height: 1.62;
}
.art__bio a { color: var(--verde-vibrante, #A2ED55); text-underline-offset: .2em; }