/* ============================================================
   articulo.css — paginas de Novedades

   Los 61 articulos estaban maquetados con utilidades de Bootstrap. En vez
   de reescribir el HTML de cada uno, se reimplementa aca el subconjunto
   exacto que usan, ya con el lenguaje visual de okun.css. Asi el contenido
   queda intacto y el estilo cambia en un solo archivo.

   Requiere okun.css cargado antes: toma de ahi los tokens de color y las
   familias tipograficas.
   ============================================================ */

.ok-article-bg { background: var(--bg); padding-top: 74px; }

/* ── Grilla ──────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; }
.justify-content-center { justify-content: center; }
.col-lg-8 { grid-column: span 8; min-width: 0; }
.col-lg-4 { grid-column: span 4; min-width: 0; }

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 32px; }
  .col-lg-8, .col-lg-4 { grid-column: 1 / -1; }
}

/* ── Espaciados ──────────────────────────────────────────── */
.py-5 { padding-top: 56px; padding-bottom: 72px; }
.p-4 { padding: 22px; }
.my-5 { margin-top: 44px; margin-bottom: 44px; }
.mt-4 { margin-top: 26px; } .mt-5 { margin-top: 38px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; } .mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
@media (max-width: 900px) { .mt-lg-0 { margin-top: 0; } }

/* ── Texto del articulo ──────────────────────────────────── */
.ok-article-bg h1 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.18; color: var(--ink);
}
.ok-article-bg h2, .ok-article-bg .h5 {
  font-family: 'Sora', sans-serif; font-size: 1.18rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.3;
}
.ok-article-bg h3 { font-family: 'Sora', sans-serif; font-size: 1.02rem; font-weight: 600; }
.ok-article-bg p { font-size: 1rem; color: var(--ink-2); line-height: 1.7; }
.ok-article-bg li { font-size: 1rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 7px; }
.ok-article-bg ul, .ok-article-bg ol { padding-left: 22px; }
.ok-article-bg strong { font-weight: 600; color: var(--ink); }
.ok-article-bg a { color: var(--amber-deep); text-decoration: underline;
  text-decoration-color: var(--amber-lt); text-underline-offset: 3px; }
.ok-article-bg a:hover { color: var(--ink); }
.ok-article-bg img { max-width: 100%; height: auto; border-radius: 14px; }

.small { font-size: .85rem; }
.fw-semibold { font-weight: 600; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-white, .text-white p, .text-white h5 { color: #fff; }
.list-unstyled { list-style: none; padding-left: 0; }

/* ── Migas ───────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  padding: 0; margin-bottom: 18px; font-size: .82rem; color: var(--muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 8px; color: var(--wire, #AEB4C2); }
.breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--amber-deep); }
.breadcrumb-item.active { color: var(--ink-2); }

/* ── Tarjetas de la barra lateral ────────────────────────── */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.card.border-0 { border: 1px solid var(--line); }
.card-body { padding: 20px 22px; }
.card-title { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
  margin-bottom: 12px; display: block; }
.shadow-sm { box-shadow: var(--sh); }
.rounded-3 { border-radius: 14px; }
.sticky-top { position: sticky; top: 96px; }
.ok-sidebar-sticky { display: flex; flex-direction: column; gap: 18px; }
.ok-sidebar-sticky .card-body p, .ok-sidebar-sticky .card-body li { font-size: .9rem; }

/* La tarjeta de cierre usa el azul de marca, no el degrade viejo */
.ok-gradient-brand {
  background: linear-gradient(150deg, var(--graph) 0%, var(--graph-2) 100%);
  border: 1px solid rgba(255,255,255,.1); color: #fff;
}
.ok-gradient-brand .card-title, .ok-gradient-brand p { color: #fff; }
.ok-gradient-brand a { color: var(--amber-lt); }

/* ── Botones heredados del maquetado viejo ───────────────── */
.btn-small, .button-secondary, .gradient-primary {
  display: inline-block; font-family: 'Figtree', sans-serif; font-size: .88rem;
  font-weight: 600; border: 0; border-radius: 999px; padding: 11px 22px;
  background: var(--amber); color: var(--graph); text-decoration: none;
  transition: background-color .18s ease;
}
.btn-small:hover, .button-secondary:hover, .gradient-primary:hover {
  background: var(--amber-lt); color: var(--graph);
}

/* ============================================================
   INDICE DE NOVEDADES
   Mismo criterio: se reimplementan las clases que ya usa la pagina.
   ============================================================ */
.col-md-6, .col-12 { grid-column: 1 / -1; min-width: 0; }
.g-4 { gap: 20px; }
@media (min-width: 901px) { .col-md-6 { grid-column: span 6; } }

/* Cabecera de la seccion */
.okh { background: var(--graph); color: #fff; padding: 140px 0 62px; }
.okh-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.okh-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-lt); }
.okh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); display: inline-block; }
.okh-title { font-family: 'Sora', sans-serif; font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 14px 0 0; color: #fff; }
.okh-sub { color: rgba(255,255,255,.78); font-size: 1.03rem; font-weight: 300;
  margin-top: 14px; max-width: 62ch; }
.okh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.okh-btn { display: inline-block; font-size: .9rem; font-weight: 600; border-radius: 999px;
  padding: 12px 24px; text-decoration: none; transition: all .18s ease; }
.okh-btn-solid { background: var(--amber); color: var(--graph); }
.okh-btn-solid:hover { background: var(--amber-lt); }
.okh-btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.okh-btn-ghost:hover { border-color: var(--amber-lt); color: var(--amber-lt); }
.okh-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.okh-topics span, .okh-meta { font-size: .8rem; color: rgba(255,255,255,.6); }
.okh-topics span { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px; }

/* Grilla de articulos */
.ok-articles-section { padding: 56px 0 80px; background: var(--bg); }
.ok-card-link { display: block; text-decoration: none; height: 100%; }
.ok-card { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ok-card-link:hover .ok-card { transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(20,22,28,.1); border-color: var(--wire, #CFD3DC); }
.ok-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ok-badge { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--amber-deep); background: var(--amber-wash); border-radius: 999px; padding: 4px 11px; }
.ok-card-date { font-size: .78rem; color: var(--muted); }
.ok-card-title { font-family: 'Sora', sans-serif; font-size: 1.08rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.32; margin-bottom: 10px; }
.ok-card-text { font-size: .92rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
.ok-read-link { margin-top: auto; font-size: .86rem; font-weight: 600; color: var(--amber-deep); }
.ok-card-link:hover .ok-read-link { color: var(--ink); }

/* Cierre de la seccion */
.ok-cta-box { background: linear-gradient(150deg, var(--graph) 0%, var(--graph-2) 100%);
  border-radius: 18px; padding: 42px; text-align: center; color: #fff; margin-top: 44px; }
.ok-cta-box h2, .ok-cta-box h3 { font-family: 'Sora', sans-serif; font-weight: 600; color: #fff; }
.ok-cta-box p { color: rgba(255,255,255,.76); max-width: 56ch; margin: 12px auto 22px; }