.fase-fila {
    display: grid; gap: .4rem 1.5rem; padding: 1.15rem 0;
    border-top: 1px solid rgba(var(--navy-rgb), .12); align-items: baseline;
  }
  @media (min-width: 768px) {
    .fase-fila { grid-template-columns: 2.2rem 12rem 1fr; }
  }
  .fase-numero {
    font-family: var(--tipo-titulo); color: var(--oro-hondo); font-size: var(--t-l);
  }
  .fase-nombre { font-family: var(--tipo-titulo); font-style: italic; font-size: var(--t-l); }
  .fase-glosa { display: block; font-style: normal; font-family: var(--tipo-interfaz);
                font-size: var(--t-sm); color: var(--tinta-suave); }

  .rasgo { border-left: 3px solid var(--uca-oro); padding-left: 1.2rem; }
  .rasgo h3 { font-size: var(--t-xl); margin-bottom: .5rem; }

  .ejemplo {
    background: var(--papel); border: 1px solid rgba(var(--navy-rgb), .13);
    border-radius: var(--radio-xs); padding: 1.4rem; font-family: var(--tipo-titulo);
  }
  .ejemplo .rotulo {
    font-family: var(--tipo-interfaz); font-size: var(--t-xs); letter-spacing: .12em;
    text-transform: uppercase; color: var(--oro-hondo); font-weight: 600;
    display: block; margin-bottom: .5rem;
  }