/* ==========================================================================
   IBC — Página Normas
   Portada, criterios de operación, validación de contrapartes,
   responsabilidades y cierre de confianza. La portada de sección
   (.page-hero) es compartida y vive en css/subpage.css; el proceso numerado
   (.process/.step) es compartido y vive en css/features.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portada — subtítulo y texto de apoyo
   -------------------------------------------------------------------------- */
.normas-hero__content { max-width: 40rem; }

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

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

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

/* --------------------------------------------------------------------------
   Encabezado con regla corta: una línea de latón antes del titular, en la
   misma línea base. Se repite en las tres secciones de contenido de esta
   página (criterios, validación, responsabilidades).
   -------------------------------------------------------------------------- */
.normas-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.normas-heading__rule {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1px;
  background-color: var(--color-brass-500);
}

/* --------------------------------------------------------------------------
   No todo lo posible es aceptable — variante local de .process (compartida
   en css/features.css) sin icono ni línea de conexión: un divisor vertical
   separa cada columna de la siguiente, como en el mockup.
   -------------------------------------------------------------------------- */
.normas-pillars {
  margin-top: var(--space-lg);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  --step-mark-height: 1.9rem;
}

.normas-pillars .step::after { display: none; }
.normas-pillars .step__number { color: var(--color-brass-400); }

.normas-pillars .step { padding-left: var(--space-md); }
.normas-pillars .step:first-child { padding-left: 0; }
.normas-pillars .step + .step { border-left: 1px solid var(--border-hairline-dark); }

/* --------------------------------------------------------------------------
   Antes de conectar, validamos — fotografía de fondo a sangre completa,
   con velo parejo para que el titular y la ruta de validación se lean
   sobre cualquier zona de la imagen (mismo patrón que .capital-process).
   -------------------------------------------------------------------------- */
.normas-validate {
  position: relative;
  overflow: hidden;
  color: var(--color-on-dark);
  /* Más alto que el padding compartido de .section: con más aire arriba y
     abajo se ve más fotografía de fondo antes de que empiece el velo denso
     del contenido. Nunca baja de 100px, ni en móvil. */
  padding-block: clamp(100px, 11vw, 160px);
}

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

.normas-validate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.normas-validate__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(6, 15, 27, 0.82);
}

.normas-validate > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Ruta de validación — línea de tiempo horizontal de 5 hitos, sin números:
   sólo el punto sobre la línea y el rótulo debajo.
   -------------------------------------------------------------------------- */
.normas-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  --route-dot-size: 0.7rem;
  --route-dot-top: 0rem;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Responsabilidades claras — texto de apoyo bajo el titular
   -------------------------------------------------------------------------- */
.normas-responsibility__text {
  max-width: 58ch;
  margin-top: var(--space-sm);
  color: var(--color-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Estructura para generar confianza — cierre partido: fotografía a sangre
   a la izquierda y panel sólido a la derecha, con una franja decorativa al
   pie del panel que retoma la fotografía del piso reflejante.
   -------------------------------------------------------------------------- */
.normas-close {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: clamp(360px, 40vw, 560px);
}

.normas-close__media { position: relative; overflow: hidden; }

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

.normas-close__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-navy-950);
  color: var(--color-on-dark);
  /* El tercer valor reserva el alto real de `.normas-close__strip`
     (ancho del panel × 160/530, y el panel mide 1/2.25 del ancho de la
     sección ⇒ ≈13.4vw) más un pequeño respiro, para que nunca se monte
     sobre "IBC, donde converge el valor". */
  padding: var(--space-xl) var(--space-lg) clamp(7rem, calc(13.5vw + 1rem), 15rem);
}

.normas-close__content { position: relative; z-index: 1; max-width: 26rem; }

.normas-close__title {
  max-width: 14ch;
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-title);
}

.normas-close__list {
  margin-top: var(--space-md);
  color: var(--color-on-dark-soft);
  line-height: 1.8;
}

.normas-close__tagline {
  margin-top: var(--space-lg);
  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;
}

/* La franja retoma el piso reflejante de la fotografía principal y siempre
   cubre el ancho completo del panel, con su proporción real (530 × 160)
   intacta vía "padding-top" — nunca se recorta ni se deforma. Se probó
   `aspect-ratio` + `max-height`, pero en un elemento `position:absolute` de
   ancho fijo (left:0;right:0) eso hace que el navegador renegocie el ANCHO
   para conservar la proporción en vez de topar el alto, dejando un hueco a
   la derecha del panel; y `max-height` tampoco topa un alto fijado por
   "padding-top" en ningún navegador probado. Por eso se dejó sin tope: el
   alto queda atado sólo al ancho del panel (`.normas-close__panel` reserva
   el espacio correspondiente en su `padding-bottom`, ver más abajo). */
.normas-close__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  padding-top: 30.19%; /* 160 / 530 */
  overflow: hidden;
}

.normas-close__strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Puntos de quiebre
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .normas-route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .normas-route__step:not(:last-child)::after { display: none; }

  .normas-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .normas-pillars .step:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .normas-pillars .step:nth-child(n + 4) {
    border-top: 1px solid var(--border-hairline-dark);
    padding-top: var(--space-md);
  }
}

@media (max-width: 780px) {
  .normas-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .normas-pillars .step:nth-child(3n + 1) { border-left: 1px solid var(--border-hairline-dark); padding-left: var(--space-md); }
  .normas-pillars .step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .normas-pillars .step:nth-child(n + 3) {
    border-top: 1px solid var(--border-hairline-dark);
    padding-top: var(--space-md);
  }
}

@media (max-width: 900px) {
  .normas-close { grid-template-columns: minmax(0, 1fr); }
  .normas-close__media { min-height: 260px; }
  /* Apilado a una columna, el panel pasa a medir el ancho completo de la
     sección, así que la franja crece a ~30.2vw (160/530 del ancho total)
     en vez de ~13.4vw — el padding reservado se ajusta igual. */
  .normas-close__panel { padding: var(--space-lg) var(--space-md) clamp(6rem, 33vw, 14rem); }
}

@media (max-width: 640px) {
  .normas-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

  .normas-pillars { grid-template-columns: minmax(0, 1fr); }
  .normas-pillars .step:nth-child(n) { border-left: 0; padding-left: 0; }
  .normas-pillars .step:nth-child(n + 2) { border-top: 1px solid var(--border-hairline-dark); padding-top: var(--space-md); }
}