/* =============================================================
   Recursos: estilos propios.
   Extiende los tokens de ../styles.css (colores, tipografía, nav,
   footer, botones, kicker, reveal). No los redefine ni los toca.
   No comparte clases con calculadora.css: la calculadora queda
   intacta y separada.
   ============================================================= */

/* -------------------------------------------------------------
   0. Breadcrumbs
   ------------------------------------------------------------- */
.res-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 130px; font-size: 0.86rem; color: var(--mute);
}
.res-breadcrumb a { color: var(--mute); transition: color .25s; }
.res-breadcrumb a:hover { color: var(--ink); }
.res-breadcrumb span[aria-current] { color: var(--ink-soft); }
.res-breadcrumb .sep { opacity: .5; }

/* -------------------------------------------------------------
   1. Hero (hub de Recursos)
   ------------------------------------------------------------- */
.res-hero { padding-top: 150px; padding-bottom: clamp(56px, 8vw, 90px); }
.res-hero-inner { max-width: 760px; }
.res-hero-title {
  font-size: clamp(2.2rem, 5.4vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.06; margin: 18px 0 20px;
}
.res-hero-lead { color: var(--ink-soft); font-size: clamp(1.05rem, 2.2vw, 1.24rem); max-width: 58ch; }
.res-hero-lead strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------
   2. Herramienta destacada (calculadora)
   ------------------------------------------------------------- */
.res-tool {
  margin-top: clamp(40px, 6vw, 60px);
  padding: clamp(28px, 4.5vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px rgba(0,0,0,.32);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.res-tool-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-2);
}
.res-tool-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 10px var(--teal-2); }
.res-tool h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 10px; }
.res-tool p { color: var(--ink-soft); font-size: 1.02rem; max-width: 52ch; }
.res-tool .btn { flex: none; white-space: nowrap; }

/* -------------------------------------------------------------
   3. Grilla de artículos
   ------------------------------------------------------------- */
.res-articles { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(70px, 10vw, 110px); }
.res-section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 48px); }
.res-section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); margin: 14px 0 10px; }
.res-section-head p { color: var(--ink-soft); font-size: 1.02rem; }

.res-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.res-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px; border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .35s var(--ease-out), background .35s, box-shadow .35s;
}
.res-card:hover { transform: translateY(-5px); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 44px rgba(0,0,0,.3); }
.res-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem; color: #fff;
  background: var(--grad); box-shadow: 0 8px 20px rgba(193,61,88,.28);
  margin-bottom: 18px;
}
.res-card-category {
  font-family: var(--display); font-size: 0.76rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rose-2); margin-bottom: 14px;
}
.res-card h3 { font-size: 1.24rem; line-height: 1.28; margin-bottom: 10px; }
.res-card h3 a { color: var(--ink); }
/* "stretched link": el ::after cubre TODA la tarjeta (su ancestro posicionado
   es .res-card, no el propio <a>, que debe quedar sin position propio). */
.res-card h3 a::after { content: ""; position: absolute; inset: 0; }
.res-card p { color: var(--ink-soft); font-size: 0.96rem; flex: 1; margin-bottom: 18px; }
.res-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; color: var(--mute); }
.res-card-arrow { color: var(--teal-2); transition: transform .3s var(--ease-out); }
.res-card:hover .res-card-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------
   4. Artículo: encabezado
   ------------------------------------------------------------- */
.res-article-header { padding-top: 26px; padding-bottom: clamp(30px, 5vw, 44px); }
.res-article-header .container { max-width: 800px; }
.res-article-category {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-family: var(--display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rose-2);
}
.res-article-title { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 18px; }
.res-article-dek { color: var(--ink-soft); font-size: clamp(1.05rem, 2.2vw, 1.2rem); max-width: 68ch; margin-bottom: 16px; }
.res-article-readtime { color: var(--mute); font-size: 0.88rem; }

/* imagen de cabecera */
.res-banner {
  position: relative; margin-top: clamp(22px, 4vw, 34px);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px rgba(0,0,0,.32);
  aspect-ratio: 12 / 5;
}
.res-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-banner::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(193,61,88,.24) 0%, transparent 45%, rgba(64,153,157,.24) 100%),
    linear-gradient(0deg, rgba(11,10,15,.5) 0%, rgba(11,10,15,0) 45%);
}

