/* ==========================================================================
   Cooperación Bolivia — Componentes
   ========================================================================== */

/* ----------------------------------------------------------------------
   BOTONES
   ---------------------------------------------------------------------- */
.cb-btn {
  --_bg: var(--cb-primary);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cb-sp-2);
  font-family: var(--cb-font-head);
  font-weight: 700;
  font-size: var(--cb-fs-base);
  line-height: 1;
  padding: 0.95em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--cb-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--cb-dur) var(--cb-ease),
              box-shadow var(--cb-dur) var(--cb-ease),
              background-color var(--cb-dur) var(--cb-ease),
              color var(--cb-dur) var(--cb-ease),
              border-color var(--cb-dur) var(--cb-ease);
}
.cb-btn svg { width: 1.15em; height: 1.15em; }

/* Barrido de brillo en hover */
.cb-btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--cb-dur-slow) var(--cb-ease);
}
.cb-btn:hover::after { transform: translateX(130%); }

/* Primario */
.cb-btn--primary {
  background: var(--cb-grad-brand);
  color: #fff;
  box-shadow: var(--cb-shadow-brand);
}
.cb-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(41, 140, 199, 0.38);
}
.cb-btn--primary:active { transform: translateY(0); }

/* Secundario (contorno) */
.cb-btn--secondary {
  background: transparent;
  color: var(--cb-primary);
  border-color: var(--cb-primary);
}
.cb-btn--secondary:hover {
  background: var(--cb-primary-050);
  color: var(--cb-primary-700);
  transform: translateY(-2px);
}

/* Fantasma sobre fondo de marca */
.cb-btn--ghost {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.cb-btn--ghost:hover { background: rgba(255,255,255,0.24); color: #fff; transform: translateY(-2px); }

.cb-btn--light { background: #fff; color: var(--cb-primary); }
.cb-btn--light:hover { color: var(--cb-primary-700); transform: translateY(-2px); box-shadow: var(--cb-shadow); }

/* WhatsApp */
.cb-btn--wa { background: var(--cb-wa); color: #fff; }
.cb-btn--wa:hover { background: var(--cb-wa-700); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,0.35); }

.cb-btn--sm { padding: 0.7em 1.2em; font-size: var(--cb-fs-sm); }
.cb-btn--block { width: 100%; }

.cb-btn-row { display: flex; flex-wrap: wrap; gap: var(--cb-sp-4); align-items: center; }

/* Enlace con flecha animada */
.cb-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--cb-font-head); font-weight: 700;
  color: var(--cb-primary);
}
.cb-link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--cb-dur) var(--cb-ease); }
.cb-link-arrow:hover svg { transform: translateX(5px); }

/* ----------------------------------------------------------------------
   TARJETAS
   ---------------------------------------------------------------------- */
.cb-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-sm);
  transition: transform var(--cb-dur) var(--cb-ease),
              box-shadow var(--cb-dur) var(--cb-ease),
              border-color var(--cb-dur) var(--cb-ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cb-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cb-shadow-lg);
  border-color: transparent;
}

/* Tarjeta de capacidad: con barra de color superior e ícono */
.cb-capability {
  position: relative;
  overflow: hidden;
}
.cb-capability::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--cb-grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--cb-dur-slow) var(--cb-ease);
}
.cb-capability:hover::before { transform: scaleX(1); }

.cb-capability__icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--cb-radius);
  background: var(--cb-secondary-050);
  color: var(--cb-primary);
  margin-bottom: var(--cb-sp-4);
  transition: transform var(--cb-dur) var(--cb-ease), background var(--cb-dur) var(--cb-ease);
}
.cb-capability__icon svg { width: 30px; height: 30px; }
.cb-capability:hover .cb-capability__icon {
  transform: translateY(-3px) rotate(-4deg);
  background: var(--cb-grad-brand);
  color: #fff;
}
.cb-capability h3 { margin-bottom: var(--cb-sp-3); }
.cb-capability p { color: var(--cb-muted); font-size: var(--cb-fs-base); flex: 1; }
.cb-capability .cb-link-arrow { margin-top: var(--cb-sp-5); }

/* --- Temas por capacidad (solo elementos de énfasis) ---
   Uso: <article class="cb-card cb-capability" data-cap="gobernanza"> ... */
