/* ==========================================================================
   IBC — Página Nosotros
   Portada de sección, presentación, valores y propósito.
   Reutiliza los tokens y componentes del sitio; aquí sólo vive lo propio
   de esta página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portada de sección

   Más baja que la portada del índice: es una cabecera de página, no una
   pantalla de entrada. El texto se apoya abajo a la izquierda y los ejes de
   valor se alinean a la derecha, como en la plantilla.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 80vh, 860px);
  /* Relleno simétrico: es lo que deja el bloque de texto en el centro exacto
     del eje vertical. La altura mínima garantiza que, aun centrado, quede muy
     por debajo de la cabecera fija. */
  padding-block: var(--space-lg);
  overflow: hidden;
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

/* Velo parcial: sólo el tercio izquierdo, donde se apoyan el titular y el
   rótulo. Se desvanece antes de la mitad, de modo que el ventanal, el globo
   y la mesa se ven sin ninguna capa encima. */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(6, 15, 27, 0.54) 0%,
              rgba(6, 15, 27, 0.42) 22%,
              rgba(6, 15, 27, 0.24) 38%,
              rgba(6, 15, 27, 0) 56%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}

.page-hero__title {
  /* Mismo tipo, peso y escala que .hero__title del index (sections.css):
     es la misma familia tipográfica en toda la web, aquí sólo cambiaba el
     tamaño/peso y por eso se veía distinta. */
  font-size: clamp(1.5rem, 0.7rem + 4.15vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  /* La fotografía va limpia, sin velo: la legibilidad recae por completo en
     la sombra del texto. Dos capas, una corta y densa para separar del fondo
     y otra amplia y suave que apaga la ciudad detrás. */
  text-shadow: 0 1px 3px rgba(6, 15, 27, 0.85), 0 4px 34px rgba(6, 15, 27, 0.8);
}

.page-hero__kicker {
  margin-top: var(--space-sm);
  /* Sube de gris claro a hueso: sobre la ciudad al atardecer, sin velo, el
     gris se disolvía. */
  color: var(--color-bone-50);
  font-family: var(--font-ui);
  font-size: clamp(0.625rem, 0.55rem + 0.28vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(6, 15, 27, 0.9), 0 3px 22px rgba(6, 15, 27, 0.75);
}

/* Ejes de valor: columna derecha, alineada al borde del contenedor. Sin velo
   propio: la legibilidad la dan el velo parcial de la fotografía y la sombra
   de cada línea.

   El desplazamiento vertical no es decorativo: centrada, la primera línea cae
   justo sobre el letrero grabado en la pared de la fotografía y se vuelve
   ilegible. Bajarla deja las cinco sobre mármol limpio. Es una medida atada al
   encuadre de `heroSection-nosotros.jpeg`; si se cambia esa imagen, hay que
   revisar este valor. */
.page-hero__axes {
  text-align: right;
  transform: translateY(3.75rem);
}

.page-hero__axes li {
  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;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(6, 15, 27, 0.9), 0 3px 20px rgba(6, 15, 27, 0.75);
  transition: color var(--duration-fast) var(--ease-standard);
}

.page-hero__axes li + li { margin-top: 0.9rem; }
.page-hero__axes li:hover { color: var(--color-brass-300); }

/* --------------------------------------------------------------------------
   Quiénes somos

   El texto respeta el contenedor de 1280 px; la fotografía se sale a sangre
   por la derecha para romper la retícula, igual que en la plantilla.
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
}

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

/* Caja alta y serif como el resto de titulares, pero sin versalitas: en la
   plantilla este titular va en caja mixta para leerse como texto editorial. */
.about__title {
  margin-top: var(--space-sm);
  max-width: 21ch;
  font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: none;
}

.about__kicker {
  margin-top: var(--space-sm);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.about__rule {
  width: 3.5rem;
  height: 1px;
  margin-top: var(--space-md);
  background-color: var(--color-brass-500);
}

.about__body {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--color-ink-soft);
}

.about__body + .about__body { margin-top: var(--space-sm); }
.about__cta { margin-top: var(--space-lg); }

.about__media {
  position: relative;
  overflow: hidden;
}

.about__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Velo sólo en la mitad superior derecha: es donde va el rótulo. */
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(6, 15, 27, 0.58) 0%, rgba(6, 15, 27, 0.14) 46%, rgba(6, 15, 27, 0) 72%);
}

