/* ============================================================
   trust.css — Independencia + privacidad adaptada al país
   Se usa en las dos vistas (médico y personas): ambas clonan el
   mismo <template id="shared-tpl">.
   Fase 15 · 2026-08-08
   ============================================================ */

/* ── Sección de independencia ── */
.indep-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  margin-top: 40px;
}

.indep-seal {
  width: clamp(140px, 15vw, 178px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 22px 46px -18px rgba(110, 142, 232, .6);
}
.indep-seal b {
  display: block;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 900; letter-spacing: -.035em; line-height: 1;
}
.indep-seal span {
  display: block; margin-top: 5px;
  font-size: clamp(9.5px, .82vw, 11px);
  font-weight: 800; letter-spacing: .13em;
}

.indep-list { display: grid; gap: 15px; }
.indep-item { display: flex; gap: 13px; align-items: flex-start; }
.indep-item svg { width: 21px; height: 21px; flex: none; margin-top: 2px; }
.indep-item.no svg { color: #FF453A; }
.indep-item.yes svg { color: #17A05C; }
html[data-theme="dark"] .indep-item.yes svg { color: #4FD483; }
.indep-item b {
  display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
}
.indep-item p {
  margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5;
}

/* ── Píldora de alcance geográfico bajo las tarjetas de privacidad ── */
.tr-geo-wrap { text-align: center; margin-top: 26px; }
.tr-geo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 980px; padding: 8px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.tr-geo svg { width: 15px; height: 15px; color: var(--teal); }

/* ── Versión ampliada (lado Personas) ── */
.indep-seal-solo { margin: 36px auto 0; }

.indep-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.5vw, 46px); margin-top: 44px;
}
.indep-col h4 {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px;
  position: relative; display: inline-block;
}
.indep-col h4::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px;
  border-radius: 980px; background: var(--grad); opacity: .55;
}
.indep-col p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* Cómo contribuir */
.contrib {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-top: 38px;
}
.contrib-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 18px); padding: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 32px -22px rgba(28,30,60,.3);
}
html[data-theme="dark"] .contrib-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 32px -22px rgba(0,0,0,.7);
}
.contrib-n {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: var(--grad); color: #fff;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900; letter-spacing: -.02em;
}
.contrib-card h4 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
.contrib-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 860px) {
  .indep-cols { grid-template-columns: 1fr; gap: 26px; }
  .contrib { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .indep-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; gap: 26px; }
  .indep-item b { font-size: 15px; }
}