/* ================================================================
   APTN INSIGHTS SYSTEM — Visual Fixes
   Scope: solo insights.html y artículos individuales
   Regla base:
     - Fondo navy (#0B1F33)  → texto blanco / gold
     - Fondo claro (#F5F7FA) → texto navy (#0B1F33)
   ================================================================ */

/* ── 0. RESET DE EFECTOS ROTOS (solo propiedades críticas) ── */
.aptn-insight-page h1,
.aptn-insight-page h2,
.aptn-insight-page h3,
.aptn-insight-page h4,
.aptn-insight-page p,
.aptn-insight-page span,
.aptn-insight-page a {
  text-shadow: none !important;
}

/* ── 1. CUERPO DE PÁGINA ─────────────────────────────────── */
body.aptn-insight-page {
  background-color: #F5F7FA;
  color: #0B1F33;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

/* ── 2. CONTENEDOR BASE ──────────────────────────────────── */
.aptn-insight-page .container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) {
  .aptn-insight-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── 3. HERO EDITORIAL (fondo navy → texto blanco) ───────── */
.hero-editorial {
  background-color: #0B1F33;
  padding: 120px 0 80px;
  text-align: center;
}

.hero-editorial.on-navy {
  background-color: #0B1F33;
}

/* Eyebrow label */
.hero-editorial .eyebrow {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #C9973A;
  opacity: 1;
  margin-bottom: 20px;
}

/* H1 principal del hero */
.hero-editorial h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  margin-bottom: 24px;
}

/* Subtítulo del hero */
.hero-editorial .subheadline {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 680px;
  margin: 0 auto;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ── 4. SECCIÓN EDITORIAL (fondo claro → texto navy) ─────── */
.section-editorial {
  background-color: #F5F7FA;
  padding: 72px 0;
}

/* ── 5. LISTADO DE ARTÍCULOS ─────────────────────────────── */
.article-body {
  max-width: 780px;
  margin: 0 auto;
}

/* Tarjeta de artículo */
.insight-card-item {
  padding: 40px 0;
  border-bottom: 1px solid rgba(11, 31, 51, 0.12);
}

.insight-card-item:last-child {
  border-bottom: none;
}

/* Metadatos: categoría · fecha */
.insight-card-item .item-meta {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #C9973A !important;
  opacity: 1 !important;
  margin-bottom: 14px;
}

/* Título del artículo */
.insight-card-item h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  color: #0B1F33 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  margin-bottom: 14px;
}

/* Enlace del título — elimina azul del navegador */
.insight-card-item h2 a {
  color: #0B1F33 !important;
  text-decoration: none;
}

.insight-card-item h2 a:visited {
  color: #0B1F33 !important;
}

.insight-card-item h2 a:hover {
  color: #C9973A !important;
  text-decoration: none;
}

/* Descripción del artículo */
.insight-card-item .item-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #3D4F60 !important;
  opacity: 1 !important;
  margin-bottom: 20px;
}

/* CTA "Leer Análisis Completo →" (inline en HTML, refuerzo aquí) */
.insight-card-item a[href]:not(h2 a) {
  color: #C9973A !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 1 !important;
}

.insight-card-item a[href]:not(h2 a):hover {
  color: #a07830 !important;
  text-decoration: none;
}

/* ── 6. CTA INSTITUCIONAL FINAL (fondo navy → texto blanco) ─ */
.cta-institutional-box {
  background-color: #0B1F33;
  padding: 80px 40px;
  text-align: center;
}

.cta-institutional-box h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: #FFFFFF !important;
  text-shadow: none !important;
  opacity: 1 !important;
  margin-bottom: 16px;
}

.cta-institutional-box p {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
  max-width: 600px;
  margin: 0 auto 32px;
}

.cta-institutional-box .btn-premium {
  display: inline-block;
  background-color: #C9973A;
  color: #0B1F33 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.cta-institutional-box .btn-premium:hover {
  background-color: #a07830;
  color: #0B1F33 !important;
  text-decoration: none;
}

/* ── 7. RESPONSIVE MOBILE ────────────────────────────────── */
@media (max-width: 768px) {
  .hero-editorial {
    padding: 100px 0 60px;
  }

  .section-editorial {
    padding: 48px 0;
  }

  .insight-card-item {
    padding: 32px 0;
  }

  .cta-institutional-box {
    padding: 60px 20px;
  }
}