/* ==========================================================================
   Cooperación Bolivia — Estilos específicos de la Home (y hero reutilizable)
   ========================================================================== */

/* ----------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */
.cb-hero {
  position: relative;
  overflow: hidden;
  background: var(--cb-grad-soft);
  padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem);
}
.cb-hero__inner {
  display: grid; gap: var(--cb-sp-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .cb-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--cb-sp-8); }
}
.cb-hero__title {
  margin-bottom: var(--cb-sp-4);
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.1;
}
.cb-hero__text { font-size: var(--cb-fs-base); color: var(--cb-ink-soft); margin-bottom: var(--cb-sp-5); }
.cb-hero__text + .cb-hero__text { margin-top: var(--cb-sp-3); }
/* En pantallas altas y anchas, el segundo párrafo del hero puede ocultarse para
   que el bloque entre completo; la info se repite más abajo en la página. */
@media (min-width: 940px) {
  .cb-hero__text { margin-bottom: var(--cb-sp-4); }
}
.cb-hero__micro {
  margin-top: var(--cb-sp-5); font-size: var(--cb-fs-sm); color: var(--cb-muted);
  display: flex; gap: var(--cb-sp-2); align-items: flex-start; max-width: 46ch;
}
.cb-hero__micro svg { width: 18px; height: 18px; color: var(--cb-green); flex: none; margin-top: 3px; }

/* Fondo decorativo del hero */
.cb-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cb-hero__bg .blob {
  position: absolute; border-radius: 50%;
  filter: blur(10px); opacity: 0.5;
}
.cb-hero__bg .blob-1 { width: 420px; height: 420px; top: -140px; right: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(29,173,218,0.35), transparent 70%); }
.cb-hero__bg .blob-2 { width: 340px; height: 340px; bottom: -140px; left: -100px;
  background: radial-gradient(circle at 60% 40%, rgba(41,140,199,0.22), transparent 70%); }
.cb-hero .cb-container { position: relative; z-index: 1; }

/* Visual del hero: isotipo con anillo de capacidades */
.cb-hero__visual { position: relative; display: grid; place-items: center; min-height: 360px; }
.cb-hero__ring {
  position: absolute; width: min(100%, 380px); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(41,140,199,0.25);
}
.cb-hero__disc {
  position: relative; z-index: 2;
  width: min(72%, 260px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: var(--cb-shadow-lg);
  display: grid; place-items: center; padding: 14%;
}
.cb-hero__disc img { width: 100%; }
.cb-hero__chip {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-pill);
  box-shadow: var(--cb-shadow);
  padding: 0.6em 1em; display: flex; align-items: center; gap: 0.5em;
  font-family: var(--cb-font-head); font-weight: 700; font-size: 0.85rem; color: var(--cb-ink);
  white-space: nowrap;
}
.cb-hero__chip .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cb-hero__chip--1 { top: 6%; left: -2%; }
.cb-hero__chip--2 { top: 24%; right: -4%; }
.cb-hero__chip--3 { bottom: 18%; left: -4%; }
.cb-hero__chip--4 { bottom: 2%; right: 4%; }
@media (max-width: 939px) {
  .cb-hero__visual { min-height: 300px; }
  .cb-hero__chip { font-size: 0.78rem; }
}
@media (max-width: 440px) {
  .cb-hero__chip--1, .cb-hero__chip--2, .cb-hero__chip--3, .cb-hero__chip--4 { font-size: 0.72rem; padding: 0.45em 0.75em; }
}

/* ----------------------------------------------------------------------
   SECCIÓN "EL DESAFÍO" (diagrama sistémico)
   ---------------------------------------------------------------------- */
