/* -------------------------------------------------------------------------
   Cuidémonos — Inversión Privada.
   ------------------------------------------------------------------------- */

/* Hero oscuro (usa la base .hero-shell de sections.css) */
.inv-hero {
  min-height: clamp(460px, 70svh, 560px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 3rem;
}
.inv-hero__overlay {
  background: linear-gradient(90deg, rgba(12, 12, 14, 0.95) 0%, rgba(12, 12, 14, 0.7) 42%, rgba(12, 12, 14, 0.15) 100%);
}
.inv-hero > .container { width: 100%; }
.inv-hero__inner { max-width: 820px; margin-right: auto; }
.inv-hero__eyebrow { color: rgba(255, 255, 255, 0.82); font-weight: var(--weight-body); font-size: 1.25rem; margin: 0 0 0.5rem; }
.inv-hero__title {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 1rem + 4.5vw, 3.75rem);
  line-height: 1.05;
  margin: 0 0 1.1rem;
}
.inv-hero__desc { color: rgba(255, 255, 255, 0.9); font-weight: var(--weight-body); font-size: 1rem; max-width: 52ch; margin: 0; }

/* Inversión total */
.inv-total { text-align: center; }
.inv-total__label {
  color: var(--color-muted);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}
.inv-total__value {
  font-family: var(--font-head);
  font-weight: var(--weight-display);
  font-size: clamp(2.5rem, 1rem + 6vw, 5rem);
  color: var(--color-primary-dark);
  line-height: 1;
  margin: 0 0 2.5rem;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Lista de patrocinadores: panel blanco, filas gris claro. */
.inv-list {
  background: #fff;
  border-radius: 24px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
}
.inv-row {
  display: grid;
  grid-template-columns: 160px 1fr auto 22px;
  align-items: center;
  gap: 1.5rem;
  background: #f4f4f6;
  border-radius: 16px;
  padding: 1.1rem 1.75rem;
}
.inv-row__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.inv-row__logo img { max-height: 66px; width: auto; }
.inv-row__name { color: var(--color-muted); font-weight: var(--weight-strong); font-size: 1.25rem; }
.inv-row__amount {
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  color: #555;
  text-align: right;
  white-space: nowrap;
}
.inv-row__dot { width: 18px; height: 18px; border-radius: 50%; background: #cfcfcf; justify-self: center; }
.inv-row__dot.is-on { background: #3ac24a; animation: cuidemonos-pulse 2s ease-out infinite; }
@keyframes cuidemonos-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(58, 194, 74, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(58, 194, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 194, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .inv-row__dot.is-on { animation: none; box-shadow: 0 0 0 4px rgba(58, 194, 74, 0.15); }
}
.inv-list__empty { text-align: center; color: var(--color-muted); margin: 0; }

@media (max-width: 640px) {
  .inv-hero { min-height: 460px; text-align: left; }
  /* Cifras grandes: envolver antes que desbordar. */
  .inv-total__value,
  .inv-row__amount { white-space: normal; overflow-wrap: break-word; }
  .inv-row {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "logo name dot" "logo amount dot";
    gap: 0.25rem 1rem;
  }
  .inv-row__logo { grid-area: logo; }
  .inv-row__logo img { max-height: 40px; }
  .inv-row__name { grid-area: name; font-size: 1rem; }
  .inv-row__amount { grid-area: amount; text-align: left; }
  .inv-row__dot { grid-area: dot; }
}