.cb-capability[data-cap="gobernanza"]   { --_cap: var(--cb-cap-gobernanza);   --_cap050: var(--cb-cap-gobernanza-050); }
.cb-capability[data-cap="direccion"]     { --_cap: var(--cb-cap-direccion);     --_cap050: var(--cb-cap-direccion-050); }
.cb-capability[data-cap="comunicacion"]  { --_cap: var(--cb-cap-comunicacion);  --_cap050: var(--cb-cap-comunicacion-050); }
.cb-capability[data-cap="digital"]       { --_cap: var(--cb-cap-digital);       --_cap050: var(--cb-cap-digital-050); }

.cb-capability[data-cap]::before { background: var(--_cap); }
.cb-capability[data-cap] .cb-capability__icon { background: var(--_cap050); color: var(--_cap); }
.cb-capability[data-cap]:hover .cb-capability__icon { background: var(--_cap); color: #fff; }
.cb-capability[data-cap] .cb-link-arrow { color: var(--_cap); }

/* Tarjeta de recurso (Centro de Recursos) */
.cb-resource__meta {
  display: flex; flex-wrap: wrap; gap: var(--cb-sp-2); align-items: center;
  font-size: var(--cb-fs-xs); color: var(--cb-muted); margin-bottom: var(--cb-sp-3);
}
.cb-resource h4 { margin-bottom: var(--cb-sp-2); }
.cb-resource p { color: var(--cb-muted); font-size: var(--cb-fs-sm); flex: 1; }
.cb-resource .cb-link-arrow { margin-top: var(--cb-sp-4); font-size: var(--cb-fs-sm); }

/* Chip / etiqueta */
.cb-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--cb-font-head); font-weight: 700;
  font-size: var(--cb-fs-xs); letter-spacing: 0.04em;
  padding: 0.35em 0.8em; border-radius: var(--cb-radius-pill);
  background: var(--cb-secondary-050); color: var(--cb-primary-700);
}
.cb-chip--yellow { background: #fdf3d3; color: #8a6d10; }
.cb-chip--green  { background: #d9f6e8; color: #06704a; }
.cb-chip--red    { background: #fde3e3; color: #a60707; }

/* Chips por capacidad (Centro de Recursos y categorías) */
.cb-chip--gobernanza   { background: var(--cb-cap-gobernanza-050);   color: var(--cb-cap-direccion); }
.cb-chip--direccion     { background: var(--cb-cap-direccion-050);     color: var(--cb-cap-direccion); }
.cb-chip--comunicacion  { background: var(--cb-cap-comunicacion-050);  color: var(--cb-cap-comunicacion-ink); }
.cb-chip--digital       { background: var(--cb-cap-digital-050);       color: var(--cb-cap-digital-ink); }

/* Acento de color en el borde superior de la tarjeta de recurso */
.cb-resource[data-cap] { position: relative; overflow: hidden; }
.cb-resource[data-cap]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
}
.cb-resource[data-cap="gobernanza"]::before   { background: var(--cb-cap-gobernanza); }
.cb-resource[data-cap="direccion"]::before     { background: var(--cb-cap-direccion); }
.cb-resource[data-cap="comunicacion"]::before  { background: var(--cb-cap-comunicacion); }
.cb-resource[data-cap="digital"]::before       { background: var(--cb-cap-digital); }
.cb-resource[data-cap="gobernanza"] .cb-link-arrow   { color: var(--cb-cap-gobernanza); }
.cb-resource[data-cap="direccion"] .cb-link-arrow     { color: var(--cb-cap-direccion); }
.cb-resource[data-cap="comunicacion"] .cb-link-arrow  { color: var(--cb-cap-comunicacion-ink); }
.cb-resource[data-cap="digital"] .cb-link-arrow       { color: var(--cb-cap-digital-ink); }

/* ----------------------------------------------------------------------
   BLOQUE DESTACADO / CITA
   ---------------------------------------------------------------------- */
.cb-highlight {
  position: relative;
  background: var(--cb-secondary-050);
  border: 1px solid #cfeaf4;
  border-left: 5px solid var(--cb-secondary);
  border-radius: var(--cb-radius);
  padding: var(--cb-sp-6);
  font-family: var(--cb-font-head);
  font-weight: 700;
  font-size: var(--cb-fs-xl);
  line-height: var(--cb-lh-snug);
  color: var(--cb-primary-700);
}

/* ----------------------------------------------------------------------
   PASOS (proceso numerado)
   ---------------------------------------------------------------------- */
.cb-steps { counter-reset: step; display: grid; gap: var(--cb-sp-5); }
@media (min-width: 760px) { .cb-steps.is-row { grid-template-columns: repeat(3, 1fr); } }
.cb-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  padding: var(--cb-sp-6) var(--cb-sp-5) var(--cb-sp-5);
  transition: transform var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-step:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow); }