.cb-challenge__layout {
  display: grid; gap: var(--cb-sp-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .cb-challenge__layout { grid-template-columns: 1fr 1fr; } }

/* Diagrama circular de 4 capacidades interconectadas */
.cb-wheel { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.cb-wheel__center {
  position: absolute; inset: 32%; border-radius: 50%;
  background: var(--cb-grad-brand); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: var(--cb-font-head); font-weight: 900; font-size: 0.82rem;
  line-height: 1.2; padding: 1rem; box-shadow: var(--cb-shadow-brand); z-index: 2;
}
.cb-wheel__node {
  position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 1px solid var(--cb-line); box-shadow: var(--cb-shadow-sm);
  display: grid; place-items: center; color: var(--cb-primary);
  transition: transform var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-wheel__node:hover { transform: scale(1.08); box-shadow: var(--cb-shadow); }
.cb-wheel__node svg { width: 40%; height: 40%; }
.cb-wheel__node.n1 { top: 0; left: 35%; }
.cb-wheel__node.n2 { right: 0; top: 35%; }
.cb-wheel__node.n3 { bottom: 0; left: 35%; }
.cb-wheel__node.n4 { left: 0; top: 35%; }
.cb-wheel__svg { position: absolute; inset: 0; z-index: 0; }
.cb-wheel__svg circle { fill: none; stroke: rgba(41,140,199,0.22); stroke-width: 1.5; stroke-dasharray: 4 5; }

/* ----------------------------------------------------------------------
   SECCIÓN "QUIÉNES SOMOS" (franja)
   ---------------------------------------------------------------------- */
.cb-about__layout {
  display: grid; gap: var(--cb-sp-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .cb-about__layout { grid-template-columns: 0.9fr 1.1fr; } }
.cb-about__media {
  position: relative; border-radius: var(--cb-radius-lg); overflow: hidden;
  background: var(--cb-surface-2);
  border: 1px solid var(--cb-line);
  aspect-ratio: 4/3;
  display: grid; place-items: center; padding: var(--cb-sp-7);
  box-shadow: var(--cb-shadow);
}
/* Patrón decorativo sutil para que el placeholder no se vea plano */
.cb-about__media::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(41,140,199,0.10) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
}
.cb-about__media img { width: 58%; position: relative; z-index: 1; filter: drop-shadow(0 10px 24px rgba(40,90,130,0.14)); }
.cb-about__media .ph-label {
  position: absolute; bottom: var(--cb-sp-4); left: var(--cb-sp-4); right: var(--cb-sp-4);
  color: var(--cb-muted); font-size: var(--cb-fs-xs); text-align: center;
}

/* ----------------------------------------------------------------------
   DIAGNÓSTICO (banda destacada clara)
   ---------------------------------------------------------------------- */
.cb-diagnostic {
  display: grid; gap: var(--cb-sp-7); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cb-diagnostic { grid-template-columns: 1.1fr 0.9fr; } }
.cb-diagnostic__list { display: grid; gap: var(--cb-sp-3); margin-block: var(--cb-sp-5); }
.cb-diagnostic__list li { display: flex; gap: var(--cb-sp-3); align-items: center; font-weight: 600; }
.cb-diagnostic__list .num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--cb-secondary-050); color: var(--cb-primary);
  display: grid; place-items: center; font-family: var(--cb-font-head); font-weight: 900; font-size: 0.9rem;
}
.cb-diagnostic__card {
  background: #fff; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-lg);
  padding: var(--cb-sp-6); box-shadow: var(--cb-shadow); text-align: center;
}
.cb-diagnostic__card .big {
  font-family: var(--cb-font-head); font-weight: 900; font-size: 3rem; line-height: 1;
  background: var(--cb-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cb-diagnostic__card .lbl { color: var(--cb-muted); font-size: var(--cb-fs-sm); margin-bottom: var(--cb-sp-5); }

/* ----------------------------------------------------------------------
   PASOS "CÓMO TRABAJAMOS" (línea de tiempo)
   ---------------------------------------------------------------------- */
.cb-flow { display: grid; gap: var(--cb-sp-4); grid-template-columns: 1fr; counter-reset: flow; }
@media (min-width: 680px) { .cb-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-flow { grid-template-columns: repeat(3, 1fr); } }
.cb-flow__item {
  position: relative; padding: var(--cb-sp-5); background: #fff;
  border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  transition: transform var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-flow__item:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow); }
.cb-flow__item .n {
  font-family: var(--cb-font-head); font-weight: 900; color: var(--cb-secondary);
  font-size: 0.9rem; letter-spacing: 0.1em;
}
.cb-flow__item h4 { margin: 0.3rem 0; }
.cb-flow__item p { font-size: var(--cb-fs-sm); color: var(--cb-muted); }

/* ----------------------------------------------------------------------
   CENTRO DE RECURSOS (preview)
   ---------------------------------------------------------------------- */
.cb-res-note {
  margin-top: var(--cb-sp-5); font-size: var(--cb-fs-sm); color: var(--cb-muted);
  text-align: center;
}