/* -------------------------------------------------------------
   5. Artículo: cuerpo (columna de lectura)
   ------------------------------------------------------------- */
.res-article-body { padding-bottom: clamp(50px, 7vw, 80px); }
.res-article-body .container { max-width: 800px; }
.res-prose { max-width: 740px; }
.res-prose > * + * { margin-top: 1.15em; }
.res-prose p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; }
.res-prose p strong { color: var(--ink); font-weight: 600; }
.res-prose h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem); color: var(--ink); margin-top: 2.2em;
  padding-top: .2em;
}
.res-prose h3 { font-family: var(--display); font-size: 1.14rem; color: var(--ink); margin-top: 1.8em; }
.res-prose ul { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; padding-left: 1.3em; }
.res-prose li + li { margin-top: .4em; }
.res-prose li::marker { color: var(--teal-2); }

/* bloque destacado: fórmula / ejemplo */
.res-callout {
  padding: 22px 26px; border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  border-left: 3px solid var(--teal-2);
}
.res-callout-label {
  display: block; margin-bottom: 8px; font-family: var(--display);
  font-size: 0.76rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-2);
}
.res-callout-formula {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--ink); line-height: 1.5;
}
.res-callout p { color: var(--ink-soft); font-size: 1rem; margin-top: 8px; }
.res-callout p:first-child { margin-top: 0; }

/* tablas */
.res-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.res-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 420px; }
.res-table th, .res-table td { padding: 13px 18px; text-align: left; white-space: nowrap; }
.res-table thead th {
  font-family: var(--display); font-size: 0.76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
  background: var(--surface); border-bottom: 1px solid var(--line-2);
}
.res-table tbody td { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.res-table tbody td:first-child { color: var(--ink); font-weight: 500; }
.res-table tbody tr:last-child td { border-bottom: 0; }

/* CTA en medio del artículo */
.res-cta-inline {
  margin-top: 1.6em; padding: 22px 26px; border-radius: var(--radius);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.res-cta-inline p { color: var(--ink); font-size: 1rem; font-weight: 500; margin: 0; max-width: 44ch; }
.res-cta-inline .btn { flex: none; }

/* -------------------------------------------------------------
   6. CTA final del artículo
   ------------------------------------------------------------- */
.res-cta-final {
  margin-top: clamp(48px, 7vw, 72px); padding: clamp(32px, 5vw, 48px);
  border-radius: var(--radius-lg); text-align: center;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.res-cta-final h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 10px; }
.res-cta-final p { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 24px; }

/* -------------------------------------------------------------
   7. Artículos relacionados
   ------------------------------------------------------------- */
.res-related { padding-block: clamp(56px, 8vw, 90px); border-top: 1px solid var(--line); }
.res-related .container { max-width: 800px; }
.res-related h2 { font-size: clamp(1.3rem, 2.8vw, 1.6rem); margin-bottom: 22px; }
.res-related-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.res-related-list li { border-top: 1px solid var(--line); }
.res-related-list li:last-child { border-bottom: 1px solid var(--line); }
.res-related-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; color: var(--ink); font-size: 1.05rem; font-weight: 500;
  transition: color .25s;
}
.res-related-list a:hover { color: var(--teal-2); }
.res-related-list .arrow { flex: none; color: var(--mute); transition: transform .3s var(--ease-out), color .25s; }
.res-related-list a:hover .arrow { transform: translateX(4px); color: var(--teal-2); }

/* -------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------- */
@media (max-width: 960px) {
  .res-article-grid { grid-template-columns: 1fr 1fr; }
  .res-tool { grid-template-columns: 1fr; text-align: left; }
  .res-tool .btn { width: 100%; }
}
@media (max-width: 640px) {
  .res-breadcrumb { margin-top: 110px; }
  .res-article-grid { grid-template-columns: 1fr; }
  .res-cta-inline { flex-direction: column; align-items: flex-start; }
  .res-cta-inline .btn { width: 100%; }
  .res-table { min-width: 360px; }
}