/* ==========================================================================
   IBC — Componentes compartidos entre subpáginas
   Portada de sección (page-hero) y bloque de presentación (about). Los usan
   nosotros.html y avales.html; lo propio de cada página vive en su propia
   hoja (nosotros.css, avales.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   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%;
  /* Disuasorio, no bloqueo real: evita el "fantasma" de arrastre nativo
     y la selección accidental (complementa js/main.js). */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 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 la fotografía se ve
   sin ninguna capa encima en el resto del encuadre. */
.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. */
  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 el fondo 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);
  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
   puede caer sobre un elemento luminoso de la fotografía y volverse
   ilegible. Bajarla deja las líneas sobre una zona limpia. Es una medida
   atada al encuadre de la imagen de portada de cada subpágina; 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); }

/* Variante `.page-hero--start`: ejes alineados a la izquierda en escritorio
   en vez de a la derecha (avales.html, redglobal.html). En móvil ya se
   apilan y centran vía las reglas de más abajo, comunes a ambas variantes. */
@media (min-width: 901px) {
  .page-hero--start .page-hero__inner { grid-template-columns: minmax(0, 1fr); }

  .page-hero--start .page-hero__axes {
    margin-top: var(--space-lg);
    text-align: left;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Bloque de presentación (about)

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

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

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

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

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

  /* La fotografía 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)); }
}

@media (max-width: 640px) {
  .about__cta .btn { width: 100%; }

  /* El rótulo baja al pie de la imagen: en vertical, la esquina superior
     derecha suele perder 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%);
  }
}