/* ==========================================================================
   IBC — Página Activos
   Portada con CTA, definición, categorías, acciones de IBC, ruta del activo,
   criterios de admisión, banda de confidencialidad y marcador de imagen
   pendiente. La portada de sección (.page-hero) es compartida y vive en
   css/subpage.css; el proceso numerado (.process/.step) y el cierre
   (.cinematic) son compartidos y viven en css/features.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Marcador de imagen pendiente

   Sustituye a las fotografías que el usuario aún no ha entregado: ocupa el
   mismo espacio y proporción que ocupará la imagen real, con la etiqueta
   <img> equivalente comentada justo encima en el HTML para que el reemplazo
   sea un cambio de un solo elemento.
   -------------------------------------------------------------------------- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 100%;
  min-height: 160px;
  padding: var(--space-sm);
  background: repeating-linear-gradient(135deg,
              var(--color-bone-200), var(--color-bone-200) 12px,
              var(--color-bone-100) 12px, var(--color-bone-100) 24px);
  border: 1px dashed var(--border-hairline);
  color: var(--color-ink-muted);
  text-align: center;
}

.img-placeholder i { font-size: 1.75rem; opacity: 0.55; }

.img-placeholder span {
  max-width: 22ch;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.5;
}

/* Variante para fondos oscuros (portadas, cierre, panel confidencial) */
.img-placeholder--dark {
  background: repeating-linear-gradient(135deg,
              var(--color-navy-800), var(--color-navy-800) 12px,
              var(--color-navy-900) 12px, var(--color-navy-900) 24px);
  border-color: var(--border-hairline-dark);
  color: var(--color-on-dark-muted);
}

/* Cuando el marcador ocupa el fondo absoluto de una portada o banda */
.page-hero__media .img-placeholder,
.cinematic__media .img-placeholder,
.confidential__media .img-placeholder {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Portada — subtítulo, texto de apoyo y llamada a la acción
   (sustituye a la lista de ejes .page-hero__axes que usan otras subpáginas)
   -------------------------------------------------------------------------- */
.activos-hero__content { max-width: 40rem; }

.activos-hero__subtitle {
  margin-top: var(--space-sm);
  color: var(--color-bone-50);
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 0.8rem + 1.1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(6, 15, 27, 0.85), 0 4px 30px rgba(6, 15, 27, 0.75);
}

.activos-hero__lead {
  max-width: 46ch;
  margin-top: var(--space-md);
  color: var(--color-on-dark-soft);
  font-size: var(--text-base);
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(6, 15, 27, 0.6);
}

.activos-hero__cta { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   Fondo azul marino oscuro — igual que el pie de página — para todas las
   secciones de contenido bajo el hero. El texto de cada componente se
   invierte a los tokens "on-dark" correspondientes para no perder
   legibilidad sobre este fondo.
   -------------------------------------------------------------------------- */
.section--navy {
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   ¿Qué entendemos por un activo? — definición + cita
   -------------------------------------------------------------------------- */
.activos-define {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
}

.activos-define__text {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--color-on-dark-soft);
}

.activos-define__quote {
  margin: 0;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--border-hairline-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--color-bone-100);
  line-height: 1.32;
}

/* --------------------------------------------------------------------------
   Encabezado de sección partido: título con la variante --split y una nota
   corta alineada a la derecha, sobre la misma línea base.
   -------------------------------------------------------------------------- */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  text-align: left;
}

.section-head__note {
  color: var(--color-on-dark-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Categorías de activos — mosaico de 6 fotografías con leyenda
   -------------------------------------------------------------------------- */
.categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.category__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-navy-800);
}

.category__media img { width: 100%; height: 100%; object-fit: cover; }

.category__title {
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-bone-50);
}

