/* home.css — criptoinforme-child — Home (front-page.php), v2 */

#ci-home {
  --ci-verde-oscuro: #2C5F15;
  --ci-verde-medio: #4C8522;
  --ci-verde-claro: #96C353;
  --ci-tinta: #14171A;
  --ci-caption: #5B6350;
  --ci-borde: #E5E7E0;
  --ci-fondo-suave: #F7F8F5;
  --ci-rojo: #B91C1C;
}

/* Blindaje: nuestros headings SIEMPRE ganan sobre la tipografía dinámica de Astra */
#ci-home h1.ci-home-h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--ci-caption) !important;
  margin: 16px 20px 0 !important;
}

#ci-home h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--ci-tinta) !important;
}

/* Hero */
#ci-home .ci-hero { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 12px; }
#ci-home .ci-hero-media { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #DCE7CC; }
#ci-home .ci-hero-media img { width: 100%; height: 208px; object-fit: cover; display: block; }
#ci-home .ci-badge { position: absolute; top: 12px; left: 12px; background: var(--ci-verde-oscuro); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
#ci-home h2.ci-hero-title { font-size: 22px !important; font-weight: 800 !important; line-height: 1.28 !important; color: var(--ci-tinta) !important; }
#ci-home .ci-hero-title a { color: inherit; text-decoration: none; }
#ci-home .ci-hero-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ci-caption); }

/* Secciones genéricas */
#ci-home .ci-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-bottom: 10px; }
#ci-home .ci-section-head a { font-size: 12px; font-weight: 700; color: var(--ci-verde-oscuro); text-decoration: none; }
#ci-home .ci-section-head-icon { gap: 7px; }

/* Ticker (20 monedas) */
#ci-home .ci-ticker { margin-top: 22px; }
#ci-home .ci-ticker-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 6px; -webkit-overflow-scrolling: touch; }
#ci-home .ci-chip { flex: 0 0 auto; min-width: 92px; background: var(--ci-fondo-suave); border: 1px solid var(--ci-borde); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
#ci-home .ci-chip-top { display: flex; align-items: center; gap: 6px; }
#ci-home .ci-chip-icon { border-radius: 50%; display: block; }
#ci-home .ci-chip-symbol { font-size: 11px; font-weight: 700; color: var(--ci-caption); }
#ci-home .ci-chip-price { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ci-tinta); }
#ci-home .ci-chip-change { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
#ci-home .ci-chip-change.ci-positivo { color: var(--ci-verde-oscuro); }
#ci-home .ci-chip-change.ci-negativo { color: var(--ci-rojo); }
#ci-home .ci-chip-change.ci-neutral { color: var(--ci-caption); }

/* Categorías */
#ci-home .ci-categorias { margin-top: 20px; display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 4px; }
#ci-home .ci-pill { flex: 0 0 auto; background: #F0F1EB; color: #3E4636; font-size: 13px; font-weight: 600; padding: 15px 18px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
#ci-home .ci-pill-activa { background: var(--ci-verde-oscuro); color: #fff; font-weight: 700; }

/* Hub evergreen */
#ci-home .ci-hub { margin-top: 26px; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
#ci-home .ci-hub-card { display: flex; align-items: center; gap: 14px; background: var(--ci-fondo-suave); border: 1px solid var(--ci-borde); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--ci-tinta); }
#ci-home .ci-hub-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: #E4EAD9; display: flex; align-items: center; justify-content: center; color: var(--ci-verde-oscuro); }
#ci-home .ci-hub-text { display: flex; flex-direction: column; gap: 2px; }
#ci-home .ci-hub-text strong { font-size: 14px; }
#ci-home .ci-hub-text small { font-size: 12px; color: var(--ci-caption); }

/* Tendencia ahora */
#ci-home .ci-tendencia { margin-top: 30px; }
#ci-home .ci-tendencia-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 6px; }
#ci-home .ci-tcard { flex: 0 0 auto; width: 148px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ci-tinta); }
#ci-home .ci-tcard-img { position: relative; display: block; width: 148px; height: 94px; border-radius: 10px; background: #DCE7CC; overflow: hidden; }
#ci-home .ci-tcard-img img { width: 100%; height: 100%; object-fit: cover; }
#ci-home .ci-tcard-rank { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ci-tinta); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#ci-home .ci-tcard-title { font-size: 12px; font-weight: 600; line-height: 1.32; }

/* Newsletter — fondo oscuro, texto SIEMPRE blanco pase lo que pase con Astra */
#ci-home .ci-newsletter { margin-top: 30px; padding: 28px 20px; background: #1E3A0F; display: flex; flex-direction: column; gap: 14px; }
#ci-home .ci-badge-exclusivo { align-self: flex-start; background: var(--ci-verde-claro); color: #14260A; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 5px; letter-spacing: 0.05em; }
#ci-home h2.ci-newsletter-heading,
#ci-home .ci-newsletter h2 { font-size: 21px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.24 !important; }
#ci-home .ci-newsletter p { margin: 0; font-size: 13px; line-height: 1.55; color: #C9D6BB; }
#ci-home .ci-newsletter-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#ci-home .ci-newsletter-form input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px;
  border: 1px solid #3A5B28; background: #24450F; color: #fff;
  font-family: 'Manrope', system-ui, sans-serif; font-size: 13px;
}
#ci-home .ci-newsletter-form input::placeholder { color: #9BB98A; }
#ci-home .ci-newsletter-form button {
  width: 100%; padding: 13px; border: none; border-radius: 8px; margin-top: 4px;
  background: var(--ci-verde-claro); color: #14260A;
  font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 700;
}
#ci-home .ci-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Comunidad */
#ci-home .ci-comunidad { margin-top: 26px; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
#ci-home .ci-comunidad-btn { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: #fff; font-size: 14px; font-weight: 700; }
#ci-home .ci-whatsapp { background: #25D366; }
#ci-home .ci-telegram { background: #229ED9; }

/* Banner */
#ci-home .ci-banner-placeholder { margin: 26px 20px 0; height: 78px; background: #EFF1E9; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ci-caption); font-weight: 600; }

/* Feed de tarjetas (ahora al final — scroll infinito) */
#ci-home .ci-feed-wrap { margin-top: 26px; padding: 0 20px; }
#ci-home #ci-feed { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
#ci-home .ci-card { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ci-tinta); }
#ci-home .ci-card-img { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #E9ECE2; }
#ci-home .ci-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ci-home .ci-card-cat { font-size: 10px; font-weight: 700; color: var(--ci-verde-oscuro); text-transform: uppercase; letter-spacing: 0.03em; }
#ci-home h3 { font-size: 14px !important; font-weight: 700 !important; line-height: 1.32 !important; margin: 0 !important; color: var(--ci-tinta) !important; }
#ci-home .ci-card-fecha { font-size: 11px; color: var(--ci-caption); }
#ci-home .ci-feed-loader { text-align: center; padding: 20px; font-size: 12px; color: #9AA08C; }