/* =========================================================================
   F4st.ai — Recursos (hub + artículos)
   Reutiliza el sistema de marca de styles.css (variables --orange, --black,
   tipografías, .container, .btn, .nav, footer). Aquí solo lo específico de
   contenido editorial: prose, answer card, tablas, FAQ, hub.
   ========================================================================= */

/* ---------- Layout base de contenido ---------- */
.res-main { padding-top: 72px; }            /* deja espacio bajo la nav fija */
.prose-wrap { width: min(760px, 92vw); margin-inline: auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-mute);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: 2rem 0 .4rem;
}
.breadcrumb a { color: var(--t-mute); text-decoration: none; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: var(--t-faint); }

/* ---------- Cabecera de artículo ---------- */
.article-head { padding: 1.2rem 0 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; }
.article-head h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08;
  letter-spacing: -.025em; margin: .7rem 0 .9rem;
}
.article-meta {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--t-mute); display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center;
}
.article-meta .dot { color: var(--t-faint); }

/* ---------- Answer card (bloque answer-first, lo que cita la IA) ---------- */
.answer-card {
  background: linear-gradient(135deg, rgba(255,140,0,.07), rgba(230,57,70,.04));
  border: 1px solid var(--line-warm);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  margin: 0 0 2.2rem;
  font-size: 1.08rem; line-height: 1.6; color: var(--t-bright);
}
.answer-card .answer-tag {
  display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .5rem;
}

/* ---------- Prosa ---------- */
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--t-soft); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-family: var(--f-display); font-weight: 700; color: var(--t-bright);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem); line-height: 1.18; letter-spacing: -.02em;
  margin-top: 2.6rem; padding-top: .2rem;
}
.prose h3 {
  font-family: var(--f-display); font-weight: 700; color: var(--t-bright);
  font-size: 1.2rem; margin-top: 1.8rem; letter-spacing: -.01em;
}
.prose p { margin: 0; }
.prose strong { color: var(--t-bright); font-weight: 700; }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,140,0,.4); transition: text-decoration-color .2s ease; }
.prose a:hover { text-decoration-color: var(--orange); }
.prose ul, .prose ol { margin: 1.1rem 0; padding-left: 1.3rem; }
.prose li { margin: .5rem 0; }
.prose li::marker { color: var(--orange); }
.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--line-warm); color: var(--t-bright);
  font-style: italic; font-size: 1.1rem;
}

/* ---------- Tablas comparativas (la IA las ama) ---------- */
.prose .table-wrap { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--line); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 520px; }
.prose th, .prose td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange); background: rgba(255,140,0,.05); border-bottom-color: var(--line-warm);
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover { background: rgba(255,255,255,.015); }
.prose td strong { color: var(--t-bright); }

/* ---------- Nota bajo tabla (ej. "cifras ilustrativas") ---------- */
.table-note { display: block; font-size: .82rem; color: var(--t-faint); margin-top: -1.2rem; margin-bottom: 1.8rem; font-style: italic; }

/* ---------- Callout de dato / nota ---------- */
.callout {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.02); padding: 1.1rem 1.3rem; margin: 1.8rem 0;
}
.callout .callout-label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: .4rem; }

/* ---------- Key takeaways ---------- */
.takeaways { border: 1px solid var(--line-warm); border-radius: var(--r-md); padding: 1.3rem 1.5rem; margin: 2.2rem 0; background: rgba(255,140,0,.03); }
.takeaways h2 { margin-top: 0 !important; font-size: 1.25rem !important; }
.takeaways ul { margin: .8rem 0 0; }

/* ---------- FAQ (details) ---------- */
.article-faq { margin-top: 2.8rem; }
.article-faq h2 { margin-bottom: 1rem; }
.article-faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0 1.2rem; margin-bottom: .7rem; background: rgba(255,255,255,.015);
  transition: border-color .2s ease;
}
.article-faq details[open] { border-color: var(--line-warm); }
.article-faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  font-family: var(--f-display); font-weight: 700; color: var(--t-bright); font-size: 1.04rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: "+"; color: var(--orange); font-size: 1.4rem; font-weight: 400; transition: transform .2s ease; }
.article-faq details[open] summary::after { transform: rotate(45deg); }
.article-faq details p { color: var(--t-soft); padding: 0 0 1.1rem; margin: 0; line-height: 1.65; }

/* ---------- CTA de cierre ---------- */
.article-cta {
  margin: 3rem 0 1rem; padding: 2rem 1.8rem; border-radius: var(--r-lg);
  border: 1px solid var(--line-warm);
  background: linear-gradient(135deg, rgba(255,140,0,.08), rgba(230,57,70,.05));
  text-align: center;
}
.article-cta h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .6rem; letter-spacing: -.02em; }
.article-cta p { color: var(--t-soft); max-width: 52ch; margin: 0 auto 1.4rem; }
.article-cta .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Relacionados ---------- */
.related { margin: 3rem 0 1rem; }
.related h2 { font-family: var(--f-display); font-size: 1.3rem; margin-bottom: 1rem; color: var(--t-bright); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.related-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.2rem;
  text-decoration: none; color: var(--t-bright); background: rgba(255,255,255,.015);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.related-card:hover { border-color: var(--line-warm); transform: translateY(-3px); background: rgba(255,140,0,.04); }
.related-card .rc-tag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.related-card .rc-title { display: block; margin-top: .5rem; font-family: var(--f-display); font-weight: 700; line-height: 1.25; }

/* =========================================================================
   HUB /recursos
   ========================================================================= */
.res-hero { padding: 3rem 0 1.6rem; text-align: center; }
.res-hero h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.025em; margin: .8rem 0 .8rem; }
.res-hero .lead { margin: 0 auto; }

.res-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem;
  padding: 1.5rem 0 3rem;
}
.res-card {
  display: flex; flex-direction: column; gap: .7rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.5rem 1.6rem;
  text-decoration: none; color: var(--t-bright); background: rgba(255,255,255,.015);
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.res-card:hover { border-color: var(--line-warm); transform: translateY(-4px); background: rgba(255,140,0,.04); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.res-card .rc-tag { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.res-card h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.015em; margin: 0; color: var(--t-bright); }
.res-card p { color: var(--t-mute); font-size: .96rem; line-height: 1.55; margin: 0; flex: 1; }
.res-card .rc-go { font-family: var(--f-mono); font-size: .78rem; color: var(--orange); margin-top: .3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .article-cta { padding: 1.6rem 1.2rem; }
  .prose { font-size: 1.02rem; }
}