.category__text {
  margin-top: 0.25rem;
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Lo que IBC hace con un activo — variante de .process sin icono, 6 pasos
   -------------------------------------------------------------------------- */
.process--plain {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  --step-mark-height: 1.9rem;
}

/* Sin línea de conexión: aquí son acciones paralelas, no una secuencia. */
.process--plain .step::after { display: none; }

.process--plain .step__number { color: var(--color-brass-400); }
.process--plain .step__text { color: var(--color-on-dark-muted); }

/* En escritorio, un borde separa cada sub-contenedor (número + texto) del
   siguiente en vez de la línea de conexión heredada de .process. */
@media (min-width: 901px) {
  .process--plain .step + .step {
    border-left: 1px solid var(--border-hairline-dark);
    padding-left: var(--space-md);
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .process--plain .step:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .process--plain .step:nth-child(n + 4) {
    border-top: 1px solid var(--border-hairline-dark);
    padding-top: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   La ruta del activo — línea de tiempo horizontal de 6 hitos
   -------------------------------------------------------------------------- */
.route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  --route-dot-size: 0.7rem;
  --route-dot-top: 3rem;
}

.route__step {
  position: relative;
  padding-top: calc(var(--route-dot-top) + var(--space-sm));
  text-align: center;
}

.route__number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums;
  color: var(--color-brass-400);
}

.route__dot {
  position: absolute;
  top: var(--route-dot-top);
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--route-dot-size);
  height: var(--route-dot-size);
  border-radius: 50%;
  background-color: var(--color-navy-950);
  border: 2px solid var(--color-brass-500);
  z-index: 1;
}

.route__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--route-dot-top);
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--border-hairline-dark);
  transform: translateY(-50%);
}

.route__title {
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.route__text {
  max-width: 17ch;
  margin: 0.3rem auto 0;
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   No todo activo entra a IBC — texto de apoyo + criterios de admisión
   -------------------------------------------------------------------------- */
.activos-criteria__lead {
  max-width: 62ch;
  margin-top: var(--space-sm);
  color: var(--color-on-dark-soft);
}

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

.criterion {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}

.criterion img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.criterion:hover img { transform: scale(1.05); }

/* Velo inferior: es lo que mantiene el título legible en blanco sobre
   cualquier fotografía, sin depender del contraste propio de la imagen. */
.criterion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(6, 15, 27, 0.85) 0%,
              rgba(6, 15, 27, 0.32) 55%,
              rgba(6, 15, 27, 0) 100%);
}

.criterion span {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  color: var(--color-bone-50);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(6, 15, 27, 0.6);
}

/* --------------------------------------------------------------------------
   Información protegida — banda partida a sangre (texto + fotografía)
   -------------------------------------------------------------------------- */
.confidential {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 30vw, 460px);
  overflow: hidden;
  color: var(--color-on-dark);
}

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

.confidential__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo para que el título y el párrafo se lean sobre cualquier fotografía,
   más denso a la izquierda porque ahí se apoya el texto. */
.confidential__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(6, 15, 27, 0.92) 0%,
              rgba(6, 15, 27, 0.72) 42%,
              rgba(6, 15, 27, 0.4) 100%);
}

.confidential__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-cinematic) var(--space-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
}

.confidential__title {
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-title);
}

.confidential__body { color: var(--color-on-dark-soft); }

/* --------------------------------------------------------------------------
   Cierre — línea de apoyo bajo el titular

   No reutiliza .cinematic__kicker: ese componente está pensado para etiquetas
   cortas en versalitas (<40 caracteres); aquí el texto es una frase larga y
   forzarla a mayúsculas la vuelve difícil de leer.
   -------------------------------------------------------------------------- */
.closing__lead {
  max-width: 42ch;
  margin-top: var(--space-sm);
  color: var(--color-on-dark-soft);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Puntos de quiebre
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process--plain { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .route__step:not(:last-child)::after { display: none; }

  .criteria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .activos-define { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .activos-define__quote {
    padding-left: 0;
    padding-top: var(--space-md);
    border-left: 0;
    border-top: 1px solid var(--border-hairline-dark);
  }

  .confidential__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}

@media (max-width: 640px) {
  .section-head--split { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .section-head__note { white-space: normal; }

  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .criteria { grid-template-columns: minmax(0, 1fr); }
}