/* ==========================================================================
   IBC — Página Nosotros
   Valores y propósito. La portada de sección y el bloque de presentación
   (.page-hero, .about) son compartidos entre subpáginas y viven en
   css/subpage.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nuestros valores — banda oscura
   -------------------------------------------------------------------------- */
.values {
  --values-rule: rgba(203, 174, 124, 0.24);
  padding-block: var(--space-xl);
  background-color: var(--color-navy-900);
  color: var(--color-on-dark);
}

.values__title {
  text-align: center;
  color: var(--color-bone-50);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.values__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-lg);
}

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.value + .value { border-left: 1px solid var(--values-rule); }
.value:hover { transform: translateY(-4px); }

.value__icon {
  width: 2.9rem;
  height: 2.9rem;
  color: var(--color-bone-50);
  transition: color var(--duration-normal) var(--ease-standard);
}

.value__icon svg { width: 100%; height: 100%; }
.value:hover .value__icon { color: var(--color-brass-400); }

.value__name {
  margin-top: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-bone-50);
}

.value__text {
  max-width: 24ch;
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Misión, visión y propósito — bloque partido a sangre
   -------------------------------------------------------------------------- */
.purpose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background-color: var(--surface-alt);
}

.purpose__media {
  position: relative;
  min-height: clamp(320px, 34vw, 520px);
  overflow: hidden;
}

.purpose__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.purpose__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(6, 15, 27, 0.78) 0%, rgba(6, 15, 27, 0.42) 48%, rgba(6, 15, 27, 0.12) 100%);
}

.purpose__statement {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  right: var(--space-md);
  z-index: 1;
  max-width: 22ch;
  color: var(--color-on-dark);
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 2;
  text-shadow: 0 1px 16px rgba(6, 15, 27, 0.65);
}

.purpose__statement::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: var(--space-md);
  background-color: var(--color-brass-400);
}

.purpose__panel {
  display: flex;
  align-items: center;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-bone-100);
}

.purpose__inner {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.tenets { display: grid; gap: var(--space-md); }

.tenet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.tenet__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-navy-800);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              color var(--duration-normal) var(--ease-standard);
}

.tenet__icon svg { width: 100%; height: 100%; }

.tenet:hover .tenet__icon {
  transform: translateY(-3px);
  color: var(--color-brass-600);
}

.tenet__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-navy-800);
}

.tenet__text {
  margin-top: var(--space-2xs);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.purpose__closing {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(184, 150, 92, 0.42);
  text-align: center;
  color: var(--color-navy-800);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Puntos de quiebre
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value { border-left: 1px solid var(--values-rule); }
  .value:nth-child(3n + 1) { border-left: 0; }
  .value:nth-child(n + 4) { border-top: 1px solid var(--values-rule); padding-top: var(--space-md); }
}

@media (max-width: 900px) {
  .purpose { grid-template-columns: minmax(0, 1fr); }
  .purpose__media { min-height: 300px; }
  .purpose__panel { padding: var(--space-lg) var(--space-gutter); }
  .purpose__statement { top: var(--space-md); left: var(--space-gutter); }
}

@media (max-width: 640px) {
  .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value:nth-child(3n + 1) { border-left: 1px solid var(--values-rule); }
  .value:nth-child(odd) { border-left: 0; }
  .value:nth-child(n + 3) { border-top: 1px solid var(--values-rule); padding-top: var(--space-md); }

  .tenet { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .tenet__icon { width: 2.5rem; height: 2.5rem; }
}

@media (max-width: 420px) {
  .values__list { grid-template-columns: minmax(0, 1fr); }
  .value:nth-child(n) { border-left: 0; border-top: 1px solid var(--values-rule); }
  .value:first-child { border-top: 0; }
}