.about__caption {
  position: absolute;
  top: 28%;
  right: var(--space-md);
  z-index: 1;
  color: var(--color-on-dark);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: right;
  line-height: 2.2;
  text-shadow: 0 1px 14px rgba(6, 15, 27, 0.7);
}

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */

/* Sangrado derecho de la fotografía: sólo cuando hay dos columnas.
   Compensa la canaleta del contenedor más el margen sobrante hasta el borde
   de la ventana. `body` recorta el desbordamiento del ancho de la barra. */
@media (min-width: 1081px) {
  .about__media {
    margin-right: calc(-1 * (var(--space-gutter) + max(0px, (100vw - var(--container-max)) / 2)));
  }
}

@media (max-width: 1080px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .about__title { max-width: 22ch; }
  .about__media img { aspect-ratio: 16 / 10; }

  .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) {
  .page-hero {
    min-height: clamp(460px, 76vh, 680px);
    /* El inner pasa a ocupar todo el alto disponible para poder anclar los
       ejes de valor a su borde inferior (ver .page-hero__axes). */
    align-items: stretch;
  }

  .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Bloque del titular (el <div> que envuelve h1 + kicker): crece para
     ocupar todo el espacio libre por encima de los ejes y centra su
     contenido en ese espacio, en vez de quedarse pegado arriba. */
  .page-hero__inner > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Encuadre desplazado a la derecha: en retrato la foto se recorta mucho
     por los lados y, centrada, dejaba fuera el rótulo «IBC» de la pared. */
  .page-hero__media img {
    object-position: 78% 52%;
  }

  .page-hero__title {
    /* Más grande que el tamaño compartido con el index: aquí el título va
       solo (sin kicker/lead que lo acompañen) y necesita más presencia. */
    font-size: clamp(2.25rem, 1.5rem + 5vw, 3.25rem);
  }

  .page-hero__axes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    text-align: center;
    /* El bloque del titular ya ocupa todo el espacio libre (flex: 1), así
       que la lista queda pegada al borde inferior sin necesidad de margen
       automático propio. */
    transform: none;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-hairline-dark);
  }

  /* En vertical el texto ocupa todo el ancho, así que el velo deja de ser
     lateral y pasa a ser una franja central: el cielo de arriba y la mesa de
     abajo siguen limpios. Más opaco que en desktop porque, al desplazar la
     foto hacia la derecha, el titular y los ejes caen sobre zonas más
     luminosas (ventanal y letrero metálico). */
  .page-hero__media::after {
    background: linear-gradient(to bottom,
                rgba(6, 15, 27, 0.32) 0%,
                rgba(6, 15, 27, 0.58) 28%,
                rgba(6, 15, 27, 0.5) 60%,
                rgba(6, 15, 27, 0.6) 100%);
  }

  .page-hero__axes li + li { margin-top: 0; }

  /* La fotografía del mapamundi rompe el contenedor y ocupa el ancho completo
     de la ventana: apilada y con canaleta a los lados quedaba anecdótica.
     El desplazamiento es exacto porque, por debajo de 1280 px, el contenedor
     mide lo que la ventana y su único margen lateral es la canaleta. */
  .about__media { margin-inline: calc(-1 * var(--space-gutter)); }

  .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); }

  .about__cta .btn { width: 100%; }

  /* El rótulo baja al pie de la imagen: en vertical, la esquina superior
     derecha queda sobre el mapa y pierde contraste. */
  .about__caption {
    top: auto;
    bottom: var(--space-sm);
    right: var(--space-sm);
    line-height: 1.9;
  }

  .about__media::after {
    background: linear-gradient(to top, rgba(6, 15, 27, 0.72) 0%, rgba(6, 15, 27, 0.28) 26%, rgba(6, 15, 27, 0) 52%);
  }

  .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; }
}