.cb-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--cb-font-head); font-weight: 900;
  font-size: 2.2rem; line-height: 1;
  background: var(--cb-grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: var(--cb-sp-3);
}
.cb-step h4 { margin-bottom: var(--cb-sp-2); }
.cb-step p { color: var(--cb-muted); font-size: var(--cb-fs-sm); }

/* ----------------------------------------------------------------------
   ACORDEÓN (FAQ)
   ---------------------------------------------------------------------- */
.cb-faq { max-width: 820px; margin-inline: auto; }
.cb-faq__item {
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  margin-bottom: var(--cb-sp-3);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-faq__item[open] { border-color: var(--cb-secondary); box-shadow: var(--cb-shadow-sm); }
.cb-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cb-sp-4);
  padding: var(--cb-sp-5);
  font-family: var(--cb-font-head); font-weight: 700; font-size: var(--cb-fs-lg);
  color: var(--cb-ink);
}
.cb-faq__q::-webkit-details-marker { display: none; }
.cb-faq__q::after {
  content: ""; flex: none;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23298CC7' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: transform var(--cb-dur) var(--cb-ease);
}
.cb-faq__item[open] .cb-faq__q::after { transform: rotate(135deg); }
.cb-faq__a { padding: 0 var(--cb-sp-5) var(--cb-sp-5); color: var(--cb-muted); }
.cb-faq__a p { max-width: none; }

/* ----------------------------------------------------------------------
   BLOQUE CTA (banda de conversión)
   ---------------------------------------------------------------------- */
.cb-cta {
  position: relative;
  overflow: hidden;
  background: var(--cb-grad-brand);
  color: #fff;
  border-radius: var(--cb-radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}
.cb-cta h2 { color: #fff; margin-bottom: var(--cb-sp-4); }
.cb-cta p { color: rgba(255,255,255,0.92); margin-inline: auto; margin-bottom: var(--cb-sp-6); font-size: var(--cb-fs-lg); }
.cb-cta .cb-btn-row { justify-content: center; }
/* Formas decorativas */
.cb-cta__blob {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}
.cb-cta__blob--1 { width: 320px; height: 320px; top: -120px; right: -80px; }
.cb-cta__blob--2 { width: 220px; height: 220px; bottom: -110px; left: -60px; background: rgba(255,255,255,0.07); }

/* ----------------------------------------------------------------------
   DIAGRAMA DE CAPACIDADES (sistema interconectado)
   ---------------------------------------------------------------------- */
.cb-system {
  display: grid; gap: var(--cb-sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .cb-system { grid-template-columns: 1fr 1fr; }
}
.cb-system__node {
  display: flex; gap: var(--cb-sp-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius); padding: var(--cb-sp-5);
  transition: transform var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-system__node:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow); }
.cb-system__node .ico {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: var(--cb-secondary-050); color: var(--cb-primary);
  display: grid; place-items: center;
}
.cb-system__node .ico svg { width: 26px; height: 26px; }
.cb-system__node h4 { margin-bottom: 0.25rem; }
.cb-system__node p { font-size: var(--cb-fs-sm); color: var(--cb-muted); }

/* ----------------------------------------------------------------------
   BOTÓN FLOTANTE WHATSAPP
   ---------------------------------------------------------------------- */
.cb-wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--cb-wa); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(37,211,102,0.4);
  z-index: var(--cb-z-overlay);
  transition: transform var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-wa-float svg { width: 30px; height: 30px; }
.cb-wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 14px 38px rgba(37,211,102,0.5); }
.cb-wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.5);
  animation: cb-pulse 2.4s infinite;
}
@keyframes cb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ----------------------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------------------- */
.cb-breadcrumb { font-size: var(--cb-fs-sm); color: var(--cb-muted); padding-block: var(--cb-sp-5); }
.cb-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.cb-breadcrumb li { display: flex; align-items: center; gap: 0.5em; }
.cb-breadcrumb li:not(:last-child)::after { content: "›"; color: var(--cb-muted); }
.cb-breadcrumb a { color: var(--cb-muted); }
.cb-breadcrumb a:hover { color: var(--cb-primary); }
.cb-breadcrumb [aria-current="page"] { color: var(--cb-ink); font-weight: 600; }