/* ============================================================
   BLUE COACH — V5 · Centro de Recursos (Recursos / AEO)
   Reusa tokens.css + styles.css. Idioma V5: Inter firme,
   índigo, coral acento, arena, bloques alternos.
   ============================================================ */

/* ---------- Índice: hero corto ---------- */
.rec-hero{padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.rec-hero .kicker{color:var(--coral-ink)}
.rec-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:var(--fw-black);letter-spacing:-.03em;
  line-height:1.05;margin-block:.8rem .8rem;max-width:20ch;text-wrap:balance}
.rec-hero .lede{max-width:56ch}

/* ---------- Filtro por intención ---------- */
.rec-filter{display:flex;flex-wrap:wrap;gap:.55rem;padding-block:1.5rem;border-block:1px solid var(--border)}
.fbtn{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-muted);
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-full);
  padding:.5rem .95rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.fbtn:hover{border-color:var(--indigo-400);color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--indigo-500);border-color:var(--indigo-500);color:#fff}

/* ---------- Grilla de tarjetas ---------- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;
  padding-block:clamp(2rem,4vw,3rem)}
.rcard{display:flex;flex-direction:column;gap:.85rem;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.6rem 1.7rem;transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition)}
.rcard:hover{box-shadow:var(--shadow-md);border-color:var(--indigo-200);transform:translateY(-2px)}
.rcard[hidden]{display:none}
.rcard__cat{align-self:flex-start;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;padding:.34rem .6rem;border-radius:6px;background:var(--indigo-50);color:var(--indigo-600)}
.rcard__cat[data-c="concepto"]{background:var(--coral-50);color:var(--coral-ink)}
.rcard h2{font-size:1.22rem;font-weight:var(--fw-bold);letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.rcard__sub{font-size:.92rem;color:var(--ink-muted);flex:1}
.rcard__meta{display:flex;gap:.8rem;font-family:var(--mono);font-size:.7rem;color:var(--ink-muted);
  padding-top:.7rem;border-top:1px solid var(--border)}
.rcard__meta time{white-space:nowrap}
.rcard{position:relative}
.rcard__title{color:inherit}
.rcard__title::after{content:"";position:absolute;inset:0}
.rcard:focus-within{box-shadow:var(--shadow-md);border-color:var(--indigo-400)}
.rec-empty{padding:2rem 0;color:var(--ink-muted);font-size:.95rem}

/* ---------- Nota de indexación (staging) ---------- */
.rec-note{margin-top:1rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-muted);
  background:var(--arena-2);border:1px dashed var(--border);border-radius:var(--r-md);padding:.9rem 1.1rem}

/* ============================================================
   Artículo
   ============================================================ */
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-muted);padding-block:1.5rem .5rem}
.crumb a{color:var(--ink-muted);border-bottom:1px solid transparent;transition:border-color var(--transition)}
.crumb a:hover{border-color:var(--ink-muted)}
.crumb span[aria-current]{color:var(--ink)}

.art{max-width:44rem;margin-inline:auto;padding-bottom:clamp(2.5rem,5vw,4rem)}
/* Cabecera 1200x630 sobre el H1 (doble uso con og:image). LCP de la nota => fetchpriority alto. */
.art-hero{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  border-radius:var(--r-lg);margin-bottom:1.5rem;background:var(--arena-2);box-shadow:var(--shadow-sm)}
.art__cat{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--coral-ink)}
.art h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:var(--fw-black);letter-spacing:-.03em;line-height:1.08;
  margin-block:.8rem .9rem;text-wrap:balance}
.art__answer{font-size:var(--fs-lede);color:var(--ink-2);line-height:1.6;padding-left:1.1rem;
  border-left:3px solid var(--coral);margin-bottom:1.5rem}
.art__meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-muted);line-height:1.9;
  padding-bottom:1.6rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
.art__meta b{color:var(--ink);font-weight:500}
.art__meta a{color:var(--coral-ink);border-bottom:1px solid var(--border);transition:border-color var(--transition)}
.art__meta a:hover{border-color:var(--coral-ink)}
.art__meta .sep{margin-inline:.4rem;color:var(--border)}
.art__meta .cat{color:var(--coral-ink);font-weight:500}

.draft-flag{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--coral-ink);
  background:var(--coral-50);border-radius:var(--r-md);padding:.7rem 1rem;margin-bottom:2rem}
.draft-flag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}

.prose{color:var(--ink-2);line-height:1.72}
.prose h2{font-size:1.5rem;font-weight:var(--fw-bold);letter-spacing:-.015em;color:var(--ink);margin-block:2.2rem .8rem}
.prose h3{font-size:1.15rem;font-weight:var(--fw-semi);color:var(--ink);margin-block:1.6rem .5rem}
.prose p{margin-bottom:1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{padding-left:.3rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--coral-ink);border-bottom:1px solid var(--coral-50)}
.prose a:hover{border-color:var(--coral-ink)}

/* FAQ al final */
.art-faq{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.art-faq h2{font-size:1.35rem;font-weight:var(--fw-bold);color:var(--ink);margin-bottom:1rem}
.qa{border:1px solid var(--border);border-radius:var(--r-md);padding:1.1rem 1.3rem;margin-bottom:.7rem;background:var(--white)}
.qa summary{font-weight:var(--fw-semi);color:var(--ink);cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:1rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--coral);font-size:1.2rem;transition:transform var(--transition)}
.qa[open] summary::after{content:"–"}
.qa p{margin-top:.7rem;color:var(--ink-muted);line-height:1.65}

/* Enlazado interno + CTA */
.art-related{margin-top:2.5rem;padding:1.6rem 1.8rem;background:var(--arena-2);border-radius:var(--r-lg)}
.art-related h2{font-size:1rem;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);
  font-weight:600;margin-bottom:.9rem}
.art-related ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.art-related a{color:var(--ink);font-weight:var(--fw-med);border-bottom:1px solid var(--border)}
.art-related a:hover{border-color:var(--coral);color:var(--coral-ink)}

.art-cta{margin-top:2rem;text-align:center;background:linear-gradient(160deg,var(--indigo-900),var(--indigo-600));
  color:#fff;border-radius:var(--r-lg);padding:clamp(1.75rem,4vw,2.5rem)}
.art-cta h2{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:var(--fw-black);letter-spacing:-.02em;margin-bottom:.5rem}
.art-cta p{color:var(--on-dark-2);margin-bottom:1.4rem;max-width:44ch;margin-inline:auto}