#cumplimiento { background: var(--marfil); overflow-x: clip; }
/* Columna derecha desde x≈620 a 1440: planteamiento arriba y pilares en 2×2. */
#cumplimiento .cumplimiento__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: clamp(28px, 3.6vh, 40px); }
#cumplimiento .cumplimiento__introduccion, #cumplimiento .cumplimiento__pilares { position: relative; z-index: 1; grid-column: 2; min-width: 0; }
#cumplimiento .lead { margin-top: 20px; max-width: 34em; }
/* La bóveda sale por el borde izquierdo y ocupa el alto de la sección. El canto del anillo
   (59.6% del archivo) cae en --canto, con tope de 580px para que el corte izquierdo del
   archivo quede siempre fuera de pantalla, también en monitores anchos. */
#cumplimiento .cumplimiento__imagen { --sangria: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); --canto: calc(var(--sangria) + (100vw - var(--sangria) * 2) * .39); position: absolute; top: 0; bottom: 0; left: 0; width: min(var(--canto), 580px); margin: 0; pointer-events: none; }
#cumplimiento .cumplimiento__imagen img { position: absolute; top: 0; left: 100%; width: auto; max-width: none; height: 100%; translate: -59.6% 0; transform-origin: 18.8% 49%; -webkit-mask-image: radial-gradient(ellipse 43% 49% at 18.8% 49%, #000 91%, transparent 100%); mask-image: radial-gradient(ellipse 43% 49% at 18.8% 49%, #000 91%, transparent 100%); }
#cumplimiento .cumplimiento__pilares { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
#cumplimiento .cumplimiento__riel { display: none; position: absolute; top: 42px; bottom: 42px; left: 4px; width: 1px; background: var(--hilo); }
#cumplimiento .cumplimiento__riel span { display: block; height: 100%; background: var(--oro); }
#cumplimiento .cumplimiento__pilar { position: relative; min-width: 0; border-top: 1px solid var(--hilo); }
#cumplimiento .cumplimiento__punto { position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); }
#cumplimiento .cumplimiento__fila { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-block: 18px 24px; }
#cumplimiento .cumplimiento__fila .icono { width: var(--ico-m, 24px); height: var(--ico-m, 24px); color: var(--oro-texto); }
#cumplimiento .cumplimiento__fila .h3 { font-size: var(--t-h4, 1.125rem); letter-spacing: -.015em; line-height: 1.3; }
#cumplimiento .cumplimiento__fila p { color: var(--texto-2); margin-top: 6px; font-size: var(--t-desc, 1.0625rem); line-height: var(--lh-desc, 1.47); }
#cumplimiento .cumplimiento__pilar--pendiente .cumplimiento__punto { background: var(--hilo); }
#cumplimiento .cumplimiento__pilar--pendiente .icono { color: var(--texto-3); }
@media (max-width: 899px) {
  #cumplimiento .cumplimiento__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #cumplimiento .cumplimiento__introduccion, #cumplimiento .cumplimiento__pilares { grid-column: auto; }
  /* Medallón centrado alrededor del eje: el archivo trae la puerta cortada por la izquierda,
     así que el círculo mayor sin corte es este. 267.7% = 1301 / 486, el diámetro del corte. */
  #cumplimiento .cumplimiento__imagen { position: relative; top: auto; bottom: auto; left: auto; justify-self: center; width: 300px; max-width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
  #cumplimiento .cumplimiento__imagen::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--oro); border-radius: 50%; }
  #cumplimiento .cumplimiento__imagen img { top: -50.8%; left: -.4%; width: 267.7%; height: auto; translate: none; transform-origin: 18.8% 49%; -webkit-mask-image: none; mask-image: none; }
  #cumplimiento .cumplimiento__pilares { display: block; }
  #cumplimiento .cumplimiento__riel { display: block; }
  #cumplimiento .cumplimiento__pilar { padding-left: 32px; border-top: 0; }
  #cumplimiento .cumplimiento__punto { top: 37.5px; width: 9px; height: 9px; box-shadow: 0 0 0 5px var(--marfil); }
  #cumplimiento .cumplimiento__fila { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding-block: 28px; border-bottom: 1px solid var(--hilo); }
  #cumplimiento .cumplimiento__pilar:last-of-type .cumplimiento__fila { border-bottom: 0; }
}